/**
 * Cookie consent banner — Cabinets Doors Replacement styling.
 *
 * Complianz exposes its colours and type sizes as CSS custom properties, so
 * most of this file just re-points those at the theme tokens instead of
 * rewriting the plugin's rules.
 *
 * On specificity: Complianz writes a generated stylesheet
 * (uploads/complianz/css/banner-1-optin.css) that re-declares the same
 * `:root` variables and loads *after* the theme, whatever enqueue order or
 * dependency we ask for. Rather than fight that, every selector here is
 * doubled — `:root:root`, `.cmplz-cookiebanner.cmplz-cookiebanner` — which
 * wins on specificity regardless of load order and keeps working if the
 * plugin changes when it enqueues.
 *
 * Loaded only when Complianz is active.
 */

/* ------------------------------------------------------------------ *
 * 1. Plugin variables re-pointed at the theme's design tokens
 * ------------------------------------------------------------------ */

:root:root {
	--cmplz_banner_width: 460px;
	--cmplz_banner_background_color: #fff;
	--cmplz_banner_border_color: var(--line, #e5eae5);
	--cmplz_banner_border_width: 1px;
	--cmplz_banner_border_radius: 16px;
	--cmplz_banner_margin: 10px;

	--cmplz_title_font_size: 1.02rem;
	--cmplz_text_color: var(--body, #5a6169);
	--cmplz_text_font_size: 0.85rem;
	--cmplz_hyperlink_color: var(--green, #194620);
	--cmplz_link_font_size: 0.78rem;
	--cmplz_category_body_font_size: 0.8rem;
	--cmplz_category_header_title_font_size: 0.88rem;
	--cmplz_category_header_active_font_size: 0.74rem;
	--cmplz_category_header_always_active_color: var(--green, #194620);

	/* Only the primary action carries the brand green; the others stay quiet
	   outlines so "Accept" is not competing with two equally loud buttons. */
	--cmplz_button_accept_background_color: var(--green, #194620);
	--cmplz_button_accept_border_color: var(--green, #194620);
	--cmplz_button_accept_text_color: #fff;

	--cmplz_button_deny_background_color: #fff;
	--cmplz_button_deny_border_color: var(--green-line, #cfe0d2);
	--cmplz_button_deny_text_color: var(--green, #194620);

	--cmplz_button_settings_background_color: #fff;
	--cmplz_button_settings_border_color: var(--green-line, #cfe0d2);
	--cmplz_button_settings_text_color: var(--green, #194620);

	--cmplz_button_border_radius: 8px;
	--cmplz_button_font_size: 0.9rem;

	--cmplz_slider_active_color: var(--green, #194620);
	--cmplz_slider_inactive_color: #cfd6cf;
	--cmplz_slider_bullet_color: #fff;
}

/* ------------------------------------------------------------------ *
 * 2. Container
 * ------------------------------------------------------------------ */

.cmplz-cookiebanner.cmplz-cookiebanner {
	font-family: var(--font, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
	line-height: 1.55;
	padding: 20px 22px;
	/* The plugin default is a heavy double drop shadow; this matches the
	   elevation used by cards elsewhere on the site. */
	box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
}

/* Neutralise the shadow that grows on hover — the banner is not a control. */
.cmplz-cookiebanner.cmplz-cookiebanner.cmplz-show:hover {
	box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
}

/* ------------------------------------------------------------------ *
 * 3. Header
 * ------------------------------------------------------------------ */

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-title {
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--ink, #14171a);
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close {
	color: var(--muted, #7c848c);
	border-radius: 6px;
	transition: color 0.15s ease;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close:hover {
	color: var(--ink, #14171a);
	/* The default shrinks the glyph on hover, which makes it twitch. */
	font-size: 20px;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-divider {
	border-color: var(--line, #e5eae5);
	background-color: var(--line, #e5eae5);
}

/* ------------------------------------------------------------------ *
 * 4. Body and categories
 * ------------------------------------------------------------------ */

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background-color: var(--sage, #f7faf6);
	border: 1px solid var(--line, #e5eae5);
	border-radius: 10px;
	overflow: hidden;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-title {
	font-weight: 700;
	color: var(--ink, #14171a);
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-always-active {
	font-weight: 600;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
	color: var(--muted, #7c848c);
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-category-toggle .cmplz-icon svg {
	fill: var(--green, #194620);
}

/* ------------------------------------------------------------------ *
 * 5. Buttons
 * ------------------------------------------------------------------ */

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	font-family: inherit;
	font-weight: 700;
	min-height: 44px;
	padding: 12px 16px;
	transition: background-color 0.18s ease, border-color 0.18s ease,
		color 0.18s ease, box-shadow 0.18s ease;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
	background-color: var(--green-hover, #123317);
	border-color: var(--green-hover, #123317);
	box-shadow: 0 4px 16px rgba(16, 24, 40, 0.12);
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
	background-color: var(--green-soft, #e9f1ea);
	border-color: var(--green, #194620);
	color: var(--green, #194620);
}

/* ------------------------------------------------------------------ *
 * 6. Links and focus
 * ------------------------------------------------------------------ */

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-links .cmplz-link {
	text-underline-offset: 2px;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-links .cmplz-link:hover {
	color: var(--green-hover, #123317);
}

/* Keyboard focus should look the same here as everywhere else on the site. */
.cmplz-cookiebanner.cmplz-cookiebanner a:focus-visible,
.cmplz-cookiebanner.cmplz-cookiebanner button:focus-visible,
.cmplz-cookiebanner.cmplz-cookiebanner [tabindex]:focus-visible {
	outline: 3px solid var(--green, #194620);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ------------------------------------------------------------------ *
 * 7. "Manage consent" tab
 * ------------------------------------------------------------------ */

/* The class is repeated so this outranks the plugin's own
   `#cmplz-manage-consent .cmplz-manage-consent` rule, which has equal
   specificity but loads later and would otherwise leave the tab white. */
#cmplz-manage-consent .cmplz-manage-consent.cmplz-manage-consent {
	font-family: var(--font, sans-serif);
	font-size: 0.78rem;
	font-weight: 700;
	color: #fff;
	background-color: var(--green, #194620);
	border-color: var(--green, #194620);
	border-width: 1px;
	box-shadow: 0 -2px 10px rgba(16, 24, 40, 0.14);
	transition: background-color 0.18s ease;
}

#cmplz-manage-consent .cmplz-manage-consent.cmplz-manage-consent:hover,
#cmplz-manage-consent .cmplz-manage-consent.cmplz-manage-consent:focus {
	background-color: var(--green-hover, #123317);
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * 8. Mobile: clear the sticky call bar
 *
 * The theme pins a phone/quote bar to the bottom of the screen below 768px,
 * and Complianz puts the banner flush at `bottom: 0` on the same breakpoint —
 * so out of the box the banner buries the site's main call to action.
 * The plugin's rule and this one have equal specificity but it loads later,
 * hence !important on the position properties only.
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.cmplz-cookiebanner.cmplz-cookiebanner {
		bottom: calc(var(--mobile-bar-h, 60px) + 10px + env(safe-area-inset-bottom)) !important;
		left: 8px !important;
		right: 8px !important;
		width: auto !important;
		border-radius: 14px;
		max-height: calc(100vh - var(--mobile-bar-h, 60px) - 40px);
	}
}

/* Respect the same motion preference as the rest of the site. */
@media (prefers-reduced-motion: reduce) {
	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn,
	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close,
	#cmplz-manage-consent .cmplz-manage-consent {
		transition: none;
	}
}