/* GDPR CMP — compact bottom bar + equal accept/reject + preferences dialog */
/*
 * CONTRAST (Lighthouse: "Background and foreground colors do not have a
 * sufficient contrast ratio" on .cookie-alert__btn--accept).
 *
 * These defaults were measured at 2.53:1 (purple #B10AD4 text on a teal
 * #0EC7AC fill) in a deployment where theme-custom.css had overridden the
 * values below. WCAG AA needs 4.5:1 for text this size (12px/600).
 *
 * The variables stay configurable so an operator can still theme the banner,
 * but the DEFAULTS are now a pairing that passes AA on its own:
 *
 *   --cookie-accept-bg:   #0e7c6b  (teal, darkened for contrast)
 *   --cookie-accept-text: #ffffff
 *   => white on #0e7c6b = 5.06:1
 *
 * `--cookie-accept-bg-strong` is emitted too so a11y-contrast.css can provide
 * a Guaranteed-passing fallback without fighting the cascade.
 */
.cookie-alert {
    --cookie-bg: #111827;
    --cookie-text: #f8fafc;
    --cookie-accept-bg: #0e7c6b;
    --cookie-accept-text: #ffffff;
    --cookie-accept-bg-strong: #0e7c6b;
    --cookie-more-bg: transparent;
    --cookie-more-text: #f8fafc;
    --cookie-reject-border: rgba(255, 255, 255, 0.28);
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 100001;
    display: none;
    width: 100%;
    max-width: none !important;
    pointer-events: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.cookie-alert.show,
.cookie-alert.is-open,
.cookie-alert.has-decision {
    display: block !important;
}

.cookie-alert__bar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 18px;
    width: 100%;
    margin: 0;
    padding: 10px 18px;
    background-color: var(--cookie-bg);
    color: var(--cookie-text);
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.18);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.cookie-alert__copy {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.cookie-alert__icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-top: 1px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: var(--cookie-text);
}

.cookie-alert__icon svg {
    width: 18px;
    height: 18px;
}

.cookie-alert__content {
    min-width: 0;
}

.cookie-alert__title,
.cookie-alert__title p,
.cookie-alert__title span,
.cookie-alert__title a,
.cookie-alert__text,
.cookie-alert__text p,
.cookie-alert__text span,
.cookie-alert__text a,
.cookie-alert__text li {
    margin: 0 !important;
    padding: 0;
    color: var(--cookie-text) !important;
    font-family: var(--body-font, inherit) !important;
    letter-spacing: 0.01em !important;
}

.cookie-alert__title,
.cookie-alert__title p,
.cookie-alert__title span,
.cookie-alert__title a {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.cookie-alert__text,
.cookie-alert__text p,
.cookie-alert__text span,
.cookie-alert__text a,
.cookie-alert__text li {
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    opacity: 0.92;
}

.cookie-alert__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 68rem;
}

.cookie-alert__text p + p {
    display: none;
}

.cookie-alert__title + .cookie-alert__text {
    margin-top: 2px !important;
}

.cookie-alert__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.cookie-alert__btn {
    appearance: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    margin: 0 !important;
    padding: 6px 14px !important;
    border: 1px solid transparent;
    border-radius: 999px !important;
    cursor: pointer;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap;
    font-family: var(--body-font, inherit) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    box-shadow: none !important;
    background: transparent;
    color: var(--cookie-text);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cookie-alert__btn:hover,
.cookie-alert__btn:focus-visible {
    opacity: 0.92;
    transform: translateY(-1px);
    text-decoration: none !important;
}

.cookie-alert__btn--accept {
    background-color: var(--cookie-accept-bg) !important;
    color: var(--cookie-accept-text) !important;
    border-color: var(--cookie-accept-bg);
}

.cookie-alert__btn--reject,
.cookie-alert__btn--settings {
    background: transparent !important;
    color: var(--cookie-text) !important;
    border-color: var(--cookie-reject-border);
}

.cookie-alert__btn--save {
    background-color: var(--cookie-accept-bg) !important;
    color: var(--cookie-accept-text) !important;
}

.cookie-alert__panel {
    pointer-events: auto;
    display: none;
    max-height: min(72vh, 560px);
    overflow: auto;
    padding: 16px 18px 18px;
    background: var(--cookie-bg);
    color: var(--cookie-text);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cookie-alert.is-open .cookie-alert__panel {
    display: block;
}

.cookie-alert__panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cookie-alert__panel-title {
    margin: 0;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--cookie-text) !important;
}

.cookie-alert__panel-note,
.cookie-alert__cat-copy,
.cookie-alert__inventory {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: var(--cookie-text) !important;
    opacity: 0.9;
}

.cookie-alert__cats {
    display: grid;
    gap: 10px;
}

.cookie-alert__cat {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
}

.cookie-alert__cat-name {
    margin: 0;
    font-size: 13px !important;
    font-weight: 650 !important;
    color: var(--cookie-text) !important;
}

.cookie-alert__cat-copy {
    grid-column: 1 / 2;
}

.cookie-alert__switch,
.cookie-alert__lock {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

.cookie-alert__lock {
    font-size: 11px !important;
    font-weight: 700 !important;
    opacity: 0.8;
    white-space: nowrap;
}

.cookie-alert__switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cookie-alert__switch span {
    display: inline-block;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    position: relative;
    cursor: pointer;
}

.cookie-alert__switch span:after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.cookie-alert__switch input:checked + span {
    background: var(--cookie-accept-bg);
}

.cookie-alert__switch input:checked + span:after {
    transform: translateX(18px);
}

.cookie-alert__switch input:focus-visible + span {
    outline: 2px solid var(--cookie-text);
    outline-offset: 2px;
}

.cookie-alert__inventory {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.cookie-alert__inventory li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px !important;
}

.cookie-alert__policy {
    display: inline-block;
    margin-top: 12px;
    color: var(--cookie-more-text) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}

.cookie-alert__fab {
    position: fixed;
    left: var(--newsroom-fab-inset, 16px);
    right: auto;
    bottom: calc(var(--newsroom-fab-inset, 16px) + env(safe-area-inset-bottom, 0px));
    z-index: 100001;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--cookie-bg);
    color: var(--cookie-text);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
    cursor: pointer;
}

/* Keep cookie FAB on the LEFT so it never covers scroll-to-top (right).
   When WhatsApp is also left, stack cookie above it. */
body.whatsapp-fab-left.has-whatsapp-fab .cookie-alert.has-decision:not(.show):not(.is-open) .cookie-alert__fab {
    left: var(--newsroom-fab-inset, 16px);
    right: auto;
    bottom: calc(
        var(--newsroom-fab-inset, 16px)
        + var(--newsroom-fab-size, 50px)
        + var(--newsroom-fab-gap, 10px)
        + env(safe-area-inset-bottom, 0px)
    );
}

.cookie-alert.show .cookie-alert__fab,
.cookie-alert.is-open .cookie-alert__fab {
    display: none !important;
}

.cookie-alert.has-decision:not(.show):not(.is-open) .cookie-alert__fab {
    display: inline-flex !important;
}

.cookie-alert.has-decision:not(.show):not(.is-open) .cookie-alert__bar,
.cookie-alert.has-decision:not(.show):not(.is-open) .cookie-alert__panel {
    display: none !important;
}

@media (max-width: 767.98px) {
    .cookie-alert__bar {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 14px 14px;
    }

    .cookie-alert__icon {
        display: none;
    }

    .cookie-alert__text {
        -webkit-line-clamp: 1;
    }

    .cookie-alert__actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .cookie-alert__btn {
        flex: 1 1 auto;
        width: 100%;
    }

    .cookie-alert__btn--accept {
        order: 1;
    }

    .cookie-alert__btn--settings {
        order: 3;
    }

    .cookie-alert__btn--reject {
        order: 2;
    }

    .cookie-alert__actions-row {
        display: flex;
        gap: 8px;
        width: 100%;
    }

    .cookie-alert__panel-close-label {
        display: none;
    }

    .cookie-alert__panel-close {
        min-width: 44px;
        width: 44px;
        padding-inline: 0 !important;
    }

    .cookie-alert__panel-close-icon {
        display: inline-flex;
        font-size: 1.35rem;
        line-height: 1;
    }

    .cookie-alert__fab {
        left: var(--newsroom-fab-inset, 12px);
        right: auto;
        bottom: calc(var(--newsroom-fab-inset, 12px) + env(safe-area-inset-bottom, 0px));
    }

    body.has-floating-fabs .cookie-alert.show,
    body.has-floating-fabs .cookie-alert.is-open {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    }

    /* Mobile chrome dock / immersive: lift cookie FAB on the left stack */
    body.mobile-chrome-open.has-floating-fabs .cookie-alert.has-decision:not(.show):not(.is-open) .cookie-alert__fab {
        bottom: calc(
            var(--newsroom-fab-inset, 12px)
            + var(--newsroom-fab-size, 50px)
            + var(--newsroom-fab-gap, 10px)
            + 56px
            + env(safe-area-inset-bottom, 0px)
        );
        left: var(--newsroom-fab-inset, 12px);
        right: auto;
    }

    body.reels-immersive-active .cookie-alert.has-decision:not(.show):not(.is-open) .cookie-alert__fab {
        bottom: calc(
            var(--newsroom-fab-inset, 12px)
            + var(--newsroom-fab-size, 50px)
            + var(--newsroom-fab-gap, 10px)
            + env(safe-area-inset-bottom, 0px)
        );
        left: var(--newsroom-fab-inset, 12px);
        right: auto;
    }

    .cookie-alert__panel .cookie-alert__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-alert__panel .cookie-alert__policy {
        width: 100%;
        text-align: center;
        margin-top: 4px;
    }
}

.cookie-alert__panel-close-icon {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .cookie-alert__btn,
    .cookie-alert__switch span:after {
        transition: none;
    }
}

/* ===================================================================
   CONTRAST GUARANTEE (last in the file on purpose)

   These block run AFTER every rule above so they cannot be overridden by
   this stylesheet's own earlier !important declarations, and so they also
   beat `theme-custom.css` when that file is loaded first.

   Lighthouse measured the accept button at 2.53:1 (needs 4.5:1) because
   theme-custom.css had replaced the palette with purple-on-teal. The pairs
   below are chosen to clear AA even if an operator picks a light background:

     white on #0e7c6b = 5.06:1

   `!important` is required, not lazy: the upstream declarations on these
   elements already use it, so a non-important rule would lose.
   =================================================================== */
.cookie-alert .cookie-alert__btn--accept,
.cookie-alert__btn--accept {
    color: #ffffff !important;
    background-color: #0e7c6b !important;
    border-color: #0e7c6b !important;
}

.cookie-alert .cookie-alert__btn--accept:hover,
.cookie-alert__btn--accept:hover {
    background-color: #0b6152 !important;
    border-color: #0b6152 !important;
}