/* Layout only — colors/font-size come from CSS custom properties emitted inline by the plugin
   (see COOKIE_CONSENT::emit_appearance_style()). No font-family is set here at all, so the banner
   inherits the theme's body font by normal CSS cascade unless an override variable is present. */

.cc-banner {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    height: auto;
    /* Grid, not block: .cc-banner__inner and .cc-panel both occupy the same single cell (see
       grid-column/grid-row below) so they overlap instead of stacking sequentially. That means
       the row track is always sized to whichever of the two is taller, regardless of which one
       is currently hidden — the bar's height never changes when the settings view is toggled. */
    display: grid;
    background: var(--cc-bg, #1f1f1f);
    color: var(--cc-text, #fff);
    /* --cc-font-size is emitted only when the "Font size override" field is set; blank ->
       inherit the theme's body text size (Salient exposes --nectar-body-font-size). */
    font-size: var(--cc-font-size, var(--nectar-body-font-size, 15px));
    border-radius: 0;
    /* Negative offset-y + negative spread: shrinks the pre-blur shadow shape inward on the
       left/right/bottom (where it stays fully hidden under the opaque bar) while pushing it
       above the top edge, so only a soft gradient separating the bar from the page is visible.
       Colour is configurable (Appearance → "Banner shadow colour") at a fixed ~25% alpha; the
       plain-rgba line is the fallback for browsers without color-mix. */
    box-shadow: 0 -2px 6px -4px rgba(0, 0, 0, 0.22);
    box-shadow: 0 -2px 6px -4px color-mix(in srgb, var(--cc-shadow-color, #000000) 25%, transparent);
    z-index: 999999;
    box-sizing: border-box;
    font-family: var(--cc-font-family, inherit);
    transition: opacity 0.18s ease;
    will-change: opacity;
    /* The open settings panel (two stacked tracker rows + Save/back) can exceed the viewport
       height on a short window — cap and scroll rather than letting the buttons run off the
       bottom edge with no way to reach them. No scrollbar-gutter: the inner content box is
       aligned to Salient's .container (same --container-width / --container-padding), and a
       reserved gutter would inset it away from the page's row content. The only cost is that a
       classic (non-overlay) scrollbar, on the rare short-window + tall-panel case, makes the
       settings view ~15px narrower than the collapsed bar. */
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Bottom-anchored full-width bar — its bottom corners sit flush against the viewport edges, so
   they must never be rounded even when the active theme rounds generic containers. The #id + class
   selector outweighs any theme class rule; the top corners are intentionally left untouched so a
   theme's rounding there still shows. */
#cc-banner.cc-banner {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Dismiss (Accept / Reject / Save / Esc) should feel instant — override just the duration on the
   fade-out state so the close is quick while the open fade-in keeps the gentler 0.18s above. */
.cc-banner.cc-fade-out {
    opacity: 0;
    transition-duration: 0.12s;
}

/* .cc-banner itself now sets an explicit `display: grid` above, which — same reasoning as the
   [hidden] override further down for the inner elements — permanently beats the browser's
   built-in `[hidden] { display: none }` default once authored, so the closing fade (JS sets
   `banner.hidden = true` after Accept/Reject/Save) would otherwise never actually hide the bar. */
.cc-banner[hidden] {
    display: none;
}

/* Used on .cc-banner__inner / .cc-panel to crossfade between "main" and "settings" views, and
   applied briefly to #cc-banner itself on open/close. Kept fast and simple — a fade + tiny slide,
   not a full slide-in/bounce production. Both share grid-column/grid-row 1 (see .cc-banner
   comment above) — grid items default to align-self/justify-self: stretch, so each one's own box
   stretches to the shared row height and its internal `align-items: center` then centers its
   actual content within that height, which is what keeps a visually shorter state (e.g. the main
   row) looking intentional rather than leaving dead space at the bottom. */
.cc-banner__inner,
.cc-panel {
    grid-column: 1;
    grid-row: 1;
    transition: opacity 0.15s ease, transform 0.15s ease;
    /* The bar's background/shadow stay full-bleed (see .cc-banner), but the content itself sits
       inside the same column the rest of the site uses — Salient defines --container-width /
       --container-padding globally on :root, so reusing them here keeps the banner's left/right
       edges aligned with the header/page content without hardcoding a guessed pixel value, and it
       tracks automatically if the theme's width setting is ever changed in the admin. */
    width: 100%;
    box-sizing: border-box;
    max-width: var(--container-width, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding, 24px);
    padding-right: var(--container-padding, 24px);
    /* Promote both views to their own compositor layer so the crossfade is a pure GPU
       opacity/transform animation with no per-frame repaint of the text + backdrop. */
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.cc-banner__inner.cc-fade-out,
.cc-panel.cc-fade-out {
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition-duration: 0.12s;
}

/* .cc-banner__inner and .cc-panel both set an explicit `display` below, which — because author
   stylesheet rules always beat the browser's built-in `[hidden] { display: none }` default
   regardless of selector specificity — silently defeats the `hidden` attribute entirely unless
   overridden explicitly here. `visibility: hidden` (not `display: none`) is deliberate: it still
   removes the element from the accessibility tree and tab order exactly like `hidden` normally
   would, but — unlike `display: none` — it keeps contributing to the shared grid row's height
   calculation above even while inactive, which is what makes the two states lock to one height. */
.cc-banner__inner[hidden],
.cc-panel[hidden] {
    visibility: hidden;
}

.cc-banner__inner {
    /* Single column: text on row 1, the action buttons on their own full-width row below. That
       row is what lets the buttons be equal width (see .cc-banner__actions) — a right-aligned
       cluster can only size each button to its own label. */
    display: grid;
    grid-template-columns: 1fr;
    /* align-content: center splits the leftover space evenly top/bottom when this box is
       stretched to match the (taller) .cc-panel; align-items keeps each row's content centred. */
    align-items: center;
    align-content: center;
    row-gap: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
}

/* The collapsed row is stretched to the (taller, invisible) settings panel's height — see the
   .cc-banner__inner / .cc-panel comment above. align-content on the parent centers the content
   row in that stretched box; align-self here re-asserts per-item centering so the text can't be
   pulled to the top of its own grid area by a theme rule setting align-items on a wrapper. */
.cc-banner__text {
    margin: 0;
    padding: 0;
    /* Match the site's body copy: theme body size + line-height, overridable via --cc-font-size. */
    font-size: var(--cc-font-size, var(--nectar-body-font-size, 1rem));
    line-height: var(--nectar-body-line-height, 1.4);
    min-width: 0;
    align-self: center;
}

.cc-banner__text a {
    color: inherit;
    text-decoration: underline;
}

/* The banner copy is editor-supplied HTML (wp_kses_post). Policy links are commonly pasted in
   as a <ul>/<li> list, which the theme then renders with its own bullet markers and list
   indentation. Strip all of that so the links sit inline as plain text regardless of markup. */
.cc-banner__text ul,
.cc-banner__text ol,
.cc-banner__text li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cc-banner__text li::before,
.cc-banner__text li::marker {
    content: none;
}

/* Equal-width buttons: an auto-flow column grid with minmax(0, 1fr) tracks forces every button
   to the same width (the container is the full content row, so there's room for the widest
   label). A flex row can't do this — it sizes each button to its own text. Mobile flips this to
   a stacked row-flow grid (still full-width each). */
.cc-banner__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 10px;
}

.cc-btn {
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 7px 16px;
    /* Fallback only. The buttons also carry Salient's `nectar-button-type` class (see
       render_footer), which applies the theme's Button typography where that theme is active. */
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    background: transparent;
    color: inherit;
    white-space: nowrap;
    /* Allow the equal-width grid tracks to size the button rather than its content forcing them
       to different widths. */
    min-width: 0;
    text-align: center;
}

/* Browsers (and some themes) apply a heavy default focus ring to <button> — override with a
   1px outline so no button's focus state ever reads as a thicker border than its resting state. */
.cc-btn:focus {
    outline: none;
}

.cc-btn:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}

.cc-btn:focus,
.cc-btn:focus-visible,
.cc-btn:active {
    border-width: 1px;
}

.cc-btn--accept {
    background: var(--cc-accept-bg, #3fae4a);
    color: var(--cc-accept-text, #fff);
    border-color: transparent;
}

.cc-btn--configure {
    background: var(--cc-configure-bg, transparent);
    color: var(--cc-configure-text, #fff);
}

.cc-panel {
    /* Single column too: tracker list on row 1, the Back/Save buttons on their own full-width
       row below — same reasoning as .cc-banner__inner, and it keeps the two views consistent. */
    display: grid;
    grid-template-columns: 1fr;
    /* See .cc-banner__inner for why both align-items and align-content are needed together. */
    align-items: center;
    align-content: center;
    row-gap: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
}

/* Always a vertical stack — one tracker per row. The old row/wrap layout only worked with very
   short labels; with a real label + description per tracker the rows are far too wide to sit side
   by side, and each row ended up as wide as its own description, leaving the toggle stranded out
   at the end of the text at a different x per row. */
.cc-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
}

.cc-panel__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Toggle pinned to the right edge of the row, consistently, with the text taking the rest. */
    justify-content: space-between;
    gap: 16px;
}

.cc-panel__item-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    /* Take the row's free space and allow the description to wrap instead of forcing the row
       (and the toggle) wider. */
    flex: 1 1 auto;
    min-width: 0;
}

.cc-panel__item-label {
    font-weight: 600;
    font-size: 0.9em;
}

.cc-panel__item-desc {
    margin: 0;
    font-size: 0.78em;
    opacity: 0.75;
}

/* Back + Save, equal width, full content-row width — same equal-width grid as .cc-banner__actions. */
.cc-panel__row-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 10px;
}

/* Standard clip-to-1px pattern — content stays in the DOM and accessible to assistive tech,
   just not visually rendered. Kept local since the plugin can't assume the active theme ships
   its own .screen-reader-text. */
.cc-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Basic toggle switch — flat, no shadows or animation, just a clear on/off state. */
.cc-toggle {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 36px;
    height: 20px;
}

.cc-toggle input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

/* Off-state track and knob must read on BOTH a dark banner (--cc-bg #1f1f1f) and a light one
   (voget.co / slaplabels.com run #ffffff) — the previous rgba(255,255,255,.3) track + #fff knob
   were invisible on white. A mid-grey track sits visibly on either ground, and the knob keeps a
   soft shadow so it stays defined against the light track too. */
.cc-toggle-track {
    position: absolute;
    inset: 0;
    background-color: rgba(128, 128, 128, 0.5);
    border-radius: 10px;
    pointer-events: none;
    transition: background-color 0.12s ease;
}

.cc-toggle-track::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: left 0.12s ease;
}

.cc-toggle input:checked + .cc-toggle-track {
    background-color: var(--cc-accept-bg, #3fae4a);
}

.cc-toggle input:checked + .cc-toggle-track::before {
    left: 18px;
}

.cc-toggle input:focus-visible + .cc-toggle-track {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* No floating/fixed positioning at all — this is only ever placed inline via the [cookie_settings]
   shortcode (e.g. on the Datenschutz page), so it should just inherit the surrounding content's
   link styling rather than fight it. */
.cc-reopen-trigger {
    cursor: pointer;
}

/* .cc-banner is a full-width slim bar at every breakpoint — this block just tightens spacing and
   switches the horizontal padding to Salient's smaller mobile .container formula. */
@media (max-width: 689px) {
    .cc-banner__inner,
    .cc-panel {
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: max(calc(var(--container-padding, 60px) / 3), 25px);
        padding-right: max(calc(var(--container-padding, 60px) / 3), 25px);
        row-gap: 30px;
    }

    /* Desktop lays the buttons out as an equal-width column-flow grid; on a phone flip to
       row flow so they stack, each still filling the full width. */
    .cc-banner__actions,
    .cc-panel__row-actions {
        grid-auto-flow: row;
        gap: 8px;
    }

    /* On a phone Accept is the top of the stack (easiest reach). Desktop keeps the DOM order —
       Configure (left) · Reject · Accept (right) — so this only reorders at this breakpoint. */
    .cc-banner__actions #cc-accept-btn {
        order: -1;
    }

    .cc-banner__actions #cc-configure-btn {
        order: 1;
    }

    .cc-btn {
        padding: 7px 12px;
    }
}