/* =========================================================
   Cookies page ONLY
   Scoped under .cookies-root
   ========================================================= */

.cookies-root {
    --ck-radius: 18px;
    --ck-border: rgba(255,255,255,.10);
    --ck-shadow: 0 10px 26px rgba(0,0,0,.14);
    --ck-surface: rgba(255,255,255,.06);
    --ck-muted: rgba(255,255,255,.70);
    --ck-text: rgba(255,255,255,.92);
    --ck-accent: #0f62fe;
    --ck-pad: clamp(14px, 2.2vw, 22px);
    --ck-gap: clamp(14px, 2vw, 22px);
    --ck-h1: clamp(1.6rem, 2.4vw, 2.2rem);
    --ck-h2: clamp(1.25rem, 1.6vw, 1.5rem);
    --ck-lead: clamp(1.02rem, 1.1vw, 1.15rem);
    --ck-blur: 10px;
    display: grid;
    gap: var(--ck-gap);
}

/* Light theme overrides (Cookies only) */
html[data-theme="light"] .cookies-root {
    --ck-border: rgba(10,15,30,.10);
    --ck-shadow: 0 10px 22px rgba(10,20,40,.10);
    --ck-surface: rgba(10,15,30,.04);
    --ck-muted: rgba(10,15,30,.70);
    --ck-text: rgba(10,15,30,.92);
}

/* Dark tweak */
html[data-theme="dark"] .cookies-root {
    --ck-border: rgba(255,255,255,.08);
    --ck-surface: rgba(255,255,255,.05);
}

/* Base cards */
.cookies-root > .card {
    border-radius: var(--ck-radius);
    border: 1px solid var(--ck-border);
    background: var(--ck-surface);
    box-shadow: var(--ck-shadow);
    backdrop-filter: blur(var(--ck-blur));
    -webkit-backdrop-filter: blur(var(--ck-blur));
}

    .cookies-root > .card.stack {
        padding: var(--ck-pad);
    }

/* HERO */
.cookies-hero {
    position: relative;
    overflow: hidden;
}

    .cookies-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(900px 380px at 18% 18%, rgba(15,98,254,.25), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.04), transparent 70%);
    }

    .cookies-hero > * {
        position: relative;
        z-index: 1;
    }

.cookies-root .eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    letter-spacing: .02em;
    color: var(--ck-muted);
}

    .cookies-root .eyebrow::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: var(--ck-accent);
        box-shadow: 0 0 0 4px rgba(15,98,254,.18);
    }

.cookies-root h1 {
    margin: 0;
    font-size: var(--ck-h1);
    line-height: 1.15;
    color: var(--ck-text);
    text-wrap: balance;
}

.cookies-root .lead {
    margin: 0;
    font-size: var(--ck-lead);
    line-height: 1.55;
    color: var(--ck-text);
    opacity: .92;
}

/* Typography */
.cookies-root h2 {
    margin: 0 0 6px 0;
    font-size: var(--ck-h2);
    line-height: 1.2;
    color: var(--ck-text);
}

.cookies-root h3 {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    color: var(--ck-text);
}

.cookies-root p {
    color: var(--ck-text);
    opacity: .92;
}

.cookies-root .text-muted {
    color: var(--ck-muted) !important;
}

.cookies-root a {
    color: var(--ck-accent);
    text-decoration: none;
}

    .cookies-root a:hover {
        text-decoration: underline;
    }

/* Inner panels */
.cookies-root .row .card {
    border-radius: 16px;
    border: 1px solid var(--ck-border);
    background: rgba(255,255,255,.03);
    box-shadow: none;
}

html[data-theme="light"] .cookies-root .row .card {
    background: rgba(10,15,30,.02);
}

/* Consent Center layout */
.cookies-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.cookies-note {
    margin-top: 6px;
}

.cookies-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.cookies-toggle.card {
    padding: 14px;
    background: rgba(255,255,255,.03);
}

.cookies-toggle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .86rem;
    border: 1px solid var(--ck-border);
    color: var(--ck-muted);
    background: rgba(255,255,255,.03);
}

.badge-locked {
    color: var(--ck-text);
    background: rgba(15,98,254,.10);
    border-color: rgba(15,98,254,.25);
}

/* Switch */
.switch {
    position: relative;
    width: 52px;
    height: 30px;
    display: inline-block;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    border-radius: 999px;
    border: 1px solid var(--ck-border);
    background: rgba(255,255,255,.06);
    transition: 140ms ease;
}

    .slider::before {
        content: "";
        position: absolute;
        width: 24px;
        height: 24px;
        left: 3px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 999px;
        background: rgba(255,255,255,.85);
        box-shadow: 0 8px 16px rgba(0,0,0,.18);
        transition: 140ms ease;
    }

.switch input:checked + .slider {
    background: rgba(15,98,254,.20);
    border-color: rgba(15,98,254,.35);
}

    .switch input:checked + .slider::before {
        left: 24px;
        background: #ffffff;
    }

/* Key-value list for stored items */
.kv {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

    .kv li {
        display: grid;
        gap: 6px;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid var(--ck-border);
        background: rgba(255,255,255,.03);
    }

    .kv .k {
        color: var(--ck-text);
    }

    .kv .v {
        color: var(--ck-muted);
    }

/* How-to list */
.howto {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
    color: var(--ck-text);
    opacity: .92;
}

/* Tip box */
.cookies-tip {
    border-radius: 16px;
    border: 1px solid rgba(15,98,254,.25) !important;
    background: rgba(15,98,254,.08) !important;
}

/* Responsive */
@media (max-width: 992px) {
    .cookies-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .cookies-root > .card.stack {
        padding: 14px;
    }
}