/* =========================================================================
   Presenza · Banner cookie / consensi — stili condivisi (IT + EN)
   Usato da: index.html, index-en.html, privacy.html, privacy-en.html,
             cookie.html, cookie-en.html
   ========================================================================= */

.cc-root{
  --cc-bg:#ffffff;
  --cc-soft:#f6f7f6;
  --cc-ink:#1c211f;
  --cc-ink-soft:#525a56;
  --cc-muted:#8b938e;
  --cc-sage:#4f857a;
  --cc-sage-deep:#3a6a60;
  --cc-sage-tint:#eaf2ef;
  --cc-line:#e7eae8;
  --cc-sans:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  position:fixed;
  inset:0;
  z-index:2147483000;
  font-family:var(--cc-sans);
  font-size:16px;
  line-height:1.65;
  pointer-events:none;
}
.cc-root[hidden]{display:none}

/* ---------- sfondo (solo per il pannello preferenze) ---------- */
.cc-backdrop{
  position:absolute; inset:0;
  background:rgba(16,24,21,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}
.cc-root.is-panel .cc-backdrop{opacity:1; pointer-events:auto}

/* ---------- contenitore del dialogo ---------- */
.cc-dialog{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(calc(100% - 32px), 760px);
  margin-bottom:16px;
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--cc-bg);
  color:var(--cc-ink);
  border:1px solid var(--cc-line);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(23,45,40,.22);
  padding:26px 28px 24px;
  pointer-events:auto;
  animation:cc-rise .34s cubic-bezier(.22,.7,.24,1) both;
}
.cc-root.is-panel .cc-dialog{
  bottom:auto;
  top:50%;
  transform:translate(-50%,-50%);
  margin-bottom:0;
  width:min(calc(100% - 32px), 640px);
  animation:cc-fade .24s ease both;
}
/* L'entrata anima la proprietà `translate`, non `transform`: così non può
   mai sovrascrivere la traslazione di centratura e il riquadro non finisce
   fuori dal viewport. */
@keyframes cc-rise{from{opacity:0; translate:0 18px} to{opacity:1; translate:0 0}}
@keyframes cc-fade{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .cc-dialog,.cc-root.is-panel .cc-dialog{animation:none}
  .cc-backdrop{transition:none}
}

/* ---------- testata ---------- */
.cc-title{
  font-family:var(--cc-sans);
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.3;
  margin:0 44px 8px 0;
  color:var(--cc-ink);
}
.cc-text{
  margin:0;
  font-size:14.5px;
  line-height:1.62;
  color:var(--cc-ink-soft);
}
.cc-text + .cc-text{margin-top:10px}
.cc-text a{color:var(--cc-sage-deep); text-decoration:underline; text-underline-offset:2px}
.cc-text a:hover{color:var(--cc-sage)}

/* ---------- pulsante di chiusura (= rifiuta tutti) ---------- */
.cc-close{
  position:absolute;
  top:16px; right:16px;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:var(--cc-bg);
  border:1px solid var(--cc-line);
  border-radius:999px;
  color:var(--cc-ink-soft);
  cursor:pointer;
  padding:0;
  transition:background .2s ease, color .2s ease;
}
.cc-close:hover{background:var(--cc-soft); color:var(--cc-ink)}
.cc-close svg{width:15px; height:15px; display:block}

/* ---------- comandi: stessa geometria per tutti e tre ---------- */
.cc-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}
.cc-btn{
  flex:1 1 0;
  min-width:150px;
  font-family:var(--cc-sans);
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  padding:13px 18px;
  border-radius:999px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.cc-btn:hover{transform:translateY(-1px)}
.cc-btn-accept{background:var(--cc-sage); border-color:var(--cc-sage); color:#fff}
.cc-btn-accept:hover{background:var(--cc-sage-deep); border-color:var(--cc-sage-deep)}
.cc-btn-reject,
.cc-btn-custom{background:var(--cc-bg); border-color:var(--cc-ink); color:var(--cc-ink)}
.cc-btn-reject:hover,
.cc-btn-custom:hover{background:var(--cc-soft)}

.cc-root :focus-visible{outline:2px solid var(--cc-sage); outline-offset:3px; border-radius:4px}

/* ---------- pannello preferenze ---------- */
.cc-cats{margin:20px 0 0; padding:0; list-style:none}
.cc-cat{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:16px 0;
  border-top:1px solid var(--cc-line);
}
.cc-cat:first-child{border-top:none; padding-top:6px}
.cc-cat-main{flex:1 1 auto; min-width:0}
.cc-cat h3{
  font-family:var(--cc-sans);
  font-size:15px;
  font-weight:700;
  letter-spacing:0;
  line-height:1.35;
  margin:0 0 4px;
  color:var(--cc-ink);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.cc-always{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--cc-sage-deep);
  background:var(--cc-sage-tint);
  border-radius:999px;
  padding:3px 9px;
  line-height:1.3;
}
.cc-cat p{margin:0; font-size:13.5px; line-height:1.55; color:var(--cc-ink-soft)}

/* ---------- interruttori ---------- */
.cc-switch{position:relative; flex:none; width:46px; height:26px; margin-top:3px}
.cc-switch input{
  position:absolute; inset:0;
  width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer;
}
.cc-track{
  position:absolute; inset:0;
  background:#d3d9d6;
  border-radius:999px;
  pointer-events:none;
  transition:background .22s ease;
}
.cc-track::after{
  content:"";
  position:absolute; top:3px; left:3px;
  width:20px; height:20px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 1px 3px rgba(16,24,21,.28);
  transition:transform .22s ease;
}
.cc-switch input:checked + .cc-track{background:var(--cc-sage)}
.cc-switch input:checked + .cc-track::after{transform:translateX(20px)}
.cc-switch input:disabled{cursor:default}
.cc-switch input:disabled + .cc-track{background:var(--cc-sage); opacity:.42}
.cc-switch input:focus-visible + .cc-track{outline:2px solid var(--cc-sage); outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  .cc-track,.cc-track::after,.cc-btn{transition:none}
  .cc-btn:hover{transform:none}
}

/* ---------- riga link informative ---------- */
.cc-links{
  margin-top:18px;
  font-size:13px;
  color:var(--cc-muted);
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
}
.cc-links a{color:var(--cc-sage-deep); text-decoration:underline; text-underline-offset:2px}
.cc-links a:hover{color:var(--cc-sage)}

/* ---------- link "Gestisci cookie" (footer, si adatta al contesto) ---------- */
.cc-link{
  font:inherit;
  color:inherit;
  background:none;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
  text-align:left;
  text-decoration:none;
}
.cc-link:hover{text-decoration:underline; text-underline-offset:3px}

/* =========================================================================
   MOBILE — schermi stretti.
   Il banner diventa un bottom sheet compatto ancorato in basso, con scroll
   interno: i contenuti restano identici, cambia solo la densità visiva.
   Tutto quanto segue è confinato in questa media query — sopra i 600px la
   resa desktop definita più in alto resta invariata.
   ========================================================================= */
@media (max-width:600px){

  /* --- bottom sheet a tutta larghezza, con scroll interno --- */
  .cc-dialog,
  .cc-root.is-panel .cc-dialog{
    left:0;
    right:0;
    top:auto;
    bottom:0;
    width:auto;
    transform:none;
    margin:0;
    max-height:85vh;
    max-height:85dvh;          /* più fedele su mobile, dove la barra URL varia */
    overflow-y:auto;
    border-radius:18px 18px 0 0;
    border-left:none;
    border-right:none;
    border-bottom:none;
    padding:18px 18px 16px;
  }

  /* --- testata --- */
  .cc-title{
    font-size:16px;
    line-height:1.28;
    margin:0 40px 6px 0;
  }
  .cc-close{
    top:12px; right:12px;
    width:32px; height:32px;
  }

  /* --- testo descrittivo: stesso contenuto, resa più compatta --- */
  .cc-text{
    font-size:13.5px;
    line-height:1.45;
  }
  .cc-text + .cc-text{margin-top:7px}

  /* --- comandi: in colonna, più bassi ma sopra la soglia di tappabilità.
         Geometria identica per tutti e tre: Accetta e Rifiuta restano di
         pari peso visivo (Linee guida Garante). --- */
  .cc-actions{
    flex-direction:column;
    gap:8px;
    margin-top:14px;
  }
  .cc-btn{
    flex:none;
    width:100%;
    min-width:0;
    min-height:44px;
    padding:10px 16px;
    font-size:14.5px;
  }

  /* --- pannello preferenze --- */
  .cc-cats{margin-top:14px}
  .cc-cat{gap:12px; padding:13px 0}
  .cc-cat h3{font-size:14.5px; margin-bottom:3px}
  .cc-cat p{font-size:12.5px; line-height:1.45}

  /* --- link informative: restano visibili in fondo --- */
  .cc-links{
    margin-top:14px;
    font-size:12.5px;
    gap:4px 14px;
  }
}