/* ============================================================ simplemobilewidgets — resa MOBILE dei widget flottanti Riga unica in basso di 4 bubble tonde equidistanti: [ up ] [ accessibilità ] [ bot ] [ corrieri ] Ogni bubble è sempre visibile; tap = apre/chiude il suo menù (tranne "up" che scrolla in cima). Un solo menù aperto alla volta (classe su : smw-open-acc | smw-open-bot | smw-open-cor). Tutto scope @media (max-width:767px). Desktop invariato. Selettori prefissati "body " per battere le regole #id !important dei moduli/tema target a prescindere dall'ordine di caricamento. Dettagli: DEVELOPMENT_PLAN.md ============================================================ */ :root { --smw-bubble: 56px; /* diametro unico bubble */ --smw-gap: 16px; /* margine dai bordi (basso/lati) */ --smw-panel-bottom: 84px; /* = gap + bubble + 12: menù sopra la riga */ --smw-chat-bg: #177ec3; /* blu pannello chatbot (brand) */ --smw-z: 9600; /* 4 slot equidistanti: centri a 12.5% / 37.5% / 62.5% / 87.5% */ --smw-slot-1: 12.5%; --smw-slot-2: 37.5%; --smw-slot-3: 62.5%; --smw-slot-4: 87.5%; } @media (max-width: 767px) { /* ========================================================= BUBBLE COMUNI — tonde, stessa dimensione, fisse in basso ========================================================= */ body #backToTop, body #accessibility-widget, body #assistanceBox, body #sw-icon-bubble { position: fixed !important; bottom: var(--smw-gap) !important; top: auto !important; width: var(--smw-bubble) !important; height: var(--smw-bubble) !important; margin: 0 !important; padding: 0 !important; transform: none !important; /* niente translate: un ancestor trasformato diventerebbe containing-block dei pannelli position:fixed, schiacciandoli a 56px */ z-index: var(--smw-z) !important; } /* immagine tonda comune per le 4 bubble */ body #backToTop, body #accessibility-toggle, body #robotAssistance, body #sw-icon-bubble { border-radius: 50% !important; background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .25) !important; border: 0 !important; overflow: hidden !important; cursor: pointer !important; } /* --------------------------------------------------------- 1) UP — slot 1 (sinistra). Scrolla in cima, nessun menù. --------------------------------------------------------- */ body #backToTop { left: calc(var(--smw-slot-1) - var(--smw-bubble) / 2) !important; right: auto !important; display: flex !important; /* sempre visibile su mobile */ align-items: center !important; justify-content: center !important; background-image: url(../img/bubble-up.png) !important; opacity: 1 !important; visibility: visible !important; } body #backToTop i, body #backToTop .material-icons { display: none !important; } /* nascondi chevron nativo */ /* --------------------------------------------------------- 2) ACCESSIBILITÀ — slot 2. Modulo pspaccesibility. --------------------------------------------------------- */ body #accessibility-widget { left: calc(var(--smw-slot-2) - var(--smw-bubble) / 2) !important; right: auto !important; } body #accessibility-toggle { width: var(--smw-bubble) !important; height: var(--smw-bubble) !important; background-image: url(../img/bubble-acc.png) !important; } body #accessibility-toggle > * { display: none !important; } /* nascondi icona nativa */ /* menù: pannello a comparsa gestito dalla classe su */ body #accessibility-menu { position: fixed !important; left: var(--smw-gap) !important; right: var(--smw-gap) !important; bottom: var(--smw-panel-bottom) !important; top: auto !important; width: auto !important; max-width: none !important; max-height: calc(100vh - 120px) !important; overflow: auto !important; transform: none !important; display: none !important; } body.smw-open-acc #accessibility-menu { display: block !important; } /* --------------------------------------------------------- 3) CHATBOT — slot 3. Vive nel tema (#assistanceBox …). --------------------------------------------------------- */ body #assistanceBox { left: calc(var(--smw-slot-3) - var(--smw-bubble) / 2) !important; right: auto !important; background: transparent !important; /* niente riquadro dietro la bubble */ box-shadow: none !important; } body #assistanceBox > .d-flex { position: static !important; display: block !important; margin: 0 !important; } body #robotAssistance { width: var(--smw-bubble) !important; height: var(--smw-bubble) !important; margin: 0 !important; padding: 0 !important; background-image: url(../img/bubble-bot.png) !important; background-color: #fff !important; flex: 0 0 auto !important; } body #robotAssistance img { display: none !important; } /* nascondi mascotte */ /* pannello chatbot: fisso, centrato in viewport, con padding interno */ body #assistanceDescription { position: fixed !important; left: var(--smw-gap) !important; right: var(--smw-gap) !important; bottom: var(--smw-panel-bottom) !important; top: auto !important; width: auto !important; max-width: none !important; max-height: calc(100vh - 120px) !important; overflow: auto !important; transform: none !important; padding: 16px 18px !important; background: var(--smw-chat-bg) !important; color: #fff !important; border-radius: 12px !important; box-shadow: 0 8px 28px rgba(0, 0, 0, .3) !important; height: auto !important; display: none !important; } body #assistanceDescription * { color: #fff !important; } body #assistanceDescription a { text-decoration: none !important; } body.smw-open-bot #assistanceDescription { display: block !important; } /* la X nativa non serve: si chiude ri-toccando la bubble */ body #closeAssistance { display: none !important; } /* --------------------------------------------------------- 4) CORRIERI — slot 4 (destra). Modulo shippingcountdown. La bubble deve restare SEMPRE visibile e fare da toggle; il widget-barra si apre sopra la riga. --------------------------------------------------------- */ body #sw-icon-bubble { left: calc(var(--smw-slot-4) - var(--smw-bubble) / 2) !important; right: auto !important; display: flex !important; /* battte l'inline display:none nativo */ align-items: center !important; justify-content: center !important; background-image: url(../img/bubble-carrier.png) !important; } body #sw-icon-bubble svg, body #sw-icon-bubble img { display: none !important; } /* nascondi icona nativa */ /* barra widget: nascosta di default, visibile solo con la classe su body */ body #sw-shipping-widget { position: fixed !important; left: var(--smw-gap) !important; right: var(--smw-gap) !important; bottom: var(--smw-panel-bottom) !important; top: auto !important; width: auto !important; max-width: none !important; transform: none !important; margin: 0 !important; z-index: calc(var(--smw-z) + 1) !important; display: none !important; /* battte l'inline display nativo */ } body.smw-open-cor #sw-shipping-widget { display: block !important; } /* la modale dettagli .sw-modal-overlay resta centrata fullscreen: NON toccarla */ }