/*
 * components/cookie-consent.css
 *
 * What:  Floating consent banner near the bottom of the viewport. White
 *        card with a soft shadow, single horizontal row on desktop and
 *        stacked rows on mobile.
 * Why:   First-visit explicit-consent surface for our cookies (session
 *        JWT, delivery location, locale prefs). UK GDPR requires it.
 * Used:  Loaded by views/_layout.ejs via its own <link> tag.
 *
 * Positioning notes:
 *   • z-index 70: above the bottom-nav (60) so it always reads, but
 *     below modals (var(--z-modal) = 100) so the location picker can
 *     still open over it if needed.
 *   • Mobile: lifted clear of the fixed bottom-nav (which is 60-72 px
 *     tall depending on safe-area-inset). We pad-bottom + transform on
 *     small screens so the banner never gets hidden underneath.
 *   • Hidden by default via the `hidden` attribute on the markup; the
 *     JS removes that and adds .is-visible to trigger the slide-up.
 */

.cookie-consent {
    position: fixed;
    left:  var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 70;
    pointer-events: none;            /* let scroll click-through until visible */
}
.cookie-consent.is-visible { pointer-events: auto; }

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

.cookie-consent__inner {
    max-width: 880px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    transform: translateY(20px);
    opacity: 0;
    transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease-out;
}
.cookie-consent.is-visible .cookie-consent__inner {
    transform: translateY(0);
    opacity: 1;
}

.cookie-consent__icon {
    font-size: 2rem;
    line-height: 1;
    flex: 0 0 auto;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.cookie-consent__copy { flex: 1; min-width: 0; }

.cookie-consent__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--space-1);
    color: var(--color-text);
}

.cookie-consent__message {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}
.cookie-consent__message a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
.cookie-consent__message a:hover { text-decoration: underline; }

.cookie-consent__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}

/* ── Mobile (< 768 px) — stack rows, raise above bottom-nav ───── */

@media (max-width: 767px) {
    .cookie-consent {
        left:   var(--space-3);
        right:  var(--space-3);
        bottom: calc(76px + var(--space-3));   /* clear the bottom-nav (~76 px) */
    }
    .cookie-consent__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4);
    }
    .cookie-consent__icon { font-size: 1.6rem; }
    .cookie-consent__actions {
        width: 100%;
        justify-content: flex-end;
    }
    .cookie-consent__message { font-size: 0.82rem; }
}

/* ── Reduced motion respect ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .cookie-consent__inner {
        transform: none;
        opacity: 1;
        transition: none;
    }
}