/* Cookie consent banner (BUILD-PLAN 7.2).

   "Small, elegant, non-blocking" per 05-technical-spec.md §7: a card in the
   bottom-left corner on desktop, a bar across the bottom on mobile. It dims
   nothing and covers nothing but its own corner, so a visitor who wants to
   read first can — which is also why it must not be styled as a modal.

   Nothing here has an export equivalent: the mockup has no cookie banner
   (the GA4 decision came later, 2026-07-16), so this is built from tokens
   and from primitives the design system already established elsewhere. */

.cookie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Above the sticky mobile CTA (z-index 40), below the overlay router's
       panel (100) — an overlay opened over the banner should win. */
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding: var(--space-20) var(--space-24) calc(var(--space-20) + env(safe-area-inset-bottom));
    background: var(--white);
    border-top: 1px solid var(--neutral-800);
    /* Same floating-surface shadow as the overlay panel (main.css) — the
       one soft-shadow value this design system uses. */
    box-shadow: 0 0 40px rgb(36 57 77 / .18);
    transform: translateY(100%);
    transition: transform var(--motion-step) var(--ease-out);
}

.cookie.is-visible {
    transform: none;
}

.cookie__text {
    margin: 0;
    color: var(--secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.cookie__actions {
    display: flex;
    gap: var(--space-8);
}

/* Shorter than the 56px page CTAs: this is a decision to get out of the
   way, not the page's main action. Both buttons are the same variant and
   share the row equally — see the template's note on DPA practice. */
.cookie__btn {
    flex: 1;
    height: 44px;
    padding-inline: var(--space-16);
}

/* The choice currently in force, shown only when the banner is reopened
   from the footer (js/consent.js marks it). Same "this one is selected"
   language as the quote form's choice rows: white fill, inset ring. */
.cookie__btn.is-current {
    background: var(--white);
    box-shadow: 0 0 0 1px var(--neutral-800) inset;
}

.cookie__btn.is-current:hover {
    background: var(--neutral-200);
    box-shadow: 0 0 0 1px var(--neutral-800) inset;
    transform: none;
}

.cookie__link {
    color: var(--secondary);
    font-size: var(--text-xs);
    text-decoration: underline;
}

.cookie__link:hover {
    color: var(--primary);
}

@media (min-width: 768px) {
    .cookie {
        right: auto;
        left: var(--space-24);
        bottom: var(--space-24);
        width: min(420px, calc(100vw - var(--space-40)));
        padding: var(--space-24);
        border: 1px solid var(--neutral-800);
        border-radius: var(--radius-lg);
        /* The corner card has to clear its own offset, not just its height. */
        transform: translateY(calc(100% + var(--space-24)));
    }
}

/* The sticky CTA sits at bottom: 0 too, and on mobile they would sit on top
   of each other. The consent decision comes first — the CTA returns the
   moment the banner is answered or dismissed. */
body:has(.cookie:not([hidden])) .sticky-cta {
    display: none;
}

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