/**
 * Consent banner (Phase B, docs/83/84). Token-driven only, matches the V3
 * navy/cream/gold system.
 *
 * Desktop/tablet (>820px): a slim, full-width bar hugging the very bottom
 * edge (~64-70px tall) rather than a tall corner card — found by QA to
 * genuinely overlap the homepage hero's own "Get my home value" CTA when
 * a corner card was tried (confirmed with elementFromPoint: the card was
 * capturing clicks meant for the button underneath). A thin full-width
 * strip has a far smaller footprint than a corner card and hugs an edge no
 * primary page content is ever placed against.
 *
 * Known, accepted edge case (documented in the Phase E QA report, not
 * silently "fixed"): on short viewports (~820px tall or less), before the
 * visitor has scrolled at all, this bar can still overlap the homepage's
 * secondary quick-search widget (location/price/beds/type + its own
 * "Search homes" button), which sits right at the fold by the page's own
 * design — pushing page content up via body padding was tried and does NOT
 * help, since that widget sits near the TOP of the page, not the bottom, so
 * nothing after it in scroll order can pull it out of the way. No bar
 * height that still holds legible text and accessible (~44px) touch targets
 * can guarantee zero overlap at that viewport height. This matches how
 * effectively every bottom cookie bar on the web behaves on first paint;
 * the bar's own Accept/Reject/× stay one click away and the site's primary
 * hero CTAs are never covered.
 *
 * Mobile (<=820px): a centered, scrim-backed card instead of a bottom
 * sheet — deliberately, so it never collides with the sticky bottom action
 * bar (.zre-mobilebar, z-index 15) or the slide-down mobile menu (z-index
 * 19) already on screen at narrow widths. z-index here is intentionally
 * higher than both, but the mobile layout never shares the bottom edge
 * with either of them.
 */

/* Reserved via consent.js (body.style.paddingBottom) whenever the desktop/tablet bar is open,
   sized to the bar's own rendered height — see consent.js reserveSpace(). Pushes any page
   content that sits AFTER the bar in scroll order out of the way. Does not (and structurally
   cannot) help the one documented exception above, where the colliding content sits BEFORE
   the bar in scroll order instead. */
body { transition: padding-bottom .22s ease; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

.zre-consent {
	position: fixed;
	z-index: 30;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	pointer-events: none; /* only the bar/card itself is interactive — never blocks the page underneath */
}
.zre-consent[hidden] { display: none; }

.zre-consent__card {
	pointer-events: auto;
	position: relative;
	width: 100%;
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 -8px 24px rgba(16, 35, 63, .1);
	padding: var(--space-3) var(--space-5);
	display: flex;
	align-items: center;
	gap: var(--space-5);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .22s ease, transform .22s ease;
}
.zre-consent.is-open .zre-consent__card { opacity: 1; transform: translateY(0); }
.zre-consent--no-motion .zre-consent__card { transition: none; }

.zre-consent__close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 26px;
	height: 26px;
	border: none;
	background: transparent;
	color: var(--color-muted);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	border-radius: var(--radius-sm);
}
.zre-consent__close:hover,
.zre-consent__close:focus-visible { color: var(--color-ink); background: var(--color-surface-alt); }

.zre-consent__text {
	margin: 0;
	flex: 1 1 auto;
	min-width: 200px;
	font-size: var(--text-small);
	color: var(--color-graphite);
	line-height: var(--leading-body, 1.5);
	padding-right: var(--space-6); /* room for the close control */
}
.zre-consent__text a { color: var(--color-cobalt); text-decoration: underline; }
.zre-consent__privacy-pending { color: var(--color-muted); font-style: italic; }

.zre-consent__actions {
	display: flex;
	gap: var(--space-3);
	flex: 0 0 auto;
	flex-wrap: wrap;
}
.zre-consent__actions .zre-btn {
	white-space: nowrap;
	justify-content: center;
}

/* Equal visual weight for Accept/Reject — no dark pattern: both are full, legible buttons, neither styled to look like a dismiss/decoy. */
.zre-consent__actions .zre-btn--ghost,
.zre-consent__actions .zre-btn--primary {
	font-size: var(--text-small);
	padding: 10px var(--space-4);
}

/* Focus visibility, keyboard users */
.zre-consent__card :focus-visible {
	outline: 2px solid var(--color-cobalt);
	outline-offset: 2px;
}

@media (max-width: 820px) {
	.zre-consent {
		top: 0;
		align-items: center;
		justify-content: center;
		padding: var(--space-4);
		background: rgba(16, 35, 63, .28); /* soft scrim so the centered card reads clearly above page content and the two fixed bars */
	}
	.zre-consent__card {
		flex-direction: column;
		align-items: stretch;
		max-width: 380px;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-panel, 0 12px 32px rgba(16, 35, 63, .22));
		padding: var(--space-5) var(--space-5) var(--space-4);
	}
	.zre-consent__text { padding-right: var(--space-5); margin-bottom: var(--space-4); }
	.zre-consent__actions .zre-btn { flex: 1 1 auto; min-width: 120px; }
}

/* Footer controls — colors match the footer's own dark palette (#0C1524 bg, #a9b3c4 base text,
   components.css), not --color-muted, which is tuned for the light page background instead. */
/* Horizontal spacing here is carried by margins, never by flex column-gap: Safari has dropped flex gap
   between inline-flex children, which left each "·" flush against the link before it. Row gap stays. */
.zre-footer__legal { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: var(--space-2); column-gap: 0; margin-top: var(--space-3); justify-content: center; }
/* Separator + following link are one flex item, so a wrap never strands a "·" at a line end. Spacing inside
   the item uses a margin (not gap) so it also holds on older Safari without flex-gap support. */
.zre-footer__legal-item { display: inline-flex; align-items: baseline; }
.zre-footer__legal-sep { font-size: var(--text-micro); color: #6b7688; user-select: none; margin: 0 var(--space-4); }
.zre-footer__consent-link { margin-left: var(--space-4); } /* the only gap not carried by a separator */
.zre-footer__legal-link {
	font-size: var(--text-micro);
	color: #a9b3c4;
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}
.zre-footer__legal-link:hover,
.zre-footer__legal-link:focus-visible { color: #fff; text-decoration: underline; }
.zre-footer__consent-link { text-decoration: underline; text-underline-offset: 2px; }