/* =========================================================
   Shared styling for: About / Privacy / Terms / Consent / Sitemap
   Scope: .policy-root
   ========================================================= */

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

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

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

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

    .policy-root > .card.stack {
        padding: var(--pp-pad);
    }

/* Hero */
.policy-hero {
    position: relative;
    overflow: hidden;
}

    .policy-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%);
    }

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

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

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

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

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

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

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

.policy-root p, .policy-root li {
    color: var(--pp-text);
    opacity: .92;
}

.policy-root .text-muted {
    color: var(--pp-muted) !important;
}

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

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

.policy-root code {
    padding: 2px 6px;
    border-radius: 8px;
    border: 1px solid var(--pp-border);
    background: rgba(255,255,255,.03);
}

/* Panels in rows */
.policy-root .row .card {
    border-radius: 16px;
    border: 1px solid var(--pp-border);
    background: rgba(255,255,255,.03);
    box-shadow: none;
}

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

/* Lists */
.policy-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
}

.policy-kv {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

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

/* Callouts */
.policy-callout {
    border-radius: 16px;
    border: 1px solid rgba(15,98,254,.25) !important;
    background: rgba(15,98,254,.08) !important;
}

/* Simple switches for consent page */
.policy-switch {
    position: relative;
    width: 52px;
    height: 30px;
    display: inline-block;
}

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

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

    .policy-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;
    }

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

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

/* Consent grid */
.policy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.policy-grid-card {
    padding: 14px;
}

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

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

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

/* Actions row */
.policy-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

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

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