/* Banner cookie + pannello preferenze. Forma da pasqua.it (SOTM 2023): barra a tutta larghezza in
 * basso, testo a sinistra, due bottoni uguali impilati a destra e "Personalizza" sotto; preferenze in
 * un pannello laterale da sinistra con un interruttore per categoria e due bottoni uguali in fondo.
 * Curva della reference: 750ms cubic-bezier(.215,.61,.355,1). Varianti "angolo" e "centro" (bavet.eu).
 * Colori invertiti rispetto alla pagina (fondo = inchiostro del template), sempre dai token. */
.zs-ck,.zs-ckp{
  --zs-bg:var(--bg,var(--z-bg,var(--b-bg)));--zs-ink:var(--ink,var(--z-ink,var(--b-primary)));--zs-muted:var(--muted,var(--z-muted,color-mix(in srgb,var(--b-bg) 40%,var(--b-text))));
  --zs-display:var(--font-display,var(--z-font-display,Georgia,serif));--zs-body:var(--font-body,var(--z-font-body,system-ui,sans-serif));
  --zs-r:var(--r-md,var(--z-radius,0));--zs-pill:var(--r-pill,999px);
  --zs-ck-ease:cubic-bezier(.215,.61,.355,1);--zs-ck-dur:.75s;
  font-family: var(--b-font-body)}
/* i template stilano h2/p/section a livello di tag: qui si azzera ciò che cambierebbe la forma */
.zs-ck h2,.zs-ckp h2{border:0;padding: 0;text-transform:none;letter-spacing:normal;font-variant-caps:normal;color:inherit;text-shadow: none;background:none}
.zs-ck p,.zs-ckp p{text-transform:none;letter-spacing:normal}
.zs-ck *,.zs-ckp *,.zs-ck *::before,.zs-ckp *::before,.zs-ck *::after,.zs-ckp *::after{box-sizing:border-box}
.zs-ck{position:fixed;z-index:2147483000;left:0;right:0;bottom:0;background:var(--zs-ink);color:var(--zs-bg);
  transform:translateY(105%);visibility:hidden;transition:transform var(--zs-ck-dur) var(--zs-ck-ease),visibility 0s linear var(--zs-ck-dur);box-shadow: 0 -1px 0 color-mix(in srgb,var(--zs-bg) 14%,transparent)}
.zs-ck[data-open]{transform:none;visibility:visible;transition:transform var(--zs-ck-dur) var(--zs-ck-ease),visibility 0s}
.zs-ck-in{max-width:var(--wrap,var(--z-max,1200px));margin: 0 auto;padding: clamp(1.3rem,2.6vw,2.2rem) clamp(1.1rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,18rem);gap: clamp(1.2rem,3vw,2.8rem);align-items:center}
.zs-ck h2{font-family: var(--b-font-display);font-weight:400;font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.15;margin: 0 0 .5rem;color:inherit}
.zs-ck p{margin: 0;font-size:.9rem;line-height:1.5;color:color-mix(in srgb,var(--zs-bg) 82%,var(--zs-ink));max-width:46em}
.zs-ck a{color:inherit;text-underline-offset:3px}
.zs-ck-btns{display:grid;gap: .6rem}
/* Accetta e Rifiuta: stesso peso visivo (Garante privacy, linee guida 10/06/2021) */
.zs-ck-b{min-height:48px;padding: .75em 1.2em;border:1px solid var(--zs-bg);border-radius:var(--zs-r);background:var(--zs-bg);color:var(--zs-ink);font:var(--b-font-body);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background-color .25s var(--zs-ck-ease),color .25s var(--zs-ck-ease)}
.zs-ck-b:hover{background:transparent;color:var(--zs-bg)}
.zs-ck-link{justify-self:center;min-height:44px;padding: .4em .6em;border:0;background:none;color:inherit;font:var(--b-font-body);font-size:.85rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.zs-ck :focus-visible,.zs-ckp :focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* variante angolo: scheda in basso a sinistra */
.zs-ck[data-pos=angolo]{left:clamp(.6rem,2vw,1.5rem);right:auto;bottom:clamp(.6rem,2vw,1.5rem);width:min(26rem,calc(100vw - 1.2rem));border-radius:var(--zs-r)}
.zs-ck[data-pos=angolo] .zs-ck-in{grid-template-columns:1fr;padding: 1.5rem}
/* variante centro: scheda al centro su velo (forma bavet.eu: 28rem, fade .5s cubic-bezier(.4,0,.2,1)) */
.zs-ck[data-pos=centro]{top:0;background:color-mix(in srgb,var(--zs-ink) 50%,transparent);transform:none;opacity:0;transition:opacity .5s cubic-bezier(.4,0,.2,1),visibility 0s linear .5s;box-shadow: none;display:grid;place-items:center}
.zs-ck[data-pos=centro][data-open]{opacity:1;transition:opacity .5s cubic-bezier(.4,0,.2,1),visibility 0s}
.zs-ck[data-pos=centro] .zs-ck-in{background:var(--zs-ink);width:min(28rem,calc(100vw - 1rem));grid-template-columns:1fr;padding: 1.5rem;border-radius:var(--zs-r)}

/* pannello preferenze */
.zs-ckp{position:fixed;inset:0;z-index:2147483001;visibility:hidden;transition:visibility 0s linear var(--zs-ck-dur)}
.zs-ckp[data-open]{visibility:visible;transition:visibility 0s}
.zs-ckp-veil{position:absolute;inset:0;background:color-mix(in srgb,var(--zs-ink) 55%,transparent);opacity:0;transition:opacity var(--zs-ck-dur) var(--zs-ck-ease)}
.zs-ckp[data-open] .zs-ckp-veil{opacity:1}
.zs-ckp-panel{position:absolute;top:0;bottom:0;left:0;width:min(56rem,63vw);background:var(--zs-ink);color:var(--zs-bg);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform var(--zs-ck-dur) var(--zs-ck-ease);outline:none}
.zs-ckp[data-open] .zs-ckp-panel{transform:none}
.zs-ckp-head{display:flex;justify-content:space-between;align-items:flex-start;gap: 1rem;padding: clamp(1.4rem,3vw,2.6rem) clamp(1.2rem,3vw,2.6rem) .4rem}
.zs-ckp h2{font-family: var(--b-font-display);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.1;margin: 0}
.zs-ckp-x{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--zs-bg) 40%,transparent);border-radius:50%;background:none;color:inherit;cursor:pointer;font-size:1.1rem;line-height:1}
.zs-ckp-body{flex:1;overflow:auto;padding: 0 clamp(1.2rem,3vw,2.6rem) 1.4rem}
.zs-ckp-body>p{margin: .6rem 0 1.4rem;font-size:.92rem;line-height:1.55;color:color-mix(in srgb,var(--zs-bg) 82%,var(--zs-ink));max-width:44em}
.zs-ckp-body>p a{color:inherit;text-underline-offset:3px}
.zs-ckp-cat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap: .3rem 1.4rem;align-items:center;padding: 1.1rem 0;border-top:1px solid color-mix(in srgb,var(--zs-bg) 18%,transparent)}
.zs-ckp-cat:last-child{border-bottom:1px solid color-mix(in srgb,var(--zs-bg) 18%,transparent)}
.zs-ckp-cat label{font-weight:600;font-size:.98rem;cursor:pointer}
.zs-ckp-cat p{grid-column:1;margin: 0;font-size:.85rem;line-height:1.45;color:color-mix(in srgb,var(--zs-bg) 72%,var(--zs-ink))}
.zs-ckp-cat .zs-sw{grid-column:2;grid-row:1/span 2}
.zs-ckp-cat .zs-lock{grid-column:2;grid-row:1/span 2;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
/* interruttore: checkbox nativo con role=switch, area di tocco 44px */
.zs-sw{appearance:none;-webkit-appearance:none;position:relative;width:52px;height:30px;margin: calc(7px*var(--b-space)) 0;border-radius: var(--b-r-pill);border:1px solid color-mix(in srgb,var(--zs-bg) 55%,transparent);background:transparent;cursor:pointer;transition:background-color .3s var(--zs-ck-ease)}
.zs-sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--zs-bg);transition:transform .3s var(--zs-ck-ease)}
.zs-sw:checked{background:color-mix(in srgb,var(--zs-bg) 30%,transparent)}
.zs-sw:checked::after{transform:translateX(22px)}
.zs-ckp-foot{display:grid;grid-template-columns:1fr 1fr 1fr;gap: .6rem;padding: 1rem clamp(1.2rem,3vw,2.6rem) clamp(1.2rem,2.4vw,1.8rem)}
.zs-ckp-foot .zs-ck-b{border-color:var(--zs-bg)}
.zs-cookie-reopen{margin: 0;padding: 1rem clamp(1.1rem,4vw,3rem);text-align:center;background:var(--bg,var(--z-bg,var(--b-bg)));color:var(--ink,var(--z-ink,var(--b-text)));font-family: var(--b-font-body)}
.zs-cookie-reopen button{min-height:44px;padding: .4em .8em;border:0;background:none;color:inherit;font:var(--b-font-body);font-size:.82rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;opacity:.8}
.zs-cookie-reopen button:hover{opacity:1}
@media(max-width:760px){
  .zs-ck-in{grid-template-columns:1fr}
  /* barra: bottoni impilati a tutta larghezza (forma pasqua a 390); angolo e centro restano affiancati */
  .zs-ck:not([data-pos=barra]) .zs-ck-btns{grid-template-columns:1fr 1fr}
  .zs-ck-link{grid-column:1/-1}
  /* centro: su mobile la scheda scende in basso, il pollice ci arriva (forma bavet a 390) */
  .zs-ck[data-pos=centro]{place-items:end center;padding-bottom: max(.5rem,env(safe-area-inset-bottom))}
  .zs-ckp-panel{width:100%}
  .zs-ckp-foot{grid-template-columns:1fr 1fr}
  .zs-ckp-foot .zs-ck-save{grid-column:1/-1;order:-1}
}
@media(prefers-reduced-motion:reduce){
  .zs-ck,.zs-ckp,.zs-ckp-panel,.zs-ckp-veil,.zs-sw,.zs-sw::after{transition-duration:.01ms !important;transition-delay:0s !important}
}