/*
 * Banner cookie: completamento del banner esistente (stesso aspetto: riquadro scuro, oro, caratteri) per le linee guida
 * del Garante (10 giugno 2021, par. 7.1):
 *  - la X in alto a destra (equivale a "Rifiuta") con evidenza grafica pari a quella dei pulsanti;
 *  - "Accetta" e "Rifiuta" con uguali dimensioni, enfasi e colori;
 *  - il pannello "Preferenze" con l'interruttore delle statistiche (spento di default).
 * Le regole di base del banner (.cookie, .ck-*) restano quelle delle pagine.
 */

/* Pulsanti: "Rifiuta" prende lo stesso aspetto oro di "Accetta" (stessa misura, stesso colore, stessa enfasi) */
.cookie .ck-b .btn.line,.cookie .ck-b .btn.gold{background:linear-gradient(115deg,#B08A45,#E6CD95 44%,#C9A764 62%,#A37E3D);color:#17130D;box-shadow:none}
.cookie .ck-b .btn.line:hover,.cookie .ck-b .btn.gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(198,163,94,.8)}

/* Accetta e Rifiuta (o Salva e Rifiuta tutto) hanno sempre la stessa larghezza, qualunque sia la lingua */
.ck-bt{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.6rem}

/* Riquadro: se lo schermo e' basso o il testo e' ingrandito scorre al suo interno e non esce mai dallo schermo (la X resta raggiungibile) */
.cookie{max-height:calc(100vh - 2.5rem - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 2.5rem - env(safe-area-inset-bottom,0px));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(227,201,143,.5) transparent}
.cookie::before{inset:0 0 auto}

/* X: in alto a destra, DENTRO il riquadro (stessa posizione e misura del vecchio simbolo); stesso oro dei pulsanti.
   Il simbolo decorativo del banner originale resta, spostato subito a sinistra della X (su telefono e' tolto per lasciare spazio) */
.cookie::after{right:4.45rem}
.ck-x{position:absolute;top:1.125rem;right:1.125rem;z-index:2;display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:50%;background:linear-gradient(115deg,#B08A45,#E6CD95 44%,#C9A764 62%,#A37E3D);color:#17130D;font-size:1.9rem;font-weight:600;line-height:1;cursor:pointer;box-shadow:0 10px 22px -8px #000;transition:transform .3s var(--ease),box-shadow .3s}
.ck-x:hover{transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(198,163,94,.8)}
.ck-x:focus-visible,.cookie .btn:focus-visible,.ck-l:focus-visible,.cookie a:focus-visible{outline:2px solid #E3C98F;outline-offset:3px}
.ck-x .it{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Collegamento all'informativa dentro il testo */
.cookie .ck-p a{color:#E3C98F;text-decoration:underline;text-decoration-color:rgba(227,201,143,.5);text-underline-offset:.25em;white-space:nowrap}
.cookie .ck-p a:hover{text-decoration-color:#E3C98F}

/* Pannello Preferenze: sostituisce testo e pulsanti principali dentro lo stesso riquadro */
.cookie #ckPanel{display:none;gap:.2rem}
.cookie.pref #ckPanel{display:grid}
.cookie.pref>.ck-t,.cookie.pref>.ck-p,.cookie.pref>.ck-b{display:none}
.ck-scroll{display:grid;gap:0;padding-right:.2rem}
.ck-opt{display:grid;gap:.4rem;padding:.85rem 0;border-top:1px solid rgba(227,201,143,.16)}
.ck-opt:first-child{border-top:0;padding-top:.2rem}
.ck-opt-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:1rem;font-weight:600;color:#F2EEE7;cursor:default}
.ck-opt-h[for]{cursor:pointer}
.ck-opt p{margin:0;font-size:.86rem;line-height:1.55;color:rgba(242,238,231,.74)}
.ck-tag{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#C6A35E;text-align:right}

/* Interruttore: e' una vera casella (si usa anche da tastiera), spenta di default */
.ck-sw{position:relative;flex:none;display:inline-block;width:3rem;height:1.7rem}
.ck-sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ck-sw i{position:absolute;inset:0;border-radius:999px;background:rgba(242,238,231,.14);box-shadow:inset 0 0 0 1.5px rgba(242,238,231,.65);transition:background .3s,box-shadow .3s;pointer-events:none}
.ck-sw i::after{content:"";position:absolute;left:.25rem;top:.25rem;width:1.2rem;height:1.2rem;border-radius:50%;background:#F2EEE7;transition:transform .3s var(--ease),background-color .3s}
.ck-sw input:checked+i{background:linear-gradient(115deg,#B08A45,#E6CD95 44%,#C9A764 62%,#A37E3D);box-shadow:none}
.ck-sw input:checked+i::after{transform:translateX(1.3rem);background:#17130D}
.ck-sw input:focus-visible+i{outline:2px solid #E3C98F;outline-offset:3px}

@media (max-width:520px){
  .cookie .ck-b{flex-wrap:wrap}
}

/* Telefono: riquadro un po' piu' piccolo (testi, spazi e pulsanti ridotti di circa il 10-15%), stesso aspetto */
@media (max-width:600px){
  .cookie{padding:1.15rem 1.05rem .95rem;gap:.55rem;font-size:.86rem}
  .cookie::after{display:none}
  .cookie .ck-t{font-size:1.4rem;padding-right:2.6rem}
  .cookie .ck-p{line-height:1.5}
  .cookie .ck-lg{padding-bottom:.55rem}
  .cookie .ck-lg button{min-width:2rem;min-height:2rem;padding:0 .15rem;font-size:.72rem;letter-spacing:.1em}
  .cookie .ck-b{gap:.5rem;margin-top:.15rem}
  .ck-bt{gap:.5rem}
  .cookie .btn.sm{min-height:2.75rem;padding:.4rem 1rem;font-size:.9rem}
  .cookie .ck-l{min-height:2.5rem;font-size:.8rem}
  .ck-x{top:.5rem;right:.5rem;font-size:1.8rem}
  .ck-opt{gap:.3rem;padding:.7rem 0}
  .ck-opt-h{font-size:.92rem}
  .ck-opt p{font-size:.78rem;line-height:1.5}
  .ck-tag{font-size:.62rem}
  .ck-sw{width:2.6rem;height:1.5rem}
  .ck-sw i::after{left:.22rem;top:.22rem;width:1.06rem;height:1.06rem}
  .ck-sw input:checked+i::after{transform:translateX(1.1rem)}
}
html.rm .ck-sw i,html.rm .ck-sw i::after,html.quiet .ck-sw i,html.quiet .ck-sw i::after{transition:none}

/* La X non deve mai toccare la riga delle lingue: con testo ingrandito (A+) e sugli schermi stretti la riga lascia libero lo spazio della X (e va a capo se serve) */
html.ts1 .cookie .ck-lg,html.ts2 .cookie .ck-lg{padding-right:3.8rem}
@media (max-width:380px){.cookie .ck-lg{padding-right:3.6rem}}

/* Pagina dell'informativa: nota (solo per chi non legge l'italiano) che avverte che il testo e' in italiano */
.legal-in .legal-lang{margin:0 0 1.6em;padding-bottom:1em;border-bottom:1px solid rgba(138,106,44,.35);font-size:.9375rem;color:#5E5850}
.legal-in .legal-lang+h2{margin-top:0}
html:lang(it) .legal-in .legal-lang{display:none}
