/* SPOT in Farmacia 2.12.1 (Alessandro, 12/10/2026) — schermo intero con il doppio tocco (immersivo.js).
   Chi non lo usa non vede differenze: tutte le regole valgono solo con la classe spot-immersivo su <html>, tranne il
   pulsante «Schermo intero» (solo sul computer) e il suggerimento della prima volta (fisso, sopra la pagina). */

/* a schermo intero: resta solo SPOT, a tutta finestra (via la barra di WordPress, l'intestazione e il piede del sito) */
html.spot-immersivo{margin-top:0!important}
html.spot-immersivo #wpadminbar,html.spot-immersivo .spot-im-fuori{display:none!important}
html.spot-immersivo .spot-im-avo{margin:0!important;padding:0!important;max-width:none!important;width:auto!important;border:0!important}
html.spot-immersivo body{margin:0!important;padding:0!important}
html.spot-immersivo .motc-page.spot-im-pagina{min-height:100vh;min-height:100dvh;margin:0;border-radius:0}
/* l'iconcina per uscire sta in alto a destra: la barra del marchio le lascia il posto */
html.spot-immersivo .motc-page .spot-barra{padding-right:52px}
html.spot-immersivo .motc-page:not(.motc-pres) .spot-barra{padding-right:188px}
html.spot-immersivo .motc-page .spot-barra .toggle{right:52px}
html.spot-immersivo .spot-im-entra{display:none!important}
@media (max-width:760px){
  html.spot-immersivo .motc-page:not(.motc-pres) .spot-barra{padding-right:calc(max(14px,env(safe-area-inset-right)) + 104px)}
  html.spot-immersivo .motc-page:not(.motc-pres) .spot-barra .toggle{right:calc(max(14px,env(safe-area-inset-right)) + 48px)}
}

/* uscita: piccolo cerchio scuro con le due frecce verso il centro, che si illumina al tocco */
.spot-im-esci{position:fixed;z-index:99995;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));
  width:40px;height:40px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#0d1119;border:1px solid #1c2534;color:#a0b0bc;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.35);-webkit-tap-highlight-color:transparent}
.spot-im-esci[hidden]{display:none}
.spot-im-esci svg{display:block}
.spot-im-esci:hover,.spot-im-esci:active,.spot-im-esci:focus-visible{color:#d4e47e;border-color:#3a4a1e;
  box-shadow:0 0 0 1px rgba(212,228,126,.25),0 0 14px rgba(212,228,126,.35)}
.spot-im-esci:focus-visible{outline:2px solid #d4e47e;outline-offset:3px}
html.rp-schermo-su .spot-im-esci{display:none}   /* la pianta a schermo intero ha il suo «Chiudi» */

/* entrata sul computer: piccolo pulsante nella barra del marchio, in alto a destra */
.spot-im-entra{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:761px){
  .motc-page .spot-barra.spot-im-con .spot-di{margin-left:auto}
  .motc-page .spot-barra .spot-im-entra{display:inline-flex;align-items:center;gap:6px;margin:0 0 0 14px;padding:6px 12px;
    border-radius:999px;border:1px solid #1c2534;background:#0d1119;color:#a0b0bc;font:inherit;font-size:12px;line-height:1.2;
    white-space:nowrap;cursor:pointer}
  .motc-page .spot-barra .spot-im-entra:hover,.motc-page .spot-barra .spot-im-entra:focus-visible{color:#d4e47e;border-color:#3a4a1e}
  .motc-page .spot-barra .spot-im-entra:focus-visible{outline:2px solid #d4e47e;outline-offset:2px}
}

/* telefono e tablet: pulsante a pillola in basso a destra (sopra l'eventuale tasto WhatsApp del sito), entra ed esce */
.spot-im-pill{position:fixed;z-index:99993;left:max(14px,env(safe-area-inset-left));bottom:calc(20px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:7px;margin:0;padding:9px 14px;border-radius:999px;background:#0d1119;
  border:1px solid #1c2534;color:#a0b0bc;font:500 13px/1.2 Poppins,system-ui,sans-serif;white-space:nowrap;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.35);-webkit-tap-highlight-color:transparent}
.spot-im-pill svg{display:block}
.spot-im-pill:active,.spot-im-pill:focus-visible{color:#d4e47e;border-color:#3a4a1e}
.spot-im-pill:focus-visible{outline:2px solid #d4e47e;outline-offset:3px}
html.rp-schermo-su .spot-im-pill{display:none}

/* la prima volta: suggerimento discreto in basso, che sparisce da solo */
.spot-im-suggerimento{position:fixed;z-index:99994;left:50%;bottom:calc(140px + env(safe-area-inset-bottom));transform:translateX(-50%);
  max-width:calc(100% - 32px);width:max-content;padding:8px 14px;border-radius:999px;background:rgba(13,17,25,.86);
  border:1px solid #1c2534;color:#a0b0bc;font:12.5px/1.35 Poppins,system-ui,sans-serif;text-align:center;
  pointer-events:none;opacity:0}
.spot-im-suggerimento.spot-im-su{opacity:1}

/* 2.16.0: invito, una volta sola, ad aggiungere SPOT alla schermata Home (schermo intero vero, senza l'avviso di Chrome) */
.spot-im-app{position:fixed;z-index:99996;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
  bottom:calc(76px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;max-width:460px;margin:0 auto;
  padding:10px 10px 10px 14px;border-radius:12px;background:#1c2129;border:1px solid #2a303a;color:#dde2e8;
  font:13px/1.4 Poppins,system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.spot-im-app p{margin:0;flex:1}
.spot-im-app button{flex:none;min-height:44px;border-radius:10px;font:600 13px/1 Poppins,system-ui,sans-serif;cursor:pointer}
.spot-im-app .spot-im-app-si{padding:0 14px;background:#d4e47e;border:0;color:#14171d}
.spot-im-app .spot-im-app-no{width:44px;padding:0;background:transparent;border:1.5px solid #5d6672;color:#dde2e8;font-size:20px}
.spot-im-app button:focus-visible{outline:2px solid #d4e47e;outline-offset:2px}

/* movimento solo per chi non chiede «meno movimento» */
@media (prefers-reduced-motion:no-preference){
  .spot-im-esci,.spot-im-entra,.spot-im-pill{transition:color .2s,border-color .2s,box-shadow .2s}
  .spot-im-suggerimento{transition:opacity .6s}
}

/* 2.18.0 telefono: con la barra del menu in basso (area riservata) la pillola sale sopra la barra; il suggerimento della
   prima volta sta in basso, subito sopra la pillola, a 16 px dai bordi, e non copre piu' il testo d'apertura */
@media (max-width:1279.98px){
  body:has(.motc-page.mc-attiva .mc-barra) .spot-im-pill{bottom:calc(76px + env(safe-area-inset-bottom))}
}
.spot-im-suggerimento{box-sizing:border-box;bottom:calc(68px + env(safe-area-inset-bottom))}
@media (max-width:1279.98px){
  body:has(.motc-page.mc-attiva .mc-barra) .spot-im-suggerimento{bottom:calc(124px + env(safe-area-inset-bottom))}
}

/* 2.18.4 telefono, pagina di presentazione a tutta finestra: la pillola «Esci» diventa un cerchio di 44 px con la sola
   icona (il nome «Esci dallo schermo intero» resta per i lettori di schermo) e la pagina lascia in fondo lo spazio della
   pillola piu' 24 px, cosi' non copre mai il testo; con la barra del menu in basso la pillola resta sopra la barra */
html.spot-immersivo-finto body:has(.motc-page.motc-pres) .spot-im-pill{width:44px;height:44px;padding:0;gap:0;justify-content:center}
html.spot-immersivo-finto body:has(.motc-page.motc-pres) .spot-im-pill span{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
html.spot-immersivo-finto .motc-page.motc-pres.spot-im-pagina{padding-bottom:calc(20px + 44px + 24px + env(safe-area-inset-bottom))}

/* 13/10/2026: mentre la pianta della farmacia e' in vista la pillola (e il suggerimento) si nascondono: la pianta ha il suo
   «Schermo intero» e la pillola non la copre piu' */
html.rp-pianta-vista .spot-im-pill,html.rp-pianta-vista .spot-im-suggerimento{display:none}

/* 13/10/2026 (rifiniture): la pillola non copre mai un comando della pagina: sopra un comando si nasconde (immersivo.js) */
.spot-im-pill.spot-im-pill-via{visibility:hidden;opacity:0;pointer-events:none}