/* Cookie consent banner.
 *
 * Loaded on every page from base.html, but only ever shown where analytics
 * actually wants to load (core/js/consent.js decides — see the notes there).
 *
 * Styling is driven entirely by --cc-* custom properties so a section themes the
 * banner by redefining a handful of variables rather than restyling the markup.
 * Honey's mapping is below; when jobs or Quick Pie get their own cookie policy
 * pages, add a block for each in the same shape.
 *
 * Note the section overrides are keyed on body.<section>-page, matching the
 * convention in honey.css/jobs.css/quickpie.css — a bare .honey-page selector
 * would lose on specificity to honey.css's own body.honey-page rules.
 */

.cc-banner {
    --cc-bg: #ffffff;
    --cc-ink: #1c1f26;
    --cc-ink-dim: #5b6472;
    --cc-accent: #0a5567;
    --cc-accent-ink: #ffffff;
    --cc-line: #dfe3ea;
    --cc-shadow: rgba(20, 24, 32, .18);
    --cc-radius: 14px;
    --cc-bottom: 20px;
    --cc-z: 49;

    position: fixed;
    left: 20px;
    right: 20px;
    bottom: var(--cc-bottom);
    z-index: var(--cc-z);
    max-width: 460px;

    background: var(--cc-bg);
    color: var(--cc-ink);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    box-shadow: 0 14px 40px var(--cc-shadow);

    /* Entrance: consent.js sets hidden=false, forces a reflow, then adds
       .is-open, so the transition always has a starting state to move from. */
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .28s ease, transform .28s ease;
}

.cc-banner.is-open {
    opacity: 1;
    transform: translateY(0);
}

.cc-banner[hidden] { display: none; }

.cc-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px 18px;
}

.cc-title {
    margin: 0 0 5px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--cc-ink);
}

.cc-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--cc-ink-dim);
}

.cc-link {
    color: var(--cc-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.cc-link:hover { text-decoration-thickness: 2px; }

.cc-actions {
    display: flex;
    gap: 10px;
}

/* Accept and Reject share every dimension, weight and typeface on purpose.
   Making refusal visually harder than acceptance is a dark pattern and would
   invalidate the consent — only the fill differs, which regulators accept. */
.cc-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 16px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 9px;
    border: 1px solid var(--cc-accent);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .08s ease;
}

.cc-btn:active { transform: translateY(1px); }

.cc-btn:focus-visible {
    outline: 2px solid var(--cc-accent);
    outline-offset: 2px;
}

.cc-btn-accept {
    background: var(--cc-accent);
    color: var(--cc-accent-ink);
}

.cc-btn-accept:hover { filter: brightness(1.08); }

.cc-btn-reject {
    background: transparent;
    color: var(--cc-accent);
}

.cc-btn-reject:hover { background: color-mix(in srgb, var(--cc-accent) 10%, transparent); }

/* ---------- Honey (MeLyssi74) ---------- */

body.honey-page .cc-banner {
    --cc-bg: #ffffff;
    --cc-ink: #2c1c0d;
    --cc-ink-dim: #6b5636;
    --cc-accent: #b3790c;
    --cc-accent-ink: #fffaf0;
    --cc-line: #e6d6ae;
    --cc-shadow: rgba(44, 28, 13, .18);
    font-family: 'Inter', "Helvetica Neue", Arial, sans-serif;
}

body.honey-page .cc-title {
    font-family: 'Archivo', "Helvetica Neue", Arial, sans-serif;
}

/* The legal page renders inside the checkout terms modal's same-origin iframe
   (?embed=1). A consent banner inside that frame would be a second, confusing
   copy of a decision already made on the parent page. */
body.legal-embed .cc-banner { display: none; }

/* ---------- Small screens ---------- */

@media (max-width: 760px) {
    .cc-banner {
        left: 12px;
        right: 12px;
        max-width: none;
    }

    /* Clear honey's app-style bottom bar (78px + safe area, z-index 55) and sit
       above the floating basket button (56) — the banner is transient and takes
       precedence over both while it is up. */
    body.honey-page .cc-banner {
        --cc-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
        --cc-z: 57;
    }
}

@media (max-width: 420px) {
    .cc-inner { padding: 16px; }
    .cc-text { font-size: 13px; }
    .cc-link { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-banner { transition: none; }
}