/**
 * Lennox consent banner — Lennox styling over Complianz's cmplz-* banner.
 *
 * Brand intent (design spec §15 / brand tokens): a restrained editorial dialog,
 * ivory surface + charcoal text, Garamond display + Optima UI, EQUAL Accept/Reject
 * prominence (no dark pattern), quiet settings, muted toggles (no traffic-lights),
 * visible focus, reduced-motion aware.
 *
 * Tokens fall back to hex so this also renders correctly inside the Complianz admin
 * preview (where kalium-child's :root tokens are not loaded). Complianz exposes stable
 * cmplz-* classes, so !important is used only to win over the vendor banner defaults.
 */

/* ── Container: compact, bottom-anchored editorial dialog ─────────────────── */
#cmplz-cookiebanner-container .cmplz-cookiebanner,
.cmplz-cookiebanner {
	background: var(--lx-ivory, #FAF7F4) !important;
	color: var(--text-primary, #3D3935) !important;
	font-family: var(--font-sans, "Optima Pro", "Optima", "Segoe UI", sans-serif) !important;
	border: 1px solid var(--lx-pearl, #E8E3DC) !important;
	border-radius: 14px !important;
	box-shadow: 0 18px 48px rgba(61, 57, 53, 0.16) !important;
	padding: 28px 30px !important;
	max-width: 560px !important;
}

/* ── Header / title: Garamond display ─────────────────────────────────────── */
.cmplz-cookiebanner .cmplz-header .cmplz-title,
.cmplz-cookiebanner .cmplz-title {
	font-family: var(--font-display, "Garamond Premier Pro", "EB Garamond", Garamond, serif) !important;
	font-weight: 600 !important;
	font-size: 22px !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-primary, #3D3935) !important;
	margin: 0 0 10px !important;
}

/* ── Close (✕): lighter + smaller (codex nit 2026-06-26 — the default ✕ reads
 *    heavier than the refined type/buttons). Muted by default; full on hover/focus. */
.cmplz-cookiebanner .cmplz-close {
	opacity: 0.55 !important;
	transition: opacity 0.2s ease !important;
}
.cmplz-cookiebanner .cmplz-close:hover,
.cmplz-cookiebanner .cmplz-close:focus-visible {
	opacity: 1 !important;
}
.cmplz-cookiebanner .cmplz-close svg {
	width: 16px !important;
	height: 16px !important;
}

/* ── Body / message: editorial body ───────────────────────────────────────── */
.cmplz-cookiebanner .cmplz-body .cmplz-message,
.cmplz-cookiebanner .cmplz-message {
	font-family: var(--font-sans, "Optima Pro", "Optima", sans-serif) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--text-secondary, #5C544C) !important;
}

/* ── Buttons: Lennox button language; Accept + Reject get EQUAL prominence ──── */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn,
.cmplz-cookiebanner .cmplz-btn {
	font-family: var(--font-sans, "Optima Pro", "Optima", sans-serif) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	border-radius: 8px !important;
	padding: 12px 22px !important;
	min-width: 132px !important;
	cursor: pointer !important;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

/* Accept + Reject — IDENTICAL treatment for true equal prominence (ethical consent;
 * codex visual gate 2026-06-26: a filled Accept beside an outlined Deny privileges
 * Accept as the default = a dark pattern). Same outline, same hover. The LABEL is the
 * only differentiator — neither action is visually weighted over the other. */
.cmplz-cookiebanner .cmplz-btn.cmplz-accept,
.cmplz-cookiebanner .cmplz-btn.cmplz-deny {
	background: transparent !important;
	color: var(--text-primary, #3D3935) !important;
	border: 1px solid var(--lx-grey, #3D3935) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover {
	background: var(--lx-grey, #3D3935) !important;
	color: var(--lx-ivory, #FAF7F4) !important;
}

/* Tertiary actions (View / Save / Manage preferences) — quiet, subordinate to the
 * Accept/Deny choice. Complianz button classes verified against live markup 2026-06-26
 * (coderabbit: the prior `.cmplz-save` selector was a no-op — these are the real classes,
 * which otherwise fall back to Complianz's default #f9f9f9/#f2f2f2). */
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-manage-options {
	background: transparent !important;
	color: var(--text-secondary, #5C544C) !important;
	border: 1px solid var(--lx-cashmere, #B5ACA3) !important;
	min-width: auto !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-manage-options:hover {
	color: var(--text-primary, #3D3935) !important;
	border-color: var(--lx-grey, #3D3935) !important;
}

/* ── Links: quiet, underlined ─────────────────────────────────────────────── */
.cmplz-cookiebanner .cmplz-links a,
.cmplz-cookiebanner .cmplz-links .cmplz-link {
	font-family: var(--font-sans, "Optima Pro", "Optima", sans-serif) !important;
	color: var(--text-secondary, #5C544C) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 3px !important;
}
.cmplz-cookiebanner .cmplz-links a:hover {
	color: var(--text-primary, #3D3935) !important;
}

/* ── Category toggles: muted (no traffic-light colours) ───────────────────── */
.cmplz-cookiebanner .cmplz-categories .cmplz-category,
.cmplz-cookiebanner .cmplz-category {
	color: var(--text-primary, #3D3935) !important;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-banner-checkbox .cmplz-slider {
	background: var(--lx-cashmere, #B5ACA3) !important;
}

/* ── Accessibility: visible focus + reduced motion ────────────────────────── */
.cmplz-cookiebanner .cmplz-btn:focus-visible,
.cmplz-cookiebanner a:focus-visible,
.cmplz-cookiebanner input:focus-visible {
	outline: 2px solid var(--lx-grey, #3D3935) !important;
	outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
	.cmplz-cookiebanner,
	.cmplz-cookiebanner .cmplz-btn {
		transition: none !important;
	}
}

/* ── Mobile: comfortable safe-area, stacked buttons ───────────────────────── */
@media (max-width: 600px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner,
	.cmplz-cookiebanner {
		max-width: 100% !important;
		padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
		border-radius: 14px 14px 0 0 !important;
	}
	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn,
	.cmplz-cookiebanner .cmplz-btn {
		width: 100% !important;
	}
}