/*
| The cookie bar, and the link that brings it back.
|
| Its own sheet, loaded only on pages somebody measures: a site with no
| Google Analytics id should not pay for rules it can never use. It reads the
| colour tokens every surface defines, with the storefront's names first and
| the admins' second, so it looks like the page it sits on.
*/

.consent-bar {
    /* The accent each surface calls by its own name: a shop's --primary,
       an admin's --accent, the public site's --gold. */
    --consent-accent: var(--primary, var(--accent, var(--gold, #1d4ed8)));
    --consent-ink: var(--primary-contrast, var(--accent-ink, var(--gold-ink, #ffffff)));
    position: fixed;
    left: 50%;
    /* Clear of a phone's home indicator where the page is drawn under it. */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 95;
    transform: translateX(-50%);
    width: min(46rem, calc(100vw - 32px));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4);
    background: var(--surface, #ffffff);
    color: var(--text, #111418);
    border: 1px solid var(--border, #d0d7de);
    border-radius: var(--radius, 16px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}

.consent-bar[hidden] { display: none; }
.consent-text { flex: 1 1 18rem; margin: 0; font-size: .9rem; line-height: 1.5; }
.consent-text a { color: inherit; font-weight: 600; text-decoration: none; }
.consent-actions { display: flex; flex-wrap: wrap; gap: var(--gap-buttons); }

.consent-button {
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border, #d0d7de);
    border-radius: 999px;
    background: var(--surface-2, #f3f4f6);
    color: var(--text, #111418);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}

.consent-button.consent-allow {
    border-color: var(--consent-accent);
    background: var(--consent-accent);
    color: var(--consent-ink);
}

.consent-link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.consent-button:focus-visible,
.consent-link:focus-visible,
.consent-text a:focus-visible {
    outline: 2px solid var(--primary, var(--accent, var(--gold, #1d4ed8)));
    outline-offset: 2px;
}

/* Above the tab bar a signed-in customer has on a phone. */
@media (max-width: 899px) {
    .app-shell ~ .consent-bar, .has-tabbar .consent-bar { bottom: 88px; }
}