/* ============================================================
   Banner e preferenze cookie (assets/js/consent.js).
   Stesse regole della landing, collaudate in produzione: le variabili
   della landing qui puntano ai colori di elifelab.it, e restano chiuse
   dentro .cmp-root per non toccare il resto del sito.
   File statico e non dentro Tailwind perché il markup lo genera lo
   script, che Tailwind non vede.
   ============================================================ */
.cmp-root{
  --o-400:var(--color-arancio-400,#EC7A4B);
  --o-500:var(--color-arancio-500,#E2551F);
  --o-600:var(--color-arancio-600,#C4430F);
  --n-900:var(--color-antracite-900,#23272F);
  --ink-2:var(--color-inchiostro-2,#525C6B);
  --ink-3:var(--color-inchiostro-3,#7C8695);
  --paper:var(--color-carta,#FFFFFF);
  --paper-2:var(--color-carta-2,#FAF8F6);
  --paper-3:var(--color-carta-3,#F3F1EE);
  --line:var(--color-linea,#E7E2DC);
  --line-2:var(--color-linea-2,#D8D2CA);
  --f-display:var(--font-titolo,Georgia,serif);
  --f-ui:var(--font-testo,system-ui,sans-serif);
  --pad:clamp(20px, 5vw, 40px);
  --r:16px;
  --r-pill:999px;
  --sh-1:0 1px 2px rgba(14,25,45,.06), 0 4px 14px rgba(14,25,45,.05);
  --sh-2:0 2px 6px rgba(14,25,45,.07), 0 18px 44px rgba(14,25,45,.09);
  --ease:cubic-bezier(.22,.61,.36,1);
  font-family:var(--f-ui);
}

.cmp{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  padding:0 var(--pad) max(var(--pad),env(safe-area-inset-bottom));
  display:flex;justify-content:center;pointer-events:none;
}
.cmp[hidden]{display:none}
.cmp__in{
  pointer-events:auto;position:relative;width:100%;max-width:640px;
  margin-bottom:16px;padding:26px 28px 22px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-2);
  animation:cmp-su .32s var(--ease) both;
}
@keyframes cmp-su{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.cmp__x{
  position:absolute;top:12px;right:12px;display:grid;place-items:center;
  width:34px;height:34px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--ink-3);cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.cmp__x:hover{background:var(--paper-3);color:var(--n-900)}

.cmp__t{
  font-family:var(--f-display);font-size:1.3rem;font-weight:600;
  color:var(--n-900);margin:0 40px 10px 0;line-height:1.25;
}
.cmp__t:focus-visible{outline:3px solid var(--o-400);outline-offset:4px}
.cmp__p{margin:0 0 10px;font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.cmp__links{margin:0 0 18px;font-size:.86rem;color:var(--ink-3)}
.cmp__links a{color:var(--o-600);font-weight:500}

/* Rifiuta e Accetta: stessa dimensione, stesso peso, stessa area
   cliccabile. Cambia solo il colore — come richiesto dalle linee
   guida del Garante sulla pari evidenza dei due comandi. */
.cmp__actions{display:flex;gap:12px}
.cmp__btn{
  flex:1 1 0;min-height:48px;padding:12px 18px;
  font-family:var(--f-ui);font-size:.95rem;font-weight:600;line-height:1.2;
  border-radius:var(--r-pill);border:2px solid transparent;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.cmp__btn--yes{background:var(--o-500);color:#fff}
.cmp__btn--yes:hover{background:var(--o-600)}
.cmp__btn--no{background:transparent;color:var(--n-900);border-color:var(--line-2)}
.cmp__btn--no:hover{border-color:var(--n-900);background:var(--paper-2)}

.cmp__pref{
  display:block;width:100%;margin-top:14px;padding:6px 0;
  background:none;border:0;cursor:pointer;
  font-family:var(--f-ui);font-size:.86rem;font-weight:500;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px;
}
.cmp__pref:hover{color:var(--o-600)}

/* — Pannello preferenze (secondo livello) ————————————— */
.cmp-modal{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:var(--pad)}
.cmp-modal[hidden]{display:none}
.cmp-modal__scrim{position:absolute;inset:0;background:rgba(10,26,49,.55);backdrop-filter:blur(2px)}
.cmp-modal__box{
  position:relative;width:100%;max-width:620px;max-height:86vh;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);border-radius:var(--r);box-shadow:var(--sh-2);
  animation:cmp-su .28s var(--ease) both;
}
.cmp-modal__box:focus{outline:none}
.cmp-modal__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 26px 14px;border-bottom:1px solid var(--line);
}
.cmp-modal__t{font-family:var(--f-display);font-size:1.25rem;font-weight:600;color:var(--n-900);margin:0}
.cmp__x--modal{position:static;flex:none}
.cmp-modal__body{padding:20px 26px;overflow-y:auto}
.cmp-modal__p{margin:0 0 20px;font-size:.9rem;line-height:1.6;color:var(--ink-2)}

.cmp-cat{padding:16px 0;border-top:1px solid var(--line)}
.cmp-cat:first-of-type{border-top:0;padding-top:0}
.cmp-cat__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}
.cmp-cat__t{font-size:1rem;font-weight:600;color:var(--n-900);margin:0}
.cmp-cat__p{margin:0;font-size:.87rem;line-height:1.6;color:var(--ink-2)}
.cmp-cat__fisso{
  flex:none;font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);background:var(--paper-3);padding:5px 11px;border-radius:var(--r-pill);
}

.cmp-sw{flex:none;display:inline-flex;align-items:center;gap:9px;cursor:pointer}
/* Occultamento visivo che NON toglie l'elemento dal flusso di
   accessibilità: 1px ritagliato, non 0x0 — così resta raggiungibile
   da tastiera e annunciato dagli screen reader. */
.cmp-sw input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cmp-sw__track{
  position:relative;width:46px;height:26px;border-radius:var(--r-pill);
  background:var(--line-2);transition:background .2s var(--ease);
}
.cmp-sw__track::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:var(--sh-1);transition:transform .2s var(--ease);
}
.cmp-sw input:checked + .cmp-sw__track{background:var(--o-500)}
.cmp-sw input:checked + .cmp-sw__track::after{transform:translateX(20px)}
.cmp-sw input:focus-visible + .cmp-sw__track{outline:3px solid var(--o-400);outline-offset:3px}
.cmp-sw__lab{font-size:.78rem;font-weight:600;color:var(--ink-3)}
.cmp-sw input:checked ~ .cmp-sw__lab{color:var(--o-600)}

.cmp-modal__foot{
  display:flex;flex-wrap:wrap;gap:10px;padding:18px 26px;
  border-top:1px solid var(--line);background:var(--paper-2);
}
.cmp-modal__foot .cmp__btn{flex:1 1 150px}

body.has-cmp-modal{overflow:hidden}

@media (max-width:560px){
  .cmp__in{padding:22px 20px 18px}
  .cmp__t{font-size:1.15rem}
  .cmp__actions{flex-direction:column}
  .cmp-modal{padding:0}
  .cmp-modal__box{max-width:none;max-height:92vh;border-radius:var(--r) var(--r) 0 0;align-self:end}
  .cmp-modal__head,.cmp-modal__body,.cmp-modal__foot{padding-left:20px;padding-right:20px}
  .cmp-modal__foot .cmp__btn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  .cmp__in,.cmp-modal__box{animation:none}
}