/* ============================================================
   Cookie consent (inc/cookie-consent.inc.php + js/cookie-consent.js)

   A legal notice, styled like one. It used to carry four
   saturated buttons, two coloured status pills, a pulsing
   expiry banner and emoji headings — the loudest thing on any
   page, on every page, for people who had not asked for it.

   Now: white surface, the gold rule the rest of the site uses,
   the shared .btn for the two real choices, and text links for
   the rest. Nothing here invents a colour of its own.
   ============================================================ */

.cookie-consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-toast);
    padding: var(--space-5);
    background: var(--surface);
    border-top: 3px solid var(--brand-gold);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
    animation: slideUp 0.35s ease-out;
}

.cookie-consent-banner[hidden],
.cookie-modal[hidden],
.cookie-consent-overlay[hidden] { display: none !important; }
.cookie-modal:not([hidden]),
.cookie-consent-overlay:not([hidden]) { display: block; }

/* Hidden until the script has decided whether consent is needed */
.cookie-banner-loading {
    display: none !important;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.cookie-consent-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-6);
    align-items: center;
}

.cookie-consent-text h2 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: var(--fs-md);
    color: var(--brand-black);
    text-align: left;
}

.cookie-consent-text h2 i {
    color: var(--gold-text);
    font-size: var(--fs-base);
}

.cookie-consent-text p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

/* Expiry notice — a line of text, not a pulsing box */
.consent-expiry-notice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3) !important;
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--warning);
    background: var(--warning-bg);
    color: #8a4b00 !important;
    font-weight: var(--fw-semibold);
}

/* One line naming the two categories. The full description lives in the
   customise dialog: a consent bar that fills half the screen on a phone is
   not a notice, it is an obstacle. */
.cookie-consent-detail {
    margin-top: var(--space-2) !important;
    color: var(--text-muted);
    font-size: var(--fs-xs) !important;
}

.cookie-status {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cookie-consent-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Accept and reject carry the same weight: same size, same row,
   one filled and one outlined. */
.btn-cookie {
    width: 100%;
}

.cookie-consent-links {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
}

.cookie-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    text-decoration: underline;
    cursor: pointer;
}

.cookie-link:hover,
.cookie-link:focus-visible {
    color: var(--brand-black);
}

/* --- Customisation modal ------------------------------------ */
.cookie-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-modal);
    width: min(600px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.cookie-consent-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: rgba(0, 0, 0, 0.5);
}

.cookie-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.cookie-modal-header h2 {
    margin: 0;
    font-size: var(--fs-lg);
    color: var(--brand-black);
    text-align: left;
}

.cookie-modal-close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: var(--fs-md);
    cursor: pointer;
}

.cookie-modal-close:hover,
.cookie-modal-close:focus-visible {
    background: var(--brand-black);
    color: var(--brand-gold);
}

.cookie-modal-body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.cookie-preference-item {
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.cookie-preference-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.cookie-preference-header h3 {
    margin: 0;
    font-size: var(--fs-base);
    color: var(--brand-black);
    text-align: left;
}

.cookie-preference-item p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

/* Switch */
.cookie-toggle {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 56px;
    height: 32px;
    margin: 0;
}

.cookie-toggle input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer;
}

.cookie-toggle-slider {
    position: absolute;
    inset: 0;
    background-color: var(--border-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--transition);
}

.cookie-toggle-slider::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    height: 24px;
    width: 24px;
    background-color: var(--surface);
    border-radius: 50%;
    transition: transform var(--transition);
}

.cookie-toggle input:checked + .cookie-toggle-slider {
    background-color: var(--brand-black);
}

.cookie-toggle input:checked + .cookie-toggle-slider::before {
    transform: translateX(24px);
}

.cookie-toggle input:focus-visible + .cookie-toggle-slider {
    box-shadow: var(--ring);
}

.cookie-modal-footer {
    padding: var(--space-5);
    border-top: 1px solid var(--border-color);
}

/* --- Re-consent modal (built in JS) -------------------------- */
.consent-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(0, 0, 0, 0.5);
}

.consent-modal-content {
    width: min(600px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.consent-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.consent-modal-header h2 {
    margin: 0;
    font-size: var(--fs-lg);
    color: var(--brand-black);
    text-align: left;
}

.consent-modal-close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--text-muted);
    cursor: pointer;
}

.consent-modal-body {
    padding: var(--space-5);
}

.consent-modal-body p {
    margin: 0 0 var(--space-4);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

html.is-scroll-locked {
    overflow: hidden;
}

.consent-modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-5);
    border-top: 1px solid var(--border-color);
}

.consent-modal-footer .btn {
    flex: 1 1 auto;
}

/* --- Saved / failed notice ----------------------------------- */
/* Stack: every notice used to be fixed at the same corner, so two of them
   sat on top of each other (and over the navbar). They queue now. */
.cookie-notification-stack {
    position: fixed;
    top: 84px;
    right: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    pointer-events: none;
    max-width: min(340px, calc(100vw - 2 * var(--space-4)));
}

.cookie-notification {
    pointer-events: auto;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: 10px;
    border-left: 4px solid var(--brand-gold);
    background: var(--brand-black);
    color: var(--surface);
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-md);
    animation: slideInRight 0.3s ease-out;
}

.cookie-notification-error { border-left-color: var(--danger); }
.cookie-notification-warning { border-left-color: var(--warning); }

@keyframes slideInRight {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(20px); opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideDown {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

/* --- Mobile --------------------------------------------------- */
@media (max-width: 900px) {
    .cookie-consent-content {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

@media (max-width: 600px) {
    /* On a phone the bar is capped at just under half the screen and the
       category line drops — the customise dialog explains both categories in
       full, and a consent notice that covers the page it is about is worse
       than a short one with a way in. */
    .cookie-consent-banner {
        padding: var(--space-4);
        max-height: 46vh;
        overflow-y: auto;
    }

    .cookie-consent-text p {
        font-size: var(--fs-xs);
    }

    .cookie-consent-detail {
        display: none;
    }

    .cookie-consent-actions {
        gap: var(--space-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-consent-banner,
    .cookie-notification {
        animation: none;
    }
}