/* ==========================================================================
   MARS · BANNER CONSENSO COOKIE
   Usa i colori e la tipografia del sito. Nessuna libreria.
   ========================================================================== */

.ck-veil{
  position:fixed;inset:0;z-index:400;
  background:rgba(3,8,18,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}

.ck{
  position:fixed;z-index:401;
  left:50%;bottom:clamp(12px,2.4vh,28px);transform:translateX(-50%);
  width:min(660px,calc(100vw - 24px));
  max-height:min(84vh,720px);overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(22px,3vw,30px);
  border-radius:22px;
  background:linear-gradient(180deg,#0C1B36,#07152F);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  color:#F2F7FB;
}
@media (prefers-reduced-motion:no-preference){
  .ck{animation:ckSu .38s cubic-bezier(.16,1,.3,1)}
  @keyframes ckSu{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
}

.ck-x{
  position:absolute;top:14px;right:14px;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;color:rgba(242,247,251,.7);
  border:1px solid rgba(255,255,255,.16);background:none;cursor:pointer;
  transition:color .25s ease,border-color .25s ease;
}
.ck-x:hover{color:#F2F7FB;border-color:rgba(255,255,255,.4)}
.ck-x svg{width:16px;height:16px}

.ck h2{
  margin:0 46px 0 0;
  font-size:clamp(19px,2vw,23px);font-weight:700;letter-spacing:-.02em;line-height:1.2;
}
.ck p{
  margin:10px 0 0;
  font-size:15px;line-height:1.62;color:rgba(242,247,251,.78);
}
.ck a{color:#E3FF00;text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------- categorie ---- */
.ck-pan{
  margin-top:20px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-direction:column;gap:16px;
}
.ck-cat__h{display:flex;align-items:center;justify-content:space-between;gap:14px}
.ck-cat__h b{font-size:15.5px;font-weight:600}
.ck-cat p{margin:5px 0 0;font-size:13.8px;line-height:1.55;color:rgba(242,247,251,.66)}
.ck-sempre{
  flex:0 0 auto;font-size:12px;font-weight:600;letter-spacing:.04em;
  color:rgba(242,247,251,.55);
}

/* interruttore */
.ck-sw{flex:0 0 auto;position:relative;display:inline-flex;cursor:pointer}
.ck-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ck-sw__t{
  width:46px;height:27px;border-radius:100px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
  transition:background-color .28s ease,border-color .28s ease;
}
.ck-sw__t::after{
  content:"";position:absolute;top:4px;left:4px;
  width:19px;height:19px;border-radius:50%;background:#F2F7FB;
  transition:transform .28s cubic-bezier(.16,1,.3,1);
}
.ck-sw input:checked + .ck-sw__t{background:#E3FF00;border-color:#E3FF00}
.ck-sw input:checked + .ck-sw__t::after{transform:translateX(19px);background:#07152F}
.ck-sw input:focus-visible + .ck-sw__t{outline:2px solid #E3FF00;outline-offset:3px}

/* ----------------------------------------------------------- pulsanti ---- */
/* Accetta e Rifiuta hanno lo stesso peso visivo: stessa dimensione,
   stesso contrasto. È un requisito del Garante, non una scelta estetica. */
.ck-btn{
  margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;
}
.ck-b{
  flex:1 1 auto;min-width:150px;min-height:48px;
  padding:13px 20px;border-radius:100px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  color:#F2F7FB;background:none;border:1px solid rgba(255,255,255,.3);
  cursor:pointer;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.ck-b:hover{border-color:#F2F7FB}
.ck-b--pieno{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34)}
.ck-b--pieno:hover{background:rgba(255,255,255,.18)}
.ck-b--salva{background:#E3FF00;color:#07152F;border-color:#E3FF00;flex-basis:100%}
.ck-b--salva:hover{background:#eeff5c;border-color:#eeff5c}
.ck-b:focus-visible{outline:2px solid #E3FF00;outline-offset:3px}

@media (max-width:560px){
  .ck{left:8px;right:8px;transform:none;width:auto;bottom:8px;border-radius:18px}
  @media (prefers-reduced-motion:no-preference){
    @keyframes ckSu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  }
  .ck-b{flex-basis:100%}
}

@media (prefers-reduced-motion:reduce){
  .ck{animation:none}
  .ck-sw__t,.ck-sw__t::after,.ck-b,.ck-x{transition:none}
}