/*
 * TESSin_Gdpr — cookie consent (luxury, CSP-safe, mobile-first, WCAG 2.5.8).
 *
 * Plain CSS (no LESS) — avoids the Less.php strict-math traps and lets the
 * module ship its own styles independently of the theme build. Colours consume
 * the Studio runtime tokens (--tsn-studio-color-*) with the static token values
 * as fallback, so it stays brand-coherent whether or not the Studio palette
 * block is present. Typography intentionally inherits the theme family
 * (a single family, per the Studio philosophy) and builds the editorial feel
 * through size, weight and letter-spacing — not by importing extra fonts.
 *
 * Everything is scoped under .tsn-gdpr (and the #tsn-gdpr-root id) to avoid
 * leaking into the storefront.
 */

.tsn-gdpr {
    --tsn-gdpr-ink: var(--tsn-studio-color-ink, #151515);
    --tsn-gdpr-muted: var(--tsn-studio-color-muted, #6d6760);
    --tsn-gdpr-border: var(--tsn-studio-color-border, #ddd6cd);
    --tsn-gdpr-surface: var(--tsn-studio-color-surface, #ffffff);
    --tsn-gdpr-canvas: var(--tsn-studio-color-canvas, #f6f1ea);
    --tsn-gdpr-accent: var(--tsn-studio-color-accent, #2a211d);
    --tsn-gdpr-shadow: 0 24px 64px rgba(21, 21, 21, 0.18);
    --tsn-gdpr-ease: cubic-bezier(0.645, 0.045, 0.355, 1);
    box-sizing: border-box;
}

.tsn-gdpr *,
.tsn-gdpr *::before,
.tsn-gdpr *::after {
    box-sizing: border-box;
}

/* ---------- hidden states ---------- */
/* Gemella obbligatoria di [hidden] (trappola nota css-hidden-vs-author-display,
   CLAUDE.md): senza questa regola un `display` d'autore piu' specifico puo'
   contraddire l'attributo `hidden` nel markup. `!important` DOCUMENTATO
   (xTRAP2 #27): `hidden` e' una dichiarazione di STATO, non deve poter essere
   vinta da una regola di aspetto — stessa formula del canone in
   `LayeredNav/layerednav-regia.css:319-325`. */
.tsn-gdpr[hidden],
.tsn-gdpr [hidden] {
    display: none !important;
}

/* ---------- backdrop ---------- */
.tsn-gdpr__backdrop {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(21, 21, 21, 0.55);
    opacity: 0;
    transition: opacity 500ms var(--tsn-gdpr-ease);
}

.tsn-gdpr__backdrop.is-open {
    opacity: 1;
}

/* ---------- dialog ---------- */
.tsn-gdpr__dialog {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--tsn-gdpr-surface);
    color: var(--tsn-gdpr-ink);
    border: 1px solid var(--tsn-gdpr-border);
    box-shadow: var(--tsn-gdpr-shadow);
    padding: 48px 44px 36px;
    transform: translateY(24px) scale(0.98);
    opacity: 0;
    transition: transform 500ms var(--tsn-gdpr-ease), opacity 500ms var(--tsn-gdpr-ease);
}

.tsn-gdpr__backdrop.is-open .tsn-gdpr__dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ---------- close (X) = reject ---------- */
.tsn-gdpr__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tsn-gdpr-muted);
    cursor: pointer;
    line-height: 1;
    font-size: 22px;
}

.tsn-gdpr__close:hover { color: var(--tsn-gdpr-ink); }

/* ---------- typography ---------- */
.tsn-gdpr__eyebrow {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tsn-gdpr-muted);
}

.tsn-gdpr__title {
    margin: 0 0 16px;
    font-family: inherit;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0.005em;
    color: var(--tsn-gdpr-ink);
}

.tsn-gdpr__body {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--tsn-gdpr-muted);
}

.tsn-gdpr__links {
    margin: -8px 0 24px;
    font-size: 13px;
    line-height: 1.6;
}

.tsn-gdpr__links a {
    color: var(--tsn-gdpr-ink);
    text-underline-offset: 3px;
}

/* ---------- action buttons ---------- */
.tsn-gdpr__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tsn-gdpr__btn {
    flex: 1 1 0;
    min-width: 140px;
    min-height: 48px;
    padding: 14px 20px;
    border-radius: 0; /* squared CTAs */
    border: 1px solid var(--tsn-gdpr-ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

/* Accept all & Reject all: IDENTICAL solid CTAs — equal size, equal graphic
 * prominence and equal clicks (Garante 2021 / EDPB), LV-style paired buttons.
 * They are visually interchangeable; only the label differs. */
.tsn-gdpr__btn--accept,
.tsn-gdpr__btn--reject {
    background: var(--tsn-gdpr-ink);
    color: var(--tsn-gdpr-surface);
    border-color: var(--tsn-gdpr-ink);
}
.tsn-gdpr__btn--accept:hover,
.tsn-gdpr__btn--reject:hover {
    background: var(--tsn-gdpr-accent);
    border-color: var(--tsn-gdpr-accent);
}

/* Customize/Save: quiet underlined link — third, lower-emphasis option. */
.tsn-gdpr__btn--ghost {
    flex-basis: 100%;
    background: transparent;
    border-color: transparent;
    color: var(--tsn-gdpr-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
    min-height: 40px;
    margin-top: 4px;
}
.tsn-gdpr__btn--ghost:hover { color: var(--tsn-gdpr-muted); }

/* ---------- preference center ---------- */
.tsn-gdpr__cats {
    margin: 6px 0 24px;
    border-top: 1px solid var(--tsn-gdpr-border);
}

.tsn-gdpr__cat {
    border-bottom: 1px solid var(--tsn-gdpr-border);
    padding: 18px 0;
}

.tsn-gdpr__cat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.tsn-gdpr__cat-title {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--tsn-gdpr-ink);
}

.tsn-gdpr__cat-desc {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--tsn-gdpr-muted);
}

/* ---------- toggle switch ---------- */
.tsn-gdpr__switch {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 28px;
}

.tsn-gdpr__switch input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.tsn-gdpr__switch input:disabled {
    cursor: not-allowed;
}

.tsn-gdpr__track {
    position: absolute;
    inset: 0;
    border: 1px solid var(--tsn-gdpr-border);
    background: var(--tsn-gdpr-canvas);
    border-radius: 999px;
    transition: background-color 180ms ease, border-color 180ms ease;
    pointer-events: none;
}

.tsn-gdpr__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: var(--tsn-gdpr-surface);
    border: 1px solid var(--tsn-gdpr-border);
    border-radius: 50%;
    transition: transform 180ms var(--tsn-gdpr-ease);
}

.tsn-gdpr__switch input:checked + .tsn-gdpr__track {
    background: var(--tsn-gdpr-ink);
    border-color: var(--tsn-gdpr-ink);
}

.tsn-gdpr__switch input:checked + .tsn-gdpr__track::after {
    transform: translateX(20px);
    border-color: var(--tsn-gdpr-ink);
}

.tsn-gdpr__switch input:disabled + .tsn-gdpr__track {
    opacity: 0.6;
}

/* ---------- persistent badge ---------- */
.tsn-gdpr__badge {
    position: fixed;
    bottom: 18px;
    z-index: 99990;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 16px;
    border: 1px solid var(--tsn-gdpr-border);
    border-radius: 0;
    background: var(--tsn-gdpr-surface);
    color: var(--tsn-gdpr-ink);
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(21, 21, 21, 0.1);
    transition: background-color 180ms ease;
}

.tsn-gdpr__badge:hover { background: var(--tsn-gdpr-canvas); }
.tsn-gdpr__badge--bottom-left { left: 18px; }
.tsn-gdpr__badge--bottom-right { right: 18px; }

/* ---------- focus visibility (WCAG) ---------- */
.tsn-gdpr :focus-visible {
    outline: 2px solid var(--tsn-gdpr-ink);
    outline-offset: 2px;
}
.tsn-gdpr .tsn-gdpr__switch input:focus-visible + .tsn-gdpr__track {
    outline: 2px solid var(--tsn-gdpr-ink);
    outline-offset: 2px;
}

/* ---------- mobile: still a centered window (not a docked bar) ---------- */
@media (max-width: 600px) {
    .tsn-gdpr__backdrop {
        align-items: center;
        padding: 16px;
    }
    .tsn-gdpr__dialog {
        max-width: none;
        max-height: calc(100vh - 32px);
        padding: 36px 24px 26px;
    }
    /* Accept / Reject stay side-by-side and equal; the ghost link is full width. */
    .tsn-gdpr__btn--accept,
    .tsn-gdpr__btn--reject { min-width: 0; flex: 1 1 0; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .tsn-gdpr__backdrop,
    .tsn-gdpr__dialog,
    .tsn-gdpr__track::after {
        transition: none;
    }
    .tsn-gdpr__dialog { transform: none; }
}
