/*
 * PERCORSO SUL SERVER: /nn/assets/css/consenso-261101-v4.css
 * Usato da: /index.asp (solo in anteprima, da loggati), insieme a
 * /nn/assets/js/consenso-261101-v3.js
 *
 * Sostituisce, per la sola pagina di sviluppo, /nn/assets/css/cookies.css:
 * quel file resta com'e' perche' lo usa ancora la home in linea.
 */

/* --- banner --------------------------------------------------------------- */
/* [hidden] va forzato: le regole del tema su div/section potrebbero
   ridefinire display e far ricomparire il banner gia' chiuso. */
#cns[hidden], #cns-scelte[hidden] { display: none !important; }

#cns {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Il tema mette la barra laterale (#sidebar) a z-index 100000, lo stesso
     valore che aveva il banner: a parita' vince chi viene dopo nella pagina,
     e sopra i 1280px (dove la barra e' fissa a sinistra) copriva la parte
     sinistra del banner. Altri elementi del tema (#logout, #bkit, #warning)
     usano valori enormi che il browser riduce al massimo, 2147483647: il
     banner usa lo stesso massimo, e consenso-261101-v3.js lo sposta in fondo
     al <body>, cosi' a parita' di valore resta sopra a tutti. */
  z-index: 2147483647;
  background: #f4f4f4;
  color: #201511;
  border-top: 1px solid rgba(160, 160, 160, .5);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .12);
  font-size: calc(.7em + .2vw);
  line-height: 1.5;
  /* Parte fuori schermo e trasparente; .cns-aperto lo porta in vista.
     La classe la mette e la toglie consenso-261101-v3.js. */
  transform: translateY(100%);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}

#cns.cns-aperto {
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #cns { transition: none; }
}

#cns .cns-box {
  position: relative;
  max-width: 62em;
  margin: 0 auto;
  padding: 1.2em 3em 1.2em 1.5em;
}

#cns p { margin: 0 0 .8em; }
#cns a { color: #201511; border-bottom: 1px dotted; }

/* La X: chiude rifiutando, quindi deve essere ben visibile. */
#cns-chiudi {
  position: absolute;
  top: .6em;
  right: .8em;
  background: none;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  color: #201511 !important;
  font-size: 1.6em;
  letter-spacing: 0;
  line-height: 1;
  padding: .2em .4em;
  height: auto;
  cursor: pointer;
}

#cns .cns-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: .6em;
}

/* Accetta e Rifiuta hanno lo STESSO aspetto: il Garante non ammette che il
   rifiuto sia meno evidente dell'accettazione. */
#cns .cns-btn {
  flex: 0 0 auto;
  min-width: 9em;
  padding: .55em 1.2em;
  height: auto;
  line-height: 1.3;
  border: 1px solid #201511 !important;
  border-radius: 4px;
  background: #201511;
  color: #fff !important;
  font: inherit;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

#cns .cns-btn-secondario {
  background: transparent;
  color: #201511 !important;
}

#cns-scelte {
  margin-top: 1em;
  padding-top: .8em;
  border-top: 1px solid rgba(160, 160, 160, .5);
}

/* Colore e corpo espliciti: main.css da' a ogni label color #eae8de e
   font-size 1.1em, pensati per il fondo scuro del modulo contatti; sul
   fondo chiaro del banner le due voci risultavano quasi invisibili
   (misurato il 01/11/2026). */
#cns-scelte label {
  display: block;
  margin: 0 0 .6em;
  font-weight: 400;
  color: #201511;
  font-size: 1em;
  line-height: 1.5;
  cursor: pointer;
}

/* Il tema (main.css, "input[type=checkbox]") nasconde le checkbox native
   (opacity:0, z-index:-1, float) e le ridisegna con "input+label:before".
   Qui la checkbox sta DENTRO la label, quindi quel disegno non scatta:
   si rimettono in vista quelle native, piu' semplici e accessibili. */
#cns-scelte input[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
  display: inline-block;
  float: none;
  opacity: 1;
  position: static;
  width: auto;
  height: auto;
  margin: 0 .5em 0 0;
  vertical-align: middle;
  z-index: auto;
}

#cns-scelte label:before,
#cns-scelte label:after { display: none !important; }

/* Il tema mette su ogni pulsante un velo bianco in :after che compare al
   passaggio del mouse: sui pulsanti scuri del banner coprirebbe il testo. */
#cns button:after,
.cns-embed button:after { display: none !important; }

@media screen and (max-width: 480px) {
  #cns .cns-box { padding: 1em 2.6em 1em 1em; }
  #cns .cns-btn { flex: 1 1 100%; }
}

/* --- segnaposto della mappa ------------------------------------------------- */
.cns-embed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .8em;
  padding: 1.5em;
  background: #e9eef0;
  color: #201511;
  border-radius: 24px;
  box-sizing: border-box;
  font-size: .85em;
}

/* Stesse misure dell'iframe che sostituisce (400x300 nel codice della mappa),
   per non far saltare l'impaginazione quando si carica. */
.cns-embed-mappa {
  width: 400px;
  max-width: 100%;
  min-height: 300px;
}

.cns-embed p { margin: 0; }

.cns-embed .cns-embed-carica {
  padding: .5em 1.2em;
  height: auto;
  line-height: 1.3;
  border: 1px solid #201511 !important;
  border-radius: 4px;
  background: #fff;
  color: #201511 !important;
  font: inherit;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

/* --- link "Preferenze cookie" nel piede ------------------------------------- */
/* Il piede del tema scrive tutto a rgba(255,255,255,.15), quasi invisibile:
   questo link e' il modo per cambiare o revocare il consenso, quindi deve
   potersi trovare. */
#footer .cns-apri {
  position: relative;
  color: rgba(255, 255, 255, .75);
  border-bottom: 1px dotted currentColor;
}

/* Al passaggio del mouse una linea piena cresce dal centro verso i lati
   (scaleX da 0 a 1 con origine al centro) e prende il posto dei puntini.
   Il tema in a:hover rende gia' trasparente il bordo e bianco il testo. */
#footer .cns-apri::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s ease;
}

#footer .cns-apri:hover,
#footer .cns-apri:focus-visible {
  color: #fff;
  border-bottom-color: transparent;
}

#footer .cns-apri:hover::after,
#footer .cns-apri:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  #footer .cns-apri::after { transition: none; }
}