/* ==========================================================================
   CUSTOM.CSS — Dentista Premiato
   Estende Bootstrap 5. Foglio ereditato da un altro sito della rete
   (Onicomicosi Milano / unghiasana.it): i 3 colori di marca qui sotto sono
   sovrascritti a runtime da include/color-override.php (verde del brand),
   ma restavano ancora sul blu di quel sito come valore scritto nel file — non
   dovrebbe mai essere visibile, ma corretto comunque sul verde reale (31/07/2026),
   insieme a diversi rgba(...) hardcoded più sotto che invece BYPASSAVANO del
   tutto l'override (non usavano le variabili --brand/--bc-rgb): erano loro la
   causa del blu ancora visibile nello sfondo di alcuni form e nell'overlay
   delle immagini hero.
   ========================================================================== */

:root{
  --brand:#4C8455;
  --brand-dark:#345A3A;
  --brand-soft:#9DBBA2;
  --grey:#B1B1B1;
  --bg-light:#F6F7F7;
  --bg-lighter:#F2F2F2;
}

html,body{margin:0; padding:0; overflow-x:hidden;}
/* Riserva sempre lo spazio della scrollbar verticale: evita che l'apertura
   di modal/offcanvas (che nascondono temporaneamente lo scroll) causi uno
   scatto/spostamento del contenuto e degli elementi fixed (header, icone). */
html{scrollbar-gutter:stable;}
body{padding-right:0 !important;}
body{font-family:'Lato',sans-serif; color:#3d3d3d;}
h1,h2,h3,.brand-font{font-family:'Montserrat',sans-serif;}
h2{color:var(--brand);}
a{text-decoration:none;}

/* Nasconde il badge reCAPTCHA in basso a destra, come su [handle-cliente].it: l'uso di
   reCAPTCHA resta dichiarato per esteso nel testo ".recaptcha-txt" accanto a
   ogni pulsante di invio dei form, come richiesto dai Termini di servizio di
   Google quando il badge viene nascosto via CSS. */
.grecaptcha-badge{
  bottom:155px !important;
  opacity:0;
  visibility:hidden;
}

/* Leggibilità dei paragrafi nel corpo degli articoli: più respiro tra le righe
   e tra un paragrafo e l'altro rispetto ai default di Bootstrap, per evitare
   l'effetto "muro di testo" nei blocchi con più frasi consecutive. */
main p,
main ul:not([class]),
main ol:not([class]),
main ul:not([class]) li,
main ol:not([class]) li{
  line-height:1.75;
  font-size:1.08rem;
  color:#3d3d3d;
}
main p{
  margin-bottom:1.15rem;
}
main ul:not([class]),
main ol:not([class]){
  margin-bottom:1.15rem;
}
main ul:not([class]) li,
main ol:not([class]) li{
  color:var(--brand);
  font-weight:700;
}
/* Prima lettera sempre maiuscola in ogni voce di lista del corpo pagina,
   indipendentemente da come è scritto il testo sorgente (utile per le voci
   che proseguono una frase e partono quindi minuscole). */
main li::first-letter{
  text-transform:uppercase;
}
main .text-center p{
  text-align:left;
}
@media (min-width:992px){
  main p,
  main ul:not([class]),
  main ol:not([class]),
  main ul:not([class]) li,
  main ol:not([class]) li{
    font-size:1.15rem;
  }
}

/* Link testuali dentro paragrafi/liste del corpo pagina (articoli, intro, ecc.):
   blu del brand e grassetto, invece del blu di default del browser.
   Non tocca i pulsanti CTA, i link di nav/header/footer o le card, che hanno
   già le proprie classi con priorità più alta. */
main p a, main li a{
  color:var(--brand); font-weight:700;
}
main p a:hover, main li a:hover{
  color:var(--brand-dark); text-decoration:underline;
}

/* --------------------------------------------------------------------------
   HEADER + NAV DESKTOP
   Header e nav viaggiano insieme come UNICO blocco fixed: evita sovrapposizioni
   e resta sempre visibile in scroll anche se in futuro finiscono dentro un
   #container con overflow diverso da visible (come nel template esistente).
   -------------------------------------------------------------------------- */
.navbar-brand-band{background:#F6F6F6;}
#logo-ph{max-height:52px; width:auto;}
.brand-wordmark{
  font-family:'Montserrat',sans-serif; font-weight:700; letter-spacing:.03em;
  font-size:1rem; text-transform:uppercase; color:var(--brand); white-space:nowrap;
}
.brand-wordmark-mobile{color:#fff; font-size:.8rem;}
.brand-block{min-width:0; flex:1 1 auto; overflow:hidden;}
.brand-block img{flex-shrink:0;}
.brand-block .brand-wordmark-mobile{
  overflow:hidden; text-overflow:ellipsis; display:block; min-width:0;
}
.mobile-topbar .burger-btn{flex-shrink:0;}
.offcanvas-nav .offcanvas-header .btn-close{flex-shrink:0; margin-left:.75rem;}
@media (max-width:360px){
  .brand-wordmark-mobile{font-size:.7rem;}
  #logo-ph-mobile{max-height:32px;}
}
.header-cta{
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:.85rem;
  color:var(--brand); background:none; border:1.5px solid var(--brand); border-radius:30px;
  padding:.5rem 1.3rem; white-space:nowrap; cursor:pointer;
}
.header-cta:hover{background:var(--brand); color:#fff;}
.header-phone{font-family:'Montserrat',sans-serif; font-weight:600; color:var(--brand); font-size:.95rem;}

.desktop-header-fixed{position:fixed; top:0; left:0; right:0; z-index:1030;}

/* NOTE: valori stimati sul contenuto attuale (logo placeholder + 1 riga di nav).
   Quando inserisci logo e contenuti reali, ricontrolla queste due altezze
   (o calcolale via JS con offsetHeight se possono variare). */
@media (min-width:992px){ body{padding-top:132px;} }
@media (max-width:991.98px){ body{padding-top:70px;} }

.navbar-main{background:var(--brand); box-shadow:0 2px 10px rgba(0,0,0,.08);}
.navbar-main .nav-link{
  color:#fff !important; font-weight:500; font-family:'Montserrat',sans-serif; font-size:.92rem;
  padding:1rem 1.1rem !important; position:relative; transition:opacity .2s;
}
.navbar-main .nav-link::after{
  content:""; position:absolute; left:1.1rem; right:1.1rem; bottom:.55rem; height:2px;
  background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .2s;
}
.navbar-main .nav-item.dropdown:hover > .nav-link::after,
.navbar-main .nav-link:hover::after{transform:scaleX(1);}
.navbar-main .nav-link:hover{color:#fff !important; opacity:.92;}
.navbar-main .dropdown-toggle::after{display:none;}
.navbar-main .nav-chevron{font-size:.65em; opacity:.7; margin-left:.2rem; transition:transform .2s ease;}
.navbar-main .dropdown:hover .nav-chevron{transform:rotate(180deg);}
.navbar-main .dropdown-menu{
  border-radius:0 0 8px 8px; border:0; box-shadow:0 12px 24px rgba(0,0,0,.15);
  margin-top:0; padding:.4rem 0;
}
.navbar-main .dropdown-item{color:var(--brand); padding:.65rem 1.2rem; font-size:.92rem;}
.navbar-main .dropdown-item:hover{background:var(--bg-light); color:var(--brand);}
/* dropdown al passaggio del mouse su desktop, senza bisogno di click */
@media (min-width:992px){
  .navbar-main .dropdown:hover > .dropdown-menu{display:block;}
}

/* --------------------------------------------------------------------------
   NAV MOBILE (<992px) — hamburger fixed + pannello off-canvas che scorre di lato
   -------------------------------------------------------------------------- */
.mobile-header-wrap{position:fixed; top:0; left:0; right:0; width:100%; margin:0; z-index:1030; background:var(--brand); box-shadow:0 2px 10px rgba(0,0,0,.1);}
.mobile-topbar{display:flex; align-items:center; justify-content:space-between; padding:.7rem 1.2rem;}
#logo-ph-mobile{max-height:38px; width:auto;}

/* bottone hamburger animato (si trasforma in X) */
.burger-btn{
  background:none; border:0; width:42px; height:42px; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.burger-btn span, .burger-btn span::before, .burger-btn span::after{
  content:""; position:absolute; width:24px; height:2px; background:#fff; border-radius:2px;
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.burger-btn span{top:20px;}
.burger-btn span::before{top:-8px;}
.burger-btn span::after{top:8px;}
.burger-btn[aria-expanded="true"] span{background:transparent;}
.burger-btn[aria-expanded="true"] span::before{top:0; transform:rotate(45deg);}
.burger-btn[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg);}

/* pannello off-canvas moderno */
.offcanvas-nav{
  width:min(340px,84vw); background:#fff; overflow-x:hidden;
}
/* Bootstrap applica il bordo sinistro con il selettore combinato
   ".offcanvas.offcanvas-end" (due classi): una regola ".offcanvas-nav" da
   sola (una classe) ha specificita' minore e non riesce a batterlo, a
   prescindere dall'ordine dei fogli di stile. Serve pareggiare/superare la
   specificita' per azzerarlo davvero. */
.offcanvas-nav.offcanvas-end{
  border-left:0 !important;
}
.offcanvas-nav .offcanvas-header{
  background:var(--brand); color:#fff; padding:1.4rem 1.4rem;
  box-sizing:border-box;
}
.offcanvas-nav .btn-close{filter:invert(1) brightness(2); opacity:.9;}
.offcanvas-nav .offcanvas-body{padding:0;}

.oc-nav-list{list-style:none; margin:0; padding:.6rem 0;}
.oc-nav-list > li{border-bottom:1px solid #F0F1F6;}
.oc-nav-list a, .oc-nav-list button.oc-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem; width:100%;
  padding:1rem 1.4rem; color:var(--brand); font-family:'Montserrat',sans-serif; font-weight:600;
  font-size:.95rem; background:none; border:0; text-align:left;
}
.oc-nav-list a i.oc-ic, .oc-toggle i.oc-ic{width:20px; color:var(--brand-soft); font-size:1rem;}
.oc-nav-list a:hover, .oc-toggle:hover{background:var(--bg-light);}
.oc-toggle .chev{transition:transform .25s ease; color:var(--brand-soft); font-size:.8rem;}
.oc-toggle[aria-expanded="true"] .chev{transform:rotate(180deg);}
.oc-submenu{list-style:none; margin:0; padding:0 0 .4rem 0; background:var(--bg-light);}
.oc-submenu a{padding:.65rem 1.4rem .65rem 3rem; font-weight:500; font-size:.9rem; color:var(--brand-soft);}
.oc-submenu a:hover{background:#eceefa; color:var(--brand);}

.oc-cta-wrap{padding:1.2rem 1.4rem;}
.oc-cta{
  display:block; width:100%; text-align:center; background:var(--brand); color:#fff !important;
  font-family:'Montserrat',sans-serif; font-weight:700; border:0; border-radius:30px;
  padding:.85rem; margin-bottom:.7rem; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.oc-phone{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  color:var(--brand); font-family:'Montserrat',sans-serif; font-weight:600; font-size:.95rem;
}
.oc-cta-phone{
  background:#39B54A; color:#fff !important; text-decoration:none;
  margin-bottom:0; margin-top:.7rem;
}
.offcanvas-backdrop.show{opacity:.55;}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero{position:relative; overflow:hidden; display:flex; align-items:stretch; background:var(--bg-light);}
.hero-img-ph{
  width:460px; max-width:46%; aspect-ratio:1/1; flex-shrink:0;
  overflow:hidden; background:var(--bg-light);
}
.hero img.hero-img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-caption{
  flex:1; background:rgba(var(--bc-rgb),.92); color:#fff; padding:3rem 2.5rem;
  display:flex; flex-direction:column; justify-content:center; text-align:center;
}
@media (max-width:991px){
  .hero{flex-direction:column;}
  .hero-img-ph{width:100%; max-width:100%; aspect-ratio:1/1;}
  .hero-caption{padding:2rem 1.5rem;}
}

/* --------------------------------------------------------------------------
   BREADCRUMB / NAVIGATORE
   -------------------------------------------------------------------------- */
.navigatore-wf{
  max-width:900px; margin:0 auto; text-align:center; text-transform:uppercase;
  color:var(--grey); font-family:'Montserrat',sans-serif; padding:1.2rem;
}
.navigatore-wf a{color:var(--grey); text-decoration:underline; font-weight:600;}

/* --------------------------------------------------------------------------
   SOMMARIO / TOC
   -------------------------------------------------------------------------- */
.toc-card{background:var(--bg-light); border-radius:10px;}
.toc-card .card-header{background:var(--brand); color:#fff; font-family:'Montserrat',sans-serif;}
.toc-card a{color:var(--brand); font-size:.92rem;}
.toc-link{
  padding:.5rem 0; border-bottom:1px solid rgba(var(--bc-rgb),.12); text-decoration:none;
}
.toc-link:last-child{border-bottom:0;}
.toc-link:hover{color:var(--brand-dark); text-decoration:underline;}

/* --------------------------------------------------------------------------
   IMMAGINI DI CONTENUTO — quadrate ovunque tranne l'hero
   -------------------------------------------------------------------------- */
.img-ph{
  background:var(--bg-light); border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.img-ph img, .img-square img{width:100%; height:100%; object-fit:cover; border-radius:10px; display:block;}
.img-ph-square{
  aspect-ratio:1/1; width:100%; height:auto; max-width:420px; margin:0 auto;
  /* drop-shadow (non box-shadow) perché non viene tagliata dall'overflow:hidden
     dell'elemento stesso: crea un'ombra morbida sotto l'immagine, look più
     moderno rispetto al riflesso speculare classico.
     will-change:filter evita che il browser "perda" il filtro subito dopo
     l'animazione wow/animate__fadeIn (bug di compositing noto su alcuni
     motori quando un elemento animato in opacity ha anche un filter statico). */
  filter:drop-shadow(0 14px 14px rgba(0,0,0,.18));
  will-change:filter;
}
@media (max-width:991.98px){
  .img-ph-square{
    width:100vw; max-width:100vw;
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    margin-bottom:1.75rem;
    border-radius:0;
    filter:drop-shadow(0 18px 16px rgba(0,0,0,.22));
  }
  .img-ph-square img{border-radius:0;}
}

/* --------------------------------------------------------------------------
   TI POTREBBERO INTERESSARE ANCHE (see-also, con foto)
   -------------------------------------------------------------------------- */
.see-also-title-bar{
  background:var(--brand); color:#fff; text-transform:uppercase; text-align:center;
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:1.05rem;
  padding:.9rem 1.5rem; border-radius:8px; margin-bottom:1.5rem;
}
.see-also-card{
  display:block; text-decoration:none; max-width:340px; margin:0 auto;
  padding:1rem; border-radius:10px; text-align:center;
  transition:background-color .2s ease, opacity .2s ease;
}
.see-also-card:hover{background:var(--bg-light); opacity:.9; text-decoration:none;}
.see-also-card img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px;
  border-bottom:6px solid var(--brand); display:block;
}
.see-also-card-title{
  margin-top:.9rem; font-family:'Lato',sans-serif; font-weight:700;
  text-transform:uppercase; font-size:.92rem; color:var(--brand);
}

/* --------------------------------------------------------------------------
   INCIPIT (paragrafo di apertura degli articoli, dopo l'hero)
   -------------------------------------------------------------------------- */
.incipit p{color:var(--brand); font-weight:700; text-align:justify;}

/* --------------------------------------------------------------------------
   TIPS BOX (boxinfo)
   -------------------------------------------------------------------------- */
.tips-box{
  background:var(--brand-soft); color:#fff; border:5px solid #fff; border-radius:30px;
  padding:2rem; font-size:1.05rem;
}
.tips-box p{color:#fff;}
/* Link scritti dal pannello dentro il box "Consiglio pratico": la regola
   `main p a` li colorerebbe di var(--brand) sul fondo var(--brand-soft) del
   box, praticamente illeggibile. Con `inherit` prendono il colore del testo
   del box e restano riconoscibili grazie alla sottolineatura. */
.tips-box p a{color:inherit; text-decoration:underline;}
.tips-box p a:hover{color:inherit; text-decoration:underline; opacity:.85;}

/* --------------------------------------------------------------------------
   NOTA "FONTI" IN FONDO ALLA PAGINA
   -------------------------------------------------------------------------- */
/* I link ai riferimenti restano discreti come il resto della nota: `main p a`
   li farebbe blu del brand e in grassetto, troppo pesante per un pie' di
   pagina. Si riconoscono dalla sottolineatura, e prendono il colore del brand
   solo al passaggio del mouse. */
.page-fonti a{color:inherit; font-weight:inherit; text-decoration:underline;}
.page-fonti a:hover{color:var(--brand); text-decoration:underline;}
.tips-box .icon-wrap{width:70px; margin:0 auto 1rem;}

/* --------------------------------------------------------------------------
   TIPS ENDING (riepilogo "Quindi, ricorda che...")
   -------------------------------------------------------------------------- */
.tips-ending-box{
  max-width:800px; background:var(--bg-light); border-left:5px solid var(--brand);
  border-radius:10px; padding:1.75rem 2rem;
}
.tips-ending-title{
  font-family:'Montserrat',sans-serif; font-weight:700; color:var(--brand);
  font-size:1.25rem; margin-bottom:1rem;
}
.tips-ending-title i{color:var(--brand);}
.tips-ending-list{list-style:none; margin:0 0 1.15rem; padding:0; text-align:left;}
.tips-ending-box .tips-ending-list{margin-bottom:0;}
.tips-ending-list li{
  display:flex; align-items:flex-start; gap:.7rem; color:var(--brand-dark);
  font-size:1.05rem; line-height:1.5; margin-bottom:.8rem;
}
.tips-ending-list li:last-child{margin-bottom:0;}
.tips-ending-list li .bullet-dot{
  display:block; width:9px; height:9px; border-radius:50%; background:var(--brand);
  margin-top:.45rem; flex-shrink:0;
}
.tips-ending-list li strong{color:var(--brand);}

/* --------------------------------------------------------------------------
   FAQ — accordion Bootstrap, stile brand
   -------------------------------------------------------------------------- */
.accordion-button{
  font-family:'Montserrat',sans-serif; font-weight:700; color:var(--brand);
  background:var(--bg-light); border:1px solid var(--brand);
}
.accordion-button:not(.collapsed){background:#DBE3EE; color:var(--brand); box-shadow:none;}
.accordion-button:focus{box-shadow:none;}
.accordion-body{color:var(--brand); line-height:1.8;}

/* --------------------------------------------------------------------------
   RECENSIONI
   -------------------------------------------------------------------------- */
.review-card{border:1px solid #eee; border-radius:10px; height:100%;}
.review-card .stars{color:#f5a623;}

/* --------------------------------------------------------------------------
   BIOBOX SPECIALISTA
   -------------------------------------------------------------------------- */
.bioboxending{
  background-color:var(--bg-lighter); padding:20px; width:auto; height:auto;
  display:block; overflow:auto; border-radius:10px;
}
.bioboxending strong{color:var(--brand-soft); font-weight:bold;}
.bioboxending b{font-weight:bold;}
.bioboxending p{display:block; color:var(--brand-soft);}
.bioboxendingtxt{
  line-height:1.6; color:var(--brand-soft); font-size:1.1em; max-width:880px;
  height:auto; margin:0 auto; overflow:auto; text-align:justify;
}
.bioimage{float:left; padding:20px 20px 10px 0;}
.bioimage img{width:200px; height:auto; border:15px solid var(--brand); border-radius:100%;}
@media (max-width:576px){
  .bioimage{float:none; display:block; margin:0 auto 1rem; padding:0; text-align:center;}
  .bioimage img{width:140px; border-width:10px;}
}

/* --------------------------------------------------------------------------
   FORM CONTATTI (modulomail-centrale)
   -------------------------------------------------------------------------- */
.form-contatti{
  background:var(--brand); color:#fff; border-radius:10px;
  max-width:800px; margin:0 auto;
}
.form-contatti .form-control, .form-contatti .form-select{border:2px solid var(--brand-soft); text-align:center; color:var(--brand); padding:.95rem 1.1rem; font-size:1.05rem; line-height:1.6; min-height:3.4rem;}
.form-contatti textarea.form-control{min-height:auto;}
/* Il <select> (a differenza degli <input>) mostra la sua opzione come testo reale,
   non come placeholder: eredita quindi sempre il colore "color" impostato sopra
   (var(--brand), blu acceso), mentre gli altri campi mostrano un placeholder grigio
   neutro deciso dal browser (non da questo CSS). Fissiamo qui esplicitamente lo
   stesso grigio per il placeholder degli <input>/<textarea> e per il testo della
   <select>, cosi' il colore e' identico e non dipende dal browser. I browser
   Chromium/WebKit inoltre ignorano text-align sullo stato "chiuso" della select:
   la ricentriamo con text-align-last. */
.form-contatti .form-control::placeholder, .form-contatti textarea::placeholder{color:#495057; opacity:1;}
.form-contatti .form-select{color:#495057; text-align-last:center; -moz-text-align-last:center;}
.form-contatti .btn-submit{background:var(--brand-soft); border:2px solid #fff; color:#fff; text-transform:uppercase; font-style:italic; padding:.9rem 2rem;}
.form-contatti .btn-submit:hover{background:#D0D0D0; color:#706E6E;}
.form-contatti a{color:#fff;}
.form-contatti .checkbox-div-grey{display:inline-block; font-size:.85rem; text-align:left;}
.form-contatti .recaptcha-txt{opacity:.85;}

/* Checkbox custom "grey" (su sfondo blu: form-contatti / modal prenotazione) */
.check-grey:not(:checked),
.check-grey:checked{position:absolute; left:-9999px;}
.check-grey:not(:checked) + label,
.check-grey:checked + label{position:relative; padding-left:1.95em; cursor:pointer;}
.check-grey:not(:checked) + label::before,
.check-grey:checked + label::before{
  content:''; position:absolute; left:0; top:.05em; width:1.15em; height:1.15em;
  border:2px solid var(--brand-soft); border-radius:4px; background:#fff;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.1);
}
.check-grey:not(:checked) + label::after,
.check-grey:checked + label::after{
  content:'\2713'; position:absolute; top:.14em; left:.24em; font-size:1.1em;
  line-height:.8; color:var(--brand-soft); transition:all .2s ease;
}
.check-grey:not(:checked) + label::after{opacity:0; transform:scale(0);}
.check-grey:checked + label::after{opacity:1; transform:scale(1);}
.check-grey:focus + label::before{border-color:#fff; box-shadow:0 0 0 .15rem rgba(255,255,255,.35);}
.check-grey + label:hover::before{border-color:#fff;}
.title-contatti-logo{max-height:60px; width:auto;}
.title-contatti-logo-lg{max-height:110px;}

/* --------------------------------------------------------------------------
   MINIFORM TOP (richiamata rapida, in alto pagina)
   -------------------------------------------------------------------------- */
.miniformtop{
  background:#fff; border-radius:0; overflow:hidden; margin:0 0 2rem;
  box-shadow:0 8px 30px rgba(var(--bc-dark-rgb),.12); border:none; border-bottom:1px solid var(--bg-lighter);
}

/* Colonna foto: immagine reale a piena copertura + overlay per leggibilità del testo */
.miniformtop-visual{
  position:relative; min-height:170px; background-size:cover; background-position:center;
}
.miniformtop-visual::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(var(--bc-rgb),.25) 0%, rgba(var(--bc-dark-rgb),.82) 100%);
}
.miniformtop-visual-caption{
  position:relative; z-index:1; height:100%; display:flex;
  align-items:center; justify-content:center; padding:1.5rem;
}
.miniformtop-visual-logo{max-width:42%; height:auto;}
@media (min-width:992px){
  .miniformtop-visual{min-height:100%;}
}

.miniformtop-fields{padding:1.8rem 2.2rem; background:var(--bg-light);}
.miniformtitle{
  font-family:'Montserrat',sans-serif; font-weight:600; color:var(--brand-dark);
  font-size:1.05rem; line-height:1.5; margin-bottom:.9rem;
}
.miniformtitlebig{display:block; font-size:1.2rem; font-weight:700; color:var(--brand); margin-top:.2rem;}

.tableborder-miniformtop, .tableborder-miniformtop-tableselect{
  border:1.5px solid #d7d9e8; background:#fff; color:#3a3a3a;
  border-radius:8px; padding:.65rem .9rem; font-size:.95rem;
}
select.tableborder-miniformtop-tableselect{color:#3a3a3a;}
.tableborder-miniformtop::placeholder{color:#8b8fa8;}
.tableborder-miniformtop:focus, .tableborder-miniformtop-tableselect:focus{
  border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(var(--bc-rgb),.15); outline:none;
}
.miniformtop-required-note{font-size:.8rem; color:#8a8fa8; margin-bottom:.9rem;}

.align-miniformtop{text-align:left; margin-top:1rem;}
.checkbox-miniformtop{font-size:.83rem; color:#555; display:inline-block; line-height:1.5;}
.checkbox-miniformtop a{color:var(--brand); text-decoration:underline;}

/* Checkbox custom "miniformtop" (su sfondo chiaro: miniform-top.php) */
.check-miniformtop:not(:checked),
.check-miniformtop:checked{position:absolute; left:-9999px;}
.check-miniformtop:not(:checked) + label,
.check-miniformtop:checked + label{position:relative; padding-left:1.95em; cursor:pointer;}
.check-miniformtop:not(:checked) + label::before,
.check-miniformtop:checked + label::before{
  content:''; position:absolute; left:0; top:.05em; width:1.15em; height:1.15em;
  border:1.5px solid #d7d9e8; border-radius:5px; background:#fff;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.1);
}
.check-miniformtop:not(:checked) + label::after,
.check-miniformtop:checked + label::after{
  content:'\2713'; position:absolute; top:.14em; left:.24em; font-size:1.1em;
  line-height:.8; color:var(--brand); transition:all .2s ease;
}
.check-miniformtop:not(:checked) + label::after{opacity:0; transform:scale(0);}
.check-miniformtop:checked + label::after{opacity:1; transform:scale(1);}
.check-miniformtop:focus + label::before{border-color:var(--brand-dark); box-shadow:0 0 0 .15rem rgba(var(--bc-rgb),.2);}
.check-miniformtop + label:hover::before{border-color:var(--brand-dark);}

.miniformtop-submit-row{text-align:center; margin-top:.6rem;}
.miniformtop-recaptcha-txt{font-size:.78rem; color:#8a8fa8; margin-top:.6rem;}

.submit-miniformtop{
  background:var(--brand); border:none; color:#fff; text-transform:uppercase;
  font-weight:600; letter-spacing:.03em; font-size:.9rem; padding:.75rem 2.4rem;
  border-radius:30px; transition:background .2s ease;
}
.submit-miniformtop:hover{background:var(--brand-dark);}

/* --------------------------------------------------------------------------
   MINIFORM RAPIDO (miniform-intermedio, solo telefono)
   -------------------------------------------------------------------------- */
.miniform-container{
  display:flex; flex-wrap:wrap; align-items:stretch; background:#fff; color:#333;
  border-radius:14px; overflow:hidden; max-width:720px; margin:2rem auto;
  box-shadow:0 8px 30px rgba(var(--bc-dark-rgb),.12); border:1px solid var(--bg-lighter);
}
.miniform-photo{
  position:relative; flex:0 0 160px; min-height:120px; background-size:cover; background-position:center;
}
.miniform-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(var(--bc-rgb),.25) 0%, rgba(var(--bc-dark-rgb),.82) 100%);
}
.miniform-photo-caption{
  position:relative; z-index:1; height:100%; display:flex; align-items:center;
  justify-content:center; padding:.5rem;
}
.miniform-photo-logo{max-width:55%; height:auto;}
.miniform-inside{flex:1 1 320px; padding:1.5rem 1.8rem; text-align:left;}
.color-rapido{
  font-family:'Montserrat',sans-serif; font-weight:600; color:var(--brand-dark);
  margin-bottom:1rem; line-height:1.5;
}
.miniform-required-note{font-size:.8rem; color:#8a8fa8; margin-bottom:.9rem;}
.miniform-row{display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:.9rem;}
.tableborder-miniform{
  flex:1 1 180px; border:1.5px solid #d7d9e8; background:#fff; color:#3a3a3a;
  border-radius:8px; padding:.6rem .9rem; margin-bottom:0;
}
.tableborder-miniform::placeholder{color:#8b8fa8;}
.tableborder-miniform:focus{border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(var(--bc-rgb),.15); outline:none;}
.checkbox-div-rapido{font-size:.8rem; color:#555; margin-bottom:.8rem; line-height:1.5;}
.link_white{color:var(--brand); text-decoration:underline;}

/* Checkbox custom "rapido" (su sfondo chiaro: miniform-intermedio.php) */
.check-rapido:not(:checked),
.check-rapido:checked{position:absolute; left:-9999px;}
.check-rapido:not(:checked) + label,
.check-rapido:checked + label{position:relative; padding-left:1.95em; cursor:pointer;}
.check-rapido:not(:checked) + label::before,
.check-rapido:checked + label::before{
  content:''; position:absolute; left:0; top:.05em; width:1.15em; height:1.15em;
  border:1.5px solid #d7d9e8; border-radius:100%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.check-rapido:not(:checked) + label::after,
.check-rapido:checked + label::after{
  content:'\2713'; position:absolute; top:.14em; left:.24em; font-size:1.1em;
  line-height:.8; color:var(--brand); transition:all .2s ease;
}
.check-rapido:not(:checked) + label::after{opacity:0; transform:scale(0);}
.check-rapido:checked + label::after{opacity:1; transform:scale(1);}
.check-rapido:focus + label::before{border-color:var(--brand-dark); box-shadow:0 0 0 .15rem rgba(var(--bc-rgb),.2);}
.check-rapido + label:hover::before{border-color:var(--brand-dark);}
.submit-miniform{
  background:var(--brand); border:none; color:#fff; text-transform:uppercase;
  font-weight:600; letter-spacing:.03em; font-size:.85rem; padding:.65rem 1.6rem;
  border-radius:30px; white-space:nowrap; transition:background .2s ease;
}
.submit-miniform:hover{background:var(--brand-dark);}
.miniform-rechatpchatxt{font-size:.75rem; color:#8a8fa8;}

@media (max-width:576px){
  .miniform-photo{flex-basis:100%; min-height:100px;}
}

/* --------------------------------------------------------------------------
   CTA BUTTONS (contattaci / prenota)
   -------------------------------------------------------------------------- */
.container-button{display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem;}
.submit-body, .prenota-body{
  display:inline-block; padding:.75rem 1.75rem; border-radius:var(--btn-radius); text-transform:uppercase;
  font-weight:600; text-decoration:none; font-size:.9rem; text-align:center;
  min-width:215px; box-sizing:border-box;
}
.submit-body{background:var(--brand); color:#fff;}
.submit-body:hover{background:var(--brand-dark); color:#fff;}
.prenota-body{background:var(--brand-soft); color:#fff;}
.prenota-body:hover{background:var(--brand-dark); color:#fff;}
@media (max-width:576px){
  .container-button{flex-direction:column; align-items:stretch;}
  .submit-body, .prenota-body{width:100%; min-width:0;}
}

/* Uniforma font e padding di tutti i pulsanti nel contenuto a quelli di
   "Contattaci ora" / "Prenota una visita" (colore già impostato inline o da classe) */
main .btn{
  padding:.75rem 1.75rem; border-radius:var(--btn-radius); text-transform:uppercase;
  font-weight:600; font-size:.9rem;
}

@media (max-width:576px){
  main .btn{display:block; width:100%; margin-left:auto; margin-right:auto; text-align:center; box-sizing:border-box;}
}

/* --------------------------------------------------------------------------
   ROLLOVER OMOGENEO DEI PULSANTI DEL SITO
   Tutti i pulsanti di navigazione/CTA del sito (non quelli dei form, che hanno
   un loro stile dedicato) usano lo stesso effetto al passaggio del mouse: lo
   sfondo passa al colore scuro del brand, con transizione morbida.

   IMPORTANTE: il colore dei pulsanti NON va piu' scritto inline nell'HTML
   (style="background:var(--brand);color:#fff;"), perche' lo stile inline vince
   sempre sulla regola :hover e ne annulla l'effetto. Usare invece le classi
   .btn-brand (colore primario) e .btn-brand-soft (colore secondario).
   -------------------------------------------------------------------------- */
main .btn, .btn-brand, .btn-brand-soft,
.submit-body, .prenota-body,
.header-cta, .oc-cta{
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Colore primario del brand */
.btn.btn-brand{background:var(--brand); color:#fff;}
.btn.btn-brand:hover, .btn.btn-brand:focus-visible{background:var(--brand-dark); color:#fff;}

/* Colore secondario del brand */
.btn.btn-brand-soft{background:var(--brand-soft); color:#fff;}
.btn.btn-brand-soft:hover, .btn.btn-brand-soft:focus-visible{background:var(--brand-dark); color:#fff;}

/* Pulsante CTA del menu mobile (offcanvas): stesso comportamento */
.oc-cta:hover{background:var(--brand-dark); color:#fff !important;}
.oc-cta-phone:hover{background:#2f9c3e; color:#fff !important;}

/* --------------------------------------------------------------------------
   PAGINA STANDALONE PRENOTAZIONE (prenota-visita.php)
   -------------------------------------------------------------------------- */
.container-form-prenotazioni{background:var(--bg-light); min-height:100vh;}
.tableborder, .tableborder-textarea, .tableselect{border:2px solid var(--brand-soft); text-align:center; color:var(--brand-soft);}
.containter-tableborder{margin-bottom:.75rem;}
.font18{font-size:1.1rem;}

/* --------------------------------------------------------------------------
   MODAL PRENOTAZIONE (overlay on-page, richiamato dal pulsante "Prenota una visita")
   Riusa lo stile di .form-contatti dentro il modal-content: il modal-dialog gestisce
   la larghezza massima, quindi qui basta annullare margin/max-width propri di
   .form-contatti per non avere effetti ridondanti.
   -------------------------------------------------------------------------- */
.modal-prenotazione-dialog{max-width:800px;}
.modal-prenotazione-dialog .form-contatti{max-width:none; margin:0;}
.modal-prenotazione-close{position:absolute; top:1rem; right:1rem; z-index:5;}

/* --------------------------------------------------------------------------
   ICONE FISSE (telefono / mappa / email / whatsapp)
   -------------------------------------------------------------------------- */
.fixed-icons{position:fixed; bottom:100px; right:20px; z-index:1000;}
.fixed-icons a{
  width:52px; height:52px; border-radius:50%; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:8px; opacity:.85;
}
.fixed-icons a.whatsapp{background:#25D366;}
.fixed-icons a.map{background:#3139C9;}
.fixed-icons a.back-to-top{
  background:var(--brand-dark); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.fixed-icons a.back-to-top.show{opacity:.85; visibility:visible; transform:translateY(0);}

/* --------------------------------------------------------------------------
   BANNERCALL — striscia fissa in fondo con il numero di telefono
   (stessa grafica di [handle-cliente].it)
   -------------------------------------------------------------------------- */
#numero-smartphone{
  display:block;
  background:rgba(var(--bc-rgb), var(--bc-alpha, .8));
  margin-right:auto; margin-left:auto; text-align:center;
  height:auto; width:100%;
  position:fixed; bottom:0; right:0; z-index:900; line-height:10px;
}
#numero-smartphone img{display:block; width:70%; height:70px; margin:10px auto;}
@media only screen and (max-width:699px){
  #numero-smartphone img{width:95%; height:70px; margin:5px auto;}
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
footer{background:var(--brand-dark); color:#F0F0F0; font-family:'Lato',sans-serif; padding-top:3rem; padding-bottom:140px;}
footer h6{font-family:'Montserrat',sans-serif; font-weight:600; letter-spacing:.03em; color:#fff;}
footer a{color:#fff;}
footer a:hover{color:var(--grey); text-decoration:underline;}
footer p.small, footer p{font-size:.95rem; line-height:1.6;}
.footer-phone-link{font-size:1.75rem; font-weight:700; display:inline-flex; align-items:center; gap:.6rem;}
.footer-phone-link i{font-size:2.1rem;}
@media (min-width:768px){
  footer p{text-align:justify;}
}

/* --------------------------------------------------------------------------
   CTA nei blocchi testo/immagine alternati (index.php: "Contattaci",
   "Scopri il nostro team", "Scopri di più su...", ecc.). Su desktop restano
   allineati a sinistra come il testo del blocco; su mobile, dove la colonna
   immagine va sopra e il testo occupa tutta la larghezza, il bottone va
   centrato per coerenza visiva con il resto dell'impaginazione mobile.
   -------------------------------------------------------------------------- */
@media (max-width:991.98px){
  .btn-content-cta{display:table; margin-left:auto; margin-right:auto;}
}

/* --------------------------------------------------------------------------
   WIDGET ELFSIGHT DENTRO LA PAGINA (include/elfsight-inline.php)
   Blocco stampato sotto il sommario — e, nelle pagine che non ce l'hanno
   (home compresa), sotto il mini-form in alto. Nasce per il calendario
   appuntamenti, ma vale per qualunque widget a cui, dal pannello "Script e
   plugin", si assegni la posizione "dentro la pagina".
   Il titolo riprende lo stile dei titoli di sezione (Montserrat, colore del
   brand); su mobile scende di corpo per non spezzarsi su troppe righe.
   -------------------------------------------------------------------------- */
.elfsight-inline{margin-top:1.5rem; margin-bottom:2rem;}
.elfsight-inline-item + .elfsight-inline-item{margin-top:2.5rem;}
/* Il widget Elfsight si disegna con una larghezza propria, più stretta del
   contenitore: lo si tiene centrato e si centra anche il titolo. Senza questo,
   il titolo parte dal bordo del contenitore da 1200px e tutto il blocco sembra
   spostato a sinistra rispetto al sommario e al resto della pagina. */
.elfsight-inline-item > [class*="elfsight-app-"]{margin-left:auto; margin-right:auto;}
.elfsight-inline-title{
  font-size:1.9rem; font-weight:400; line-height:1.25;
  text-transform:uppercase; margin-bottom:1rem; text-align:center;
}
.elfsight-inline-title i{font-size:1.6rem;}
@media (max-width:767.98px){
  .elfsight-inline{margin-top:1rem; margin-bottom:1.5rem;}
  .elfsight-inline-title{font-size:1.25rem;}
  .elfsight-inline-title i{font-size:1.1rem;}
}


/* --------------------------------------------------------------------------
   BLOCCHI DI CONTENUTO — il testo contorna l'immagine (da 992px in su)
   Prima l'immagine e il testo stavano in due colonne affiancate (col-lg-5 /
   col-lg-7): quando il testo era piu' alto dell'immagine restava una grande
   fascia vuota accanto alla foto, e la colonna di testo era stretta.
   Ora l'immagine e' un box in float dentro il flusso del testo, come nel
   template di piedesano.it (.box-pic-left / .box-pic-right): il testo la
   contorna e poi riprende a tutta larghezza.
   Sotto i 992px non cambia nulla: l'immagine resta a tutta larghezza sopra
   il testo, esattamente come prima.
   -------------------------------------------------------------------------- */
@media (min-width:992px){
  /* Il float va contenuto, ma NON con overflow:hidden: quello ritaglierebbe
     il drop-shadow dell'immagine (la foto sta a 12px dal bordo del
     contenitore e l'ombra sfuma per 14px, quindi veniva tagliata di netto
     sul lato sinistro). Il clearfix con ::after contiene il float senza
     ritagliare nulla. */
  .block-flow::after{ content:""; display:block; clear:both; }
  .block-flow .block-pic{
    float:left;
    width:48%; max-width:500px;            /* 500px su desktop, come piedesano */
    margin:.35rem 2rem 1.25rem 0;
  }
  .block-flow .block-pic-right{
    float:right;
    margin:.35rem 0 1.25rem 2rem;
  }
}

/* --------------------------------------------------------------------------
   TESTO GIUSTIFICATO (come su piedesano.it) — desktop, tablet e mobile.
   L'ultima riga di ogni paragrafo resta a bandiera: e' il comportamento
   normale di text-align:justify, nessuna giustificazione forzata
   (text-align-last resta "auto"). Nessuna sillabazione, come su piedesano.
   Restano come prima i testi di servizio: note, didascalie e tutto cio' che
   ha gia' un allineamento esplicito (.text-center, .small, .text-muted).
   -------------------------------------------------------------------------- */
main p,
main ul:not([class]) li,
main ol:not([class]) li{
  text-align:justify;
  text-align-last:auto;
}
main p.small,
main .text-muted,
main .text-center,
main .text-center p,
main figcaption{
  text-align:inherit;
}

/* --------------------------------------------------------------------------
   TITOLI DEI BLOCCHI CENTRATI SU MOBILE (sotto i 992px, dove la foto e' a
   tutta larghezza sopra il testo). Il selettore prende solo gli H2 "nudi",
   cioe' i titoli dei blocchi di contenuto: quelli con una classe propria
   (.h5/.h6 delle legal, .text-center di FAQ e footer, .accordion-header,
   .elfsight-inline-title) mantengono il loro allineamento.
   -------------------------------------------------------------------------- */
@media (max-width:991.98px){
  main h2:not([class]){ text-align:center; }
}


/* --------------------------------------------------------------------------
   COERENZA DEI PULSANTI (03/09/2026)

   1) RAGGIO UNICO — tutti i pulsanti del sito (contenuto, fascia hero, header,
      menu mobile, miniform, form e pannelli di modifica) usano lo stesso
      raggio, definito una volta sola in var(--btn-radius). Per cambiare la
      forma di TUTTI i pulsanti in futuro basta toccare quella variabile.
   2) CTA DELLA FASCIA HERO — stesso sfondo e stesso bordo del pulsante di
      invio del modal di prenotazione (.form-contatti .btn-submit), e larghezza
      massima var(--btn-cta-max-width) invece di occupare tutta la fascia
      (era un figlio "stretch" di .hero-caption, che e' un flex in colonna).
   3) CTA DEI BLOCCHI CON TITOLO H2 — stessa larghezza massima, sia da fermo
      su desktop sia quando su mobile diventano a piena larghezza.

   NOTA: questo blocco sta in fondo al foglio di proposito, cosi' l'ordine di
   cascata risolve da solo i conflitti con le regole piu' in alto. Le due
   regole che fissavano il raggio a 6px (.submit-body/.prenota-body e
   main .btn) sono state convertite a var(--btn-radius); qui sotto si
   aggiungono i pulsanti che il raggio non lo prendevano da li'.
   -------------------------------------------------------------------------- */
:root{
  --btn-radius:30px;          /* forma "a pillola", quella dei miniform */
  --btn-cta-max-width:350px;  /* larghezza massima dei CTA hero e dei blocchi */
}

.btn,
.submit-body, .prenota-body,
.header-cta, .oc-cta, .oc-cta-phone,
.form-contatti .btn-submit,
.submit-miniform, .submit-miniformtop{
  border-radius:var(--btn-radius);
}

/* CTA della fascia hero: stesso sfondo e stesso bordo del pulsante del modal
   di prenotazione. I due nomi di classe (.hero-caption .btn.prenota-body)
   servono a battere per specificita' .btn.btn-brand, che sul pulsante c'e'
   ancora e altrimenti imporrebbe il colore primario. */
.hero-caption .btn.prenota-body{
  background:var(--brand-soft); color:#fff; border:2px solid #fff;
}
.hero-caption .btn.prenota-body:hover,
.hero-caption .btn.prenota-body:focus-visible{
  background:var(--brand-dark); color:#fff;
}

/* Larghezza del CTA della fascia hero: centrato e mai piu' largo del massimo
   (sotto quella soglia — telefoni — resta a piena larghezza della fascia). */
.hero-caption .btn{
  align-self:center; width:100%; max-width:var(--btn-cta-max-width);
}

/* Stessa larghezza massima per i CTA dei blocchi testo/immagine con titolo H2.
   L'allineamento resta quello di prima: a sinistra su desktop, centrato da
   991.98px in giu' (le regole piu' in alto nel foglio non vengono toccate). */
main .btn.btn-content-cta{
  max-width:var(--btn-cta-max-width);
}

/* --------------------------------------------------------------------------
   PROPORZIONI UNIFORMI DEI PULSANTI DI INVIO (03/09/2026)

   Dopo il raggio unico restavano diversi gli spazi interni: i CTA del contenuto
   stanno a .75rem/1.75rem, mentre i tre pulsanti di invio avevano ciascuno i
   suoi (.75rem/2.4rem il miniform in alto, .65rem/1.6rem il miniform rapido,
   .9rem/2rem quello dei form e del modal, per giunta a 16px e in corsivo).
   Qui i tre pulsanti di invio prendono le stesse proporzioni dei CTA: stessi
   spazi interni, stesso corpo (.9rem) e stesso peso (600), niente corsivo.

   Restano di proposito fuori: il pulsante dell'header (vive in una barra ad
   altezza fissa) e il CTA del menu mobile (e' a piena larghezza del pannello).
   Colori, rollover e bordi non vengono toccati.
   -------------------------------------------------------------------------- */
.submit-miniformtop, .submit-miniform,
.form-contatti .btn-submit{
  padding:.75rem 1.75rem;
  font-size:.9rem;
  font-weight:600;
  font-style:normal;
}

/* --------------------------------------------------------------------------
   ALLINEAMENTO VERTICALE DEL TESTO NEL CTA DEL MENU MOBILE (03/09/2026)

   Misurato sui pixel (Chromium, font veri del sito): in tutti i pulsanti il
   blocco delle lettere e' centrato entro un pixel, tranne il CTA del menu
   mobile, dove stava 1,4px sopra il centro (2,75px di differenza fra lo spazio
   sopra e quello sotto). E' l'unico pulsante con testo in minuscolo, senza
   icona e in Montserrat 16px: la riga di testo e' alta quanto vuole il font,
   e l'inchiostro (dalle maiuscole alla linea di base) non ha discendenti sotto
   la base, quindi cade sopra il centro geometrico.

   Correzione: 1px di spazio spostato da sotto a sopra (valore scelto misurando,
   non a occhio: porta lo scarto da -2,75px a -0,75px, cioe' in linea con tutti
   gli altri pulsanti). La somma dei due valori non cambia, quindi l'altezza del
   pulsante resta identica.
   Il pulsante del telefono (.oc-cta-phone) e' escluso: ha l'icona, che regge
   la riga di testo, e li' il testo era gia' centrato.
   -------------------------------------------------------------------------- */
.oc-cta:not(.oc-cta-phone){
  padding-top:calc(.85rem + 1px);
  padding-bottom:calc(.85rem - 1px);
}