/* ============================================================================
   pt-bubble.css — Header "BubbleMenu" (porting vanilla del componente reactbits,
   senza React e senza GSAP). 2026-07-30
   Fail-open: le regole che nascondono il menu classico si attivano SOLO se il JS
   ha aggiunto html.ptfx-bm — senza JS resta il menu originale.
   ========================================================================== */

:root{
  --bm-size:52px;
  --bm-bg:#fff;
  --bm-ink:#0F172A;
  --bm-accent:#E5541F;
  --bm-shadow:0 6px 20px rgba(15,23,42,.14);
  --bm-ease:cubic-bezier(.34,1.36,.64,1);
}
html[data-theme="dark"]{
  --bm-bg:#1B2333;
  --bm-ink:#E2E8F0;
  --bm-shadow:0 8px 24px rgba(0,0,0,.5);
}

/* ---------------------------------------------- 1. barra: bolle logo/toggle */
html.ptfx-bm .header.sticktop .main-menu-wrapper,
html.ptfx-bm .header .main-menu-wrapper{display:none!important}
html.ptfx-bm #mobile_btn{display:none!important}

html.ptfx-bm .header .navbar-brand.logo{
  display:inline-flex!important;align-items:center;justify-content:center;
  height:var(--bm-size);padding:0 18px;border-radius:calc(var(--bm-size)/2);
  background:var(--bm-bg);box-shadow:var(--bm-shadow);
  transition:transform .28s var(--bm-ease),box-shadow .28s;
}
html.ptfx-bm .header .navbar-brand.logo:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(15,23,42,.18)}
html.ptfx-bm .header .navbar-brand.logo img{max-height:calc(var(--bm-size) * .58);width:auto}

/* pulsante bolla (hamburger -> X) */
.bm-toggle{
  width:var(--bm-size);height:var(--bm-size);flex:0 0 var(--bm-size);
  border:0;border-radius:50%;cursor:pointer;padding:0;
  background:var(--bm-bg);box-shadow:var(--bm-shadow);
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  transition:transform .28s var(--bm-ease),box-shadow .28s,background .2s;
}
.bm-toggle:hover{transform:translateY(-2px)}
.bm-toggle:active{transform:scale(.95)}
.bm-toggle .bm-line{
  display:block;width:24px;height:2px;border-radius:2px;background:var(--bm-ink);
  transition:transform .3s var(--bm-ease),opacity .2s;transform-origin:center;
}
.bm-toggle .bm-line.short{width:16px;align-self:center;margin-left:0}
.bm-toggle[aria-expanded="true"]{background:var(--bm-accent)}
.bm-toggle[aria-expanded="true"] .bm-line{background:#fff;width:24px}
.bm-toggle[aria-expanded="true"] .bm-line:first-child{transform:translateY(4px) rotate(45deg)}
.bm-toggle[aria-expanded="true"] .bm-line:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:991px){:root{--bm-size:46px}.bm-toggle .bm-line{width:20px}}

/* la bolla vive nella barra azioni a destra */
.header-navbar-rht li.bm-toggle-li{display:flex!important;align-items:center;margin-left:10px}

/* ------------------------------------------------------- 2. overlay a pill */
#pt-bm{
  position:fixed;inset:0;z-index:9990;display:none;
  align-items:center;justify-content:center;
  background:rgba(248,247,243,.94);
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
}
html[data-theme="dark"] #pt-bm{background:rgba(12,17,28,.94)}
#pt-bm.is-on{display:flex}
#pt-bm .bm-list{
  list-style:none;margin:0 auto;padding:0 24px;width:100%;max-width:1500px;
  display:flex;flex-wrap:wrap;row-gap:14px;justify-content:center;
}
#pt-bm .bm-col{flex:0 0 calc(100% / 3);display:flex;justify-content:center;padding:0 8px;box-sizing:border-box}
#pt-bm .bm-link{
  --pill-bg:var(--bm-bg);--pill-ink:var(--bm-ink);--hover-bg:#f3f4f6;--hover-ink:var(--bm-ink);--rot:0deg;
  width:100%;min-height:120px;border-radius:999px;text-decoration:none;
  background:var(--pill-bg);color:var(--pill-ink);
  box-shadow:0 6px 18px rgba(15,23,42,.10);
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:clamp(1.3rem,2.6vw,2.4rem);font-weight:700;letter-spacing:-.02em;white-space:nowrap;
  opacity:0;transform:scale(0) rotate(var(--rot));
  transition:opacity .28s ease,transform .5s var(--bm-ease),background .25s ease,color .25s ease;
  transition-delay:calc(var(--i,0) * 80ms);
}
#pt-bm.is-on .bm-link{opacity:1;transform:scale(1) rotate(var(--rot))}
#pt-bm .bm-link .bm-lab{display:inline-block;transform:translateY(14px);opacity:0;
  transition:transform .42s var(--bm-ease),opacity .3s ease;transition-delay:calc(var(--i,0) * 80ms + 90ms)}
#pt-bm.is-on .bm-link .bm-lab{transform:none;opacity:1}
#pt-bm .bm-link .bm-ico{font-size:.62em;opacity:.55;transition:opacity .25s,transform .25s var(--bm-ease)}
@media (min-width:900px){
  #pt-bm .bm-link:hover{background:var(--hover-bg);color:var(--hover-ink);
    transform:scale(1.05) rotate(var(--rot));transition-delay:0s}
  #pt-bm .bm-link:hover .bm-ico{opacity:1;transform:translateX(4px)}
  #pt-bm .bm-link:active{transform:scale(.96) rotate(var(--rot))}
}
#pt-bm .bm-link:focus-visible{outline:3px solid var(--bm-accent);outline-offset:4px}

/* riga di servizio sotto le pill */
#pt-bm .bm-extra{
  position:absolute;left:0;right:0;bottom:26px;display:flex;gap:10px;flex-wrap:wrap;
  align-items:center;justify-content:center;padding:0 20px;
  opacity:0;transform:translateY(10px);transition:opacity .3s ease .35s,transform .3s ease .35s;
}
#pt-bm.is-on .bm-extra{opacity:1;transform:none}
#pt-bm .bm-extra a{
  display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;
  font-size:13.5px;font-weight:700;text-decoration:none;
  background:var(--bm-bg);color:var(--bm-ink);box-shadow:0 3px 10px rgba(15,23,42,.10);
  transition:transform .2s var(--bm-ease),background .2s,color .2s;
}
#pt-bm .bm-extra a:hover{transform:translateY(-2px);background:var(--bm-accent);color:#fff}

@media (max-width:899px){
  #pt-bm{align-items:flex-start;padding-top:110px}
  #pt-bm .bm-list{row-gap:12px}
  #pt-bm .bm-col{flex:0 0 100%;padding:0}
  #pt-bm .bm-link{min-height:78px;font-size:clamp(1.15rem,5vw,1.6rem);transform:scale(.9);--rot:0deg!important}
  #pt-bm.is-on .bm-link{transform:scale(1)}
  #pt-bm .bm-extra{position:static;margin-top:22px}
}

/* accessibilità: niente rotazioni/stagger con "riduci movimento" */
@media (prefers-reduced-motion:reduce){
  html:not(.ptfx-motion) #pt-bm .bm-link{
    transform:none!important;transition:opacity .2s ease!important;transition-delay:0s!important;
  }
  html:not(.ptfx-motion) #pt-bm .bm-link .bm-lab{transform:none!important;opacity:1!important;transition:none!important}
  html:not(.ptfx-motion) #pt-bm .bm-extra{transition:none!important}
  html:not(.ptfx-motion) .bm-toggle,html:not(.ptfx-motion) .bm-toggle .bm-line{transition:none!important}
}
@media print{#pt-bm,.bm-toggle{display:none!important}}


/* ============================================================================
   Header ridotto a 3 bolle: logo (sinistra) · utente · menu   — 2026-07-30
   Tutto il resto della barra viene spostato dentro l'overlay dal JS.
   ========================================================================== */
html.ptfx-bm .header .navbar{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  position:relative;gap:12px;
}
html.ptfx-bm .header .navbar-header{
  position:static!important;left:auto!important;right:auto!important;transform:none!important;
  margin:0!important;flex:0 0 auto;display:flex;align-items:center;
}
html.ptfx-bm .header .navbar-brand.logo{position:static!important;transform:none!important;margin:0!important}
html.ptfx-bm .header .navbar-brand.logo-small{display:none!important}
html.ptfx-bm .header-navbar-rht{
  margin-left:auto!important;display:flex!important;align-items:center;gap:10px;padding:0!important;
}
/* rete di sicurezza: in barra restano solo utente e menu */
/* (regola sostituita piu' sotto: include anche .bm-keep-li) */

/* bolla utente: stesso stile della bolla menu */
html.ptfx-bm .header-navbar-rht > li.bm-user-li{
  display:flex!important;align-items:center;list-style:none;margin:0;position:relative;
}
html.ptfx-bm li.bm-user-li > a{
  width:var(--bm-size);height:var(--bm-size);border-radius:50%;padding:0!important;
  background:var(--bm-bg);box-shadow:var(--bm-shadow);
  display:inline-flex!important;align-items:center;justify-content:center;overflow:hidden;
  transition:transform .28s var(--bm-ease),box-shadow .28s;
}
html.ptfx-bm li.bm-user-li > a:hover{transform:translateY(-2px)}
html.ptfx-bm li.bm-user-li > a img{
  width:calc(var(--bm-size) - 8px);height:calc(var(--bm-size) - 8px);
  border-radius:50%;object-fit:cover;margin:0!important;border:0!important;
}
html.ptfx-bm li.bm-user-li > a span,
html.ptfx-bm li.bm-user-li > a i.fa-chevron-down{display:none!important}
html.ptfx-bm li.bm-user-li .dropdown-menu{right:0;left:auto;margin-top:10px;border-radius:14px;
  box-shadow:0 16px 40px rgba(15,23,42,.18);border:1px solid var(--bm-shadow-line,rgba(15,23,42,.08))}

/* le azioni migrate: riga di pillole dentro l'overlay */
#pt-bm .bm-actions{
  position:absolute;top:26px;left:0;right:0;display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;justify-content:center;padding:0 20px;margin:0;list-style:none;
  opacity:0;transform:translateY(-8px);transition:opacity .3s ease .25s,transform .3s ease .25s;
}
#pt-bm.is-on .bm-actions{opacity:1;transform:none}
#pt-bm .bm-actions > li{position:relative;list-style:none;margin:0}
#pt-bm .bm-actions > li > a,
#pt-bm .bm-actions > li > button{
  display:inline-flex!important;align-items:center;gap:9px;height:44px;padding:0 16px!important;
  border-radius:999px;background:var(--bm-bg);color:var(--bm-ink)!important;
  box-shadow:0 3px 12px rgba(15,23,42,.10);font-size:13.5px;font-weight:700;text-decoration:none;
  border:0;cursor:pointer;transition:transform .2s var(--bm-ease),background .2s,color .2s;
  white-space:nowrap;
}
#pt-bm .bm-actions > li > a:hover,
#pt-bm .bm-actions > li > button:hover{transform:translateY(-2px);background:var(--bm-accent);color:#fff!important}
#pt-bm .bm-actions > li > a:hover i,#pt-bm .bm-actions > li > button:hover i{color:#fff!important}
#pt-bm .bm-actions i{font-size:15px}
#pt-bm .bm-actions .badge,#pt-bm .bm-actions .count{position:static!important;transform:none!important}
#pt-bm .bm-actions .dropdown-menu{max-height:60vh;overflow:auto}
@media (max-width:899px){
  #pt-bm .bm-actions{position:static;margin-bottom:18px;order:-1}
  #pt-bm{flex-direction:column;justify-content:flex-start;padding-top:90px}
}

/* correzioni finali (2026-07-30) */
html.ptfx-bm .header .navbar-brand.logo{
  background:var(--bm-bg)!important;box-shadow:var(--bm-shadow)!important;
}
html.ptfx-bm .header-navbar-rht > li.bm-keep-li{display:flex!important;align-items:center;margin:0}
html.ptfx-bm li.bm-keep-li .btn-signin{
  height:var(--bm-size)!important;min-height:var(--bm-size)!important;
  border-radius:calc(var(--bm-size)/2)!important;padding:0 22px!important;
  box-shadow:var(--bm-shadow)!important;font-weight:700;
}
html.ptfx-bm .header-navbar-rht > li:not(.bm-toggle-li):not(.bm-user-li):not(.bm-keep-li){display:none!important}

/* ============================================================================
   Rifinitura 2026-07-30 (2): barra invisibile + overlay in blur trasparente
   che si apre con un cerchio in espansione dal pulsante.
   ========================================================================== */

/* --- la barra sparisce: restano solo le bolle sospese --------------------- */
html.ptfx-bm .header,
html.ptfx-bm .header.sticktop,
html.ptfx-bm .header .navbar,
html.ptfx-bm .header .header-nav{
  background:transparent!important;background-color:transparent!important;
  border:0!important;border-bottom:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html.ptfx-bm .header.ptfx-scrolled,
html.ptfx-bm .header.sticktop.ptfx-scrolled{box-shadow:none!important}
html.ptfx-bm .header::before,html.ptfx-bm .header::after,
html.ptfx-bm .header .navbar::before,html.ptfx-bm .header .navbar::after{display:none!important}
html.ptfx-bm .header{z-index:9995}

/* --- overlay: blur trasparente + apertura a cerchio dal pulsante ---------- */
#pt-bm{
  display:flex!important;
  opacity:0;visibility:hidden;pointer-events:none;
  background:rgba(252,251,248,.38)!important;
  -webkit-backdrop-filter:blur(22px) saturate(150%)!important;
  backdrop-filter:blur(22px) saturate(150%)!important;
  clip-path:circle(0px at var(--bm-x,92%) var(--bm-y,44px));
  transition:opacity .30s ease,
             clip-path .55s cubic-bezier(.22,.61,.36,1),
             visibility 0s linear .55s;
}
html[data-theme="dark"] #pt-bm{background:rgba(10,14,22,.45)!important}
#pt-bm.is-on{
  opacity:1;visibility:visible;pointer-events:auto;
  clip-path:circle(165% at var(--bm-x,92%) var(--bm-y,44px));
  transition:opacity .26s ease,
             clip-path .62s cubic-bezier(.22,.61,.36,1),
             visibility 0s;
}
/* le pill "nascono" verso il pulsante */
#pt-bm .bm-link{transform-origin:var(--bm-ox,50%) var(--bm-oy,50%)}

@media (prefers-reduced-motion:reduce){
  html:not(.ptfx-motion) #pt-bm{clip-path:none!important;transition:opacity .2s ease!important}
  html:not(.ptfx-motion) #pt-bm.is-on{clip-path:none!important}
}

/* --- bolla utente: tonda e con l'avatar sempre visibile ------------------- */
html.ptfx-bm li.bm-user-li > a{border-radius:50%!important;overflow:hidden}
html.ptfx-bm li.bm-user-li a img{
  width:calc(var(--bm-size) - 8px)!important;height:calc(var(--bm-size) - 8px)!important;
  border-radius:50%!important;object-fit:cover!important;margin:0!important;border:0!important;
  max-width:none!important;
}
html.ptfx-bm li.bm-user-li .bm-user-ico{font-size:18px;color:var(--bm-ink)}

/* --- correzioni 2026-07-30 (3) ------------------------------------------- */
/* le bolle restano SOPRA l'overlay: nitide e cliccabili (la X deve chiudere) */
html.ptfx-bm .header{z-index:10000!important;position:relative}
html.ptfx-bm .header .navbar-header,
html.ptfx-bm .header-navbar-rht{position:relative;z-index:10001}

/* le voci migrate perdono le dimensioni tonde del tema originale */
#pt-bm .bm-actions > li,
#pt-bm .bm-actions > li *{box-sizing:border-box}
#pt-bm .bm-actions > li{width:auto!important;height:auto!important;min-width:0!important;
  border-radius:999px!important;background:transparent!important;box-shadow:none!important;padding:0!important}
#pt-bm .bm-actions > li > a,
#pt-bm .bm-actions > li > button,
#pt-bm .bm-actions > li > a.nav-link{
  width:auto!important;min-width:0!important;max-width:none!important;height:44px!important;
  min-height:44px!important;border-radius:999px!important;overflow:visible!important;
  line-height:44px!important;font-size:13.5px!important;
}
#pt-bm .bm-actions > li > a > span:not(.bm-act-lab):not(.badge){display:none!important}
#pt-bm .bm-actions .bm-act-lab{display:inline!important;white-space:nowrap;font-weight:700}
#pt-bm .bm-actions > li > a i,#pt-bm .bm-actions > li > button i{
  position:static!important;margin:0!important;width:auto!important;height:auto!important;
  line-height:1!important;font-size:15px!important;
}

/* --- correzioni 2026-07-30 (4) ------------------------------------------- */
/* L'header sta sopra l'overlay ma NON deve rubare i clic: passano attraverso,
   tranne sulle bolle vere. Prima la sua fascia bloccava le pillole sottostanti. */
html.ptfx-bm .header,
html.ptfx-bm .header .navbar,
html.ptfx-bm .header .navbar-header,
html.ptfx-bm .header-navbar-rht{pointer-events:none!important}
html.ptfx-bm .header .navbar-brand,
html.ptfx-bm .header-navbar-rht > li,
html.ptfx-bm .header-navbar-rht > li *,
html.ptfx-bm .bm-toggle,
html.ptfx-bm li.bm-user-li *,
html.ptfx-bm li.bm-keep-li *{pointer-events:auto!important}

/* la riga delle azioni scende sotto le bolle, così non si sovrappone */
#pt-bm .bm-actions{top:104px!important}
@media (max-width:899px){#pt-bm .bm-actions{top:auto!important}}

/* dark mode: via qualunque sfondo/linea residua della barra */
html[data-theme="dark"].ptfx-bm .header,
html[data-theme="dark"].ptfx-bm .header.sticktop,
html[data-theme="dark"].ptfx-bm .header .navbar,
html[data-theme="dark"].ptfx-bm .header .header-nav,
html[data-theme="dark"].ptfx-bm .header .navbar-header{
  background:transparent!important;background-color:transparent!important;background-image:none!important;
  border:0!important;border-bottom:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}

/* ============================================================================
   #pt-bar — la barra delle bolle, indipendente dall'header originale (nascosto)
   ========================================================================== */
#pt-bar{
  position:fixed;top:0;left:0;right:0;z-index:10000;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(14px,3vw,32px);
  pointer-events:none;background:transparent;
}
#pt-bar > *{pointer-events:none}
#pt-bar .pt-bar-left,#pt-bar .pt-bar-right{display:flex;align-items:center;gap:10px}
#pt-bar .pt-bar-actions{display:flex;align-items:center;gap:10px;margin:0;padding:0;list-style:none}
#pt-bar .pt-bar-actions > li{list-style:none;margin:0;padding:0;position:relative}
#pt-bar a,#pt-bar button,#pt-bar li,#pt-bar li *{pointer-events:auto}
/* il logo mantiene la forma a bolla anche fuori dall'header */
#pt-bar .navbar-brand.logo{
  display:inline-flex!important;align-items:center;justify-content:center;
  height:var(--bm-size);padding:0 18px;margin:0!important;
  border-radius:calc(var(--bm-size)/2);
  background:var(--bm-bg)!important;box-shadow:var(--bm-shadow)!important;
  transition:transform .28s var(--bm-ease);
}
#pt-bar .navbar-brand.logo:hover{transform:translateY(-2px)}
#pt-bar .navbar-brand.logo img{max-height:calc(var(--bm-size) * .58);width:auto}
#pt-bar .dropdown-menu{right:0;left:auto;margin-top:10px;border-radius:14px;
  box-shadow:0 16px 40px rgba(15,23,42,.20)}
/* lo spazio che occupava l'header lo recupera il contenuto */
html.ptfx-bm .main-wrapper{padding-top:0!important}
@media (max-width:991px){#pt-bar{padding:10px 12px}}
/* ============================================================================
   Rifinitura 2026-07-30 (4): bolla utente - avatar visibile e allineato
   Le regole precedenti erano ancorate a .header-navbar-rht, ma la bolla ora
   vive in #pt-bar: senza display:flex l'<li> tornava list-item e si alzava.
   Inoltre .user-img (wrapper dell'avatar) veniva nascosto dalla regola
   generica "> a span" -> cerchio vuoto.
   ========================================================================== */
html.ptfx-bm li.bm-user-li,
#pt-bar .pt-bar-actions > li{
  display:flex!important;align-items:center;list-style:none;margin:0;padding:0;position:relative;
}
html.ptfx-bm li.bm-user-li > a{
  width:var(--bm-size)!important;height:var(--bm-size)!important;min-height:0!important;
  padding:0!important;margin:0!important;line-height:1!important;
  border-radius:50%!important;overflow:hidden;
  background:var(--bm-bg)!important;box-shadow:var(--bm-shadow)!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
}
html.ptfx-bm li.bm-user-li > a::after,
html.ptfx-bm li.bm-user-li > a::before{display:none!important;content:none!important}
html.ptfx-bm li.bm-user-li a .user-img{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;height:100%!important;margin:0!important;padding:0!important;
  position:static!important;overflow:hidden;border-radius:50%!important;
}
html.ptfx-bm li.bm-user-li a .user-img::after,
html.ptfx-bm li.bm-user-li a .user-img::before{display:none!important;content:none!important}
html.ptfx-bm li.bm-user-li a .user-img img,
html.ptfx-bm li.bm-user-li a img.avatar-img,
html.ptfx-bm li.bm-user-li > a img{
  display:block!important;
  width:var(--bm-size)!important;height:var(--bm-size)!important;
  max-width:none!important;max-height:none!important;min-width:0!important;
  border-radius:50%!important;object-fit:cover!important;
  margin:0!important;padding:0!important;border:0!important;
}
html.ptfx-bm li.bm-user-li .bm-user-ico{
  font-size:19px;line-height:1;color:var(--bm-ink);display:inline-block!important
}
/* le bolle a destra sulla stessa linea, sempre */
#pt-bar .pt-bar-right,#pt-bar .pt-bar-actions{align-items:center!important}
#pt-bar .pt-bar-actions > li > a{vertical-align:middle}


/* ============================================================================
   Rifinitura 2026-07-30 (5): le bolle devono leggersi SOPRA qualunque
   contenuto. Tre livelli: fondo semi-opaco + blur (il contenuto dietro si
   sfoca), anello hairline (stacca dai fondi chiari), ombra a tre strati
   (contatto + diffusa + lunga = sensazione di distanza dal piano).
   ========================================================================== */
:root{
  --bm-shadow:
    0 1px 2px rgba(20,16,14,.10),
    0 6px 16px rgba(20,16,14,.14),
    0 18px 44px rgba(20,16,14,.16);
  --bm-ring:inset 0 0 0 1px rgba(20,16,14,.07);
  --bm-glass:rgba(255,255,255,.90);
  --bm-blur:saturate(160%) blur(14px);
}
html[data-theme="dark"]{
  --bm-shadow:
    0 1px 2px rgba(0,0,0,.45),
    0 8px 20px rgba(0,0,0,.50),
    0 22px 52px rgba(0,0,0,.45);
  --bm-ring:inset 0 0 0 1px rgba(255,255,255,.14);
  --bm-glass:rgba(24,20,18,.82);
}

/* superficie comune delle tre bolle */
#pt-bar .navbar-brand.logo,
.bm-toggle,
html.ptfx-bm li.bm-user-li > a,
html.ptfx-bm li.bm-keep-li .btn-signin{
  background:var(--bm-glass)!important;
  -webkit-backdrop-filter:var(--bm-blur);backdrop-filter:var(--bm-blur);
  box-shadow:var(--bm-shadow),var(--bm-ring)!important;
  transition:transform .28s var(--bm-ease),box-shadow .28s,background .2s!important;
}
#pt-bar .navbar-brand.logo:hover,
.bm-toggle:hover,
html.ptfx-bm li.bm-user-li > a:hover,
html.ptfx-bm li.bm-keep-li .btn-signin:hover{
  transform:translateY(-3px)!important;
  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;
}
.bm-toggle:active,
html.ptfx-bm li.bm-user-li > a:active{transform:scale(.96)!important}

/* toggle aperto: resta l'accento, ma con la stessa elevazione */
.bm-toggle[aria-expanded="true"]{
  background:var(--bm-accent)!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

/* avatar: anello di superficie attorno alla foto, cosi' la bolla si vede */
html.ptfx-bm li.bm-user-li a .user-img img,
html.ptfx-bm li.bm-user-li a img.avatar-img,
html.ptfx-bm li.bm-user-li > a img{
  width:calc(var(--bm-size) - 7px)!important;
  height:calc(var(--bm-size) - 7px)!important;
}
html.ptfx-bm li.bm-user-li > a{padding:0!important}

/* la barra sta sopra tutto, comprese le sezioni con position:sticky del tema */
#pt-bar{z-index:100000!important}
/* al di sotto dell'overlay del menu no: l'overlay copre la pagina, non le bolle */
#pt-bm{z-index:99990}


/* ============================================================================
   Rifinitura 2026-07-30 (6)
   - CTA "Accedi": era testo bianco su vetro bianco -> illeggibile. Torna
     pieno accento (e' l'unica azione primaria della barra).
   - Pillole del menu: righe adiacenti si sovrapponevano (rotazione +-8 gradi
     su pillole larghe = +-27px di ingombro verticale). Rotazione a +-4 e
     row-gap sufficiente.
   ========================================================================== */
html.ptfx-bm li.bm-keep-li .btn-signin,
html.ptfx-bm li.bm-keep-li .btn-signin:link,
html.ptfx-bm li.bm-keep-li .btn-signin:visited{
  background:var(--bm-accent)!important;
  background-image:none!important;
  color:#fff!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border:0!important;
  text-shadow:none;
  font-weight:800;letter-spacing:.02em;
}
html.ptfx-bm li.bm-keep-li .btn-signin:hover{
  background:#c9491a!important;color:#fff!important;
}

/* spazio fra le righe di pillole */
#pt-bm .bm-list{row-gap:34px!important}
@media (max-width:899px){#pt-bm .bm-list{row-gap:14px!important}}

/* la riga delle azioni in alto non deve mai finire sotto le bolle */
#pt-bm .bm-actions{top:112px}


/* Rifinitura (7): il CTA "Accedi" e' un <a> del tema con line-height suo:
   il testo restava in alto. Lo centriamo davvero. */
html.ptfx-bm li.bm-keep-li .btn-signin{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  line-height:1!important;padding-top:0!important;padding-bottom:0!important;
  height:var(--bm-size)!important;min-height:var(--bm-size)!important;
  text-align:center;white-space:nowrap;
}
html.ptfx-bm li.bm-keep-li .btn-signin > *{line-height:1!important;margin:0!important}


/* stato di misura: le pill vengono lette senza trasformazioni, altrimenti il
   loro rettangolo e' quello gia' scalato/ruotato e le origini escono sbagliate
   (menu che si riapre "sparpagliato"). Dura un solo frame, non si vede. */
#pt-bm.bm-measuring .bm-link{transform:none!important;transition:none!important}

/* ============================================================================
   Menu "Cambia modalità" con la stessa lingua della pastiglia (2026-08-08)
   Prima era una scatola bianca generica con l'accento viola del tema legacy.
   Ora riusa le stesse variabili della barra a bolla: superficie di vetro,
   anello, ombra, curva di transizione e accento del marchio.
   ========================================================================== */
.pt-role-pill-menu{
  margin-top:12px!important;
  min-width:248px;
  padding:8px!important;
  border-radius:18px!important;
  background:var(--bm-glass,rgba(255,255,255,.92))!important;
  -webkit-backdrop-filter:var(--bm-blur,saturate(180%) blur(14px));
  backdrop-filter:var(--bm-blur,saturate(180%) blur(14px));
  border:0!important;
  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))!important;
}
.pt-role-pill-menu .dropdown-item{
  display:flex;align-items:center;gap:10px;
  border-radius:12px!important;
  padding:11px 13px!important;
  font-size:14.5px;font-weight:600;
  color:var(--bm-ink,#0F172A)!important;
  transition:background .18s,color .18s,transform .28s var(--bm-ease,cubic-bezier(.34,1.36,.64,1));
}
.pt-role-pill-menu .dropdown-item i{font-size:15px;opacity:.85}
.pt-role-pill-menu .dropdown-item:hover,
.pt-role-pill-menu .dropdown-item:focus{
  background:rgba(229,84,31,.10)!important;
  color:var(--bm-accent,#E5541F)!important;
  transform:translateX(2px);
}
/* la modalità in uso: accento del marchio, non piu' viola */
.pt-role-pill-menu .dropdown-item.active,
.pt-role-pill-menu .dropdown-item.active.disabled,
.pt-role-pill-menu .dropdown-item.active:hover{
  background:rgba(229,84,31,.12)!important;
  color:var(--bm-accent,#E5541F)!important;
  opacity:1!important;
  transform:none;
}
/* il segno di spunta a destra, allineato al bordo */
.pt-role-pill-menu .dropdown-item.active::after{
  content:"\2713";
  margin-left:auto;font-weight:800;font-size:14px;
  color:var(--bm-accent,#E5541F);
}
html[data-theme="dark"] .pt-role-pill-menu .dropdown-item{color:var(--bm-ink,#E2E8F0)!important}
html[data-theme="dark"] .pt-role-pill-menu .dropdown-item:hover,
html[data-theme="dark"] .pt-role-pill-menu .dropdown-item.active{
  background:rgba(255,107,53,.20)!important;color:#FF8A4C!important;
}

/* ============================================================================
   Pastiglia "Cambia modalità" rimossa (2026-08-08)
   Il cambio modalità vive nel selettore delle impostazioni
   (application/views/user/includes/pt_settings_nav.php), che dice anche in che
   modalità sei. Tenerne due era doppione e occupava spazio nella barra.
   Nascosta via CSS e non cancellata dal markup: in navbar.php il blocco ha PHP
   intrecciato (condizioni sul provider collegato) e rimuoverlo a mano rompeva
   il file — provato e ripristinato. Per riattivarla: togliere questo blocco.
   ========================================================================== */
.pt-role-pill-item,
li.nav-item.pt-role-pill-item{display:none!important}