/* Gravity — il pannello del consenso.

   Oggi non si vede, perché non c'è niente da chiedere: lo stile sta qui pronto per il
   giorno in cui si accende una categoria in scripts/consenso.js.

   Sta in basso a sinistra e non copre la pagina. Una striscia nera su tutto lo schermo,
   o peggio una finestra che oscura il sito finché non rispondi, è il modo in cui si
   ottiene un sì per sfinimento: il Garante lo chiama consenso non libero, e a guardarlo
   è anche brutto. Qui si legge la pagina anche mentre il pannello è aperto.

   Gli angoli restano vivi e i due tasti principali hanno lo stesso peso: accettare e
   rifiutare devono costare uguale, e non solo nelle intenzioni. */

.gv-consenso {
  position: fixed;
  z-index: 60;
  right: var(--gv-pad);
  bottom: var(--gv-pad);
  left: var(--gv-pad);
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}

.gv-consenso__scatola {
  width: min(420px, 100%);
  max-height: calc(100dvh - var(--gv-pad) * 2);
  overflow-y: auto;
  padding: var(--gv-space-5);
  border: 1px solid var(--gv-line-strong);
  background: color-mix(in srgb, var(--gv-surface-raised) 88%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .gv-consenso__scatola {
    animation: gv-consenso-entra 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes gv-consenso-entra {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.gv-consenso__titolo {
  margin: 0;
  font-family: var(--gv-font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gv-text);
}

.gv-consenso__testo {
  margin: var(--gv-space-3) 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gv-text-body);
}

.gv-consenso__testo a {
  color: var(--gv-text);
  text-decoration: underline;
  text-decoration-color: var(--gv-line-strong);
  text-underline-offset: 3px;
}

.gv-consenso__testo a:hover {
  text-decoration-color: var(--gv-accent);
}

/* ------------------------------------------------------------------- voci */

.gv-consenso__voci {
  margin-top: var(--gv-space-4);
  padding-top: var(--gv-space-4);
  border-top: 1px solid var(--gv-line);
}

.gv-consenso__voce {
  display: flex;
  align-items: flex-start;
  gap: var(--gv-space-3);
  cursor: pointer;
}

.gv-consenso__voce + .gv-consenso__voce {
  margin-top: var(--gv-space-4);
}

.gv-consenso__casella {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--gv-accent);
  cursor: pointer;
}

.gv-consenso__casella:disabled {
  cursor: default;
  opacity: 0.55;
}

.gv-consenso__voce-titolo {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--gv-text);
}

.gv-consenso__voce-testo {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gv-text-dim);
}

/* ------------------------------------------------------------------ tasti */

.gv-consenso__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gv-space-2);
  margin-top: var(--gv-space-5);
}

/* Rifiuta è pieno come accetta, ma di superficie invece che di testo: si vede allo
   stesso modo senza che la pagina sembri spingere da una parte. */
.gv-consenso__rifiuta {
  background: var(--gv-line-mid);
  color: var(--gv-text);
}

.gv-consenso__rifiuta:hover {
  background: var(--gv-line-strong);
  color: var(--gv-text);
}

.gv-consenso__scegli,
.gv-consenso__salva {
  margin-left: auto;
}

@media (max-width: 479px) {
  .gv-consenso {
    right: 0;
    bottom: 0;
    left: 0;
  }

  .gv-consenso__scatola {
    width: 100%;
    border-inline: 0;
    border-bottom: 0;
  }

  .gv-consenso__azioni > * {
    flex: 1 1 auto;
  }

  .gv-consenso__scegli,
  .gv-consenso__salva {
    margin-left: 0;
    flex-basis: 100%;
  }
}

/* Il collegamento "Preferenze cookie" quando non c'è niente da scegliere: invece di
   aprire una finestra vuota lo dice, una volta, accanto a sé. */
[data-niente-da-scegliere="true"]::after {
  content: " — non ci sono cookie da scegliere";
  color: var(--gv-text-faint);
}