/*
 * ALTA Integra - cookie consent banner styling (preview build).
 * Matches the site: Inter, maroon accent, near-black text, white surfaces,
 * square-ish corners. Mobile-first: buttons stack under 640px.
 */

#alta-consent-root {
	--alta-consent-maroon: #7A212E;
	--alta-consent-maroon-hover: #661a25;
	--alta-consent-ink: #0a0a0a;
	--alta-consent-surface: #ffffff;
	--alta-consent-border: #e2e2e2;
	--alta-consent-radius: 4px;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--alta-consent-ink);
}

#alta-consent-root [hidden] {
	display: none !important;
}

/* ----- banner: bottom bar ----- */
#alta-consent-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	background: var(--alta-consent-surface);
	border-top: 1px solid var(--alta-consent-border);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
	padding: 20px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.alta-consent-banner__text {
	margin: 0;
	flex: 1 1 320px;
	font-size: 14px;
	line-height: 1.6;
}

.alta-consent-banner__text a {
	color: var(--alta-consent-maroon);
	text-decoration: underline;
}

.alta-consent-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex: 0 0 auto;
}

/* ----- buttons: Allow all and Accept only necessary share the same size,
   weight and border so neither reads as the "real" choice. ----- */
.alta-consent-btn {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	padding: 12px 20px;
	border-radius: var(--alta-consent-radius);
	border: 1.5px solid var(--alta-consent-maroon);
	cursor: pointer;
	white-space: nowrap;
}

.alta-consent-btn--primary {
	background: var(--alta-consent-maroon);
	color: #ffffff;
}
.alta-consent-btn--primary:hover {
	background: var(--alta-consent-maroon-hover);
}

.alta-consent-btn--secondary {
	background: #ffffff;
	color: var(--alta-consent-maroon);
}
.alta-consent-btn--secondary:hover {
	background: #f7ecec;
}

.alta-consent-btn--ghost {
	background: transparent;
	color: var(--alta-consent-ink);
	border-color: var(--alta-consent-border);
}
.alta-consent-btn--ghost:hover {
	background: #f5f5f5;
}

#alta-consent-root button:focus-visible,
#alta-consent-root a:focus-visible {
	outline: 3px solid var(--alta-consent-maroon);
	outline-offset: 2px;
}

/* ----- preferences panel: centred modal ----- */
#alta-consent-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(10, 10, 10, 0.5);
	z-index: 100000;
}

#alta-consent-panel {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100001;
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100vh - 64px);
	overflow-y: auto;
}

.alta-consent-panel__box {
	position: relative;
	background: var(--alta-consent-surface);
	border-radius: var(--alta-consent-radius);
	padding: 32px 28px;
}

.alta-consent-panel__box h2 {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
}

.alta-consent-panel__box > p {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.6;
	color: #444444;
}

.alta-consent-row {
	border-top: 1px solid var(--alta-consent-border);
	padding: 16px 0;
}

.alta-consent-row__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.alta-consent-row__label {
	font-weight: 600;
	font-size: 14px;
}

.alta-consent-row__desc {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #555555;
}

.alta-consent-row__badge {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b6b6b;
	background: #f0f0f0;
	padding: 4px 8px;
	border-radius: var(--alta-consent-radius);
	white-space: nowrap;
}

.alta-consent-toggle {
	position: relative;
	width: 44px;
	height: 24px;
	/* responsive.css carries `@media(max-width:1024px){button,.ai-tap{min-height:48px}}`,
	   a bare element selector that hits this switch. min-height beats height no matter
	   the specificity, so without these two lines the pill becomes 48px tall below
	   1024px while the knob stays pinned at top:2px, which reads as a broken or
	   already-on control. Opting out per element, never by touching that rule. */
	min-height: 24px;
	max-height: 24px;
	flex: 0 0 auto;
	border-radius: 999px;
	border: 1.5px solid var(--alta-consent-border);
	background: #e6e6e6;
	padding: 0;
	cursor: pointer;
}

.alta-consent-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ffffff;
	transition: left 0.15s ease;
}

.alta-consent-toggle.is-on {
	background: var(--alta-consent-maroon);
	border-color: var(--alta-consent-maroon);
}
.alta-consent-toggle.is-on::after {
	left: 22px;
}

.alta-consent-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--alta-consent-border);
}

.alta-consent-panel__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	border-radius: var(--alta-consent-radius);
}
.alta-consent-panel__close:hover {
	background: #f5f5f5;
}

/* ----- footer "Cookie settings" link, injected by consent.js ----- */
.alta-consent-footer-link-wrap {
	display: inline-block;
}
.alta-consent-footer-link {
	font-family: inherit;
	font-size: 13px;
	color: inherit;
	background: none;
	border: none;
	padding: 4px 0;
	text-decoration: underline;
	cursor: pointer;
}

/* ----- mobile: stacked buttons under 640px ----- */
@media (max-width: 640px) {
	#alta-consent-banner {
		flex-direction: column;
		align-items: stretch;
		padding: 16px;
	}
	.alta-consent-banner__actions {
		flex-direction: column;
	}
	.alta-consent-btn {
		width: 100%;
		text-align: center;
	}
	.alta-consent-panel__box {
		padding: 24px 20px;
	}
}

/* ---------------------------------------------------------------------------
   The site's WhatsApp launcher (#ai-wa, added 2026-08-24) is position:fixed at
   right:32px / bottom:32px / z-index:99999, so it lands directly on top of this
   bar's last button and swallows the click. Two fixes, both needed: the consent
   layers now sit above 99999 (see above), and while the consent UI is open the
   launcher is lifted clear by the bar's own measured height, published by
   consent.js as --alta-consent-h. Measured rather than hard-coded because the
   bar grows when the copy wraps on narrow screens.
   --------------------------------------------------------------------------- */
body.alta-consent-open #ai-wa {
	bottom: calc(32px + var(--alta-consent-h, 0px) + 16px);
	transition: bottom .18s ease;
}