/* ==========================================================================
   SCELTE SUI COOKIE — aspetto del pannello

   Non e' una barra grigia in fondo allo schermo. Il sito ha una sua lingua
   grafica - fondo scuro, filo d'oro, Tenor Sans in maiuscoletto - e questo
   pannello la parla, altrimenti sembra incollato da un altro sito.

   Autonomo per scelta: le variabili del sito hanno tutte un valore di scorta,
   cosi' il pannello rende uguale sulla home e sulle pagine interne, che
   caricano fogli di stile diversi.
   ========================================================================== */

.ck {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 2rem;
  pointer-events: none;
}

.ck-velo {
  position: absolute;
  inset: 0;
  background: rgba(4, 1, 2, 0.55);
  backdrop-filter: blur(2px);
  pointer-events: auto;
  animation: ck-entra-velo 0.5s ease both;
}

.ck-quadro {
  position: relative;
  pointer-events: auto;
  width: 100%;
  max-width: 54rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  padding: 3rem 2.8rem 2.6rem;
  background: #0a0204;
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 -1rem 6rem rgba(0, 0, 0, 0.7);
  text-transform: none;
  animation: ck-entra 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ck-entra-velo { from { opacity: 0; } to { opacity: 1; } }
@keyframes ck-entra {
  from { opacity: 0; transform: translateY(2.4rem); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-velo, .ck-quadro { animation: none; }
}

.ck-titolo {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #D4AF37;
  margin: 0 0 1.6rem;
}

.ck-testo {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 1.45rem;
  line-height: 1.7;
  color: rgba(244, 242, 238, 0.78);
  margin: 0 0 2.4rem;
}

/* ------------------------------------------------------------- le categorie */

.ck-voci {
  list-style: none;
  margin: 0 0 2.6rem;
  padding: 0;
  border-top: 1px solid rgba(212, 175, 55, 0.14);
}

.ck-voce {
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(212, 175, 55, 0.14);
}

.ck-voce-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}

.ck-voce-nome {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 1.5rem;
  color: #f0f0f0;
}

label.ck-voce-nome { cursor: pointer; }

.ck-voce-stato {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.4);
}

.ck-voce-nota {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 1.25rem;
  line-height: 1.6;
  color: rgba(244, 242, 238, 0.5);
  margin: 0.8rem 0 0;
  max-width: 40rem;
}

/* L'interruttore: la casella vera resta li' sotto, invisibile ma cliccabile e
   raggiungibile da tastiera. Disegnarne una finta e nasconderne una vera con
   display:none la toglierebbe anche a chi naviga senza vedere. */
.ck-interruttore {
  position: relative;
  flex: 0 0 auto;
  width: 4.6rem;
  height: 2.4rem;
}

.ck-interruttore input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.ck-cursore {
  position: absolute;
  inset: 0;
  border-radius: 2.4rem;
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: rgba(255, 255, 255, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.ck-cursore::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(244, 242, 238, 0.55);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}

.ck-interruttore input:checked ~ .ck-cursore {
  background: rgba(212, 175, 55, 0.28);
  border-color: #D4AF37;
}

.ck-interruttore input:checked ~ .ck-cursore::after {
  transform: translateX(2.2rem);
  background: #F5E096;
}

.ck-interruttore input:focus-visible ~ .ck-cursore {
  outline: 2px solid #F5E096;
  outline-offset: 3px;
}

/* --------------------------------------------------------------- i bottoni */

.ck-bottoni {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ck-bottone {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1.4rem 2rem;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: none;
  color: rgba(244, 242, 238, 0.85);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.ck-bottone:hover,
.ck-bottone:focus-visible {
  border-color: #D4AF37;
  color: #F5E096;
}

.ck-bottone--pieno {
  background: #D4AF37;
  border-color: #D4AF37;
  color: #0a0204;
}

.ck-bottone--pieno:hover,
.ck-bottone--pieno:focus-visible {
  background: #F5E096;
  border-color: #F5E096;
  color: #0a0204;
}

/* "Salva le mie scelte" e' la terza via, non l'invito principale: resta
   leggibile ma non compete con le due risposte nette. */
.ck-bottone--tenue {
  border-color: transparent;
  color: rgba(244, 242, 238, 0.5);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.ck-legale {
  margin: 2rem 0 0;
  font-family: 'Tenor Sans', sans-serif;
  font-size: 1.2rem;
  color: rgba(244, 242, 238, 0.35);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.ck-legale a {
  color: rgba(244, 242, 238, 0.6);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  padding-bottom: 0.2rem;
}

.ck-legale a:hover,
.ck-legale a:focus-visible { color: #F5E096; border-color: #D4AF37; }

@media (min-width: 700px) {
  .ck { align-items: center; padding: 3rem; }

  .ck-quadro { padding: 4rem 4rem 3.2rem; }

  .ck-bottoni {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .ck-bottone { flex: 1 1 auto; }
  .ck-bottone--tenue { flex: 0 0 100%; text-align: left; padding-left: 0; }
}