/* ============================================================
   Complianz cookie banner — reskin to our glass pop-up standard.
   ⚠ STYLE ONLY — colours / transparency / fonts / texts + the two element
   appearances the owner asked to swap (checkbox → our box, chevron → our triangle).
   We do NOT touch mechanics / sizes / layout / view-flow: Complianz already has those
   set up correctly, and forcing display/flex/min-height/gap/align overrides its native
   show-hide logic and breaks the order of what's shown (memory: restyle-style-only).
   On the --tecp-pop-* tokens (popups.css) → follows the glass/white toggle.
   Complianz paints its colours from its own stylesheet (no --cmplz vars) → !important.
   ============================================================ */

/* dim behind the bar — ONLY while the banner is actually ON SCREEN.
   ⚠ Complianz renders BOTH an optin AND an optout banner; the inactive one stays
   display:none WITHOUT .cmplz-dismissed. The shown one carries .cmplz-show; on dismiss
   it loses .cmplz-show / gains .cmplz-dismissed. (Visual overlay only — no flow change.) */
/* ⚠ dim = one PERMANENT fixed layer (owner 2026-07-05). Earlier versions toggled
   position:fixed on/off via :has() — creating/destroying a viewport-sized layer next
   to backdrop-filter banners triggered a GPU-compositor WHITE FLASH covering the whole
   SCREEN incl. browser/Windows UI (driver-level artifact, worst on the first render of
   the optout banner after a reject). The layer now always exists; open/close only
   animates background-color and flips pointer-events — both compositor-cheap.
   pointer-events:none while closed = the page stays clickable through the invisible
   layer; the banner + manage-consent chip are position:fixed themselves and restore
   their own pointer-events below. */
#cmplz-cookiebanner-container {
    position: fixed; inset: 0; z-index: 99998;
    background-color: rgba(19, 19, 19, 0);
    pointer-events: none;
    transition: background-color 0.3s ease;
}
#cmplz-cookiebanner-container:has(.cmplz-cookiebanner.cmplz-show:not(.cmplz-dismissed)) {
    background-color: var(--tecp-pop-overlay-bg);
    pointer-events: auto;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner,
#cmplz-cookiebanner-container .cmplz-manage-consent {
    pointer-events: auto;   /* children stay clickable while the container is pointer-events:none */
}

/* the banner bar = glass (COLOUR / transparency / blur / font — NOT size or layout) */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
    background-color: var(--tecp-pop-panel-bg) !important;
    background-image: linear-gradient(var(--tecp-pop-panel-overlay, transparent), var(--tecp-pop-panel-overlay, transparent)) !important;   /* optional tint layer — parity with filter / size-guide / newsletter */
    -webkit-backdrop-filter: blur(var(--tecp-pop-panel-blur)) !important;
    backdrop-filter: blur(var(--tecp-pop-panel-blur)) !important;
    color: var(--tecp-pop-text-muted) !important;
    border: none !important; box-shadow: none !important; border-radius: 0 !important;
    font-family: Verdana, Geneva, sans-serif !important;
}

/* ---- texts — Verdana 12px / 1px (banner body + under the accordions) ---- */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-text,
#cmplz-cookiebanner-container .cmplz-cookiebanner p,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-always-active,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-description,
#cmplz-cookiebanner-container .cmplz-cookiebanner a:not(.cmplz-btn) {
    font-family: Verdana, Geneva, sans-serif !important;
    font-size: 12px !important; letter-spacing: 1px !important; line-height: 1.5 !important;
    text-transform: none !important;   /* "always active" no longer forced uppercase by Complianz */
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title { color: var(--tecp-pop-text) !important; font-weight: 400 !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-text,
#cmplz-cookiebanner-container .cmplz-cookiebanner p,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-always-active,   /* was Complianz green → muted */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-description { color: var(--tecp-pop-text-muted) !important; }
/* category headers (functional/statistics/marketing) + "always active" → lowercase */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-always-active { text-transform: lowercase !important; }
/* category descriptions → 11px / 1px (site disclaimer format), smaller than the 12px banner body */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-description { font-size: 11px !important; }

/* inline links — our standard (bold, 0.63 → #fff, no underline, pointer) */
#cmplz-cookiebanner-container .cmplz-cookiebanner a:not(.cmplz-btn) {
    color: rgba(255, 255, 255, 0.63) !important; font-weight: bold !important;
    text-decoration: none !important; cursor: pointer; transition: color 0.2s ease !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner a:not(.cmplz-btn):hover { color: #fff !important; }

/* Banner vertical whitespace — symmetric 25px top & bottom (both views).
   TOP: banner padding-top 15→5px (+ 20px native empty grid rows above the message = 25px).
   BOTTOM: footer links (cookies/privacy) wrapper margin-bottom 10px (+ 15px banner padding-bottom = 25px).
   So the bottom-left links breathe the same 25px as the top. Basic + manage share .cmplz-links. */
#cmplz-cookiebanner-container .cmplz-cookiebanner { padding-top: 5px !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links { margin-bottom: 10px !important; }

/* ---- buttons — site-standard colours + 44px height (both views).
   We do NOT force flex-direction: Complianz natively lays them out (row in the first view,
   column in the manage view). The 44px / 8px-gap / aligned manage-view layout is at the bottom. ---- */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
    height: 44px !important; min-height: 44px !important;
    background: var(--tecp-pop-surface) !important;
    color: var(--tecp-pop-text-muted) !important;
    border: none !important; border-radius: 0 !important; box-shadow: none !important;
    font-family: Verdana, Geneva, sans-serif !important;
    font-size: 12px !important; letter-spacing: 2px !important; text-transform: lowercase !important;
    transition: background 0.25s ease, color 0.25s ease !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:hover {
    background: var(--tecp-pop-surface-active) !important;
    color: var(--tecp-pop-text) !important;
}

/* ---- category panels — uniform 0.08 colour (header + expanded description read as ONE shade) +
   44px panel with vertically-centred content. NO hover highlight on the panel (only the chevron). ---- */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category { background: var(--tecp-pop-surface) !important; border: none !important; margin: 0 !important; }   /* margin:0 so only the 8px flex gap separates panels (else Complianz's margin makes 18px) */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-header {
    background: transparent !important; border: none !important;
    min-height: 44px !important; padding: 0 14px !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-header:hover { background: transparent !important; }   /* panel constant on hover (only the chevron reacts) */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title { flex: 1 1 auto !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-description { background: transparent !important; }

/* ---- MANAGE view ONLY (.cmplz-categories-visible) — 44px panels + buttons in aligned 8px-gap
   columns (our earlier layout). Scoped to .cmplz-categories-visible so the FIRST view stays NATIVE:
   horizontal buttons + categories hidden (Complianz owns that). ---- */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-categories,
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons {
    display: flex !important; flex-direction: column !important; gap: 8px !important; align-self: start !important;
}
/* narrower category panels (were ~588px) + 8px gap to the buttons (was 24px):
   message takes the left, categories a fixed narrower column at the body's right edge,
   grid column-gap → 8px so categories sit 8px from the buttons. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible { column-gap: 8px !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-message { flex: 1 1 auto !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-categories { flex: 0 0 512px !important; max-width: 512px !important; }   /* left edge aligns with the first-view "accept all" left (719px) */

/* ---- chevron — swap Complianz SVG for our triangle (appearance only; same toggle, same place) ---- */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle .cmplz-icon,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle svg { display: none !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle { position: relative !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle::after {
    content: '' !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    border-style: solid; border-width: 5px 4px 0 4px;
    border-color: var(--tecp-pop-text-muted) transparent transparent transparent;   /* ▼ */
    transition: border-color 0.2s ease;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle[aria-expanded="true"]::after {
    border-width: 0 4px 5px 4px;
    border-color: transparent transparent var(--tecp-pop-text-muted) transparent;   /* ▲ */
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-header:hover .cmplz-category-toggle::after { border-top-color: var(--tecp-pop-text); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-header:hover .cmplz-category-toggle[aria-expanded="true"]::after { border-bottom-color: var(--tecp-pop-text); }

/* ---- checkbox — our 16px box (appearance). Hover applies EVEN WHEN CHECKED (site standard). ---- */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category input.cmplz-consent-checkbox {
    -webkit-appearance: none !important; appearance: none !important;
    width: 16px !important; height: 16px !important; min-width: 16px !important; margin: 0 !important;
    border: 1px solid var(--tecp-pop-surface-border) !important;
    background: var(--tecp-pop-surface) !important; border-radius: 0 !important;
    position: relative; cursor: pointer; transition: background 0.2s ease !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category input.cmplz-consent-checkbox:hover { background: var(--tecp-pop-surface-hover) !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category input.cmplz-consent-checkbox:checked { background: var(--tecp-pop-surface-active) !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category input.cmplz-consent-checkbox:checked:hover { background: var(--tecp-pop-surface-hover) !important; }   /* hover also when checked */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category input.cmplz-consent-checkbox:checked::after {
    content: '' !important; position: absolute; top: 2px; left: 5px; width: 4px; height: 8px;
    border: solid var(--tecp-pop-text) !important; border-width: 0 1.5px 1.5px 0 !important; transform: rotate(45deg);
}

/* close × — muted → #fff */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close {
    color: var(--tecp-pop-text-muted) !important; opacity: 1 !important;
    transition: color 0.2s ease !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:hover { color: var(--tecp-pop-text) !important; }

/* white theme — inline links flip dark (overlay/panel/surface follow the tokens automatically) */
body.tecp-theme-white #cmplz-cookiebanner-container .cmplz-cookiebanner a:not(.cmplz-btn) { color: rgba(0, 0, 0, 0.63) !important; }
body.tecp-theme-white #cmplz-cookiebanner-container .cmplz-cookiebanner a:not(.cmplz-btn):hover { color: #000 !important; }

/* ---- "manage consent" revoke tab (fixed bottom-right corner, peeks up / hides on the page).
   TRANSPARENT light-glass chip (#FFFFFF21) that takes on the tone of whatever scrolls behind it,
   with AUTO-CONTRAST text (cmplz.js): the engine composites the element stack behind the chip
   (alpha-over + canvas-samples same-origin images) → if the result is LIGHT it adds `.cmplz-mc-on-light`
   (dark text, like the original Complianz chip); otherwise the default light muted text #FFFFFF80 stays
   (readable on a dark background). Same idea as the single-product arrows (§22.5). A clearly visible
   shadow keeps the transparent chip defined on white. It's a .cmplz-btn but lives OUTSIDE
   .cmplz-cookiebanner, so the banner-button rules don't touch it. ---- */
#cmplz-cookiebanner-container .cmplz-manage-consent.cmplz-btn,
.cmplz-manage-consent {
    background: rgba(255, 255, 255, 0.13) !important;     /* #FFFFFF21 — transparent light glass */
    -webkit-backdrop-filter: blur(var(--tecp-pop-panel-blur)) !important;
    backdrop-filter: blur(var(--tecp-pop-panel-blur)) !important;
    color: rgba(255, 255, 255, 0.5) !important;          /* DEFAULT (dark bg) → light muted #FFFFFF80; JS flips on light bg */
    border: none !important; border-radius: 0 !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.30) !important;  /* discreet single-layer (reverted from the stronger 2-layer) */
    font-family: Verdana, Geneva, sans-serif !important;
    font-size: 12px !important; letter-spacing: 1px !important; text-transform: lowercase !important;
    transition: color 0.2s ease !important;
}
/* JS adds this when the page behind the transparent chip is LIGHT → dark text (the original look) */
#cmplz-cookiebanner-container .cmplz-manage-consent.cmplz-mc-on-light,
.cmplz-manage-consent.cmplz-mc-on-light {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* ═══ entrance (owner 2026-07-03) — banner slides UP from the bottom, dim fades in;
   same feel as the drawers. Complianz shows the banner by toggling display, so we
   use TRANSITION + @starting-style (fires on entry to the render tree). Unlike the
   earlier keyframes attempt this is INTERRUPTION-PROOF: rapid re-opens continue
   smoothly from the current position (keyframes restarted/cancelled mid-flight →
   the stutter/jump the owner saw). Style-only — Complianz logic untouched. */
/* EXIT too (owner 2026-07-03): on dismiss Complianz drops .cmplz-show and hides the
   banner via display — `display 0.4s allow-discrete` keeps it in the render tree
   until the slide-DOWN (base transform 110%) finishes, so it sinks off the bottom
   edge like the other bottom-edge windows instead of vanishing. Transition lives on
   the BASE element (the transition list of the target state decides). */
/* 0.65s = the search pop-up's speed (full-width, screen-edge — the banner's closest
   sibling; the 480px side drawers use 0.35s but travel 3× the distance). The old 0.4s
   over the banner's short ~150-300px path read as "it just disappears" (owner 2026-07-05).
   On the revoke-reload path (500ms window) the slide still covers ~90% of the travel
   before the refresh cuts in — visually complete.
   ⚠ NO `display … allow-discrete` here — Firefox rejected it (the WHOLE shorthand →
   no animation at all in FF). Instead the classic delayed-visibility pattern (same as
   the sizes overlay): the banner stays in the render tree permanently (we override
   Complianz's dismissed display:none below), WE hide it via visibility after the
   slide. Works in every browser + the always-alive layer also prevents the GPU
   first-composite flash of the never-yet-rendered optout banner. */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.65s;   /* ← exit */
}
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);   /* ← entrance (visibility flips instantly) */
}
/* keep the DISMISSED banner rendered (off-screen + invisible) so the slide-down can
   play; Complianz's own display:none would cut it on frame one. The never-active
   banner variant (.cmplz-hidden, other consent type) keeps its native display:none. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-dismissed:not(.cmplz-hidden) {
    display: grid !important;
}
@starting-style {
    #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show { transform: translateY(110%); }
}
/* (dim entrance needs no @starting-style — the container layer never leaves the render
   tree, so the base background-color transition covers fade-in AND fade-out) */