/* ============================================================================
   pt-mono.css — un solo colore di pagina su tutto il front-end (2026-07-30)
   Il tema alternava --pt-surface-2 (#FAFAF7) e --pt-surface (#FFFFFF) fascia
   per fascia: da qui il gradino di colore fra una sezione e l'altra. Qui le
   fasce diventano trasparenti e l'unico fondo e' quello del body.
   Le card restano bianche: il contrasto lo fanno loro, non le fasce.
   Caricato SOLO dal front-end (l'admin non lo include).
   ========================================================================== */
:root{ --pt-page:#FAFAF7; }
html[data-theme="dark"]{ --pt-page:#0F1626; }

html, body{
  background:var(--pt-page)!important;
  background-image:none!important;
}
.main-wrapper,
.main-wrapper > .content,
.content,
.page-wrapper,
.main-content{
  background:transparent!important;
  background-image:none!important;
}

/* fasce a tutta larghezza: nessun fondo proprio */
.main-wrapper > section,
.main-wrapper > div > section,
.content > section,
.content > div > section,
section.popular-bg,
section.pad-set,
.hero-section,
.service-section,
.blog-section,
.breadcrumb-bar,
.pt-ad-slot,
.about-section,
.work-section,
.category-section,
.provider-section,
.price-section,
.faq-section,
.testimonial-section,
.client-section,
.app-section,
.subscribe-section,
.doctor-section,
.popular-section{
  background:transparent!important;
  background-image:none!important;
}

/* la fascia briciole di pane: solo una linea di separazione, niente colore */
.breadcrumb-bar{border-bottom:1px solid var(--pt-line,rgba(20,16,14,.08))}
html[data-theme="dark"] .breadcrumb-bar{border-bottom-color:rgba(255,255,255,.08)}

/* le card mantengono la superficie bianca (unico stacco cromatico voluto) */
.card,.feature-shop,.pt-panel,.pt-stat,.shop-card,.blog-widget,.provider-widget{
  background:var(--pt-surface,#fff);
}



/* Gli <style> inline delle view arrivano DOPO questo foglio: a parita' di
   specificita' vincerebbero loro. :root alza il peso quel tanto che basta. */
html:root,
html:root body,
html:root[data-theme] body,
html:root[data-theme="dark"] body{
  background:var(--pt-page)!important;
  background-color:var(--pt-page)!important;
  background-image:none!important;
}
html:root body .main-wrapper,
html:root[data-theme] body .main-wrapper{
  background:transparent!important;background-color:transparent!important;background-image:none!important;
}
html:root body .pt-ad-slot,
html:root[data-theme] body .pt-ad-slot,
html:root[data-theme] body section.popular-bg,
html:root[data-theme] body section.pad-set,
html:root[data-theme] body .hero-section,
html:root[data-theme] body .service-section,
html:root[data-theme] body .blog-section{
  background:transparent!important;background-color:transparent!important;background-image:none!important;
}

/* ============================================================================
   Footer ridotto a una barra sola (2026-07-30)
   Via il blocco grande con logo/colonne: resta la riga sottile (copyright +
   privacy/termini), trattata come la barra delle bolle in alto: vetro
   semi-opaco + blur, ombra SOLO verso l'alto, larghezza piena.
   E' fissa in basso, quindi il contenuto le scorre sotto e si vede sfocato.
   ========================================================================== */
.footer .footer-top{display:none!important}
.footer .footer-widget,
.footer .footer-brand,
.footer .footer-social{display:none!important}
.footer{
  background:transparent!important;background-image:none!important;
  padding:0!important;margin:0!important;border:0!important;box-shadow:none!important;
}

.footer .footer-bottom{
  position:fixed;left:0;right:0;bottom:0;z-index:9998;
  margin:0!important;padding:9px 0!important;
  background:rgba(252,251,248,.72)!important;
  -webkit-backdrop-filter:blur(20px) saturate(165%);
  backdrop-filter:blur(20px) saturate(165%);
  border:0!important;
  border-top:1px solid rgba(20,16,14,.08)!important;
  /* blur/ombra solo verso l'alto: sotto c'e' il bordo dello schermo */
  box-shadow:0 -1px 2px rgba(20,16,14,.05),0 -12px 34px rgba(20,16,14,.08)!important;
}
html[data-theme="dark"] .footer .footer-bottom{
  background:rgba(20,26,38,.72)!important;
  border-top-color:rgba(255,255,255,.10)!important;
  box-shadow:0 -1px 2px rgba(0,0,0,.35),0 -14px 38px rgba(0,0,0,.45)!important;
}

/* una riga sola: copyright a sinistra, link a destra */
.footer .footer-bottom .copyright,
.footer .footer-bottom .copyright > .row{margin:0!important;padding:0!important}
.footer .footer-bottom .copyright > .row{align-items:center}
.footer .footer-bottom .copyright-text p{margin:0!important;font-size:13px;line-height:1.3}
.footer .footer-bottom .copyright-menu{display:flex;justify-content:flex-end}
.footer .footer-bottom .policy-menu{display:flex;gap:18px;margin:0!important;padding:0!important;list-style:none}
.footer .footer-bottom .policy-menu li{margin:0!important;padding:0!important;border:0!important}
.footer .footer-bottom .policy-menu li::after{content:none!important}
.footer .footer-bottom .policy-menu a{font-size:13px}

/* il fondo ora e' chiaro: il testo del vecchio footer scuro va invertito */
.footer .footer-bottom,
.footer .footer-bottom p,
.footer .footer-bottom a,
.footer .footer-bottom .copyright-text p{color:#14100E!important}
.footer .footer-bottom a{text-decoration:none;opacity:.72;transition:opacity .2s}
.footer .footer-bottom a:hover{opacity:1;color:var(--bm-accent,#E5541F)!important}
html[data-theme="dark"] .footer .footer-bottom,
html[data-theme="dark"] .footer .footer-bottom p,
html[data-theme="dark"] .footer .footer-bottom a,
html[data-theme="dark"] .footer .footer-bottom .copyright-text p{color:#E7EAF0!important}

/* spazio per non far finire l'ultimo contenuto sotto la barra */
html:root body{padding-bottom:52px}
/* il pulsante torna-su sale sopra la barra */
#ptfx-top{bottom:70px!important}

@media (max-width:991px){
  /* su mobile c'e' gia' la barra di navigazione in basso: qui la riga torna
     statica, cosi' non si sovrappongono */
  .footer .footer-bottom{
    position:static;box-shadow:none!important;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:transparent!important;padding:14px 0 18px!important;
  }
  html:root body{padding-bottom:0}
  #ptfx-top{bottom:86px!important}
  .footer .footer-bottom .copyright > .row{text-align:center;row-gap:8px}
  .footer .footer-bottom .copyright-menu{justify-content:center}
}


/* ============================================================================
   Spazio per le bolle fisse (2026-07-30)
   Togliendo l'header dal flusso, il contenuto delle pagine interne partiva da
   y=0 e finiva sotto le bolle (es. i tab Noleggiatore/Prestatore e il pulsante
   Filtri su /all-services). Qui il contenuto scende quel tanto che basta.
   In home no: l'hero e' pensato per stare sotto le bolle.
   ========================================================================== */
html:root.ptfx-bm .main-wrapper{
  padding-top:calc(var(--bm-size,52px) + 30px)!important;
}
html:root.ptfx-bm .main-wrapper:has(> .hero-section),
html:root.ptfx-bm .main-wrapper:has(> section.hero-section){
  padding-top:0!important;
}
/* la prima fascia di una pagina interna non deve attaccarsi alle bolle */
html:root.ptfx-bm .breadcrumb-bar{padding-top:6px}

@media (max-width:991px){
  html:root.ptfx-bm .main-wrapper{padding-top:calc(var(--bm-size,46px) + 22px)!important}
}


/* correzione: i link della barra in basso ereditavano il bianco del vecchio
   footer scuro da un selettore piu' specifico -> qui alziamo la specificita' */
html:root .footer .footer-bottom .copyright-menu .policy-menu li a,
html:root .footer .footer-bottom .policy-menu li a,
html:root .footer .footer-bottom .copyright-text p,
html:root .footer .footer-bottom p{
  color:#14100E!important;opacity:.75;
}
html:root .footer .footer-bottom .policy-menu li a:hover{
  color:var(--bm-accent,#E5541F)!important;opacity:1;
}
html:root[data-theme="dark"] .footer .footer-bottom .copyright-menu .policy-menu li a,
html:root[data-theme="dark"] .footer .footer-bottom .policy-menu li a,
html:root[data-theme="dark"] .footer .footer-bottom .copyright-text p,
html:root[data-theme="dark"] .footer .footer-bottom p{
  color:#E7EAF0!important;opacity:.8;
}
/* altezza reale della barra: 66px -> lo spazio sotto il contenuto la copre */
html:root body{padding-bottom:72px}
@media (max-width:991px){html:root body{padding-bottom:0}}


/* ============================================================================
   Barra footer v2 (2026-07-30): non fissa, una riga sola, testo centrato
   - niente position:fixed -> compare quando ci arrivi scorrendo
   - una sola linea in cima (il tema ne disegnava una seconda su .copyright)
   - contenuto centrato verticalmente con padding simmetrico
   ========================================================================== */
html:root .footer .footer-bottom{
  position:static!important;
  left:auto;right:auto;bottom:auto;
  padding:0!important;margin:0!important;
  background:rgba(252,251,248,.72)!important;
  -webkit-backdrop-filter:blur(20px) saturate(165%);
  backdrop-filter:blur(20px) saturate(165%);
  border:0!important;
  border-top:1px solid rgba(20,16,14,.09)!important;
  box-shadow:none!important;
}
html:root[data-theme="dark"] .footer .footer-bottom{
  background:rgba(20,26,38,.72)!important;
  border-top-color:rgba(255,255,255,.09)!important;
  box-shadow:none!important;
}

/* la seconda riga: il tema mette un bordo anche su .copyright / .row */
html:root .footer .footer-bottom .copyright,
html:root .footer .footer-bottom .copyright > .row,
html:root .footer .footer-bottom .copyright-text,
html:root .footer .footer-bottom .copyright-menu,
html:root .footer .footer-bottom .container{
  border:0!important;border-top:0!important;border-bottom:0!important;
  box-shadow:none!important;background:transparent!important;
}

/* altezza fissa e contenuto centrato */
html:root .footer .footer-bottom .copyright{
  padding:0!important;margin:0!important;
}
html:root .footer .footer-bottom .copyright > .row{
  margin:0!important;
  min-height:58px;
  display:flex;align-items:center;
}
html:root .footer .footer-bottom .copyright > .row > [class*="col-"]{
  padding-top:0!important;padding-bottom:0!important;
  display:flex;align-items:center;
}
html:root .footer .footer-bottom .copyright > .row > [class*="col-"]:last-child{
  justify-content:flex-end;
}
html:root .footer .footer-bottom .copyright-text p{
  margin:0!important;padding:0!important;line-height:1;
}
html:root .footer .footer-bottom .policy-menu{align-items:center;line-height:1}

/* non essendo piu' fissa, niente spazio riservato in fondo alla pagina */
html:root body{padding-bottom:0}
#ptfx-top{bottom:24px!important}
@media (max-width:991px){
  html:root .footer .footer-bottom{background:transparent!important}
  html:root .footer .footer-bottom .copyright > .row{
    flex-direction:column;row-gap:8px;min-height:0;padding:16px 0;
  }
  html:root .footer .footer-bottom .copyright > .row > [class*="col-"]{justify-content:center!important}
  #ptfx-top{bottom:86px!important}
}


/* v3: altezza barra data dal padding (piu' affidabile del min-height sulla row) */
html:root .footer .footer-bottom{padding:15px 0 16px!important}
html:root .footer .footer-bottom .copyright > .row{min-height:0!important}
@media (max-width:991px){html:root .footer .footer-bottom{padding:6px 0 10px!important}}

/* v4: la seconda riga in scuro e lo squilibrio verticale venivano da
   ".footer .footer-bottom > .container{padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}"
   (pt-theme). Qui si azzera: una sola linea, spaziatura simmetrica. */
html:root .footer .footer-bottom > .container,
html:root[data-theme="dark"] .footer .footer-bottom > .container{
  padding-top:0!important;padding-bottom:0!important;
  border-top:0!important;border-bottom:0!important;
  background:transparent!important;
}
html:root .footer .footer-bottom .copyright,
html:root .footer .footer-bottom .copyright > .row{padding:0!important;margin:0!important;border:0!important}

/* ============================================================================
   Barra footer v5 (2026-07-30) — stessa impressione delle bolle in alto:
   pillola solida che galleggia sopra la pagina (--bm-bg + --bm-shadow),
   staccata dai bordi, con lo stesso sollevamento all'hover.
   Non e' fissa: la incontri scorrendo, come prima.
   ========================================================================== */
html:root .footer .footer-bottom{
  position:static!important;
  padding:0!important;margin:0!important;
  background:transparent!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border:0!important;box-shadow:none!important;
}
html:root[data-theme="dark"] .footer .footer-bottom{
  background:transparent!important;border:0!important;box-shadow:none!important;
}

/* il container diventa la pillola in primo piano */
html:root .footer .footer-bottom > .container,
html:root[data-theme="dark"] .footer .footer-bottom > .container{
  width:auto!important;
  max-width:min(1140px, calc(100% - 32px))!important;
  margin:26px auto 30px!important;
  padding:0 26px!important;
  min-height:var(--bm-size,52px);
  display:flex;align-items:center;
  background:var(--bm-bg,#fff)!important;
  border:0!important;
  border-radius:calc(var(--bm-size,52px) / 2)!important;
  box-shadow:var(--bm-shadow,0 6px 20px rgba(15,23,42,.14))!important;
  transition:transform .28s var(--bm-ease,cubic-bezier(.34,1.36,.64,1)),box-shadow .28s;
}
html:root .footer .footer-bottom > .container:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(15,23,42,.18)!important;
}
html:root[data-theme="dark"] .footer .footer-bottom > .container:hover{
  box-shadow:0 12px 30px rgba(0,0,0,.55)!important;
}

/* contenuto della pillola: una riga, centrata */
html:root .footer .footer-bottom .copyright{width:100%;padding:0!important;margin:0!important;border:0!important}
html:root .footer .footer-bottom .copyright > .row{
  width:100%;margin:0!important;padding:0!important;
  display:flex;align-items:center;min-height:0!important;
}
html:root .footer .footer-bottom .copyright > .row > [class*="col-"]{
  padding-top:0!important;padding-bottom:0!important;display:flex;align-items:center;
}
html:root .footer .footer-bottom .copyright > .row > [class*="col-"]:last-child{justify-content:flex-end}
html:root .footer .footer-bottom .copyright-text p{margin:0!important;padding:0!important;line-height:1;font-size:13px}

/* testo/link come l'inchiostro delle bolle */
html:root .footer .footer-bottom,
html:root .footer .footer-bottom p,
html:root .footer .footer-bottom .copyright-text p,
html:root .footer .footer-bottom .copyright-menu .policy-menu li a,
html:root .footer .footer-bottom .policy-menu li a{
  color:var(--bm-ink,#0F172A)!important;
}
html:root .footer .footer-bottom .policy-menu li a{opacity:.68;font-size:13px}
html:root .footer .footer-bottom .policy-menu li a:hover{opacity:1;color:var(--bm-accent,#E5541F)!important}

@media (max-width:991px){
  html:root .footer .footer-bottom > .container{
    margin:18px auto 22px!important;padding:14px 20px!important;
    border-radius:22px!important;min-height:0;
  }
  html:root .footer .footer-bottom .copyright > .row{flex-direction:column;row-gap:8px}
  html:root .footer .footer-bottom .copyright > .row > [class*="col-"]{justify-content:center!important}
}


/* v6: allineamento esatto alla "superficie comune delle tre bolle"
   (pt-bubble.css): vetro + blur + ombra a tre strati + anello hairline,
   e stesso sollevamento all'hover. */
html:root .footer .footer-bottom > .container,
html:root[data-theme="dark"] .footer .footer-bottom > .container{
  background:var(--bm-glass,rgba(255,255,255,.90))!important;
  -webkit-backdrop-filter:var(--bm-blur,saturate(160%) blur(14px));
  backdrop-filter:var(--bm-blur,saturate(160%) blur(14px));
  box-shadow:var(--bm-shadow),var(--bm-ring)!important;
}
html:root .footer .footer-bottom > .container:hover,
html:root[data-theme="dark"] .footer .footer-bottom > .container:hover{
  transform:translateY(-3px);
  box-shadow:
    0 2px 4px rgba(20,16,14,.12),
    0 10px 22px rgba(20,16,14,.18),
    0 26px 60px rgba(20,16,14,.20),
    var(--bm-ring)!important;
}

/* ============================================================================
   Footer sempre in fondo (2026-07-30)
   Pagine corte (accesso, registrazione, errori) lasciavano il footer a meta'
   schermo con un'area vuota sotto. La pagina diventa una colonna alta almeno
   quanto lo schermo e il footer prende lo spazio residuo.
   ========================================================================== */
/* 100vh prima di 100dvh: senza il ripiego i browser che non conoscono dvh
   buttavano via la regola e il footer restava a meta' schermo. */
html:root .main-wrapper{display:flex;flex-direction:column;
  min-height:100vh;min-height:100dvh;position:relative;z-index:1}
html:root .main-wrapper > .footer{margin-top:auto!important}

/* pagina di accesso: nessun fondo proprio (colore di pagina unico) e scheda
   con la stessa superficie del pannello di controllo */
html:root .pt-auth-page{
  background:transparent!important;min-height:0!important;padding:48px 0 56px!important;
}
html:root .pt-auth-card{
  background:var(--d-surface,#fff)!important;
  border:1px solid var(--d-line,rgba(15,23,42,.08))!important;
  border-radius:var(--d-radius,16px)!important;
  box-shadow:var(--d-shadow,0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06))!important;
}
html:root .pt-auth-card .login-btn{
  width:100%;min-height:48px;border:0;border-radius:12px;
  background:var(--d-accent,#E5541F)!important;color:#fff!important;
  font-size:15px;font-weight:700;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;
}
html:root .pt-auth-card .login-btn:hover{
  background:#CF4717!important;transform:translateY(-2px);box-shadow:0 8px 20px rgba(229,84,31,.35);
}
html:root .pt-auth-card .login-btn:focus-visible{outline:3px solid rgba(229,84,31,.45);outline-offset:3px}

/* ============================================================================
   Barra dei risultati (2026-07-30, v2): UN SOLO gruppo
   Noleggiatore | Prestatore | Filtri stanno dentro la stessa bolla di vetro:
   una superficie sola, come le bolle in alto. I due modi sono segmenti
   (mutuamente esclusivi, attivo in accento); Filtri e' separato da una linea
   sottile perche' non e' un modo ma un'azione.
   Il gruppo resta agganciato sotto le bolle mentre si scorrono i risultati.
   ========================================================================== */
html:root .sorting-main{
  position:sticky;top:calc(var(--bm-size,52px) + 16px);z-index:60;
  display:inline-flex;align-items:center;gap:4px;
  width:auto;max-width:100%;flex-wrap:nowrap;
  margin:0 0 16px;padding:4px;
  border-radius:999px;
  background:var(--bm-glass,rgba(255,255,255,.90));
  -webkit-backdrop-filter:var(--bm-blur,saturate(160%) blur(14px));
  backdrop-filter:var(--bm-blur,saturate(160%) blur(14px));
  box-shadow:var(--bm-shadow),var(--bm-ring);
}
html:root .sorting-main .sorting,
html:root .sorting-main .sort-by,
html:root .sorting-main .sort-btn{margin:0!important;padding:0!important;display:flex;align-items:center}

/* linea sottile fra i modi e l'azione */
html:root .sorting-main .sort-by{
  position:relative;padding-left:5px!important;margin-left:1px!important;
}
html:root .sorting-main .sort-by::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:22px;background:rgba(20,16,14,.12);
}
html:root[data-theme="dark"] .sorting-main .sort-by::before{background:rgba(255,255,255,.14)}

/* i tre pulsanti: stessa forma, stessa altezza, nessuna superficie propria */
html:root .sorting-main .menu-tabs{
  display:inline-flex;align-items:center;gap:4px;
  margin:0!important;padding:0!important;border:0!important;
  background:transparent!important;box-shadow:none!important;
}
html:root .sorting-main .menu-tabs .nav-item{margin:0!important;border:0!important}
html:root .sorting-main .menu-tabs .nav-link,
html:root #filter_search.pt-filtri-btn{
  display:inline-flex!important;align-items:center;gap:8px;
  height:40px;padding:0 18px!important;margin:0!important;
  border:0!important;border-radius:999px!important;
  background:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  color:var(--bm-ink,#0F172A)!important;
  font-size:13.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  transition:background .2s,color .2s;
}
html:root .sorting-main .menu-tabs .nav-link:hover,
html:root #filter_search.pt-filtri-btn:hover{
  background:rgba(20,16,14,.06)!important;transform:none;box-shadow:none!important;
}
html:root[data-theme="dark"] .sorting-main .menu-tabs .nav-link:hover,
html:root[data-theme="dark"] #filter_search.pt-filtri-btn:hover{background:rgba(255,255,255,.08)!important}

/* stato acceso: modo selezionato e pannello filtri aperto */
html:root .sorting-main .menu-tabs .nav-link.active,
html:root #filter_search.pt-filtri-btn.is-active,
html:root #filter_search.pt-filtri-btn.active{
  background:var(--bm-accent,#E5541F)!important;color:#fff!important;
  box-shadow:0 2px 8px rgba(229,84,31,.30)!important;
}

/* icone: grigie da spente, bianche da accese */
html:root .sorting-main .menu-tabs .nav-link img,
html:root #filter_search.pt-filtri-btn img{
  height:16px;width:auto;margin:0!important;
  filter:grayscale(1) opacity(.5)!important;transition:filter .2s;
}
html:root .sorting-main .menu-tabs .nav-link.active img,
html:root #filter_search.pt-filtri-btn.is-active img,
html:root #filter_search.pt-filtri-btn.active img{filter:brightness(0) invert(1)!important}
html:root[data-theme="dark"] .sorting-main .menu-tabs .nav-link img,
html:root[data-theme="dark"] #filter_search.pt-filtri-btn img{
  filter:brightness(0) invert(1) opacity(.6)!important;
}

html:root .sorting-main .menu-tabs .nav-link:focus-visible,
html:root #filter_search.pt-filtri-btn:focus-visible{
  outline:3px solid rgba(229,84,31,.45);outline-offset:2px;
}

@media (max-width:575px){
  html:root .sorting-main{
    top:calc(var(--bm-size,46px) + 10px);
    overflow-x:auto;scrollbar-width:none;
  }
  html:root .sorting-main::-webkit-scrollbar{display:none}
  html:root .sorting-main .menu-tabs .nav-link,
  html:root #filter_search.pt-filtri-btn{height:38px;padding:0 14px!important;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  html:root .sorting-main .menu-tabs .nav-link,
  html:root #filter_search.pt-filtri-btn{transition:none}
}

/* correzione: sticky va messo sulla RIGA che contiene il gruppo, non sul
   gruppo. position:sticky si muove solo dentro il proprio contenitore: la
   .row e' alta quanto la barra, quindi il gruppo non avrebbe corsa. La .row
   invece vive dentro il .container alto tutta la pagina -> corsa piena. */
html:root .content > .container > .row:has(> .sorting-main){
  position:sticky;top:calc(var(--bm-size,52px) + 16px);z-index:60;
}
html:root .sorting-main{position:static;top:auto}
@media (max-width:575px){
  html:root .content > .container > .row:has(> .sorting-main){
    top:calc(var(--bm-size,46px) + 10px);
  }
}

/* correzione Filtri: il view aveva un <style> inline (padding 8px 20px,
   height:auto, radius 8px, fondo #737373) che, stando DOPO il foglio, vinceva
   a parita' di specificita'. Le regole inline sono state rimosse dal view;
   qui si alza comunque la specificita' per non dipendere da quell'ordine.
   Filtri = identico ai due segmenti: stessa altezza, forma, colori, stati. */
html:root .sorting-main .sort-btn #filter_search.pt-filtri-btn,
html:root .sorting-main #filter_search.pt-filtri-btn{
  display:inline-flex!important;align-items:center;justify-content:center;gap:8px;
  height:40px!important;min-height:40px!important;
  padding:0 18px!important;margin:0!important;
  border:0!important;border-radius:999px!important;
  background:transparent!important;box-shadow:none!important;
  color:var(--bm-ink,#0F172A)!important;
  font-size:13.5px!important;font-weight:700!important;line-height:1!important;
  white-space:nowrap;width:auto!important;
}
html:root .sorting-main .sort-btn #filter_search.pt-filtri-btn:hover{
  background:rgba(20,16,14,.06)!important;transform:none!important;
}
html:root .sorting-main .sort-btn #filter_search.pt-filtri-btn.is-active,
html:root .sorting-main .sort-btn #filter_search.pt-filtri-btn.active{
  background:var(--bm-accent,#E5541F)!important;color:#fff!important;
  box-shadow:0 2px 8px rgba(229,84,31,.30)!important;
}
html:root .sorting-main .sort-btn #filter_search.pt-filtri-btn img{
  height:16px!important;width:auto;margin:0!important;
  filter:grayscale(1) opacity(.5)!important;
}
html:root .sorting-main .sort-btn #filter_search.pt-filtri-btn.is-active img,
html:root .sorting-main .sort-btn #filter_search.pt-filtri-btn.active img{
  filter:brightness(0) invert(1)!important;
}
html:root[data-theme="dark"] .sorting-main .sort-btn #filter_search.pt-filtri-btn img{
  filter:brightness(0) invert(1) opacity(.6)!important;
}

/* ============================================================================
   Pannello Filtri (2026-07-30): stessa lingua del pannello di controllo
   Prima: barra arancione a sinistra, titolo blu con ingranaggio, etichette
   blu, cursore viola, pulsante ambra. Cinque colori, nessuno del marchio.
   ========================================================================== */
html:root #filter_inputs.filter-card{
  background:var(--d-surface,#fff)!important;
  border:1px solid var(--d-line,rgba(15,23,42,.08))!important;
  border-left:1px solid var(--d-line,rgba(15,23,42,.08))!important;
  border-radius:var(--d-radius,16px)!important;
  box-shadow:var(--d-shadow,0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06))!important;
  padding:22px!important;margin-top:12px!important;
}
html:root .pt-filtri-title{
  margin:0 0 18px!important;padding:0 0 14px!important;
  border-bottom:1px solid var(--d-line,rgba(15,23,42,.08));
  font-size:15px!important;font-weight:800!important;letter-spacing:-.01em;
  color:var(--d-ink,#0F172A)!important;display:block!important;
}
html:root .pt-filtri-title::before{content:none!important}

/* etichette */
html:root #filter_inputs .form-group label,
html:root #filter_inputs .filter-title{
  display:block;margin:0 0 7px;font-size:12.5px;font-weight:700;
  letter-spacing:.01em;color:var(--d-ink-2,#64748B)!important;
}
html:root #filter_inputs .form-group{margin-bottom:16px}

/* campi */
html:root #filter_inputs .form-control,
html:root #filter_inputs select.form-control{
  height:44px;padding:0 14px;font-size:14px;
  color:var(--d-ink,#0F172A);background:var(--d-surface,#fff);
  border:1px solid var(--d-line,rgba(15,23,42,.08))!important;
  border-radius:12px!important;box-shadow:none!important;
  transition:border-color .18s,box-shadow .18s;
}
html:root #filter_inputs .form-control::placeholder{color:var(--d-ink-2,#64748B);opacity:.75}
html:root #filter_inputs .form-control:focus{
  border-color:var(--d-accent,#E5541F)!important;
  box-shadow:0 0 0 3px rgba(229,84,31,.16)!important;outline:none;
}

/* cursore fascia di prezzo */
html:root #filter_inputs .range-slider,
html:root #filter_inputs .price-range{
  height:5px!important;border:0!important;border-radius:999px!important;
  background:rgba(15,23,42,.10)!important;box-shadow:none!important;margin:14px 0 6px;
}
html:root #filter_inputs .ui-slider-range{
  background:var(--d-accent,#E5541F)!important;border:0!important;border-radius:999px!important;
}
html:root #filter_inputs .ui-slider-handle{
  width:20px!important;height:20px!important;top:-8px!important;
  border:2px solid var(--d-accent,#E5541F)!important;border-radius:50%!important;
  background:#fff!important;box-shadow:0 2px 6px rgba(15,23,42,.18)!important;
  cursor:grab;outline:none;
}
html:root #filter_inputs .ui-slider-handle:focus-visible{
  box-shadow:0 0 0 4px rgba(229,84,31,.25)!important;
}
html:root #filter_inputs .amount-range,
html:root #filter_inputs .price-amount{
  font-size:14px;font-weight:700;color:var(--d-ink,#0F172A);
  font-variant-numeric:tabular-nums;
}

/* pulsante Cerca: unica azione primaria del pannello */
html:root #filter_inputs .btn-search,
html:root #filter_inputs .get_services{
  display:flex;align-items:center;justify-content:center;width:100%;
  min-height:44px;padding:0 20px;border:0!important;border-radius:12px!important;
  background:var(--d-accent,#E5541F)!important;color:#fff!important;
  font-size:15px;font-weight:700;cursor:pointer;
  box-shadow:0 1px 2px rgba(229,84,31,.20)!important;
  transition:background .2s,transform .2s,box-shadow .2s;
}
html:root #filter_inputs .btn-search:hover,
html:root #filter_inputs .get_services:hover{
  background:#CF4717!important;transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(229,84,31,.35)!important;
}
html:root #filter_inputs .btn-search:focus-visible,
html:root #filter_inputs .get_services:focus-visible{
  outline:3px solid rgba(229,84,31,.45);outline-offset:3px;
}
html:root[data-theme="dark"] #filter_inputs .form-control,
html:root[data-theme="dark"] #filter_inputs select.form-control{
  background:rgba(255,255,255,.04);color:var(--d-ink,#E2E8F0);
}
@media (prefers-reduced-motion:reduce){
  html:root #filter_inputs .get_services{transition:none}
  html:root #filter_inputs .get_services:hover{transform:none}
}

/* ============================================================================
   LA CAUSA VERA degli "sticky che non si agganciano" (2026-07-30)
   style.css mette overflow-x:hidden sul body. Un elemento con overflow
   diverso da visible diventa il contenitore di scorrimento dei propri
   discendenti: da quel momento position:sticky si misura rispetto al body,
   che non scorre (scorre la finestra), quindi non si aggancia MAI e non da'
   alcun errore. E' il motivo per cui colonna prodotto, colonna negozio e
   barra dei filtri restavano ferme sulla pagina invece che sullo schermo.
   overflow:clip taglia allo stesso modo ma NON crea un contenitore di
   scorrimento: sticky torna a funzionare.
   ========================================================================== */
html:root, html:root body{
  overflow-x:clip;
  overflow-y:visible;
}
@supports not (overflow:clip){
  /* browser vecchi: si torna al taglio classico, sticky non si aggancia */
  html:root body{overflow-x:hidden;overflow-y:visible}
}

/* ============================================================================
   Chi siamo (2026-07-30): la sezione parte dall'alto e occupa mezza pagina
   Il padding che scosta il contenuto dalle bolle serve alle pagine che
   iniziano con una lista o una tabella; qui c'e' una fascia piena, che sotto
   le bolle ci sta benissimo (come l'hero della home).
   ========================================================================== */
html:root .main-wrapper:has(> .content .pt-about-hero),
html:root .main-wrapper:has(.pt-about-hero){padding-top:0!important}

html:root .pt-about-hero{
  min-height:50vh;min-height:50dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--bm-size,52px) + 40px) 0 40px!important;
  border-bottom:0;
}
html:root .pt-about-hero > .container{width:100%}
@media (max-width:991px){
  html:root .pt-about-hero{
    min-height:42vh;min-height:42dvh;
    padding:calc(var(--bm-size,46px) + 28px) 0 32px!important;
  }
}

/* ============================================================================
   Intestazioni di pagina in stile "Chi siamo" (2026-07-30)
   - privacy, termini, faq: la fascia .breadcrumb-bar marcata .pt-hero-bar
     diventa la stessa fascia alta, centrata, senza spazio sopra;
   - noleggi e acquisti: stessa lingua ma piu' bassa. Su una pagina di
     risultati mezza schermata di intestazione prima del primo articolo
     nasconde quello per cui la gente e' arrivata.
   ========================================================================== */
html:root .main-wrapper:has(.pt-hero-bar),
html:root .main-wrapper:has(.pt-page-hero){padding-top:0!important}

html:root .breadcrumb-bar.pt-hero-bar,
html:root .pt-page-hero{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  min-height:50vh;min-height:50dvh;
  padding:calc(var(--bm-size,52px) + 40px) 0 40px!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  margin:0!important;
}
/* 2026-08-08 — la fascia titolo si dimensiona sul contenuto: min-height:50vh
   con centratura verticale lasciava un buco sotto il titolo su faq, termini,
   privacy, cookie e noleggi. Il grande hero resta solo su .pt-page-hero. */
html:root .breadcrumb-bar.pt-hero-bar{
  min-height:0!important;
  padding:calc(var(--bm-size,52px) + 34px) 0 26px!important;
}
@media (max-width:991px){
  html:root .breadcrumb-bar.pt-hero-bar{
    padding:calc(var(--bm-size,46px) + 22px) 0 18px!important;
  }
}

html:root .pt-page-hero--list{
  min-height:0;
  padding:calc(var(--bm-size,52px) + 34px) 0 26px!important;
}
html:root .breadcrumb-bar.pt-hero-bar > .container,
html:root .pt-page-hero > .container{width:100%}

/* titolo e sottotitolo: stessa scala della pagina Chi siamo */
html:root .breadcrumb-bar.pt-hero-bar .breadcrumb-title h2,
html:root .breadcrumb-bar.pt-hero-bar h2,
html:root .pt-page-hero .pt-about-hero-title{
  font-size:clamp(34px,4.4vw,52px);font-weight:800;letter-spacing:-.025em;
  line-height:1.08;margin:0 0 14px;color:var(--d-ink,#0F172A);
}
html:root .pt-page-hero .pt-about-hero-sub{
  margin:0 auto;max-width:58ch;font-size:17px;line-height:1.55;
  color:var(--d-ink-2,#64748B);
}
html:root .pt-page-hero .pt-about-eyebrow{margin-bottom:18px}

/* le briciole di pane restano, ma centrate e discrete */
html:root .breadcrumb-bar.pt-hero-bar .breadcrumb-menu,
html:root .breadcrumb-bar.pt-hero-bar .col-auto{
  float:none!important;margin:0 auto!important;width:100%;text-align:center;
}
html:root .breadcrumb-bar.pt-hero-bar .page-breadcrumb .breadcrumb{
  display:inline-flex;justify-content:center;background:transparent;
  margin:0;padding:0;font-size:13px;
}
html:root .breadcrumb-bar.pt-hero-bar .breadcrumb a{color:var(--d-ink-2,#64748B)}
html:root .breadcrumb-bar.pt-hero-bar .breadcrumb a:hover{color:var(--d-accent,#E5541F)}
html:root .breadcrumb-bar.pt-hero-bar .breadcrumb .active{color:var(--d-ink,#0F172A);font-weight:700}
html:root .breadcrumb-bar.pt-hero-bar .row{width:100%;justify-content:center;row-gap:10px}

@media (max-width:991px){
  html:root .breadcrumb-bar.pt-hero-bar{
    min-height:40vh;min-height:40dvh;
    padding:calc(var(--bm-size,46px) + 26px) 0 28px!important;
  }
  html:root .pt-page-hero--list{padding:calc(var(--bm-size,46px) + 22px) 0 18px!important}
  html:root .pt-page-hero .pt-about-hero-sub{font-size:15px}
}

/* la fascia degli elenchi (acquisti) usa la stessa lingua ma piu' bassa */
html:root .breadcrumb-bar.pt-hero-bar--list{
  min-height:0!important;
  padding:calc(var(--bm-size,52px) + 34px) 0 26px!important;
}
@media (max-width:991px){
  html:root .breadcrumb-bar.pt-hero-bar--list{
    padding:calc(var(--bm-size,46px) + 22px) 0 18px!important;
  }
}

/* le pillole-occhiello sopra i titoli (LA NOSTRA STORIA / PARLA CON NOI /
   NOLEGGIA DAI VICINI) sono rimosse: il titolo dice gia' dove sei. */
html:root .pt-about-eyebrow{display:none!important}

/* il gruppo Noleggiatore/Prestatore/Filtri sta centrato sotto il sottotitolo */
html:root .content > .container > .row:has(> .sorting-main){justify-content:center}
html:root .sorting-main{margin-left:auto!important;margin-right:auto!important}

/* meno aria fra il sottotitolo e il gruppo dei filtri: erano 66px, somma del
   fondo dell'intestazione (26) e del padding di .content (40) */
html:root .pt-page-hero--list{padding-bottom:8px!important}
html:root .content:has(.sorting-main){padding-top:16px!important}

/* ============================================================================
   Schermata iniziale a tutto schermo (2026-07-30)
   Chi arriva vede solo la proposta e la ricerca; le categorie compaiono
   scorrendo, con un invito esplicito in fondo.
   ========================================================================== */
html:root .hero-section{
  /* !important obbligatorio: modern.css blocca altezza e spaziatura */
  min-height:100vh!important;min-height:100dvh!important;
  display:flex!important;align-items:center;position:relative;
  padding-top:calc(var(--bm-size,52px) + 30px)!important;
  padding-bottom:96px!important;
}
html:root .hero-section > .container{width:100%}

/* invito a scorrere */
html:root .pt-scroll-cue{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
  display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  border:0;background:transparent;cursor:pointer;padding:8px 12px;
  color:var(--d-ink-2,#64748B);font-size:12.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  opacity:1;transition:opacity .3s,transform .3s;
}
html:root .pt-scroll-cue.is-hidden{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(8px)}
html:root .pt-scroll-cue-ico{
  width:26px;height:42px;border-radius:999px;
  border:2px solid rgba(20,16,14,.22);position:relative;
}
html:root .pt-scroll-cue-ico::after{
  content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:2px;
  background:var(--d-accent,#E5541F);transform:translateX(-50%);
  animation:pt-cue 1.6s ease-in-out infinite;
}
@keyframes pt-cue{
  0%{opacity:0;transform:translate(-50%,0)}
  30%{opacity:1}
  70%{opacity:1;transform:translate(-50%,14px)}
  100%{opacity:0;transform:translate(-50%,16px)}
}
html:root .pt-scroll-cue:hover{color:var(--d-ink,#0F172A)}
html:root .pt-scroll-cue:focus-visible{outline:3px solid rgba(229,84,31,.45);outline-offset:4px;border-radius:12px}
html:root[data-theme="dark"] .pt-scroll-cue-ico{border-color:rgba(255,255,255,.28)}

/* ---------------------------------- ricerche popolari: testo che si scrive */
html:root .pt-typed{
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  margin-top:18px;font-size:15px;line-height:1.5;max-width:100%;
}
html:root .pt-typed-label{
  color:var(--d-ink-2,#64748B);font-weight:700;font-size:13px;
  letter-spacing:.02em;line-height:1.5;white-space:nowrap;flex:0 0 auto;
}
html:root .pt-typed-label::after{content:":";margin-left:1px;opacity:.55}
/* fantasma e testo vivo nella stessa cella: la larghezza resta quella della
   frase piu' lunga (niente scatti) ma l'altezza e' di una riga sola */
html:root .pt-typed .text-type{
  display:inline-grid;align-items:center;min-width:0;line-height:1.5;
}
html:root .pt-typed .tt-ghost,
html:root .pt-typed .tt-live{grid-area:1/1;white-space:pre;line-height:1.5}
html:root .pt-typed .tt-ghost{visibility:hidden;pointer-events:none}
html:root .pt-typed .tt-live{display:inline-block}
html:root .pt-typed .text-type__content{
  color:var(--d-ink,#0F172A);font-weight:700;
}
html:root .pt-typed .text-type__cursor{
  margin-left:.2rem;display:inline-block;color:var(--d-accent,#E5541F);
  animation:tt-blink .5s ease-in-out infinite alternate;
}
@keyframes tt-blink{from{opacity:1}to{opacity:0}}
@media (max-width:575px){
  html:root .pt-typed{font-size:14px;gap:6px}
  html:root .pt-typed .text-type{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
  html:root .pt-typed .text-type__cursor{animation:none}
  html:root .pt-scroll-cue-ico::after{animation:none;opacity:1}
}

/* --------------------- campi di ricerca: via il rettangolo al clic ------- */
html:root .banner-input input:focus,
html:root .banner-input input:focus-visible,
html:root .banner-input .form-control:focus,
html:root #search-blk:focus,
html:root #user_address:focus{
  outline:none!important;box-shadow:none!important;
  border-color:rgba(229,84,31,.55)!important;background-clip:padding-box;
}
html:root .banner-input-set:focus-within{
  box-shadow:0 0 0 3px rgba(229,84,31,.14);
}

@media (max-width:991px){
  html:root .hero-section{min-height:100dvh!important;padding-bottom:72px!important}
  html:root .pt-scroll-cue{bottom:16px}
}

/* ============================================================================
   Sfondo di pagina (2026-07-30): griglia + aurora su TUTTA la home
   Prima stavano dentro la sola prima schermata e finivano appena si scorreva.
   Ora sono uno strato fisso dietro al contenuto: il colore e il reticolo
   accompagnano tutta la pagina senza appesantire lo scorrimento (lo strato
   e' fisso, quindi non viene ridisegnato).
   ========================================================================== */
html:root .ptfx-pagebg{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
html:root .ptfx-pagebg .ptfx-aurora{position:absolute;inset:0;opacity:.85}
html:root .ptfx-pagebg .ptfx-gridbg{
  position:absolute;inset:0;opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 85% 85% at 50% 35%,#000 45%,transparent 92%);
  mask-image:radial-gradient(ellipse 85% 85% at 50% 35%,#000 45%,transparent 92%);
}
html:root[data-theme="dark"] .ptfx-pagebg .ptfx-aurora{opacity:.5}
html:root .ptfx-pagebg + .main-wrapper,
html:root .main-wrapper{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  html:root .ptfx-pagebg .ptfx-aurora span{animation:none}
}

/* ============================================================================
   Alone dell'hover non piu' tagliato (2026-08-01)
   ========================================================================== */
html:root .owl-carousel .owl-stage-outer,
html:root .slider-service,
html:root .service-section .tab-content,
html:root .popular-bg .tab-content{
  overflow-x:clip;
  overflow-y:visible;
}
/* l'ombra piu' larga e' 60px: lo spazio deve bastare a contenerla */
@supports not (overflow:clip){
  html:root .owl-carousel .owl-stage-outer{
    overflow:hidden;
    padding:30px 0 60px;
    margin:-30px 0 -60px;
  }
}
/* la scheda deve stare sopra le vicine mentre e' sollevata */
html:root .ptfx-tilt.is-hover,
html:root .ptfx-spot:hover{position:relative;z-index:5}

/* ---------------------------------- categorie: stessa cura per l'alone ---- */
html:root .pt-cat3d-section{overflow-x:clip;overflow-y:visible}
html:root .pt-cat3d-track{
  padding-top:104px!important;padding-bottom:120px!important;
  margin-top:-64px!important;margin-bottom:-64px!important;
}
html:root .pt-cat3d-pinned .pt-cat3d-track{
  padding-top:124px!important;padding-bottom:144px!important;
  margin-top:-64px!important;margin-bottom:-64px!important;
}
@media (max-width:991px){
  html:root .pt-cat3d-track{
    padding-top:96px!important;padding-bottom:108px!important;
    margin-top:-64px!important;margin-bottom:-64px!important;
  }
}

/* ============================================================================
   FAQ accordion — titoli leggibili in entrambi i temi (2026-08-08)
   style.css fissa `.faq-card .card h4 > a { color:#353760 }`: blu notte su
   card scura in dark mode, cioe' testo praticamente invisibile. Qui titolo,
   corpo della risposta, link e freccia passano ai token del tema, quindi
   seguono automaticamente light/dark senza doppioni di colore.
   ========================================================================== */
.faq-card .card{
  border:1px solid var(--pt-line,#E5E7EB);
  background:var(--pt-surface,#fff);
}
.faq-card .card h4 > a{
  color:var(--pt-ink,#0F172A);
  font-weight:600;
}
.faq-card .card h4 > a:hover,
.faq-card .card h4 > a:focus,
.faq-card .card h4 > a:not(.collapsed){
  color:var(--pt-brand,#FF6B35);
}
.faq-card .card h4 > a:after{
  border-left-color:var(--pt-ink-3,#64748B);
  border-bottom-color:var(--pt-ink-3,#64748B);
}
.faq-card .card h4 > a:hover:after,
.faq-card .card h4 > a:not(.collapsed):after{
  border-left-color:var(--pt-brand,#FF6B35);
  border-bottom-color:var(--pt-brand,#FF6B35);
}
.faq-card .card-collapse{ color:var(--pt-ink-2,#334155); }
.faq-card .card-collapse p,
.faq-card .card-collapse li{ color:var(--pt-ink-2,#334155); }
.faq-card .card-collapse strong{ color:var(--pt-ink,#0F172A); }
.faq-card .card-collapse a{ color:var(--pt-brand,#FF6B35); text-decoration:underline; }

/* ============================================================================
   FAQ con screenshot (2026-08-08, v2)
   La griglia a 2 colonne lasciava la terza immagine spaiata a mezza larghezza e
   ingrandiva i ritagli piccoli (05-prezzo e' 588px: stirato veniva sfocato).
   Ora: sequenza verticale in ordine di lettura, ogni immagine alla sua
   larghezza naturale e centrata, didascalia larga esattamente come l'immagine
   (figure come tabella + caption-side:bottom).
   ========================================================================== */
.faq-card .card-collapse .faq-shots{
  display:flex; flex-direction:column; align-items:center;
  gap:22px; margin:18px 0 6px;
}
.faq-card .card-collapse .faq-shot{
  display:table; margin:0 auto; max-width:100%;
}
.faq-card .card-collapse .faq-shot img{
  display:block; width:auto; max-width:100%; height:auto;
  border-radius:12px;
  border:1px solid var(--pt-line,#E5E7EB);
  background:var(--pt-surface,#fff);
  box-shadow:var(--pt-shadow-1,0 1px 2px rgba(15,23,42,.06));
}
.faq-card .card-collapse .faq-shot figcaption{
  display:table-caption; caption-side:bottom;
  padding-top:8px; font-size:13px; line-height:1.5;
  color:var(--pt-ink-3,#64748B);
}
.faq-card .card-collapse .faq-shot figcaption strong{color:var(--pt-ink-2,#334155)}
/* passi numerati: la pastiglia dice l'ordine, la sequenza si legge da sola */
.faq-card .card-collapse .faq-step{
  display:inline-block; margin-right:8px; padding:2px 9px;
  border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:.02em;
  background:var(--pt-brand-soft,rgba(255,107,53,.12));
  color:var(--pt-brand,#FF6B35);
  vertical-align:1px;
}
/* fra un passo e il successivo un filo di separazione, non un muro */
.faq-card .card-collapse .faq-shots--steps .faq-shot + .faq-shot{
  border-top:1px solid var(--pt-line,#E5E7EB); padding-top:22px;
}

/* ============================================================================
   FAQ: profondita' sulle schede delle domande (2026-08-08)
   Stessa lingua del CTA "Accedi" nella barra a bolla: le variabili --bm-shadow
   e --bm-ease vengono da pt-bubble.css, quindi se cambia l'elevazione del menu
   cambia anche qui — un solo posto da toccare, niente valori duplicati.
   ========================================================================== */
.faq-card .card{
  border:1px solid var(--pt-line,#E5E7EB);
  border-radius:16px;
  box-shadow:var(--bm-shadow,0 6px 20px rgba(15,23,42,.14)),
             var(--bm-ring,inset 0 0 0 1px rgba(20,16,14,.07));
  transition:transform .28s var(--bm-ease,cubic-bezier(.34,1.36,.64,1)),
             box-shadow .28s, border-color .28s;
}
.faq-card .card:hover,
.faq-card .card:focus-within{
  transform:translateY(-3px);
  box-shadow:
    0 2px 4px rgba(20,16,14,.12),
    0 10px 22px rgba(20,16,14,.18),
    0 26px 60px rgba(20,16,14,.20);
}
html[data-theme="dark"] .faq-card .card:hover,
html[data-theme="dark"] .faq-card .card:focus-within{
  box-shadow:
    0 2px 6px rgba(0,0,0,.45),
    0 12px 26px rgba(0,0,0,.5),
    0 28px 64px rgba(0,0,0,.55);
}
/* la domanda aperta resta sollevata: si vede subito dove sei */
.faq-card .card:has(> .card-body > .card-collapse.show){
  border-color:var(--pt-brand-soft,rgba(255,107,53,.35));
}
/* le schede non devono sovrapporsi mentre sono sollevate */
.faq-card .card{position:relative}
.faq-card .card:hover{z-index:2}
@media (prefers-reduced-motion:reduce){
  .faq-card .card{transition:none}
  .faq-card .card:hover,.faq-card .card:focus-within{transform:none}
}

/* ============================================================================
   Footer in fondo sulle pagine corte (2026-08-08)
   Accesso, registrazione e recupero password hanno poco contenuto: il footer
   restava attaccato alla scheda, a mezza pagina. La classe .pt-fill la mette
   il server (navbar.php) sulle sole rotte interessate, quindi il resto del
   sito non viene toccato e non serve nessun :has() ne' JS.
   ========================================================================== */
html:root .main-wrapper.pt-fill{
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100dvh;
}
html:root .main-wrapper.pt-fill > .footer{ margin-top:auto }
/* la scheda di accesso resta centrata nello spazio che avanza */
html:root .main-wrapper.pt-fill > .pt-auth-page{
  flex:1 0 auto; display:flex; align-items:center;
}
html:root .main-wrapper.pt-fill > .pt-auth-page > .container{ width:100% }

/* ============================================================================
   Accesso: modulo unico, passkey, secondo fattore (2026-08-08)
   ========================================================================== */
.pt-pwd-wrap{position:relative}
.pt-pwd-wrap .form-control{padding-right:44px}
.pt-pwd-eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:0;background:transparent;cursor:pointer;
  border-radius:8px;opacity:.45;font-size:15px;line-height:1;
}
.pt-pwd-eye:hover,.pt-pwd-eye.on{opacity:.9;background:rgba(15,23,42,.06)}
html[data-theme="dark"] .pt-pwd-eye:hover,
html[data-theme="dark"] .pt-pwd-eye.on{background:rgba(255,255,255,.08)}

.pt-auth-sep{
  display:flex;align-items:center;gap:12px;margin:20px 0 16px;
  color:var(--pt-ink-3,#94A3B8);font-size:12.5px;text-transform:lowercase;
}
.pt-auth-sep::before,.pt-auth-sep::after{
  content:"";flex:1;height:1px;background:var(--pt-line,#E5E7EB);
}

.pt-passkey-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:48px;border-radius:14px;
  border:1px solid var(--pt-line,#E5E7EB);
  background:var(--pt-surface,#fff);color:var(--pt-ink,#0F172A);
  font-weight:700;font-size:15px;
  box-shadow:var(--bm-shadow,0 6px 20px rgba(15,23,42,.14));
  transition:transform .28s var(--bm-ease,cubic-bezier(.34,1.36,.64,1)),box-shadow .28s;
}
.pt-passkey-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(20,16,14,.12),0 10px 22px rgba(20,16,14,.18);
}
.pt-passkey-btn svg{color:var(--pt-brand,#FF6B35);flex:0 0 auto}
.pt-passkey-note{margin-top:10px;font-size:13px;color:#e5484d;display:none}

#pt_2fa_div .form-control{letter-spacing:.22em;text-align:center;font-weight:700}
#pt_2fa_error,#mailid_error,#otp_error_msg_login{display:none;margin-top:6px;font-size:13px}

/* ============================================================================
   Accesso in UNA schermata (2026-08-08)
   Intestazione, scheda e piede visibili senza scorrere. Se lo schermo e' troppo
   basso perche' tutto ci stia, scorre SOLO la scheda centrale: la barra in alto
   e il piede restano al loro posto. Sotto i 560px di altezza si torna allo
   scorrimento normale, altrimenti su telefoni bassi il modulo verrebbe tagliato.
   ========================================================================== */
html:root body.pt-fill{overflow:hidden}
html:root .main-wrapper.pt-fill{
  height:100vh; height:100dvh; overflow:hidden;
}
html:root .main-wrapper.pt-fill > .pt-auth-page{
  flex:1 1 auto; min-height:0; overflow:auto;
  display:flex; align-items:center; justify-content:center;
  padding-top:12px; padding-bottom:12px;
}
html:root .main-wrapper.pt-fill > .pt-auth-page > .container{width:100%}
html:root .main-wrapper.pt-fill > .footer{flex:0 0 auto}
/* su queste pagine il piede si riduce alla riga di chiusura */
html:root .main-wrapper.pt-fill .footer .footer-top{display:none!important}
html:root .main-wrapper.pt-fill .footer .footer-bottom{padding-top:10px!important;padding-bottom:10px!important}
html:root .main-wrapper.pt-fill .footer .footer-bottom > .container{padding-top:0!important}
/* scheda un po' piu' compatta: serve a far stare tutto in una schermata */
html:root .main-wrapper.pt-fill .pt-auth-card{padding:26px 26px 22px}
html:root .main-wrapper.pt-fill .login-header{margin-bottom:14px}
html:root .main-wrapper.pt-fill .form-group{margin-bottom:14px}
html:root .main-wrapper.pt-fill .pt-auth-sep{margin:14px 0 12px}
@media (max-height:560px){
  html:root body.pt-fill{overflow:auto}
  html:root .main-wrapper.pt-fill{height:auto;min-height:100dvh;overflow:visible}
  html:root .main-wrapper.pt-fill > .pt-auth-page{overflow:visible}
}

/* ============================================================================
   Pannello "Sicurezza dell'account" nelle impostazioni utente (2026-08-08)
   ========================================================================== */
.pt-sec-wrap{padding-top:0!important}
.pt-sec-card .card-title{margin-bottom:6px}
.pt-sec-lead{font-size:14.5px;color:var(--pt-ink-2,#334155);max-width:70ch;margin-bottom:4px}
.pt-sec-block{
  border-top:1px solid var(--pt-line,#E5E7EB);
  padding:22px 0 4px;margin-top:18px;
}
.pt-sec-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.pt-sec-head h5{margin:0 0 6px;font-size:16px;font-weight:800;color:var(--pt-ink,#0F172A)}
.pt-sec-head p{margin:0;font-size:14px;line-height:1.55;color:var(--pt-ink-3,#64748B);max-width:62ch}
.pt-sec-badge{
  flex:0 0 auto;padding:5px 12px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap;
}
.pt-sec-badge.on{background:rgba(16,185,129,.14);color:#0f9d6f}
.pt-sec-badge.off{background:rgba(100,116,139,.14);color:var(--pt-ink-3,#64748B)}
.pt-sec-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.pt-sec-note{font-size:13px;color:var(--pt-ink-3,#64748B);margin-right:auto}
.pt-sec-msg{display:none;font-size:13px;margin-top:8px;width:100%}
.pt-sec-inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pt-sec-inline .form-control{max-width:230px}

.pt-sec-enroll{margin-top:18px}
.pt-sec-qr{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.pt-sec-qr img{
  width:180px;height:180px;flex:0 0 auto;border-radius:12px;background:#fff;
  padding:8px;border:1px solid var(--pt-line,#E5E7EB);
}
.pt-sec-qr > div{flex:1 1 260px;font-size:14px;color:var(--pt-ink-2,#334155)}
.pt-sec-secret{
  display:inline-block;padding:8px 12px;border-radius:10px;
  background:rgba(15,23,42,.06);font-size:14px;letter-spacing:.08em;word-break:break-all;
}
html[data-theme="dark"] .pt-sec-secret{background:rgba(255,255,255,.08)}

.pt-sec-codes{
  margin-top:20px;padding:18px;border-radius:14px;
  background:var(--pt-brand-soft,rgba(255,107,53,.10));
  border:1px solid var(--pt-brand-soft,rgba(255,107,53,.28));
}
.pt-sec-codes h6{margin:0 0 6px;font-weight:800;font-size:15px}
.pt-sec-codes p{font-size:13.5px;color:var(--pt-ink-2,#334155);margin-bottom:12px}
.pt-sec-codes ul{
  list-style:none;padding:0;margin:0 0 14px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;
}
.pt-sec-codes code{font-size:14px;letter-spacing:.06em;font-weight:700}

.pt-sec-keys{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.pt-sec-key{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;border-radius:12px;
  border:1px solid var(--pt-line,#E5E7EB);background:var(--pt-surface,#fff);
}
.pt-sec-key span{display:block;font-size:12.5px;color:var(--pt-ink-3,#64748B);margin-top:2px}

/* ============================================================================
   TENDINA DEI SUGGERIMENTI DI RICERCA (2026-08-08)
   Com'era: #searchResult (style.css) era larga 300px fisse, con
   margin-top:-16px, quindi risaliva sopra la barra e sbucava a sinistra
   sovrapponendosi al campo. Ora e' una scheda del sito, ancorata SOTTO
   l'intera barra di ricerca e larga quanto lei.
   I suggerimenti nativi del browser (la pillola grigia con la x) sono spenti
   con autocomplete="off" sui due campi, in home/index.php.
   ========================================================================== */
.banner-input-set { position: relative; }

#searchResult {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 6px !important;
    list-style: none;
    background: var(--pt-surface, #fff) !important;
    border: 1px solid var(--pt-line, #E5E7EB) !important;
    border-radius: var(--pt-radius, 16px) !important;
    box-shadow: var(--pt-shadow-2, 0 10px 25px -5px rgba(15,23,42,.10)) !important;
    max-height: min(52vh, 380px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 60 !important;
}

#searchResult li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 11px 13px;
    border-radius: 11px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--pt-ink, #0F172A) !important;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

/* lente davanti a ogni suggerimento: dice "questa e' una ricerca" */
#searchResult li::before {
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    opacity: .45;
    flex: 0 0 auto;
}

#searchResult li:hover,
#searchResult li:focus,
#searchResult li.is-active {
    background: var(--pt-brand-soft, #FFF2EC);
    color: var(--pt-brand-strong, #E65525) !important;
}

html[data-theme="dark"] #searchResult {
    background: #16203A !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 18px 40px -12px rgba(0,0,0,.6) !important;
}
html[data-theme="dark"] #searchResult li { color: #E8ECF6 !important; }
html[data-theme="dark"] #searchResult li:hover,
html[data-theme="dark"] #searchResult li.is-active {
    background: rgba(255,107,53,.16);
    color: #FFB08A !important;
}

@media (max-width: 767px) {
    #searchResult { top: calc(100% + 8px) !important; border-radius: 14px !important; }
    #searchResult li { padding: 12px 12px; font-size: 15.5px; }
}

/* ============================================================================
   FOTO PROFILO: "Sfoglia" ed "Elimina account" affiancati (2026-08-08)
   "Elimina account" stava sopra al titolo della pagina, da solo, con l'aria
   di un messaggio d'errore. Accanto a "Sfoglia" si legge per quello che e':
   un'azione secondaria e distruttiva, non un avviso.
   ========================================================================== */
.pt-photo-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.pt-danger-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: #C0392B !important;
    background: transparent;
    transition: background .15s ease, border-color .15s ease;
}
.pt-danger-link:hover,
.pt-danger-link:focus {
    background: #FDECEA;
    border-color: rgba(192,57,43,.25);
    color: #A93226 !important;
}
html[data-theme="dark"] .pt-danger-link { color: #FF8B7A !important; }
html[data-theme="dark"] .pt-danger-link:hover { background: rgba(255,139,122,.12); border-color: rgba(255,139,122,.28); }

/* ============================================================================
   SEGMENTI attivi/inattivi (2026-08-08)
   .nav-tabs.menu-tabs erano due blocchi quadrati blu #393cc6 e grigio #737373,
   ereditati dal tema originale: sulle pagine del sito (arancio, angoli morbidi)
   sembravano incollati da un altro prodotto. Diventano un controllo segmentato
   unico, come i filtri del resto del sito. Usato da negozi, annunci, sedi,
   pagamenti: cambiando qui cambiano tutti insieme.
   ========================================================================== */
.nav-tabs.menu-tabs {
    display: inline-flex !important;
    gap: 4px;
    padding: 4px !important;
    margin-bottom: 22px !important;
    background: var(--pt-surface-2, #FAFAF7);
    border: 1px solid var(--pt-line, #E5E7EB) !important;
    border-radius: 999px;
}
.nav-tabs.menu-tabs .nav-item { padding-right: 0 !important; }
.nav-tabs.menu-tabs .nav-link {
    padding: 8px 20px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--pt-ink-2, #334155) !important;
    font-size: 14.5px !important;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.nav-tabs.menu-tabs .nav-link:hover {
    background: var(--pt-brand-soft, #FFF2EC) !important;
    color: var(--pt-brand-strong, #E65525) !important;
}
.nav-tabs.menu-tabs .nav-link.active,
.nav-tabs.menu-tabs .nav-item.active .nav-link {
    background: var(--pt-brand, #FF6B35) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.12);
}
html[data-theme="dark"] .nav-tabs.menu-tabs {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] .nav-tabs.menu-tabs .nav-link { color: #C9D1E3 !important; }

/* ============================================================================
   DISPONIBILITÀ — orari settimanali (2026-08-08)
   Com'era: otto righe identiche che ripetevano "Dal tempo"/"Al tempo" (16
   etichette per una tabella di 8 righe), caselle di spunta minuscole di
   sistema, nessuna separazione tra i giorni. Adesso le etichette compaiono
   una volta sola in cima (restano nel DOM per i lettori di schermo), il
   giorno e' un interruttore leggibile e la riga "Tutti i giorni" si distingue
   perche' comanda le altre.
   Le etichette italiane erano tradotte a macchina: "Dal tempo"/"Al tempo"
   -> "Dalle"/"Alle" (language_management, sno 3355 e 3904).
   ========================================================================== */
.availability-table { margin-bottom: 0; }

.availability-table td {
    padding: 14px 12px !important;
    vertical-align: middle !important;
    border-top: 1px solid var(--pt-line, #E5E7EB) !important;
    border-bottom: 0 !important;
}
.availability-table tr:first-child td { border-top: 0 !important; }

/* prima colonna: il giorno come interruttore */
.availability-table td:first-child {
    width: 210px;
    font-size: 15px;
    font-weight: 600;
    color: var(--pt-ink, #0F172A);
    white-space: nowrap;
}
.availability-table input[type="checkbox"] {
    width: 19px;
    height: 19px;
    margin-right: 10px;
    vertical-align: -4px;
    accent-color: var(--pt-brand, #FF6B35);
    cursor: pointer;
}

/* la riga "Tutti i giorni" comanda le altre: si vede che e' diversa */
.availability-table tr:first-child td {
    background: var(--pt-brand-soft, #FFF2EC);
}
.availability-table tr:first-child td:first-child { border-radius: 12px 0 0 12px; }
.availability-table tr:first-child td:last-child  { border-radius: 0 12px 12px 0; }

/* le etichette Dalle/Alle una volta sola: dalla seconda riga restano solo
   per i lettori di schermo (non display:none, che le farebbe sparire anche a loro) */
.pt-av-lab {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pt-ink-3, #64748B);
    margin-bottom: 6px;
}
.availability-table tr:not(:first-child) .pt-av-lab {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: 0; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.availability-table .time-select { display: block; }
.availability-table select.form-control {
    height: 44px;
    border-radius: 11px !important;
    border: 1px solid var(--pt-line, #E5E7EB) !important;
    background-color: var(--pt-surface, #fff) !important;
    font-size: 14.5px;
    color: var(--pt-ink, #0F172A);
}
.availability-table select.form-control:focus {
    border-color: var(--pt-brand, #FF6B35) !important;
    box-shadow: 0 0 0 3px rgba(255,107,53,.14) !important;
}

@media (max-width: 767px) {
    .availability-table td { padding: 10px 8px !important; }
    .availability-table td:first-child { width: auto; }
    .availability-table select.form-control { height: 42px; font-size: 14px; }
}

html[data-theme="dark"] .availability-table td { border-top-color: rgba(255,255,255,.10) !important; }
html[data-theme="dark"] .availability-table tr:first-child td { background: rgba(255,107,53,.12); }
html[data-theme="dark"] .availability-table select.form-control {
    background-color: #16203A !important;
    border-color: rgba(255,255,255,.14) !important;
    color: #E8ECF6;
}

/* I menu degli orari non sono <select> nativi: select2 li nasconde e disegna
   un proprio contenitore. Quindi l'altezza e il raggio vanno messi qui,
   altrimenti le regole su select.form-control non si vedono (2026-08-08). */
.availability-table .select2-container { width: 100% !important; }
.availability-table .select2-container--default .select2-selection--single {
    height: 44px !important;
    border-radius: 11px !important;
    border: 1px solid var(--pt-line, #E5E7EB) !important;
    background: var(--pt-surface, #fff) !important;
    display: flex;
    align-items: center;
}
.availability-table .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important;
    padding-left: 14px !important;
    font-size: 14.5px;
    color: var(--pt-ink, #0F172A) !important;
}
.availability-table .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    right: 8px !important;
}
.availability-table .select2-container--default.select2-container--open .select2-selection--single,
.availability-table .select2-container--default .select2-selection--single:focus {
    border-color: var(--pt-brand, #FF6B35) !important;
    box-shadow: 0 0 0 3px rgba(255,107,53,.14) !important;
}
html[data-theme="dark"] .availability-table .select2-container--default .select2-selection--single {
    background: #16203A !important;
    border-color: rgba(255,255,255,.14) !important;
}
html[data-theme="dark"] .availability-table .select2-container--default .select2-selection--single .select2-selection__rendered { color: #E8ECF6 !important; }

/* ============================================================================
   TENDINA MESSAGGI / NOTIFICHE (2026-08-09)
   Com'era: .noti-content aveva height:290px fissa, quindi con zero messaggi
   restava un rettangolo bianco alto 290px e vuoto. Peggio: la condizione nel
   navbar era rovesciata e il testo "Lista messaggi vuota" compariva solo
   quando i messaggi c'erano — corretta anche quella.
   ========================================================================== */
.notifications .noti-content {
    height: auto !important;
    min-height: 0 !important;
    max-height: min(56vh, 340px) !important;
    width: 340px !important;
}
.pt-noti-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 34px 20px !important;
    text-align: center;
    color: var(--pt-ink-3, #64748B) !important;
    font-size: 14px;
}
.pt-noti-empty i { font-size: 22px; opacity: .4; }
html[data-theme="dark"] .pt-noti-empty { color: #98A3B8 !important; }

/* ============================================================================
   FILTRI DEGLI ORDINI su una riga (2026-08-09)
   I due pulsanti erano un cerchio arancione e un quadrato rosso: stessa
   funzione, due forme. Ora stessa misura e stessa forma, il rosso solo come
   colore del testo perche' "azzera" non e' un'azione distruttiva.
   ========================================================================== */
.pt-filtri .form-control { height: 44px; border-radius: 11px !important; }
.pt-filtri .sort-by { margin: 0; }
.pt-filtri .sort-by select,
.pt-filtri .select2-container { min-width: 150px; }
.pt-filtri .custom-btn-search {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    padding: 0 !important;
    border-radius: 11px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.pt-filtri .custom-btn-search.btn-primary {
    background: var(--pt-brand, #FF6B35) !important;
    border-color: var(--pt-brand, #FF6B35) !important;
    color: #fff !important;
}
.pt-filtri .custom-btn-search.btn-primary:hover {
    background: var(--pt-brand-strong, #E65525) !important;
    border-color: var(--pt-brand-strong, #E65525) !important;
}
.pt-filtri .custom-btn-search.btn-danger {
    background: transparent !important;
    border: 1px solid var(--pt-line, #E5E7EB) !important;
    color: var(--pt-ink-3, #64748B) !important;
}
.pt-filtri .custom-btn-search.btn-danger:hover {
    background: #FDECEA !important;
    border-color: rgba(192,57,43,.25) !important;
    color: #C0392B !important;
}
@media (max-width: 767px) {
    .pt-filtri > [class^="col"] { flex: 1 1 100%; max-width: 100%; }
    .pt-filtri > .col-auto { flex: 0 0 auto; }
}

/* ============================================================================
   LA LINEA SOTTO LE TABELLE (2026-08-09)
   Causa: .card ha border-radius 16px ma overflow visible, e dentro c'e' un
   .table-responsive (quadrato, overflow-x auto) la cui ultima riga ha un
   border-bottom grigio. Sotto l'angolo tondo della scheda restava quindi una
   linea retta, piu' evidente quando la tabella e' piu' larga della scheda
   (a 1280px la tabella delle offerte sporge di 93px e compare la barra di
   scorrimento). Due correzioni: l'ultima riga non ha bordo inferiore, e il
   contenitore che scorre prende lo stesso raggio della scheda.
   ========================================================================== */
.card > .table-responsive:last-child,
.card > div:last-child > .table-responsive:last-child {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* selettore discendente e non figlio diretto: in alcune pagine (incassi)
   le righe non sono figlie dirette di tbody e la regola non le prendeva */
.table-responsive table tr:last-child > td,
.table-responsive table tr:last-child > th {
    border-bottom: 0 !important;
}

/* la barra di scorrimento orizzontale resta necessaria sulle tabelle larghe,
   ma sottile e discreta invece della barra di sistema */
.table-responsive { scrollbar-width: thin; }
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-track { background: transparent; }
.table-responsive::-webkit-scrollbar-thumb {
    background: rgba(15,23,42,.16);
    border-radius: 999px;
}
.table-responsive::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.28); }
html[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }

/* Stessa storia in cima: la fascia grigia dell'intestazione ha angoli quadri
   dentro una scheda con angoli tondi, quindi sbordava sopra la curva. Il
   contenitore che scorre prende il raggio anche in alto, e per sicurezza lo
   prendono anche la prima e l'ultima intestazione (2026-08-09). */
.card > .table-responsive:first-child,
.card > .card-body > .table-responsive:first-child,
.card > div:first-child > .table-responsive:first-child {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.table-responsive table thead tr:first-child > th:first-child { border-top-left-radius: 16px; }
.table-responsive table thead tr:first-child > th:last-child  { border-top-right-radius: 16px; }

/* ============================================================================
   MESSAGGI a piena pagina (2026-08-09)
   Com'era: la chat era una scheda dentro un container centrato, con margini
   larghi e sotto mezza pagina vuota.
   Come e' ora: il piede del sito su questa pagina non c'e' (in una
   messaggistica non serve) e il guscio ha un'altezza esplicita, schermata meno
   la barra del titolo. Lo scorrimento sta dentro le due colonne.
   ATTENZIONE, lezione imparata a caro prezzo: qui NON si usa una catena di
   flex. Prima avevo messo flex:1 1 0% sul guscio e sui suoi genitori: in un
   contenitore flex in colonna il flex-grow VINCE sull'altezza, quindi il
   guscio si allungava a 802px ignorando ogni regola di height, comprese quelle
   con !important. L'altezza esplicita e nessun flex sul guscio: fine del
   problema.
   ========================================================================== */
html:root body.pt-chat-full .footer { display: none !important; }

html:root body.pt-chat-full .pt-chat-page {
    padding: 14px 0 16px !important;
}
html:root body.pt-chat-full .pt-chat-page > .container {
    max-width: none;               /* la chat prende tutta la larghezza utile */
    padding-left: 18px;
    padding-right: 18px;
}
html:root body.pt-chat-full .pt-chat-shell {
    border-radius: 18px;
}
/* le due aree che scorrono per conto loro, non la pagina */
html:root body.pt-chat-full .pt-contacts-body {
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 767px) {
    html:root body.pt-fill { overflow: auto; }
    html:root body.pt-chat-full .main-wrapper.pt-fill { height: auto; min-height: 100vh; overflow: visible; }
    html:root body.pt-chat-full .pt-chat-page > .container { padding-left: 12px; padding-right: 12px; }
    html:root body.pt-chat-full .pt-chat-shell { border-radius: 14px; }
}

/* Disciplina del flex dentro .main-wrapper.pt-fill: i figli tengono la loro
   altezza (senza questa regola la barra del titolo veniva schiacciata a ZERO,
   misurato) e solo la scheda di accesso si allarga. */
html:root .main-wrapper.pt-fill > * { flex: 0 0 auto; }
html:root .main-wrapper.pt-fill > .pt-auth-page { flex: 1 0 auto; }

/* PT 2026-08-09 — l'accesso resta "una schermata" quando ci sta, ma se la
   finestra e' bassa (misurato a 1280x720: il piede finiva fuori) deve poter
   scorrere, altrimenti diventa irraggiungibile. Il blocco totale dello
   scorrimento vale solo per la chat, dove il contenuto e' costruito per
   riempire esattamente lo spazio. */
html:root body.pt-fill:not(.pt-chat-full) { overflow: auto !important; }
html:root body.pt-fill:not(.pt-chat-full) .main-wrapper.pt-fill { height: auto; min-height: 100vh; overflow: visible; }

/* La riga bianca in fondo alla chat (2026-08-09)
   Causa: style.css cappa .chat-scroll a max-height: calc(100vh - 255px), cioe'
   645px su uno schermo da 900. Il guscio ora e' alto 690, quindi sotto le due
   colonne restavano 45px di bianco e la linea divisoria si fermava a metà.
   Le colonne devono riempire il guscio, non un'altezza calcolata sullo schermo. */
html:root body.pt-chat-full .pt-chat-shell > .row > [class*="col-"] { height: 100% !important; }
html:root body.pt-chat-full .pt-chat-shell .chat-scroll {
    max-height: 100% !important;
    height: 100% !important;
}
html:root body.pt-chat-full .pt-chat-shell .card { height: 100% !important; }

@media (max-width: 767px) {
    /* sul telefono le colonne si impilano: qui l'altezza fissa non serve */
    html:root body.pt-chat-full .pt-chat-shell > .row > [class*="col-"],
    html:root body.pt-chat-full .pt-chat-shell .chat-scroll,
    html:root body.pt-chat-full .pt-chat-shell .card { height: auto !important; }
    html:root body.pt-chat-full .pt-chat-shell .chat-scroll { max-height: 60vh !important; }
}

/* Spaziatura della lista contatti nella chat (2026-08-09)
   Le voci erano riquadri alti con molta aria in mezzo: su una lista di tre
   nomi passavano piu' spazio che contenuto. Righe piu' compatte, distanza
   costante fra una e l'altra, e la foto proporzionata al testo. */
html:root body.pt-chat-full .pt-contacts-list { padding: 8px !important; margin: 0 !important; }
html:root body.pt-chat-full .pt-contacts-list .pt-contact-item { margin: 0 0 4px !important; }
html:root body.pt-chat-full .pt-contacts-list .pt-contact-item:last-child { margin-bottom: 0 !important; }
html:root body.pt-chat-full .pt-contacts-list .pt-contact-item > a { padding: 8px 10px !important; border-radius: 12px; }
html:root body.pt-chat-full .pt-contact-row { align-items: center; gap: 10px; }
html:root body.pt-chat-full .pt-contact-avatar .user_img { width: 42px; height: 42px; object-fit: cover; }
html:root body.pt-chat-full .pt-contact-name { font-size: 15px; line-height: 1.25; display: block; }
html:root body.pt-chat-full .pt-contact-preview { font-size: 12.5px; line-height: 1.25; display: block; }

/* ============================================================================
   TENDINE DI NOTIFICHE E MESSAGGI nello stile del sito (2026-08-09)
   Erano rettangoli con angoli vivi, bordo grigio netto e nessuna ombra: sopra
   una barra di pillole arrotondate sembravano di un altro prodotto. E
   "CANCELLA TUTTO" era rosso maiuscolo, cioe' urlava piu' del contenuto.
   ========================================================================== */
html:root .logged-item .dropdown-menu {
    border: 1px solid var(--pt-line, #E5E7EB) !important;
    border-radius: var(--pt-radius, 16px) !important;
    box-shadow: var(--pt-shadow-2, 0 10px 25px -5px rgba(15,23,42,.10)) !important;
    padding: 0 !important;
    overflow: hidden;                 /* niente angoli quadri dentro quelli tondi */
    margin-top: 10px !important;
}
html:root .topnav-dropdown-header,
html:root .topnav-dropdown-footer {
    height: auto !important;
    line-height: 1.3 !important;
    padding: 12px 16px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
html:root .topnav-dropdown-header {
    border-bottom: 1px solid var(--pt-line, #E5E7EB) !important;
    background: var(--pt-surface-2, #FAFAF7);
}
html:root .topnav-dropdown-header .notification-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pt-ink, #0F172A);
}
/* "cancella tutto": azione secondaria, non un allarme */
html:root .topnav-dropdown-header .clear-noti {
    font-size: 12.5px !important;
    font-weight: 500;
    text-transform: none !important;
    color: var(--pt-ink-3, #64748B) !important;
    padding: 4px 8px;
    border-radius: 8px;
}
html:root .topnav-dropdown-header .clear-noti:hover {
    background: #FDECEA;
    color: #C0392B !important;
}
html:root .topnav-dropdown-footer {
    border-top: 1px solid var(--pt-line, #E5E7EB) !important;
    justify-content: center;
    background: var(--pt-surface-2, #FAFAF7);
}
html:root .topnav-dropdown-footer > a {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pt-brand-strong, #E65525) !important;
}
html:root .notifications ul.notification-list > li a { border-radius: 10px; margin: 2px 6px; }
html:root .notifications ul.notification-list > li a:hover { background: var(--pt-brand-soft, #FFF2EC); }

html[data-theme="dark"] .logged-item .dropdown-menu {
    background: #16203A !important;
    border-color: rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] .topnav-dropdown-header,
html[data-theme="dark"] .topnav-dropdown-footer { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10) !important; }
html[data-theme="dark"] .topnav-dropdown-header .notification-title { color: #E8ECF6; }

/* ============================================================================
   CHAT, TEMA SCURO: una superficie sola, non una dentro l'altra (2026-08-09)
   Causa: in modern.css la cornice della ricerca (.pt-chat-search .input-group)
   e quella del campo messaggio (.pt-chat-composer) hanno il fondo scritto a
   mano — #fff e #FAFAFB — senza controparte per il tema scuro. Il campo dentro
   diventava scuro (regola generica su .form-control) e la cornice restava
   bianca: il risultato era un rettangolo scuro dentro una cornice bianca.
   Rimedio: la cornice e' l'unica superficie, il campo e' trasparente e
   riempie lo spazio. Vale anche nel tema chiaro, dove il doppio fondo non si
   vedeva ma c'era.
   ========================================================================== */
html:root .pt-chat-search .input-group .form-control,
html:root .pt-chat-composer .form-control {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
}

html[data-theme="dark"] .pt-chat-search .input-group,
html[data-theme="dark"] .pt-chat-composer {
    background: #16203A !important;
    border-color: rgba(255,255,255,.14) !important;
}
html[data-theme="dark"] .pt-chat-composer:focus-within,
html[data-theme="dark"] .pt-chat-search .input-group:focus-within {
    background: #1B2542 !important;
    border-color: var(--pt-brand, #FF6B35) !important;
}
html[data-theme="dark"] .pt-chat-search .search_btn,
html[data-theme="dark"] .pt-chat-composer .input-group-text { background: transparent !important; }

/* Il doppio bordo quando si scrive (2026-08-09)
   L'anello arancione di messa a fuoco lo disegna la cornice
   (.pt-chat-composer:focus-within). Il campo dentro aggiungeva il PROPRIO
   bordo e la propria ombra di focus, ereditati dalle regole generiche su
   .form-control:focus: due anelli concentrici. Il campo non disegna piu'
   niente, l'anello e' uno solo e sta sulla cornice. */
html:root .pt-chat-composer .form-control:focus,
html:root .pt-chat-composer .form-control:focus-visible,
html:root .pt-chat-composer .form-control:active,
html:root .pt-chat-search .input-group .form-control:focus,
html:root .pt-chat-search .input-group .form-control:focus-visible,
html:root .pt-chat-search .input-group .form-control:active {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Barra di scrittura: una riga sola, sottile, pulsante a destra (2026-08-09)
   Che cosa avevo rotto io: la regola che rendeva il campo trasparente gli dava
   anche width:100%, quindi il campo occupava tutta la riga e il pulsante Invia
   andava a capo. Risultato: una cornice alta il doppio con il pulsante sotto,
   dentro il riquadro del piede — la "sezione dentro la sezione".
   Ora: il piede non ha piu' un riquadro suo, la cornice e' una riga di 48px e
   il pulsante sta a destra sulla stessa riga. */
html:root .pt-chat-footer {
    background: transparent !important;
    border-top: 1px solid var(--pt-line, #E5E7EB) !important;
    padding: 12px 16px !important;
}
html:root .pt-chat-composer {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px;
    min-height: 48px;
    padding: 4px 4px 4px 14px !important;
}
html:root .pt-chat-composer .form-control {
    width: auto !important;
    flex: 1 1 0% !important;
    min-width: 0;
    height: 38px !important;
    padding: 0 !important;
}
html:root .pt-chat-composer .pt-chat-send {
    flex: 0 0 auto !important;
    margin-left: auto;
    width: 38px; height: 38px;
    padding: 0 !important;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
}
html[data-theme="dark"] .pt-chat-footer { border-top-color: rgba(255,255,255,.10) !important; }

/* ============================================================================
   MESSAGGI: fascia del titolo bassa (2026-08-09)
   Su questa pagina la fascia del titolo occupava 182px per dire una parola,
   "Messaggi", e quei pixel servono alla conversazione. Questa e' l'unica
   pagina dove il titolo non deve competere con il contenuto: titolo piu'
   piccolo, aria ridotta, niente margine sotto (non ci sono briciole di pane).
   L'altezza del guscio nella vista (calc(100vh - N)) va tenuta in accordo:
   N = fascia + margini. Misurato a 1440x900 e 1280x720: fascia 107, margini
   14 sopra e 17 sotto -> N = 138, nessuna barra di scorrimento in piu'.
   ========================================================================== */
html:root body.pt-chat-full .breadcrumb-bar.pt-hero-bar,
html:root body.pt-chat-full .breadcrumb-bar.pt-hero-bar--list {
    padding: calc(var(--bm-size, 52px) + 8px) 0 12px !important;
}
html:root body.pt-chat-full .breadcrumb-bar.pt-hero-bar .breadcrumb-title h2,
html:root body.pt-chat-full .breadcrumb-bar.pt-hero-bar h2 {
    font-size: 30px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
}
html:root body.pt-chat-full .breadcrumb-bar.pt-hero-bar .row { row-gap: 0 !important; }
@media (max-width: 991px) {
    html:root body.pt-chat-full .breadcrumb-bar.pt-hero-bar,
    html:root body.pt-chat-full .breadcrumb-bar.pt-hero-bar--list {
        min-height: 0 !important;
        padding: calc(var(--bm-size, 46px) + 6px) 0 10px !important;
    }
    html:root body.pt-chat-full .breadcrumb-bar.pt-hero-bar h2 { font-size: 24px !important; }
}

/* ============================================================================
   SCHEDA NEGOZIO: contatori e pulsante "Visita il negozio" (2026-08-09)
   Com'era: i due contatori erano rettangoli ad angoli vivi (border-radius 2px)
   con testo da 12px, e il pulsante era una fascia a tutta larghezza con angoli
   a spigolo, bordo arancione tenue, testo centrato E una pallina indaco
   rgba(57,60,198) attorno alla freccia — residuo della tavolozza del tema
   originale. Tre idee grafiche diverse in due centimetri, nessuna del sito.
   Ora: contatori a pillola sui token di superficie, e un pulsante secondario
   vero (bordo sottile, angoli da 12, freccia in arancione dentro il testo).
   ========================================================================== */
html:root .shop-info-det ul {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 0 14px !important; padding: 0 !important; list-style: none;
}
html:root .shop-info-det ul li {
    margin: 0 !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    background: var(--pt-surface-2, #F4F5F7) !important;
    border: 1px solid var(--pt-line, #E5E7EB) !important;
    color: var(--pt-ink-2, #64748B) !important;
    font-size: 13px !important; font-weight: 600; line-height: 1.3;
    white-space: nowrap;
}
html[data-theme="dark"] .shop-info-det ul li {
    background: rgba(255, 255, 255, .05) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

html:root .visit-store { padding: 0 !important; border: 0 !important; }
html:root .visit-store a {
    display: inline-flex !important; align-items: center; justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    padding: 0 16px !important;
    border-radius: 12px !important;
    background: transparent !important;
    border: 1px solid var(--pt-line, #E5E7EB) !important;
    color: var(--pt-ink, #0F172A) !important;
    font-size: 14px !important; font-weight: 700; text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
html:root .visit-store a:hover,
html:root .visit-store a:focus-visible {
    background: var(--pt-brand-soft, #FFF2EC) !important;
    border-color: var(--pt-brand, #FF6B35) !important;
    color: var(--pt-brand-strong, #E65525) !important;
}
/* la freccia e' un segno, non un distintivo: via la pallina indaco */
html:root .visit-store a i {
    background: none !important;
    border-radius: 0 !important;
    width: auto !important; height: auto !important;
    padding: 0 !important;
    color: var(--pt-brand, #FF6B35) !important;
    font-size: 16px;
    transition: transform .18s ease;
}
html:root .visit-store a:hover i { transform: translateX(3px); }
html[data-theme="dark"] .visit-store a {
    border-color: rgba(255, 255, 255, .14) !important;
    color: var(--pt-ink, #F1F5F9) !important;
}
html[data-theme="dark"] .visit-store a:hover,
html[data-theme="dark"] .visit-store a:focus-visible {
    background: rgba(255, 107, 53, .12) !important;
    border-color: rgba(255, 107, 53, .45) !important;
    color: #FF8B5F !important;
}

/* Notifiche: la fascia del titolo era quella grezza del tema (36px, h2 da 24px)
   mentre ogni altro elenco usa .pt-hero-bar--list. Aggiunte le classi nella
   vista; qui solo il pulsante "Elimina tutto", che era rosso su fondo rosa e
   urlava piu' del titolo: ora e' un'azione discreta, rossa solo al passaggio. */
html:root .pt-noti-actions { text-align: center; margin-top: 12px; }
html:root .breadcrumb-bar.pt-hero-bar #not_del_all {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 12px auto 0 !important;
    padding: 8px 16px;
    border-radius: 999px;
    background: transparent !important;
    border: 1px solid var(--pt-line, #E5E7EB);
    color: var(--pt-ink-2, #64748B) !important;
    font-size: 13px; font-weight: 600;
}
html:root .breadcrumb-bar.pt-hero-bar #not_del_all:hover {
    background: rgba(220, 38, 38, .08) !important;
    border-color: rgba(220, 38, 38, .35);
    color: #DC2626 !important;
}
html[data-theme="dark"] .breadcrumb-bar.pt-hero-bar #not_del_all {
    border-color: rgba(255, 255, 255, .14);
}

/* Scheda negozio: le due righe allineate (2026-08-09)
   Com'era: i contatori partivano da un'inquadratura, il pulsante da un'altra —
   bordi sinistro e destro sfalsati di 8px — e i contatori erano allineati a
   sinistra mentre il pulsante era centrato. Ora le due righe hanno la stessa
   larghezza, tutto centrato, e la misura scende di un gradino. */
html:root .shop-info-det,
html:root .visit-store {
    padding-left: 0 !important; padding-right: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
    width: 100%;
}
html:root .shop-info-det ul { justify-content: center !important; gap: 8px; }
html:root .shop-info-det ul li {
    padding: 5px 13px !important;
    font-size: 12.5px !important;
}
html:root .visit-store a {
    min-height: 38px;
    font-size: 13.5px !important;
}
html:root .visit-store a i { font-size: 15px; }

/* ============================================================================
   BARRA IN ALTO: via il doppione della chat, notifiche con la sola icona
   (2026-08-09)
   Com'era: due voci per la stessa cosa. pt-bubble.js crea una bolla
   "Messaggi" (fas fa-comment-dots) e accanto restava la vecchia tendina del
   tema con feather-message-circle e il contatore dei non letti: una pillola
   con il fumetto e uno "0" accanto, che non dice nulla quando non c'e' niente
   da leggere. I messaggi stanno nel menu dell'avatar e nella bolla Messaggi.
   Perche' NASCOSTA e non rimossa dal DOM: chat.js aggiorna il contatore e la
   lista dentro questa tendina; togliendo il nodo si romperebbe il polling.
   La regola e' solo un display:none, quindi se :has() non fosse disponibile
   il peggio che accade e' tornare al comportamento di prima.
   ========================================================================== */
html:root .header-navbar-rht > li:has(> a > i.feather-message-circle),
html:root #pt-bm .bm-actions > li:has(a i.feather-message-circle),
html:root #pt-bar .bm-actions > li:has(a i.feather-message-circle) {
    display: none !important;
}
/* Bolle di servizio: testo su schermo grande, sola icona sul telefono
   (2026-08-09)
   Su desktop lo spazio c'e' e la parola aiuta: notifiche, messaggi e cambio
   tema tengono l'etichetta. Sotto i 992px la barra deve stare in una riga e
   vince l'icona.
   L'etichetta non si spegne con display:none ma si nasconde alla vista
   restando nell'albero: la bolla Messaggi e' un <a> che contiene solo
   un'icona e, con l'etichetta spenta, sarebbe un collegamento senza nome,
   cioe' invisibile a chi naviga con un lettore di schermo.
   NON si toccano Registrati / Cerca un noleggio (visitatore non collegato) ne'
   Cambia modalita': la' l'etichetta E' il contenuto. */
@media (max-width: 991px) {
    html:root #pt-bm .bm-actions > li:has(a i.feather-bell) .bm-act-lab,
    html:root #pt-bar .bm-actions > li:has(a i.feather-bell) .bm-act-lab,
    html:root #pt-bm .bm-actions > li:has(#pt-theme-toggle) .bm-act-lab,
    html:root #pt-bar .bm-actions > li:has(#pt-theme-toggle) .bm-act-lab,
    html:root #pt-bm .bm-actions > li:has(a.pt-theme-toggle) .bm-act-lab,
    html:root #pt-bar .bm-actions > li:has(a.pt-theme-toggle) .bm-act-lab,
    html:root #pt-bm .bm-actions > li:has(a i.fa-comment-dots) .bm-act-lab,
    html:root #pt-bar .bm-actions > li:has(a i.fa-comment-dots) .bm-act-lab {
        position: absolute !important;
        width: 1px !important; height: 1px !important;
        margin: -1px !important; padding: 0 !important;
        overflow: hidden !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

/* Carrello: il numero si vede sempre, anche 0 (2026-08-09)
   Chi mostra il numero e' il badge, non l'etichetta. L'etichetta della bolla
   resta fuori vista a ogni misura perche' pt-bubble.js non riconosce l'icona
   del carrello nella mappa e come etichetta prende il primo testo dentro il
   nodo — cioe' il badge stesso: senza questa regola la pillola direbbe "0" due
   volte. Il badge invece e' sempre acceso: lo zero di un carrello vuoto e'
   un'informazione, mentre per notifiche e messaggi sarebbe rumore (li' lo
   script in navbar.php continua a nasconderlo). */
html:root #pt-bm .bm-actions > li:has(a i.feather-shopping-cart) .badge.cart_count,
html:root #pt-bar .bm-actions > li:has(a i.feather-shopping-cart) .badge.cart_count,
html:root .header-navbar-rht > li .badge.cart_count {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px;
    background: var(--pt-brand, #FF6B35);
    color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1;
}
html:root #pt-bm .bm-actions > li:has(a i.feather-shopping-cart) .bm-act-lab,
html:root #pt-bar .bm-actions > li:has(a i.feather-shopping-cart) .bm-act-lab {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    margin: -1px !important; padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* I miei negozi: tab e "Aggiungi negozio" sulla stessa riga (2026-08-09)
   Erano su due righe distinte con in mezzo una colonna vuota: il pulsante in
   alto a destra e le tab settanta pixel piu' sotto a sinistra, senza niente a
   legarli. Le tab sono state spostate nella colonna vuota della stessa riga
   (nella vista, non con un margine negativo), quindi ora sono una barra sola:
   tab a sinistra, azione a destra, allineate al centro. */
html:root .pt-shop-toolbar { row-gap: 12px; }
html:root .pt-shop-toolbar .addnewdiv { margin: 0 !important; }
html:root .pt-shop-toolbar .addnewdiv h6 { margin: 0 !important; }
html:root .pt-shop-toolbar .nav-tabs.menu-tabs { margin-bottom: 0 !important; }
@media (max-width: 575px) {
    /* sul telefono la barra si impila: le tab prima, l'azione sotto a tutta larghezza */
    html:root .pt-shop-toolbar > .col-auto { width: 100%; }
    html:root .pt-shop-toolbar .addnewdiv { text-align: left !important; }
    html:root .pt-shop-toolbar .addnewdiv .btn { width: 100%; justify-content: center; }
}

/* ============================================================================
   VETRINA NEGOZIO — disponibilita' nella fascia e fascia che si appiccica
   (2026-08-09)
   1. Gli orari stanno nella fascia in alto: una riga con lo stato (aperto ora /
      chiuso ora) e l'orario di oggi; il dettaglio dei giorni si apre al clic,
      cosi' la fascia non si allunga.
   2. Scorrendo, la fascia si restringe in una barra e prende il posto
      dell'intestazione del sito: logo e bolle di servizio spariscono, resta la
      sola bolla del menu, altrimenti chi ha scorso non ha piu' navigazione.
      Lo stato arriva da una sentinella osservata con IntersectionObserver, non
      da un evento scroll con timer: nessun lavoro a ogni pixel.
   ========================================================================== */
html:root .pt-shop-orari {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-top: 14px;
}
html:root .pt-shop-stato {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 13px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
}
html:root .pt-shop-stato::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
}
html:root .pt-shop-stato.is-open   { background: rgba(22,163,74,.12);  color: #15803D; }
html:root .pt-shop-stato.is-closed { background: rgba(100,116,139,.14); color: var(--pt-ink-2, #64748B); }
html[data-theme="dark"] .pt-shop-stato.is-open   { background: rgba(34,197,94,.16);   color: #4ADE80; }
html[data-theme="dark"] .pt-shop-stato.is-closed { background: rgba(255,255,255,.08); color: #94A3B8; }

html:root .pt-shop-oggi { font-size: 13.5px; font-weight: 600; color: var(--pt-ink, #0F172A); }
html:root .pt-shop-orari-btn {
    border: 1px solid var(--pt-line, #E5E7EB); background: transparent;
    color: var(--pt-ink-2, #64748B);
    padding: 5px 13px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
html:root .pt-shop-orari-btn:hover {
    background: var(--pt-brand-soft, #FFF2EC);
    border-color: var(--pt-brand, #FF6B35);
    color: var(--pt-brand-strong, #E65525);
}
html[data-theme="dark"] .pt-shop-orari-btn { border-color: rgba(255,255,255,.14); }
html[data-theme="dark"] .pt-shop-orari-btn:hover {
    background: rgba(255,107,53,.12); border-color: rgba(255,107,53,.45); color: #FF8B5F;
}
html:root .pt-shop-orari-det { flex: 0 0 100%; margin-top: 4px; }
html:root .pt-shop-orari-det[hidden] { display: none !important; }
html:root .pt-shop-orari-det ul { margin: 0; padding: 0; list-style: none; max-width: 420px; }
html:root .pt-shop-orari-det li {
    display: flex; justify-content: space-between; gap: 18px;
    padding: 7px 0; border-bottom: 1px solid var(--pt-line, #E5E7EB);
    font-size: 13.5px;
}
html:root .pt-shop-orari-det li:last-child { border-bottom: 0; }
html:root .pt-shop-orari-det li span { color: var(--pt-ink-2, #64748B); }
html:root .pt-shop-orari-det li em { font-style: normal; font-weight: 600; color: var(--pt-ink, #0F172A); }
html[data-theme="dark"] .pt-shop-orari-det li { border-bottom-color: rgba(255,255,255,.10); }

/* --- la fascia appiccicata ------------------------------------------------ */
html:root #pt-shop-hero { transition: padding .2s ease; }

html.pt-shop-stuck #pt-shop-hero {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9990;
    margin: 0 !important;
    border-radius: 0 !important;
    /* il fondo NON si tocca: resta l'immagine di .shop-header, la stessa che si
       vede quando la fascia e' grande. Cambiarla in una superficie piatta
       faceva sembrare la barra un altro componente. */
    border-bottom: 1px solid var(--pt-line, #E5E7EB);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
    /* spazio simmetrico ai lati: a sinistra vive la bolla del logo, a destra
       quelle dell'utente e del menu. Con l'informazione centrata questo evita
       che il nome finisca sotto una bolla sugli schermi stretti. */
    /* L'aria sopra e sotto la bolla del logo deve essere la stessa: la bolla sta
       a 14px dal bordo alto ed e' alta 52, quindi la barra vuole 14+52+14 = 80px.
       Con 8px di imbottitura era 61 e la bolla sporgeva di 5px sul contenuto.
       L'altezza si fa con l'imbottitura e NON con min-height: quella, insieme a
       display:flex, ha rimesso in moto il lampeggio (misurato: 17 cambi di
       classe contro 3). */
    padding: 17.5px clamp(120px, 13vw, 200px) !important;
}
html[data-theme="dark"].pt-shop-stuck #pt-shop-hero {
    border-bottom-color: rgba(255, 255, 255, .12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
/* tutta l'informazione al centro */
html.pt-shop-stuck #pt-shop-hero .shop-header-inner {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; padding: 0 !important;
}
html.pt-shop-stuck #pt-shop-hero .shop-content { text-align: center; }
html.pt-shop-stuck #pt-shop-hero .pt-shop-orari { justify-content: center; }
html.pt-shop-stuck #pt-shop-hero .shop-logo { flex: 0 0 auto; margin: 0 !important; }
html.pt-shop-stuck #pt-shop-hero .shop-logo img {
    width: 44px !important; height: 44px !important;
    border-radius: 12px; object-fit: cover;
}
html.pt-shop-stuck #pt-shop-hero .shop-content { min-width: 0; }
html.pt-shop-stuck #pt-shop-hero .shop-content h3 {
    font-size: 17px !important; margin: 0 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* nella barra stretta restano nome, stato e i due contatori: il resto no */
html.pt-shop-stuck #pt-shop-hero .product-category,
html.pt-shop-stuck #pt-shop-hero .shop-info,
html.pt-shop-stuck #pt-shop-hero .pt-shop-orari-btn,
html.pt-shop-stuck #pt-shop-hero .pt-shop-orari-det { display: none !important; }
html.pt-shop-stuck #pt-shop-hero .pt-shop-orari { margin: 2px 0 0 !important; gap: 8px; }
html.pt-shop-stuck #pt-shop-hero .shop-details {
    margin: 0 !important; display: flex; align-items: center; gap: 8px;
    flex: 0 0 auto;
}
html.pt-shop-stuck #pt-shop-hero .shop-details br { display: none; }
html.pt-shop-stuck #pt-shop-hero .shop-details .btn {
    margin: 0 !important; padding: 7px 14px !important; font-size: 13px !important;
}

/* Logo e utente restano visibili sopra la fascia: sono i due appigli per
   uscire dalla vetrina, e nasconderli lasciava chi aveva scorso senza casa e
   senza account. Si spengono solo le bolle di servizio (messaggi, carrello,
   notifiche, tema), che qui non servono. Nessuna regola su justify-content:
   con il logo al suo posto space-between e' di nuovo quello giusto. */
html.pt-shop-stuck #pt-bar .pt-bar-actions > li:not(.bm-toggle-li):not(.user-menu):not(.bm-user-li) { display: none !important; }

@media (max-width: 767px) {
    /* sul telefono la barra stretta tiene solo foto e nome: i contatori
       finirebbero sotto la bolla del menu */
    html.pt-shop-stuck #pt-shop-hero .shop-details { display: none !important; }
    html.pt-shop-stuck #pt-shop-hero .shop-content h3 { font-size: 15px !important; }
    /* Sul telefono nella barra stretta resta il solo nome del negozio, centrato.
       Misurato: fra la bolla del logo (che finisce a 150px) e quelle di utente e
       menu (che iniziano a 306) restano 156px. Nome piu' semaforo non ci stanno:
       il nome veniva tagliato a 98px. Il semaforo si vede nella fascia grande,
       due dita piu' sotto. */
    html.pt-shop-stuck #pt-shop-hero .pt-shop-oggi,
    html.pt-shop-stuck #pt-shop-hero .pt-shop-orari { display: none !important; }
    /* e via anche la miniatura del negozio: accanto alla bolla del logo del sito
       erano due marchi appiccicati in 55px di barra, e quei 52px servivano al
       nome (98px -> lo spazio pieno). */
    html.pt-shop-stuck #pt-shop-hero .shop-logo { display: none !important; }
    /* con la miniatura via la barra scendeva a 35px, piu' bassa delle bolle
       (46px a 10px dal bordo, cioe' fino a 56): sporgevano sul contenuto.
       L'altezza si recupera con l'imbottitura e NON con min-height + flex:
       quella coppia ha rimesso in moto il lampeggio (17 cambi di classe
       misurati contro 3), quindi qui si tocca solo il padding. */
    html.pt-shop-stuck #pt-shop-hero {
        /* sul telefono la bolla e' a 10px ed e' alta 46: 10+46+10 = 66px */
        padding-top: 23.5px !important; padding-bottom: 23.5px !important;
    }
    /* sul telefono la fascia normale impila foto e testo in colonna: nella barra
       stretta quella colonna la faceva alta 124px. Qui si torna in riga. */
    html.pt-shop-stuck #pt-shop-hero .shop-header-inner {
        flex-direction: row !important; text-align: left !important;
    }
    html.pt-shop-stuck #pt-shop-hero .shop-logo img { width: 38px !important; height: 38px !important; }
    html.pt-shop-stuck #pt-shop-hero .pt-shop-orari { justify-content: flex-start !important; }
}

/* I due contatori del negozio su una riga (2026-08-09)
   style.css li impila: .shop-details ha flex-direction:column e "a + a" prende
   margin-top:15px. Su una fascia larga due pulsanti stretti incolonnati
   sprecavano mezza fascia. In riga, con lo stesso stacco fra loro. */
html:root .shop-header .shop-details {
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
html:root .shop-header .shop-details a + a,
html:root .shop-header .shop-details a + button,
html:root .shop-header .shop-details button + a { margin-top: 0 !important; }
html:root .shop-header .shop-details br { display: none !important; }
@media (max-width: 575px) {
    /* sul telefono stretto tornano incolonnati: affiancati si spezzano male */
    html:root .shop-header .shop-details { flex-direction: column !important; align-items: stretch; }
}

/* L'animazione della barra quando compare (2026-08-09)
   Solo transform e opacity: sono le due proprieta' che il browser compone senza
   ricalcolare il layout. Qualsiasi animazione di altezza o di margine qui
   rimetterebbe in moto l'anello di retroazione con la sentinella — il lampeggio
   di cui ho gia' pagato il conto due volte oggi.
   Chi ha chiesto meno movimento nel sistema operativo non vede nulla. */
@keyframes pt-shop-bar-in {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
html.pt-shop-stuck #pt-shop-hero {
    animation: pt-shop-bar-in .26s cubic-bezier(.34, 1.16, .64, 1) both;
    will-change: transform;
}
html.pt-shop-stuck #pt-shop-hero .shop-content h3,
html.pt-shop-stuck #pt-shop-hero .shop-details .btn {
    transition: font-size .2s ease, padding .2s ease;
}
@media (prefers-reduced-motion: reduce) {
    html.pt-shop-stuck #pt-shop-hero { animation: none; }
    html.pt-shop-stuck #pt-shop-hero .shop-content h3,
    html.pt-shop-stuck #pt-shop-hero .shop-details .btn { transition: none; }
}

/* La barra stretta: tutto su una riga sola (2026-08-09)
   Il nome stava su una riga e semaforo piu' orario andavano a capo sotto: due
   righe di testo in una barra che deve essere un filo. Ora .shop-content e' una
   riga: nome, semaforo, orario, e i contatori di seguito.
   Si tocca il FIGLIO, non la fascia: mettere display/min-height sulla fascia
   fissa e' cio' che ha fatto tornare il lampeggio due volte oggi. */
html.pt-shop-stuck #pt-shop-hero .shop-content {
    display: flex; align-items: center; flex-wrap: nowrap;
    gap: 12px; text-align: left !important; min-width: 0;
}
html.pt-shop-stuck #pt-shop-hero .shop-content h3 { flex: 0 1 auto; }
html.pt-shop-stuck #pt-shop-hero .pt-shop-orari {
    margin: 0 !important; flex: 0 0 auto; flex-wrap: nowrap;
}

/* NB: l'accesso amministrazione NON carica pt-mono.css (le pagine admin
   montano admin.css + admin-modern.css). La correzione della doppia scheda
   sta in admin-modern.css: qui non avrebbe avuto alcun effetto. */


/* PT-ASSISTENZA 2026-08-10 (1/2): sticky footer sulle pagine Assistenza,
   senza overflow:hidden perche' il contenuto (thread lunghi) puo' superare
   un'altezza di schermo - diverso da .pt-fill che e' per pagine sempre corte. */
html:root .main-wrapper.pt-sticky-footer {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
html:root .main-wrapper.pt-sticky-footer > .footer {
    /* !important necessario: .footer{margin:0!important} (regola preesistente,
       riga ~99) vince altrimenti a prescindere dalla specificita', perche'
       !important batte sempre le regole non-!important nel cascade. */
    margin-top: auto !important;
    flex: 0 0 auto !important;
}

/* PT-ASSISTENZA 2026-08-10 (2/2): bug preesistente, non solo su Assistenza -
   qualunque <a class="btn btn-primary"> (es. i pulsanti "Apri" nelle liste)
   diventa illeggibile al passaggio del mouse: style.css imposta
   "a:hover{color:#393cc6}" a livello globale, che e' esattamente lo stesso
   colore dello sfondo di .btn-primary:hover -> testo invisibile su sfondo
   identico. Fix generico, non solo per le pagine Assistenza. */
a.btn-primary:hover, a.btn-primary:focus, a.btn-primary:active,
a.btn.btn-primary:hover, a.btn.btn-primary:focus, a.btn.btn-primary:active {
    color: #fff !important;
}


/* PT-ASSISTENZA-DARKHOVER 2026-08-10: bug preesistente, non solo su Assistenza -
   in dark mode il testo delle celle <td> diventa illeggibile al passaggio del
   mouse su una riga di tabella con classe .table-hover. Causa: la regola di
   Bootstrap ".table-hover > tbody > tr:hover > *{color:var(--bs-table-hover-color)}"
   (specificita' 0,2,2) e' PIU' specifica della regola dark-mode
   "html[data-theme=dark] td{color:var(--pt-ink-2)}" (specificita' 0,1,2) in
   modern.css, quindi vince lei e riporta il testo al colore chiaro di default
   (#212529) anche su sfondo scuro -> testo scuro su sfondo scuro, invisibile.
   Verificato dal vivo: hover su riga ticket #9 -> color passava a rgb(33,37,41)
   su sfondo rgb(27,35,51). Fix generico, non solo per le pagine Assistenza. */
html[data-theme="dark"] .table-hover > tbody > tr:hover > *,
html[data-theme="dark"] .table-hover tbody tr:hover td,
html[data-theme="dark"] .table-hover tbody tr:hover th {
    color: var(--pt-ink-2) !important;
}

/* ============================================================================
   PT-MOBILE-HEADERGAP 2026-08-10
   Prima che pt-bubble.js costruisca la barra bolle (o rinunci dopo ~1.5s di
   tentativi, vedi commento "fail-open" in pt-bubble.js), html.ptfx-bmpre
   azzerava padding-top su .main-wrapper (impostato inline in header.php per
   evitare il flash dell'header classico). Lo stato risolto html.ptfx-bm
   riserva invece bm-size+22px. Su connessioni/dispositivi lenti la finestra
   "pre" puo' durare piu' di un secondo: il contenuto restava incollato in
   cima ("poco spazio sopra"), poi saltava in giu' non appena la barra si
   costruiva. Ora riserviamo lo stesso spazio fin da subito: zero flash,
   zero scatto quando la classe cambia (i valori sono identici).
   ========================================================================== */
html:root.ptfx-bmpre .main-wrapper{
  padding-top:calc(var(--bm-size,52px) + 30px)!important;
}
html:root.ptfx-bmpre .main-wrapper:has(> .hero-section),
html:root.ptfx-bmpre .main-wrapper:has(> section.hero-section){
  padding-top:0!important;
}
@media (max-width:991px){
  html:root.ptfx-bmpre .main-wrapper{padding-top:calc(var(--bm-size,46px) + 22px)!important}
}

/* ============================================================================
   PT-MOBILE-BTNWRAP 2026-08-10 — pulsanti che andavano a capo su due righe:
   1) "Nuovo Ticket" (pagina Assistenza): stava in una riga d-flex
      justify-content-between insieme al paragrafo di descrizione; su schermi
      stretti il pulsante veniva schiacciato e il testo andava a capo.
      Ora la riga puo' spezzarsi (il pulsante scende sotto, a larghezza
      piena) e il pulsante stesso non si comprime piu'.
   2) "Rimuovi" (passkey, pagina Profilo e sicurezza, pt-security.js): stava
      in una riga .pt-sec-key troppo stretta per nome+data+pulsante; ora la
      riga puo' spezzarsi e il pulsante non va piu' a capo internamente.
   ========================================================================== */
@media (max-width:575px){
  .pt-contact-form-section .d-flex.justify-content-between.align-items-center{
    flex-wrap:wrap;row-gap:10px;
  }
}
.pt-btn-contact-submit{flex-shrink:0;white-space:nowrap}

@media (max-width:480px){
  .pt-sec-key{flex-wrap:wrap}
}
.pt-sec-key button{flex-shrink:0;white-space:nowrap;margin-left:auto}

/* ============================================================================
   PT-ASSISTENZA-ICONONLY 2026-08-10 — nel pannello bolle mobile (#pt-bm),
   pt-bubble.js aggiunge un'etichetta di testo (.bm-act-lab, presa dal
   title="Assistenza") a OGNI icona spostata da .header-navbar-rht, per
   coerenza con le altre voci (Notifiche, Messaggi, ecc.). Su richiesta,
   il pulsante Assistenza resta solo icona (+ pallino non letti) anche li'.
   ========================================================================== */
#pt-bm .bm-actions li.pt-assistenza-nav .bm-act-lab,
#pt-bm .pt-assistenza-nav .bm-act-lab{display:none!important}

/* ============================================================================
   PT-FIX 2026-08-10 — contrasto testo su .shop-header in dark mode
   Lo sfondo di .shop-header (shop-header.jpg, pattern topografico chiaro) e'
   SEMPRE lo stesso, chiaro, sia in light che in dark mode (vedi commento piu'
   sopra "il fondo NON si tocca"). Il testo pero' in dark mode prendeva i
   colori chiari del tema (es. h3 a rgb(241,245,249), quasi bianco su sfondo
   quasi bianco): "Negozio Demo PrestaTutto" spariva. Fix: dentro .shop-header
   il testo resta sempre scuro, in entrambi i temi.
   ========================================================================== */
html[data-theme="dark"] .shop-header .shop-content h3,
html[data-theme="dark"] .shop-header .product-category span,
html[data-theme="dark"] .shop-header .product-category a,
html[data-theme="dark"] .shop-header .shop-info ul li,
html[data-theme="dark"] .shop-header .shop-info ul li span,
html[data-theme="dark"] .shop-header .shop-info ul li strong,
html[data-theme="dark"] .shop-header .pt-shop-oggi,
html[data-theme="dark"] .shop-header .pt-shop-orari-det,
html[data-theme="dark"] .shop-header .pt-shop-orari-det li{
  color:#14213D!important;
}
html[data-theme="dark"] .shop-header .shop-info ul li i{
  color:#ffa51d!important;
}
html[data-theme="dark"] .shop-header .pt-shop-orari-btn{
  color:#14213D!important;
  border-color:rgba(20,33,61,.35)!important;
}


/* pt-rental-buttons */
/* Pagina prenotazione noleggio: i due pulsanti (Conferma / Annulla) devono
   avere la stessa forma a pillola. .submit-section esiste solo nei form di
   prenotazione, quindi la regola non tocca altri btn-danger del sito. */
html:root .submit-section .btn {
    border-radius: 999px !important;
}