/* ==========================================================================
   Cookie consent ribbon
   ==========================================================================
   A bottom-anchored card rather than a full-bleed bar or a modal. A modal
   would block the page until someone chooses, which reads as a demand; a
   ribbon lets the page be read while the choice sits there. It is brand blue
   with white controls, so it belongs to VYPΛ rather than looking like the
   generic grey strip every consent vendor ships.

   Styling only. What is actually gated, and how the choice is stored, lives
   in js/consent.js.
   ========================================================================== */

.vypa-consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 2147483000; /* above the chat bubble and any sticky header */
    display: flex;
    justify-content: center;
    padding: 0 16px 16px;
    pointer-events: none; /* the card takes pointer events, the gutter does not */
}

.vypa-consent[hidden] {
    display: none;
}

.vypa-consent__card {
    pointer-events: auto;
    width: 100%;
    max-width: 1080px;
    box-sizing: border-box;
    padding: 20px 24px;
    border-radius: 18px;
    background: linear-gradient(135deg, #0040ff 0%, #0070ff 100%);
    color: #ffffff;
    box-shadow: 0 18px 50px rgba(0, 28, 110, 0.35);
    transform: translateY(14px);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

.vypa-consent.is-in .vypa-consent__card {
    transform: translateY(0);
    opacity: 1;
}

.vypa-consent__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
}

.vypa-consent__copy {
    flex: 1 1 380px;
    min-width: 0;
}

.vypa-consent__title {
    margin: 0 0 4px;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.vypa-consent__text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}

.vypa-consent__text a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.vypa-consent__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.vypa-consent__btn {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    padding: 11px 20px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.vypa-consent__btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* Accept all is the only filled control. Decline sits beside it at the same
   size and weight — a consent choice where refusing is visibly harder than
   agreeing is not a choice, and regulators treat it as one. */
.vypa-consent__btn--primary {
    background: #ffffff;
    color: #0040ff;
    font-weight: 700;
}

.vypa-consent__btn--primary:hover {
    background: #eef3ff;
    transform: translateY(-1px);
}

.vypa-consent__btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
}

.vypa-consent__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
    transform: translateY(-1px);
}

.vypa-consent__btn--link {
    background: transparent;
    border-color: transparent;
    color: rgba(255, 255, 255, 0.9);
    padding: 11px 8px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vypa-consent__btn--link:hover {
    color: #ffffff;
}

/* ----------------------------- PREFERENCES ----------------------------- */

.vypa-consent__prefs {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.vypa-consent__prefs[hidden] {
    display: none;
}

.vypa-consent__row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 11px 0;
}

.vypa-consent__row + .vypa-consent__row {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.vypa-consent__rowtext {
    flex: 1 1 auto;
    min-width: 0;
}

.vypa-consent__rowname {
    display: block;
    font-size: 0.87rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.vypa-consent__rowdesc {
    display: block;
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}

.vypa-consent__always {
    flex: 0 0 auto;
    align-self: center;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* Switch. The checkbox stays in the DOM and keeps the keyboard and screen
   reader behaviour; only its painting is replaced. */
.vypa-consent__switch {
    flex: 0 0 auto;
    align-self: center;
    position: relative;
    width: 46px;
    height: 26px;
}

.vypa-consent__switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.vypa-consent__track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    transition: background-color 0.18s ease, border-color 0.18s ease;
    pointer-events: none;
}

.vypa-consent__track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.18s ease;
}

.vypa-consent__switch input:checked + .vypa-consent__track {
    background: #ffffff;
    border-color: #ffffff;
}

.vypa-consent__switch input:checked + .vypa-consent__track::after {
    transform: translateX(20px);
    background: #0040ff;
}

.vypa-consent__switch input:focus-visible + .vypa-consent__track {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.vypa-consent__prefsactions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

/* ------------------------------ RESPONSIVE ----------------------------- */

@media (max-width: 720px) {
    .vypa-consent {
        padding: 0 10px 10px;
    }

    .vypa-consent__card {
        padding: 18px 18px 16px;
        border-radius: 16px;
        max-height: calc(100vh - 20px);
        overflow-y: auto;
    }

    .vypa-consent__actions,
    .vypa-consent__prefsactions {
        width: 100%;
    }

    .vypa-consent__btn {
        flex: 1 1 auto;
        text-align: center;
        padding: 12px 16px;
    }

    .vypa-consent__btn--link {
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vypa-consent__card,
    .vypa-consent__btn,
    .vypa-consent__track,
    .vypa-consent__track::after {
        transition: none;
    }

    .vypa-consent__card {
        transform: none;
    }
}

/* The card carries its own blue in both themes, so dark mode only has to stop
   the page's link colours bleeding into it. */
body.dark-mode .vypa-consent__card {
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

body.dark-mode .vypa-consent__text a {
    color: #ffffff;
}