/* ==========================================================================
   COOKIE CONSENT -- banner + preferences dialog.

   STABILIZATION (2026-09): this file had ZERO dark-mode coverage. It hardcoded
   #fff surfaces and #3b3e52 / #6b6e85 text, so in dark mode the banner was a
   white card with dark-grey text sitting over a dark page -- the only
   notification surface on the site that did not follow the theme.

   The note at the scrim rule below already recorded why: this is plugin CSS and
   was outside the theme-only file list of the visual-identity redesign, so the
   sweep never reached it. The scrim was patched then; the surfaces were not.

   HOW IT IS FIXED. The component declares its own local variables, each
   defaulting to the theme's token and falling back to the previous literal.
   Under the Cedar Buy theme the tokens exist and flip, so the banner follows
   the theme for free. Under any other theme the literals apply and the explicit
   dark blocks below still give a correct dark presentation -- so this works
   standalone, which plugin CSS has to.

   The three-state pattern (bare :root / prefers-color-scheme guarded by
   :not([data-theme="light"]) / [data-theme="dark"]) is the theme's own
   convention, copied deliberately rather than invented here.
   ========================================================================== */

.cb-consent-banner,
.cb-consent-modal {
	--cbc-surface: var(--cb-surface, #fff);
	--cbc-border:  var(--cb-border, #e1e3ee);
	--cbc-text:    var(--cb-ink-700, #3b3e52);
	--cbc-muted:   var(--cb-ink-500, #6b6e85);
	--cbc-shadow:  var(--cb-shadow-lg, 0 8px 24px rgba(15, 12, 41, 0.18));
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .cb-consent-banner,
	:root:not([data-theme="light"]) .cb-consent-modal {
		--cbc-surface: var(--cb-surface, #1d1b2e);
		--cbc-border:  var(--cb-border, #353149);
		--cbc-text:    var(--cb-ink-700, #c4c2d4);
		--cbc-muted:   var(--cb-ink-500, #9995ac);
		--cbc-shadow:  var(--cb-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.55));
	}
}

:root[data-theme="dark"] .cb-consent-banner,
:root[data-theme="dark"] .cb-consent-modal {
	--cbc-surface: var(--cb-surface, #1d1b2e);
	--cbc-border:  var(--cb-border, #353149);
	--cbc-text:    var(--cb-ink-700, #c4c2d4);
	--cbc-muted:   var(--cb-ink-500, #9995ac);
	--cbc-shadow:  var(--cb-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.55));
}

.cb-consent-banner[hidden],
.cb-consent-modal[hidden] {
	display: none !important;
}

.cb-consent-banner {
	position: fixed;
	left: 16px;
	right: 16px;
	/* STABILIZATION (2026-09): was a flat `bottom: 16px`, which put the banner
	   on top of the mobile bottom navigation (height 60px + safe area, z 500)
	   and covered all five tabs while it was open -- and, on a notched phone,
	   sat in the home-indicator strip. It now clears both. --cb-bottom-nav-h is
	   published by the theme (0 on desktop, 60px where the bar shows) and falls
	   back to 0px under a theme that has no bottom bar. */
	bottom: calc(16px + var(--cb-bottom-nav-h, 0px) + env(safe-area-inset-bottom, 0px));
	z-index: 999;
	background: var(--cbc-surface);
	border: 1px solid var(--cbc-border);
	border-radius: 14px;
	box-shadow: var(--cbc-shadow);
	padding: 18px 20px;
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 900px;
	margin: 0 auto;
}
.cb-consent-banner__text p { margin: 0; font-size: 0.88rem; color: var(--cbc-text); max-width: 60ch; }
.cb-consent-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cb-consent-modal {
	position: fixed;
	inset: 0;
	/* FIX (desktop audit, 2026-08): this scrim/shadow/text-color trio was
	   still using pre-redesign green literals (old --cb-success-900 #123d28
	   and its neutral-grey companion) -- every other scrim/overlay sitewide
	   (.cb-modal, .cb-mobile-nav-scrim, .cb-explore-scrim, etc.) already
	   uses rgba(15, 12, 41, ...), the current --cb-primary-900-based tint.
	   This plugin CSS file was outside the visual-identity redesign
	   round's file list (theme CSS only), so the sweep never reached it. */
	background: var(--cb-scrim, rgba(15, 12, 41, 0.45));
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 16px;
}
.cb-consent-modal__dialog {
	background: var(--cbc-surface);
	color: var(--cbc-text);
	border-radius: 14px;
	padding: 24px;
	max-width: 420px;
	width: 100%;
}
.cb-consent-modal__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--cbc-border);
}
.cb-consent-modal__row small { display: block; color: var(--cbc-muted); font-size: 0.78rem; }
.cb-consent-modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

@media (max-width: 640px) {
	.cb-consent-banner { flex-direction: column; align-items: stretch; }
	.cb-consent-banner__actions { justify-content: flex-end; }
}

/* Legal links inside the banner and the preferences dialog (2026-09).
   A consent notice that asks for a decision without linking to what the
   decision is about is the failing regulators single out most often. Styled
   quietly -- these are for the reader who wants the detail, and must not
   compete with the three decision buttons. */
.cb-consent-banner__links,
.cb-consent-modal__links {
	margin: 6px 0 0;
	font-size: 0.8rem;
	line-height: 1.5;
	opacity: 0.85;
}
.cb-consent-modal__links { margin: 12px 0 0; }
.cb-consent-banner__links a,
.cb-consent-modal__links a {
	/* Real navigation targets, so the 24px floor applies here too. */
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	text-decoration: underline;
}