/* CASTE Strategy — telefono: WhatsApp e Prenota diventano due tastini in basso a destra
   appena si inizia a scorrere (decisione di Andrea, mercoledì 4 novembre 2026).
   Sostituisce la barra larga in basso. Caricato dopo sito.css e vetro.css. */
@media (max-width: 760px) {
  body .barra-mobile {
    left: auto !important; right: calc(13px + env(safe-area-inset-right)) !important;
    bottom: calc(13px + env(safe-area-inset-bottom)) !important;
    width: auto !important; flex-direction: column; align-items: flex-end; gap: 13px !important;
    padding: 0 !important; background: none !important; border: 0 !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    /* nascosti: anche visibility, così il tasto Tab non finisce su tasti che non si vedono */
    transform: translateY(calc(100% + 34px)) !important; opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s ease, visibility 0s linear .5s !important;
  }
  /* compaiono appena si scorre (la barra in alto prende .su dopo pochi pixel) */
  body:has(.testa.su) .barra-mobile, body .barra-mobile.su {
    transform: none !important; opacity: 1; pointer-events: auto; visibility: visible;
    transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s ease, visibility 0s !important;
  }
  /* di nuovo nascosti con il menu del telefono aperto (non stanno sopra il menu) e con il banner dei cookie aperto */
  body:has(.testa.aperta) .barra-mobile, body:has(.cookie-bar.is-in) .barra-mobile {
    transform: translateY(calc(100% + 34px)) !important; opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s ease, visibility 0s linear .5s !important;
  }
  body .barra-mobile .btn {
    flex: 0 0 auto !important; width: 55px !important; height: 55px !important; min-height: 55px !important; min-width: 0 !important;
    padding: 0 !important; gap: 0 !important; border-radius: 50% !important; justify-content: center;
    font-size: 0 !important; line-height: 0; overflow: hidden; position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1) !important;
  }
  body .barra-mobile .btn:active { transform: scale(.9) !important; }
  body .barra-mobile .btn::before { display: none !important; }
  /* testo nascosto alla vista ma letto dagli screen reader */
  body .barra-mobile .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* WhatsApp: cerchio verde */
  body .barra-mobile .btn--wa {
    background: #25d366 !important; color: #fff !important; border: 0 !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: 0 0 0 1px rgba(11,11,11,.14), 0 13px 21px -8px rgba(37,211,102,.8), 0 5px 13px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35) !important;
  }
  body .barra-mobile .btn--wa svg {
    width: 26px !important; height: 26px !important; padding: 0 !important; background: none !important; box-shadow: none !important; fill: #fff !important;
  }
  /* Prenota: cerchio giallo con il calendario */
  body .barra-mobile .btn--giallo {
    background: #dfff00 !important; color: #0b0b0b !important; border: 0 !important;
    box-shadow: 0 0 0 1px rgba(11,11,11,.14), 0 13px 21px -8px rgba(223,255,0,.7), 0 5px 13px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6) !important;
  }
  body .barra-mobile .btn--giallo::after {
    content: ""; width: 26px; height: 26px; background: #0b0b0b;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3Cpath d='m9.5 15 2 2 3.5-4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3Cpath d='m9.5 15 2 2 3.5-4'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* focus da tastiera: anello giallo con un bordo nero, si vede sulle sezioni chiare e su quelle scure */
  body .barra-mobile .btn:focus-visible { outline: 2px solid #dfff00 !important; outline-offset: 5px; box-shadow: 0 0 0 5px #0b0b0b !important; }
  /* niente più spazio riservato alla barra larga */
  body { padding-bottom: 0 !important; }
}
/* in fondo alla pagina i tastini occupano 136px a destra (13 + 55 + 13 + 55): il piede lascia 144px liberi,
   così l'ultima riga (copyright e P.IVA) non finisce sotto WhatsApp. Solo dove i tastini ci sono (sito.css li mostra fino a 640px). */
@media (max-width: 640px) {
  .piede { padding-bottom: calc(144px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  /* stessi selettori delle regole sopra, così vincono anche su quelle */
  body .barra-mobile, body .barra-mobile.su, body:has(.testa.su) .barra-mobile, body:has(.testa.aperta) .barra-mobile,
  body:has(.cookie-bar.is-in) .barra-mobile, body .barra-mobile .btn { transition: none !important; }
}