/* GDPR-G1 (C4, C6), GDPR-G2 (0.2, 0.4), GDPR-CURA (7) — il pannello delle scelte.
 *
 * ASPETTO DAL MODELLO APPROVATO (`docs/design/gdpr-banner/…/cookie-consent.css`): scheda con testata
 * (logo e nome a sinistra, lingue e × a destra), elenco puntato delle finalità, nota, collegamenti,
 * «Rifiuta» e «Accetta» affiancati con lo stesso peso e «Personalizza» largo sotto; «Personalizza» è una
 * finestra in primo piano con testata e piede fermi e il corpo che scorre; a telefono la scheda sale dal
 * basso e la finestra prende lo schermo intero. Del modello NON si prendono i colori fissi né i caratteri
 * da terzi: i colori vengono dai TOKEN DEL GUSCIO, i caratteri sono quelli della pagina.
 *
 * NOMI NEUTRI (`kasc`): le liste dei blocchi sugli avvisi nascondevano gli elementi per nome. Il pulsante
 * tondo non c'è più (GDPR-CURA-2): il pannello si riapre da «Modifica privacy» nel piede di ogni guscio.
 *
 * L'ASPETTO VIENE DAI TOKEN DEL GUSCIO, SENZA CODICE PER MONDO: il portale `--cportal-*`, la vetrina
 * `--carta`/`--ink`, l'applicazione i `--bs-*`. Vale il primo definito.
 *
 * CONTRASTO AA PER COSTRUZIONE: testo e pulsanti usano la COPPIA inchiostro su carta del guscio stesso, e
 * l'accento del marchio non porta mai testo. «Rifiuta» e «Accetta» hanno la stessa classe (C2).
 */

.kasc-pannello,
.kasc-conferma,
.kasc-piede {
  --kasc-carta: var(--cportal-surface, var(--carta, var(--bs-body-bg, #ffffff)));
  --kasc-inchiostro: var(--cportal-ink, var(--ink, var(--bs-body-color, #1d1d1b)));
  --kasc-linea: var(--cportal-line, var(--bs-border-color, #8a8a8a));
  --kasc-raggio: var(--cportal-radius, var(--r-s, 0.625rem));
  font-size: 0.9375rem;
  line-height: 1.5;
}

.kasc-vh {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.kasc-pannello *, .kasc-conferma * { box-sizing: border-box; }
.kasc-pannello a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.kasc-pannello :focus-visible { outline: 3px solid var(--kasc-inchiostro); outline-offset: 2px; }

/* --- il primo livello -------------------------------------------------- */
.kasc-pannello {
  /* Centrato con i margini, MAI con `transform`: un antenato trasformato diventa il riferimento dei
   * `position: fixed` interni, e lo sfondo di Personalizza si ancorava al pannello invece che allo
   * schermo (la modale usciva di sotto e il piede coi pulsanti non si vedeva). */
  position: fixed;
  z-index: 2147483000;
  left: 0; right: 0; margin-inline: auto;
  width: min(40rem, calc(100vw - 2rem));
  color: var(--kasc-inchiostro);
}
.kasc-pannello[hidden] { display: none; }
.kasc-pannello:focus { outline: none; }
.kasc-pannello.kasc-pos-basso { bottom: 1rem; }
.kasc-pannello.kasc-pos-alto { top: 1rem; }
.kasc-pannello.kasc-pos-centro { top: 0; bottom: 0; margin-block: auto; height: fit-content; }

.kasc-scheda {
  background: var(--kasc-carta);
  border: 1px solid var(--kasc-linea);
  border-radius: var(--kasc-raggio);
  box-shadow: 0 1.125rem 3rem rgba(20, 18, 15, 0.18);
  padding: 1.375rem;
  display: flex; flex-direction: column; gap: 1rem;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  /* QUIZ-2 (cura 2, A) — LA SCHEDA NON SCORRE: SCORRE IL SUO CORPO. Scorreva tutta insieme, e su uno schermo basso
   * i gesti di scelta finivano sotto il bordo (a 360×640 «Rifiuta tutto» e «Accetta tutto» erano tagliati a metà e
   * «Personalizza» non si vedeva). Testata (con la ×) e gesti restano FERMI e INTERI a ogni altezza; il testo in
   * mezzo prende lo spazio che resta e scorre al suo interno. */
  overflow: hidden;
}
.kasc-scheda > .kasc-testa, .kasc-scheda > .kasc-azioni { flex: none; }
.kasc-scheda > .kasc-corpo {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  /* the scroll bar must not sit on the words, and a focus ring must not be clipped by the scrolling box */
  padding: 0.125rem 0.25rem 0.125rem 0.125rem; margin: -0.125rem -0.25rem -0.125rem -0.125rem;
}
.kasc-testa, .kasc-mtesta { display: flex; align-items: center; gap: 0.625rem; }
/* QUIZ-3 (C12) — THE LOGO HAS A FIXED HEIGHT AND A FREE WIDTH (up to a maximum), its proportions kept: a wide,
   low logo forced into the square of the initial came out tiny. The square stays only for the initial, which is
   what a site without a logo shows. `min-width: 0` + the maximum keep the header inside a 360 px screen with the
   languages and the close button whole. */
.kasc-logo {
  flex: 0 1 auto; height: 2.75rem; width: auto; min-width: 0; max-width: min(15rem, 55%);
  object-fit: contain; object-position: left center;
}
.kasc-logo-iniziale {
  flex: none; width: 2.75rem; height: 2.75rem; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--kasc-inchiostro); color: var(--kasc-carta); font-weight: 600;
}
.kasc-sito { flex: 1; min-width: 0; font-weight: 600; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kasc-lingue { display: flex; gap: 0.125rem; flex-wrap: wrap; }
.kasc-pannello .kasc-lingua {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; min-height: 2.25rem; border-radius: 0.375rem;
  font-size: 0.75rem; text-decoration: none; letter-spacing: 0.04em;
}
.kasc-lingua[aria-current="true"] { font-weight: 700; outline: 1px solid var(--kasc-linea); }
.kasc-x {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border: 1px solid transparent; border-radius: 0.5rem;
  background: transparent; color: inherit; font: inherit; font-size: 1.375rem; line-height: 1; cursor: pointer;
}
.kasc-pannello a.kasc-x { text-decoration: none; }
.kasc-x:hover { border-color: var(--kasc-linea); }
.kasc-corpo { display: flex; flex-direction: column; gap: 0.5rem; }
.kasc-titolo { margin: 0; font-size: 1.125rem; font-weight: 600; color: inherit; }
.kasc-testo, .kasc-nota { margin: 0; font-size: 0.875rem; }
.kasc-nota { font-size: 0.8125rem; }
.kasc-elenco { margin: 0; padding-left: 1.125rem; display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.875rem; }
.kasc-link { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; font-size: 0.8125rem; }
.kasc-link a { padding: 0.375rem 0; }
.kasc-link code { font-size: 0.75rem; color: inherit; background: none; }

/* --- i pulsanti -------------------------------------------------------- */
.kasc-azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.kasc-btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3rem; padding: 0.625rem 0.875rem;
  font: inherit; font-size: 0.9375rem; font-weight: 600;
  background: var(--kasc-inchiostro); color: var(--kasc-carta);
  border: 2px solid var(--kasc-inchiostro); border-radius: calc(var(--kasc-raggio) * 0.6);
  cursor: pointer;
}
.kasc-tenue { background: var(--kasc-carta); color: var(--kasc-inchiostro); }
.kasc-btn:hover { filter: brightness(1.15); }
.kasc-tenue:hover { filter: none; text-decoration: underline; }
.kasc-largo, .kasc-personalizza, .kasc-esito { grid-column: 1 / -1; }
.kasc-esito { margin: 0; font-size: 0.85rem; }
.kasc-esito:empty { display: none; }

/* --- Personalizza: un <details> che si apre in primo piano -------------- */
.kasc-personalizza > summary { list-style: none; }
.kasc-personalizza > summary::-webkit-details-marker { display: none; }
.kasc-modale-sfondo {
  position: fixed; inset: 0; z-index: 2147483002;
  background: rgba(20, 18, 15, 0.38);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.kasc-modale {
  width: min(45rem, 100%); max-height: min(88vh, 56rem); max-height: min(88dvh, 56rem);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--kasc-carta); color: var(--kasc-inchiostro);
  border-radius: var(--kasc-raggio); box-shadow: 0 1.5rem 4.5rem rgba(20, 18, 15, 0.25);
}
.kasc-mtesta { flex: none; padding: 0.75rem 0.75rem 0.75rem 1.5rem; border-bottom: 1px solid var(--kasc-linea); }
.kasc-mtesta h2 { flex: 1; min-width: 0; margin: 0; font-size: 1.0625rem; font-weight: 600; color: inherit; }
.kasc-mcorpo {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 0.625rem;
}
.kasc-mpiede {
  flex: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem;
  padding: 0.75rem 1.5rem max(0.75rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--kasc-linea);
}
.kasc-cat {
  border: 1px solid var(--kasc-linea); border-radius: calc(var(--kasc-raggio) * 0.8);
  padding: 1rem; display: flex; flex-direction: column; gap: 0.625rem;
}
.kasc-cat h3 { margin: 0; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: inherit; }
.kasc-cat-testa { display: flex; align-items: flex-start; gap: 0.75rem; }
.kasc-cat-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.kasc-cat-titolo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.kasc-conta { font-size: 0.75rem; }
.kasc-cat-txt p { margin: 0; font-size: 0.84375rem; }
.kasc-sempre { font-size: 0.78125rem; font-weight: 600; white-space: nowrap; padding-top: 0.125rem; }
.kasc-collegamenti ul { margin: 0; padding-left: 1.125rem; font-size: 0.875rem; }

/* L'interruttore: una casella vera (funziona senza script), disegnata come il modello. */
.kasc-switch { flex: none; position: relative; display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; cursor: pointer; }
.kasc-switch input { position: absolute; opacity: 0; width: 2.75rem; height: 1.625rem; margin: 0; cursor: pointer; }
.kasc-switch-binario {
  position: relative; display: block; width: 2.75rem; height: 1.625rem; border-radius: 0.8125rem;
  background: var(--kasc-linea); transition: background 0.2s;
}
.kasc-switch-binario::after {
  content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; background: var(--kasc-carta); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: left 0.2s;
}
.kasc-switch input:checked + .kasc-switch-binario { background: var(--kasc-inchiostro); }
.kasc-switch input:checked + .kasc-switch-binario::after { left: 1.3125rem; }
.kasc-switch input:focus-visible + .kasc-switch-binario { outline: 3px solid var(--kasc-inchiostro); outline-offset: 2px; }
.kasc-switch-riga { width: 100%; justify-content: space-between; }
.kasc-switch-riga input { right: 0; }
.kasc-tutti { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; font-weight: 600; font-size: 0.875rem; cursor: pointer; }
.kasc-tutti[hidden] { display: none; }
.kasc-tutti input { width: 1.25rem; height: 1.25rem; accent-color: var(--kasc-inchiostro); }
.kasc-servizi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kasc-servizio { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; border-top: 1px solid var(--kasc-linea); }
.kasc-servizio .kasc-switch-riga { flex: 1 1 12rem; }
.kasc-servizio-nome { font-weight: 600; font-size: 0.875rem; }
.kasc-servizio-info { font-size: 0.8125rem; }

.kasc-espandi > summary {
  cursor: pointer; display: inline-flex; align-items: center; min-height: 2.5rem;
  font-size: 0.84375rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.kasc-espandi .kasc-nascondi, .kasc-espandi[open] .kasc-mostra { display: none; }
.kasc-espandi[open] .kasc-nascondi { display: inline; }
.kasc-tabella-scorre { overflow-x: auto; }
.kasc-tabella { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.kasc-tabella th, .kasc-tabella td { text-align: left; vertical-align: top; padding: 0.3rem 0.5rem 0.3rem 0; border-bottom: 1px solid var(--kasc-linea); }
.kasc-tabella code { color: inherit; background: none; font-size: 0.85em; overflow-wrap: anywhere; }

/* --- la riga di piede minima dei gusci che un piede non l'hanno (GDPR-CURA-2, 2.2) ------ */
.kasc-piede { text-align: center; padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom)); font-size: 0.8125rem; }
/* QUIZ-2 (cura 2, B) — «MODIFICA PRIVACY» SI LEGGE SU QUALUNQUE SFONDO. Ereditava il colore del testo della pagina:
 * sull'ingresso di un mondo con lo sfondo scuro (verde #0f3a2e, misurato) era testo scuro su fondo scuro, cioe'
 * invisibile — e sulle pagine d'ingresso e' l'UNICA via per aprire il pannello, che li' non si presenta da solo.
 * Porta con se' la coppia inchiostro-su-carta del guscio (la stessa del pannello, AA per costruzione): su una pagina
 * chiara e' un collegamento come prima, su una scura e' una targhetta leggibile. Alto 44px: e' un gesto. */
.kasc-piede-link {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.25rem 0.875rem;
  background: var(--kasc-carta); color: var(--kasc-inchiostro);
  border-radius: calc(var(--kasc-raggio) * 0.6);
  text-decoration: underline; text-underline-offset: 2px;
}

/* --- la conferma (il pannello si riapre da «Modifica privacy» nel piede, GDPR-CURA-2) --- */
.kasc-conferma {
  position: fixed; z-index: 2147483003; right: 1.25rem; bottom: 1.25rem;
  display: flex; flex-direction: column; gap: 0.125rem; padding: 0.75rem 1rem;
  background: var(--kasc-inchiostro); color: var(--kasc-carta); border-radius: var(--kasc-raggio);
  font-size: 0.8125rem; max-width: calc(100vw - 2rem);
}
.kasc-conferma[hidden] { display: none; }
.kasc-conferma code { color: inherit; background: none; font-size: 0.75rem; overflow-wrap: anywhere; }

/* --- telefono: la scheda sale dal basso, Personalizza prende lo schermo --- */
@media (max-width: 639.98px) {
  .kasc-pannello.kasc-pos-basso, .kasc-pannello.kasc-pos-alto, .kasc-pannello.kasc-pos-centro {
    left: 0; right: 0; bottom: 0; top: auto; width: auto; transform: none;
  }
  .kasc-pannello:not(.kasc-anteprima) .kasc-scheda {
    border-radius: var(--kasc-raggio) var(--kasc-raggio) 0 0; border-bottom: 0;
    max-height: 88vh; max-height: 88dvh;
    padding: 0.75rem 1rem max(1rem, env(safe-area-inset-bottom));
  }
  .kasc-modale-sfondo { padding: 0; background: transparent; }
  .kasc-modale { width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
  .kasc-mtesta { padding-left: 1rem; }
  .kasc-mcorpo { padding: 1rem; }
  .kasc-mpiede { grid-template-columns: 1fr 1fr; padding-left: 1rem; padding-right: 1rem; }
  .kasc-salva { grid-column: 1 / -1; }
  .kasc-conferma { left: 1rem; right: 1rem; top: max(1rem, env(safe-area-inset-top)); bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .kasc-switch-binario, .kasc-switch-binario::after { transition: none; }
}

/* --- l'anteprima in ops: lo stesso banner, fermo dentro la pagina -------- */
.kasc-pannello.kasc-anteprima { position: static; transform: none; width: auto; max-width: 40rem; }
.kasc-anteprima .kasc-scheda { max-height: none; overflow: visible; }
.kasc-anteprima .kasc-scheda > .kasc-corpo { overflow: visible; }
.kasc-anteprima .kasc-modale-sfondo { position: static; padding: 0; background: transparent; margin-top: 1rem; }
.kasc-anteprima .kasc-modale { width: 100%; height: auto; max-height: none; border: 1px solid var(--kasc-linea); }
.kasc-anteprima .kasc-btn:disabled { opacity: 1; cursor: default; }
.kasc-anteprima .kasc-personalizza > summary { pointer-events: none; }