/**
 * Banner e pannello del consenso.
 *
 * I colori arrivano dai token del tema quando ci sono; i valori di riserva
 * servono perche' questo plugin deve funzionare anche sotto un tema diverso —
 * il consenso non e' una cosa che puo' smettere di esistere cambiando grafica.
 *
 * «Rifiuta» e «Accetta» hanno la stessa dimensione e lo stesso peso. La
 * differenza e' solo di riempimento: uno pieno, uno con il bordo. Nessuno dei
 * due e' piu' facile da premere dell'altro.
 */

.st-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* ------------------------------------------------------------------ banner */

.st-consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 9000;
    padding: 16px;
    pointer-events: none;
}

.st-consent__bar {
    pointer-events: auto;
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: var(--st-white, #fff);
    border: 1px solid var(--st-border, #DED8D0);
    border-radius: var(--st-radius, 10px);
    box-shadow: 0 12px 40px rgba(47, 50, 54, .16);
}

.st-consent__text { flex: 1 1 420px; }
.st-consent__title {
    margin: 0 0 4px;
    font-weight: 600;
    color: var(--st-charcoal, #2F3236);
}
.st-consent__text p {
    margin: 0;
    font-size: var(--st-fs-small);
    line-height: 1.6;
    color: var(--st-text, #242424);
}
.st-consent__text a { color: var(--st-copper, #AE4C0B); }

.st-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 0 0 auto;
}

.st-consent__btn {
    min-height: 44px;              /* area di tocco: 44 px, non 24 */
    padding: 11px 20px;
    border-radius: var(--st-radius-sm, 6px);
    border: 1.5px solid transparent;
    font: inherit;
    font-size: var(--st-fs-small);
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}
.st-consent__btn:disabled { opacity: .6; cursor: progress; }

.st-consent__btn--solid {
    background: var(--st-copper, #AE4C0B);
    border-color: var(--st-copper, #AE4C0B);
    color: #fff;
}
.st-consent__btn--solid:hover {
    background: var(--st-copper-dark, #8F3E09);
    border-color: var(--st-copper-dark, #8F3E09);
}
.st-consent__btn--outline {
    background: transparent;
    border-color: var(--st-charcoal, #2F3236);
    color: var(--st-charcoal, #2F3236);
}
.st-consent__btn--outline:hover { background: var(--st-ivory, #F7F4EF); }
.st-consent__btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--st-charcoal, #2F3236);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Il fuoco si vede. Su tutto, sempre: il report diagnostico ne contava 58
   invisibili su 60, ed era il difetto piu' facile da evitare. */
.st-consent__btn:focus-visible,
.st-consent-panel :focus-visible,
.st-consent-revoke:focus-visible {
    outline: 3px solid var(--st-copper, #AE4C0B);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- pannello */

.st-consent-panel {
    position: fixed;
    inset: 0;
    z-index: 9100;
    display: grid;
    place-items: center;
    padding: 16px;
}
.st-consent-panel[hidden] { display: none; }

.st-consent-panel__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(47, 50, 54, .55);
}

.st-consent-panel__dialog {
    position: relative;
    width: min(720px, 100%);
    max-height: min(86vh, 780px);
    overflow-y: auto;
    padding: 28px;
    background: var(--st-white, #fff);
    border-radius: var(--st-radius-lg, 16px);
    box-shadow: 0 24px 64px rgba(47, 50, 54, .28);
}
.st-consent-panel__dialog h2 {
    margin: 0 0 8px;
    font-size: var(--st-fs-h3);
    color: var(--st-charcoal, #2F3236);
}
.st-consent-panel__intro {
    margin: 0 0 20px;
    font-size: var(--st-fs-small);
    color: var(--st-muted, #6F6B66);
}

.st-consent-cat {
    padding: 16px 0;
    border-top: 1px solid var(--st-border, #DED8D0);
}
.st-consent-cat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.st-consent-cat__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--st-charcoal, #2F3236);
    cursor: pointer;
    min-height: 44px;
}
.st-consent-cat__label input { width: 20px; height: 20px; cursor: pointer; }
.st-consent-cat__label input:disabled { cursor: default; }

.st-consent-cat__always {
    font-size: var(--st-fs-micro);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--st-muted, #6F6B66);
}
.st-consent-cat__what {
    margin: 4px 0 0;
    font-size: var(--st-fs-small);
    line-height: 1.6;
    color: var(--st-text, #242424);
}

.st-consent-cat__details { margin-top: 10px; }
.st-consent-cat__details summary {
    cursor: pointer;
    font-size: var(--st-fs-micro);
    color: var(--st-copper, #AE4C0B);
    min-height: 32px;
    display: flex;
    align-items: center;
}
.st-consent-cat__table {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    font-size: var(--st-fs-micro);
}
.st-consent-cat__table th,
.st-consent-cat__table td {
    padding: 7px 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--st-border, #DED8D0);
}
.st-consent-cat__table th { font-weight: 600; color: var(--st-muted, #6F6B66); }
.st-consent-cat__table code { font-size: var(--st-fs-micro); word-break: break-all; }

.st-consent-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--st-border, #DED8D0);
}

.st-consent-revoke {
    background: none;
    border: 0;
    padding: 6px 0;
    font: inherit;
    font-size: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

@media (max-width: 700px) {
    .st-consent { padding: 8px; }
    .st-consent__bar { padding: 16px; gap: 14px; }
    .st-consent__actions { width: 100%; }
    .st-consent__actions .st-consent__btn { flex: 1 1 auto; }
    .st-consent-panel__dialog { padding: 20px; }
    .st-consent-panel__actions .st-consent__btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .st-consent__btn { transition: none; }
}

/* =======================================================================
 * LA BARRA RISERVA IL SUO SPAZIO
 *
 * E' fissa in fondo, quindi non occupa posto nel flusso: su una pagina lunga
 * non si nota, ma su una corta — «Tende per la cucina», che non ha copertina
 * e ha poco testo — copre il piede senza che nulla scorra sotto. Il collaudo
 * l'ha presa: barra alta 143px, spazio riservato 0.
 *
 * `:has()` limita la riserva al tempo in cui la barra c'e' davvero: appena
 * qualcuno sceglie, la barra sparisce e con lei lo spazio.
 * ===================================================================== */
body:has(.st-consent:not([hidden])) {
    padding-bottom: 160px;
}
@media (max-width: 700px) {
    body:has(.st-consent:not([hidden])) { padding-bottom: 220px; }
}