/**
 * Consent banner.
 *
 * Drawn in the theme's own language rather than a generic cookie bar bolted on
 * top of it. Every colour comes from the tokens base.css defines on :root, with
 * the literal value as a fallback so the panel still looks deliberate if it is
 * rendered somewhere those tokens are missing — the dashboard, a different
 * theme, an email preview.
 *
 * The first version of this was blue. The site's brand colour is red. That is
 * the kind of detail that makes a consent panel read as something bolted on by
 * a plugin, which is exactly the impression a privacy notice should not give.
 *
 * A sheet at the foot of the page, not a modal over it: nothing here is urgent
 * enough to take the page away from somebody, and a wall between a visitor and
 * what they came for is how consent stops being freely given.
 *
 * @since 1.17.0
 */

.baipar-consent {
    --bc-ink: var(--baipar-ink, #14223d);
    --bc-muted: var(--baipar-muted, #6d7890);
    --bc-primary: var(--baipar-primary, #e11b22);
    --bc-navy: var(--baipar-secondary, #0d1b34);
    --bc-line: var(--baipar-line, #e3e8f1);
    --bc-surface: var(--baipar-surface, #f4f7fb);
    --bc-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --bc-display: "Plus Jakarta Sans", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;

    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 99998;
    max-height: 88vh;
    overflow-y: auto;
    padding: 22px var(--baipar-container-gutter, 24px) 24px;
    background: #fff;
    /* The theme marks a panel as important with a hairline of brand colour
       along its edge; this is the same device, top-aligned. */
    box-shadow:
        inset 0 3px var(--bc-primary),
        0 -14px 40px rgba(17, 35, 61, .12);
    font-family: var(--bc-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--bc-ink);
}

@media (prefers-reduced-motion: no-preference) {
    .baipar-consent[data-baipar-consent="banner"] {
        animation: baipar-consent-rise .32s cubic-bezier(.22, .68, .38, 1) both;
    }
}

@keyframes baipar-consent-rise {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* Inline mode: the same panel dropped into a page or the dashboard, wearing the
   theme's card instead of its sheet. */
.baipar-consent--inline {
    position: static;
    max-height: none;
    padding: clamp(18px, 2.4vw, 26px);
    border: 1px solid var(--bc-line);
    border-radius: 12px;
    box-shadow: inset 0 3px var(--bc-primary);
    margin: 0 0 24px;
    animation: none;
}

.baipar-consent__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
    width: min(var(--baipar-container-max, 1482px), 100%);
    margin: 0 auto;
}

.baipar-consent--inline .baipar-consent__inner {
    width: 100%;
}

.baipar-consent__intro {
    flex: 1 1 440px;
    min-width: 0;
}

.baipar-consent__intro h2 {
    margin: 0 0 6px;
    font-family: var(--bc-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--bc-ink);
}


.baipar-consent__intro p {
    margin: 0;
    max-width: 74ch;
    color: var(--bc-muted);
    font-size: 14.5px;
}

.baipar-consent__more {
    margin-top: 8px !important;
}

.baipar-consent__more a {
    color: var(--bc-primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(225, 27, 34, .28);
    padding-bottom: 1px;
}

.baipar-consent__more a:hover {
    border-bottom-color: currentColor;
}

/* ── buttons ─────────────────────────────────────────────────────────────
   Refusing is as prominent as accepting. A "reject" tucked behind a second
   screen while "accept" sits in colour is the pattern regulators call a dark
   pattern, and it makes the consent it collects worthless. */

.baipar-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 0 0 auto;
}

.baipar-consent__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    font-family: var(--bc-body);
    font-size: 14.5px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.baipar-consent__btn:active {
    transform: translateY(1px);
}

.baipar-consent__btn[disabled] {
    opacity: .55;
    cursor: progress;
    transform: none;
}

.baipar-consent__btn--solid {
    background: var(--bc-primary);
    color: #fff;
    box-shadow: 0 9px 20px rgba(225, 27, 34, .18);
}

.baipar-consent__btn--solid:hover {
    background: var(--bc-navy);
    color: #fff;
    box-shadow: 0 9px 22px rgba(13, 27, 52, .22);
}

.baipar-consent__btn--quiet {
    background: var(--bc-surface);
    border-color: var(--bc-line);
    color: var(--bc-ink);
}

.baipar-consent__btn--quiet:hover {
    background: #fff;
    border-color: var(--bc-navy);
    color: var(--bc-navy);
}

.baipar-consent__btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--bc-muted);
    padding: 0 14px;
}

.baipar-consent__btn--ghost:hover {
    color: var(--bc-primary);
    background: var(--baipar-primary-light-background, #e01b220d);
}

.baipar-consent__btn--ghost[aria-expanded="true"] {
    color: var(--bc-primary);
    background: var(--baipar-primary-light-background, #e01b220d);
}

.baipar-consent__btn:focus-visible {
    outline: 2px solid var(--bc-primary);
    outline-offset: 3px;
}

/* ── the categories ──────────────────────────────────────────────────────── */

.baipar-consent__detail {
    width: min(var(--baipar-container-max, 1482px), 100%);
    margin: 20px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--bc-line);
    display: grid;
    gap: 10px;
}

.baipar-consent--inline .baipar-consent__detail {
    width: 100%;
}

@media (min-width: 900px) {
    .baipar-consent__detail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .baipar-consent__detail-actions,
    .baipar-consent__noscript {
        grid-column: 1 / -1;
    }
}

.baipar-consent__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid var(--bc-line);
    border-radius: 10px;
    background: var(--bc-surface);
    transition: border-color .18s ease, background-color .18s ease;
}

.baipar-consent__row:hover {
    border-color: #d5dced;
    background: #fff;
}

/* An enabled category is worth seeing at a glance, so the whole row shifts
   rather than only the switch. */
.baipar-consent__row:has(input:checked) {
    border-color: rgba(225, 27, 34, .32);
    background: var(--baipar-primary-light-background, #e01b220d);
}

.baipar-consent__row:has(input:checked:disabled) {
    border-color: var(--bc-line);
    background: var(--bc-surface);
}

.baipar-consent__row > div {
    min-width: 0;
}

.baipar-consent__row .baipar-switch {
    margin-top: 2px;
}

.baipar-consent__row strong {
    display: block;
    font-family: var(--bc-display);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--bc-ink);
}

.baipar-consent__row strong em {
    margin-inline-start: 7px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(20, 34, 61, .07);
    font-style: normal;
    font-family: var(--bc-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bc-muted);
    vertical-align: 2px;
}

.baipar-consent__row p {
    margin: 4px 0 0;
    max-width: 62ch;
    color: var(--bc-muted);
    font-size: 13.5px;
    line-height: 1.55;
}

.baipar-consent__detail-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.baipar-consent__said {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f7b4f;
}

.baipar-consent__said.is-error {
    color: var(--bc-primary);
}

.baipar-consent__noscript {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--bc-line);
    border-radius: 10px;
    background: var(--bc-surface);
    color: var(--bc-muted);
    font-size: 13.5px;
}

/* ── the switch ──────────────────────────────────────────────────────────
   Drawn here rather than borrowed from the dashboard stylesheet: this panel
   loads on pages that never enqueue that file, and a consent toggle rendered
   as a bare checkbox because a dependency was missing is a consent toggle
   nobody can read. */

.baipar-consent .baipar-switch {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 44px;
    height: 25px;
    cursor: pointer;
}

.baipar-consent .baipar-switch.is-locked {
    cursor: not-allowed;
    opacity: .5;
}

.baipar-consent .baipar-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.baipar-consent .baipar-switch__track {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: #c9d1e2;
    transition: background-color .18s ease;
}

.baipar-consent .baipar-switch__knob {
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(13, 27, 52, .35);
    transition: transform .18s cubic-bezier(.34, 1.4, .64, 1);
}

.baipar-consent .baipar-switch input:checked ~ .baipar-switch__track {
    background: var(--bc-primary);
}

.baipar-consent .baipar-switch input:checked ~ .baipar-switch__track .baipar-switch__knob {
    transform: translateX(19px);
}

[dir="rtl"] .baipar-consent .baipar-switch input:checked ~ .baipar-switch__track .baipar-switch__knob {
    transform: translateX(-19px);
}

.baipar-consent .baipar-switch input:focus-visible ~ .baipar-switch__track {
    outline: 2px solid var(--bc-primary);
    outline-offset: 3px;
}

/* ── narrow screens ──────────────────────────────────────────────────────── */

@media (max-width: 700px) {
    .baipar-consent {
        padding: 18px 16px 20px;
        font-size: 14.5px;
    }

    .baipar-consent__intro h2 {
        font-size: 17.5px;
    }

    .baipar-consent__actions {
        width: 100%;
    }

    /* "Accept all" first in the source so it reads first to a screen reader,
       but the two real answers sit side by side rather than one above the
       other, which would make refusing look like the lesser option. */
    .baipar-consent__actions .baipar-consent__btn--solid { order: 3; flex: 1 1 100%; }
    .baipar-consent__actions .baipar-consent__btn--quiet { order: 2; flex: 1 1 100%; }
    .baipar-consent__actions .baipar-consent__btn--ghost { order: 1; flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .baipar-consent,
    .baipar-consent__btn,
    .baipar-consent__row,
    .baipar-consent .baipar-switch__track,
    .baipar-consent .baipar-switch__knob {
        transition: none;
        animation: none;
    }
}