/* Consent banner. Self-contained, oh- prefixed, no build step. */

.oh-consent {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 2147483000; /* above site chrome, below nothing that matters */
	padding: 16px;
	/* Start off-screen; oh-consent.js adds .oh-consent-visible once bound. */
	transform: translateY(120%);
	transition: transform 0.28s ease;
	pointer-events: none;
}

.oh-consent-visible {
	transform: translateY(0);
	pointer-events: auto;
}

.oh-consent-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1080px;
	margin: 0 auto;
	padding: 16px 20px;
	background: #ffffff;
	color: #1f2430;
	border: 1px solid #e6e8ef;
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(20, 24, 40, 0.18);
}

.oh-consent-text {
	flex: 1 1 300px;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

.oh-consent-link {
	color: #4f46e5;
	text-decoration: underline;
}

.oh-consent-actions {
	display: flex;
	flex: 0 0 auto;
	gap: 10px;
}

.oh-consent-btn {
	appearance: none;
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 11px 18px;
	border-radius: 10px;
	border: 1px solid transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.oh-consent-btn-primary {
	background: #4f46e5;
	color: #ffffff;
}

.oh-consent-btn-primary:hover {
	background: #4338ca;
}

.oh-consent-btn-secondary {
	background: transparent;
	color: #4b5162;
	border-color: #cfd3df;
}

.oh-consent-btn-secondary:hover {
	background: #f3f4f8;
}

.oh-consent-btn:focus-visible {
	outline: 2px solid #4f46e5;
	outline-offset: 2px;
}

@media (max-width: 560px) {
	.oh-consent-inner {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * `flex-basis` is measured along the main axis, and the rule above
	 * turns the main axis vertical — so the desktop `flex: 1 1 300px`
	 * stopped meaning "at least 300px wide" and started meaning "at least
	 * 300px TALL". The card reserved ~230px of empty space under the text
	 * and, at phone height, covered the form behind it. Size to content.
	 */
	.oh-consent-text {
		flex: 0 0 auto;
	}

	.oh-consent-actions {
		justify-content: stretch;
	}

	.oh-consent-btn {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oh-consent {
		transition: none;
	}
}