/* ============================================================
   Sicurauto B2B — Tema visivo 2026 (refresh grafico)
   -------------------------------------------------------------
   Questo file NON tocca markup, ID dei controlli server, eventi
   postback o codice VB: è un foglio di stile aggiuntivo, caricato
   per ultimo in MasterPage.master, che sovrascrive lo skin
   esistente (bootstrap-min.css / auction.css / rewrite.css) con
   tipografia, colori, spaziature, ombre e arrotondamenti più
   moderni, restando sulla palette blu/rosso già in uso nel sito.
   Alcuni override usano !important perché diverse pagine hanno
   stili inline che altrimenti avrebbero precedenza.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --c-primary: #336699;
  --c-primary-dark: #2f5e8e;
  --c-primary-darker: #1e2832;
  --c-accent: #ff0022;
  --c-accent-dark: #ca0022;
  --c-bg-tint: #f5fafe;
  --c-bg-tint-2: #f1f7fb;
  --c-border: #dbe7f2;
  --c-text: #222222;
  --c-text-muted: #6b7280;
  --c-white: #ffffff;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(30,40,50,.08);
  --shadow-md: 0 8px 24px rgba(30,40,50,.10);
  --shadow-lg: 0 16px 40px rgba(30,40,50,.14);
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Base ---------- */
html, body{
  font-family: var(--font-main) !important;
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-main) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-primary-darker);
}
a{ transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.line{ background: var(--c-accent) !important; height:3px; width:60px; margin:14px auto; border:0; border-radius:2px; }

/* ---------- Banner di testata pagina (#page-heading, riusato su molte pagine) ---------- */
#page-heading{
  background: linear-gradient(135deg, var(--c-primary-darker) 0%, var(--c-primary) 100%) !important;
  padding: 48px 0 40px !important;
  margin-top: 0 !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
#page-heading h1{
  color: var(--c-white) !important;
  font-weight: 800 !important;
  font-size: 32px !important;
}
#page-heading .page-active a{
  color: rgba(255,255,255,.85) !important;
  font-weight: 500 !important;
}

/* ---------- Header / nav ---------- */
#sub-header{
  background: var(--c-primary-darker) !important;
  font-size: 13px;
}
#sub-header a, #sub-header li{ color: #cfe0ef !important; }
#sub-header a:hover{ color: var(--c-white) !important; }

.site-header .main-header{
  background: var(--c-white) !important;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--c-border);
}
.site-header .main-header.header-sticky{
  box-shadow: var(--shadow-md);
}
.main-navigation > ul > li > a{
  color: var(--c-primary-darker) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  /* 10px laterali (erano 14px): con la voce "Sedi e orari" (ottobre 2026) a 14px il menu andava
     a capo già a 1400px di larghezza. Sotto i ~1300px andava a capo anche prima (voce Contatti). */
  padding: 10px 10px !important;
  border-radius: var(--radius-sm);
}
.main-navigation > ul > li > a:hover,
.main-navigation > ul > li.active > a{
  color: var(--c-primary) !important;
  background: var(--c-bg-tint);
}
/* Bug: in index.aspx (e ovunque il menu NUOVO/USATO/ecc. sia affiancato dal campo "Chiave di
   ricerca"), il sottomenu a tendina restava coperto dal campo di ricerca e non si riusciva a
   cliccare sulle sue voci. Causa: il sottomenu è position:absolute ma senza z-index (auction.css
   non lo imposta), mentre il campo di ricerca sta nell'ultimo <li> dello stesso <ul> di
   navigazione (.last-nav, anch'esso posizionato per via del suo "top:26px") e, venendo dopo nel
   markup, vinceva l'ordine naturale di sovrapposizione e restava sopra. Un z-index esplicito sul
   sottomenu risolve la sovrapposizione. */
.main-navigation .sub-menu{
  z-index: 50;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--c-border) !important;
  overflow: hidden;
}
.main-navigation .sub-menu li a{
  padding: 9px 16px !important;
}
.main-navigation .sub-menu li a:hover{
  background: var(--c-bg-tint) !important;
  color: var(--c-primary) !important;
}

.search__input{
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
  border: 1px solid var(--c-border) !important;
  padding-left: 14px !important;
}
.input-group .btn, .input-group .btn-default{
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}

/* ---------- Bottoni ---------- */
/* auction.css dava a ".advanced-button" una larghezza/altezza fisse (160x40) pensate per un
   testo breve fisso: con un testo diverso o un'icona dentro (vedi sotto), il contenuto non
   risultava centrato ma ancorato a sinistra dentro quella scatola fissa. Qui il pulsante
   diventa un contenitore flessibile a misura di contenuto (width/height:auto), con testo e
   icona sempre centrati sia in orizzontale che in verticale, qualunque sia la lunghezza del
   testo - niente più scatole a dimensione fissa che "tagliano" il centraggio. Forma a pillola
   (coerente col resto del tema 2026: pulsante "Cerca" della sidebar, badge prezzo, icone
   PDF/HTML) al posto dei vecchi angoli appena smussati. */
.advanced-button,
a.advanced-button,
.contact-form .advanced-button,
input[type="submit"],
.btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
  text-align: center;
  background: var(--c-primary) !important;
  color: var(--c-white) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 13px 28px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
  cursor: pointer;
}
.advanced-button:hover, a.advanced-button:hover, input[type="submit"]:hover, .btn-primary:hover{
  background: var(--c-primary-dark) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.advanced-button:active, a.advanced-button:active, input[type="submit"]:active, .btn-primary:active{
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.advanced-button:focus-visible, a.advanced-button:focus-visible, input[type="submit"]:focus-visible, .btn-primary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(51,102,153,.35);
}
/* Il testo è dentro un <a> (o, con un LinkButton come "Invia", è il link stesso) con un
   margin-left/padding proprio lasciato da auction.css, pensato per il vecchio box a larghezza
   fissa: anche azzerando le dimensioni fisse del pulsante, questo margine residuo lo avrebbe
   comunque spinto fuori centro da un lato. Lo azzeriamo così il centraggio vale anche per il
   testo al suo interno, non solo per la scatola che lo contiene. */
.advanced-button a,
.advanced-button > a{
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
}
/* Icona dentro un ".advanced-button" (es. il pulsante "Invia" del form "Richiedi informazioni",
   unico punto del sito che usa davvero un'icona qui dentro): auction.css dava a QUALSIASI <i>
   dentro ".advanced-button" un riquadro fisso 40x40 rosso acceso con float:right, pensato per un
   vecchio layout a due blocchi separati - oggi si vede come un secondo pulsante rosso incollato
   a fianco del testo invece di un'unica icona dentro allo stesso pulsante blu. La rendiamo
   un'icona inline delle dimensioni del testo, con lo stesso colore (bianco, ereditato), per un
   pulsante unico e coerente invece di due blocchi colorati diversi affiancati. */
.advanced-button i{
  float: none !important;
  width: auto !important;
  height: auto !important;
  line-height: inherit !important;
  background: none !important;
  display: inline-block;
  margin-left: 8px;
  font-size: 13px;
  vertical-align: middle;
}
/* Login: pulsante principale in rosso accento (coerente con i CTA storici del sito) */
a[id*="btLogin"]{
  background: var(--c-accent) !important;
}
a[id*="btLogin"]:hover{ background: var(--c-accent-dark) !important; }
a[id*="btRecuperaPwd"], a[id*="btRichiediNuovaPwd"]{
  color: var(--c-primary) !important;
}

/* ---------- Form / card ---------- */
.contact-form{
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 32px !important;
}
.contact-form input.name,
.contact-form textarea,
input.name{
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--c-bg-tint) !important;
  padding: 12px 14px !important;
  width: 100%;
  height: auto !important;
  box-sizing: border-box;
}
.contact-form input.name:focus, input.name:focus{
  outline: none;
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px rgba(51,102,153,.15);
  background: var(--c-white) !important;
}
.linkRegistra{
  color: var(--c-primary) !important;
  font-weight: 600;
}

/* ---------- Vetrina veicoli / card marca (home, dettaglio) ---------- */
.brand-container{
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
  overflow: hidden;
}
.brand-container:hover{
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
/* Il pallino rosso con il conteggio veicoli (rewrite.css: position:absolute; top:0; right:0)
   era ancorato esattamente nell'angolo del box marca; ora che .brand-container ha angoli
   arrotondati + overflow:hidden, quell'angolo taglia il cerchio. Lo spostiamo più all'interno. */
.brand-header .tot-brand{
  background: var(--c-accent) !important;
  border-radius: 999px !important;
  top: 10px !important;
  right: 10px !important;
  /* rewrite.css, tra 992px e 1499px di larghezza finestra, ridefinisce .tot-brand con
     left:0; bottom:0 (lasciando right/top:auto). Qui sopra fissiamo top/right, quindi in
     quella fascia l'elemento si ritroverebbe con TUTTI e 4 gli offset non-auto: un
     position:absolute con sia left che right (o sia top che bottom) impostati smette di
     "abbracciare" il contenuto e viene stirato a riempire lo spazio tra i due bordi -
     è questo che gonfiava il pallino rosso fino a coprire quasi tutta la card. Forziamo
     quindi left/bottom sempre ad auto, qui, per restare sempre un cerchietto a misura
     di contenuto, qualunque sia la larghezza del browser. */
  left: auto !important;
  bottom: auto !important;
  min-width: 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.brand-title h2{
  color: var(--c-primary-darker) !important;
}
.autobrand-txt ul li a{
  color: var(--c-text) !important;
}
.autobrand-txt ul li a:hover{
  color: var(--c-primary) !important;
}
.background-cover{
  background: linear-gradient(135deg, var(--c-bg-tint) 0%, var(--c-white) 100%);
}

/* ---------- Tabelle / griglie (CRM, gestione utenti, scadenzario) ---------- */
table.table, .gridview, table[id*="grid" i]{
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
table.table th, .gridview th, table[id*="grid" i] th{
  background: var(--c-primary-darker) !important;
  color: var(--c-white) !important;
  font-weight: 600 !important;
  text-align: left;
  padding: 12px !important;
}
table.table td, .gridview td, table[id*="grid" i] td{
  padding: 10px 12px !important;
  border-top: 1px solid var(--c-border) !important;
}
table.table tr:nth-child(even) td, .gridview tr:nth-child(even) td{
  background: var(--c-bg-tint);
}
table.table tr:hover td, .gridview tr:hover td{
  background: var(--c-bg-tint-2);
}

/* ---------- Footer: più ordine (icone allineate con flexbox invece dei vecchi margini negativi
   "a occhio", spaziatura coerente tra le voci) e più impatto visivo (titoli con accento, social
   come pulsanti tondi coerenti col resto del sito, sotto-footer con separatori tra i link). ---------- */
footer, #sub-footer{
  /* Sfondo scuro ma non "nero piatto": un leggero gradiente blu (stessa coppia di colori
     usata per l'header di pagina, #page-heading/.headerP), più caldo e riconoscibile del
     grigio-antracite molto scuro (quasi nero) usato prima. */
  background: linear-gradient(160deg, var(--c-primary-darker) 0%, var(--c-primary) 130%) !important;
  color: #cfe0ef !important;
  /* Bug: in dettaglio.aspx il pannello filtri (#sidebar) diventa "position:fixed" da 1200px di
     larghezza in su (rewrite.css); quando la ricerca non trova veicoli la colonna risultati è
     molto corta e questo footer (normale, in fondo al documento) risale fino a sovrapporsi
     visivamente al pannello fisso, arrivando a intercettare i click sul pulsante "Cerca" anche
     se un elemento fixed dovrebbe normalmente dipingersi sopra uno statico. Per non dipendere da
     questa regola implicita (ed eliminare qualunque ambiguità dovuta ad altre classi/animazioni
     che potrebbero dare al footer un proprio contesto di stacking), gli assegniamo qui uno
     z-index esplicito e basso, abbinato a quello più alto dato a #sidebar più sotto in questo
     file - così il confronto tra i due non è più implicito. */
  position: relative;
  z-index: 1;
}
footer{
  /* auction.css impostava "padding: 10px 0 70px 0": quei 70px di spazio vuoto in fondo, prima
     del sotto-footer, erano la causa principale dell'altezza eccessiva. Riduciamo sia sopra
     che sotto per una fascia più compatta. */
  padding: 28px 0 20px !important;
  /* Filo di accento in cima: stacca visivamente il footer dal contenuto e richiama il rosso
     usato per prezzi/CTA nel resto del sito. */
  border-top: 3px solid var(--c-accent);
}
footer .about-us h4, footer h4{
  color: var(--c-white) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .04em;
  position: relative;
  padding-bottom: 8px;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}
/* Piccola barra d'accento sotto ogni titolo di colonna (stesso linguaggio grafico di ".line"
   già usato altrove), per dare più struttura alle 3 colonne del footer. */
footer .about-us h4::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--c-accent);
  border-radius: 2px;
}
footer .about-us > p{
  /* auction.css dava margin-top:30px alla p sotto il logo: altra fonte di spazio vuoto in
     eccesso, ridotta qui insieme al resto della fascia. */
  color: #a9c1d6;
  font-size: 12.5px;
  line-height: 1.55;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}
footer a, #sub-footer a{
  color: #cfe0ef !important;
}
footer a:hover, #sub-footer a:hover{
  color: var(--c-white) !important;
}
/* Voci di contatto (indirizzo/telefono/mail): erano allineate con un margin-top negativo "a
   occhio" sull'icona (vedi .icoFooter più sotto); con flexbox l'allineamento icona+testo è
   sempre corretto qualunque sia il contenuto, e lo spazio tra icona e testo è costante (gap)
   invece di dipendere dal solo "&nbsp;" nel markup. */
footer .about-us ul li{
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-top: 9px !important;
}
footer .about-us ul li a{
  color: #cfe0ef !important;
}
footer .icoFooter, footer .icoFooterBig{
  opacity: .9;
}
/* Icone di contatto: da riquadro con bordo secco a piccolo "chip" arrotondato più morbido,
   coerente con gli arrotondamenti usati nel resto del tema. Annulliamo il margin-top negativo
   originale (pensato per un layout non-flex): con align-items:center sul genitore non serve più. */
footer .icoFooter{
  width: 26px !important;
  height: 26px !important;
  margin-top: 0 !important;
  padding: 5px !important;
  border-radius: var(--radius-sm);
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.06);
  object-fit: contain;
  flex: 0 0 auto;
}
/* Social: da bottoni quadrati 64x64 (auction.css/rewrite.css) a pulsanti tondi più piccoli,
   in stile con badge/chip del resto del sito, con un piccolo sollevamento al passaggio del
   mouse invece del semplice bordo secco originale. */
#social-footer .right-content ul{
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 6px 0 0;
  list-style: none;
}
#social-footer .right-content ul li{
  margin: 0 !important;
}
#social-footer .right-content ul li a{
  width: 42px !important;
  height: 42px !important;
  line-height: normal !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16);
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
#social-footer .right-content ul li a:hover{
  background: var(--c-accent) !important;
  border-color: var(--c-accent);
  transform: translateY(-2px);
}
/* L'icona dentro il pulsante tondo era centrata con un margin-top negativo (-25px) pensato per
   il vecchio bottone quadrato a line-height:64px: con flexbox sul pulsante va azzerato, altrimenti
   l'icona risulterebbe spostata in alto fuori dal cerchio. */
#social-footer .icoFooterBig{
  width: 18px !important;
  height: auto !important;
  margin: 0 !important;
  border: none !important;
  opacity: 1;
}
/* Sotto-footer (copyright + link legali): più respiro verticale e un separatore verticale tra
   i link invece di farli semplicemente scorrere appiccicati. */
#sub-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12.5px;
  padding: 14px 0;
}
/* Logo un po' più piccolo: contribuisce anch'esso a una fascia footer più compatta. */
#logoFooter{
  max-height: 56px !important;
}
#sub-footer ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
}
#sub-footer ul li{
  margin-left: 0 !important;
  position: relative;
}
#sub-footer ul li:not(:last-child)::after{
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 11px;
  background: rgba(255,255,255,.2);
}
@media (max-width: 991px){
  #sub-footer ul{ justify-content: center; }
}

/* ---------- Alert / messaggi di sistema ---------- */
.alert-danger, .alert-info{
  border-radius: var(--radius-sm) !important;
  padding: 10px 14px !important;
  display:inline-block;
}

/* ============================================================
   AGGIORNAMENTO — fix overlap header + innovazioni elenco/schede
   ============================================================ */

/* ---------- Fix: header fisso sovrapponeva i primi blocchi in home ---------- */
/* .site-header è position:fixed con top:42px + height:110px (auction.css);
   lo spazio riservato dal tema originale (.slider{margin-top:110px}) non
   teneva conto dei 42px iniziali della barra social, sovrapponendo così
   le prime card marca in home. */
.slider{
  margin-top: 156px !important;
}

/* ---------- Banner di testata anche su dettaglio/scheda veicolo (classe .headerP) ---------- */
.headerP{
  background: linear-gradient(135deg, var(--c-primary-darker) 0%, var(--c-primary) 100%) !important;
  /* Padding superiore aumentato (era 40px): oltre al font-size del titolo (vedi sotto), le voci
     del menu sono "posizionate" via CSS con un box invisibile alto 90px e, per le regole di
     sovrapposizione del browser, vengono disegnate sopra qualunque contenuto normale che si trovi
     nella stessa zona dello schermo - stesso meccanismo già risolto per .headerPnewsL. Spingendo
     il banner più in basso il titolo esce con margine di sicurezza da quella zona, indipendentemente
     dall'altezza esatta del menu nella pagina compilata. */
  padding: 64px 0 34px !important;
  margin-top: 0 !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.headerP h1{
  color: var(--c-white) !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  line-height: 1.3 !important;
}
/* Bug: il titolo (es. "KM 0", marca veicolo) è un <asp:LinkButton> dentro l'h1 con uno stile
   inline storico "font-size:1.2em". Senza una dimensione esplicita sull'h1 stesso, il browser
   gli assegnava la dimensione di default (~36px), quindi il link interno diventava 1.2× quella
   (~43px) con un'interlinea proporzionalmente più alta del box dell'h1 che lo contiene: il testo
   "sforava" verso l'alto, uscendo dall'area colorata del banner e finendo per metà invisibile
   (bianco su bianco) sopra lo sfondo della pagina. Annullando qui l'1.2em il link eredita la
   stessa dimensione dell'h1 (ora fissa) e il testo resta interamente dentro al banner. */
.headerP h1 a{ font-size: inherit !important; }
.headerP img[alt="linea"]{ display:none; }
.headerP .page-active > div{
  background: rgba(0,0,0,.25) !important;
  border-radius: 999px !important;
}
.headerP .btn-header{
  color: rgba(255,255,255,.9) !important;
  font-weight: 600 !important;
}
.headerP .btn-header:hover{ color: var(--c-white) !important; }

/* ---------- Banner di testata "gestionale" (classe .headerPnewsL: crmScadenziario, crmClienti,
   GestioneUtenti, GestioneNewsletter, GestioneNewsletterAuto, NEWSpromo, Unsubscribe,
   unsubscribecomplete) ---------- Terza variante di banner-titolo oltre a #page-heading e
   .headerP: era rimasta con lo sfondo originale (background-image: header-bg.png, grigio scuro,
   definito in rewrite.css) e senza alcuna regola dedicata per l'<h1> al suo interno, che quindi
   ereditava il colore scuro generico h1{color:var(--c-primary-darker)} (quasi nero), illeggibile
   sopra uno sfondo già scuro. La allineiamo allo stesso gradiente blu e testo bianco usati da
   #page-heading e .headerP. */
.headerPnewsL{
  background: linear-gradient(135deg, var(--c-primary-darker) 0%, var(--c-primary) 100%) !important;
  height: auto !important;
  padding: 100px 0 32px !important;
  margin-top: 0 !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* Bug (causa 1, già nota): le voci della barra di navigazione (nav.main-navigation li) hanno
   "position:relative" e un box alto 90px (pensato per contenere i menu a tendina), che si estende
   visivamente ben oltre il testo del menu stesso. Essendo "posizionati" (position:relative), per le
   regole di stacking CSS questi elementi vengono dipinti SOPRA qualunque contenuto normale
   successivo nella pagina che si trovi nella stessa area, anche se l'elemento normale (qui il
   nostro banner) viene dopo nel markup.
   Bug (causa 2, più rilevante, trovata dopo la segnalazione su GestioneNewsletter): ".site-header"
   (la barra bianca con logo e menu) in auction.css e' "position:fixed; top:42px; height:110px;
   z-index:899" - resta sempre sovrapposta alla pagina (non scorre, non "spinge giu'" il contenuto
   normale), occupando stabilmente la fascia tra 42px e 152px dall'alto dello schermo. Un padding-top
   di 60px lasciava il titolo con appena ~15px di margine da quella fascia nei test: un margine
   cosi' risicato puo' azzerarsi con variazioni minime (font reali del browser, item di menu che si
   dispongono leggermente diversi) e far sparire il titolo sotto la barra bianca, come successo su
   GestioneNewsletter. Portiamo il padding-top a 100px per avere un margine di sicurezza reale
   (lo stesso approccio gia' usato per la home: ".slider{margin-top:156px}"). */
.headerPnewsL h1{
  color: var(--c-white) !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  margin: 0 !important;
}
.headerPnewsL img[alt="linea"]{ display: none; }

/* ---------- Barra "N risultati trovati" + Ordina per (dettaglio.aspx, sopra l'elenco veicoli) ----------
   Originale (.pre-featured, auction.css): semplice fascia azzurrina piatta, con h4 e dropdown
   allineati a float (h4 float:left con margin-top:25px "a occhio"; .right-content text-align:right
   con la dropdown inline-block) - fragile a contenuti di altezza diversa e visivamente datata
   (dropdown nativa con bordo secco, frecetta di sistema, testo tutto maiuscolo). La trasformiamo
   in una card coerente col resto del tema (bordo, angoli arrotondati, ombra) con layout flex per
   un centraggio verticale sempre corretto, e una select "custom" (frecciuta SVG in stile Lucide,
   stessa famiglia delle icone già usate nelle chip di ElencoAuto.ascx, invece della freccia nativa
   del browser) con stato hover/focus coerente con gli altri input del tema (.contact-form input.name). */
.pre-featured{
  background: var(--c-white) !important;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 16px 20px !important;
}
.pre-featured h4{
  float: none !important;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0;
  color: var(--c-primary-darker) !important;
  /* Stesso linguaggio grafico del titoletto rosso usato in .more-info h4 (scheda veicolo) */
  border-left: 4px solid var(--c-accent);
  padding-left: 10px;
}
.pre-featured .right-content{
  text-align: left !important;
}
.pre-featured .right-content .input-select{
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text-muted);
  /* L'etichetta "Ordina per:" è testo libero (non in uno <span>) subito prima della select
     nel markup: senza nowrap, in spazi stretti (mobile) andava a capo su due righe. */
  white-space: nowrap;
}
.pre-featured .right-content .input-select select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  width: auto;
  min-width: 190px;
  height: 38px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-sm) !important;
  /* Freccia SVG inline (chevron-down, set Lucide) al posto di quella nativa del browser,
     coerente con le icone outline già usate altrove nel tema */
  background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23336699' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
  padding: 5px 34px 5px 14px !important;
  font-family: var(--font-main);
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  color: var(--c-primary-darker) !important;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pre-featured .right-content .input-select select:hover{
  border-color: var(--c-primary) !important;
}
.pre-featured .right-content .input-select select:focus{
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px rgba(51,102,153,.15);
}
.pre-featured .right-content .input-select select option{
  font-size: 12px;
  color: var(--c-text) !important;
}
@media (max-width: 767px){
  .pre-featured{
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px !important;
  }
  .pre-featured .right-content .input-select select{
    width: 100%;
    min-width: 0;
  }
}

/* ---------- Sidebar filtri ricerca "Definisci la ricerca" (dettaglio.aspx, #sidebar) ----------
   Pannello originale (auction.css/rewrite.css): blu in tinta unica piatta, intestazione e titoli
   di sezione poco in risalto, slider jQuery UI con handle mai ristilizzato (quadratino grigio di
   default del tema jQuery UI), campi input/select "piatti" blu-su-blu. Il pulsante "Cerca" in
   particolare risultava quasi invisibile: la regola generica ".advanced-button{background:
   var(--c-primary) !important}" più sopra in questo file (pensata per i pulsanti CTA del sito)
   gli dava lo STESSO blu di sfondo del pannello, senza alcun contrasto. Qui diamo profondità al
   contenitore (gradiente + ombra), puliamo tipografia/spaziatura delle sezioni, ridisegniamo
   slider e handle, diamo ai campi uno stile "vetro" semi-trasparente coerente invece di blu
   piatto, e rendiamo "Cerca" un CTA rosso pieno e arrotondato, ben visibile e coerente con gli
   altri pulsanti del sito. */
#sidebar .sidebar-content{
  background: linear-gradient(165deg, var(--c-primary-darker) 0%, var(--c-primary) 140%) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
/* z-index esplicito abbinato a quello del footer (vedi nota su "footer, #sub-footer" più sopra
   in questo file): #sidebar diventa "position:fixed" solo da 1200px in su (rewrite.css), quindi
   lo z-index ha effetto solo in quella stessa fascia - sotto i 1200px #sidebar è statico, in
   flusso con il resto della pagina, e il problema non si presenta. Valore scelto ben sotto
   l'header fisso del sito (.site-header, z-index:899 in auction.css) per non interferire con
   quello, ma sopra il contenuto normale di pagina (incluso il footer, qui portato a 1). */
@media (min-width: 1200px){
  #sidebar{
    z-index: 60;
  }
}
#sidebar .sidebar-content .head-side-bar{
  background: rgba(0,0,0,.15) !important;
  padding: 18px 0 !important;
}
#sidebar .sidebar-content .head-side-bar h4{
  font-size: 13px !important;
  letter-spacing: .04em;
}
#sidebar .sidebar-content .search-form{
  padding: 24px 22px !important;
}
/* Titoletti di sezione ("Prezzo" / "Caratteristiche"): più leggeri (bianco semi-trasparente
   invece del blu-chiaro poco leggibile su sfondo blu) con una sottile riga divisoria sotto,
   invece del semplice margine "a occhio" usato prima per separare le sezioni. */
#sidebar .sidebar-content .search-form .filter-title{
  color: rgba(255,255,255,.65) !important;
  font-size: 11.5px !important;
  letter-spacing: .08em;
  font-weight: 700 !important;
  margin: 0 0 14px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
#sidebar .sidebar-content .search-form .slider-range + .filter-title{
  margin-top: 28px !important;
}

/* Prezzo: il campo di sola lettura che mostra "€X - €Y" diventa una pillola bianca centrata
   (badge), invece di semplice testo bianco piatto sul fondo blu */
#sidebar .sidebar-content .search-form .slider-range{
  margin-bottom: 8px !important;
  padding: 0 2px;
}
#sidebar .sidebar-content .search-form .slider-range p{
  text-align: center;
  margin: 0 0 18px;
}
#sidebar .sidebar-content .search-form .slider-range input{
  background: var(--c-white) !important;
  color: var(--c-primary-darker) !important;
  display: inline-block !important;
  border-radius: 999px !important;
  padding: 6px 18px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  box-shadow: var(--shadow-sm);
  text-align: center;
  width: auto;
  max-width: 100%;
}
/* Track: da barra sottile "a spigolo" a pillola più spessa con un leggero incavo (profondità) */
#sidebar .sidebar-content .search-form .slider-range .ui-slider-horizontal{
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.25) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
  margin: 0 8px;
}
#sidebar .sidebar-content .search-form .slider-range .ui-slider-horizontal .ui-slider-range{
  background: var(--c-accent) !important;
  border-radius: 999px !important;
}
/* Handle: da quadratino grigio (tema jQuery UI di default, mai personalizzato finora) a
   pallino bianco con bordo rosso d'accento, in stile con gli altri controlli "a pillola" */
#sidebar .sidebar-content .search-form .slider-range .ui-slider-handle{
  width: 18px !important;
  height: 18px !important;
  top: -6px !important;
  margin-left: -9px;
  background: var(--c-white) !important;
  border: 3px solid var(--c-accent) !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: transform .15s ease, box-shadow .15s ease;
}
#sidebar .sidebar-content .search-form .slider-range .ui-slider-handle:hover,
#sidebar .sidebar-content .search-form .slider-range .ui-slider-handle:focus{
  transform: scale(1.15);
  box-shadow: var(--shadow-md);
  outline: none;
}

/* Campo "ID veicolo" + dropdown: da blu-su-blu piatto a stile "vetro" semi-trasparente
   (sfondo chiaro trasparente invece dello stesso blu del pannello), pillola arrotondata come
   il resto dei controlli del tema, stato focus ben visibile */
#sidebar .sidebar-content .search-form #id_auto,
#sidebar .sidebar-content .search-form .select select{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 999px !important;
  color: var(--c-white) !important;
  padding: 10px 16px !important;
  font-family: var(--font-main) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  transition: background .15s ease, border-color .15s ease;
}
#sidebar .sidebar-content .search-form input[type="text"]#id_auto::-webkit-input-placeholder{
  color: rgba(255,255,255,.55) !important;
}
#sidebar .sidebar-content .search-form #id_auto:focus,
#sidebar .sidebar-content .search-form .select select:focus{
  background: rgba(255,255,255,.16) !important;
  border-color: var(--c-white) !important;
  outline: none;
}
#sidebar .sidebar-content .search-form .select{
  margin-bottom: 12px !important;
}
#sidebar .sidebar-content .search-form .select select{
  margin-bottom: 0 !important;
}
#sidebar .sidebar-content .search-form .select:after{
  color: rgba(255,255,255,.7) !important;
}
/* BUG: la select chiusa ha testo bianco (sopra) per leggersi sullo sfondo "vetro" scuro, ma il
   menu A TENDINA APERTO è un popup nativo del browser con sfondo bianco/chiaro, indipendente
   dallo sfondo della select - il colore del testo però SI eredita. Risultato: opzioni presenti
   (Tipologia/Marca/Modello/ecc. sono popolate regolarmente dal code-behind) ma bianco-su-bianco,
   quindi invisibili/non selezionabili aprendo il menu. Forziamo qui un colore leggibile per le
   singole <option>, indipendente dal colore della select stessa. */
#sidebar .sidebar-content .search-form .select select option{
  color: var(--c-text) !important;
  background: var(--c-white) !important;
}

/* Pulsante "Cerca": pieno, arrotondato, rosso d'accento ben visibile - prima si "mimetizzava"
   nello stesso blu del pannello (vedi nota a inizio sezione) */
#sidebar .sidebar-content .search-form .advanced-button{
  background: var(--c-accent) !important;
  width: 100% !important;
  height: auto !important;
  line-height: normal !important;
  padding: 13px 10px !important;
  border-radius: 999px !important;
  text-align: center;
  box-shadow: var(--shadow-sm);
  margin-top: 6px;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
#sidebar .sidebar-content .search-form .advanced-button:hover{
  background: var(--c-accent-dark) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
#sidebar .sidebar-content .search-form .advanced-button a{
  margin: 0 !important;
  color: var(--c-white) !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-decoration: none !important;
}

/* ---------- Elenco veicoli: card più moderne (ElencoAuto.ascx) ---------- */
#listing-cars table{ border-collapse: separate; border-spacing: 0 20px; width:100%; }
.featured-item{
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  padding: 20px !important;
  transition: box-shadow .2s ease, transform .2s ease;
  cursor: pointer;
}
.featured-item:hover{
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
/* Specifiche (id, alimentazione, anno, tipo, km) come chip orizzontali invece di lista verticale.
   Il box prezzo (in origine l'ultimo <li>, ancorato in absolute in alto a destra) è stato spostato
   nel markup accanto al titolo (vedi .price-badge più sotto): qui restano solo le 5 info-chip.
   Le icone <img> originali sono state sostituite con icone Font Awesome (font-awesome.min.css,
   collegato in MasterPage.master) dentro un pallino colorato — un colore diverso per tipo di
   informazione. */
/* flex-wrap:wrap continuava ad andare a capo con l'ultima chip (km) anche quando nello screenshot
   restava spazio libero visibile a destra — segno che lo spazio "libero" non era in realtà
   disponibile al flex layout in quel momento (comprimibile per contenuti dinamici più lunghi).
   Invece di indovinare quanto spazio c'è, forziamo tutte le 5 chip su UNA riga con
   flex-wrap:nowrap e le lasciamo restringersi (con testo troncato "..." solo nel caso estremo
   in cui davvero non ci stia tutto) invece di andare a capo. */
.car-info > ul{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px;
  border: none !important;
  overflow: hidden;
}
.car-info > ul > li{
  height: 40px !important;
  margin-bottom: 2px !important;
  line-height: 1.1 !important;
  background: var(--c-white);
  border: 1px solid var(--c-border) !important;
  border-radius: 999px;
  padding: 2px 6px 2px 8px !important;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--c-primary-darker);
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(30,40,50,.07);
  transition: box-shadow .15s ease, transform .15s ease;
  /* flex-grow resta 0 per tutte (mai "1 1 60px": con flex-grow:1 una chip si allarga SEMPRE
     per occupare lo spazio libero della riga anche a testo corto, diventando un blob enorme e
     vuoto - bug già preso e risolto in passato). flex-shrink invece è 1 per TUTTE le chip (non
     solo "alimentazione" come prima): se la riga è troppo stretta per stare su una sola linea,
     ogni chip si restringe un po' in proporzione alla propria larghezza naturale (comportamento
     di default del flexbox), col proprio testo troncato "..." - invece di scaricare tutto lo
     schiacciamento su una sola chip (che arrivava a sparire del tutto) o tagliare bruscamente
     l'ultima al bordo del contenitore (overflow:hidden su .car-info > ul, qui sopra). */
  flex: 0 1 auto;
  min-width: 34px;
  overflow: hidden;
}
.car-info > ul > li:hover{
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
/* "alimentazione" (es. "MILD HYBRID BENZ. / EL.") è di gran lunga il testo più lungo delle 5
   chip: le diamo un tetto massimo più alto (non deve mai superare 230px) ma anche un minimo
   proprio un po' più largo delle altre, così anche nello scenario di massima strettezza resta
   leggibile più di poche lettere. */
.car-info > ul > li.chip-alimentazione{
  min-width: 64px;
  max-width: 230px;
}
.car-info > ul > li span{
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.1;
}
/* Le Label ASP.NET (rese come <span>) hanno nel markup uno style="margin-top:5px" inline,
   pensato per una riga ad altezza automatica: ora che la riga ha un'altezza fissa (40px) e la
   pillola centra il contenuto con align-items:center, quel margine asimmetrico spingeva testo
   e icona verso il basso invece di lasciarli centrati. Lo azzeriamo qui (in foglio di stile,
   con !important, così vince sullo style inline che non ha !important) senza toccare il
   markup .ascx. */
.car-info > ul > li span{
  margin: 0 !important;
}
/* Icone: non più Font Awesome (glifi da font, versione 2015, con vari problemi incontrati
   lungo il percorso: spessore incoerente, un glifo addirittura non mappato) ma SVG inline in
   stile "outline" sottile (set Lucide, licenza ISC) - più moderne, nitide a qualunque
   risoluzione/zoom, e senza dipendere da un font esterno. Il colore arriva da CSS tramite
   stroke="currentColor" nel markup + "color" qui sotto (lo spessore del tratto invece è nel
   markup .ascx stesso, stroke-width="1.5": più sottile del valore di default "2" di Lucide,
   che a dimensioni piccole risultava troppo "pesante"/pieno, specie sull'icona auto).
   Dimensione in "em" (relativa al font-size del testo del chip, 10.5px): 1.2em = 12.6px, più
   alta del testo adiacente ma senza esagerare - a 1.5em (15.75px) la somma di tutte e 5 le
   icone più ingombranti aveva fatto sforare la riga (che sta tutta su una linea, senza andare
   a capo): la chip "alimentazione" veniva schiacciata fino a far sparire il testo e l'ultima
   chip (km) restava tagliata dal bordo del contenitore. Nessun rischio per l'altezza della
   riga in ogni caso: il pallino (.car-info > ul > li) ha un'altezza fissa (40px !important,
   non più "auto"), quindi la dimensione dell'icona qui non fa mai crescere la riga - resta
   semplicemente centrata verticalmente nei 40px dal flex layout. */
.car-info > ul > li svg.icon-auto{
  width: 1.2em;
  height: 1.2em;
  display: inline-flex;
  flex: 0 0 auto;
  /* Per lo spostamento ORIZZONTALE non usiamo margin-left (con margini grandi l'icona finiva
     per "uscire" dal bordo arrotondato della pillola invece di restarci dentro): usiamo il
     padding-left della pillola stessa (.car-info > ul > li, qui sopra), che essendo dentro il
     border-box del chip non può mai fuoriuscire dal suo sfondo bianco. */
}
/* Colori per classe stabile (chip-id, chip-alimentazione, ecc.) e non più per posizione
   (:nth-child), perché ora ogni pillola vuota viene rimossa del tutto dal server quando il
   dato manca (vedi liAlimentazione/liData/liTipo/liKm in ElencoAuto.ascx.vb): con i colori
   legati alla POSIZIONE, se ad es. la pillola "data" (3ª) spariva, la 4ª pillola ("tipo")
   sarebbe diventata la "3ª" per il CSS e avrebbe preso il colore sbagliato (quello pensato
   per "data"). Legando il colore alla classe del contenuto, resta sempre quello giusto
   qualunque pillola sia presente o assente. */
.car-info > ul > li.chip-id svg.icon-auto{ color: #1a6fc4; }
.car-info > ul > li.chip-alimentazione svg.icon-auto{ color: #16a34a; }
.car-info > ul > li.chip-data svg.icon-auto{ color: #e08e00; }
.car-info > ul > li.chip-tipo svg.icon-auto{ color: #8b5cf6; }
.car-info > ul > li.chip-km svg.icon-auto{
  color: #0d9488;
  /* Questa icona (contachilometri) risultava tagliata in basso: la spostiamo un filo più in
     alto con un piccolo transform verticale (non modifica lo spazio occupato nel flex layout,
     a differenza di un margin-top negativo che invece lo modificherebbe). */
  transform: translateY(-1.5px);
}
/* Box prezzo: spostato accanto al titolo (vedi markup), non più nell'elenco delle info-chip */
.price-badge{
  float: right;
  margin-top: -2px;
  margin-left: 10px;
  background: var(--c-white);
  border: 2px solid var(--c-accent) !important;
  border-radius: var(--radius-md);
  padding: 5px 12px !important;
  box-shadow: var(--shadow-sm);
  text-align: center;
  line-height: 1.15;
}
.car-info .lPrezzo,
.price-badge .lPrezzo{
  display: block !important;
  color: var(--c-accent) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.price-badge .rate-valuePos2A{
  display: block !important;
  /* Riga del listino sopra il prezzo rosso: lo spazio va sotto, non sopra */
  margin: 0 0 1px !important;
  padding: 0 !important;
  font-size: 13px !important;
  /* Testo "Listino € xx.xxx": barrato solo l'importo (<s> nel markup), non la parola "Listino",
     quindi annulliamo il line-through che rewrite.css applica a tutta la voce. */
  text-decoration: none !important;
  white-space: nowrap;
}
/* Al passaggio del mouse il barrato scompare, così l'importo di listino resta leggibile. */
.price-badge .rate-valuePos2A:hover s{
  text-decoration: none;
}
.featured-item .Titolo{
  color: var(--c-primary-darker) !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  /* rewrite.css dà a .Titolo margin-left:20px + padding-left:2px: lo disallineava rispetto
     a foto/tabelle sotto (che partono dal margine sinistro della card, senza rientro) */
  margin-left: 0 !important;
  padding-left: 0 !important;
}
/* Riga foto+pulsante / tabella Optionals: FLEXBOX invece di float. Con i float (versione
   precedente) la tabella Optionals, essendo una griglia CSS (nuovo blocco di formattazione),
   veniva "schivata" in modo imprevedibile dal riquadro foto flottante e finiva per partire
   più in basso — con flex + align-items:flex-start i due riquadri iniziano sempre esattamente
   alla stessa altezza, qualunque sia il contenuto. */
.photo-optional-row{
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.photo-col{
  flex: 0 0 220px;
  width: 220px;
}
.photo-optional-row .default-dotations{
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0 !important;
}
/* auction.css base ha .zoomImg{float:left;margin-top:-35px;padding-top:10px;padding-right:10px;width:180px}:
   il margin-top negativo lo tirava su a incollarsi al titolo, e padding+altezza fissa (200px) lasciavano
   tutto quello sfondo celestino vuoto sotto la foto (le foto reali sono più "larghe" del box). Azzeriamo
   tutto e lasciamo che il riquadro si adatti esattamente alla foto (height:auto, niente padding/margine
   interno): il contenitore risulta grande quanto la foto stessa, non di più. */
.zoomImg{
  float: none !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  width: 220px;
  height: auto;
  line-height: 0;
  background: var(--c-bg-tint);
  box-sizing: border-box;
}
/* "NOTA:" e i pulsanti sotto (Richiedi Info / Pronta consegna-In arrivo) devono partire
   dal margine sinistro della card, non restare incolonnati accanto alla foto */
.card-footer{
  clear: both;
}
.zoomImg img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center top;
  border-radius: var(--radius-md);
  transition: transform .3s ease;
}
.featured-item:hover .zoomImg img{
  transform: scale(1.03);
}
/* Pulsante "Richiedi Info": attaccato subito sotto la foto (stessa colonna, stessa larghezza),
   dentro la stessa fascia celestino della foto (angoli arrotondati solo in basso, continua
   visivamente il riquadro immagine), più piccolo e in forma di pillola */
.photo-cta{
  float: none !important;
  clear: none !important;
  width: 220px;
  margin-top: 0;
  background: var(--c-bg-tint);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 8px 10px 10px;
  box-sizing: border-box;
  text-align: center;
}
.photo-cta .info_mail{
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 6px 18px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow-sm);
}
/* Optional/Dotazione principale (card elenco veicoli): vera tabella a griglia — titolo
   ("Optionals (...)：" / "Dotazione principale:", generato come <li><strong>...</strong></li>
   e riconosciuto con :has(strong)) come PRIMA RIGA a tutta larghezza, poi tutte le voci
   dell'elenco disposte su una griglia di 2 colonne e tante righe quante servono per
   contenerle tutte (grid-auto-flow: le <li> si susseguono da sinistra a destra, riga per
   riga). ulOptional e ulAccessori sono due <ul class="default-dotations"> distinti, uno di
   seguito all'altro: ognuno diventa un riquadro bianco arrotondato a sé stante (una "tabella"). */
.default-dotations{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  row-gap: 0;
  list-style: none !important;
  padding: 0 18px !important;
  margin: 0 !important;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.default-dotations li{
  background: transparent !important;
  border-radius: 0 !important;
  border-bottom: 1px dashed var(--c-border) !important;
  padding: 4px 0 !important;
  margin: 0;
  font-size: 12.5px !important;
  color: var(--c-text-muted) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.default-dotations li:last-child{
  border-bottom: none !important;
}
.default-dotations li:has(strong){
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--c-border) !important;
  padding: 6px 0 4px !important;
  margin-bottom: 2px;
  color: var(--c-primary-darker) !important;
  font-size: 13.5px !important;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
/* Dotazione principale (#ulAccessori) va a tutta larghezza SOTTO la riga foto/Optionals
   (.photo-optional-row è ora il contenitore che raggruppa foto+pulsante e tabella Optionals). */
.photo-optional-row + #ulAccessori{
  margin-top: 3px !important;
}
/* NOTA: deve partire dal margine sinistro della card come il pulsante "Aggiungi per NEWS"
   sotto — l'elemento <ul> che la contiene (markup: <ul><li id="liNotaB2B">...) ha altrimenti
   il padding-left di default del browser (list-style-type:none sulla sola <li> non basta,
   perché non toglie l'indentazione della lista). */
.card-footer ul{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
@media (max-width: 767px){
  .default-dotations{ grid-template-columns: 1fr; }
  .photo-optional-row{
    flex-direction: column;
  }
  .photo-col{ flex-basis: auto; width: 100%; }
  .photo-optional-row .default-dotations{ width: 100%; }
}
.btnOrange, .btnGray{
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.btnOrange{ background: #ffb347 !important; color:#3a2400 !important; }
.btnGray{ background: #dfe3e6 !important; color:#444 !important; }
.info_mail{
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
}
/* "Pronta consegna" e il pulsante-carrello "crea preventivo", nella barra tab di
   SchedaV.aspx: erano allineati a destra con "float:right" sul loro <li>, tecnica
   che però non ha più effetto dentro ".car-details .tab-links" da quando è diventata
   display:flex (il float viene ignorato sugli elementi flex) - risultato, finivano
   semplicemente in coda alla riga invece che a destra. margin-left:auto sul primo dei
   due <li> è l'equivalente flex di "spingi me stesso (e quel che segue) a destra". */
.car-details .tab-links li.tab-link-right{
  margin-left: auto !important;
}
/* Pulsante-icona "crea preventivo" (carrello): prima aveva le classi "btn btn-primary",
   che lo facevano rientrare anche nella regola ".btn-primary" pensata per i pulsanti
   testuali (height:auto!important + padding:13px 28px!important) - un !important da
   foglio di stile vince su un semplice style inline, quindi l'Height="34px" veniva
   annullato e l'icona tornava alla sua dimensione originale (80x72px) dentro un
   pulsante con un grosso padding: da qui l'aspetto "enorme" segnalato. Dimensione e
   aspetto ora dipendono solo da questa classe dedicata, un pallino tondo in stile
   coerente con le pillole/badge del resto del sito. */
.cart-icon-btn{
  width: 40px !important;
  height: 40px !important;
  padding: 9px !important;
  box-sizing: border-box !important;
  background: var(--c-bg-tint) !important;
  border: 1px solid var(--c-border) !important;
  object-fit: contain;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
  cursor: pointer;
}
.cart-icon-btn:hover{
  background: var(--c-white) !important;
  border-color: var(--c-primary) !important;
  transform: translateY(-1px);
}

/* ---------- Auto simili / correlate (AutoSimili.ascx) ---------- */
.boxAutoSimili{
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
  padding-bottom: 14px;
}
.boxAutoSimili:hover{
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.boxAutoSimili-titolo{
  font-weight: 700 !important;
  color: var(--c-primary-darker) !important;
  padding: 10px 14px 0 !important;
  text-align: left;
  /* Altezza fissa = 2 righe: titoli di lunghezza diversa (marca+modello+versione) non
     spostano piu' il pulsante e i chip, che restano allineati tra le 4 card. */
  height: 46px;
  overflow: hidden;
}
/* <asp:Label> = <span>: la regola legacy ".heading-section-2 span" gli imponeva 13px grigio */
.boxAutoSimili-titolo span{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 14px !important;
  line-height: 1.25;
  font-weight: 700;
  color: var(--c-primary-darker) !important;
}
.boxAutoSimili .rate-value{
  font-weight: 800 !important;
  color: var(--c-accent) !important;
}
/* Contenitore neutro del pulsante (prima aveva la stessa classe del link: stile applicato 2 volte) */
.boxAutoSimili-actions{
  padding: 8px 14px 0;
}
a.boxAutoSimili-viewdetails{
  background: var(--c-primary) !important;
  color: var(--c-white) !important;
  border-radius: var(--radius-sm) !important;
  text-align: center;
  text-decoration: none !important;
  display: block;
  width: auto !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  font-size: 12px;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
a.boxAutoSimili-viewdetails:hover{ background: var(--c-primary-dark) !important; }
.boxAutoSimili-divinfo{
  margin-left: 0 !important;
}
/* Chip: alimentazione a tutta riga, anno + tipo affiancati -> struttura identica in ogni card */
.boxAutoSimili-divinfo ul{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px 6px;
  border: none !important;
  list-style: none;
  margin: 0 !important;
  padding: 10px 14px 4px !important;
}
.boxAutoSimili-ul{
  display: flex !important;
  align-items: center;
  gap: 4px;
  height: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.boxAutoSimili-ul.chip-alimentazione{ grid-column: 1 / -1; }
.boxAutoSimili-etichette{
  background: var(--c-bg-tint);
  border-radius: 999px !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.4;
  border: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Icone delle pillole: stessi SVG inline di ElencoAuto.ascx, dimensione in "em", colore per classe chip-* */
.boxAutoSimili-ul svg.icon-auto{
  width: 1.3em;
  height: 1.3em;
  display: block;
  flex: 0 0 auto;
  margin: 0;
}
.boxAutoSimili-ul.chip-alimentazione svg.icon-auto{ color: #16a34a; }
.boxAutoSimili-ul.chip-data svg.icon-auto{ color: #e08e00; }
.boxAutoSimili-ul.chip-tipo svg.icon-auto{ color: #8b5cf6; }

/* ---------- Scheda veicolo (SchedaV.aspx) ---------- */
.car-details .tab-links{
  border-bottom: 2px solid var(--c-border);
  display: flex;
  gap: 4px;
}
.car-details .tab-links li a{
  display: inline-block;
  padding: 10px 16px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-weight: 600;
  color: var(--c-text-muted);
}
.car-details .tab-links li.active a{
  color: var(--c-primary) !important;
  background: var(--c-bg-tint);
  border-bottom: 2px solid var(--c-primary);
  margin-bottom: -2px;
}
.car-details .details{
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
/* ---------- Foto danni (tab "Foto Danni" in SchedaV.aspx) ----------
   Galleria Telerik con le stesse impostazioni di quella principale; la descrizione del danno
   (Title della foto) compare come didascalia sulla foto: etichetta scura semi-opaca con testo
   bianco, leggibile su qualsiasi sfondo (a differenza del vecchio riquadro grigio trasparente
   con testo scuro). Se la foto non ha descrizione la didascalia sparisce. */
.car-details .details.danni-gallery{ padding: 10px; }
#tabFotoDanni .RadImageGallery{
  border-radius: var(--radius-md);
  overflow: hidden;
  max-width: 100%;
}
#tabFotoDanni .RadImageGallery .rigDescriptionBox{
  background: transparent !important;
  margin: 0 !important;
  padding: 0 14px 12px !important;
  text-align: left;
  pointer-events: none;
}
#tabFotoDanni .RadImageGallery .rigDescriptionBox h4{
  display: inline-block;
  max-width: 100%;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: 0 !important;
  border-radius: 10px;
  background: rgba(12, 24, 42, .80);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .1px;
  text-transform: none;
}
#tabFotoDanni .RadImageGallery .rigDescriptionBox h4:empty,
#tabFotoDanni .RadImageGallery .rigDescriptionBox p:empty{ display: none; }
#tabFotoDanni .RadImageGallery .rigDescriptionBox p{
  margin: 6px 0 0 !important;
  color: rgba(255, 255, 255, .9) !important;
  font-size: 12px;
}
.car-details .list-info ul li{
  padding: 6px 0;
  border-bottom: 1px dashed var(--c-border);
  font-size: 14px;
}
.car-details .list-info ul li:last-child{ border-bottom: none; }
.more-info h4{
  color: var(--c-primary-darker) !important;
  border-left: 4px solid var(--c-accent);
  padding-left: 10px;
}
.evidenzaprezzi{
  background: var(--c-bg-tint);
  border-radius: var(--radius-md);
  padding: 14px 18px;
}
/* Barra ID/descrizione/prezzo/pulsanti, in cima alla scheda veicolo. Originale: sfondo a
   sfumatura grigio/azzurra ripetuto due volte (sulla barra E sul badge ID), tutto allineato a
   forza di float:right (impilati "all'indietro": il primo nel markup finisce più a destra) più
   un secondo <div> con le icone pdf/html separato e riattaccato con un margin-top:-20px "a
   occhio". In SchedaV.aspx è stato aggiunto un contenitore ".scheda-header" che avvolge
   entrambi i blocchi (vedi commento lì) - qui sostituiamo i float con un vero layout flex, con
   l'ordine visivo dato da "order" invece che dall'ordine dei float nel markup. */
.scheda-header{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  padding: 16px 20px;
  margin: 10px 0 16px;
}
.scheda-header-bar{
  display: flex !important;
  flex: 1 1 320px;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
/* Ordine visivo: titolo/ID a sinistra, prezzo al centro-destra, pulsante "Richiedi Info"
   all'estrema destra - indipendente dall'ordine nel markup (prezzo, poi pulsante, poi titolo). */
.scheda-header-bar .action_info{
  order: 1;
  flex: 1 1 220px;
  text-align: left !important;
}
.scheda-header-bar .divPrezzoInfo{
  order: 2;
}
.scheda-header-bar .scheda-header-cta{
  order: 3;
  display: flex;
  align-items: center;
}
.scheda-header-bar .action_info h2{
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0 !important;
}
/* L'etichetta "ID ..." deve stare sopra al titolo (prima era un float:left con margin-top
   negativo per farla "galleggiare" sopra); con la colonna flex qui sopra usiamo "order" per
   metterla per prima a prescindere dall'ordine nel markup (lì il titolo viene prima dell'ID). */
.scheda-header-bar .schedaLB{
  order: 1;
  display: inline-block !important;
  float: none !important;
  margin: 0 !important;
  padding: 3px 10px !important;
  background: var(--c-bg-tint) !important;
  color: var(--c-primary) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .03em;
}
.scheda-header-bar .TitoloScheda{
  order: 2;
  display: inline-block;
  margin: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  color: var(--c-primary-darker) !important;
}
.divPrezzoInfo{
  background: var(--c-bg-tint);
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-md) !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 8px 18px !important;
  text-align: center;
}
.ulPrezzoInfo{
  margin: 0 !important;
  padding: 0 !important;
}
.lPrezzoInfo{
  display: block !important;
  color: var(--c-accent) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  line-height: 1.2;
  text-decoration: none !important;
}
.rate-valuePos2{
  display: block !important;
  /* Riga "Listino € xx.xxx" sopra il prezzo rosso: barrato solo l'importo (<s> nel markup),
     come .price-badge .rate-valuePos2A; annulla il line-through e il margin-top:-20px di rewrite.css */
  margin: 0 0 2px !important;
  font-size: 12px !important;
  color: var(--c-text-muted) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.rate-valuePos2:hover s{
  text-decoration: none;
}
/* Pulsante "Richiedi Info": già diventato un bottone pieno blu grazie alla regola generica
   ".btn-primary" più sopra in questo file (vince con !important sul colore di sfondo dato da
   rewrite.css a ".info_mail"); qui tolto solo il margine verticale "a occhio" ormai inutile
   col nuovo layout flex, e aggiunto nowrap per non spezzare il testo del pulsante. */
.scheda-header-cta .info_mail{
  margin: 0 !important;
  white-space: nowrap;
  text-decoration: none !important;
}
/* Icone "crea pdf" / "crea html": da semplici immagini in fila a piccoli pulsanti tondi, in
   stile con le altre icone a "chip" circolare già usate nel sito (es. i social nel footer). */
.scheda-header-toolbar{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
#pdfMail, #htmlMail{
  width: 38px !important;
  height: 38px !important;
  padding: 7px !important;
  box-sizing: border-box;
  border-radius: 999px !important;
  background: var(--c-white) !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-sm);
  object-fit: contain;
  transition: box-shadow .15s ease, transform .15s ease;
}
#pdfMail:hover, #htmlMail:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
@media (max-width: 767px){
  .scheda-header{ padding: 14px 16px; }
  .scheda-header-bar .action_info{ flex-basis: 100%; }
  .scheda-header-toolbar{ margin-left: auto; }
}
/* ---------- "Dotazione principale" (SOLO SchedaV.aspx, dentro .more-info): tolto lo sfondo
   celestino, elenco più ordinato (2 colonne). Scoping con .more-info perché l'id "ulAccessori"
   è riusato anche in controls/ElencoAuto.ascx (card elenco veicoli), che ha invece il suo
   trattamento dedicato più sotto (.default-dotations) e non deve ereditare queste regole. ---------- */
.more-info .details:has(#ulAccessori){
  background: var(--c-white) !important;
}
.more-info #ulAccessori,
.more-info #ulAccessoriSegue{
  columns: 2;
  column-gap: 28px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.more-info #ulAccessori li,
.more-info #ulAccessoriSegue li{
  background: transparent !important;
  border-bottom: 1px dashed var(--c-border) !important;
  padding: 7px 0 7px 22px !important;
  margin: 0;
  position: relative;
  font-size: 13.5px;
  break-inside: avoid;
}
.more-info #ulAccessori li::before,
.more-info #ulAccessoriSegue li::before{
  content: "✓";
  position: absolute;
  left: 2px;
  top: 7px;
  color: var(--c-primary);
  font-weight: 700;
  font-size: 12px;
}
.more-info #ulAccessori .optional,
.more-info #ulAccessoriSegue .optional{
  width: auto !important;
  color: var(--c-text) !important;
  font-weight: 400 !important;
}
@media (max-width: 767px){
  .more-info #ulAccessori, .more-info #ulAccessoriSegue{ columns: 1; }
}

.prev a{
  color: var(--c-primary) !important;
  font-weight: 600;
}
.prev a:hover{ color: var(--c-primary-dark) !important; }


/* AutoSimili.ascx (auto correlate): stessa logica di griglia adattata al contenitore, card più piccola */
.boxAutoSimili-img{
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}
.boxAutoSimili-img .slides{
  display: grid;
  grid-template-columns: repeat(60, 1fr);
  grid-template-rows: 118px 42px;
  gap: 3px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.boxAutoSimili-img .slides img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.boxAutoSimili-img .slides img:hover{ transform: scale(1.04); }
.boxAutoSimili-img .slides img:first-child{
  grid-column: 1 / -1;
  grid-row: 1;
}
.boxAutoSimili-img .slides img:only-child{
  grid-row: 1 / span 2;
}
.boxAutoSimili-img .slides img:not(:first-child){
  grid-row: 2;
  grid-column: span 60;
}
.boxAutoSimili-img .slides img:first-child:nth-last-child(3) ~ img{ grid-column: span 30; } /* 2 miniature */
.boxAutoSimili-img .slides img:first-child:nth-last-child(4) ~ img{ grid-column: span 20; } /* 3 miniature */
.boxAutoSimili-img .slides img:first-child:nth-last-child(5) ~ img{ grid-column: span 15; } /* 4 miniature */
.boxAutoSimili-img .slides img:first-child:nth-last-child(6) ~ img{ grid-column: span 12; } /* 5 miniature */

/* ---------- Mobile ---------- */
@media (max-width: 767px){
  #page-heading{ padding: 32px 0 28px !important; }
  #page-heading h1{ font-size: 24px !important; }
  .headerP{ padding: 28px 0 24px !important; }
  .contact-form{ padding: 20px !important; }
  .brand-container{ margin-bottom: 16px; }
  .car-info > ul > li:last-child{ position: static; margin-top: 10px; display:inline-flex; }
  #sidebar .sidebar-content .search-form{ padding: 18px !important; }
}


/* =====================================================================
   ProfiloPersonale.aspx  (.profilo-page)
   Card: logo/riepilogo, affiliazione e margine, dati anagrafici, azienda e contatti, barra azioni
   ===================================================================== */
.profilo-page{ padding-bottom: 56px; }

.profilo-page .pf-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.profilo-page .pf-card{
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 28px;
  min-width: 0;
}
.profilo-page .pf-card-title{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px !important;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--c-border);
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  text-transform: none !important;
  color: var(--c-primary-darker) !important;
}
.profilo-page .pf-card-title i{
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--c-bg-tint-2);
  color: var(--c-primary);
  font-size: 16px;
}

/* ---- Card logo / riepilogo ---- */
.profilo-page .pf-card-logo{
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, var(--c-white) 0%, var(--c-bg-tint) 100%);
}
.profilo-page .pf-avatar{
  flex: 0 0 132px;
  width: 132px; height: 132px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 12px;
  box-sizing: border-box;
}
.profilo-page .pf-avatar-img{
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border: 0;
}
.profilo-page .pf-sum{ min-width: 0; flex: 1; }
.profilo-page .pf-sum-name{
  font-size: 20px; font-weight: 700; line-height: 1.25;
  color: var(--c-primary-darker);
  overflow-wrap: anywhere;
}
.profilo-page .pf-sum-name:empty{ display: none; }
.profilo-page .pf-sum-login{
  margin: 4px 0 14px;
  font-size: 13px; color: var(--c-text-muted);
}
.profilo-page .pf-sum-login i{ color: var(--c-primary); margin-right: 4px; }

/* pulsante "Seleziona logo": il file input reale resta sopra, trasparente, cosi' l'evento onchange parte da solo */
.profilo-page label.pf-upload{
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0;
  padding: 9px 16px;
  font-size: 13px; font-weight: 600;
  color: var(--c-primary);
  background: var(--c-white);
  border: 1.5px dashed var(--c-primary);
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  transition: background .15s ease, color .15s ease;
}
.profilo-page label.pf-upload:hover{ background: var(--c-primary); color: var(--c-white); }
.profilo-page label.pf-upload span{ color: inherit; font-size: inherit; line-height: 1.2; }
.profilo-page label.pf-upload input[type=file]{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
  font-size: 100px;
}
.profilo-page .pf-hint{
  margin-top: 8px;
  font-size: 12px; line-height: 1.4;
  color: var(--c-text-muted);
}

/* ---- Card affiliazione ---- */
.profilo-page .pf-aff-row{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0;
}
.profilo-page .pf-aff-row + .pf-aff-row{ border-top: 1px dashed var(--c-border); }
.profilo-page .pf-aff-text{ min-width: 0; flex: 1; }
.profilo-page .pf-aff-label{ font-size: 14px; font-weight: 700; color: var(--c-primary-darker); }
.profilo-page .pf-aff-text .pf-hint{ margin-top: 2px; }

/* interruttore: il testo arriva dal server ("Nessuna affiliazione" / "Affiliazione in uso"), la classe is-on la aggiunge lo script di pagina */
.profilo-page a.pf-switch{
  flex: 0 0 auto;
  position: relative;
  display: inline-flex; align-items: center;
  height: 40px;
  padding: 0 18px 0 58px;
  font-size: 13px; font-weight: 700;
  color: var(--c-text-muted) !important;     /* sovrascrive il colore inline impostato da ForeColor */
  background: #eef2f6;
  border: 1px solid #d8e0e8;
  border-radius: 999px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.profilo-page a.pf-switch::before{
  content: "";
  position: absolute; left: 5px; top: 50%;
  width: 30px; height: 30px; margin-top: -15px;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 1px 4px rgba(30,40,50,.28);
  transition: transform .2s ease;
}
.profilo-page a.pf-switch:hover{ background: #e4eaf0; }
.profilo-page a.pf-switch.is-on{
  color: #166534 !important;
  background: #dcfce7;
  border-color: #86efac;
}
.profilo-page a.pf-switch.is-on::before{ transform: translateX(18px); background: #16a34a; }

.profilo-page .pf-margin-ctrl{ display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.profilo-page .pf-suffix{ position: relative; width: 104px; }
.profilo-page .pf-suffix input.name{ text-align: center; padding-right: 28px !important; font-weight: 700; }
.profilo-page .pf-suffix-sign{
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-weight: 700; color: var(--c-text-muted); pointer-events: none;
}

/* ---- Campi ---- */
.profilo-page .pf-fields{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
.profilo-page .pf-field{ min-width: 0; display: flex; flex-direction: column; }
.profilo-page .pf-full{ grid-column: 1 / -1; }
.profilo-page .pf-row3{
  display: grid;
  grid-template-columns: 1fr 96px 96px;
  gap: 16px 18px;
  flex-direction: unset;
}
.profilo-page label.pf-label{
  display: block;
  width: auto; margin: 0 0 6px;
  font-family: var(--font-main) !important;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.profilo-page label.pf-req::after{ content: " *"; color: var(--c-accent); font-weight: 700; }
.profilo-page .pf-field input.name,
.profilo-page .pf-field select.pf-select{
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-main) !important;
  font-size: 15px; color: var(--c-text);
  margin: 0;
}
.profilo-page .pf-field input.name::placeholder{ color: #a3adb8; }
.profilo-page select.pf-select{
  height: 46px !important;
  padding: 0 10px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-sm) !important;
  background-color: var(--c-bg-tint) !important;
}
.profilo-page select.pf-select:focus{
  outline: none;
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px rgba(51,102,153,.15);
  background-color: var(--c-white) !important;
}
.profilo-page input.name.pf-readonly,
.profilo-page input.name[readonly]{
  background: #eef1f5 !important;
  color: var(--c-text-muted);
  font-weight: 700;
  cursor: not-allowed;
}

/* ---- Pulsanti ---- */
.profilo-page a.pf-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  font-size: 14px; font-weight: 700; line-height: 1;
  border-radius: 999px;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease, color .15s ease;
}
.profilo-page a.pf-btn-primary{
  color: var(--c-white) !important;
  background: var(--c-accent) !important;
  border: 0;
  box-shadow: 0 6px 16px rgba(255,0,34,.25);
  min-width: 150px;
}
.profilo-page a.pf-btn-primary:hover{ background: var(--c-accent-dark) !important; transform: translateY(-1px); }
.profilo-page a.pf-btn-ghost{
  height: 46px; padding: 0 16px;
  color: var(--c-primary) !important;
  background: var(--c-white) !important;
  border: 1.5px solid var(--c-primary);
}
.profilo-page a.pf-btn-ghost:hover{ background: var(--c-primary) !important; color: var(--c-white) !important; }

/* ---- Barra azioni ---- */
.profilo-page .pf-actions{
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px 28px;
}
.profilo-page .pf-actions-right{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.profilo-page label.pf-check{
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0; font-size: 14px; font-weight: 500; cursor: pointer;
  color: var(--c-text);
}
.profilo-page label.pf-check input{ width: 18px; height: 18px; margin: 0; accent-color: var(--c-primary); }
.profilo-page label.pf-check a{ color: var(--c-primary); font-weight: 600; text-decoration: underline; }
.profilo-page .pf-reqnote{ margin: 12px 4px 0; font-size: 12px; color: var(--c-text-muted); }
.profilo-page .pf-reqnote .pf-star{ color: var(--c-accent); }

/* ---- Messaggi (errore di default, verde se esito positivo) ---- */
.profilo-page .pf-msg{
  display: inline-block;
  padding: 8px 14px;
  font-size: 13px; font-weight: 600; line-height: 1.3;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
}
.profilo-page .pf-msg:empty{ display: none; }
.profilo-page .pf-msg.pf-msg-ok{ color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.profilo-page .pf-card-aff > .pf-msg{ margin-top: 6px; }

/* ---- Responsive ---- */
@media (max-width: 991px){
  .profilo-page .pf-grid{ grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
}
@media (max-width: 575px){
  .profilo-page .pf-card{ padding: 20px; }
  .profilo-page .pf-card-logo{ flex-direction: column; text-align: center; }
  .profilo-page .pf-fields{ grid-template-columns: 1fr; }
  .profilo-page .pf-row3{ grid-template-columns: 1fr 84px 84px; gap: 12px; }
  .profilo-page .pf-aff-row{ flex-direction: column; align-items: flex-start; }
  .profilo-page .pf-margin-ctrl{ width: 100%; }
  .profilo-page .pf-actions{ padding: 16px 20px; }
  .profilo-page .pf-actions-right{ width: 100%; justify-content: stretch; }
  .profilo-page a.pf-btn-primary{ width: 100%; }
}


/* =====================================================================
   Larghezza pagine: margini laterali ridotti su tutto il sito
   Bootstrap 3 fissava .container a 750 / 970 / 1170px (a 1366px di schermo restavano ~98px
   per lato, a 1920px ~375px). Ora il contenitore e' fluido: occupa tutta la larghezza
   della finestra meno un margine di 28px per lato, con un tetto a 1560px per gli schermi
   molto larghi. Sotto i 768px non cambia nulla (gia' a tutta larghezza con 15px).
   Per tornare indietro basta cancellare questo blocco.
   ===================================================================== */
@media (min-width: 768px){
  .container{
    width: auto;
    max-width: 1560px;
    padding-left: 28px;
    padding-right: 28px;
    /* alcune pagine (CRM) hanno style="margin-left:1px" inline: sugli schermi larghi il contenuto restava incollato a sinistra */
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* dettaglio.aspx: il pannello filtri e' position:fixed con max-width 290px, tarato sulla colonna
   col-lg-3 del vecchio contenitore da 1170px (292px). Con il contenitore piu' largo la colonna
   cresce, quindi il pannello segue la stessa larghezza (25% dell'area utile del contenitore). */
@media (min-width: 1200px){
  #sidebar{
    max-width: calc(0.25 * (min(100vw, 1560px) - 26px));
  }
}


/* =====================================================================
   CRM (crmClienti.aspx, crmScadenziario.aspx): sfrutta tutta la larghezza disponibile
   Le GridView avevano Width="870px" / "900px" scritto nel markup (e float:left), il
   contenitore tbNewsL era al 90% con 20px di margine: restava meta' schermo vuoto.
   Qui le tabelle passano a tutta larghezza; le larghezze in px delle colonne restano come
   "proporzioni" e lo spazio in piu' viene distribuito tra le colonne.
   ===================================================================== */
.tbNewsL{
  width: 100%;
  margin-left: 0;
}
table.crmGrid{
  float: none;
  display: table;
  width: 100% !important;       /* vince sullo style="width:870px" scritto dalla GridView */
  box-sizing: border-box;
}
/* Elenco scadenze: era display:block + float, ora tabella a tutta larghezza (sotto i 992px resta scorrevole) */
@media (min-width: 992px){
  table.crmGridScad{
    float: none;
    display: table;
    width: 100%;
    box-sizing: border-box;
  }
}
/* Scheda cliente: i campi della prima e seconda riga si distribuiscono sulla larghezza
   (l'eMail prende lo spazio che resta) invece di fermarsi a 1000px circa */
.crmCliente-ul:has(> input.crmCliente-tx){
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: auto;
  row-gap: 4px;
}
.crmCliente-ul:has(> input.crmCliente-tx) > input[id$="txeMail"]{
  flex: 1 1 280px;
  width: auto !important;
  min-width: 200px;
  max-width: 560px;
}
/* box "nota": usa la larghezza della scheda invece di 400px fissi */
.crmCliente-div textarea[id$="txNota"]{
  width: min(100%, 720px) !important;
  max-width: 100%;
  box-sizing: border-box;
}
.crmCliente-div{ margin-right: 0; }
/* le righe della scheda erano width:100% + margini laterali di 15px: sforavano a destra dal riquadro */
.crmCliente-ul{ display: block; width: auto; }


/* =====================================================================
   CRM - pulsanti (.btn-FindNewsL, usato in crmClienti, crmScadenziario, newsletter...)
   e scheda cliente / "Nuovo cliente" (crmClienti.aspx)
   ===================================================================== */

/* ---- Pulsanti (LinkButton): primario blu, varianti .crm-btn-accent (rosso) / .crm-btn-ghost (contorno) / .crm-btn-sm ---- */
a.btn-FindNewsL{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px;
  margin: 0;
  padding: 0 20px;
  font-family: var(--font-main) !important;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; line-height: 1;
  text-transform: uppercase; text-decoration: none !important; white-space: nowrap;
  color: var(--c-white) !important;
  background: var(--c-primary) !important;
  border: 1.5px solid var(--c-primary);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(51,102,153,.28);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease, color .15s ease;
}
a.btn-FindNewsL:hover{
  color: var(--c-white) !important;
  background: var(--c-primary-dark) !important;
  border-color: var(--c-primary-dark);
  box-shadow: 0 6px 16px rgba(51,102,153,.38);
  transform: translateY(-1px);
}
a.btn-FindNewsL:active{ transform: translateY(0); box-shadow: 0 2px 6px rgba(51,102,153,.3); }
a.btn-FindNewsL i{ font-size: 14px; }
a.btn-FindNewsL.crm-btn-accent{
  background: var(--c-accent) !important; border-color: var(--c-accent);
  box-shadow: 0 4px 12px rgba(255,0,34,.25);
}
a.btn-FindNewsL.crm-btn-accent:hover{
  background: var(--c-accent-dark) !important; border-color: var(--c-accent-dark);
  box-shadow: 0 6px 16px rgba(255,0,34,.35);
}
a.btn-FindNewsL.crm-btn-ghost{
  color: var(--c-primary) !important;
  background: var(--c-white) !important;
  box-shadow: none;
}
a.btn-FindNewsL.crm-btn-ghost:hover{
  color: var(--c-white) !important;
  background: var(--c-primary) !important;
  border-color: var(--c-primary);
}
a.btn-FindNewsL.crm-btn-sm{ height: 34px; padding: 0 16px; font-size: 12px; }

/* ---- Pulsanti-icona (ImageButton) nelle tabelle e nella scheda ---- */
.crmGrid input[type=image],
input[type=image].crm-iconbtn,
input[type=image].crm-close{
  box-sizing: content-box;
  padding: 5px;
  border: 0 !important;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
  transition: background .15s ease, transform .15s ease;
}
.crmGrid input[type=image]:hover,
input[type=image].crm-iconbtn:hover{ background: var(--c-bg-tint-2); transform: scale(1.08); }
input[type=image].crm-iconbtn{ padding: 4px; border: 1px solid var(--c-border) !important; background: var(--c-white); }
input[type=image].crm-close{ padding: 9px; border-radius: 50%; background: var(--c-bg-tint-2); }
input[type=image].crm-close:hover{ background: #fde8ea; transform: rotate(90deg); }

/* ---- Barra di ricerca ---- */
.crm-page .crm-msg{
  display: block; margin: 0 0 14px;
  padding: 10px 14px;
  font-size: 13px; font-weight: 600;
  color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-md);
}
.crm-page .crm-msg:empty{ display: none; }
.crm-toolbar{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.crm-search{ position: relative; flex: 1 1 320px; max-width: 560px; }
.crm-search i{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c-text-muted); pointer-events: none; }
.crm-search input{
  width: 100% !important; height: 40px; box-sizing: border-box;
  padding: 0 14px 0 38px;
  font-family: var(--font-main); font-size: 14px; color: var(--c-text);
  background: var(--c-bg-tint); border: 1px solid var(--c-border); border-radius: 999px;
}
.crm-search input:focus{ outline: none; border-color: var(--c-primary); background: var(--c-white); box-shadow: 0 0 0 3px rgba(51,102,153,.15); }
.crm-notice{
  display: block; margin: 0 0 12px; padding: 10px 14px;
  font-size: 13px; font-weight: 600; color: #92400e;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-md);
}
.crm-notice:empty{ display: none; }

/* ---- Card scheda cliente / elenco ---- */
.crm-page .tbNewsLTR{ height: auto; }
.crm-page .tbNewsL{ table-layout: fixed; }   /* la colonna non si allarga oltre la pagina: le tabelle larghe scorrono dentro la card */
.crm-page .tbNewsL > tbody > tr > td{ padding: 0 0 18px; }
.crm-card{
  margin-top: 6px;
  padding: 24px 28px 26px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.crm-card-head{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 20px; padding: 0 0 14px;
  border-bottom: 1px solid var(--c-border);
}
.crm-card-title{
  margin: 0; width: auto !important;
  font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--c-primary-darker);
}
.crm-card-list{ padding-top: 20px; }
.crm-card-list > .crm-section-title{ margin-bottom: 14px; }

/* ---- Campi ---- */
.crm-form{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px;
}
.crm-field{ display: flex; flex-direction: column; min-width: 0; }
.crm-page label.crm-label,
.crm-page .crm-label{
  display: block; width: auto !important; margin: 0 0 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--c-text-muted);
}
.crm-page .crm-req::after{ content: " *"; color: var(--c-accent); font-weight: 700; }
.crm-page input.crm-input,
.crm-page .crm-textarea{
  width: 100% !important; box-sizing: border-box; margin: 0 !important;
  font-family: var(--font-main); font-size: 15px; color: var(--c-text);
  background: var(--c-bg-tint); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
}
.crm-page input.crm-input{ height: 44px !important; padding: 0 14px; }
.crm-page .crm-textarea{ padding: 12px 14px; min-height: 96px; resize: vertical; line-height: 1.45; }
.crm-page input.crm-input:focus,
.crm-page .crm-textarea:focus{
  outline: none; border-color: var(--c-primary); background: var(--c-white); box-shadow: 0 0 0 3px rgba(51,102,153,.15);
}
.crm-page input.crm-input::placeholder,
.crm-page .crm-textarea::placeholder{ color: #a3adb8; }
.crm-form-foot{
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 20px;
}
.crm-reqnote{ font-size: 12px; color: var(--c-text-muted); }
.crm-star{ color: var(--c-accent); font-weight: 700; }

/* ---- Sezioni Note / Preventivi ---- */
.crm-section{ margin-top: 28px; padding-top: 22px; border-top: 1px dashed var(--c-border); }
.crm-section-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.crm-section-title{
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 16px !important; font-weight: 700 !important; text-transform: none !important; color: var(--c-primary-darker) !important;
}
.crm-section-title i{
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--c-bg-tint-2); color: var(--c-primary); font-size: 14px;
}
.crm-note-editor{
  margin-bottom: 16px; padding: 16px;
  background: var(--c-bg-tint); border: 1px solid var(--c-border); border-radius: var(--radius-md);
}
.crm-note-opts{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.crm-note-date{ display: inline-flex; align-items: center; gap: 8px; }
.crm-note-date .crm-label{ margin: 0; }
.crm-page input.crm-input-date{ width: 170px !important; height: 38px !important; }
.crm-check, .crm-check label{ font-size: 14px; font-weight: 600; color: var(--c-text); cursor: pointer; }
.crm-check input{ width: 17px; height: 17px; margin: 0 6px 0 0; vertical-align: -3px; accent-color: var(--c-primary); }
.crm-spacer{ flex: 1; }

/* ---- Responsive ---- */
@media (max-width: 991px){
  .crm-form{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px){
  .crm-card{ padding: 18px; overflow-x: auto; }  /* tabelle larghe: scorrono nella card, non nella pagina */
  .crm-form{ grid-template-columns: 1fr; }
  .crm-toolbar{ padding: 12px; }
  .crm-search{ flex-basis: 100%; max-width: none; }
  .crm-form-foot a.btn-FindNewsL{ width: 100%; }
}


/* =====================================================================
   crmScadenziario.aspx: elenco scadenze + dettaglio (riusa le classi .crm-* di crmClienti)
   ===================================================================== */
.crmGridScad input[type=image]{
  box-sizing: content-box; padding: 5px; border: 0 !important; border-radius: 8px;
  background: transparent; cursor: pointer; vertical-align: middle;
  transition: background .15s ease, transform .15s ease;
}
.crmGridScad input[type=image]:hover{ background: var(--c-bg-tint-2); transform: scale(1.08); }
.crmGridScad img{ vertical-align: middle; }

/* legenda sopra l'elenco */
.crm-legend{ display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--c-text-muted); }
.crm-legend span{ display: inline-flex; align-items: center; gap: 6px; }
.crm-legend img{ width: 16px; height: 16px; object-fit: contain; }

/* campi in sola lettura (contatto cliente) */
.crm-page input.crm-input:disabled{
  background: #eef1f5; color: var(--c-text); opacity: 1; cursor: default;
  -webkit-text-fill-color: var(--c-text);
}
.crm-form-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* editor nota: testo a sinistra, opzioni (promemoria / stato preventivo) a destra */
.crm-note-grid{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.crm-note-side{ display: flex; flex-direction: column; gap: 14px; }
.crm-opt-block{
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 12px 14px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-md);
}
.crm-opt-block .crm-label{ margin: 0; }
.crm-opt-block .crm-note-date{ margin-top: 2px; }
.crm-opt-block span.crm-check, .crm-opt-block .crm-check label{ font-size: 14px !important; font-weight: 600 !important; color: var(--c-text); }
.crm-opt-block input[type=radio]{ width: 17px; height: 17px; margin: 0 6px 0 0; vertical-align: -3px; accent-color: var(--c-primary); }

@media (max-width: 991px){
  .crm-form-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-note-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 575px){
  .crm-form-4{ grid-template-columns: 1fr; }
}

/* leggibilita' tabelle CRM: font del sito e corpo 13px al posto di Verdana 11px */
.crm-page .crmGridRow, .crm-page .crmGridAltRow,
.crm-page .crmGridRow td, .crm-page .crmGridAltRow td,
.crm-page table.crmGridScad{
  font-family: var(--font-main);
  font-size: 13px;
}
.crm-page .crm-card{ margin-bottom: 18px; }

/* Scadenziario: il codice VB colora con un colore inline (#FFF3E8) le celle delle righe "scadenza preventivo"
   (distingue questi preventivi in scadenza dai semplici promemoria). Il colore inline viene sostituito con
   una tinta pesca chiara, meno satura dell'originale, con una propria alternanza e un proprio hover: resta
   leggibile insieme alla zebra delle righe normali, invece di sparire dentro di essa o coprirla con un arancio forte. */
.crmGridScad tr:nth-child(odd) > td[style*="background-color"]{ background-color: #fdf1e6 !important; }
.crmGridScad tr:nth-child(even) > td[style*="background-color"]{ background-color: #fff8f0 !important; }
.crmGridScad tr:hover > td[style*="background-color"]{ background-color: #fbe3cb !important; }
.crmGridScad tr > td[style*="background-color"]:first-child{ box-shadow: inset 3px 0 0 #e0752b; }

/* Righe alternate (zebra) nelle tabelle CRM: la prima riga dati bianca, la seconda grigio-azzurro, ecc.
   Indipendente dall'AlternatingRowStyle della GridView (il suo colore sulla riga era coperto dalle celle).
   Le righe evidenziate di Scadenziario (colore inline) mantengono il loro azzurro. */
.crmGrid tr:nth-child(odd) > td,
.crmGridScad tr:nth-child(odd) > td{
  background-color: #f1f5f9;
}
.crmGrid tr:nth-child(even) > td,
.crmGridScad tr:nth-child(even) > td{
  background-color: var(--c-white);
}
.crmGrid tr:hover > td,
.crmGridScad tr:hover > td{
  background-color: #e4edf7;
}

/* bordi interni delle intestazioni CRM: erano verde scuro (#006633) del vecchio stile, ora sottili e neutri sul blu notte */
.crmGrid th, .crmGridScad th{ border-color: rgba(255,255,255,.10) !important; }


/* =====================================================================
   GestioneNewsletter.aspx (riusa le classi .crm-*): filtri, riquadri di stato, griglie
   ===================================================================== */
.crm-page select.crm-select{
  width: 100%; min-width: 160px; height: 44px; box-sizing: border-box;
  padding: 0 12px; font-family: var(--font-main); font-size: 14px; color: var(--c-text);
  background-color: var(--c-bg-tint); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
}
.crm-page select.crm-select:focus{
  outline: none; border-color: var(--c-primary); background-color: var(--c-white); box-shadow: 0 0 0 3px rgba(51,102,153,.15);
}
.crm-toolbar select.crm-select{ width: 220px; height: 40px; border-radius: 999px; padding: 0 16px; }
.crm-toolbar .crm-label{ margin: 0; }

/* dati newsletter + riquadri di stato */
.nl-top{ display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.nl-fields{ display: flex; flex-direction: column; gap: 16px; }
.crm-inline{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-inline input.crm-input{ flex: 1 1 260px; width: auto !important; }
.crm-inline input.crm-input-date{ flex: 0 0 190px; }
.nl-stats{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nl-stat{
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
  background: var(--c-bg-tint); border: 1px solid var(--c-border); border-radius: var(--radius-md);
}
.nl-stat .crm-label{ margin: 0; }
.nl-stat-value{ font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--c-primary-darker); overflow-wrap: anywhere; }
.nl-stat-value:empty::before{ content: "\2014"; color: var(--c-text-muted); font-weight: 400; }

/* filtri di ricerca (veicoli / destinatari) */
.crm-filters{
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px;
  margin: 18px 0 16px; padding: 14px 16px;
  background: var(--c-bg-tint); border: 1px solid var(--c-border); border-radius: var(--radius-md);
}
.crm-filters .crm-field{ flex: 1 1 170px; }
.crm-filters .crm-filter-wide{ flex: 2 1 260px; }
.crm-filters .crm-filter-check{ flex: 0 0 auto; justify-content: flex-end; padding-bottom: 10px; }
.crm-filter-actions, .crm-head-actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-filter-actions{ flex: 0 0 auto; }

/* pulsante "pericolo" (contorno rosso) */
a.btn-FindNewsL.crm-btn-danger{ color: var(--c-accent) !important; border-color: var(--c-accent); }
a.btn-FindNewsL.crm-btn-danger:hover{ color: var(--c-white) !important; background: var(--c-accent) !important; border-color: var(--c-accent); }

/* griglie della pagina: a tutta larghezza, zebra, pulsanti-icona */
.crm-page table.GridView{ float: none; display: table; width: 100% !important; box-sizing: border-box; }
.crm-page table[id*="grid" i] tr:nth-child(odd) > td{ background-color: #f1f5f9; }
.crm-page table[id*="grid" i] tr:nth-child(even) > td{ background-color: var(--c-white); }
.crm-page table[id*="grid" i] tr:hover > td{ background-color: #e4edf7; }
.crm-page table[id*="grid" i] td, .crm-page table[id*="grid" i] th{ font-family: var(--font-main); font-size: 13px; }
.crm-page table[id*="grid" i] th{ border-color: rgba(255,255,255,.10) !important; }
.crm-page table[id*="grid" i] input[type=image]{
  box-sizing: content-box; padding: 5px; border: 0 !important; border-radius: 8px; background: transparent;
  cursor: pointer; vertical-align: middle; transition: background .15s ease, transform .15s ease;
}
.crm-page table[id*="grid" i] input[type=image]:hover{ background: var(--c-bg-tint-2); transform: scale(1.08); }
.crm-page table[id*="grid" i] + .crm-filters, .crm-page .crm-card > table[id*="grid" i]{ margin-bottom: 4px; }

@media (max-width: 991px){
  .nl-top{ grid-template-columns: 1fr; }
}
@media (max-width: 575px){
  .nl-stats{ grid-template-columns: 1fr; }
  .crm-toolbar select.crm-select{ width: 100%; }
  .crm-filter-actions, .crm-filter-actions a.btn-FindNewsL{ width: 100%; }
}
.crm-toolbar + .crm-card{ margin-top: 18px; }
.crm-section-head{ flex-wrap: wrap; }
@media (max-width: 575px){
  .crm-head-actions, .crm-head-actions a.btn-FindNewsL{ width: 100%; }
  a.btn-FindNewsL{ white-space: normal; text-align: center; line-height: 1.2; }
}

/* =====================================================================
   Newsletter: riga selezionata (resta evidenziata finche' la newsletter e' in modifica)
   ===================================================================== */
.crm-page table[id*="grid" i] tr.crm-row-selected > td,
.crm-page table[id*="grid" i] tr.crm-row-selected:hover > td{
  background-color: #d6e6f7 !important;
  color: var(--c-primary-darker);
  font-weight: 600;
}
.crm-page table[id*="grid" i] tr.crm-row-selected > td:first-child{
  box-shadow: inset 5px 0 0 var(--c-primary);
}
.crm-page table[id*="grid" i] tr.crm-row-click{ cursor: pointer; }
.crm-page table[id*="grid" i] tr.crm-row-click:not(.crm-row-selected):hover > td{ background-color: #e4edf7; }
[id$="divModif"]{ scroll-margin-top: 90px; }

/* Sezione "Modifica newsletter": campi con sfondo verdino al posto del grigio-azzurro */
.crm-page [id$="divModif"] input.crm-input,
.crm-page [id$="divModif"] select.crm-select{
  background-color: #e3f3e9; border-color: #a9d3b7;
}
.crm-page [id$="divModif"] input.crm-input::placeholder{ color: #7f9a8a; }
.crm-page [id$="divModif"] input.crm-input:focus,
.crm-page [id$="divModif"] select.crm-select:focus{
  background-color: #f6fbf7; border-color: #3f9a62; box-shadow: 0 0 0 3px rgba(63,154,98,.18);
}

/* Sezione "Modifica newsletter": tutta la sezione in tonalita' verde (grigio/azzurro -> verde)
   per distinguerla dall'elenco in sola visualizzazione */
.crm-page [id$="divModif"].crm-card{ border-color: #b9dcc5; border-top: 4px solid #3f9a62; background: #fcfffd; }
.crm-page [id$="divModif"] .crm-card-head{ border-bottom-color: #cfe7d8; }
.crm-page [id$="divModif"] .crm-section{ border-top-color: #bfdfca; }
.crm-page [id$="divModif"] .crm-section-title i{ background: #dcf0e3; color: #2f7d4f; }
.crm-page [id$="divModif"] .nl-stat,
.crm-page [id$="divModif"] .crm-filters{ background: #f1f9f4; border-color: #b9dcc5; }
/* tabelle (veicoli selezionati, veicoli, destinatari): righe alternate verdine */
.crm-page [id$="divModif"] table[id*="grid" i]{ border-color: #b9dcc5; }
.crm-page [id$="divModif"] table[id*="grid" i] tr:nth-child(odd) > td{ background-color: #e8f5ec; }
.crm-page [id$="divModif"] table[id*="grid" i] tr:nth-child(even) > td{ background-color: #ffffff; }
.crm-page [id$="divModif"] table[id*="grid" i] tr:hover > td{ background-color: #d5ebdc; }
.crm-page [id$="divModif"] table[id*="grid" i] input[type=image]:hover{ background: #d5ebdc; }

/* Pulsante "Chiudi" nell'intestazione del blocco Modifica newsletter */
a.crm-close-btn{
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1px solid #b9dcc5; background: #fff; color: #2f7d4f !important;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none !important;
  transition: background .15s, color .15s, border-color .15s;
}
a.crm-close-btn:hover, a.crm-close-btn:focus-visible{ background: #fde8ea; border-color: var(--c-accent); color: var(--c-accent) !important; outline: none; }
a.crm-close-btn i{ font-size: 15px; }

/* =====================================================================
   GestioneUtenti.aspx: filtri a "chip", tabella compatta, icone vettoriali (SVG)
   ===================================================================== */
.us-toolbar{ gap: 14px 18px; }
.us-toolbar .crm-search{ flex: 1 1 300px; max-width: 520px; }
.us-chips{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.us-chip{ position: relative; display: inline-block; }
.us-chip input{ position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.us-chip label{
  display: inline-flex; align-items: center; gap: 7px; margin: 0; cursor: pointer; user-select: none;
  padding: 8px 15px 8px 12px; border-radius: 999px;
  border: 1.5px solid var(--c-border); background: var(--c-white); color: var(--c-text-muted);
  font-size: 13px; font-weight: 700; letter-spacing: .02em; transition: all .15s ease;
}
.us-chip label::before{
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .35; transition: opacity .15s;
}
.us-chip label:hover{ border-color: var(--c-primary); }
.us-chip input:focus-visible + label{ box-shadow: 0 0 0 3px rgba(51,102,153,.25); }
.us-chip input:checked + label::before{ opacity: 1; }
.us-chip-new input:checked + label{ background: #fff7e6; border-color: #f5a524; color: #a15c07; }
.us-chip-on  input:checked + label{ background: #e8f7ee; border-color: #22a45d; color: #166a3c; }
.us-chip-off input:checked + label{ background: #fdecec; border-color: #e5484d; color: #b3262b; }

.us-legend{ display: flex; flex-wrap: wrap; gap: 6px 20px; margin: -4px 0 14px; font-size: 12px; color: var(--c-text-muted); font-weight: 600; }
.us-legend span{ display: inline-flex; align-items: center; gap: 6px; }
.us-legend img{ width: 16px; height: 16px; }

.us-grid th{ white-space: nowrap; }
.us-grid td{ vertical-align: middle !important; }
.us-grid .us-main{ display: inline; font-weight: 600; color: var(--c-primary-darker); }
.us-grid .us-main.us-line{ display: block; font-weight: 600; }
.us-grid .us-nome{ font-weight: 500; }
.us-grid .us-sub{ display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--c-text-muted); }
.us-grid .us-sub:empty{ display: none; }
.us-grid .us-sub .us-prov:not(:empty)::before{ content: "("; }
.us-grid .us-sub .us-prov:not(:empty)::after{ content: ")"; }
.us-grid .us-mail{ display: inline-block; max-width: 260px; overflow-wrap: anywhere; color: var(--c-primary); }
.us-grid .us-piva:not(:empty)::before{ content: "P.IVA "; }
.us-grid .us-c-stato{ width: 56px; text-align: center; }
.us-grid .us-c-azioni{ width: 1%; white-space: nowrap; }
.us-grid .us-ico{ width: 22px !important; height: 22px !important; padding: 0 !important; background: none !important; transform: none !important; cursor: default !important; }

.us-nl{ display: inline-block; min-width: 38px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.us-nl-Si{ background: #e8f7ee; color: #166a3c; }
.us-nl-No{ background: #eef1f5; color: #7b8794; }

.us-actions{ display: inline-flex; align-items: center; gap: 4px; }
.crm-page table[id*="grid" i] input[type=image].us-act{
  width: 22px !important; height: 22px !important; padding: 7px !important; border-radius: 10px;
  border: 1px solid transparent !important; background: var(--c-white);
  box-shadow: 0 0 0 1px var(--c-border) inset;
}
.crm-page table[id*="grid" i] input[type=image].us-act:hover{ transform: translateY(-1px) scale(1.05); }
.crm-page table[id*="grid" i] input[type=image].us-act-ok:hover{ background: #e8f7ee; box-shadow: 0 0 0 1px #22a45d inset; }
.crm-page table[id*="grid" i] input[type=image].us-act-warn:hover{ background: #fff1e6; box-shadow: 0 0 0 1px #e0752b inset; }
.crm-page table[id*="grid" i] input[type=image].us-act-key:hover{ background: #eaf1f8; box-shadow: 0 0 0 1px #336699 inset; }
.crm-page table[id*="grid" i] input[type=image].us-act-del:hover{ background: #fdecec; box-shadow: 0 0 0 1px #e5484d inset; }
.us-empty{ padding: 28px; text-align: center; font-weight: 600; color: var(--c-text-muted); }

/* paginatore */
.crm-page tr.gridviewPage > td, .crm-page tr.gridviewPage table td{ background: var(--c-white) !important; border: 0 !important; padding: 4px !important; }
.crm-page tr.gridviewPage > td{ padding: 14px 8px !important; text-align: center; }
.crm-page tr.gridviewPage table{ margin: 0 auto; width: auto !important; }
.crm-page tr.gridviewPage a, .crm-page tr.gridviewPage td > span{
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; box-sizing: border-box;
  border-radius: 10px; font-size: 13px; font-weight: 700; text-decoration: none; color: var(--c-primary);
  border: 1px solid var(--c-border); background: var(--c-white);
}
.crm-page tr.gridviewPage a:hover{ background: var(--c-bg-tint-2); border-color: var(--c-primary); }
.crm-page tr.gridviewPage td > span{ background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

@media (max-width: 575px){
  .us-toolbar .crm-search{ flex-basis: 100%; max-width: none; }
  .us-toolbar a.btn-FindNewsL{ width: 100%; }
}
.us-card{ overflow-x: auto; }
.crm-page table.GridView.us-grid{ min-width: 980px; }
.us-grid .us-mail{ overflow-wrap: break-word; }
.crm-section-title img.us-title-ico{ width: 30px; height: 30px; flex: 0 0 auto; }

/* Legenda stati: icone piu' grandi e allineate al testo */
.us-legend{ gap: 8px 24px; font-size: 13px; }
.us-legend span{ gap: 8px; line-height: 20px; }
.us-legend img{ width: 20px; height: 20px; flex: 0 0 auto; display: block; }
.us-grid .us-ico{ width: 24px !important; height: 24px !important; }

/* =====================================================================
   NEWSpromo.aspx: testo principale, download ultimi file, elenco veicoli della news
   ===================================================================== */
.np-toolbar{ gap: 12px 14px; }
.np-toolbar .crm-label{ margin: 0; white-space: nowrap; }
.np-grow{ flex: 1 1 320px; min-width: 0; }
.np-toolbar .np-grow input.crm-input{ height: 42px !important; border-radius: 999px; padding: 0 18px; }
.np-sep{ flex: 0 0 1px; align-self: stretch; margin: 2px 4px; background: var(--c-border); }
.np-dl{ display: inline-flex; gap: 8px; }
.crm-page input[type=image].np-dl-btn{
  box-sizing: content-box; width: 24px !important; height: 24px !important; padding: 9px !important;
  border: 1px solid var(--c-border) !important; border-radius: 12px; background: var(--c-white); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.crm-page input[type=image].np-dl-btn:hover{ transform: translateY(-1px); background: var(--c-bg-tint); box-shadow: var(--shadow-sm); border-color: var(--c-primary) !important; }
.np-grid .np-testo{ display: block; max-width: 560px; color: var(--c-text-muted); overflow-wrap: break-word; }
.np-grid .np-testo:empty::before{ content: "\2014"; }
.us-nl-si{ background: #e8f7ee; color: #166a3c; }
.us-nl-no{ background: #eef1f5; color: #7b8794; }
.np-foot{ display: flex; justify-content: flex-end; margin: 2px 0 22px; }
.np-foot a.btn-FindNewsL{ min-width: 180px; justify-content: center; }
@media (max-width: 575px){
  .np-sep{ display: none; }
  .np-toolbar a.btn-FindNewsL, .np-foot a.btn-FindNewsL{ width: 100%; }
}

/* Menu a tendina (es. "Manager"): la larghezza fissa di 180px mandava a capo la freccina
   dell'ultima voce ("Gestione NEWS promo"). Il sottomenu si adatta alla voce piu' lunga e le voci non vanno a capo. */
nav.main-navigation ul li ul.sub-menu{ width: auto !important; min-width: 180px; }
nav.main-navigation ul li ul.sub-menu li a{ white-space: nowrap; }
nav.main-navigation ul li ul.sub-menu li a i.fa{ margin-left: 6px; }

/* =====================================================================
   Contatti.aspx: modulo a card, schede sedi, mappa, informativa privacy in finestra
   ===================================================================== */
.ct-page{ padding: 36px 0 56px; background: var(--c-bg-tint); }
/* align-items: stretch + flex sulla card sede: "Scrivici" e "Sicurauto B2B" hanno la stessa altezza
   (la card a destra si allunga fino al fondo del modulo). */
.ct-grid{ display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.ct-side{ display: flex; flex-direction: column; gap: 24px; }
.ct-side .ct-office{ flex: 1 1 auto; }
.ct-card{
  background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 28px 30px 30px;
}
.ct-title{ display: flex; align-items: center; gap: 12px; margin: 0 0 6px !important; font-size: 24px !important; font-weight: 800 !important; text-transform: none !important; color: var(--c-primary-darker) !important; }
.ct-title-ico{ display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 11px; background: var(--c-bg-tint-2); }
.ct-title-ico img{ width: 22px; height: 22px; }
.ct-lead{ margin: 0 0 22px; color: var(--c-text-muted); font-size: 15px; }

.ct-fields{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.ct-field{ display: flex; flex-direction: column; min-width: 0; }
.ct-field.ct-full{ grid-column: 1 / -1; }
.ct-field > label{ margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-muted); }
#contact_form input.ct-input, #contact_form textarea.ct-input{
  width: 100%; box-sizing: border-box; margin: 0; height: 46px; padding: 0 14px;
  font-family: var(--font-main); font-size: 15px; color: var(--c-text);
  background: var(--c-bg-tint); border: 1px solid var(--c-border); border-radius: var(--radius-sm); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#contact_form textarea.ct-input{ height: auto; min-height: 150px; max-height: 320px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
#contact_form .ct-input::placeholder{ color: #a3adb8; }
#contact_form .ct-input:focus{ border-color: var(--c-primary); background: var(--c-white); box-shadow: 0 0 0 3px rgba(51,102,153,.15); }
.ct-captcha-row{ display: flex; align-items: center; gap: 12px; }
.ct-captcha-row img{ height: 46px; width: auto; max-width: 150px; border-radius: var(--radius-sm); border: 1px solid var(--c-border); background: var(--c-white); }
.ct-captcha-row input{ flex: 1 1 160px; }
.ct-foot{ display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--c-border); }
.ct-check{ display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 500; color: var(--c-text); cursor: pointer; }
.ct-check input{ width: 18px; height: 18px; margin: 0; accent-color: var(--c-primary); }
.ct-check a{ color: var(--c-primary); font-weight: 700; text-decoration: underline; }
a.ct-send{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 170px; height: 46px; padding: 0 28px;
  border-radius: 999px; background: var(--c-accent); color: #fff !important; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none !important;
  box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, background .15s;
}
a.ct-send:hover{ background: var(--c-accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.ct-office{ padding: 24px 26px 26px; border-top: 4px solid var(--c-primary); }
.ct-office-name{ margin: 0 0 14px !important; font-size: 18px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .04em; color: var(--c-primary-darker) !important; }
.ct-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ct-list li{ display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 0; font-size: 14px; line-height: 1.45; color: var(--c-text); }
.ct-list li img{ flex: 0 0 auto; width: 34px; height: 34px; padding: 7px; box-sizing: border-box; border-radius: 10px; background: var(--c-bg-tint-2); }
.ct-list li > span{ display: flex; flex-direction: column; min-width: 0; padding-top: 1px; overflow-wrap: anywhere; }
.ct-list li small{ font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); }
.ct-list li a{ color: var(--c-primary); font-weight: 600; text-decoration: none; }
.ct-list li a:hover{ text-decoration: underline; }
/* Card sede con le icone del footer (footer-*.svg, tratto bianco): sfondo blu pieno invece della
   tinta chiara, altrimenti l'icona bianca non si vede. Le righe senza icona (P.IVA) restano
   allineate al testo delle altre (34px icona + 14px gap). */
.ct-list-footer li img{ background: var(--c-primary); }
.ct-list-footer li > span:first-child{ padding-left: 48px; }

.ct-map{ margin-top: 24px; padding: 10px; overflow: hidden; }
.ct-map iframe{ display: block; width: 100%; height: 420px; border: 0; border-radius: var(--radius-md); }

/* informativa privacy */
.ct-modal[hidden]{ display: none !important; }
.ct-modal{ position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20,30,40,.55); backdrop-filter: blur(2px); }
.ct-modal-box{ display: flex; flex-direction: column; width: 100%; max-width: 820px; max-height: 88vh; background: var(--c-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.ct-modal-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--c-border); }
.ct-modal-head h3{ margin: 0 !important; font-size: 18px !important; font-weight: 800 !important; text-transform: none !important; color: var(--c-primary-darker) !important; }
.ct-modal-x{ width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--c-bg-tint-2); color: var(--c-text); font-size: 24px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.ct-modal-x:hover{ background: #fde8ea; color: var(--c-accent); }
.ct-modal-body{ padding: 20px 24px; overflow-y: auto; font-size: 14px; line-height: 1.6; color: var(--c-text); }
.ct-modal-body p{ margin: 0 0 12px; }
.ct-modal-foot{ display: flex; justify-content: flex-end; padding: 14px 24px; border-top: 1px solid var(--c-border); background: var(--c-bg-tint); }
.ct-modal-close{ height: 40px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--c-primary); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.ct-modal-close:hover{ background: var(--c-primary-dark); }

@media (max-width: 991px){
  .ct-grid{ grid-template-columns: 1fr; }
  .ct-side{ flex-direction: row; flex-wrap: wrap; }
  .ct-side .ct-office{ flex: 1 1 280px; }
}
@media (max-width: 575px){
  .ct-page{ padding: 22px 0 36px; }
  .ct-card{ padding: 20px 18px 22px; }
  .ct-fields{ grid-template-columns: 1fr; }
  .ct-captcha-row{ flex-wrap: wrap; }
  a.ct-send{ width: 100%; }
  .ct-map iframe{ height: 320px; }
}

/* =====================================================================
   SediOrari.aspx: riusa le card sede di Contatti (ct-office), in griglia
   ===================================================================== */
.sd-intro{ display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; padding: 20px 26px; }
.sd-intro .ct-lead{ margin: 0; }
.sd-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.sd-desc{ margin: -6px 0 18px; font-size: 14px; line-height: 1.5; color: var(--c-text-muted); }
/* più numeri nella stessa riga (es. Tel. Showroom): uno sotto l'altro */
.sd-grid .ct-list li > span a + a{ margin-top: 2px; }

@media (max-width: 1199px){
  .sd-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .sd-grid{ grid-template-columns: 1fr; }
}

/* =====================================================================
   login.aspx: card di accesso centrata
   ===================================================================== */
.lg-page{ padding: 40px 0 70px; background: var(--c-bg-tint); }
.lg-card{
  width: 100%; max-width: 440px; margin: 0 auto; box-sizing: border-box;
  padding: 34px 34px 28px; background: var(--c-white);
  border: 1px solid var(--c-border); border-top: 4px solid var(--c-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.lg-head{ text-align: center; margin-bottom: 22px; }
.lg-ico{ display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; margin-bottom: 12px; border-radius: 16px; background: var(--c-bg-tint-2); }
.lg-ico img{ width: 30px; height: 30px; }
.lg-head h2{ margin: 0 0 6px !important; font-size: 22px !important; font-weight: 800 !important; text-transform: none !important; color: var(--c-primary-darker) !important; }
.lg-head p{ margin: 0; font-size: 14px; color: var(--c-text-muted); }
.lg-field{ display: flex; flex-direction: column; margin-bottom: 16px; }
.lg-label{ margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-muted); }
.lg-card input.lg-input{
  width: 100% !important; box-sizing: border-box; height: 46px; margin: 0; padding: 0 14px;
  font-family: var(--font-main); font-size: 15px; color: var(--c-text);
  background: var(--c-bg-tint); border: 1px solid var(--c-border); border-radius: var(--radius-sm); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.lg-card input.lg-input::placeholder{ color: #a3adb8; }
.lg-card input.lg-input:focus{ border-color: var(--c-primary); background: var(--c-white); box-shadow: 0 0 0 3px rgba(51,102,153,.15); }
.lg-pwd{ position: relative; }
.lg-pwd input.lg-input{ padding-right: 84px; }
.lg-eye{
  position: absolute; right: 6px; top: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--c-primary); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.lg-eye:hover{ background: var(--c-bg-tint-2); }
.lg-alert{ display: block; margin: 0 0 16px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-md); }
.lg-alert:empty{ display: none; }
a.lg-btn{
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; margin-top: 6px;
  border-radius: 999px; background: var(--c-primary); color: #fff !important; text-decoration: none !important;
  font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, background .15s;
}
a.lg-btn:hover{ background: var(--c-primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
a.lg-btn.lg-btn-ghost{ background: var(--c-white); color: var(--c-primary) !important; border: 1.5px solid var(--c-primary); box-shadow: none; }
a.lg-btn.lg-btn-ghost:hover{ background: var(--c-bg-tint-2); }
.lg-forgot{ margin-top: 16px; text-align: center; }
.lg-forgot a{ font-size: 13px; font-weight: 600; color: var(--c-text-muted); text-decoration: underline; }
.lg-forgot a:hover{ color: var(--c-primary); }
.lg-recover{ margin-top: 18px; padding: 18px; background: var(--c-bg-tint); border: 1px solid var(--c-border); border-radius: var(--radius-md); }
.lg-info{ display: block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--c-primary-darker); }
.lg-info:empty{ display: none; }
.lg-foot{ margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--c-border); text-align: center; font-size: 14px; color: var(--c-text-muted); }
@media (max-width: 575px){
  .lg-page{ padding: 24px 0 40px; }
  .lg-card{ padding: 26px 20px 22px; }
}
.lg-foot a.linkRegistra{
  display: inline !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  color: var(--c-primary) !important; font-weight: 700; text-decoration: underline;
}
.lg-foot a.linkRegistra:hover{ background: none !important; color: var(--c-primary-dark) !important; }

/* login.aspx: banner di testata. Il margine superiore di 40px (prima inline) e' stato azzerato dalla regola
   globale "#page-heading{margin-top:0 !important}" e la barra fissa copriva l'inizio del titolo;
   la targhetta sotto il titolo aveva testo bianco su grigio chiaro (illeggibile). */
#page-heading.lg-heading{ margin-top: 44px !important; padding: 44px 0 34px !important; }
#page-heading.lg-heading .page-active{
  display: inline-block; margin-top: 2px;
  background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.30); border-radius: 999px;
}
#page-heading.lg-heading .page-active ul{ padding: 8px 20px !important; }
#page-heading.lg-heading .page-active ul li a,
#page-heading.lg-heading .page-active ul li:last-child a,
#page-heading.lg-heading .page-active ul li a i{
  color: #fff !important; font-size: 12px; font-weight: 600 !important; letter-spacing: .08em; text-decoration: none;
}
#page-heading.lg-heading .page-active ul li a i{ margin-right: 6px; font-size: 12px; }

/* icone vettoriali di crmScadenziario.aspx: dimensioni coerenti nelle celle e nella legenda */
.crmGridScad img{ width: 20px !important; height: 20px !important; }
.crm-legend img{ width: 18px; height: 18px; }