/**
 * IPlanet Dark Mode CSS (rev)
 * - Palette coerente (bg/surface/text/border + lime + arancio).
 * - Fix hard-coded light backgrounds (wrapper, banner, form).
 * - Fix CTA .btn-oro + focus ring.
 * - Fix banner promo sticky (gradient troppo bright).
 * - Hero overlay per contrasto testo.
 *
 * Tutte le regole sono prefissate con html.ip-dark-mode per evitare side effects.
 */

/* =========================================================
   1) PALETTE DARK (variabili)
   ========================================================= */
html.ip-dark-mode,
body.ip-dark-mode {
  /* Legacy names (compat col tema esistente) */
  --bianco: #070A0A;         /* bg */
  --grigio: #F2F2F2;         /* text */
  --grigio-chiaro: #111816;  /* surface */
  --verde: #C3F926;          /* primary (lime) */

  /* IMPORTANTE: --ottanio viene usato in strong/bold inline */
  --ottanio: #C7D0CB;        /* accent soft per testi evidenziati */

  /* Token nuovi (consigliati) */
  --bg: #070A0A;
  --surface-1: #0B0F0E;
  --surface-2: #111816;
  --surface-3: #182321;
  --border: #22302E;
  --divider: #1A2522;

  --text: #F2F2F2;
  --text-muted: #C7D0CB;
  --text-subtle: #9AA7A1;
  --text-inverse: #070A0A;

  --primary: #C3F926;
  --primary-hover: #B2F723;
  --primary-active: #99F51F;

  --secondary: #F5AB1C;
  --secondary-hover: #F2A10A;
  --secondary-active: #E79200;

  --focus: rgba(195,249,38,.35);

  /* Gradienti “dark + glow” */
  --gradiente-arancio: radial-gradient(120% 120% at 20% 20%,
      rgba(245,171,28,.22) 0%,
      rgba(51,82,77,.45) 35%,
      #0B0F0E 70%,
      #070A0A 100%);

  --gradiente-arancio-90: linear-gradient(90deg,
      rgba(245,171,28,.20) 0%,
      rgba(245,171,28,.08) 45%,
      rgba(7,10,10,0) 100%),
      linear-gradient(#0B0F0E, #070A0A);
}
	

/* Impostazioni generali per il tema dark */
html.ip-dark-mode body{
  background: var(--surface-1);
  color: var(--text);
  color-scheme: dark;
}

/* Link base: evita blu default */
html.ip-dark-mode a{
  color: var(--text);
}

/* =========================================================
   2) LAYOUT / SUPERFICI (override blocchi chiari)
   ========================================================= */
html.ip-dark-mode .content-wrapper,
html.ip-dark-mode .container-small,
html.ip-dark-mode .container-full-width,
html.ip-dark-mode .largo-roadmap,
html.ip-dark-mode .largo-roadmap-vertical,
html.ip-dark-mode .content-metodi-di-pagamento,
html.ip-dark-mode .largo-roadmap-mobile{
  background: var(--surface-1);
}

html.ip-dark-mode .blocco-form-di-contatto,
html.ip-dark-mode .blocco-futuro,
html.ip-dark-mode .banner-download-mobile{
  background: var(--surface-2) !important;
  color: var(--text);
}

/* Bordi: meno “polvere bianca”, più charcoal */
html.ip-dark-mode .container-full-width,
html.ip-dark-mode .linea-larga,
html.ip-dark-mode footer hr,
html.ip-dark-mode .passo-last{
  border-color: var(--border) !important;
}

/* Testi hard-coded in chiaro */
html.ip-dark-mode .testo-bn,
html.ip-dark-mode .blocco-lifestyle h2,
html.ip-dark-mode .blocco-lifestyle .anteprima-articolo h3{
  color: var(--text) !important;
}

/* =========================================================
   3) HERO: overlay per contrasto testo
   (robusto: non dipende dallo style inline sullo slide)
   ========================================================= */
html.ip-dark-mode .hero .swiper-slide{
  position: relative;
}

html.ip-dark-mode .hero .swiper-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
  pointer-events:none;
}

html.ip-dark-mode .hero .slide-content{
  position: relative;
  z-index: 1;
}

/* =========================================================
   4) CTA / BUTTONS
   ========================================================= */

/* =========================================================
   BTN ORO (dark) - versione soft/outline
   ========================================================= */


/* Ombra bottoni*/
html.ip-dark-mode .btn-oro{
  background: rgba(245,171,28,.12) !important;
  color: var(--text) !important;
  border: 1px solid rgba(245,171,28,.55) !important;
}

html.ip-dark-mode .btn-oro:hover{
  background: rgba(245,171,28,.18) !important;
  border-color: rgba(245,171,28,.75) !important;
}

html.ip-dark-mode .btn-oro:active{
  background: rgba(245,171,28,.24) !important;
}

html.ip-dark-mode .btn-oro:focus-visible{
  outline: 0 !important;
  box-shadow: 0 0 0 4px var(--focus) !important;
}

html.ip-dark-mode .btn-oro img{
  filter: brightness(0) invert(1);
}



html.ip-dark-mode .btn-oro img{
  filter: brightness(0) invert(1);
}


html.ip-dark-mode .btn-up{
  color: var(--text) !important;
}


/* =========================================================
   5) INPUT / FORM (pulizia + focus)
   ========================================================= */
html.ip-dark-mode input,
html.ip-dark-mode textarea,
html.ip-dark-mode select{
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

html.ip-dark-mode input::placeholder,
html.ip-dark-mode textarea::placeholder{
  color: var(--text-subtle);
}

/* Checkbox/acceptance (classe vista nel tuo CSS) */
html.ip-dark-mode .campo-acceptance{
  background-color: var(--surface-2);
  border-color: var(--border) !important;
  color: var(--text);
}

/* Focus ring coerente */
html.ip-dark-mode input:focus,
html.ip-dark-mode textarea:focus,
html.ip-dark-mode select:focus{
  outline: 0;
  box-shadow: 0 0 0 4px var(--focus);
  border-color: rgba(195,249,38,.55) !important;
	background: rgba(195, 249, 38, .55) !important;
}

/* =========================================================
   6) BANNER PROMO STICKY (quello hard-coded #FFFF33 -> #50EE11)
   ========================================================= */
html.ip-dark-mode .banner{
  background: radial-gradient(120% 120% at 20% 20%,
      rgba(195,249,38,.22) 0%,
      rgba(51,82,77,.45) 35%,
      #0B0F0E 70%,
      #070A0A 100%) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

html.ip-dark-mode .banner .promo-price,
html.ip-dark-mode .banner .promo-title,
html.ip-dark-mode .banner .message-title{
  color: var(--text) !important;
}

html.ip-dark-mode .banner .message-subtitle{
  color: var(--text-muted) !important;
}

/* =========================================================
   7) STILE DEL BOTTONE TOGGLE (già buono, ma coerente ai token)
   ========================================================= */
.iplanet-theme-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
	justify-content: center;
	width:165px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.2);
  background: #ffffff;
  color: #111;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.iplanet-theme-toggle__label{
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.iplanet-theme-toggle__state{
  font-weight: 400;
  opacity: .8;
}

/* Stato dark per il bottone */
html.ip-dark-mode .iplanet-theme-toggle{
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

html.ip-dark-mode .iplanet-theme-toggle:hover{
  background: var(--surface-3);
}

/* Posizionamento in header */
header .language-selector{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

/* Mobile: manteniamo il toggle visibile anche se il language selector era nascosto */
@media (max-width: 480px){
  header .language-selector{
    display: none !important;
  }
  header .language-selector .language-switcher{
	  display: none !important;}
	header .menu{
		display:flex;
		align-items: flex-start;
    flex-direction: row;
	}
	header .menu #iplanet-theme-toggle{
		margin-top:calc((51px - 33px)/2);
		margin-right:10px;
	}
}

@media (max-width: 1400px){
	header .menu{
		display:flex;
		align-items: flex-start;
    flex-direction: row;
	}
	header .menu #iplanet-theme-toggle{
		margin-top:calc((51px - 33px)/2);
		margin-right:10px;
    width: auto !important;
	}
}
/* =========================================================
   8) FIX PICCOLO: strong/bold coerente
   (nel tuo inline CSS: strong usa var(--ottanio))
   ========================================================= */
html.ip-dark-mode strong,
html.ip-dark-mode b{
  color: var(--ottanio);
}

/* =========================================================
   BLOCCO ULTRAFAST (dark) - versione premium
   ========================================================= */
html.ip-dark-mode .blocco-ultrafast{
  background: radial-gradient(120% 140% at 15% 20%,
      rgba(195,249,38,.22) 0%,
      rgba(51,82,77,.45) 35%,
      var(--surface-1) 72%,
      var(--bg) 100%) !important;
  border: 1px solid var(--border);
  color: var(--text);
}


html.ip-dark-mode .blocco-ultrafast .titolo{
  color: var(--text) !important;
}

html.ip-dark-mode .blocco-ultrafast .sottotitolo{
  color: var(--text-muted) !important;
}

html.ip-dark-mode .blocco-ultrafast p{
  color: var(--text) !important;
}


/* =========================================================
   BLOCCO VERDE (dark) - versione premium
   ========================================================= */

html.ip-dark-mode .blocco-verde{
  background: radial-gradient(120% 140% at 15% 20%,
      rgba(195,249,38,.20) 0%,
      rgba(51,82,77,.45) 35%,
      var(--surface-1) 72%,
      var(--bg) 100%) !important;
  border: 1px solid var(--border);
  color: var(--text);
}
/*
html.ip-dark-mode .blocco-ultrafast .blocco-ultrafast-testo, html.ip-dark-mode .blocco-ultrafast .blocco-ultrafast-testo h1, html.ip-dark-mode .blocco-ultrafast .blocco-ultrafast-testo h2,html.ip-dark-mode .blocco-ultrafast .blocco-ultrafast-testo h3, html.ip-dark-mode .blocco-verde .titolo, html.ip-dark-mode .blocco-verde h2, html.ip-dark-mode .blocco-verde h3,html.ip-dark-mode .lista-valori-bl-verde .dettaglio-valore .testo .descrizione, html.ip-dark-mode .blocco-verde p, html.ip-dark-mode .blocco-verde .descrizione, html.ip-dark-mode .blocco-verde strong, html.ip-dark-mode .blocco-verde b{
	color:#018183 !important;
}*/

html.ip-dark-mode .blocco-app .blocco-app-testo .titolo, html.ip-dark-mode .blocco-tariffe .blocco-tariffe-testo .titolo{
	color:var(--grigio) !important;
}

/* testi interni (titoli, paragrafi) */

html.ip-dark-mode .blocco-verde .titolo,
html.ip-dark-mode .blocco-verde h2,
html.ip-dark-mode .blocco-verde h3{
  color: var(--text) !important;
}

html.ip-dark-mode .blocco-verde p,
html.ip-dark-mode .blocco-verde .descrizione{
  color: var(--text-muted) !important;
}

/* strong dentro al blocco: leggibile ma non “neon” */
/*
html.ip-dark-mode .blocco-verde strong,
html.ip-dark-mode .blocco-verde b{
  color: var(--text) !important;
}*/

/* =========================================================
   MAX MEGA MENU - Dark Mode (override su CSS generato)
   Colore base richiesto: #0b0f0e
   ========================================================= */

/* Barra menu (desktop e wrapper) */
html.ip-dark-mode #mega-menu-wrap-menu-primario{
  background: #0b0f0e !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 0px 60px 0px 60px; /* mantiene il tuo shape */
}

/* Link top-level: forza testo leggibile + sfondo coerente */
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item > a.mega-menu-link{
  background: #0b0f0e !important;
  color: #e6e7e9 !important;
}

/* Hover top-level */
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item > a.mega-menu-link:hover{
  color: var(--primary) !important;
  text-decoration: underline !important;
}

/* Separatore tra voci: da nero a bianco soft */
html.ip-dark-mode li.mega-menu-item > a.mega-menu-link > .separatore{
  background-color: rgba(255,255,255,.12) !important;
}

/* Current / active: sostituisce gradient lime/giallo con glow dark */
html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item.mega-current_page_item,
html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item.mega-current-menu-parent,
html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item.mega-current-menu-item{
  background: radial-gradient(120% 140% at 15% 20%,
      rgba(195,249,38,.18) 0%,
      rgba(51,82,77,.40) 35%,
      #0b0f0e 100%) !important;
}

html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item.mega-current_page_item > a.mega-menu-link,
html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item.mega-current-menu-parent > a.mega-menu-link,
html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item.mega-current-menu-item > a.mega-menu-link{
  background: transparent !important;
  color: #e6e7e9 !important;
  text-decoration: none !important;
}

/* Submenu (flyout/megamenu): da #f1f1f1 a scuro */
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-flyout ul.mega-sub-menu,
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-megamenu > ul.mega-sub-menu{
  background: #11161d !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
}

/* Link submenu */
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link{
  background: transparent !important;
  color: #e6e7e9 !important;
}

/* Hover submenu */
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover{
  background: rgba(195,249,38,.08) !important;
  color: var(--primary) !important;
  text-decoration: none !important;
}

/* Titoli/colonne nel megamenu (nel CSS standard sono #555/#666) */
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-megamenu > ul.mega-sub-menu h4.mega-block-title,
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-megamenu > ul.mega-sub-menu .mega-menu-column-standard,
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link{
  color: #e6e7e9 !important;
}

/* Mobile/Tablet: il tema forza #f9f9f9 sul drawer → lo scuriamo */
@media only screen and (max-width: 1400px){
  html.ip-dark-mode #mega-menu-wrap-menu-primario .mega-menu-toggle{
    background: #0b0f0e !important;
    border: 1px solid rgba(255,255,255,.10) !important;
  }

  html.ip-dark-mode #mega-menu-wrap-menu-primario .mega-menu-toggle .mega-toggle-animated-inner,
  html.ip-dark-mode #mega-menu-wrap-menu-primario .mega-menu-toggle .mega-toggle-animated-inner::before,
  html.ip-dark-mode #mega-menu-wrap-menu-primario .mega-menu-toggle .mega-toggle-animated-inner::after{
    background-color: #e6e7e9 !important; /* hamburger chiaro */
  }

  html.ip-dark-mode #mega-menu-wrap-menu-primario .mega-menu-toggle + #mega-menu-menu-primario{
    background: #11161d !important;
    border: 1px solid rgba(255,255,255,.08) !important;
  }

  /* annulla i background #f9f9f9 che il tema applica a voci e current */
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link,
  html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item.mega-current_page_item,
  html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item.mega-current-menu-parent,
  html.ip-dark-mode .mega-sub-menu .mega-current-menu-item .mega-menu-link{
    background: transparent !important;
    color: #e6e7e9 !important;
  }

  html.ip-dark-mode #mega-menu-wrap-menu-primario .mega-menu-toggle ~ button.mega-close:before{
    color: #e6e7e9 !important;
  }
}

/* =========================================================
   FIX: ripristino bordi speciali first/last + gradient sugli attivi
   (da mettere DOPO il blocco dark del menu)
   ========================================================= */

/* 1) Di default i link NON devono avere background, così si vede il wrap arrotondato */
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item > a.mega-menu-link{
  background: transparent !important;
}

/* 2) Mantieni il testo leggibile comunque */
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item > a.mega-menu-link{
  color: #e6e7e9 !important;
}

/* 3) Stato ACTIVE/CURRENT: rimetti un gradient “dark-friendly” (non neon) */
html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item.mega-current_page_item,
html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item.mega-current-menu-parent,
html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item.mega-current-menu-item{
  background: radial-gradient(120% 140% at 15% 20%,
    rgba(195,249,38,.18) 0%,
    rgba(51,82,77,.40) 35%,
    #0b0f0e 100%) !important;
}

/* 4) Il gradient deve “stare sul LI”, quindi il link resta trasparente */
html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item.mega-current_page_item > a.mega-menu-link,
html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item.mega-current-menu-parent > a.mega-menu-link,
html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item.mega-current-menu-item > a.mega-menu-link{
  background: transparent !important;
  color: #e6e7e9 !important;
  text-decoration: none !important;
}

/* 5) Ripristina i bordi arrotondati speciali SOLO quando attivi */
html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item:first-child.mega-current-menu-parent,
html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item:first-child.mega-current_page_item{
  border-radius: 0 0 0 60px !important;
  overflow: hidden; /* importantissimo per “tagliare” il gradient */
}

html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item:last-child.mega-current_page_item{
  border-radius: 0 60px 0 0 !important;
  overflow: hidden;
	background:red;
}

#mega-menu-item-89 .separatore{
	display: none;
}

/* Ultima voce attiva: sostituisce il vecchio gradient lime/giallo */
html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item:last-child.mega-current_page_item{
  background: radial-gradient(120% 140% at 15% 20%,
    rgba(195,249,38,.18) 0%,
    rgba(51,82,77,.40) 35%,
    #0b0f0e 100%) !important;

  border-radius: 0 60px 0 0 !important;
  overflow: hidden;
}

/* assicura che il link non copra lo sfondo */
html.ip-dark-mode #mega-menu-menu-primario > .mega-menu-item:last-child.mega-current_page_item > a.mega-menu-link{
  background: transparent !important;
  color: #e6e7e9 !important;
}

/* =========================================================
   FIX HARD: ultima voce attiva - elimina gradient vecchio
   (incolla come ULTIMA cosa nel CSS dark)
   ========================================================= */

/* Copre sia html.ip-dark-mode che body.ip-dark-mode */
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item:last-child.mega-current_page_item,
body.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item:last-child.mega-current_page_item,
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item:last-child.mega-current-menu-item,
body.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item:last-child.mega-current-menu-item,
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item:last-child.mega-current-menu-parent,
body.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item:last-child.mega-current-menu-parent{
  background: #0b0f0e !important; /* oppure il tuo gradient dark */
  border-radius: 0 60px 0 0 !important;
  overflow: hidden !important;
}

/* Assicura che il LINK non abbia un background che “copre” */
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item:last-child.mega-current_page_item > a.mega-menu-link,
body.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item:last-child.mega-current_page_item > a.mega-menu-link,
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item:last-child.mega-current-menu-item > a.mega-menu-link,
body.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item:last-child.mega-current-menu-item > a.mega-menu-link,
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item:last-child.mega-current-menu-parent > a.mega-menu-link,
body.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item:last-child.mega-current-menu-parent > a.mega-menu-link{
  background: transparent !important;
  color: #e6e7e9 !important;
}


/* =========================================================
   HARD OVERRIDE: attivi sempre dark (prende anche l'ultima voce)
   ========================================================= */

/* qualsiasi item attivo (top level) */
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current_page_item,
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current-menu-item,
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current-menu-parent,
body.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current_page_item,
body.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current-menu-item,
body.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current-menu-parent{
  background: radial-gradient(120% 140% at 15% 20%,
  rgba(195,249,38,.18) 0%,
  rgba(51,82,77,.40) 35%,
  #0b0f0e 100%) !important;

}

/* link dentro l'attivo: resta trasparente */
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current_page_item > a.mega-menu-link,
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link,
body.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current_page_item > a.mega-menu-link,
body.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
body.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link{
  background: transparent !important;

}
/* Testo del link attivo = colore hover (primary) */
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current_page_item > a.mega-menu-link,
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link,
body.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current_page_item > a.mega-menu-link,
body.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
body.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link{
  color: var(--primary) !important;
}

html.ip-dark-mode .titolo-chi-siamo-start{
	background:#111816;
}

html.ip-dark-mode .largo-roadmap,html.ip-dark-mode  .largo-roadmap .testo-semplice, html.ip-dark-mode .content-metodi-di-pagamento,html.ip-dark-mode .content-metodi-di-pagamento .content-wrapper,html.ip-dark-mode .content-metodi-di-pagamento .content-wrapper .grid, html.ip-dark-mode .blocco-form-di-contatto .container-small{
	background:#111816 !important;
}
html.ip-dark-mode .blocco-form-di-contatto input, html.ip-dark-mode .blocco-form-di-contatto textarea, html.ip-dark-mode .blocco-form-di-contatto select{
	background:var(--text);
	color:var(--surface-1);
}

html.ip-dark-mode .content-stazione-futuro .content-wrapper,html.ip-dark-mode  .content-stazione-futuro .content-wrapper .container-small{
	background:transparent !important;
}

html.ip-dark-mode .content-stazione-futuro{
	background: linear-gradient(
  50deg,
  rgba(0, 173, 217, 0.22),
  rgba(71, 237, 15, 0.14)
);
}



html.ip-dark-mode .raggiunto .timeline-horizontal-event-content .titolo-evento,
body.ip-dark-mode .raggiunto .timeline-horizontal-event-content .titolo-evento{
  background: linear-gradient(
    90deg,
    rgba(195,249,38,.22),
    rgba(52,209,198,.18)
  ) !important;

  color: #e6e7e9 !important;
}

/*
html.ip-dark-mode .raggiunto .timeline-horizontal-event-content .titolo-evento,
body.ip-dark-mode .raggiunto .timeline-horizontal-event-content .titolo-evento,
body.ip-dark-mode .raggiunto .timeline-horizontal-event-content .titolo-evento span, body.ip-dark-mode .raggiunto .timeline-horizontal-event-content .titolo-evento h3{color: #018183 !important;}*/

/* =========================================================
   Gradient giallo/verde -> versione dark (soft, leggibile)
   ========================================================= */

/* Sostituzione generica dove hai: linear-gradient(50deg, #FFFF33, #50EE11) */

html.ip-dark-mode .gradiente-giallo-verde,
body.ip-dark-mode .gradiente-giallo-verde,body.ip-dark-mode .blocco-green .blocco-app,body.ip-dark-mode .mappa-destra, body.ip-dark-mode .largo-roadmap-mobile .timeline-mobile-event.raggiunto .titolo-evento,html.ip-dark-mode .timeline-vertical-event.raggiunto .titolo-evento, html.ip-dark-mode .ulteriore-info button .icona-road{
  background: linear-gradient(
    50deg,
    rgba(195,249,38,.22),
    rgba(52,209,198,.16)
  ) !important;
} 

html.ip-dark-mode .ulteriore-info button .icona-road {background: linear-gradient(45deg, #FFFF33, #50EE11);}
html.ip-dark-mode .timeline-vertical-event.raggiunto .timeline-vertical-marker, html.ip-dark-mode .timeline-horizontal-event.raggiunto .timeline-horizontal-marker{background:black !important;}

/*
html.ip-dark-mode .timeline-vertical-event.raggiunto .titolo-evento span,html.ip-dark-mode .timeline-vertical-event.raggiunto .titolo-evento h3,html.ip-dark-mode .blocco-green .blocco-app .blocco-app-testo h2,html.ip-dark-mode .blocco-green .blocco-app .blocco-app-testo p, html.ip-dark-mode .blocco-servizi-aggiuntivi h2, html.ip-dark-mode .blocco-servizi-aggiuntivi p, html.ip-dark-mode .mappa-destra{
	color:#018183 !important;
}*/


html.ip-dark-mode #wpsl-search-wrap input, body.ip-dark-mode #wpsl-search-wrap input, html.ip-dark-mode #wpsl-search-input, body.ip-dark-mode #wpsl-search-input{
	background: var(--testo);
	color: var(--surface-1);
}
html.ip-dark-mode .wpsl-info-window, body.ip-dark-mode .wpsl-info-window{
	color:var(--surface-1);
}

/* Hover foglia */

html.ip-dark-mode .foglia:hover,
body.ip-dark-mode .foglia:hover{
  background: linear-gradient(
    50deg,
    rgba(195,249,38,.22),
    rgba(52,209,198,.16)
  ) !important;

  
  color: var(--text) !important;
}
/*
html.ip-dark-mode .foglia:hover,
body.ip-dark-mode .foglia:hover,body.ip-dark-mode .foglia:hover h3{
	color: #018183 !important;
}
*/

html.ip-dark-mode .blocco-sinistra-brand .foglia-verde,
html.ip-dark-mode .sezione-numero-verde, body.ip-dark-mode .pin-tooltip{
  background:
    linear-gradient(50deg, rgba(195,249,38,.22), rgba(52,209,198,.16)),
    var(--surface-2) !important; 
}

/*
html.ip-dark-mode .blocco-sinistra-brand .foglia-verde p, html.ip-dark-mode .blocco-sinistra-brand .foglia-verde strong, html.ip-dark-mode .sezione-numero-verde strong{
	color: #018183 !important;
}*/

/*
html.ip-dark-mode .blocco-sinistra-brand .foglia-verde strong,
html.ip-dark-mode .sezione-numero-verde strong{color:white !important;}*/

html.ip-dark-mode #colonninaBlocco .container-small{
	background:transparent !important;
}

html.ip-dark-mode .blocco-istruzioni .blocco-app .img-blocco-app,html.ip-dark-mode .blocco-rfid .blocco-app .img-blocco-app, html.ip-darg-mode .close-tooltip{
	background: linear-gradient(
    50deg,
    rgba(195,249,38,.22),
    rgba(52,209,198,.16)
  ) !important;
}

html.ip-dark-mode .tariffa-card-colorata .promo{
	color: #585858 !important;
}

html.ip-dark-mode .tariffa-item .titolo-tariffa, html.ip-dark-mode .tariffa-item .sottotitolo_tariffa,
html.ip-dark-mode .badge-blocco-dettaglio-ricarica{
	color:  #585858 !important;
}
html.ip-dark-mode .tariffa-card-titolo h3{
	color:white !important;
}

/*
html.ip-dark-mode .hero-header-app,html.ip-dark-mode .appx .tariffa-item,html.ip-dark-mode .appx .badge-blocco-dettaglio-ricarica{background: linear-gradient(
  90deg,
  rgba(255, 240, 8, 0.22),
  rgba(255, 128, 0, 0.18)
);}
*/
/*
html.ip-dark-mode .hero-header-app h1, html.ip-dark-mode .hero-header-app p{
	color:#585858 !important;
}
*/
 html.ip-dark-mode .tariffa-card-bianca {background:var(--surface-1);}

html.ip-dark-mode .blocco-numero-verde{
	background:#111816 !important;
}

/* =========================================================
   WPSL MAP - Dark mode (SOLO colori/visibilità, layout invariato)
   Incolla in fondo al CSS dark
   ========================================================= */

/* Wrapper: stesso layout, solo bordi coerenti */
html.ip-dark-mode #wpsl-wrap{
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Sidebar + search + lista: elimina i #fff */
html.ip-dark-mode .wpsl-sidebar-container{
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-right: 1px solid var(--border) !important;
}

html.ip-dark-mode .wpsl-search,
html.ip-dark-mode #wpsl-search-wrap{
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* Input ricerca (il tuo CSS light lo borda già): in dark coerente */
html.ip-dark-mode #wpsl-search-wrap input{
  background: var(--surface-1) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Lista risultati */
html.ip-dark-mode #wpsl-result-list{
  background: var(--surface-2) !important;
}

/* Singoli item */
html.ip-dark-mode #wpsl-wrap #wpsl-result-list li{
  border-bottom: 1px solid var(--divider) !important;
}

html.ip-dark-mode .wpsl-store-location strong{
  color: var(--text) !important;
}

html.ip-dark-mode .wpsl-street{
  color: var(--text-muted) !important;
}

/* Link “Vedi indicazioni / Dettaglio” */
html.ip-dark-mode .wpsl-directions,
html.ip-dark-mode .wpsl-store-details{
  color: var(--text) !important;
  opacity: .9;
}

html.ip-dark-mode .wpsl-directions:hover,
html.ip-dark-mode .wpsl-store-details:hover{
  color: var(--primary) !important;
  opacity: 1;
}

/* Hover riga: sostituisce il gradient giallo/verde troppo bright */
html.ip-dark-mode #wpsl-wrap #wpsl-result-list li:hover{
  background: linear-gradient(
    50deg,
    rgba(195,249,38,.16),
    rgba(52,209,198,.10)
  ) !important;
}

html.ip-dark-mode #wpsl-wrap #wpsl-result-list li:hover .wpsl-store-location,
html.ip-dark-mode #wpsl-wrap #wpsl-result-list li:hover a{
  color: var(--text) !important;
}

/* Scrollbar dark */
html.ip-dark-mode #wpsl-stores::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06) !important;
}
html.ip-dark-mode #wpsl-stores::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.16) !important;
}
html.ip-dark-mode #wpsl-stores::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.26) !important;
}

/* Toggle sidebar */
html.ip-dark-mode .wpsl-sidebar-toggle{
  background: var(--surface-3) !important;
  color: var(--text) !important;
  border-left: 1px solid var(--border) !important;
}

/* Info window (popup mappa) */
html.ip-dark-mode .wpsl-info-window{
  color: var(--text) !important;
}
html.ip-dark-mode .wpsl-info-window .wpsl-directions{
  color: var(--primary) !important;
}

/* Input ricerca */
html.ip-dark-mode #wpsl-search-wrap input,
body.ip-dark-mode #wpsl-search-wrap input,
html.ip-dark-mode #wpsl-search-input,
body.ip-dark-mode #wpsl-search-input{
  background-color: var(--surface-1) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

html.ip-dark-mode #wpsl-search-wrap input::placeholder,
body.ip-dark-mode #wpsl-search-wrap input::placeholder{
  color: var(--text-subtle) !important;
}

/* Se hai l’icona cerca in PNG scura, in dark rischia di sparire.
   Soluzione: rendi l’input più “chiaro” o sostituisci icona (qui: leggero boost contrasto) */
html.ip-dark-mode #wpsl-search-input,
body.ip-dark-mode #wpsl-search-input{
  background-color: var(--surface-1) !important;
}

/* 3) Lista risultati */
html.ip-dark-mode #wpsl-result-list,
body.ip-dark-mode #wpsl-result-list{
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

html.ip-dark-mode #wpsl-wrap #wpsl-result-list li,
body.ip-dark-mode #wpsl-wrap #wpsl-result-list li{
  border-bottom: 1px solid var(--divider) !important;
}

/* Testi card store */
html.ip-dark-mode .wpsl-store-location,
body.ip-dark-mode .wpsl-store-location,
html.ip-dark-mode .wpsl-store-location strong,
body.ip-dark-mode .wpsl-store-location strong,
html.ip-dark-mode .wpsl-street,
body.ip-dark-mode .wpsl-street{
  color: var(--text) !important;
}

/* Link “Indicazioni / Dettagli” */
html.ip-dark-mode .wpsl-directions,
body.ip-dark-mode .wpsl-directions,
html.ip-dark-mode .wpsl-store-details,
body.ip-dark-mode .wpsl-store-details{
  color: var(--text-muted) !important;
}

/* Iconcine IMG nei link: spesso sono nere, le invertiamo */
html.ip-dark-mode .wpsl-directions img,
body.ip-dark-mode .wpsl-directions img,
html.ip-dark-mode .wpsl-store-details img,
body.ip-dark-mode .wpsl-store-details img{
  filter: brightness(0) invert(1);
  opacity: .9;
}

/* Hover list item: niente giallo/verde neon */
html.ip-dark-mode #wpsl-wrap #wpsl-result-list li:hover,
body.ip-dark-mode #wpsl-wrap #wpsl-result-list li:hover{
  background: linear-gradient(
    70deg,
    rgba(195,249,38,.14),
    rgba(51,82,77,.18)
  ) !important;
}

html.ip-dark-mode #wpsl-wrap #wpsl-result-list li:hover .wpsl-store-location,
body.ip-dark-mode #wpsl-wrap #wpsl-result-list li:hover .wpsl-store-location,
html.ip-dark-mode #wpsl-wrap #wpsl-result-list li:hover a,
body.ip-dark-mode #wpsl-wrap #wpsl-result-list li:hover a{
  color: var(--text) !important;
}

/* 4) Scrollbar lista */
html.ip-dark-mode #wpsl-stores::-webkit-scrollbar-track,
body.ip-dark-mode #wpsl-stores::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06) !important;
}

html.ip-dark-mode #wpsl-stores::-webkit-scrollbar-thumb,
body.ip-dark-mode #wpsl-stores::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.16) !important;
}

html.ip-dark-mode #wpsl-stores::-webkit-scrollbar-thumb:hover,
body.ip-dark-mode #wpsl-stores::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.26) !important;
}

/* 5) Toggle sidebar */
html.ip-dark-mode .wpsl-sidebar-toggle,
body.ip-dark-mode .wpsl-sidebar-toggle{
  background: var(--surface-3) !important;
  border-left: 1px solid var(--border) !important;
}

/* 6) Info window (popup sulla mappa) */
html.ip-dark-mode .wpsl-info-window,
body.ip-dark-mode .wpsl-info-window{
  color: var(--surface-1) !important;
}

/* Link dentro infowindow */
html.ip-dark-mode .wpsl-info-window a,
body.ip-dark-mode .wpsl-info-window a{
  color: var(--primary) !important;
}

/* 7) Pulsante back (se usato) */
html.ip-dark-mode .wpsl-back,
body.ip-dark-mode .wpsl-back{
  color: var(--primary) !important;
}


html.ip-dark-mode .largo-roadmap-mobile .ulteriore-info button .icona-road{
	background:linear-gradient(50deg, rgba(195, 249, 38, .22), rgba(52, 209, 198, .16)) !important;
}
@media (max-width: 480px) {
html.ip-dark-mode .blocco-numero-verde .titolo-numero-verde{
	background: #111816;
}
}
@media (max-width: 1400px) {
	html.ip-dark-mode .separatore, html.ip-dark-mode li.mega-menu-item > a.mega-menu-link > .separatore, .separatore {
		display:none;
	}
	html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-flyout ul.mega-sub-menu, html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-megamenu > ul.mega-sub-menu{border:none !important;}
	html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:active,html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus{
		background: transparent !important;
	}
}

/* =========================================================
   MAX MEGA MENU - Submenu current (DESKTOP) - Dark fix
   Incolla in fondo
   ========================================================= */

/* Solo desktop (quando il menu non è hamburger) */
@media (min-width: 1401px){

  /* 1) Background sul LI attivo del submenu */
  html.ip-dark-mode #mega-menu-wrap-menu-primario
  #mega-menu-menu-primario > li.mega-menu-item > ul.mega-sub-menu
  > li.mega-menu-item.mega-current-menu-item,
  html.ip-dark-mode #mega-menu-wrap-menu-primario
  #mega-menu-menu-primario > li.mega-menu-item > ul.mega-sub-menu
  > li.mega-menu-item.mega-current_page_item,
  html.ip-dark-mode #mega-menu-wrap-menu-primario
  #mega-menu-menu-primario > li.mega-menu-item > ul.mega-sub-menu
  > li.mega-menu-item.mega-current-menu-parent,
  html.ip-dark-mode #mega-menu-wrap-menu-primario
  #mega-menu-menu-primario > li.mega-menu-item > ul.mega-sub-menu
  > li.mega-menu-item.mega-current-menu-ancestor{
    background: radial-gradient(120% 140% at 15% 20%,
      rgba(195,249,38,.18) 0%,
      rgba(51,82,77,.40) 35%,
      #0b0f0e 100%) !important;
  }

  /* 2) Link dentro la voce attiva: testo come hover (primary) */
  html.ip-dark-mode #mega-menu-wrap-menu-primario
  #mega-menu-menu-primario > li.mega-menu-item > ul.mega-sub-menu
  > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario
  #mega-menu-menu-primario > li.mega-menu-item > ul.mega-sub-menu
  > li.mega-menu-item.mega-current_page_item > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario
  #mega-menu-menu-primario > li.mega-menu-item > ul.mega-sub-menu
  > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario
  #mega-menu-menu-primario > li.mega-menu-item > ul.mega-sub-menu
  > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link{
    background: transparent !important;
    color: var(--primary) !important;
    text-decoration: none !important;
  }
}

/* =========================================================
   MAX MEGA MENU - Mobile/Tablet (<1400px)
   Active = solo testo colorato, sfondo uguale alle altre voci
   ========================================================= */
@media (max-width: 1400px){

  /* 1) Qualsiasi LI attivo: niente background */
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  > li.mega-menu-item.mega-current_page_item,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  > li.mega-menu-item.mega-current-menu-item,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  > li.mega-menu-item.mega-current-menu-parent,

  /* Submenu: LI attivo */
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  ul.mega-sub-menu > li.mega-menu-item.mega-current_page_item,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-item,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-parent{
    background: transparent !important;
  }

  /* 2) Anche il link dentro l'attivo: niente background */
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  > li.mega-menu-item.mega-current_page_item > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link,

  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  ul.mega-sub-menu > li.mega-menu-item.mega-current_page_item > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link{
    background: transparent !important;
  }

  /* 3) Testo attivo: SOLO colore primary */
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  > li.mega-menu-item.mega-current_page_item > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link,

  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  ul.mega-sub-menu > li.mega-menu-item.mega-current_page_item > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link{
    color: var(--primary) !important;
    text-decoration: none !important;
  }
}

/* =========================================================
   MAX MEGA MENU - Mobile/Tablet (<1400px)
   - Nessun background su click/tap
   - Submenu stesso colore del drawer (no shadow / no box)
   ========================================================= */
@media (max-width: 1400px){

  
  /* Colore "drawer" unico */
  html.ip-dark-mode{
    --menu-drawer: #11161d;
    --menu-drawer-border: rgba(255,255,255,.08);
  }

  /* 1) Drawer: colore unico */
  html.ip-dark-mode #mega-menu-wrap-menu-primario .mega-menu-toggle + #mega-menu-menu-primario{
    background: var(--menu-drawer) !important;
    border: 1px solid var(--menu-drawer-border) !important;
    box-shadow: none !important;
  }

  /* 2) Tutte le voci (top + submenu) stesso sfondo, no shadow */
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link{
    background: transparent !important;
    box-shadow: none !important;
  }

  /* 3) CLICK/TAP: niente background (stati che spesso cambiano colore) */
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario a.mega-menu-link:active,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario a.mega-menu-link:focus,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario a.mega-menu-link:focus-visible{
    background: transparent !important;
    box-shadow: none !important;
  }

  /* 4) Quando un item è "aperto" in mobile (mega-toggle-on),
        non deve colorare lo sfondo */
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-toggle-on,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario ul.mega-sub-menu > li.mega-menu-item.mega-toggle-on,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario ul.mega-sub-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{
    background: transparent !important;
    box-shadow: none !important;
  }

  /* 5) Submenu: stesso colore del drawer, zero ombre, zero bordi “staccati” */
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario ul.mega-sub-menu{
    background: var(--menu-drawer) !important;
    border: 0 !important;              /* evita "card" dentro il drawer */
    box-shadow: none !important;
    margin-top: 0 !important;          /* elimina “stacco” visivo */
  }

  /* 6) Attivi su mobile: SOLO testo primary, nessun background (anche al tap) */
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  > li.mega-menu-item.mega-current_page_item > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  ul.mega-sub-menu > li.mega-menu-item.mega-current_page_item > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
  html.ip-dark-mode #mega-menu-wrap-menu-primario #mega-menu-menu-primario
  ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link{
    color: var(--primary) !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}
.mega-menu-item-1426 .separatore{
	display:none !important;
}
html.ip-dark-mode #my-agile-privacy-notification-content, html.ip-dark-mode #my-agile-privacy-notification-content a {
	background: #f3f3f3 !important;

}
html.ip-dark-mode .pin-tooltip{
	background:transparent !important;
}