/* ==========================================================
   GDPR BANNER — Hotel Principe for Pet Lovers
   ----------------------------------------------------------
   Adattamento del banner di Vistamare ai colori e all'infrastruttura
   di Principe (Bootstrap 3 via mini.css + jQuery 3.6.3).

   CONTRASTI (WCAG AA = 4.5:1 testo, 3:1 UI) — calcolati:
     · testo bianco su pannello scuro #171c10 ....... ~17:1  OK
     · testo attenuato rgba(255,255,255,.88) ........ ~14:1  OK
     · bottone LIME #a2d100 + testo scuro #16210a ... ~9.5:1 OK
     · bottone ghost: #fff su fondo scuro ........... ~15:1  OK
   ⚠️ Il lime #a2d100 NON regge il testo bianco (1.8:1): sui fondi
      lime il testo deve SEMPRE essere scuro (--cb-accent-text).

   NB: custom.css applica `p { font-size: … !important }`, quindi la
   tipografia interna al banner usa !important mirati.
   ========================================================== */

/* box-sizing globale: lo forniva già questo file e mini.css (Bootstrap)
   viene iniettato in modo asincrono → lo manteniamo per non introdurre
   uno sfarfallio di layout finché mini.css non è arrivato. */
.privacy-banner, .privacy-banner *, .privacy-banner *::before, .privacy-banner *::after,
.gdprc-bloccato, .gdprc-bloccato *, .gdprc-placeholder, .gdprc-placeholder * { box-sizing: border-box; }

/* ==========================================================
   CORAZZA ANTI-TEMA
   ==========================================================
   Un banner di consenso deve rendersi allo stesso modo su
   qualsiasi tema, perche' e' il punto in cui il visitatore
   esercita un diritto: se il tema lo deforma, la scelta
   diventa difficile o impossibile.

   I temi applicano regole molto ampie a button, input e a,
   spesso con selettori di attributo piu' vari :not(), che
   superano in specificita' le classi di questo plugin. Casi
   reali gia' incontrati: input[type="checkbox"]{display:none}
   (le caselle del consenso granulare sparivano) e
   [type="button"]:not(...){min-width:8.5em;padding:18px 40px}
   (la "x" di chiusura e il pulsante di riapertura diventavano
   blocchi larghi).

   Qui si azzera cio' che il tema puo' aver imposto. Le misure
   vere del plugin sono ridichiarate in fondo al file, con la
   stessa forza, cosi' vincono sempre loro.
   ========================================================== */
.privacy-banner, .privacy-banner *, .privacy-banner *::before, .privacy-banner *::after,
.gdprc-riapri, .gdprc-riapri *,
.gdprc-bloccato, .gdprc-bloccato *,
.gdprc-placeholder, .gdprc-placeholder * {
  box-sizing: border-box !important;
  float: none !important;
  clear: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none;
  font-family: inherit !important;
}

/* Elementi interattivi: i temi li ridisegnano quasi sempre. */
.privacy-banner button,
.privacy-banner input,
.privacy-banner a,
.gdprc-riapri,
.gdprc-bloccato button,
.gdprc-placeholder button {
  margin: 0 !important;
  outline: none;
  text-decoration: none;
}

/* La casella nativa deve restare visibile: senza questa riga un tema
   che fa input[type="checkbox"]{display:none} rende il consenso
   granulare inutilizzabile. */
.privacy-banner input[type="checkbox"] {
  display: inline-block !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  clip: auto !important;
  clip-path: none !important;
}


.privacy-banner,
.gdprc-bloccato,
.gdprc-placeholder {
  /* Layout */
  --cb-max-width: 1120px;
  --cb-radius: 14px;
  --cb-padding: 18px;
  --cb-bottom-gap: 18px;
  /* Sopra la CTA fissa #gotoprev (z-index 999999, hardcoded anche negli
     <style> inline di footer.php e footerhome.php) e in parità col valore
     storico del banner. Resta sotto il popup razze (2147483000). */
  --cb-z: 999999999;

  /* Superficie: verde molto scuro (brand), quasi opaca così i contrasti
     non dipendono da ciò che scorre sotto */
  --cb-bg: rgba(23,28,16,.97);
  --cb-text: #ffffff;
  --cb-text-muted: rgba(255,255,255,.88);

  --cb-border: 1px solid rgba(162,209,0,.28);
  --cb-shadow: 0 16px 44px rgba(0,0,0,.45);
  --cb-blur: 10px;

  /* Link */
  --cb-link: rgba(255,255,255,.88);
  --cb-link-hover: #d7ee7a;
  --cb-link-underline: rgba(255,255,255,.32);
  --cb-link-underline-hover: rgba(162,209,0,.9);

  /* Bottone primario = verde lime brand, testo SCURO (obbligatorio) */
  --cb-accent: #a2d100;
  --cb-accent-hover: #b5da33;
  --cb-accent-text: #16210a;
  --cb-accent-glow: 0 10px 24px rgba(162,209,0,.28);

  /* Bottone secondario (ghost) — bordo ben visibile, mai invisibile */
  --cb-ghost-bg: rgba(255,255,255,.10);
  --cb-ghost-bg-hover: rgba(255,255,255,.20);
  --cb-ghost-border: 1px solid rgba(255,255,255,.42);
  --cb-ghost-text: #ffffff;

  /* Chiudi */
  --cb-close-bg: rgba(255,255,255,.10);
  --cb-close-bg-hover: rgba(162,209,0,.24);
  /* .42 (non .30): sotto quel valore il bordo scende a 2.7:1 sul pannello,
     sotto la soglia WCAG di 3:1 per i componenti di interfaccia. */
  --cb-close-border: 1px solid rgba(255,255,255,.42);
  --cb-close-border-hover: 1px solid rgba(162,209,0,.55);
  --cb-close-size: 34px;

  /* Card impostazioni */
  --cb-card-bg: rgba(255,255,255,.07);
  --cb-card-border: 1px solid rgba(255,255,255,.14);
  --cb-card-radius: 12px;

  --cb-check-accent: var(--cb-accent);

  /* Tipografia */
  --cb-title-size: 16px;
  --cb-desc-size: 14px;
  --cb-links-size: 13px;
  --cb-help-size: 12px;

  /* Bottoni */
  --cb-btn-radius: 10px;
  --cb-btn-padding-y: 11px;
  --cb-btn-padding-x: 16px;
  --cb-btn-weight: 700;
}

/* ==========================================================
   Contenitore
   ========================================================== */
.privacy-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--cb-bottom-gap);

  width: auto;
  max-width: var(--cb-max-width);
  margin: 0 auto;

  background: var(--cb-bg);
  color: var(--cb-text);

  border: var(--cb-border);
  border-radius: var(--cb-radius);
  padding: var(--cb-padding);
  box-shadow: var(--cb-shadow);

  -webkit-backdrop-filter: blur(var(--cb-blur));
  backdrop-filter: blur(var(--cb-blur));

  z-index: var(--cb-z);
  display: none;                      /* mostrato via JS */
  font-family: var(--font-base, 'Raleway', Arial, sans-serif);
  line-height: 1.45;
}

/* il resto del sito non deve "sporcare" la tipografia interna */
.privacy-banner p,
.privacy-banner div,
.privacy-banner span,
.privacy-banner label{
  color: var(--cb-text);
  font-family: inherit;
}

.privacy-banner .banner-wrapper{ max-width: 100%; padding: 0; }
.privacy-banner .container{ width: auto; padding: 0; }

/* Difesa: se in futuro qualcuno rimettesse .row/.col di Bootstrap dentro
   il banner, i margini negativi (-15px) creerebbero overflow orizzontale. */
.privacy-banner .row{ margin-left: 0; margin-right: 0; }
.privacy-banner [class*="col-"]{ padding-left: 0; padding-right: 0; }

/* Impaginazione VERTICALE: testo → impostazioni → pulsanti.
   Le checkbox stanno sopra i pulsanti (si spunta, poi si conferma). */
.privacy-banner .cookie-text{ padding-right: 40px; }   /* spazio per la × */

.privacy-banner .cookie-title{
  font-size: var(--cb-title-size) !important;
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: 6px;
  color: var(--cb-text);
}

.privacy-banner .cookie-desc{
  margin: 0 0 10px 0 !important;
  color: var(--cb-text-muted) !important;
  font-size: var(--cb-desc-size) !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

/* ==========================================================
   Link (policy / impostazioni)
   ========================================================== */
.privacy-banner .cookie-links{
  font-size: var(--cb-links-size);
  color: var(--cb-text-muted);
}

.privacy-banner .cookie-link{
  display: inline !important;         /* annulla il vecchio a{display:block} */
  max-width: none !important;
  margin: 0 !important;
  color: var(--cb-link) !important;
  font-size: var(--cb-links-size) !important;
  text-decoration: none !important;
  border-bottom: 1px dashed var(--cb-link-underline);
  padding-bottom: 1px;
}
.privacy-banner .cookie-link:hover,
.privacy-banner .cookie-link:focus{
  color: var(--cb-link-hover) !important;
  border-bottom-color: var(--cb-link-underline-hover);
  text-decoration: none !important;
}
.privacy-banner .cookie-link-strong{ border-bottom-style: solid; font-weight: 700; }
.privacy-banner .cookie-sep{ margin: 0 8px; opacity: .55; }

/* ==========================================================
   Bottoni — volutamente NON usano .btn di Bootstrap: stile
   autonomo = nessun rischio di ereditare fondi bianchi o varianti
   inesistenti (es. .btn-secondary non esiste in Bootstrap 3).
   ========================================================== */
.privacy-banner .cookie-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.privacy-banner .cookie-btn{
  display: inline-block;
  border-radius: var(--cb-btn-radius);
  padding: var(--cb-btn-padding-y) var(--cb-btn-padding-x);
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--cb-btn-weight);
  line-height: 1.2;
  letter-spacing: .2px;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  margin: 0;
  min-height: 44px;                   /* area di tocco accessibile */
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.privacy-banner .cookie-btn:focus-visible{
  /* Il colore del testo del pannello, non l'accento: l'accento puo' essere
     scuro, e un anello di fuoco che si confonde col fondo non si vede. */
  outline: 2px solid var(--cb-text);
  outline-offset: 2px;
}

/* ACCETTA e RIFIUTA hanno la stessa identica evidenza.
   Non e' una scelta estetica. Le linee guida del Garante sui cookie e quelle
   europee sui dark pattern considerano scorretto un "Accetta" pieno e
   colorato accanto a un "Rifiuta" sbiadito: e' una spinta verso il si',
   e rifiutare deve costare quanto accettare. Stesso fondo, stesso bordo,
   stesso testo, nessun alone sul primo. */
.privacy-banner .cookie-btn-primary{
  background: var(--cb-accent);
  border: 1px solid var(--cb-accent);
  color: var(--cb-accent-text) !important;
}
.privacy-banner .cookie-btn-primary:hover,
.privacy-banner .cookie-btn-primary:focus{
  background: var(--cb-accent-hover);
  border-color: var(--cb-accent-hover);
  color: var(--cb-accent-text) !important;
}

/* Rifiuta tutti: identico ad Accetta tutti (vedi sopra). La classe resta
   "ghost" per non rompere il markup dei siti gia' installati. */
.privacy-banner .cookie-btn-ghost{
  background: var(--cb-accent);
  border: 1px solid var(--cb-accent);
  color: var(--cb-accent-text) !important;
}
.privacy-banner .cookie-btn-ghost:hover,
.privacy-banner .cookie-btn-ghost:focus{
  background: var(--cb-accent-hover);
  border-color: var(--cb-accent-hover);
  color: var(--cb-accent-text) !important;
}

/* "Salva le scelte": azione secondaria, compare solo a impostazioni aperte.
   Contornato nell'accento, ma il testo prende il colore del pannello e non
   quello dell'accento: con un accento scuro il testo colorato scende sotto
   la soglia di leggibilita', il testo del pannello no. */
.privacy-banner .cookie-btn-save{
  background: transparent;
  border: 1px solid var(--cb-accent);
  color: var(--cb-text) !important;
}
.privacy-banner .cookie-btn-save:hover,
.privacy-banner .cookie-btn-save:focus{
  background: var(--cb-accent);
  color: var(--cb-accent-text) !important;
}

/* ==========================================================
   Chiudi
   ========================================================== */
.privacy-banner .cookie-close{
  position: absolute;
  top: 10px;
  right: 10px;

  width: var(--cb-close-size);
  height: var(--cb-close-size);
  padding: 0;

  border-radius: var(--cb-btn-radius);
  border: var(--cb-close-border);
  background: var(--cb-close-bg);
  color: var(--cb-text) !important;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.privacy-banner .cookie-close:hover,
.privacy-banner .cookie-close:focus{
  background: var(--cb-close-bg-hover);
  border: var(--cb-close-border-hover);
}
.privacy-banner .cookie-close span{ pointer-events: none; display: block; }

/* ==========================================================
   Pannello impostazioni
   ========================================================== */
.privacy-banner #cookie_impostazioni{ width: 100%; margin: 0; }

.privacy-banner .cookie-settings-card{
  margin-top: 12px;
  padding: 14px;
  border-radius: var(--cb-card-radius);
  background: var(--cb-card-bg);
  border: var(--cb-card-border);
}

/* le tre categorie affiancate su desktop, impilate su schermi stretti */
.privacy-banner .cookie-cats{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}
.privacy-banner .cookie-cats > .cookie-check{
  flex: 1 1 210px;
  min-width: 0;                 /* evita che il testo lungo allarghi il flex */
  margin: 0;
}
.privacy-banner .cookie-check{ margin: 6px 0; }

.privacy-banner .cookie-checkline{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 700;
  font-size: 14px !important;
  color: rgba(255,255,255,.95) !important;
  cursor: pointer;
}
.privacy-banner .cookie-checkline input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--cb-check-accent);
  /* custom.css applica box-shadow !important a input/textarea/select */
  box-shadow: none !important;
}
.privacy-banner .cookie-checkline input[type="checkbox"]:disabled{ opacity: .65; }

.privacy-banner .cookie-help{
  margin-top: 6px;
  font-size: var(--cb-help-size) !important;
  color: rgba(255,255,255,.75) !important;
  line-height: 1.4;
}

/* ==========================================================
   TABLET
   ========================================================== */
@media (max-width: 1200px){
  .privacy-banner{
    max-width: calc(100% - 20px);
    bottom: 10px;
  }
}

/* Tablet stretti: i pulsanti restano in fila ma possono andare a capo
   (gestito da flex-wrap su .cookie-actions), senza mai traboccare. */

/* ==========================================================
   MOBILE — compatto e non invadente, ma pienamente usabile.
   · resta SOPRA la barra fissa "CHIEDI PREVENTIVO" (#gotoprev,
     .visible-xs, alta ~45px, z-index 999999): entrambe cliccabili;
   · altezza limitata + scroll interno: non copre mai tutta la pagina;
   · bottoni a piena larghezza, area di tocco ≥ 46px.
   ========================================================== */
@media (max-width: 767px){
  .privacy-banner{
    left: 8px;
    right: 8px;
    bottom: calc(53px + env(safe-area-inset-bottom, 0px));
    max-width: none;
    padding: 14px;
    border-radius: 12px;
    max-height: 72vh;
    overflow: hidden;              /* lo scroll sta nel wrapper, non qui: */
  }
  /* …così il tasto × (absolute sul banner) resta SEMPRE visibile anche
     quando il pannello impostazioni è aperto e il contenuto scorre. */
  .privacy-banner .banner-wrapper{
    max-height: calc(72vh - 28px);
    overflow-y: auto;
    overflow-x: hidden;            /* mai scorrimento orizzontale */
    -webkit-overflow-scrolling: touch;
  }

  .privacy-banner .cookie-text{ padding-right: 38px; }   /* spazio per la × */

  .privacy-banner .cookie-title{ font-size: 15px !important; }
  .privacy-banner .cookie-desc{ font-size: 13.5px !important; margin-bottom: 8px !important; }

  /* pulsanti a piena larghezza e impilati; il primario ("Accetta tutti")
     resta il primo sotto le impostazioni, il rifiuto per ultimo */
  .privacy-banner .cookie-actions{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 12px;
  }
  .privacy-banner .cookie-btn{
    display: block;
    width: 100%;
    margin: 0;
    min-height: 46px;
  }
  /* Accetta e Rifiuta uno sotto l'altro, Salva per ultimo. Prima Rifiuta
     finiva in fondo, separato da Salva: una seconda spinta verso il si'. */
  .privacy-banner .cookie-btn-primary{ order: 1; }
  .privacy-banner .cookie-btn-ghost{   order: 2; }
  .privacy-banner .cookie-btn-save{    order: 3; }

  .privacy-banner .cookie-cats{ gap: 12px; }

  .privacy-banner .cookie-links{ display: block; line-height: 2; }
  .privacy-banner .cookie-sep{ display: none; }
  .privacy-banner .cookie-link{ display: inline-block !important; margin-right: 14px !important; }

  .privacy-banner .cookie-close{
    width: 40px;
    height: 40px;
    top: 8px;
    right: 8px;
    border-radius: 12px;
    font-size: 24px;
  }

  .privacy-banner .cookie-settings-card{ padding: 12px; }
  .privacy-banner .cookie-check{ margin: 10px 0; }
}

/* Schermi molto bassi: garantisce comunque lettura e azione */
@media (max-width: 767px) and (max-height: 560px){
  .privacy-banner{ max-height: 82vh; }
  .privacy-banner .banner-wrapper{ max-height: calc(82vh - 28px); }
}

@media (prefers-reduced-motion: reduce){
  .privacy-banner .cookie-btn{ transition: none; }
}


/* =========================================================================
   LA X DI CHIUSURA
   -------------------------------------------------------------------------
   Il riquadro e' centrato, ma il carattere × no: quasi nessun font lo disegna
   in mezzo al proprio spazio, e sta sempre un po' troppo in alto. Si vede
   soprattutto dentro un riquadro tondo, dove l'occhio ha un riferimento.

   Invece di rincorrere il font con correzioni a occhio, la croce si disegna
   con due righe: sta in mezzo per costruzione, resta nitida a ogni dimensione
   e prende da sola il colore del testo. Il markup non cambia, il carattere
   viene solo reso invisibile.
   ========================================================================= */

.privacy-banner .cookie-close span {
	position: relative;
	display: block;
	width: 13px;
	height: 13px;
	font-size: 0;
	line-height: 0;
}

.privacy-banner .cookie-close span::before,
.privacy-banner .cookie-close span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	border-radius: 2px;
}

.privacy-banner .cookie-close span::before {
	transform: translateY(-50%) rotate(45deg);
}

.privacy-banner .cookie-close span::after {
	transform: translateY(-50%) rotate(-45deg);
}


/* =========================================================================
   SEGNAPOSTO DEI CONTENUTI BLOCCATI
   -------------------------------------------------------------------------
   Prende il posto di mappe, video e riquadri social finché manca il consenso.
   Conserva l'ingombro del contenuto originale, così la pagina non salta
   quando il contenuto vero arriva.
   ========================================================================= */

.gdprc-bloccato {
	position: relative;
	display: block;
	width: 100%;
	min-height: 220px;
	background: #f4f4f2;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 12px;
	overflow: hidden;
}

.gdprc-bloccato.gdprc-sbloccato {
	background: none;
	border: 0;
	min-height: 0;
}

.gdprc-bloccato > iframe {
	display: block;
	width: 100%;
	min-height: 220px;
	border: 0;
}

.gdprc-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px 20px;
	text-align: center;
	font-family: inherit;
}

/* Fuori da un contenitore bloccato il segnaposto sta nel flusso: succede con
   gli elementi marcati dal tema, dove non c'e' un riquadro attorno. */
.gdprc-placeholder:not(.gdprc-bloccato .gdprc-placeholder) {
	position: static;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 12px;
	background: #f4f4f2;
}

.gdprc-ph-titolo {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	color: #2b2b2b;
}

.gdprc-ph-testo {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	max-width: 46ch;
	text-align: center;
	opacity: 0.8;
	color: #2b2b2b;
}

/* I margini sono azzerati per difesa, non per abitudine: i temi stilano i
   pulsanti, e qui dentro un margine destro ereditato sposta il pulsante fuori
   asse rispetto al testo sopra. Il tema Oshine, per dirne uno, applica venti
   pixel a destra, che diventano dieci di sbandamento a sinistra. */
.gdprc-ph-btn {
	display: inline-block;
	margin: 4px 0 0 0;
	padding: 10px 20px;
	width: auto;
	max-width: 100%;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-align: center;
	color: var(--cb-accent-text, #fff);
	background: var(--cb-accent, #0b6bcb);
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	cursor: pointer;
	transition: background .18s ease;
}

.gdprc-ph-btn:hover {
	background: var(--cb-accent-hover, #095aa8);
}

.gdprc-ph-btn:focus-visible {
	outline: 2px solid var(--cb-accent, #0b6bcb);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.gdprc-bloccato { min-height: 180px; }
	.gdprc-ph-testo { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.gdprc-ph-btn { transition: none; }
}


/* =========================================================================
   PULSANTE PER RIAPRIRE IL BANNER
   -------------------------------------------------------------------------
   Il consenso va poter essere revocato con la stessa facilita' con cui e'
   stato dato. Sta in basso a SINISTRA: a destra finiscono quasi sempre il
   torna su e le chat, ed e' l'angolo piu' affollato di ogni sito.

   A riposo mostra solo l'icona; il testo compare al passaggio del mouse e
   quando riceve il fuoco da tastiera. Cosi' non ruba spazio alla lettura ma
   resta raggiungibile da chi non usa il mouse.
   ========================================================================= */

/* Da chiuso deve restare un cerchio con la sola icona. La scritta si nasconde
   portandola a larghezza zero e non tagliandola con overflow sul pulsante:
   tagliandola resterebbe visibile la prima lettera o due, e un pulsante con
   scritto "Pr" sembra rotto, non chiuso. */

/* Dimensione, colori e distanza dal bordo passano da variabili: il pannello le
   riscrive senza dover generare regole diverse per ogni combinazione. I valori
   di riserva valgono quando non e' stato scelto niente. */

.gdprc-riapri-fisso {
	--gdprc-riapri-lato: 44px;
	--gdprc-riapri-margine: 16px;
	--gdprc-riapri-sfondo: var(--cb-accent, #0b6bcb);
	--gdprc-riapri-sfondo-hover: var(--cb-accent-hover, #095aa8);
	--gdprc-riapri-icona: var(--cb-accent-text, #fff);

	position: fixed;
	bottom: var(--gdprc-riapri-margine);
	left: var(--gdprc-riapri-margine);
	z-index: 9998;   /* sotto il banner, che sta piu' in alto */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	width: auto;
	min-width: var(--gdprc-riapri-lato);
	height: var(--gdprc-riapri-lato);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--gdprc-riapri-icona);
	background: var(--gdprc-riapri-sfondo);
	border: 0;
	border-radius: calc(var(--gdprc-riapri-lato) / 2);
	box-shadow: 0 3px 12px rgba(0, 0, 0, .22);
	cursor: pointer;
	transition: background .18s ease, box-shadow .18s ease;
}

/* Le quattro posizioni. Quella predefinita e' in basso a sinistra: a destra
   finiscono quasi sempre il torna su e le chat. */
.gdprc-riapri-fisso.gdprc-pos-basso-destra {
	left: auto;
	right: var(--gdprc-riapri-margine);
}

.gdprc-riapri-fisso.gdprc-pos-alto-sinistra {
	bottom: auto;
	top: var(--gdprc-riapri-margine);
}

.gdprc-riapri-fisso.gdprc-pos-alto-destra {
	bottom: auto;
	top: var(--gdprc-riapri-margine);
	left: auto;
	right: var(--gdprc-riapri-margine);
}

/* Con il pulsante a destra la scritta esce dal lato opposto, altrimenti
   crescendo verso destra finirebbe fuori dallo schermo. */
.gdprc-riapri-fisso.gdprc-pos-basso-destra,
.gdprc-riapri-fisso.gdprc-pos-alto-destra {
	flex-direction: row-reverse;
}

.gdprc-riapri-fisso.gdprc-pos-basso-destra:hover .gdprc-riapri-testo,
.gdprc-riapri-fisso.gdprc-pos-alto-destra:hover .gdprc-riapri-testo,
.gdprc-riapri-fisso.gdprc-pos-basso-destra:focus-visible .gdprc-riapri-testo,
.gdprc-riapri-fisso.gdprc-pos-alto-destra:focus-visible .gdprc-riapri-testo {
	padding: 0 2px 0 18px;
}

.gdprc-riapri-fisso:hover,
.gdprc-riapri-fisso:focus-visible {
	background: var(--gdprc-riapri-sfondo-hover);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
}

.gdprc-riapri-fisso:focus-visible {
	outline: 2px solid var(--cb-accent, #0b6bcb);
	outline-offset: 3px;
}

.gdprc-riapri-icona {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--gdprc-riapri-lato);
	height: var(--gdprc-riapri-lato);
}

.gdprc-riapri-testo {
	display: inline-block;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-width .28s ease, opacity .18s ease, padding .28s ease;
	padding: 0;
}

.gdprc-riapri-fisso:hover .gdprc-riapri-testo,
.gdprc-riapri-fisso:focus-visible .gdprc-riapri-testo {
	max-width: 220px;
	opacity: 1;
	padding: 0 18px 0 2px;
}

/* Sul telefono il passaggio del mouse non esiste: il pulsante resta il cerchio
   con la sola icona, che e' comunque toccabile e non copre il contenuto. */
@media (hover: none) {
	.gdprc-riapri-fisso:hover .gdprc-riapri-testo {
		max-width: 0;
		opacity: 0;
		padding: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gdprc-riapri-fisso,
	.gdprc-riapri-testo { transition: none; }
}

/* ==========================================================
   MISURE DEFINITIVE
   ==========================================================
   Ultimo blocco del foglio: ridichiara con !important cio' che
   la corazza in cima azzera e cio' che i temi tendono a
   riscrivere. Sta in fondo di proposito, cosi' vince sempre,
   qualunque sia il tema installato.
   ========================================================== */

.privacy-banner{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--cb-bottom-gap) !important;
  width: auto !important;
  max-width: var(--cb-max-width) !important;
  margin: 0 auto !important;
  padding: var(--cb-padding) !important;
  background: var(--cb-bg) !important;
  color: var(--cb-text) !important;
  border: var(--cb-border) !important;
  border-radius: var(--cb-radius) !important;
  box-shadow: var(--cb-shadow) !important;
  z-index: var(--cb-z) !important;
}

.privacy-banner .cookie-close{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  display: flex !important;
  width: var(--cb-close-size) !important;
  height: var(--cb-close-size) !important;
  padding: 0 !important;
  background: var(--cb-close-bg) !important;
  border: var(--cb-close-border) !important;
  border-radius: var(--cb-btn-radius) !important;
}
.privacy-banner .cookie-close:hover,
.privacy-banner .cookie-close:focus{
  background: var(--cb-close-bg-hover) !important;
  border: var(--cb-close-border-hover) !important;
}

.privacy-banner .cookie-btn{
  display: inline-block !important;
  width: auto !important;
  min-height: 44px !important;
  padding: var(--cb-btn-padding-y) var(--cb-btn-padding-x) !important;
  border-radius: var(--cb-btn-radius) !important;
  font-size: 14px !important;
  font-weight: var(--cb-btn-weight) !important;
  line-height: 1.2 !important;
}
.privacy-banner .cookie-btn-primary{
  background: var(--cb-accent) !important;
  border: 1px solid var(--cb-accent) !important;
}
.privacy-banner .cookie-btn-primary:hover,
.privacy-banner .cookie-btn-primary:focus{
  background: var(--cb-accent-hover) !important;
  border-color: var(--cb-accent-hover) !important;
}
.privacy-banner .cookie-btn-primary,
.privacy-banner .cookie-btn-ghost{
  color: var(--cb-accent-text) !important;
}
.privacy-banner .cookie-btn-ghost{
  background: var(--cb-accent) !important;
  border: 1px solid var(--cb-accent) !important;
}
.privacy-banner .cookie-btn-ghost:hover,
.privacy-banner .cookie-btn-ghost:focus{
  background: var(--cb-accent-hover) !important;
  border-color: var(--cb-accent-hover) !important;
}
.privacy-banner .cookie-btn-save{
  background: transparent !important;
  border: 1px solid var(--cb-accent) !important;
  color: var(--cb-text) !important;
}
.privacy-banner .cookie-btn-save:hover,
.privacy-banner .cookie-btn-save:focus{
  background: var(--cb-accent) !important;
  color: var(--cb-accent-text) !important;
}
/* Fuoco da tastiera, su TUTTI gli elementi interattivi.
   La corazza in cima toglie il contorno a pulsanti, link e caselle per
   neutralizzare i temi: rimetterlo solo sui pulsanti lasciava invisibile il
   fuoco su caselle, link e chiusura, e chi naviga da tastiera non vedeva
   dove si trovava (WCAG 2.4.7).
   Dentro il pannello scuro l'anello prende il colore del testo. Fuori, sopra
   la pagina, prende l'accento: un anello bianco su una pagina chiara sparisce. */
.privacy-banner a:focus-visible,
.privacy-banner button:focus-visible,
.privacy-banner input:focus-visible,
.privacy-banner [tabindex]:focus-visible{
  outline: 2px solid var(--cb-text) !important;
  outline-offset: 2px !important;
}
/* Fuori dal pannello non si sa su che colore si cade: il pulsante di
   riapertura e i segnaposto stanno sopra il contenuto del sito, chiaro o scuro
   che sia. Un anello di un solo colore sparisce sullo sfondo del suo stesso
   colore; due toni affiancati, uno chiarissimo e uno scurissimo, restano sempre
   visibili. Colori espliciti e non variabili: la variabile dell'accento non e'
   definita fuori dal pannello, e un valore mancante ricade sul colore del testo,
   che sul pulsante di riapertura e' proprio il bianco. */
.gdprc-riapri:focus-visible,
.gdprc-ph-btn:focus-visible,
.gdprc-bloccato button:focus-visible,
.gdprc-placeholder button:focus-visible{
  outline: 3px solid #111111 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #ffffff !important;
}

.privacy-banner .cookie-checkline input[type="checkbox"]{
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
  accent-color: var(--cb-check-accent) !important;
}

/* Pulsante di riapertura: cerchio con la sola icona, che si allarga
   al passaggio del mouse. La larghezza e' data da min-width, quindi
   va ridichiarata dopo l'azzeramento della corazza. */
.gdprc-riapri-fisso{
  position: fixed !important;
  display: inline-flex !important;
  width: auto !important;
  min-width: var(--gdprc-riapri-lato) !important;
  height: var(--gdprc-riapri-lato) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--gdprc-riapri-sfondo) !important;
  color: var(--gdprc-riapri-icona) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  z-index: 9998 !important;
}
.gdprc-riapri-fisso:hover,
.gdprc-riapri-fisso:focus-visible{
  background: var(--gdprc-riapri-sfondo-hover) !important;
}
.gdprc-riapri-icona{
  display: inline-flex !important;
  width: var(--gdprc-riapri-lato) !important;
  height: var(--gdprc-riapri-lato) !important;
  flex: 0 0 auto !important;
}
.gdprc-riapri-testo{
  display: inline-block !important;
  max-width: 0 !important;
  padding: 0 !important;
  opacity: 0;
  overflow: hidden !important;
  transition: max-width .28s ease, opacity .18s ease, padding .28s ease;
}
.gdprc-riapri-fisso:hover .gdprc-riapri-testo,
.gdprc-riapri-fisso:focus-visible .gdprc-riapri-testo{
  max-width: 220px !important;
  padding: 0 18px 0 2px !important;
  opacity: 1;
}
@media (hover: none){
  .gdprc-riapri-fisso:hover .gdprc-riapri-testo{
    max-width: 0 !important;
    padding: 0 !important;
    opacity: 0;
  }
}