/* =====================================================================================
   INFINITHINK, banner e pannello del consenso cookie         consent.css  v2.0.0  2026-10-19
   -------------------------------------------------------------------------------------
   Markup disegnato da public/sito/consent.js (spec legale/cookie-banner-spec.md 4 e 5).
   Autonomo: vale anche sulle pagine di MagicAI (login, registrazione, dashboard) dove
   sito.css non c'è, quindi i token stanno qui, con lo stesso valore di sito.css.
   Tre comandi IDENTICI (stessa classe, misura, colore, contrasto) e X con la stessa
   evidenza: nessun colore mette in risalto "Accetta" (EDPB Taskforce, tipi D ed E).
   Nessun rosso. Motion appena percepito (entrata 8 px, 200 ms), nulla con reduced-motion.

   Contrasti WCAG 2.2 (calcolati sui valori esadecimali, script contrast.py 19/10/2026)
     fondo riquadro s2 #1C1D49:  titolo #F8F9FA 15,08 · testo #E2E8F0 12,89 ·
                                 note #94A3B8 6,20 · link #A5B4FC 7,97 · hover #C7D2FE 10,65
     bottoni s3 #24265A:         testo #F8F9FA 13,28; bordo #6E7A99 su s2 3,71 (controlli >= 3:1); hover #2C2F6B testo 11,54
     interruttore attivo:        pomello #0F0F2D su #06B6D4 7,68; traccia spenta bordo #6E7A99
     "Sempre attivi" #34D399 su s2 8,27 · focus #67E8F9 su s2 10,96
   A 375 px il riquadro occupa al massimo il 40% dell'altezza (scorre al suo interno) per
   non coprire il bottone primario dell'hero (da misurare nel collaudo, spec 11.11).
   ===================================================================================== */
.ift-consent {
  --c-bg: #1C1D49; --c-btn: #24265A; --c-btn-hover: #2C2F6B; --c-border: #323E62; --c-border-strong: #6E7A99;
  --c-text: #F8F9FA; --c-body: #E2E8F0; --c-muted: #94A3B8; --c-link: #A5B4FC; --c-link-hover: #C7D2FE;
  --c-on: #06B6D4; --c-knob: #0F0F2D; --c-ok: #34D399; --c-focus: #67E8F9;
  --c-font: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --c-ease: cubic-bezier(.25,.46,.45,.94);
  position: fixed; z-index: 9000; left: 12px; right: 12px; bottom: 12px;
  margin: 0 auto; max-width: 720px; outline: none;
  color: var(--c-body); font: 400 15px / 1.55 var(--c-font); letter-spacing: normal; text-align: left;
  -webkit-font-smoothing: antialiased;
}
.ift-consent[hidden] { display: none !important; }
.ift-consent *, .ift-consent *::before, .ift-consent *::after { box-sizing: border-box; }
@media (min-width: 992px) { .ift-consent { left: 24px; right: auto; bottom: 24px; width: min(720px, calc(100vw - 48px)); } }

.ift-consent__box {
  position: relative; max-height: min(40vh, 360px); overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 16px 14px; border-radius: 20px; background: var(--c-bg); border: 1px solid var(--c-border);
  box-shadow: 0 24px 48px -16px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .06);
  animation: ift-consent-in 200ms var(--c-ease) both;
}
/* Banner: scorre solo il testo, titolo e comandi restano sempre visibili */
.ift-consent:not([data-view="prefs"]) .ift-consent__box { display: flex; flex-direction: column; overflow: hidden; }
.ift-consent:not([data-view="prefs"]) .ift-consent__view:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ift-consent:not([data-view="prefs"]) .ift-consent__view .ift-consent__text { flex: 1 1 auto; min-height: 3em; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.ift-consent[data-view="prefs"] .ift-consent__box { max-height: min(80vh, 640px); }
@media (min-width: 768px) { .ift-consent__box { max-height: min(70vh, 560px); padding: 24px 24px 20px; } }
@keyframes ift-consent-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ift-consent:focus-visible .ift-consent__box { outline: 2px solid var(--c-focus); outline-offset: 2px; }

.ift-consent__title { margin: 0 52px 8px 0; color: var(--c-text); font: 600 16px / 1.3 var(--c-font); letter-spacing: -.005em; }
.ift-consent__text { margin: 0 0 14px; color: var(--c-body); font-size: 13.5px; line-height: 1.5; }
@media (min-width: 768px) { .ift-consent__text { font-size: 15px; line-height: 1.55; } .ift-consent__title { font-size: 17px; } }

.ift-consent__link { color: var(--c-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ift-consent__link:hover { color: var(--c-link-hover); text-decoration-thickness: 2px; }

/* Comandi: tre bottoni identici, sempre in riga a pari larghezza (anche a 375 px, così il
   riquadro resta basso e non copre il bottone primario dell'hero) */
.ift-consent__actions { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 576px) { .ift-consent__actions { gap: 8px; } }
.ift-consent__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 0; margin: 0; padding: 8px 6px;
  border: 1px solid var(--c-border-strong); border-radius: 9999px; background: var(--c-btn); color: var(--c-text);
  font: 600 13px / 1.2 var(--c-font); letter-spacing: -.01em; text-align: center; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color 200ms var(--c-ease), transform 200ms var(--c-ease);
}
@media (min-width: 576px) { .ift-consent__btn { padding: 10px 16px; font-size: 14px; letter-spacing: normal; } }
.ift-consent__btn:hover { background: var(--c-btn-hover); transform: translateY(-1px); }
.ift-consent__btn:active { transform: none; }
.ift-consent__btn:focus-visible, .ift-consent__close:focus-visible, .ift-consent__summary:focus-visible, .ift-consent__link:focus-visible {
  outline: 2px solid var(--c-focus); outline-offset: 2px;
}

/* X: stessa evidenza dei bottoni (bordo, fondo, contrasto), 44x44 */
.ift-consent__close {
  position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--c-border-strong); border-radius: 9999px;
  background: var(--c-btn); color: var(--c-text); cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color 200ms var(--c-ease);
}
.ift-consent__close:hover { background: var(--c-btn-hover); }
.ift-consent__close svg { width: 20px; height: 20px; }

/* Pannello Personalizza */
.ift-consent__view[hidden] { display: none; }
.ift-consent__cats { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.ift-consent__cat { margin: 0; padding: 14px 16px; border-radius: 14px; background: rgb(255 255 255 / .03); border: 1px solid var(--c-border); }
.ift-consent__cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ift-consent__cat-text { margin: 8px 0 0; color: var(--c-muted); font-size: 14px; line-height: 1.5; }
.ift-consent__always { flex: none; color: var(--c-ok); font-size: 13px; font-weight: 600; }

/* Interruttore: checkbox nativo con role="switch", visivamente sostituito, focus sul binario */
.ift-consent__switch { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--c-text); font-weight: 600; font-size: 15px; cursor: pointer; }
.ift-consent__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ift-consent__track { position: relative; flex: none; width: 44px; height: 24px; border-radius: 9999px; background: var(--c-btn); border: 1px solid var(--c-border-strong);
  transition: background-color 200ms var(--c-ease), border-color 200ms var(--c-ease); }
.ift-consent__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-muted);
  transition: transform 200ms var(--c-ease), background-color 200ms var(--c-ease); }
.ift-consent__input:checked + .ift-consent__track { background: var(--c-on); border-color: var(--c-on); }
.ift-consent__input:checked + .ift-consent__track::after { transform: translateX(20px); background: var(--c-knob); }
.ift-consent__input:disabled + .ift-consent__track { opacity: .7; }
.ift-consent__input:disabled ~ .ift-consent__cat-name { cursor: default; }
.ift-consent__switch:has(.ift-consent__input:disabled) { cursor: default; }
.ift-consent__input:focus-visible + .ift-consent__track { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* Elenco dei cookie, espandibile */
.ift-consent__details { margin-top: 8px; }
.ift-consent__summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--c-link); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; border-radius: 6px; }
.ift-consent__summary::-webkit-details-marker { display: none; }
.ift-consent__summary::marker { content: ""; }
.ift-consent__summary:hover { color: var(--c-link-hover); }
.ift-consent__chev { flex: none; transition: transform 200ms var(--c-ease); }
.ift-consent__details[open] .ift-consent__chev { transform: rotate(180deg); }
.ift-consent__cookies { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.ift-consent__cookie { display: grid; gap: 2px; margin: 0; padding: 10px 12px; border-radius: 10px; background: rgb(0 0 0 / .18); font-size: 13px; line-height: 1.45; }
.ift-consent__cookie-name { color: var(--c-text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.ift-consent__cookie-meta, .ift-consent__cookie-purpose { color: var(--c-muted); }

.ift-consent__links { margin: 14px 0 0; color: var(--c-muted); font-size: 13px; }
.ift-consent__sep { color: var(--c-muted); }

/* Testo solo per lettori di schermo, ridefinito qui per le pagine di MagicAI */
.ift-consent .ift-sr, #ift-consent-live.ift-sr {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .ift-consent__box { animation: none; }
  .ift-consent__btn, .ift-consent__btn:hover, .ift-consent__close, .ift-consent__track, .ift-consent__track::after, .ift-consent__chev { transition: none; transform: none; }
  .ift-consent__input:checked + .ift-consent__track::after { transform: translateX(20px); }
  .ift-consent__details[open] .ift-consent__chev { transform: rotate(180deg); }
}
@media print { .ift-consent { display: none !important; } }
@media (forced-colors: active) {
  .ift-consent__box, .ift-consent__btn, .ift-consent__close, .ift-consent__track { border: 1px solid CanvasText; }
  .ift-consent__input:checked + .ift-consent__track::after { background: Highlight; }
}