/* Cookie consent gate — bottom bar + granular settings panel.
 * Uses spokar tokens (tokens.css) and the shared .btn classes (components.css).
 * Bespoke vars avoided; only consent-specific layout lives here. */

.spk-consent {
    position: fixed;
    left: 50%;
    bottom: clamp(0.75rem, 2vw, 1.5rem);
    transform: translateX(-50%);
    z-index: 10000;
    width: min(680px, calc(100vw - 2 * clamp(0.75rem, 2vw, 1.5rem)));
    background: var(--white);
    color: var(--slate);
    border-radius: var(--radius-md);
    border-top: 3px solid var(--olive);
    box-shadow: var(--shadow-2);
    font-family: var(--font-primary);
    /* Never exceed the viewport — scroll the panel on short screens (small
       phones, landscape) so the action buttons stay reachable. */
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
}

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

/* Slide-up entrance whenever the banner is shown (skipped under reduced-motion
   via the token override that zeroes --t-base). */
.spk-consent:not([hidden]) {
    animation: spk-consent-in var(--t-base) var(--ease-out-quint) both;
}

@keyframes spk-consent-in {
    from { opacity: 0; transform: translateX(-50%) translateY(1.25rem); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.spk-consent__inner {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.spk-consent__title {
    margin: 0 0 0.4rem;
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: var(--leading-snug);
    color: var(--slate);
}

.spk-consent__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: var(--leading-body);
    color: var(--grey-600);
}

.spk-consent__more {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.spk-consent__more:hover {
    color: var(--primary-deep);
}

/* ─────────────── Granular options (Settings) ─────────────── */

.spk-consent__options {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--grey-200);
}

.spk-consent__options[hidden] {
    display: none;
}

.spk-consent__option-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.spk-consent__option-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--slate);
}

.spk-consent__option-desc {
    margin: 0.3rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--grey-600);
}

.spk-consent__always {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--olive-deep);
}

/* Toggle switch — built on a hidden checkbox for native keyboard a11y. */
.spk-consent__switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
}

.spk-consent__switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.spk-consent__switch-track {
    width: 2.6rem;
    height: 1.5rem;
    border-radius: var(--radius-pill);
    background: var(--grey-300);
    transition: background var(--t-fast) var(--ease-out-quint);
    display: inline-block;
    position: relative;
}

.spk-consent__switch-track::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--white);
    box-shadow: var(--shadow-1);
    transition: transform var(--t-fast) var(--ease-out-quint);
}

.spk-consent__switch input:checked + .spk-consent__switch-track {
    background: var(--olive-deep);
}

.spk-consent__switch input:checked + .spk-consent__switch-track::after {
    transform: translateX(1.1rem);
}

.spk-consent__switch input:focus-visible + .spk-consent__switch-track {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ─────────────── Actions ─────────────── */

.spk-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Two equal-weight buttons split the available width. */
.spk-consent__btn-settings,
.spk-consent__btn-accept {
    flex: 1 1 auto;
    justify-content: center;
}

@media (max-width: 560px) {
    .spk-consent {
        width: calc(100vw - 1.5rem);
        bottom: 0.75rem;
    }
    .spk-consent__actions {
        flex-direction: column;
    }
}