/* consent-kit 1.2.1 — stile del banner.
 *
 * Neutro di proposito: i colori passano da variabili CSS, così ogni sito lo accorda al proprio
 * aspetto senza toccare il file. Su un sito copiato pixel per pixel un banner che stona si nota
 * più di uno che manca.
 *
 * Da personalizzare per sito:
 *   :root { --ck-primario: #29a9e0; --ck-primario-testo: #fff; }
 *
 * Misure in px e non in rem, di proposito: il rem si misura sul font del sito ospite, e ci sono
 * temi diffusi (tutta la famiglia Casper/Ghost) che impostano `html { font-size: 62.5% }` per
 * poter scrivere 1.5rem invece di 15px. Su quei siti ogni rem varrebbe 10px e il pannello
 * rimpicciolirebbe del 37,5% senza che nessuno l'abbia chiesto. Un banner deve avere la stessa
 * taglia ovunque: non e' contenuto del sito, e' un'interfaccia che ci si appoggia sopra.
 *
 * Le media query restano in `em` perche' li' l'unita' si misura sul font di default del browser,
 * non sul root del sito: sono gia' immuni, e in piu' seguono chi ha ingrandito i caratteri.
 */

:root {
  --ck-fondo: rgba(15, 23, 42, .55);
  --ck-superficie: #fff;
  --ck-testo: #1f2937;
  --ck-testo-tenue: #4b5563;
  --ck-bordo: #e5e7eb;
  --ck-primario: #2563eb;
  --ck-primario-testo: #fff;
  --ck-raggio: 10px;
}

.ck-fondo {
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* sopra i widget di terze parti, che stanno alti per conto loro */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: var(--ck-fondo);
}

@media (min-width: 40em) {
  .ck-pos-modale { align-items: center; }
}

/* Le varianti non modali non oscurano e non intercettano i click: `inset` viene liberato dove
   serve e il fondo diventa trasparente, così la pagina resta leggibile e utilizzabile. */
.ck-pos-basso,
.ck-pos-alto,
.ck-pos-angolo {
  background: none;
  pointer-events: none; /* il contenitore lascia passare i click… */
}

.ck-pos-basso .ck-box,
.ck-pos-alto .ck-box,
.ck-pos-angolo .ck-box {
  pointer-events: auto; /* …il pannello no, altrimenti non sarebbe cliccabile */
  box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
}

.ck-pos-basso { inset: auto 0 0 0; align-items: flex-end; }
.ck-pos-alto { inset: 0 0 auto 0; align-items: flex-start; }

.ck-pos-basso .ck-box,
.ck-pos-alto .ck-box { max-width: 832px; }

.ck-pos-angolo { inset: auto 0 0 auto; justify-content: flex-end; align-items: flex-end; }
.ck-pos-angolo .ck-box { max-width: 384px; }

/* Sotto i 40em l'angolo non ha senso: lo schermo è già stretto, il pannello diventa una barra. */
@media (max-width: 40em) {
  .ck-pos-angolo { inset: auto 0 0 0; justify-content: center; }
  .ck-pos-angolo .ck-box { max-width: none; }
}

.ck-box {
  width: 100%;
  max-width: 544px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 24px;
  border-radius: var(--ck-raggio);
  background: var(--ck-superficie);
  color: var(--ck-testo);
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

.ck-box h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
.ck-testo { margin: 0 0 12px; color: var(--ck-testo-tenue); }
.ck-link { display: inline-block; margin-bottom: 12px; color: var(--ck-primario); }

.ck-dettaglio { margin: 8px 0 16px; border-top: 1px solid var(--ck-bordo); }
.ck-categoria { display: flex; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--ck-bordo); }
.ck-categoria input { margin-top: 4px; width: 17px; height: 17px; flex: none; }
.ck-categoria label { display: block; cursor: pointer; }
.ck-categoria input:disabled + label { cursor: default; }
.ck-categoria label span { display: block; margin-top: 2px; color: var(--ck-testo-tenue); font-size: .9em; }
.ck-categoria label em { color: var(--ck-testo-tenue); font-size: .85em; font-style: normal; }

.ck-azioni { display: flex; flex-wrap: wrap; gap: 8px; }

.ck-btn {
  flex: 1 1 auto;
  min-width: 128px;
  min-height: 44px; /* bersaglio comodo sul telefono, dove il banner si legge accovacciati */
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: calc(var(--ck-raggio) - 4px);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Accetta e Rifiuta condividono lo stesso stile: se rifiutare costasse più fatica che accettare,
   il consenso non sarebbe libero, ed è il rilievo più frequente sui banner fatti in casa. */
.ck-btn-primario { background: var(--ck-primario); color: var(--ck-primario-testo); }
.ck-btn-primario:hover { filter: brightness(1.08); }
.ck-btn-terziario { background: transparent; color: var(--ck-testo); border-color: var(--ck-bordo); }
.ck-btn-terziario:hover { background: #f9fafb; }
.ck-btn:focus-visible { outline: 3px solid var(--ck-primario); outline-offset: 2px; }

/* Segnaposto al posto di un iframe bloccato: senza, resterebbe un buco muto nella pagina e
   nessuno saprebbe che lì c'era una mappa. */
.ck-segnaposto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 192px;
  padding: 24px;
  border: 1px dashed var(--ck-bordo);
  border-radius: var(--ck-raggio);
  background: #f9fafb;
  color: var(--ck-testo-tenue);
  text-align: center;
}

.ck-segnaposto p { margin: 0; }
.ck-segnaposto .ck-btn { flex: 0 0 auto; }

@media (prefers-color-scheme: dark) {
  :root {
    --ck-superficie: #111827;
    --ck-testo: #f3f4f6;
    --ck-testo-tenue: #9ca3af;
    --ck-bordo: #374151;
  }
  .ck-btn-terziario:hover { background: #1f2937; }
  .ck-segnaposto { background: #0b1220; }
}

@media (prefers-reduced-motion: no-preference) {
  .ck-box { animation: ck-entra .18s ease-out; }
  @keyframes ck-entra { from { transform: translateY(8px); opacity: 0; } }
}