/*
 * Wandhaus styling for the Complianz cookie consent banner.
 *
 * Complianz applies its palette via inline styles on the banner record, so we
 * override the brand-relevant properties with `!important` (these beat inline
 * non-important declarations regardless of load order). Tokens only, per the
 * design-system rule — pulls from css/tokens.css (V3 teal-petrol palette).
 *
 * Targets Complianz's stable banner classes (v7): .cmplz-cookiebanner,
 * .cmplz-title/.cmplz-body, .cmplz-btn + .cmplz-accept/.cmplz-deny/
 * .cmplz-view-preferences/.cmplz-save-preferences, .cmplz-category, .cmplz-link.
 *
 * @package storefront-collage-child
 */

/* ── Container ─────────────────────────────────────────────────────── */
#cmplz-cookiebanner-container .cmplz-cookiebanner,
.cmplz-cookiebanner.cmplz-bottom,
.cmplz-cookiebanner {
	background: var(--surface) !important;
	color: var(--ink-2) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-lg) !important;
	box-shadow: var(--shadow-modal) !important;
	font-family: var(--font-body) !important;
	padding: var(--s-5) !important;
	max-width: 460px !important;
}

/* Header / title — Fraunces display, ink. */
.cmplz-cookiebanner .cmplz-title {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: 1.15rem !important;
	letter-spacing: -.01em !important;
	color: var(--ink) !important;
	margin: 0 0 var(--s-2) !important;
}

/* Body copy + category descriptions. */
.cmplz-cookiebanner .cmplz-body,
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-description {
	font-family: var(--font-body) !important;
	font-size: .875rem !important;
	line-height: 1.6 !important;
	color: var(--ink-2) !important;
}

/* Policy / document links — teal accent. */
.cmplz-cookiebanner .cmplz-link,
.cmplz-cookiebanner .cmplz-links a,
.cmplz-cookiebanner .cmplz-documents a {
	color: var(--accent) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.cmplz-cookiebanner .cmplz-btn {
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	font-size: .875rem !important;
	border-radius: var(--radius-pill) !important;
	padding: 10px var(--s-20) !important;
	border: 1px solid transparent !important;
	transition: background-color .18s var(--ease, ease), color .18s var(--ease, ease), border-color .18s var(--ease, ease) !important;
	cursor: pointer !important;
}

/* Primary — Accept: teal fill, cool-white text. */
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
	background: var(--accent) !important;
	color: var(--surface) !important;
	border-color: var(--accent) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
	background: var(--accent-dark, color-mix(in srgb, var(--accent) 86%, black)) !important;
	border-color: var(--accent-dark, color-mix(in srgb, var(--accent) 86%, black)) !important;
}

/* Secondary — Deny: equal prominence (GDPR), outlined ink. */
.cmplz-cookiebanner .cmplz-btn.cmplz-deny {
	background: transparent !important;
	color: var(--ink) !important;
	border-color: var(--border) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover {
	background: var(--raised, color-mix(in srgb, var(--ink) 6%, transparent)) !important;
	border-color: var(--ink-muted) !important;
}

/* Tertiary — Manage / view / save preferences: ghost, teal text. */
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-manage-options,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
	background: transparent !important;
	color: var(--accent) !important;
	border-color: transparent !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
	padding-left: var(--s-2) !important;
	padding-right: var(--s-2) !important;
}

/* ── Category toggles ──────────────────────────────────────────────── */
.cmplz-cookiebanner .cmplz-category .cmplz-category-title {
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
}
/* Active toggle uses the teal accent. */
.cmplz-cookiebanner .cmplz-banner-checkbox input:checked + .cmplz-slider,
.cmplz-cookiebanner input.cmplz-banner-checkbox:checked + label,
.cmplz-cookiebanner .cmplz-banner-checkbox:checked {
	background-color: var(--accent) !important;
	border-color: var(--accent) !important;
}
/* "Always active" functional label. */
.cmplz-cookiebanner .cmplz-always-active {
	color: var(--accent) !important;
	font-weight: 600 !important;
}

/* The floating "manage consent" tab after dismissal. */
.cmplz-manage-consent .cmplz-btn,
#cmplz-manage-consent .cmplz-manage-consent-container {
	font-family: var(--font-body) !important;
	border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

/* On the chrome-free builder the floating "manage consent" tab sits on top of
   the bottom-bar "Bestel" CTA. Hide it there only — consent stays reachable
   via the same button on every other page. */
body.wccb-fullscreen .cmplz-manage-consent,
body.wccb-fullscreen #cmplz-manage-consent {
	display: none !important;
}

/* Mobile: full-width-ish, slightly tighter padding. */
@media (max-width: 640px) {
	.cmplz-cookiebanner {
		max-width: none !important;
		padding: 18px !important;
		border-radius: var(--radius-md) !important;
	}
}