/* ==========================================================================
Merge Frontend PWA - Foglio di stile principale
Tutti i commenti sono in italiano.
========================================================================== */
/* --- Reset minimale ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* iOS PWA standalone: height:100% lascia spesso un gap sotto (barra home / viewport).
-webkit-fill-available + 100dvh riempiono il display come su pokecard.it */
html{
height:100%;
height:-webkit-fill-available;
min-height:100%;
min-height:100dvh;
overflow:hidden;
/* Niente rubber-band / pull-to-refresh a livello documento */
overscroll-behavior-y:none;
}
body{
min-height:100%;
min-height:100dvh;
min-height:-webkit-fill-available;
overflow:hidden;
overscroll-behavior-y:none;
}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
input,textarea,select,button{font-family:inherit}
/* Campi testo: su PWA/iOS la selezione può restare bloccata se il documento usa user-select:none */
input,textarea{
-webkit-user-select:text;
user-select:text;
}
img{max-width:100%;display:block}
/* --- Design tokens comuni ------------------------------------------------- */
/* Palette derivata dal logo JonioHUB:
- Blu primario (cielo/mare) = brand, header, hero, link, tab attive
- Arancio "sole" accento = CTA calde (carrello, promo, +prodotto, prezzi)
- Oro sole = highlight extra (aperto, evidenze locali, ecc.) */
:root{
/* Brand (blu del logo) */
--primary:#1E5FA8;
--primary-strong:#0E4A9B;
--primary-soft:#2A82D8;
--primary-mid:#5A9DD8;
--primary-light:#E8F0FA;
/* Retrocompatibilità: alcune vecchie regole usano --primary-dark */
--primary-dark:var(--primary-strong);
/* Fascia notch + header hero: blu continuo (niente arancio in mezzo) */
--header-chrome-bg:linear-gradient(180deg,var(--primary) 0%,var(--primary-strong) 100%);
/* Accento (arancio/sole del logo) */
--accent:#FE8513;
--accent-dark:#D96E0A;
--accent-soft:#FFA356;
--accent-light:#FFF4E8;
--accent-warm:#FFC857;
--accent-rgb:254,133,19;
--success:#16A34A;
--success-bg:#DCFCE7;
--warning:#D97706;
--warning-bg:#FEF3C7;
--danger:#DC2626;
--danger-bg:#FEE2E2;
--purple:#7C3AED;
--purple-bg:#EDE9FE;
--info-bg:#DBEAFE;
--font:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
--radius-sm:8px;
--radius-md:12px;
--radius-lg:16px;
--radius-xl:22px;
--radius-pill:999px;
--shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
--shadow-md:0 6px 18px rgba(0,0,0,.08);
--shadow-lg:0 14px 40px rgba(0,0,0,.14);
/* Offset dal bordo inferiore: bottom-nav flottante */
--nav-float-bottom:16px;
/* Android (nav 3 tasti / gesture): pixel extra da `js/androidNavGesturePad.js`, 0 altrove */
--android-gesture-nav-pad:0px;
}
/* --- Tema chiaro ---------------------------------------------------------- */
[data-theme="light"]{
--bg:#F4F4F4;
--surface:#FFFFFF;
--surface2:#F8F8F8;
--surface3:#EFEFEF;
--text:#111111;
--text2:#555555;
--text3:#999999;
--border:rgba(0,0,0,.07);
--border2:rgba(0,0,0,.13);
--hero-text:#FFFFFF;
--hero-sub:rgba(255,255,255,.92);
--overlay:rgba(0,0,0,.45);
}
/* --- Tema scuro ----------------------------------------------------------- */
[data-theme="dark"]{
--bg:#0F0F0F;
--surface:#1C1C1E;
--surface2:#252527;
--surface3:#2E2E30;
--text:#F2F2F2;
--text2:#ABABAB;
--text3:#6E6E6E;
--border:rgba(255,255,255,.07);
--border2:rgba(255,255,255,.13);
--hero-text:#FFFFFF;
--hero-sub:rgba(255,255,255,.9);
/* In dark attenuo i bg tenui blu e arancio per leggibilità */
--primary-light:#13243D;
--accent-light:#2A1710;
--overlay:rgba(0,0,0,.65);
}
/* --- Base ----------------------------------------------------------------- */
body{
font-family:var(--font);
background:var(--bg);
color:var(--text);
-webkit-font-smoothing:antialiased;
transition:background .3s,color .3s;
font-size:14px;
line-height:1.4;
}
/* --- App shell ------------------------------------------------------------ */
/* Altezza da Visual Viewport (`--app-vvh` in app.js): la “card” `#app` si accorcia sopra
la tastiera (anche Capacitor iOS con `keyboardResize: none`, dove `vv.height` resta l’area
dipinta). `#app` resta `top:0` (niente `--app-vvtop`). */
#app{
position:fixed;
left:0;
right:0;
top:0;
width:100%;
max-width:480px;
margin:0 auto;
height:var(--app-vvh, 100dvh);
max-height:var(--app-vvh, 100dvh);
min-height:0;
min-width:0;
display:flex;flex-direction:column;
background:var(--bg);
/* Per lo sfondo hero home assoluto dietro header + scroll */
isolation:isolate;
box-shadow:0 0 40px rgba(0,0,0,.06);
overflow:hidden;
overscroll-behavior-y:none;
/* Transizione più lunga: con tab IA aggiorniamo `--app-vvh` ogni frame (`rAF`); l’ease-out
fa seguire l’altezza shell all’animazione tastiera in modo progressivo. */
transition:height 0.32s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
/* Shell a filo display: nessun padding per safe-area iOS */
padding-bottom:0;
margin-bottom:0;
}
/* Tab IA SOLO Capacitor iOS (marker `data-platform-shell-ios-cap="1"` impostato da `ia.js`):
`#app` segue `--app-vvh` (= `innerHeight − keyboardHeight` calcolato da JS). Serve perché su
iOS WKWebView `100dvh` NON si aggiorna a runtime quando la tastiera apre/chiude la WebView.
Su Android Capacitor la WebView si ridimensiona da sola → queste regole NON devono attivarsi
o il body si trova `position:fixed` ad altezza sbagliata e il flexbox ne soffre (chat vuota). */
html[data-platform-shell-ios-cap="1"][data-shell-tab="ai"] #app{
box-shadow:0 0 14px rgba(0,0,0,.05);
height:var(--app-vvh, 100dvh);
max-height:var(--app-vvh, 100dvh);
transition:none;
}
html[data-platform-shell-ios-cap="1"][data-shell-tab="ai"]{
height:var(--app-vvh, 100dvh)!important;
max-height:var(--app-vvh, 100dvh)!important;
min-height:0!important;
overflow:hidden!important;
}
html[data-platform-shell-ios-cap="1"][data-shell-tab="ai"] body{
height:var(--app-vvh, 100dvh)!important;
max-height:var(--app-vvh, 100dvh)!important;
min-height:0!important;
overflow:hidden!important;
position:fixed!important;
top:0!important;
left:0!important;
right:0!important;
width:100%!important;
/* Layer compositor isolato: impedisce che la traslazione visiva di iOS WKWebView (auto
scroll-into-view al focus dell'input) faccia sembrare l'header in movimento. */
transform:translateZ(0)!important;
-webkit-transform:translateZ(0)!important;
backface-visibility:hidden!important;
-webkit-backface-visibility:hidden!important;
will-change:transform!important;
}
html[data-platform-shell-ios-cap="1"][data-shell-tab="ai"] section.view[data-view="ai"] .chat-header{
position:sticky!important;
top:0!important;
z-index:5;
background:var(--surface);
transform:translateZ(0);
-webkit-transform:translateZ(0);
will-change:transform;
transition:none!important;
-webkit-transition:none!important;
animation:none!important;
}
html[data-platform-shell-ios-cap="1"][data-shell-tab="ai"] section.view[data-view="ai"] .ai-page-column,
html[data-platform-shell-ios-cap="1"][data-shell-tab="ai"] section.view[data-view="ai"] .chat-stream,
html[data-platform-shell-ios-cap="1"][data-shell-tab="ai"] section.view[data-view="ai"] .ai-chat-dock{
transition:none!important;
-webkit-transition:none!important;
animation:none!important;
}
/* Fascia notch: stesso sfondo dell’header hero (.top-bar.on-hero), senza stacco */
.status-bar{
height:env(safe-area-inset-top,0px);
min-height:0;
overflow:hidden;
background:var(--header-chrome-bg);
flex-shrink:0;
transition:background .3s;
}
/* Utility: nasconde l'elemento ma lo lascia accessibile agli screen reader. */
.sr-only{
position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* =========================================================================
Page Context Bar — header secondario unificato per i flussi di prenotazione
(lido, appuntamenti, menu ristorante). Visivamente "agganciato" al #topBar
senza gap (stesso gradient brand sopra, raggio solo in basso) cosi' da
apparire come un unico blocco header.
========================================================================= */
.page-context-bar{
position:relative;
background:linear-gradient(180deg,var(--primary-strong) 0%,#0A3F87 100%);
color:#fff;
padding:14px 16px 18px;
border-bottom-left-radius:var(--radius-lg,16px);
border-bottom-right-radius:var(--radius-lg,16px);
box-shadow:0 6px 18px color-mix(in srgb, var(--primary) 22%, transparent);
flex-shrink:0;
z-index:19;
margin-top:-1px;
overflow:hidden;
}
.page-context-bar[hidden]{display:none;}
.page-context-bar::after{
content:"";position:absolute;right:-40px;bottom:-40px;
width:160px;height:160px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 70%);
pointer-events:none;
}
.page-context-bar__inner{
display:flex;gap:14px;align-items:flex-start;
position:relative;z-index:1;
}
.page-context-bar__icon{
width:52px;height:52px;flex-shrink:0;
border-radius:14px;
background:linear-gradient(135deg,#FCD34D 0%,#F59E0B 100%);
color:#7C2D12;font-size:28px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 14px rgba(245,158,11,.35);
}
.page-context-bar__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.page-context-bar__badge{
display:inline-block;align-self:flex-start;
padding:3px 10px;
background:rgba(255,255,255,.22);
color:#fff;font-size:10px;font-weight:800;
letter-spacing:.6px;text-transform:uppercase;
border-radius:999px;
border:1px solid rgba(255,255,255,.25);
}
.page-context-bar__title{
margin:0;font-size:21px;font-weight:800;letter-spacing:-.3px;
line-height:1.2;color:#fff;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.page-context-bar__sub{
margin:0;font-size:13px;font-weight:500;line-height:1.4;
color:rgba(255,255,255,.88);
}
.page-context-bar__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.page-context-bar__chip{
display:inline-flex;align-items:center;gap:4px;
padding:4px 10px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.22);
border-radius:999px;
font-size:11px;font-weight:700;color:#fff;
}
/* Varianti tema. Cambiano l'icona e il gradient per dare un colpo d'occhio
immediato sul tipo di flusso, mantenendo lo stesso layout. */
.page-context-bar--appointment{
background:linear-gradient(180deg,#7C3AED 0%,#5B21B6 100%);
box-shadow:0 6px 18px rgba(124,58,237,.25);
}
.page-context-bar--appointment .page-context-bar__icon{
background:linear-gradient(135deg,#FBCFE8 0%,#EC4899 100%);
color:#831843;
box-shadow:0 6px 14px rgba(236,72,153,.35);
}
.page-context-bar--menu{
background:linear-gradient(180deg,#EA580C 0%,#9A3412 100%);
box-shadow:0 6px 18px rgba(234,88,12,.25);
}
.page-context-bar--menu .page-context-bar__icon{
background:linear-gradient(135deg,#FED7AA 0%,#F97316 100%);
color:#7C2D12;
box-shadow:0 6px 14px rgba(249,115,22,.35);
}
/* Mobile: piu' compatta. */
@media (max-width: 600px){
.page-context-bar{padding:12px 14px 16px;}
.page-context-bar__icon{width:46px;height:46px;font-size:24px;border-radius:12px;}
.page-context-bar__title{font-size:18px;}
.page-context-bar__sub{font-size:12px;}
}
/* --- Back-bar globale -----------------------------------------------------
Striscia "Indietro" mostrata sotto l'header JonioHUB quando la bottom-nav
e' nascosta e non siamo in home. Stesso effetto del swipe dal bordo:
click -> goBack(). La visibilita' e' gestita da syncAppBackBarVisibility()
in js/navigazione.js. */
.app-back-bar{
display:flex;align-items:center;gap:8px;
width:100%;
padding:10px 14px;
margin:0;
background:var(--surface);
border:0;
border-bottom:1px solid var(--border);
color:var(--text);
font-size:15px;font-weight:600;
text-align:left;
cursor:pointer;
position:relative;
z-index:18;
-webkit-tap-highlight-color:transparent;
transition:background-color .12s ease;
}
.app-back-bar[hidden]{display:none;}
.app-back-bar:active{background:color-mix(in srgb, var(--text) 6%, var(--surface));}
.app-back-bar:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;}
.app-back-bar__chevron{
width:22px;height:22px;
color:var(--primary);
flex-shrink:0;
}
.app-back-bar__label{
line-height:1;
letter-spacing:.1px;
}
/* --- Top bar -------------------------------------------------------------- */
.top-bar{
position:relative;
display:flex;align-items:center;gap:10px;
padding:12px 14px;
background:var(--surface);
border-bottom:.5px solid var(--border);
flex-shrink:0;
transition:background .3s,color .3s;
z-index:20;
color:var(--text);
}
.top-bar.on-hero{
background:var(--header-chrome-bg);
border-bottom:none;
color:var(--hero-text);
box-shadow:0 4px 22px rgba(14,74,155,.16);
}
/* .top-bar h1 rimosso: l'header è uniformato sul blocco .brand (brand-city = nome sezione). */
.top-bar .brand{
display:flex;align-items:center;gap:10px;
flex:1 1 0;
min-width:0;
overflow:hidden;
cursor:pointer;
position:relative;
z-index:1;
}
/* Raggruppa le icone a destra così i click non finiscono sul brand (flex) sottostante */
.top-bar-actions{
display:flex;align-items:center;gap:8px;
flex-shrink:0;
position:relative;
z-index:4;
}
.brand-logo-img{
width:40px;height:40px;object-fit:contain;
flex-shrink:0;border-radius:10px;
background:rgba(255,255,255,.12);
box-shadow:0 2px 10px rgba(0,0,0,.12);
}
/* Nasconde solo il logo della top-bar (impostato da app.js se SHOW_HEADER_BRAND_LOGO è false). */
html[data-header-no-brand-logo="1"] .top-bar .brand-logo-img{display:none!important}
.top-bar:not(.on-hero) .brand-logo-img{
background:var(--surface2);
box-shadow:none;
}
/* Wordmark JonioHUB: Jonio bianco (hero) + HUB arancio testo — come sito marketing. */
.brand-wordmark{
display:flex;
align-items:center;
gap:0;
font-family:var(--font);
font-size:19px;
font-weight:800;
letter-spacing:-.055em;
line-height:1;
color:inherit;
text-rendering:geometricPrecision;
}
.brand-wordmark__jonio{
margin-right:1px;
line-height:1;
font-weight:800;
color:currentColor;
text-shadow:0 1px 8px rgba(0,0,0,.16);
}
.brand-wordmark__hub{
line-height:1;
font-weight:800;
color:var(--accent);
}
.top-bar.on-hero .brand-wordmark__jonio{
color:#fff;
text-shadow:0 1px 8px rgba(0,0,0,.16);
}
.top-bar.on-hero .brand-wordmark__hub{
color:var(--accent);
text-shadow:0 1px 10px rgba(var(--accent-rgb),.45);
}
.top-bar:not(.on-hero) .brand-wordmark{
color:var(--primary-strong);
}
.top-bar:not(.on-hero) .brand-wordmark__jonio{
color:var(--primary-strong);
text-shadow:none;
}
.top-bar:not(.on-hero) .brand-wordmark__hub{
color:var(--accent);
text-shadow:none;
}
.brand-city{
font-size:11px;color:var(--text2);margin-top:2px;line-height:1.25;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
max-width:100%;
}
.top-bar.on-hero .brand-city{color:var(--hero-sub)}
.top-bar:not(.on-hero) .brand-city{color:var(--text2)}
/* Quando brand-city indica una sezione (non home): piccolo, corsivo, discreto */
.brand-city.is-section{
font-size:11px;font-weight:500;font-style:italic;
letter-spacing:.1px;text-transform:none;
color:var(--primary);
}
.top-bar.on-hero .brand-city.is-section{color:var(--hero-sub)}
.icon-btn{
width:38px;height:38px;border-radius:50%;
border:.5px solid var(--border2);
background:var(--surface2);
display:inline-flex;align-items:center;justify-content:center;
cursor:pointer;flex-shrink:0;
transition:background .15s,transform .1s;
position:relative;
}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:18px;height:18px;stroke:var(--text);stroke-width:2;fill:none}
.top-bar.on-hero .icon-btn{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.22)}
.top-bar.on-hero .icon-btn svg{stroke:#fff}
/* Luna tema: fill eredita currentColor (il fill:none sullo svg non deve annullare la luna) */
.icon-btn .js-icon-theme-moon path{
fill: currentColor !important;
stroke: none !important;
}
.top-bar.on-hero .icon-btn#themeToggleBtn{color:#fff}
.icon-btn .badge-dot{
position:absolute;top:6px;right:6px;
width:8px;height:8px;border-radius:50%;
background:var(--danger);
box-shadow:0 0 0 2px var(--surface);
}
.top-bar.on-hero .icon-btn .badge-dot{
box-shadow:0 0 0 2px rgba(255,255,255,.55);
}
/* --- Selettore lingua (pulsante = .icon-btn dentro .lang-wrap) ------------ */
.lang-wrap{position:relative}
/* Bandiera della lingua attiva come unico contenuto del bottone */
.lang-btn .lang-flag{
font-size:20px;line-height:1;
display:inline-flex;align-items:center;justify-content:center;
/* Su alcuni device il glifo emoji ha un baseline irregolare */
transform:translateY(.5px);
}
.lang-pop{
position:absolute;top:calc(100% + 6px);right:0;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-md);
box-shadow:var(--shadow-md);
padding:6px;min-width:160px;z-index:50;
display:none;
}
.lang-pop.open{display:block}
.lang-item{
display:flex;align-items:center;gap:10px;
padding:8px 10px;border-radius:8px;cursor:pointer;
font-size:13px;font-weight:600;color:var(--text);
}
.lang-item:hover{background:var(--surface2)}
.lang-item.active{background:var(--primary-light);color:var(--primary)}
.lang-item .flag{font-size:18px}
/* --- Casella notifiche (header) ------------------------------------------ */
/* Pannello dropdown: barra brand, card per voce, accent per tipo (push/ordine/prenotazione). */
.notif-wrap{position:relative}
.notif-pop{
position:absolute;top:calc(100% + 10px);right:0;
background:var(--surface);
border:1px solid color-mix(in srgb, var(--border) 80%, var(--primary) 8%);
border-radius:var(--radius-xl);
box-shadow:
0 4px 6px rgba(30,95,168,.06),
0 18px 44px rgba(14,74,155,.14),
0 0 0 1px rgba(255,255,255,.65) inset;
min-width:min(100vw - 24px, 328px);
max-width:min(100vw - 16px, 392px);
max-height:min(480px, 74vh);
z-index:55;
display:none;
overflow:hidden;
transform-origin:top right;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}
.notif-pop-accent{
height:4px;flex-shrink:0;
background:linear-gradient(90deg, var(--primary) 0%, var(--primary-soft) 42%, var(--accent) 100%);
}
.notif-pop.open{
display:flex;flex-direction:column;
animation:notifPopIn .22s cubic-bezier(.22,1,.36,1);
}
@keyframes notifPopIn{
from{opacity:0;transform:translateY(-8px) scale(.97)}
to {opacity:1;transform:translateY(0) scale(1)}
}
@keyframes notifBadgePulse{
0%,100%{transform:scale(1);box-shadow:0 0 0 2px var(--surface)}
50%{transform:scale(1.08);box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 35%, transparent)}
}
.top-bar.on-hero .notif-pop{
background:color-mix(in srgb, var(--surface) 94%, transparent);
border-color:color-mix(in srgb, var(--border) 70%, #fff 12%);
}
.notif-pop-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
padding:14px 14px 12px;
flex-shrink:0;
border-bottom:1px solid var(--border);
background:linear-gradient(180deg, color-mix(in srgb, var(--primary-light) 38%, var(--surface)) 0%, var(--surface) 100%);
}
.notif-pop-head__lead{
display:flex;align-items:center;gap:10px;min-width:0;flex:1;
}
.notif-pop-head__glyph{
width:40px;height:40px;border-radius:var(--radius-md);flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(145deg, var(--primary-light) 0%, color-mix(in srgb, var(--primary-light) 55%, #fff) 100%);
color:var(--primary);
box-shadow:var(--shadow-sm);
}
.notif-pop-head__glyph svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.notif-pop-head__text{min-width:0;display:flex;flex-direction:column;gap:2px}
.notif-pop-head__title{
font-size:15px;font-weight:800;color:var(--text);line-height:1.2;letter-spacing:-.01em;
}
.notif-pop-head__meta{
font-size:12px;font-weight:600;color:var(--primary);line-height:1.25;
}
.notif-mark-all{
border:1px solid color-mix(in srgb, var(--primary) 22%, transparent);
background:var(--surface);
color:var(--primary);
font:inherit;font-size:11px;font-weight:800;
cursor:pointer;
padding:7px 11px;
border-radius:var(--radius-pill);
white-space:nowrap;
flex-shrink:0;
align-self:center;
transition:background .15s, border-color .15s, transform .1s, opacity .15s, box-shadow .15s;
box-shadow:var(--shadow-sm);
}
.notif-mark-all:hover{
background:var(--primary-light);
border-color:color-mix(in srgb, var(--primary) 35%, transparent);
}
.notif-mark-all:active{transform:scale(.96)}
.notif-mark-all--disabled,
.notif-mark-all:disabled{
opacity:.42;cursor:default;pointer-events:none;
background:var(--surface2);color:var(--text3);border-color:var(--border);
box-shadow:none;
}
.notif-pop-list{
flex:1;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding:10px 10px 12px;
min-height:0;
display:flex;flex-direction:column;gap:8px;
scrollbar-width:thin;
scrollbar-color:var(--border2) transparent;
background:color-mix(in srgb, var(--surface2) 35%, var(--surface));
}
.notif-pop-list::-webkit-scrollbar{width:5px}
.notif-pop-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:999px}
.notif-pop-empty{
padding:28px 20px 32px;
font-size:13px;font-weight:600;color:var(--text2);
text-align:center;line-height:1.5;
display:flex;flex-direction:column;align-items:center;gap:12px;
max-width:26em;margin:0 auto;
}
.notif-pop-empty::before{
content:"";
width:56px;height:56px;border-radius:50%;
display:block;
box-shadow:var(--shadow-sm);
background:
url("data:image/svg+xml;utf8,") center/26px no-repeat,
radial-gradient(circle at 30% 28%, #fff 0%, transparent 55%),
linear-gradient(145deg, var(--primary-light) 0%, color-mix(in srgb, var(--primary-light) 40%, var(--surface2)) 100%);
}
.notif-item{
position:relative;
width:100%;text-align:left;
border:1px solid var(--border);
background:var(--surface);
border-radius:var(--radius-md);
padding:11px 12px 11px 11px;
cursor:pointer;font:inherit;
display:grid;
grid-template-columns:40px 1fr;
gap:11px;align-items:flex-start;
transition:border-color .15s, background .15s, box-shadow .15s, transform .08s;
box-shadow:var(--shadow-sm);
}
.notif-item + .notif-item{box-shadow:var(--shadow-sm)}
.notif-item:hover{
border-color:color-mix(in srgb, var(--primary) 18%, var(--border));
background:color-mix(in srgb, var(--surface) 88%, var(--primary-light));
box-shadow:var(--shadow-md);
}
.notif-item:active{transform:scale(.992)}
.notif-item-icon{
width:40px;height:40px;border-radius:var(--radius-md);
display:inline-flex;align-items:center;justify-content:center;
flex-shrink:0;
background:var(--primary-light);
color:var(--primary);
box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
}
.notif-item-icon svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.notif-item[data-kind="order_status"] .notif-item-icon{background:var(--accent-light);color:var(--accent-dark)}
.notif-item[data-kind="booking_status"] .notif-item-icon{background:var(--success-bg);color:var(--success)}
.notif-item[data-kind="push"] .notif-item-icon{background:var(--primary-light);color:var(--primary)}
.notif-item-text{min-width:0;display:flex;flex-direction:column;gap:3px;padding-right:4px}
.notif-item-title{
font-size:13px;color:var(--text);line-height:1.3;font-weight:700;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
padding-right:10px;
}
.notif-item-body{
font-size:12px;color:var(--text2);line-height:1.42;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.notif-item-meta{
font-size:11px;font-weight:600;color:var(--text3);
margin-top:2px;letter-spacing:.02em;
}
.notif-item--unread{
border-color:color-mix(in srgb, var(--primary) 28%, var(--border));
background:linear-gradient(
105deg,
color-mix(in srgb, var(--primary-light) 72%, var(--surface)) 0%,
var(--surface) 52%
);
box-shadow:0 2px 10px color-mix(in srgb, var(--primary) 10%, transparent);
}
.notif-item--unread[data-kind="order_status"]{
border-color:color-mix(in srgb, var(--accent) 32%, var(--border));
background:linear-gradient(105deg, color-mix(in srgb, var(--accent-light) 75%, var(--surface)) 0%, var(--surface) 52%);
}
.notif-item--unread[data-kind="booking_status"]{
border-color:color-mix(in srgb, var(--success) 28%, var(--border));
background:linear-gradient(105deg, color-mix(in srgb, var(--success-bg) 80%, var(--surface)) 0%, var(--surface) 52%);
}
.notif-item--unread:hover{
border-color:color-mix(in srgb, var(--primary) 40%, var(--border));
}
.notif-item--unread .notif-item-title{font-weight:800;color:var(--text)}
.notif-item--unread::before{
content:"";
position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;
background:var(--primary);
}
.notif-item--unread[data-kind="order_status"]::before{background:var(--accent)}
.notif-item--unread[data-kind="booking_status"]::before{background:var(--success)}
.notif-item--unread::after{
content:"";
position:absolute;top:11px;right:11px;
width:7px;height:7px;border-radius:50%;
background:var(--primary);
box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
}
.notif-item--unread[data-kind="order_status"]::after{background:var(--accent)}
.notif-item--unread[data-kind="booking_status"]::after{background:var(--success)}
#btnBell.has-unread .badge-dot,
#apptWizBtnBell.has-unread .badge-dot{
width:9px;height:9px;top:5px;right:5px;
animation:notifBadgePulse 2.4s ease-in-out infinite;
}
#btnBell:not(.has-unread) .badge-dot,
#apptWizBtnBell:not(.has-unread) .badge-dot{display:none}
/* --- Contenuto -> viste --------------------------------------------------- */
.view-host{
flex:1;
position:relative;
min-height:0;
min-width:0;
overflow:hidden;
background:var(--bg);
overscroll-behavior-y:none;
}
.view{
position:absolute;inset:0;
display:flex;flex-direction:column;
min-height:0;
/* Permette al flex item di restringersi sotto la larghezza intrinseca del testo (evita overflow orizzontale). */
min-width:0;
transform:translateX(100%);
/* Transizione orizzontale disattivata: con `gotoTab` + `pushView` ravvicinati (es. tap notifica)
l'animazione 0.28s lasciava spesso la WebView in uno stato intermedio — contenuto fuori schermo. */
transition:none;
background:var(--bg);
overscroll-behavior-y:none;
}
.view.active{transform:translateX(0)}
.view.slide-out{transform:translateX(-24%)}
.scroll-area{
flex:1;overflow-y:auto;
-webkit-overflow-scrolling:touch;
/* Blocca bounce locale e scroll chaining (Chrome pull-to-refresh, iOS dove supportato) */
overscroll-behavior-y:none;
background:var(--bg);
/* Spazio per nav flottante + offset --nav-float-bottom + bolla home + inset Android opzionale */
padding-bottom:calc(84px + var(--nav-float-bottom) + var(--android-gesture-nav-pad, 0px));
min-width:0;
overflow-x:hidden;
}
/* --- Bottom nav (flottante, vetro, Home centrale risaltata) --------------- */
.bottom-nav{
position:absolute;
left:10px;right:10px;
/* Leggermente sollevata dal bordo per effetto flottante (+ inset sistema Android se misurato) */
bottom:calc(var(--nav-float-bottom) + var(--android-gesture-nav-pad, 0px));
display:flex;align-items:stretch;
padding:4px;
background:color-mix(in srgb, var(--surface) 78%, transparent);
-webkit-backdrop-filter:saturate(190%) blur(22px);
backdrop-filter:saturate(190%) blur(22px);
border:.5px solid color-mix(in srgb, var(--border) 55%, transparent);
border-radius:22px;
/* Shadow proiettata VERSO L'ALTO: sotto la nav (bottom:0) non c'è spazio,
una shadow verso il basso verrebbe clipata sul bordo del display come
striscia colorata (molto visibile su iPhone in PWA standalone). */
box-shadow:
0 -12px 32px rgba(0,0,0,.08),
0 -2px 8px rgba(0,0,0,.03);
z-index:30;
transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .25s;
}
/* Fallback per browser senza color-mix */
@supports not (background:color-mix(in srgb, red, blue)){
.bottom-nav{background:var(--surface)}
}
[data-theme="dark"] .bottom-nav{
background:color-mix(in srgb, var(--surface) 72%, transparent);
box-shadow:
0 -10px 28px rgba(0,0,0,.5),
0 -2px 6px rgba(0,0,0,.3);
}
.bottom-nav.hidden{transform:translateY(140%);opacity:0;pointer-events:none}
.bnav-item{
flex:1;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:2px;
padding:6px 2px;cursor:pointer;
border:none;background:transparent;
color:var(--text3);
border-radius:10px;
transition:color .2s,transform .1s;
position:relative;
}
.bnav-item:active{transform:scale(.94)}
.bnav-item.active{color:var(--primary)}
.bnav-icon{display:flex;align-items:center;justify-content:center}
.bnav-icon svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.9;fill:none}
.bnav-label{font-size:10px;font-weight:700;letter-spacing:.1px}
/* Pulsante Home centrale: cerchio pieno che sporge sopra la nav flottante */
.bnav-item.bnav-home{
flex:1;justify-content:flex-end;
padding-top:0;
}
.bnav-item.bnav-home .bnav-icon{
width:48px;height:48px;border-radius:50%;
background:linear-gradient(145deg,var(--primary-soft),var(--primary-strong));
color:#fff;
margin-top:-18px;margin-bottom:2px;
box-shadow:
0 10px 22px rgba(30,95,168,.45),
0 2px 6px rgba(30,95,168,.3);
transition:transform .15s,box-shadow .2s,background .2s;
}
.bnav-item.bnav-home .bnav-icon svg{
width:22px;height:22px;stroke:#fff;
}
.bnav-item.bnav-home:active .bnav-icon{transform:scale(.92)}
.bnav-item.bnav-home.active .bnav-icon{
background:linear-gradient(145deg,var(--primary),var(--primary-strong));
box-shadow:
0 12px 26px rgba(30,95,168,.55),
0 2px 6px rgba(30,95,168,.35);
}
.bnav-item.bnav-home .bnav-label{color:var(--primary);font-weight:800}
/* --- Hero pattern --------------------------------------------------------- */
.hero{
background:linear-gradient(160deg,var(--primary-soft) 0%,var(--primary) 55%,var(--primary-strong) 100%);
color:var(--hero-text);
padding:14px 16px 28px;
position:relative;
border-radius:0 0 28px 28px;
overflow:hidden;
}
/* Aggiungo un bagliore "sole" in alto a destra, richiamo del logo.
Di giorno: sfumatura dorata (sole). Di sera: sfumatura argentea (luna). */
.hero::before{
content:"";position:absolute;top:-30px;right:-30px;
width:140px;height:140px;border-radius:50%;
background:radial-gradient(closest-side, rgba(245,199,86,.55), rgba(245,199,86,0) 70%);
pointer-events:none;
transition:background .4s ease;
}
.hero.is-evening::before{
background:
radial-gradient(closest-side, rgba(230,235,255,.55), rgba(230,235,255,0) 70%),
radial-gradient(circle at 35% 45%, rgba(14,74,155,.55) 0 18%, rgba(14,74,155,0) 19%);
}
.hero-title{font-size:20px;font-weight:800;letter-spacing:-.3px}
.hero-sub{font-size:13px;color:var(--hero-sub);margin-top:2px}
/* --- Barra di ricerca ----------------------------------------------------- */
.search-bar{
display:flex;align-items:center;gap:10px;
background:var(--surface);
border-radius:var(--radius-pill);
padding:10px 14px;
box-shadow:var(--shadow-sm);
margin-top:12px;
}
.search-bar svg{width:18px;height:18px;stroke:var(--text3);stroke-width:2;fill:none;flex-shrink:0}
.search-bar input{
flex:1;border:none;outline:none;background:transparent;
font-size:14px;color:var(--text);
}
.search-bar input::placeholder{color:var(--text3)}
.search-on-hero{margin-top:var(--hero-stack-gap, 14px)}
/* --- Home hero premium (tab home) ----------------------------------------- */
/* Unica foto su #app: continua da header a meteo + 1/3 sotto card (altezza JS) */
html[data-shell-tab="home"]{
--home-header-overlap:calc(env(safe-area-inset-top, 0px) + 64px);
--hero-radius:44px;
--hero-stack-gap:14px;
--home-weather-photo-extra:0.3333;
--home-weather-white-start:0.3;
--hero-pad-x:22px;
--hero-chip-pad-x:16px;
}
html:not([data-shell-tab="home"]) #homeHeroBackdrop{display:none}
html[data-shell-tab="home"] #homeHeroBackdrop.home-hero-backdrop{
position:absolute;
top:0;
left:0;
right:0;
z-index:0;
overflow:hidden;
border-radius:0 0 var(--hero-radius) var(--hero-radius);
pointer-events:none;
}
.home-hero-backdrop__photo{
width:100%;
height:100%;
object-fit:cover;
object-position:center 38%;
display:block;
}
.home-hero-backdrop::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(180deg, rgba(8,38,78,.52) 0%, rgba(14,74,155,.28) 45%, rgba(14,74,155,.14) 82%, rgba(30,95,168,.08) 100%),
radial-gradient(ellipse 90% 70% at 88% 7%, rgba(245,199,86,.24), transparent 58%),
radial-gradient(ellipse 60% 50% at 12% 88%, rgba(42,130,216,.18), transparent 62%);
pointer-events:none;
}
.home-hero-backdrop.is-evening::after,
html[data-shell-tab="home"]:has(#heroHome.is-evening) .home-hero-backdrop::after{
background:
linear-gradient(180deg, rgba(6,24,52,.68) 0%, rgba(14,74,155,.38) 50%, rgba(20,55,110,.22) 88%, rgba(20,55,110,.1) 100%),
radial-gradient(ellipse 80% 60% at 85% 10%, rgba(200,215,255,.16), transparent 55%),
radial-gradient(ellipse 50% 40% at 20% 86%, rgba(42,130,216,.12), transparent 60%);
}
[data-theme="dark"] .home-hero-backdrop::after{
background:
linear-gradient(180deg, rgba(4,18,40,.78) 0%, rgba(10,40,85,.48) 72%, rgba(10,40,85,.2) 100%),
radial-gradient(ellipse 70% 55% at 88% 8%, rgba(245,199,86,.08), transparent 55%);
}
html[data-shell-tab="home"] .view-host,
html[data-shell-tab="home"] section.view[data-view="home"]{
overflow:visible;
}
html[data-shell-tab="home"] section.view[data-view="home"],
html[data-shell-tab="home"] section.view[data-view="home"] .scroll-area,
html[data-shell-tab="home"] .home-hero-scene{
overflow-x:visible;
}
/* La view copriva il backdrop fisso: trasparente così si vede la foto sotto saluto/search/chip */
html[data-shell-tab="home"] section.view[data-view="home"]{
background:transparent;
}
html[data-shell-tab="home"] .home-hero-scene.hero{
background:transparent!important;
}
html[data-shell-tab="home"] .status-bar,
html[data-shell-tab="home"] .top-bar.on-hero{
position:relative;
z-index:3;
background:transparent!important;
border-bottom:none!important;
box-shadow:none;
transition:background .25s ease;
}
html[data-shell-tab="home"].home-hero-scrolled .status-bar,
html[data-shell-tab="home"].home-hero-scrolled .top-bar.on-hero{
background:var(--header-chrome-bg)!important;
border-bottom:none!important;
box-shadow:0 4px 22px rgba(14,74,155,.16)!important;
}
html[data-shell-tab="home"] .view-host{
position:relative;
z-index:1;
background:transparent;
}
html[data-shell-tab="home"] section.view[data-view="home"] .scroll-area{
background:transparent;
overflow-x:visible;
}
html[data-shell-tab="home"] .home-hero-visual{
position:relative;
margin:0;
background:transparent;
overflow:visible;
}
.home-hero-visual__content{
position:relative;
z-index:auto;
}
html[data-shell-tab="home"] .home-hero-visual .weather-card--premium{
margin:var(--hero-stack-gap, 14px) 20px 0;
position:relative;
z-index:4;
isolation:isolate;
}
/* Servizi rapidi attaccati sotto card meteo; bianco che copre dal 30% della card */
html[data-shell-tab="home"] .home-below-hero{
position:relative;
z-index:3;
margin:0;
padding:10px 0 0;
background:var(--bg);
}
html[data-shell-tab="home"] .home-below-hero::before{
content:"";
position:absolute;
left:0;
right:0;
top:0;
height:var(--home-card-white-zone-h, 0px);
transform:translateY(-100%);
background:var(--bg);
pointer-events:none;
z-index:-1;
}
html[data-shell-tab="home"] .home-below-hero > .section--news-home{
padding-top:12px;
}
html[data-shell-tab="home"] .home-below-hero{
--home-section-gap:22px;
}
html[data-shell-tab="home"] .home-below-hero .section--news-home,
html[data-shell-tab="home"] .home-below-hero .section--oggi-home,
html[data-shell-tab="home"] .home-below-hero .section--vicino-home{
padding:var(--home-section-gap, 22px) 16px 8px;
}
html[data-shell-tab="home"] .home-below-hero .section{
animation:homeSectionFade .5s cubic-bezier(.2,.8,.2,1) both;
}
html[data-shell-tab="home"] .home-below-hero .section--news-home{animation-delay:.04s}
html[data-shell-tab="home"] .home-below-hero .section--oggi-home{animation-delay:.08s}
html[data-shell-tab="home"] .home-below-hero .section:nth-of-type(n+3){animation-delay:.12s}
@keyframes homeSectionFade{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
html[data-shell-tab="home"] .home-below-hero .section:not(.section--news-home):not(.section--vicino-home){
padding:var(--home-section-gap, 22px) 16px 8px;
}
html[data-shell-tab="home"] #heroHome.home-hero-scene{
position:relative;
z-index:6;
}
.home-hero-scene{
position:relative;
z-index:1;
margin:0;
padding:10px 0 20px;
overflow:visible;
background:transparent!important;
}
html[data-shell-tab="home"] .home-hero-scene.hero{
overflow:visible!important;
}
.home-hero-scene::before{display:none}
.home-hero-scene .hero-content{
padding-left:var(--hero-pad-x);
padding-right:var(--hero-pad-x);
}
.home-hero-scene__content,
.hero.home-hero-premium .hero-content{
position:relative;
z-index:2;
}
.home-hero-premium .hero-sub{
font-size:14px;
margin-top:4px;
line-height:1.35;
}
/* Search premium in hero */
.search-bar--premium{
margin-top:18px;
min-height:66px;
padding:6px 6px 6px 16px;
gap:10px;
background:#fff;
border-radius:999px;
box-shadow:0 10px 32px rgba(8,38,78,.18), 0 2px 8px rgba(0,0,0,.06);
border:.5px solid rgba(255,255,255,.85);
}
.search-bar--premium .search-bar__ai{
width:28px;height:28px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
color:var(--primary);
}
.search-bar--premium .search-bar__ai svg{width:22px;height:22px}
.search-bar--premium input{
flex:1;min-width:0;
font-size:15px;font-weight:500;
color:var(--text);
}
.search-bar--premium input::placeholder{color:var(--text3);font-weight:400}
.search-bar--premium .search-bar__submit{
width:48px;height:48px;min-width:48px;min-height:48px;
border:none;border-radius:50%;
background:linear-gradient(145deg,var(--primary-soft) 0%,var(--primary) 55%,var(--primary-strong) 100%);
color:#fff;
display:inline-flex;align-items:center;justify-content:center;
cursor:pointer;flex-shrink:0;
box-shadow:0 4px 14px rgba(14,74,155,.35);
transition:transform .12s ease,box-shadow .12s ease;
}
.search-bar--premium .search-bar__submit svg{width:20px;height:20px}
.search-bar--premium .search-bar__submit:active{transform:scale(.97)}
/* Home: search solo suggest, senza pulsante invio */
.home-search-wrap .search-bar--premium{
padding:6px 18px 6px 16px;
}
.home-search-wrap .search-bar--premium input{
padding-right:4px;
}
/* Dropdown suggerimenti ricerca home (sopra card meteo) */
.home-search-wrap{
position:relative;
z-index:30;
width:100%;
}
.home-search-suggest-panel{
position:absolute;
left:0;right:0;
top:calc(100% + 8px);
max-height:min(52vh, 340px);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-lg);
box-shadow:0 16px 40px rgba(8,38,78,.22), var(--shadow-md);
z-index:40;
}
.home-search-suggest-panel.hidden{display:none!important}
.home-search-suggest-item{
display:block;width:100%;
text-align:left;
padding:12px 14px;
border:none;border-bottom:1px solid var(--border);
background:transparent;
cursor:pointer;
}
.home-search-suggest-item:last-child{border-bottom:none}
.home-search-suggest-item:active{background:color-mix(in srgb,var(--primary) 10%,var(--surface2))}
.home-search-suggest-line1{
display:flex;align-items:flex-start;gap:10px;
font-size:14px;font-weight:700;line-height:1.35;color:var(--text);
}
.home-search-suggest-emoji{
flex-shrink:0;width:22px;text-align:center;font-size:16px;line-height:1.35;
}
.home-search-suggest-title{flex:1;min-width:0}
.home-search-suggest-line2{
margin-top:3px;padding-left:32px;
font-size:12px;line-height:1.35;color:var(--text3);
}
.home-search-suggest-empty{
padding:12px 14px;font-size:13px;color:var(--text3);
}
html[data-shell-tab="home"].home-hero-scrolled .home-search-suggest-panel{
box-shadow:var(--shadow-md);
}
[data-theme="dark"] .search-bar--premium{
background:var(--surface);
border-color:var(--border);
}
/* Chips a tutta larghezza schermo (scroll orizzontale non tagliato dal padding hero) */
.home-hero-premium .hero-chips{
display:flex;
gap:10px;
margin-top:var(--hero-stack-gap, 14px);
margin-bottom:0;
width:100%;
max-width:100%;
box-sizing:border-box;
padding:2px var(--hero-chip-pad-x, 16px);
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
scroll-padding-inline:var(--hero-chip-pad-x, 16px);
scrollbar-width:none;
}
.home-hero-premium .hero-chips::-webkit-scrollbar{display:none}
.hero-chips{
display:flex;gap:10px;
margin-top:14px;
padding:0;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.hero-chips::-webkit-scrollbar{display:none}
.hero-chip{
flex:0 0 auto;
display:inline-flex;align-items:center;gap:7px;
height:42px;padding:0 14px;
border-radius:999px;
border:1px solid rgba(255,255,255,.25);
background:rgba(255,255,255,.18);
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
color:#fff;
font-size:13px;font-weight:700;
cursor:pointer;
white-space:nowrap;
transition:transform .1s ease,background .15s ease;
}
.hero-chip__ico{width:16px;height:16px;flex-shrink:0;opacity:.95}
.hero-chip:active{transform:scale(.97)}
.hero-chip:hover{background:rgba(255,255,255,.24)}
/* Chip/search leggibili quando l'hero scorre sulla fascia bianca (anche dopo back con scroll ripristinato) */
html[data-shell-tab="home"].home-hero-scrolled .hero-chip,
html[data-shell-tab="home"] .hero-chips--on-surface .hero-chip{
background:var(--surface);
border-color:var(--border);
color:var(--text);
box-shadow:var(--shadow-sm);
-webkit-backdrop-filter:none;
backdrop-filter:none;
}
html[data-shell-tab="home"].home-hero-scrolled .hero-chip:hover,
html[data-shell-tab="home"] .hero-chips--on-surface .hero-chip:hover{
background:var(--surface2);
}
html[data-shell-tab="home"].home-hero-scrolled .search-bar--premium{
box-shadow:var(--shadow-sm);
border-color:var(--border);
}
/* --- Meteo card ----------------------------------------------------------- */
.weather-card{
margin:-16px 16px 0;
background:var(--surface);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-md);
padding:14px 16px;
display:flex;align-items:center;gap:14px;
position:relative;z-index:2;
}
.weather-card--interactive{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.weather-card--interactive:active{transform:scale(.97)}
/* Meteo premium home (dentro .home-hero-visual) */
.weather-card--premium{
margin:12px 20px 0;
padding:0;
border-radius:32px;
border:.5px solid rgba(0,0,0,.04);
box-shadow:0 16px 40px rgba(14,74,155,.12), 0 4px 12px rgba(0,0,0,.06);
display:block;
overflow:hidden;
}
.weather-card--premium .weather-card__top{
display:grid;
grid-template-columns:auto 1fr auto;
gap:12px 14px;
align-items:center;
padding:22px 22px 16px;
}
.weather-card--premium .weather-card__visual{
width:72px;height:72px;border-radius:22px;
background:linear-gradient(145deg,#E8F4FF 0%,#B8DCFA 45%,#FFF6E8 100%);
display:flex;align-items:center;justify-content:center;
box-shadow:0 0 0 1px rgba(30,95,168,.08), 0 8px 20px rgba(42,130,216,.18);
flex-shrink:0;
}
.weather-card--premium .weather-card__visual .weather-icon{
width:auto;height:auto;
background:transparent;border-radius:0;
font-size:36px;
box-shadow:none;
}
.weather-card--premium .weather-card__main{min-width:0}
.weather-card--premium .weather-temp{
font-size:32px;font-weight:800;
letter-spacing:-.5px;line-height:1;
color:var(--text);
}
.weather-card--premium .weather-loc{
font-size:14px;font-weight:700;
color:var(--text);
margin-top:4px;
}
.weather-card--premium .weather-condition{
font-size:13px;font-weight:600;
color:var(--text2);
margin-top:2px;
line-height:1.28;
white-space:normal;
}
.weather-card--premium .weather-experience{
display:inline-flex;align-items:center;gap:4px;
margin-top:6px;
font-size:12px;font-weight:700;
color:var(--primary);
}
.weather-card--premium .weather-stats{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:6px;
min-width:0;
}
.weather-card--premium .weather-stat{
display:flex;align-items:center;gap:6px;
font-size:11px;font-weight:600;
color:var(--text2);
line-height:1.25;
white-space:nowrap;
}
.weather-card--premium .weather-stat__ico{
width:16px;height:16px;flex-shrink:0;
color:var(--primary);
opacity:.9;
}
.weather-card--premium .weather-stat__ico svg{width:16px;height:16px}
.weather-card--premium .weather-stat__ico--mask{
width:16px;height:16px;display:block;flex-shrink:0;
background:currentColor;
-webkit-mask-image:var(--weather-stat-icon);
mask-image:var(--weather-stat-icon);
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center;
mask-position:center;
-webkit-mask-size:contain;
mask-size:contain;
}
.weather-card--premium .weather-stat__ico--mask.weather-stat__ico--wave{
width:18px;height:18px;
}
.weather-card--premium .weather-card__cta{
display:flex;align-items:center;justify-content:center;gap:6px;
width:100%;
padding:12px 16px;
background:var(--primary-light);
color:var(--primary);
font-size:13px;font-weight:700;
border-top:.5px solid rgba(30,95,168,.08);
pointer-events:none;
}
.weather-card--premium .weather-card__cta-chevron{
width:18px;height:18px;flex-shrink:0;
}
[data-theme="dark"] .weather-card--premium{
border-color:var(--border);
box-shadow:0 12px 32px rgba(0,0,0,.25);
}
[data-theme="dark"] .weather-card--premium .weather-card__visual{
background:linear-gradient(145deg,rgba(42,130,216,.25) 0%,rgba(30,95,168,.15) 100%);
}
@media (max-width:380px){
.weather-card--premium .weather-card__top{
grid-template-columns:auto 1fr;
grid-template-rows:auto auto;
}
.weather-card--premium .weather-stats{
grid-column:1/-1;
flex-direction:row;flex-wrap:wrap;gap:8px 14px;
}
}
.view[data-view="home"] .shortcut-grid{margin-top:4px}
/* Home: scroll senza barra visibile */
html[data-shell-tab="home"] section.view[data-view="home"] .scroll-area{
scrollbar-width:none;
-ms-overflow-style:none;
}
html[data-shell-tab="home"] section.view[data-view="home"] .scroll-area::-webkit-scrollbar{
display:none;
width:0;
height:0;
}
.weather-tap-hint{font-size:10px;font-weight:700;color:var(--primary);margin-top:6px;letter-spacing:.02em}
.weather-updated-note{font-size:12px;color:var(--text2);margin:0 16px 8px}
.weather-forecast-list{padding:0 16px 24px;display:flex;flex-direction:column;gap:10px}
.weather-forecast-row{
display:flex;align-items:center;gap:12px;
background:var(--surface);border-radius:var(--radius-lg);
border:.5px solid var(--border);padding:12px 14px;
box-shadow:var(--shadow-sm);
}
.weather-forecast-ico{
width:44px;height:44px;border-radius:14px;
background:var(--primary-light);display:flex;align-items:center;justify-content:center;
font-size:22px;flex-shrink:0;
}
.weather-forecast-main{flex:1;min-width:0}
.weather-forecast-date{font-size:14px;font-weight:800;color:var(--text)}
.weather-forecast-meta{font-size:11px;color:var(--text2);margin-top:3px}
.weather-forecast-temps{
font-size:15px;font-weight:800;color:var(--primary);white-space:nowrap;
display:inline-flex;align-items:center;gap:4px;
}
.weather-forecast-therm{font-size:14px;line-height:1;flex-shrink:0}
.weather-forecast-range-val{font-variant-numeric:tabular-nums}
/* Giorno espandibile: riepilogo + ore H24 (dati da API). */
.weather-forecast-day{
background:var(--surface);border-radius:var(--radius-lg);
border:.5px solid var(--border);box-shadow:var(--shadow-sm);overflow:hidden;
min-width:0;
}
.weather-forecast-summary{cursor:pointer;list-style:none}
.weather-forecast-summary::-webkit-details-marker{display:none}
.weather-forecast-day .weather-forecast-row{border:none;box-shadow:none;border-radius:0}
.weather-forecast-slots{
padding:0 10px 12px 48px;border-top:.5px solid var(--border);
display:flex;flex-direction:column;gap:6px;
max-height:min(52vh,320px);overflow-y:auto;overflow-x:hidden;
-webkit-overflow-scrolling:touch;
min-width:0;
}
.weather-forecast-slots-title{
font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;
padding-top:8px;margin-bottom:2px;
}
.weather-forecast-slots-note{
font-size:12px;color:var(--text2);line-height:1.35;margin-bottom:4px;
}
.weather-forecast-hourly-unavailable{
font-size:13px;color:var(--text2);line-height:1.4;padding:6px 0 4px;
}
/* Icona + quattro colonne uguali (ora, temp, pioggia, vento): stesso passo tra le celle, niente vento “incollato” al bordo. */
.weather-forecast-slot{
display:grid;
grid-template-columns:28px repeat(4, minmax(0, 1fr));
align-items:center;column-gap:8px;row-gap:2px;font-size:13px;padding:6px 0;border-bottom:.5px solid var(--border);
min-width:0;
}
.weather-forecast-slot:last-child{border-bottom:none}
.weather-forecast-slot-ico{
width:28px;height:28px;border-radius:10px;background:var(--primary-light);
display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;
}
.weather-forecast-slot-time,
.weather-forecast-slot-temp,
.weather-forecast-slot-rain,
.weather-forecast-slot-wind{
min-width:0;
justify-self:stretch;
text-align:center;
}
.weather-forecast-slot-time{
font-variant-numeric:tabular-nums;font-weight:700;color:var(--text2);font-size:12px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.weather-forecast-slot-temp{
font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Pioggia: una riga (💧 accanto alla %) centrata nella cella; in home resta uguale a prima. */
.weather-forecast-slot-rain,
.weather-next-slot-rain{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
align-items:center;
justify-content:center;
gap:4px;
white-space:nowrap;
line-height:1.1;
}
.weather-forecast-slot-rain{
font-size:11px;
color:var(--text2);
}
.weather-next-slot-rain{
font-size:11px;
color:var(--text2);
width:100%;
}
.weather-slot-rain-ico{
flex-shrink:0;
display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;
}
.weather-slot-rain-val{
font-variant-numeric:tabular-nums;
text-align:left;
min-width:0;
}
.weather-forecast-slot-wind{
font-size:11px;
color:var(--text2);
white-space:nowrap;
font-variant-numeric:tabular-nums;
overflow:hidden;
text-overflow:ellipsis;
}
.weather-empty{padding:20px;text-align:center;color:var(--text2);font-size:13px}
.weather-icon{
width:52px;height:52px;border-radius:16px;
background:linear-gradient(135deg,#FFD166,#EF8354);
display:flex;align-items:center;justify-content:center;
font-size:26px;
color:#fff;flex-shrink:0;
}
.weather-main{flex:1;min-width:0}
.weather-temp{font-size:22px;font-weight:800;color:var(--text);line-height:1}
.weather-loc{font-size:12px;color:var(--text2);margin-top:2px}
.weather-meta{display:flex;gap:10px;margin-top:6px}
.weather-meta span{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:3px}
/* Fascia min–max: termometro compatto + valore (figli in flex). */
.weather-meta-range{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}
.weather-meta-therm{font-size:12px;line-height:1;display:inline-flex;flex-shrink:0}
.weather-meta-range-val{font-variant-numeric:tabular-nums}
/* Riga mare (onde + stato + temperatura superficie): dati Open-Meteo Marine via API JonioHUB. */
.weather-marine{
margin-top:5px;
font-size:11px;
color:var(--text2);
line-height:1.35;
letter-spacing:.01em;
}
/* Anteprima in home: prossime 3 ore senza aprire le previsioni. */
.weather-next-slots{
margin-top:8px;display:flex;flex-direction:column;gap:4px;width:100%;
}
.weather-next-slot{
display:grid;
grid-template-columns:26px repeat(4, minmax(0, 1fr));
align-items:center;column-gap:6px;row-gap:2px;font-size:12px;line-height:1.25;
min-width:0;
}
.weather-next-slot-ico{
width:26px;height:26px;border-radius:8px;background:var(--primary-light);
display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;
}
.weather-next-slot-time,
.weather-next-slot-temp,
.weather-next-slot-rain,
.weather-next-slot-wind{
min-width:0;
justify-self:stretch;
text-align:center;
}
.weather-next-slot-time{
font-variant-numeric:tabular-nums;font-weight:700;color:var(--text2);font-size:11px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.weather-next-slot-temp{
font-weight:800;color:var(--text);font-size:12px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
font-variant-numeric:tabular-nums;
}
.weather-next-slot-wind{
font-size:10px;
color:var(--text2);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-variant-numeric:tabular-nums;
}
/* Schermi stretti (es. iPhone): testo mare + righe ora/pioggia/vento più leggibili in home. */
@media (max-width:480px){
.weather-card .weather-temp{font-size:23px}
.weather-card .weather-loc{font-size:13px}
.weather-card .weather-meta span{font-size:12px}
.weather-card .weather-meta-therm{font-size:13px}
.weather-card .weather-marine{
font-size:12.5px;
line-height:1.4;
}
.weather-card .weather-next-slots{
margin-top:9px;
gap:6px;
}
.weather-card .weather-next-slot{
grid-template-columns:28px repeat(4,minmax(0,1fr));
column-gap:7px;
font-size:13px;
line-height:1.3;
}
.weather-card .weather-next-slot-ico{
width:28px;
height:28px;
border-radius:9px;
font-size:15px;
}
.weather-card .weather-next-slot-time{font-size:12px}
.weather-card .weather-next-slot-temp{font-size:13px}
.weather-card .weather-next-slot-rain{font-size:12px}
.weather-card .weather-next-slot-wind{font-size:11px}
}
/* --- Sezioni generiche ---------------------------------------------------- */
.section{padding:18px 16px 6px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section-title{font-size:16px;font-weight:800;color:var(--text);letter-spacing:-.2px}
.section-link{font-size:12px;font-weight:700;color:var(--primary);cursor:pointer}
/* --- Categorie orizzontali ------------------------------------------------ */
.cat-row{
display:flex;gap:10px;overflow-x:auto;
padding:4px 16px 8px;
scroll-snap-type:x mandatory;
scrollbar-width:none;
touch-action:pan-x;
-webkit-overflow-scrolling:touch;
}
.cat-row::-webkit-scrollbar{display:none}
.cat-chip{
flex-shrink:0;scroll-snap-align:start;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
width:74px;padding:12px 6px;
background:var(--surface);
border:.5px solid var(--border);
border-radius:var(--radius-md);
cursor:pointer;
transition:all .2s;
}
.cat-chip .ico{font-size:22px}
.cat-chip .lbl{font-size:11px;font-weight:700;color:var(--text);text-align:center}
.cat-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}
.cat-chip.active .lbl{color:#fff}
/* --- Quick shortcuts griglia --------------------------------------------- */
.shortcut-grid{
display:grid;grid-template-columns:repeat(4,1fr);
gap:12px;padding:4px 16px;
}
.shortcut{
display:flex;flex-direction:column;align-items:center;gap:6px;
padding:10px 4px;cursor:pointer;
}
/* Icona scorciatoia: solo glifo, nessuna card/sfondo (stile coerente bnav) */
.shortcut-ico{
width:44px;height:44px;
display:flex;align-items:center;justify-content:center;
background:transparent;border-radius:0;
font-size:22px;line-height:1;
}
.shortcut-ico svg{
width:30px;height:30px;
stroke:currentColor;stroke-width:1.8;fill:none;
stroke-linecap:round;stroke-linejoin:round;
display:block;
}
/* Icone PNG «Servizi rapidi» (asset in img/home-shortcuts/) */
.shortcut-ico .shortcut-ico-img{
width:36px;height:36px;max-width:100%;max-height:100%;
object-fit:contain;display:block;pointer-events:none;
}
/* Scorciatoia Youkiko: mascotte PNG senza box (eccezione di stile voluta) */
.shortcut-ico--youkiko{
background:transparent;padding:0;overflow:visible;
}
.shortcut-ico--youkiko img{
width:100%;height:100%;max-width:44px;max-height:44px;
object-fit:contain;display:block;pointer-events:none;
}
.shortcut-lbl{font-size:11px;font-weight:700;color:var(--text);text-align:center}
/* --- Vista ricerca pullman (stile allineato a Servizi) -------------------- */
html[data-shell-tab="pullmanSearch"] section.view[data-view="pullmanSearch"] .scroll-area.services-page{
background:#f4f5f7;
}
[data-theme="dark"] html[data-shell-tab="pullmanSearch"] section.view[data-view="pullmanSearch"],
[data-theme="dark"] html[data-shell-tab="pullmanSearch"] section.view[data-view="pullmanSearch"] .scroll-area.services-page{
background:var(--bg);
}
.pullman-search-mount{padding:0 0 28px}
.pullman-page{min-height:0}
.pullman-form-list{padding:4px 18px 12px}
.pullman-page .pullman-direct-head,
.pullman-page .pullman-status{padding-left:18px;padding-right:18px}
.pullman-page #pullmanHtmlOut.service-list{padding-left:18px;padding-right:18px}
.pullman-coincidenze-host{padding:0 18px 12px}
/* Form in service-card: non è una riga cliccabile come in elenco servizi */
.pullman-search-card{
cursor:default;
box-shadow:var(--shadow-sm);
border:1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
background:linear-gradient(165deg,
color-mix(in srgb, var(--primary) 6%, var(--surface)) 0%,
var(--surface) 42%,
var(--surface) 100%);
}
.pullman-search-card:active{transform:none}
.pullman-search-card .service-body{flex:1;min-width:0;width:100%}
.pullman-fields{display:flex;flex-direction:column;gap:4px}
.pullman-field .lbl{display:block;margin-bottom:2px}
.pullman-input-pill{margin-top:0}
.pullman-ac-wrap{position:relative;width:100%}
.pullman-ac-wrap.pullman-ac-locked input{
color:var(--text);
cursor:default;
}
.pullman-ac-clear{
flex-shrink:0;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:36px;
min-height:36px;
margin:0 0 0 4px;
padding:0 6px;
border:none;
border-radius:var(--radius-md);
background:transparent;
font-size:22px;
font-weight:800;
line-height:1;
color:#dc2626;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.pullman-ac-clear.hidden{display:none!important}
.pullman-ac-clear:active{opacity:.82;background:color-mix(in srgb,#dc2626 12%,transparent)}
.pullman-suggest-panel{
position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;
max-height:min(42vh,280px);overflow-y:auto;overflow-x:hidden;
background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius-md);
box-shadow:0 10px 28px rgba(0,0,0,.14);
}
.pullman-suggest-panel.hidden{display:none!important}
.pullman-suggest-item{
display:block;width:100%;margin:0;padding:10px 12px;
text-align:left;font:inherit;color:var(--text);
background:transparent;border:none;border-bottom:1px solid var(--border2);
cursor:pointer;border-radius:0;
}
.pullman-suggest-item:last-child{border-bottom:none}
.pullman-suggest-item:active{background:color-mix(in srgb,var(--primary) 10%,var(--surface2))}
.pullman-suggest-line1{font-size:14px;font-weight:700;line-height:1.35;color:var(--text)}
.pullman-suggest-line2{font-size:12px;color:var(--text3);margin-top:2px;line-height:1.35}
.pullman-suggest-badge{
display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
padding:2px 6px;border-radius:6px;
background:color-mix(in srgb,var(--primary) 18%,var(--surface2));color:var(--primary);
}
.pullman-suggest-empty{padding:12px;font-size:13px;color:var(--text3)}
.pullman-input-pill input:focus-visible{
outline:2px solid color-mix(in srgb, var(--primary) 55%, transparent);
outline-offset:1px;
}
.pullman-input-pill--date input[type="date"]{
flex:1;min-width:0;font-size:14px;min-height:40px;
}
.pullman-btn-search{
margin-top:14px;
box-shadow:0 6px 18px color-mix(in srgb, var(--primary) 28%, transparent);
}
.pullman-status{font-size:13px;color:var(--text2)}
.pullman-status.pullman-status--loading{opacity:.85}
.pullman-direct-head{padding-bottom:2px}
.pullman-html-out{margin-top:0}
.pullman-html-out.hidden{display:none!important}
/* Risultati ricerca pullman (HTML server `jh-pullman-*`) dentro una card */
.pullman-api-results-card{
background:var(--surface);
border:.5px solid var(--border);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
padding:14px 16px;
cursor:default;
}
.pullman-api-results-card:active{transform:none}
.pullman-api-results-inner{min-width:0}
.pullman-api-results-inner .jh-pullman{
margin:0;
font-size:14px;
line-height:1.45;
color:var(--text);
display:flex;
flex-direction:column;
gap:14px;
}
.pullman-api-results-inner .jh-pullman-caption{
margin:0;
font-size:13px;
line-height:1.4;
color:var(--text2);
}
.pullman-api-results-inner .jh-pullman-caption strong{font-weight:800;color:var(--text)}
.pullman-api-results-inner .jh-pullman-route-strip{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin:0;
}
@media (max-width:380px){
.pullman-api-results-inner .jh-pullman-route-strip{grid-template-columns:1fr}
}
.pullman-api-results-inner .jh-pullman-chip{
display:flex;
flex-direction:column;
gap:4px;
padding:10px 12px;
border-radius:var(--radius-md);
background:linear-gradient(145deg,
color-mix(in srgb, var(--primary) 10%, var(--surface2)) 0%,
var(--surface2) 100%);
border:1px solid color-mix(in srgb, var(--primary) 14%, var(--border2));
min-width:0;
}
.pullman-api-results-inner .jh-pullman-chip--arr{
background:linear-gradient(145deg,
color-mix(in srgb, var(--accent) 8%, var(--surface2)) 0%,
var(--surface2) 100%);
border-color:color-mix(in srgb, var(--accent) 16%, var(--border2));
}
.pullman-api-results-inner .jh-pullman-chip-label{
font-size:10px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--text3);
}
.pullman-api-results-inner .jh-pullman-chip-main{
font-size:13px;
font-weight:800;
line-height:1.35;
color:var(--text);
word-break:break-word;
}
.pullman-api-results-inner .jh-pullman-chip-sub{
font-size:12px;
font-weight:600;
line-height:1.35;
color:var(--text2);
word-break:break-word;
}
.pullman-api-results-inner .jh-pullman-fermata-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin:0;
}
@media (max-width:420px){
.pullman-api-results-inner .jh-pullman-fermata-grid{grid-template-columns:1fr}
}
.pullman-api-results-inner .jh-pullman-fermata-card{
margin:0;
padding:10px 12px;
border-radius:var(--radius-md);
background:var(--surface2);
border:1px solid var(--border2);
box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
.pullman-api-results-inner .jh-pullman-fermata-card .jh-pullman-fermata-dettaglio{
margin:0;
font-size:12px;
line-height:1.45;
color:var(--text2);
}
.pullman-api-results-inner .jh-pullman-fermata-dettaglio strong{
display:block;
margin-bottom:4px;
font-size:11px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
color:var(--primary);
}
.pullman-api-results-inner .jh-pullman-line--fermata-extra{
font-size:12px;
font-weight:600;
color:var(--text3);
padding-left:10px;
border-left:3px solid color-mix(in srgb, var(--primary) 45%, var(--border));
}
.pullman-api-results-inner .jh-pullman-block{margin:0}
.pullman-api-results-inner .jh-pullman-heading{
margin:0 0 8px;
font-size:12px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.4px;
color:var(--primary);
}
.pullman-api-results-inner .jh-pullman-cards{
display:flex;
flex-direction:column;
gap:12px;
}
.pullman-api-results-inner .jh-pullman-corsa{
margin:0;
padding:12px 14px;
background:var(--surface2);
border:1px solid var(--border2);
border-radius:var(--radius-md);
}
.pullman-api-results-inner .jh-pullman-corsa-title{
margin:0 0 10px;
padding:0;
font-size:14px;
font-weight:800;
color:var(--text);
letter-spacing:-.2px;
}
.pullman-api-results-inner .jh-pullman-corsa-body{margin:0}
.pullman-api-results-inner .jh-pullman-line{
margin:0 0 8px;
font-size:13px;
line-height:1.45;
color:var(--text2);
}
.pullman-api-results-inner .jh-pullman-line:last-child{margin-bottom:0}
.pullman-api-results-inner .jh-pullman-line strong{color:var(--text);font-weight:700}
.pullman-api-results-inner .jh-pullman-note{font-size:12px;color:var(--text3);font-weight:600}
.pullman-api-results-inner .jh-pullman-prenota-row{margin-top:4px}
.pullman-api-results-inner .jh-pullman-book{
display:inline-flex;
align-items:center;
margin-top:2px;
padding:8px 14px;
border-radius:var(--radius-pill);
font-size:13px;
font-weight:800;
text-decoration:none;
background:var(--primary);
color:#fff;
}
.pullman-api-results-inner .jh-pullman-book:active{opacity:.92}
.pullman-api-results-inner .jh-pullman-maps{
margin:10px 0 0;
padding-top:10px;
border-top:1px solid var(--border);
font-size:12px;
line-height:1.45;
color:var(--text3);
}
.pullman-api-results-inner .jh-pullman-maps a{
font-weight:700;
color:var(--primary);
text-decoration:none;
}
.pullman-api-results-inner .jh-pullman-ritorno{
margin:0;
padding-top:12px;
border-top:1px solid var(--border);
display:flex;
flex-direction:column;
gap:10px;
}
.pullman-api-results-inner .jh-pullman-ritorno h3{
margin:0;
font-size:15px;
font-weight:800;
color:var(--text);
letter-spacing:-.2px;
}
.pullman-coincidenze-host{margin-top:2px}
.pullman-coin-section{padding-bottom:2px}
.pullman-itin-card{cursor:default}
.pullman-itin-card:active{transform:none}
.pullman-itin-card .service-body{width:100%;min-width:0}
.pullman-segments{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.pullman-seg{
display:flex;flex-direction:column;align-items:flex-start;gap:6px;
padding-top:12px;margin-top:12px;border-top:1px solid var(--border);
}
.pullman-seg:first-of-type{border-top:none;padding-top:0;margin-top:0}
.pullman-seg-title{font-weight:700;font-size:13px;line-height:1.35;color:var(--text)}
.pullman-seg-time{font-size:12px;color:var(--text3);line-height:1.35}
.pullman-seg-stops{
width:100%;
margin-top:2px;
padding:8px 10px;
border-radius:var(--radius-md);
background:color-mix(in srgb, var(--primary) 7%, var(--surface2));
border:1px solid color-mix(in srgb, var(--primary) 12%, var(--border2));
font-size:12px;
line-height:1.45;
color:var(--text2);
}
.pullman-seg-stop-line{font-weight:600;margin:0 0 4px}
.pullman-seg-stop-line:last-child{margin-bottom:0}
.pullman-seg-stop-line strong{
font-size:10px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--text3);
margin-right:6px;
}
.pullman-seg .meta-pill,.pullman-seg .tag{flex-shrink:0}
.pullman-book-link{display:inline-flex;margin-top:2px;font-weight:700;font-size:13px}
.pullman-warn{color:var(--danger);text-transform:none;letter-spacing:0}
/* Fermate intermedie SAJ (percorso_fermate): card dirette + segmenti coincidenze */
.pullman-route-block{
width:100%;
margin-top:8px;
padding:8px 10px;
border-radius:var(--radius-md);
background:color-mix(in srgb, var(--primary) 7%, var(--surface2));
border:1px solid color-mix(in srgb, var(--primary) 12%, var(--border2));
}
.pullman-route-head{
margin:0 0 6px;
font-size:12px;
font-weight:800;
color:var(--text);
line-height:1.35;
}
.pullman-route-ol{
margin:0;
padding-left:18px;
font-size:12px;
line-height:1.45;
color:var(--text2);
}
.pullman-route-li{margin:0 0 4px}
.pullman-route-li:last-child{margin-bottom:0}
.pullman-route-orari{
font-variant-numeric:tabular-nums;
color:var(--text3);
font-weight:600;
margin-right:4px;
}
.pullman-route-nome{font-weight:600;color:var(--text)}
.pullman-route-maps{margin-left:4px;font-size:11px;font-weight:700}
.pullman-api-results-inner .jh-pullman-corsa-body .pullman-route-block{margin-top:10px}
/* --- Promo strip ---------------------------------------------------------- */
.promo-strip{
margin:10px 16px;
background:linear-gradient(135deg,var(--accent),var(--accent-soft));
color:#fff;border-radius:var(--radius-lg);
padding:14px 16px;display:flex;align-items:center;gap:12px;
box-shadow:0 10px 22px rgba(232,97,44,.25);
}
.promo-ico{font-size:30px}
.promo-text strong{display:block;font-size:14px;font-weight:800}
.promo-text span{font-size:12px;opacity:.92}
.promo-code{
margin-left:auto;background:rgba(255,255,255,.22);
padding:6px 10px;border-radius:8px;font-weight:800;font-size:12px;letter-spacing:.5px;
}
/* --- News / blog card ----------------------------------------------------- */
.news-list{padding:4px 16px 16px;display:flex;flex-direction:column;gap:14px}
.news-list-load-hint{
text-align:center;font-size:12px;font-weight:600;color:var(--text3);
padding:12px 8px 4px;
}
.news-card{
background:var(--surface);
border:.5px solid var(--border);
border-radius:var(--radius-lg);
overflow:hidden;cursor:pointer;
box-shadow:var(--shadow-sm);
transition:transform .12s ease, box-shadow .2s ease;
}
.news-card:active{transform:scale(.985)}
.news-card:hover{box-shadow:0 6px 18px rgba(15,23,42,.08)}
.news-thumb{
min-height:150px;
height:150px;
background:linear-gradient(135deg,var(--primary-soft),var(--primary-strong));
color:#fff;display:flex;align-items:center;justify-content:center;
font-size:56px;position:relative;
contain:paint;
}
.news-thumb .cat-badge,
.article-hero-cat.cat-badge{
position:absolute;top:10px;left:10px;
padding:5px 10px;border-radius:6px;
font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.45px;
display:inline-flex;align-items:center;gap:4px;
box-shadow:0 2px 8px rgba(0,0,0,.2);
border:none;
}
.article-hero-cat.cat-badge{
position:relative;top:auto;left:auto;
margin-bottom:10px;
}
/* Variante "featured": thumb più grande con overlay titolo/excerpt */
.news-card-featured{}
.news-thumb-featured{
min-height:210px;
height:210px;
position:relative;overflow:hidden;contain:paint;
}
.news-thumb-featured .news-thumb-emoji{
position:absolute;top:14px;right:14px;font-size:42px;opacity:.9;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.news-thumb-overlay{
position:absolute;left:0;right:0;bottom:0;padding:14px 14px 12px;
background:linear-gradient(180deg,transparent 0%, rgba(0,0,0,.55) 100%);
color:#fff;
}
.news-thumb-title{
font-size:17px;font-weight:800;line-height:1.25;letter-spacing:-.2px;
text-shadow:0 1px 3px rgba(0,0,0,.35);
display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
overflow-wrap:anywhere;word-break:break-word;
}
.news-thumb-excerpt{
font-size:12px;opacity:.95;margin-top:4px;line-height:1.4;
display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
overflow-wrap:anywhere;word-break:break-word;
}
.news-body{padding:12px 14px 14px;min-width:0}
.news-title{
font-size:16px;font-weight:800;color:var(--text);line-height:1.3;letter-spacing:-.1px;
overflow-wrap:anywhere;word-break:break-word;
}
.news-excerpt{
font-size:13px;color:var(--text2);margin-top:6px;line-height:1.5;
display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
overflow-wrap:anywhere;word-break:break-word;
}
/* Blocco autore con avatar a iniziali (o foto se authorAvatarUrl) */
.news-author{display:flex;align-items:center;gap:10px;margin-top:12px}
.news-avatar--photo{padding:0;font-size:0;line-height:0;overflow:hidden}
.news-avatar--photo .news-avatar-img{
width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
}
.news-avatar{
width:34px;height:34px;flex-shrink:0;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:800;color:#fff;letter-spacing:.3px;
box-shadow:0 2px 6px rgba(0,0,0,.15);
border:2px solid var(--surface);
}
.news-author.big .news-avatar{width:42px;height:42px;font-size:14px}
.news-author-info{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.news-author-name{font-size:12.5px;font-weight:700;color:var(--text)}
.news-author-role{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
/* Meta-riga lista notizie: data, tempo lettura, visualizzazioni, paese (icone SVG). */
.news-meta{
display:flex;flex-wrap:wrap;align-items:center;
gap:6px 10px;margin-top:10px;font-size:11px;color:var(--text3);
min-width:0;
}
.news-meta-item{
display:inline-flex;align-items:center;gap:5px;
min-width:0;white-space:nowrap;
}
.news-meta-svg-ico{
display:block;width:14px;height:14px;flex-shrink:0;
object-fit:contain;
}
.news-meta-stat-txt{
font-weight:600;color:var(--text2);
min-width:0;overflow:hidden;text-overflow:ellipsis;
}
[data-theme="dark"] .news-meta-svg-ico{
opacity:.92;
filter:brightness(0) invert(0.88);
}
.news-meta-item:last-child{
overflow:hidden;text-overflow:ellipsis;
}
.news-meta-item + .news-meta-item::before{
content:"•";color:var(--text3);opacity:.5;margin-right:6px;
}
/* Anteprima home (news-mini) in chiave blog */
.news-mini{
display:flex;gap:12px;padding:10px;
background:var(--surface);border:.5px solid var(--border);
border-radius:var(--radius-md);cursor:pointer;
transition:transform .1s ease, box-shadow .2s ease;
box-shadow:var(--shadow-sm);
}
.news-mini:active{transform:scale(.985)}
.news-mini-thumb{
width:76px;height:76px;flex-shrink:0;border-radius:14px;
background:linear-gradient(135deg,var(--primary-soft),var(--primary-strong));
display:flex;align-items:center;justify-content:center;
font-size:32px;color:#fff;position:relative;overflow:hidden;
contain:paint;
}
.news-mini-cat{
position:absolute;top:4px;left:4px;
background:rgba(255,255,255,.9);
width:20px;height:20px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:11px;
}
.news-mini-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.news-mini-cat-label{
font-size:10px;font-weight:800;color:var(--primary);
text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;
}
.news-mini-body h4{
font-size:13.5px;font-weight:800;color:var(--text);line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.news-mini-meta{
display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:4px;
font-size:10.5px;color:var(--text3);
}
.news-mini-author-wrap,.news-mini-author-initials{
width:22px;height:22px;flex-shrink:0;border-radius:50%;
overflow:hidden;
}
.news-mini-author-img{
width:100%;height:100%;object-fit:cover;display:block;
}
.news-mini-author-initials{
display:flex;align-items:center;justify-content:center;
font-size:9px;font-weight:800;color:#fff;line-height:1;
}
.news-mini-author-name{font-weight:700;color:var(--text2)}
.news-mini-meta-sep{opacity:.45}
/* --- Home: carrelli orizzontali (modello guide-mini) ------------------------ */
.home-carousel-strip{
display:flex;gap:10px;overflow-x:auto;
padding:4px 0 8px;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.home-carousel-strip::-webkit-scrollbar{display:none}
.home-carousel-dots{
display:flex;align-items:center;justify-content:center;
gap:6px;margin-top:10px;padding-bottom:4px;
}
.home-carousel-dot{
width:6px;height:6px;border-radius:50%;
border:none;padding:0;cursor:pointer;
background:rgba(30,95,168,.25);
transition:transform .2s,background .2s;
}
.home-carousel-dot.is-active{
background:var(--primary);
transform:scale(1.15);
}
.home-mini-card{
flex:0 0 220px;min-width:220px;max-width:240px;
border-radius:14px;overflow:hidden;
color:#fff;padding:12px;box-sizing:border-box;
display:flex;flex-direction:column;justify-content:space-between;
min-height:150px;cursor:pointer;
box-shadow:0 4px 14px rgba(0,0,0,.12);
position:relative;
-webkit-tap-highlight-color:transparent;
}
.home-mini-card__top{
display:grid;
grid-template-columns:minmax(0,1fr) auto auto;
align-items:center;gap:6px;width:100%;
}
.home-mini-card__top-left{
display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;
}
.home-mini-card__top > .home-mini-card__bookmark{grid-column:2}
.home-mini-card__top > .home-mini-card__live--corner{
grid-column:3;justify-self:end;
}
.home-mini-card__top:not(:has(> .home-mini-card__live--corner)){
grid-template-columns:minmax(0,1fr) auto;
}
.home-mini-card__badge{
font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.45px;
color:#fff;padding:5px 10px;border-radius:6px;line-height:1.2;
box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.home-mini-card__badge--pill{
font-size:9px;border-radius:999px;padding:5px 10px;
}
.home-mini-card__bookmark{
flex-shrink:0;width:30px;height:30px;border:none;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.38);color:#fff;cursor:pointer;padding:0;opacity:.9;
}
.home-mini-card__bookmark svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.home-mini-card__bottom{min-width:0;margin-top:auto}
.home-mini-card__title{
margin:0 0 4px;font-size:16px;font-weight:800;color:#fff;
line-height:1.2;letter-spacing:-.2px;
display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden;
}
.home-mini-card__meta{
display:flex;align-items:center;flex-wrap:wrap;gap:6px;
font-size:11px;color:rgba(255,255,255,.88);
}
.home-mini-card__meta .news-mini-author-wrap,
.home-mini-card__meta .news-mini-author-initials{width:22px;height:22px}
.home-mini-card__meta .news-mini-author-name{font-weight:700;color:rgba(255,255,255,.95)}
.home-mini-card__meta-sep{opacity:.5}
.home-mini-card__body-oggi{
display:grid;grid-template-columns:auto 1fr;
grid-template-rows:auto auto;gap:4px 12px;align-items:end;
min-width:0;margin-top:auto;
}
.home-mini-card__date{
grid-row:1/span 2;display:flex;flex-direction:column;
align-items:center;justify-content:center;min-width:42px;line-height:1;
}
.home-mini-card__date-day{
font-size:28px;font-weight:800;color:#fff;letter-spacing:-.5px;
}
.home-mini-card__date-month{
font-size:11px;font-weight:800;color:rgba(255,255,255,.9);
letter-spacing:.6px;margin-top:2px;
}
.home-mini-card__copy{grid-column:2;min-width:0}
.home-mini-card__place{
margin:0;font-size:12px;color:rgba(255,255,255,.88);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.home-mini-card__info{
grid-column:1/-1;margin-top:4px;
display:flex;align-items:center;flex-wrap:wrap;gap:6px;
font-size:11px;font-weight:600;color:rgba(255,255,255,.92);
}
.home-mini-card__info-sep{opacity:.55}
.home-mini-card__live{
display:inline-flex;align-items:center;gap:5px;
padding:4px 8px 4px 5px;border-radius:999px;
background:rgba(0,0,0,.52);border:.5px solid rgba(255,59,48,.45);
flex-shrink:0;
}
.home-mini-card__live-label{
font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.45px;
color:#fff;line-height:1;
}
.home-mini-card__live-dot{position:relative;width:12px;height:12px;flex-shrink:0}
.home-mini-card__live-core{
position:absolute;left:50%;top:50%;
width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
background:#ff3b30;box-shadow:0 0 8px rgba(255,59,48,.9);
animation:home-mini-live-pulse 1.4s ease-in-out infinite;
}
.home-mini-card__live-ring{
position:absolute;inset:0;border-radius:50%;
border:2px solid rgba(255,59,48,.85);
animation:home-mini-live-wave 1.8s cubic-bezier(.25,.5,.35,1) infinite;
pointer-events:none;
}
.home-mini-card__live-ring--delay{animation-delay:.9s}
@keyframes home-mini-live-wave{
0%{transform:scale(.45);opacity:.95}
100%{transform:scale(2.5);opacity:0}
}
@keyframes home-mini-live-pulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.2)}
}
@media (prefers-reduced-motion:reduce){
.home-mini-card__live-core,
.home-mini-card__live-ring{animation:none}
.home-mini-card__live-ring{display:none}
}
/* --- Home: notizie immersive (legacy, non usato in home) ------------------ */
.news-strip{
display:flex;gap:10px;overflow-x:auto;
padding:4px 0 8px;
scroll-snap-type:x mandatory;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
touch-action:pan-x;
}
.news-strip::-webkit-scrollbar{display:none}
.news-immersive{
flex:0 0 220px;min-width:220px;max-width:240px;width:220px;
min-height:150px;position:relative;overflow:hidden;
border-radius:14px;cursor:pointer;
box-shadow:0 4px 14px rgba(0,0,0,.12);
scroll-snap-align:start;
transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.news-immersive:active{transform:scale(.985)}
.news-immersive__media{
position:absolute;inset:0;
background-size:cover;background-position:center;
background-repeat:no-repeat;
transition:transform .45s cubic-bezier(.2,.8,.2,1);
will-change:transform;
}
.news-immersive:hover .news-immersive__media,
.news-immersive:focus-visible .news-immersive__media{
transform:scale(1.03);
}
.news-immersive__overlay{
position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,
rgba(0,0,0,.05) 0%,
rgba(0,0,0,.15) 30%,
rgba(0,0,0,.72) 100%);
}
[data-theme="dark"] .news-immersive__overlay{
background:linear-gradient(180deg,
rgba(0,0,0,.12) 0%,
rgba(0,0,0,.28) 30%,
rgba(0,0,0,.82) 100%);
}
.news-immersive__inner{
position:relative;z-index:2;
display:flex;flex-direction:column;
justify-content:space-between;
height:100%;min-height:150px;padding:12px;
box-sizing:border-box;
}
.news-immersive__top{
display:flex;align-items:flex-start;
justify-content:space-between;gap:8px;
}
.news-immersive__badge{
font-size:10px;font-weight:800;
text-transform:uppercase;letter-spacing:.45px;
color:#fff;
padding:5px 10px;border-radius:6px;
border:none;
line-height:1.2;
box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.news-immersive__bookmark{
flex-shrink:0;width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
border:none;border-radius:50%;
background:rgba(255,255,255,.16);
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);
color:#fff;cursor:pointer;padding:0;
opacity:.9;
transition:background .2s,transform .15s;
}
.news-immersive__bookmark:active{transform:scale(.92)}
.news-immersive__bookmark svg{
width:18px;height:18px;
stroke:currentColor;fill:none;stroke-width:2;
}
.news-immersive__bottom{min-width:0}
.news-immersive__title{
margin:0 0 4px;font-size:16px;font-weight:800;
color:#fff;line-height:1.2;letter-spacing:-.2px;
display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden;
}
.news-immersive__meta{
display:flex;align-items:center;flex-wrap:wrap;gap:6px;
font-size:11px;color:rgba(255,255,255,.88);
}
.news-immersive__meta .news-mini-author-wrap,
.news-immersive__meta .news-mini-author-initials{
width:22px;height:22px;
}
.news-immersive__meta .news-mini-author-name{
font-weight:700;color:rgba(255,255,255,.95);
}
.news-immersive__meta-sep{opacity:.5}
.news-strip-dots{
display:flex;align-items:center;justify-content:center;
gap:6px;margin-top:10px;padding-bottom:4px;
}
.news-strip-dot{
width:6px;height:6px;border-radius:50%;
border:none;padding:0;cursor:pointer;
background:rgba(30,95,168,.25);
transition:transform .2s,background .2s;
}
.news-strip-dot.is-active{
background:var(--primary);
transform:scale(1.15);
}
@media (prefers-reduced-motion:reduce){
.news-immersive__media{transition:none}
.news-immersive:hover .news-immersive__media,
.news-immersive:focus-visible .news-immersive__media{
transform:none;
}
html[data-shell-tab="home"] .home-below-hero .section{animation:none}
}
/* --- Home: Cosa fare oggi (eventi) ---------------------------------------- */
.oggi-strip{
display:flex;gap:10px;overflow-x:auto;
padding:4px 0 8px;
scroll-snap-type:x mandatory;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
touch-action:pan-x;
}
.oggi-strip::-webkit-scrollbar{display:none}
.oggi-card{
flex:0 0 220px;min-width:220px;max-width:240px;width:220px;
min-height:150px;position:relative;overflow:hidden;
border-radius:14px;cursor:pointer;
box-shadow:0 4px 14px rgba(0,0,0,.12);
scroll-snap-align:start;
-webkit-tap-highlight-color:transparent;
}
/* No transform su :active: WebKit perde ::before (gradiente) e testo del overlay. */
.oggi-card:active{box-shadow:0 2px 10px rgba(0,0,0,.16)}
.oggi-card__media{
position:absolute;inset:0;z-index:0;
overflow:hidden;
}
.oggi-card__img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center;
display:block;
transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover){
.oggi-card:hover .oggi-card__img{transform:scale(1.03)}
}
.oggi-card:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.oggi-card:focus-visible .oggi-card__img{transform:none}
.oggi-card__media--fallback{
display:flex;align-items:center;justify-content:center;
}
.oggi-card__emoji{
font-size:48px;opacity:.35;line-height:1;
}
/* Sfumatura sullo stesso layer del testo (evita sparizioni in scroll orizzontale WebKit). */
.oggi-card__overlay{display:none}
.oggi-card__inner{
position:relative;z-index:2;
display:flex;flex-direction:column;
justify-content:space-between;
height:100%;min-height:150px;padding:12px;box-sizing:border-box;
}
.oggi-card__inner::before{
content:"";
position:absolute;
top:-12px;right:-12px;bottom:-12px;left:-12px;
z-index:0;pointer-events:none;border-radius:14px;
background:linear-gradient(180deg,
rgba(0,0,0,.05) 0%,
rgba(0,0,0,.20) 35%,
rgba(0,0,0,.82) 100%);
}
.oggi-card__inner > *{
position:relative;
z-index:1;
}
.oggi-card__top{
display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
}
.oggi-card__top-left{
display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;
}
.oggi-card--live .oggi-card__badge{
box-shadow:0 0 0 1px rgba(255,59,48,.35),0 2px 8px rgba(0,0,0,.15);
}
.oggi-card__live{
display:inline-flex;align-items:center;gap:5px;
padding:4px 8px 4px 5px;border-radius:999px;
background:rgba(0,0,0,.52);
border:.5px solid rgba(255,59,48,.45);
flex-shrink:0;
}
.oggi-card__live-label{
font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.45px;
color:#fff;line-height:1;
}
.oggi-card__live-dot{
position:relative;width:12px;height:12px;flex-shrink:0;
}
.oggi-card__live-core{
position:absolute;left:50%;top:50%;
width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
background:#ff3b30;
box-shadow:0 0 8px rgba(255,59,48,.9);
animation:oggi-live-pulse 1.4s ease-in-out infinite;
}
.oggi-card__live-ring{
position:absolute;inset:0;border-radius:50%;
border:2px solid rgba(255,59,48,.85);
animation:oggi-live-wave 1.8s cubic-bezier(.25,.5,.35,1) infinite;
pointer-events:none;
}
.oggi-card__live-ring--delay{animation-delay:.9s}
@keyframes oggi-live-wave{
0%{transform:scale(.45);opacity:.95}
100%{transform:scale(2.5);opacity:0}
}
@keyframes oggi-live-pulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.2)}
}
@media (prefers-reduced-motion:reduce){
.oggi-card__live-core,
.oggi-card__live-ring{animation:none}
.oggi-card__live-ring{display:none}
}
.oggi-card__badge{
font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
color:#fff;padding:5px 10px;border-radius:999px;
background:rgba(0,0,0,.48);
border:.5px solid rgba(255,255,255,.28);
line-height:1.2;
box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.oggi-card__bookmark{
flex-shrink:0;width:32px;height:32px;border:none;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.38);
color:#fff;cursor:pointer;padding:0;opacity:.9;
}
.oggi-card__bookmark svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.oggi-card__body{
display:grid;
grid-template-columns:auto 1fr;
grid-template-rows:auto auto;
gap:4px 12px;align-items:end;min-width:0;
}
.oggi-card__date{grid-row:1/span 2}
.oggi-card__copy{grid-column:2}
.oggi-card__info{
grid-column:1/-1;
margin-top:4px;
}
.oggi-card__date{
flex-shrink:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;
min-width:42px;line-height:1;
}
.oggi-card__date-day{
font-size:28px;font-weight:800;color:#fff;letter-spacing:-.5px;
}
.oggi-card__date-month{
font-size:11px;font-weight:800;color:rgba(255,255,255,.9);
letter-spacing:.6px;margin-top:2px;
}
.oggi-card__copy{flex:1;min-width:0}
.oggi-card__title{
margin:0 0 4px;font-size:15px;font-weight:800;color:#fff;
line-height:1.25;letter-spacing:-.2px;
display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden;
}
.oggi-card__place{
margin:0;font-size:12px;color:rgba(255,255,255,.88);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.oggi-card__info{
display:flex;align-items:center;flex-wrap:wrap;gap:6px;
font-size:11px;font-weight:600;color:rgba(255,255,255,.92);
}
.oggi-card__info-sep{opacity:.55}
.oggi-strip-dots{
display:flex;align-items:center;justify-content:center;
gap:6px;margin-top:8px;padding-bottom:6px;
}
.oggi-strip-dot{
width:6px;height:6px;border-radius:50%;border:none;padding:0;cursor:pointer;
background:rgba(30,95,168,.25);
transition:transform .2s,background .2s;
}
.oggi-strip-dot.is-active{background:var(--primary);transform:scale(1.15)}
/* --- News / article detail (stile blog) ----------------------------------- */
.article-hero{
position:relative;overflow:hidden;
min-height:240px;
color:#fff;
display:flex;flex-direction:column;justify-content:flex-end;
padding:20px 18px 20px;
}
.article-hero::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.55) 100%);
pointer-events:none;
}
.article-hero-cat{
position:relative;z-index:2;align-self:flex-start;
padding:5px 10px;border-radius:6px;
font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.45px;
box-shadow:0 2px 8px rgba(0,0,0,.2);
border:none;
}
.article-hero-emoji{
position:absolute;top:16px;right:16px;z-index:2;
width:76px;height:76px;border-radius:22px;
background:rgba(255,255,255,.18);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.28);
display:flex;align-items:center;justify-content:center;
font-size:42px;box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.article-hero-info{position:relative;z-index:2;margin-top:14px;max-width:calc(100% - 8px);min-width:0}
.article-hero-title{
font-size:24px;font-weight:800;line-height:1.2;letter-spacing:-.3px;
text-shadow:0 1px 3px rgba(0,0,0,.3);
overflow-wrap:anywhere;word-break:break-word;
}
/* Card con autore e meta pubblicazione */
.article-meta-card{
margin:-14px 16px 0;position:relative;z-index:3;
background:var(--surface);border:.5px solid var(--border);
border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
padding:12px 14px;
display:flex;flex-direction:column;gap:10px;
min-width:0;max-width:100%;
}
.article-meta-author-stack{display:flex;flex-direction:column;gap:0;min-width:0}
.article-meta-author-row{display:flex;align-items:flex-start;gap:12px;min-width:0}
.article-meta-card .article-meta-author-row .news-avatar{width:42px;height:42px;font-size:14px}
.article-meta-author-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.article-meta-name-row{
display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
min-width:0;
}
.article-meta-entity-name{
font-size:13px;font-weight:800;color:var(--text);
line-height:1.25;min-width:0;flex:1;overflow-wrap:anywhere;word-break:break-word;
}
.article-meta-datetime{
font-size:11.5px;font-weight:600;color:var(--text2);
flex-shrink:0;white-space:nowrap;font-variant-numeric:tabular-nums;
line-height:1.25;margin-top:1px;
}
.article-meta-entity-role{color:var(--text3)}
.article-meta-stats{
display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
padding-top:10px;margin-top:8px;border-top:.5px dashed var(--border);
font-size:11.5px;color:var(--text3);
}
.article-meta-stat{display:inline-flex;align-items:center;gap:6px}
.article-meta-svg-ico{
display:block;width:16px;height:16px;flex-shrink:0;
object-fit:contain;
}
.article-meta-stat-val{
font-weight:600;color:var(--text2);
min-width:0;overflow-wrap:anywhere;word-break:break-word;
}
[data-theme="dark"] .article-meta-svg-ico{
opacity:.92;
filter:brightness(0) invert(0.88);
}
.article-meta-author-tap{outline-offset:2px;border-radius:var(--radius-md)}
/* Corpo articolo: card coerente con .article-meta-card */
.article-body{
margin:12px 16px 0;
background:var(--surface);
border:.5px solid var(--border);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
padding:18px 18px 14px;
min-width:0;max-width:calc(100% - 32px);
overflow-wrap:anywhere;word-break:break-word;
}
.article-lead{
font-size:15px;line-height:1.6;color:var(--text);
font-weight:600;letter-spacing:-.05px;
margin-bottom:14px;
overflow-wrap:anywhere;word-break:break-word;
}
.article-par{
font-size:14px;line-height:1.65;color:var(--text);
margin-top:12px;
overflow-wrap:anywhere;word-break:break-word;
}
.article-par::first-letter{
/* nessuna capolettera su mobile per non disturbare la lettura */
}
.article-quote{
position:relative;
margin:18px 0;padding:16px 18px 14px 34px;
background:var(--primary-light);
border-left:4px solid var(--primary);
border-radius:var(--radius-md);
font-size:14.5px;font-style:italic;line-height:1.55;
color:var(--text);
overflow-wrap:anywhere;word-break:break-word;
}
.article-quote-mark{
position:absolute;left:10px;top:2px;
font-size:40px;line-height:1;color:var(--primary);
font-family:Georgia,serif;opacity:.65;
}
.article-body--blocks .article-rich{
margin-top:12px;
min-width:0;
max-width:100%;
overflow-wrap:anywhere;
word-break:break-word;
}
.article-body--blocks .article-rich:first-child{margin-top:0}
/* HTML staff dentro il corpo: link lunghi e contenuti inline non superano la larghezza schermo */
.article-body--blocks .article-rich a{overflow-wrap:anywhere;word-break:break-word}
.article-body--blocks .article-rich img,.article-body--blocks .article-rich video{max-width:100%;height:auto}
.article-body--blocks .article-rich p{overflow-wrap:inherit;word-break:inherit}
/* Galleria articolo: miniatura centrata + didascalia (solo immagine, mai URL in chiaro) */
.article-body--blocks .article-block-gallery.treby-story-gallery--single{
display:flex;justify-content:center;
}
.article-body--blocks .article-gallery-figure{
margin:0 auto 14px;max-width:min(100%,300px);
}
.article-body--blocks .article-gallery-img{
width:100%;max-height:168px;object-fit:cover;
border-radius:var(--radius-lg);border:.5px solid var(--border);
display:block;background:var(--surface2);
}
.article-body--blocks .article-gallery-caption{
margin-top:6px;padding:0 2px;font-size:12px;line-height:1.4;
color:var(--text2);text-align:center;
}
.article-body--blocks .treby-story-gallery--carousel .article-gallery-slide{
padding:8px 0 12px;box-sizing:border-box;
/* Riempie l’altezza comune (max degli slide): evita bande vuote sotto foto basse. */
display:flex;flex-direction:column;min-height:0;align-self:stretch;
}
.article-body--blocks .treby-story-gallery--carousel .article-gallery-figure{
flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
max-width:100%;width:100%;margin-left:auto;margin-right:auto;
max-height:min(52vh, 380px);
}
.article-body--blocks .treby-story-gallery--carousel .article-gallery-img{
flex:1 1 auto;min-height:0;width:100%;object-fit:cover;display:block;
border-radius:var(--radius-lg);border:.5px solid var(--border);
background:var(--surface2);
}
.article-body--blocks .treby-story-gallery--carousel .article-gallery-caption{
flex-shrink:0;
}
.article-quote--block{position:relative;margin:18px 0;overflow-wrap:anywhere;word-break:break-word}
.article-quote-attribution{
display:block;margin-top:10px;font-size:12.5px;font-style:normal;
color:var(--text3);text-align:right;
}
.article-block-figure{margin:16px 0}
.article-block-img{
width:100%;max-height:320px;object-fit:cover;border-radius:var(--radius-md);
border:.5px solid var(--border);background:var(--surface2);
}
.article-block-caption{
margin-top:8px;font-size:12.5px;color:var(--text3);line-height:1.45;
}
.article-block-video{
position:relative;margin:16px 0;padding-bottom:56.25%;
height:0;overflow:hidden;border-radius:var(--radius-md);
border:.5px solid var(--border);background:#000;
}
.article-block-video-frame{
position:absolute;top:0;left:0;width:100%;height:100%;border:0;
}
.article-block-native-video{width:100%;max-height:360px;border-radius:var(--radius-md)}
.article-block-video-fallback{font-size:13px;word-break:break-all}
/* Sezione tag (card allineata a meta / condivisione) */
.article-tags{
margin:8px 16px 12px;
padding:12px 14px;
background:var(--surface);
border:.5px solid var(--border);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
}
.article-tags-label{
font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
color:var(--text3);font-weight:800;margin-bottom:10px;
}
.article-tags-list{display:flex;flex-wrap:wrap;gap:8px}
.article-tag{
font-size:12px;font-weight:700;
background:var(--surface2);color:var(--text);
padding:6px 12px;border-radius:var(--radius-md);
border:.5px solid var(--border);
box-shadow:var(--shadow-sm);
}
/* Azioni condivisione */
.article-share{
margin:6px 16px 10px;padding:12px 14px;
background:var(--surface);border:.5px solid var(--border);
border-radius:var(--radius-lg);
}
.article-share-label{
font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
color:var(--text3);font-weight:800;margin-bottom:10px;
}
.article-share-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.article-share-btn{
appearance:none;border:.5px solid var(--border);
background:var(--surface2);color:var(--text);
padding:8px 12px;border-radius:var(--radius-md);
display:inline-flex;align-items:center;gap:6px;cursor:pointer;
font-size:12.5px;font-weight:700;
transition:background .15s, transform .1s;
}
.article-share-btn:active{transform:scale(.97)}
.article-share-btn:hover{
background:var(--primary-light);color:var(--primary);border-color:var(--primary-light);
}
.article-share-ico{
font-size:14px;
display:inline-flex;
align-items:center;
justify-content:center;
}
.article-share-ico-img{
width:20px;
height:20px;
display:block;
object-fit:contain;
pointer-events:none;
flex-shrink:0;
}
/* Articoli correlati */
.article-related{padding:6px 16px 10px}
.article-related-title{
font-size:13px;font-weight:800;color:var(--text);
text-transform:uppercase;letter-spacing:.4px;
margin:4px 2px 10px;
display:flex;align-items:center;gap:8px;
}
.article-related-title::before{
content:"";width:4px;height:16px;background:var(--primary);border-radius:2px;
}
.article-related-list{display:flex;flex-direction:column;gap:10px}
.article-related-card{
display:flex;gap:10px;padding:10px;
background:var(--surface);border:.5px solid var(--border);
border-radius:var(--radius-md);cursor:pointer;
transition:transform .1s, box-shadow .2s;
}
.article-related-card:active{transform:scale(.99)}
.article-related-card:hover{box-shadow:0 4px 10px rgba(15,23,42,.06)}
.article-related-thumb{
width:64px;height:64px;flex-shrink:0;border-radius:12px;
display:flex;align-items:center;justify-content:center;
font-size:28px;color:#fff;
}
.article-related-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.article-related-cat{
font-size:10px;font-weight:800;color:var(--primary);
text-transform:uppercase;letter-spacing:.5px;
}
.article-related-title-s{
font-size:13px;font-weight:700;color:var(--text);line-height:1.3;margin-top:3px;
display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.article-related-meta{font-size:10.5px;color:var(--text3);margin-top:4px}
/* Pulsante "Torna alle notizie" in fondo all'articolo */
.article-back-wrap{padding:8px 16px 20px}
/* --- Servizi hub (tab Servizi) -------------------------------------------- */
html[data-shell-tab="services"] section.view[data-view="services"],
html[data-shell-tab="services"] section.view[data-view="services"] .scroll-area.services-page{
background:#f4f5f7;
}
[data-theme="dark"] html[data-shell-tab="services"] section.view[data-view="services"],
[data-theme="dark"] html[data-shell-tab="services"] section.view[data-view="services"] .scroll-area.services-page{
background:var(--bg);
}
/* Non usare shorthand padding:0 0 24px — azzerava il padding-bottom della .scroll-area per la bottom-nav */
.scroll-area.services-page{
padding-bottom:calc(108px + var(--nav-float-bottom) + var(--android-gesture-nav-pad, 0px) + env(safe-area-inset-bottom, 0px));
}
.services-list-panel{
padding-top:0;
padding-bottom:8px;
}
.services-list-panel .filter-row--services{
padding-top:4px;
}
.services-page__head{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:12px 18px 8px;
min-height:52px;
}
.services-page__title{
margin:0;flex:1;min-width:0;
font-size:26px;font-weight:800;line-height:1.2;color:var(--text);letter-spacing:-.02em;
}
.services-town-picker{
flex-shrink:0;min-height:44px;max-width:46%;
display:inline-flex;align-items:center;gap:6px;
align-self:center;
padding:10px 14px;border-radius:999px;
background:var(--surface);border:.5px solid var(--border);
box-shadow:0 4px 14px rgba(8,38,78,.06);
font-size:13px;font-weight:700;color:var(--primary);cursor:pointer;
}
.services-town-picker__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.services-town-picker__chev{width:16px;height:16px;flex-shrink:0;opacity:.7}
.search-bar--services{
margin:8px 18px 12px;height:52px;padding:0 18px;
border-radius:999px;background:#fff;border:none;
box-shadow:0 4px 18px rgba(8,38,78,.07);
display:flex;align-items:center;gap:12px;
}
[data-theme="dark"] .search-bar--services{background:var(--surface);box-shadow:0 4px 18px rgba(0,0,0,.2)}
.search-bar--services svg{width:20px;height:20px;stroke:var(--text3);stroke-width:2;fill:none;flex-shrink:0}
.search-bar--services input{
flex:1;border:none;background:transparent;font-size:15px;font-weight:500;color:var(--text);min-height:44px;
}
.search-bar--services input::placeholder{color:var(--text3);font-weight:400}
.filter-row--services{
gap:10px;padding:0 18px 14px;
scrollbar-width:none;
}
.filter-row--services::-webkit-scrollbar{display:none}
.services-dedicated-section .services-hub-section{padding-top:4px}
.services-hub-section{padding:0 18px 10px}
.services-hub-section--categories{padding-top:8px}
.services-hub-section__title{margin:0;font-size:18px;font-weight:800;color:var(--text)}
.services-hub-section__sub{margin:4px 0 0;font-size:13px;color:var(--text3);line-height:1.35}
.svc-dedicated-grid{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
padding:0 18px 20px;
}
@media (max-width:340px){
.svc-dedicated-grid{grid-template-columns:1fr}
}
.svc-dedicated-card{
display:flex;align-items:center;gap:12px;
padding:16px 14px;min-height:0;border-radius:18px;border:none;
cursor:pointer;text-align:left;
box-shadow:0 4px 14px rgba(8,38,78,.06);
transition:transform .12s,box-shadow .2s;
}
.svc-dedicated-card:active{transform:scale(.985)}
.svc-dedicated-card--blue{background:#eef6ff}
.svc-dedicated-card--amber{background:#fff8ed}
.svc-dedicated-card--green{background:#f0faf3}
.svc-dedicated-card--purple{background:#f5f3ff}
.svc-dedicated-card__body{flex:1;min-width:0}
.svc-dedicated-card__title{
font-size:15px;font-weight:700;color:var(--text);line-height:1.25;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.svc-dedicated-card__desc{
margin-top:3px;font-size:12px;color:var(--text3);line-height:1.35;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.svc-dedicated-card__go{
flex-shrink:0;width:24px;height:24px;display:block;
background-color:var(--text3);
-webkit-mask:url(/img/servizi/arrow-sm-right.svg) no-repeat center/contain;
mask:url(/img/servizi/arrow-sm-right.svg) no-repeat center/contain;
}
.svc-dedicated-card__go--blue{background-color:#1d72d2}
.svc-dedicated-card__go--amber{background-color:#d4921a}
.svc-dedicated-card__go--green{background-color:#3da86a}
.svc-dedicated-card__go--purple{background-color:#8b5cf6}
.svc-dedicated-empty{
grid-column:1/-1;padding:20px 16px;text-align:center;font-size:13px;color:var(--text3);
background:var(--surface);border-radius:20px;border:.5px dashed var(--border);
}
.svc-category-panel{
margin:0 18px 20px;background:var(--surface);border-radius:24px;
box-shadow:0 6px 22px rgba(8,38,78,.07);overflow:hidden;
border:.5px solid color-mix(in srgb,var(--border) 70%,transparent);
}
.svc-category-row{
display:flex;align-items:center;gap:14px;min-height:78px;padding:14px 16px;
width:100%;border:none;background:transparent;cursor:pointer;text-align:left;
}
.svc-category-row:not(:last-child){border-bottom:.5px solid var(--border)}
.svc-category-row:active{background:color-mix(in srgb,var(--primary) 6%,transparent)}
.svc-category-row__ico{
width:44px;height:44px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:20px;
}
.svc-category-row__ico--orange{background:#fff0e6}
.svc-category-row__ico--blue{background:#e8f2fc}
.svc-category-row__ico--pink{background:#fce8f2}
.svc-category-row__ico--green{background:#e8f8ef}
.svc-category-row__ico--purple{background:#f3ecfc}
.svc-category-row__ico--teal{background:#e6f7f5}
.svc-category-row__body{flex:1;min-width:0}
.svc-category-row__title{font-size:15px;font-weight:800;color:var(--text)}
.svc-category-row__desc{font-size:12px;color:var(--text3);margin-top:2px;line-height:1.3}
.svc-category-row__chev{
width:28px;height:28px;flex-shrink:0;color:var(--text3);
display:flex;align-items:center;justify-content:center;
}
.svc-category-row__chev svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.services-town-sheet{
position:fixed;inset:0;z-index:1200;
display:flex;align-items:center;justify-content:center;
padding:20px 18px;
padding-bottom:calc(20px + 84px + var(--nav-float-bottom) + var(--android-gesture-nav-pad, 0px) + env(safe-area-inset-bottom, 0px));
}
.services-town-sheet.hidden{display:none}
.services-town-sheet__backdrop{position:absolute;inset:0;background:rgba(8,20,40,.45)}
.services-town-sheet__panel{
position:relative;width:min(100%,400px);
background:var(--surface);
box-shadow:0 12px 40px rgba(8,38,78,.18);
display:flex;flex-direction:column;min-height:0;
}
/* ≤3 paesi: sheet dal basso, compatto */
.services-town-sheet--few{
align-items:flex-end;justify-content:center;
padding:0 10px;
padding-bottom:calc(10px + var(--nav-float-bottom) + var(--android-gesture-nav-pad, 0px) + env(safe-area-inset-bottom, 0px));
}
.services-town-sheet--few .services-town-sheet__panel{
width:100%;max-width:480px;max-height:min(50vh,360px);
border-radius:20px 20px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
overflow:auto;
}
/* >3 paesi: dialogo centrato, lista scrollabile */
.services-town-sheet--many{
align-items:center;justify-content:center;
}
.services-town-sheet--many .services-town-sheet__panel{
max-height:min(72vh,480px);
border-radius:24px;padding:0;overflow:hidden;
}
.services-town-sheet--many .services-town-sheet__title{
margin:0;padding:18px 18px 10px;flex-shrink:0;
}
.services-town-sheet--many .services-town-sheet__list{
overflow-y:auto;-webkit-overflow-scrolling:touch;
flex:1;min-height:0;max-height:min(56vh,380px);
padding:4px 14px calc(16px + env(safe-area-inset-bottom, 0px));
scrollbar-width:thin;
}
.services-town-sheet--few .services-town-sheet__title{margin:0 0 12px;font-size:17px;font-weight:800}
.services-town-sheet--few .services-town-sheet__list{display:flex;flex-direction:column;gap:6px}
.services-town-sheet__title{margin:0 0 12px;font-size:17px;font-weight:800}
.services-town-sheet__list{display:flex;flex-direction:column;gap:6px}
.services-town-sheet__item{
min-height:48px;padding:12px 14px;border-radius:14px;border:.5px solid var(--border);
background:var(--bg);font-size:15px;font-weight:600;text-align:left;cursor:pointer;width:100%;
}
.services-town-sheet__item.is-active{border-color:var(--primary);color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface))}
/* --- Servizi / card ------------------------------------------------------- */
.service-list{padding:4px 16px 12px;display:flex;flex-direction:column;gap:12px}
.service-list--home{
padding:0 16px 14px;gap:14px;
}
.service-card{
position:relative;
background:var(--surface);
border:.5px solid var(--border);
border-radius:var(--radius-lg);
padding:12px;display:flex;gap:12px;
cursor:pointer;transition:transform .1s,box-shadow .2s;
box-shadow:0 2px 10px rgba(8,38,78,.04);
}
.service-card--home{
border-radius:28px;
padding:16px;gap:14px;
box-shadow:0 6px 24px rgba(8,38,78,.08);
}
.service-card:active{transform:scale(.98)}
.service-card--home .service-cover{
width:88px;height:88px;border-radius:20px;
}
.service-card--home .service-name{font-size:15px}
.service-card--home .service-cat{font-size:11px;letter-spacing:.5px}
.service-card--home .meta-pill{
font-size:11px;padding:4px 10px;
}
.service-card--home .tag{
font-size:11px;padding:4px 10px;
}
.service-card--home{
align-items:center;
}
.service-card--home .service-card-cta{
flex-shrink:0;align-self:flex-end;
width:40px;height:40px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(145deg,var(--primary-soft),var(--primary));
color:#fff;border:none;cursor:pointer;
box-shadow:0 6px 18px rgba(30,95,168,.35);
margin-left:4px;
transition:transform .15s,box-shadow .2s;
}
.service-card--home .service-card-cta:active{transform:scale(.92)}
.service-card--home .service-card-cta svg{
width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;
}
/* Lista catalogo Servizi — card premium orizzontale */
.service-list:not(.service-list--home){
gap:0;padding-bottom:8px;
}
.service-card--catalog{
align-items:center;
background:#fff;
border:none;
border-radius:23px;
box-shadow:0 8px 28px rgba(15,23,42,.08);
gap:12px;
margin-bottom:14px;
padding:13px;
}
.service-card--catalog:active{
transform:scale(.98);
box-shadow:0 6px 22px rgba(15,23,42,.07);
}
.service-card--catalog .service-card__media{
align-items:center;
border-radius:18px;
color:#fff;
display:flex;
flex-shrink:0;
font-size:34px;
height:110px;
justify-content:center;
overflow:hidden;
width:110px;
}
.service-card--catalog .service-card__media--img{
background:var(--surface2);
padding:0;
}
.service-card--catalog .service-card__media-img{
border-radius:18px;
display:block;
height:100%;
object-fit:cover;
width:100%;
}
.service-card--catalog .service-card__body{
display:flex;
flex:1;
flex-direction:column;
gap:4px;
min-width:0;
}
.service-card--catalog .service-card__cat{
color:#6B7280;
font-size:11px;
font-weight:800;
letter-spacing:.6px;
line-height:1.2;
text-transform:uppercase;
}
.service-card--catalog .service-card__name{
color:#111827;
font-size:17px;
font-weight:800;
line-height:1.25;
}
.service-card--catalog .service-card__status-row{
align-items:center;
display:flex;
flex-wrap:wrap;
gap:8px;
}
.service-card--catalog .service-card__status{
font-size:13px;
font-weight:700;
line-height:1.3;
}
.service-card--catalog .service-card__status--open{
color:var(--success,#16a34a);
}
.service-card--catalog .service-card__status--closed{
color:var(--danger,#dc2626);
}
.service-card--catalog .service-card__distance{
align-items:center;
color:#6B7280;
display:inline-flex;
font-size:13px;
font-weight:600;
gap:4px;
line-height:1.3;
}
.service-card--catalog .service-card__distance-ico{
display:block;
flex-shrink:0;
height:14px;
width:14px;
}
.service-card--catalog .service-card__meta{
align-items:center;
color:#6B7280;
display:flex;
flex-wrap:wrap;
font-size:13px;
font-weight:600;
gap:6px;
line-height:1.3;
}
.service-card--catalog .service-card__meta-sep{
color:#9CA3AF;
font-weight:700;
}
.service-card--catalog .service-card__pills{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:4px;
}
.service-card--catalog .service-card__pill{
background:#EAF3FF;
border-radius:999px;
color:#1E5FA8;
font-size:11px;
font-weight:700;
line-height:1.2;
padding:5px 10px;
white-space:nowrap;
}
.service-card--catalog .service-card__pill--more{
background:#EAF3FF;
color:#1E5FA8;
}
.service-card--catalog .service-card__fav{
align-self:center;
background:transparent;
border:1.5px solid #D1D5DB;
border-radius:50%;
box-shadow:none;
color:#6B7280;
flex-shrink:0;
font-size:18px;
height:40px;
line-height:1;
margin:0;
position:static;
width:40px;
}
.service-card--catalog .service-card__fav--on{
background:transparent;
border-color:var(--danger,#dc2626);
color:var(--danger,#dc2626);
}
.service-cover{
width:74px;height:74px;flex-shrink:0;border-radius:14px;
display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;
}
/* Variante con immagine logo caricata da staff: niente colore di fondo, l'![]()
riempie il box */
.service-cover--img{background:var(--surface2);overflow:hidden;padding:0}
.service-cover-img{
width:100%;height:100%;object-fit:cover;display:block;border-radius:14px;
}
.service-body{flex:1;min-width:0}
.service-name{font-size:14px;font-weight:800;color:var(--text)}
.service-cat{font-size:11px;color:var(--text3);margin-top:2px;text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.service-meta{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.meta-pill{
font-size:11px;color:var(--text2);
display:inline-flex;align-items:center;gap:3px;
background:var(--surface2);padding:3px 8px;border-radius:var(--radius-pill);
}
.meta-pill.accent{background:var(--success-bg);color:var(--success)}
/* Pill stato locale (lista servizi / card): verde aperto, rosso chiuso — l'hero usa regole più specifiche sotto */
.meta-pill.open{background:var(--success-bg);color:var(--success);font-weight:700}
.meta-pill.closed{background:var(--danger-bg);color:var(--danger);font-weight:700}
.service-tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.tag{
font-size:10px;font-weight:700;
background:var(--primary-light);color:var(--primary);
padding:3px 8px;border-radius:var(--radius-pill);
}
/* Opzioni ristorante (lista + dettaglio): ordini app, consegna, asporto, prenotazione */
.service-features{
display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center;
}
.service-feature-chip{
font-size:10px;font-weight:700;line-height:1.2;
background:var(--surface2);color:var(--text2);
border:1px solid var(--border2);
padding:4px 9px;border-radius:var(--radius-pill);
}
.service-feature-chip--app{border-color:var(--primary-light);background:var(--primary-light);color:var(--primary)}
.service-feature-chip--delivery{color:var(--success);border-color:rgba(21,128,61,.35);background:rgba(21,128,61,.08)}
.service-feature-chip--takeaway{color:var(--text)}
.service-feature-chip--book{color:var(--primary);border-color:var(--primary-light);background:var(--primary-light)}
/* --- Bottone primario ----------------------------------------------------- */
.btn{
appearance:none;border:none;cursor:pointer;
font-weight:800;font-size:14px;border-radius:var(--radius-md);
padding:14px 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
transition:transform .1s,background .15s;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-primary.btn-disabled,.btn-primary:disabled{opacity:.45;pointer-events:none;cursor:not-allowed}
.btn-ghost{background:var(--surface2);color:var(--text);border:.5px solid var(--border2)}
.btn-secondary{
background:var(--surface);color:var(--primary);border:1.5px solid var(--primary);
}
.btn-secondary:hover{background:rgba(30,95,168,.08)}
.btn-sm{padding:8px 12px;font-size:13px;border-radius:var(--radius-sm)}
.btn-block{width:100%}
/* --- Detail view (hero ristorante) ---------------------------------------- */
.detail-hero{
height:240px;position:relative;overflow:hidden;
background:linear-gradient(135deg,var(--primary-soft),var(--primary-strong));
color:#fff;
display:flex;flex-direction:column;justify-content:flex-end;
padding:16px 16px 14px;
}
/* Overlay scuro in basso per leggibilità del testo */
.detail-hero::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.05) 20%,rgba(0,0,0,.55) 100%);
pointer-events:none;
}
.detail-hero .back-float{position:absolute;top:12px;left:12px;z-index:3}
/* Badge emoji in alto a destra (vetro smerigliato) */
.detail-hero-badge{
position:absolute;top:14px;right:14px;z-index:2;
width:72px;height:72px;border-radius:20px;
background:rgba(255,255,255,.18);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.28);
display:flex;align-items:center;justify-content:center;
font-size:40px;box-shadow:0 6px 16px rgba(0,0,0,.15);
}
/* Variante badge con logo immagine: l'![]()
riempie tutto il box, niente vetro */
.detail-hero-badge--img{padding:0;overflow:hidden;background:rgba(255,255,255,.92)}
.detail-hero-badge-img{
width:100%;height:100%;object-fit:cover;display:block;border-radius:20px;
}
/* Hero con immagine di sfondo: niente gradient di default, già impostato via inline `background` */
.detail-hero--with-img{background-position:center;background-size:cover}
/* Blocco testuale dell'hero: nome, sottotitolo, meta-pill */
.detail-hero-info{position:relative;z-index:2;max-width:calc(100% - 90px)}
/* Con cuore sulla riga titolo: senza questa regola la colonna resta stretta (margine per il badge) e il pulsante non allinea al bordo destro della card */
.detail-hero--has-fav .detail-hero-info{max-width:100%}
.detail-hero-title{
font-size:24px;font-weight:800;letter-spacing:-.3px;line-height:1.15;
text-shadow:0 1px 3px rgba(0,0,0,.25);
margin:0;
}
.detail-hero-title-row{
display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
width:100%;min-width:0;
}
.detail-hero-title-row .detail-hero-title{flex:1;min-width:0}
.detail-hero-sub{font-size:13px;opacity:.95;margin-top:3px;line-height:1.35}
.detail-hero__fav{
position:static !important;top:auto !important;right:auto !important;
flex-shrink:0;width:44px;height:44px;margin-top:0;
z-index:3;
}
.detail-hero-meta{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
/* Pill dentro l'hero: vetro su gradiente scuro, leggibile in bianco */
.detail-hero-meta .meta-pill{
background:rgba(255,255,255,.18);color:#fff;
border:1px solid rgba(255,255,255,.25);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
font-weight:700;
}
.detail-hero-meta .meta-pill.open{background:rgba(21,128,61,.75);border-color:transparent}
.detail-hero-meta .meta-pill.closed{background:rgba(185,28,28,.75);border-color:transparent}
/* Card informativa compatta sotto l'hero (indirizzo/orari/telefono) */
.detail-info-card{
margin:14px 16px 4px;padding:4px 14px;
background:var(--surface);border:.5px solid var(--border);
border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.detail-features-block{
margin:12px 16px 4px;padding:12px 14px;
background:var(--surface);border:.5px solid var(--border);
border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.detail-features-title{
margin:0 0 10px;font-size:12px;font-weight:800;
text-transform:uppercase;letter-spacing:.04em;color:var(--text3);
}
.detail-features-block .service-features{margin-top:0}
/* --- Altri servizi dello stesso ente -------------------------------------
Sezione in fondo al dettaglio servizio: mostra mini-card cliccabili degli
altri servizi offerti dallo stesso ente (publisher). Stile coerente con
`.detail-features-block` (card neutra) e `.service-card` per la mini-card. */
.detail-other-services-block{
margin:12px 16px 16px;padding:12px 14px;
background:var(--surface);border:.5px solid var(--border);
border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.detail-other-services-list{
display:flex;flex-direction:column;gap:8px;margin-top:4px;
}
.detail-other-service-card{
display:flex;gap:10px;align-items:center;
padding:8px;border:.5px solid var(--border);border-radius:var(--radius-md);
background:var(--surface);cursor:pointer;transition:transform .1s, background .15s;
}
.detail-other-service-card:active{transform:scale(.985)}
.detail-other-service-card:hover{background:var(--surface2)}
.detail-other-service-cover{
width:48px;height:48px;flex-shrink:0;border-radius:12px;
display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;
}
.detail-other-service-cover--img{background:var(--surface2);overflow:hidden;padding:0}
.detail-other-service-cover-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px}
.detail-other-service-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.detail-other-service-cat{
font-size:10px;color:var(--text3);text-transform:uppercase;
letter-spacing:.4px;font-weight:700;
}
.detail-other-service-name{
font-size:13px;font-weight:800;color:var(--text);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.detail-other-service-sub{
font-size:12px;color:var(--text2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.detail-other-service-meta{display:flex;align-items:center;gap:6px;margin-top:2px;flex-wrap:wrap}
.info-row{
display:flex;align-items:center;gap:12px;padding:10px 2px;
border-bottom:.5px solid var(--border);font-size:13px;color:var(--text);
}
.info-row:last-child{border:none}
.info-ico{
font-size:18px;flex-shrink:0;width:28px;height:28px;
display:flex;align-items:center;justify-content:center;
background:var(--surface2);border-radius:8px;
}
.info-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.info-value{
font-size:13px;font-weight:600;color:var(--text);line-height:1.35;word-break:break-word;
}
.info-row svg{width:16px;height:16px;stroke:var(--text3);stroke-width:2;fill:none;flex-shrink:0}
.info-row .info-row-ico-img{
width:18px;height:18px;object-fit:contain;display:block;flex-shrink:0;
}
/* Notizie/articolo usano ancora .detail-body per retrocompat */
.detail-body{padding:16px}
/* --- Descrizione estesa servizio (blocchi: HTML + galleria / carosello) --- */
.treby-service-story{
margin:12px 16px 8px;padding:14px;
background:var(--surface);border:.5px solid var(--border);
border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.treby-story-richtext{
font-size:14px;line-height:1.55;color:var(--text);margin-bottom:14px;
min-width:0;max-width:100%;
overflow-wrap:anywhere;word-break:break-word;
}
.treby-service-story .treby-story-richtext:last-child{margin-bottom:0}
.treby-story-richtext a{overflow-wrap:anywhere;word-break:break-word}
.treby-story-richtext p{margin:0 0 10px}
.treby-story-richtext p:last-child{margin-bottom:0}
.treby-story-richtext ul{margin:6px 0 10px;padding-left:1.2rem}
.treby-story-gallery{margin:12px 0 0}
.treby-story-gallery--single .treby-story-img{
width:100%;max-height:220px;object-fit:cover;border-radius:var(--radius-lg);
display:block;border:.5px solid var(--border);
}
.treby-story-gallery--carousel{
margin:12px 0 16px;border-radius:var(--radius-lg);
overflow:hidden;border:.5px solid var(--border);
background:var(--surface);
}
.treby-story-gallery-track{
display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.treby-story-slide{
flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;
}
.treby-story-gallery--carousel .treby-story-slide > .treby-story-img{
width:100%;height:min(52vh, 380px);max-height:min(52vh, 380px);object-fit:cover;display:block;
}
/* --- Carosello galleria storia: viewport, frecce, cursore zoom --- */
.treby-story-gallery-viewport{
position:relative;width:100%;border-radius:inherit;
}
.treby-story-gallery-viewport .treby-story-gallery-track{
display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:inherit;
}
.treby-story-gallery-viewport .treby-story-gallery-track::-webkit-scrollbar{display:none}
.treby-story-gallery-side{
position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:44px;height:44px;padding:0;margin:0;border:none;border-radius:50%;
font-size:26px;line-height:1;font-weight:700;color:#fff;
background:rgba(0,0,0,.48);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
cursor:pointer;display:flex;align-items:center;justify-content:center;
box-shadow:0 2px 12px rgba(0,0,0,.28);
transition:opacity .15s ease, background .15s ease;
}
.treby-story-gallery-side:disabled{
opacity:.22;pointer-events:none;
}
.treby-story-gallery-side--prev{left:max(8px, env(safe-area-inset-left));}
.treby-story-gallery-side--next{right:max(8px, env(safe-area-inset-right));}
.treby-story-gallery-img--zoomable{cursor:zoom-in}
/*
* Lightbox galleria (`storyGalleryCarousel.js`). Overlay fixed e colonna verticale: barra comandi sopra, massimo spazio sotto alla foto.
* Senza questo blocco si rischia il bug “immagini enormi in coda al body”; con landscape simulato si scambiano dvh/dvw per riempimento contain.
*/
.treby-fs-lb{
position:fixed;inset:0;z-index:100060;
background:rgba(0,0,0,.94);
display:flex;flex-direction:column;
box-sizing:border-box;overflow:hidden;
height:100%;max-height:100dvh;min-height:100dvh;
padding-bottom:env(safe-area-inset-bottom);
}
.treby-fs-lb__toolbar{
flex-shrink:0;z-index:8;
display:flex;flex-direction:row;align-items:center;justify-content:space-between;
gap:12px;width:100%;
padding-top:max(10px, env(safe-area-inset-top));
padding-left:max(10px, env(safe-area-inset-left));
padding-right:max(10px, env(safe-area-inset-right));
padding-bottom:12px;
background:linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.12) 72%, transparent 100%);
}
.treby-fs-lb__toolbar-cluster--left{display:flex;align-items:center;gap:8px;flex-shrink:0;min-width:0}
.treby-fs-lb__toolbar-cluster--left:empty{display:none}
.treby-fs-lb__toolbar-cluster--left:empty + .treby-fs-lb__toolbar-cluster--right{margin-left:auto}
.treby-fs-lb__toolbar-cluster--right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.treby-fs-lb__close,.treby-fs-lb__rotate{
width:48px;height:48px;border-radius:50%;padding:0;margin:0;
border:2px solid rgba(255,255,255,.35);
background:rgba(20,20,22,.75);color:#fff;
cursor:pointer;display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 18px rgba(0,0,0,.45);
flex-shrink:0;
}
.treby-fs-lb__close{font-size:30px;line-height:1;font-weight:400}
.treby-fs-lb__rotate{font-size:18px;line-height:1;font-weight:700}
.treby-fs-lb__rotate[aria-pressed="true"]{
border-color:rgba(255,255,255,.62);
background:rgba(40,88,164,.92);
}
.treby-fs-lb__rotate-ico{pointer-events:none;line-height:1;display:block}
.treby-fs-lb__nav--toolbar{
width:46px;height:46px;border-radius:50%;padding:0;margin:0;
border:2px solid rgba(255,255,255,.45);
background:rgba(255,255,255,.18);color:#fff;font-size:30px;font-weight:800;line-height:1;
cursor:pointer;display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.treby-fs-lb__nav--toolbar:disabled{
opacity:.28;pointer-events:none;
background:rgba(255,255,255,.12);color:rgba(255,255,255,.55);
}
.treby-fs-lb__main{
flex:1 1 auto;min-height:0;width:100%;
padding-left:max(6px, env(safe-area-inset-left));
padding-right:max(6px, env(safe-area-inset-right));
position:relative;box-sizing:border-box;
}
.treby-fs-lb__stage{
width:100%;height:100%;
position:relative;align-self:stretch;
}
.treby-fs-lb__strip{
display:flex;height:100%;width:100%;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
outline:none;
}
.treby-fs-lb__strip::-webkit-scrollbar{display:none}
.treby-fs-lb__slide{
flex:0 0 100%;width:100%;max-width:100%;height:100%;
scroll-snap-align:start;box-sizing:border-box;
display:flex;flex-direction:column;
align-items:stretch;justify-content:safe center;
min-height:0;overflow:hidden;
gap:10px;padding:10px 0 14px;
}
.treby-fs-lb__frame{
flex:1 1 auto;min-height:0;min-width:0;width:100%;
display:flex;flex-direction:column;
align-items:center;justify-content:center;
overflow:hidden;
}
.treby-fs-lb__zoom{
touch-action:none;
display:flex;align-items:center;justify-content:center;
flex:1 1 auto;width:100%;min-height:0;max-height:100%;
overflow:hidden;
}
.treby-fs-lb__img{
max-width:100%;max-height:100%;width:auto;height:auto;
object-fit:contain;
border-radius:var(--radius-md, 10px);
transform-origin:center center;
will-change:transform;
}
.treby-fs-lb__cap{
flex-shrink:0;max-width:100%;padding:0 8px;
font-size:14px;line-height:1.45;
color:rgba(255,255,255,.9);text-align:center;
}
.treby-fs-lb.treby-fs-lb--landscape{
--lb-inset-t:env(safe-area-inset-top, 0px);
--lb-inset-r:env(safe-area-inset-right, 0px);
--lb-inset-b:env(safe-area-inset-bottom, 0px);
--lb-inset-l:env(safe-area-inset-left, 0px);
}
.treby-fs-lb.treby-fs-lb--landscape .treby-fs-lb__main{
flex:none;
position:fixed;
left:50%;
top:50%;
z-index:1;
width:calc(100dvh - var(--lb-inset-l) - var(--lb-inset-r) - 12px);
height:calc(100dvw - var(--lb-inset-t) - var(--lb-inset-b) - 12px);
max-width:calc(100dvh - var(--lb-inset-l) - var(--lb-inset-r) - 12px);
max-height:calc(100dvw - var(--lb-inset-t) - var(--lb-inset-b) - 12px);
padding-left:0;padding-right:0;
transform:translate(-50%, -50%) rotate(-90deg);
transform-origin:center center;
}
.treby-fs-lb.treby-fs-lb--landscape .treby-fs-lb__slide{
padding-top:max(6px, var(--lb-inset-t));
padding-bottom:max(6px, var(--lb-inset-b));
}
.treby-fs-lb.treby-fs-lb--landscape .treby-fs-lb__zoom{
flex:1 1 auto;min-height:0;min-width:0;width:100%;
max-height:none;
align-items:stretch;justify-content:stretch;
}
.treby-fs-lb.treby-fs-lb--landscape .treby-fs-lb__img{
width:100%;height:100%;
max-width:100%;max-height:100%;
object-fit:contain;
}
/* Lightbox fullscreen galleria: strip orizzontale + pannelli con scroll verticale */
.treby-gallery-lightbox{
position:fixed;inset:0;z-index:100060;
background:rgba(0,0,0,.94);
display:flex;flex-direction:column;
box-sizing:border-box;overflow:hidden;
height:100%;max-height:100dvh;min-height:100dvh;
padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
/* Barra in alto a destra: ruota (landscape simulato) + chiudi */
.treby-gallery-lightbox__toolbar{
position:absolute;z-index:7;
top:max(8px, env(safe-area-inset-top));
right:max(8px, env(safe-area-inset-right));
display:flex;flex-direction:row;align-items:center;gap:10px;
}
.treby-gallery-lightbox__toolbar .treby-gallery-lightbox__rotate,
.treby-gallery-lightbox__toolbar .treby-gallery-lightbox__close{
position:relative;top:auto;right:auto;
width:48px;height:48px;border-radius:50%;padding:0;margin:0;
border:2px solid rgba(255,255,255,.35);
background:rgba(20,20,22,.75);color:#fff;
cursor:pointer;display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 18px rgba(0,0,0,.45);
flex-shrink:0;
}
.treby-gallery-lightbox__toolbar .treby-gallery-lightbox__close{
font-size:30px;line-height:1;font-weight:400;
}
.treby-gallery-lightbox__rotate-ico{
display:flex;width:26px;height:26px;align-items:center;justify-content:center;
pointer-events:none;
}
.treby-gallery-lightbox__rotate-ico svg{
display:block;width:100%;height:100%;
}
@keyframes treby-gallery-rotate-ico-spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
.treby-gallery-lightbox__rotate-ico--spin svg{
animation:treby-gallery-rotate-ico-spin .55s ease-out;
}
/* Area foto + frecce (portrait: flex sotto toolbar) */
.treby-gallery-lightbox__main{
flex:1;min-height:0;width:100%;position:relative;display:flex;flex-direction:column;
}
/* Modalità landscape simulata: margini per notch senza “mangiare” troppo l’area foto */
.treby-gallery-lightbox.treby-gallery-lightbox--rotated{
--lb-inset-t:env(safe-area-inset-top, 0px);
--lb-inset-r:env(safe-area-inset-right, 0px);
--lb-inset-b:env(safe-area-inset-bottom, 0px);
--lb-inset-l:env(safe-area-inset-left, 0px);
}
.treby-gallery-lightbox.treby-gallery-lightbox--rotated .treby-gallery-lightbox__toolbar{
top:max(6px, var(--lb-inset-t));
right:max(6px, var(--lb-inset-r));
}
.treby-gallery-lightbox.treby-gallery-lightbox--rotated .treby-gallery-lightbox__main{
position:fixed;
left:50%;
top:50%;
width:calc(100dvh - var(--lb-inset-l) - var(--lb-inset-r) - 12px);
height:calc(100dvw - var(--lb-inset-t) - var(--lb-inset-b) - 12px);
max-width:calc(100dvh - var(--lb-inset-l) - var(--lb-inset-r) - 12px);
max-height:calc(100dvw - var(--lb-inset-t) - var(--lb-inset-b) - 12px);
transform:translate(-50%, -50%) rotate(-90deg);
transform-origin:center center;
flex:none;min-height:0;
}
.treby-gallery-lightbox.treby-gallery-lightbox--rotated .treby-gallery-lightbox__side--prev{
left:max(10px, var(--lb-inset-l));
}
.treby-gallery-lightbox.treby-gallery-lightbox--rotated .treby-gallery-lightbox__side--next{
right:max(10px, var(--lb-inset-r));
}
.treby-gallery-lightbox.treby-gallery-lightbox--rotated .treby-gallery-lightbox__pane{
padding-top:max(6px, var(--lb-inset-t));
padding-bottom:max(6px, var(--lb-inset-b));
padding-left:max(4px, var(--lb-inset-l));
padding-right:max(4px, var(--lb-inset-r));
min-height:0;
overflow-x:hidden;
overflow-y:auto;
}
/* Immagine: riempie l’area zoom (100%×100%) e scala al massimo mantenendo proporzioni (contain). */
.treby-gallery-lightbox.treby-gallery-lightbox--rotated .treby-gallery-lightbox__zoomhost{
flex:1 1 auto;
min-height:0;
min-width:0;
width:100%;
max-width:100%;
max-height:none;
display:flex;
align-items:stretch;
justify-content:stretch;
overflow:hidden;
}
.treby-gallery-lightbox.treby-gallery-lightbox--rotated .treby-gallery-lightbox__zoomhost .treby-gallery-lightbox__img{
box-sizing:border-box;
display:block;
width:100%;
height:100%;
max-width:100%;
max-height:100%;
object-fit:contain;
object-position:center;
}
.treby-gallery-lightbox__side{
position:absolute;top:50%;transform:translateY(-50%);z-index:5;
width:56px;height:56px;border-radius:50%;
border:2px solid rgba(0,0,0,.2);
background:rgba(255,255,255,.94);color:#111;font-size:36px;font-weight:800;line-height:1;
cursor:pointer;display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 22px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.5) inset;
}
.treby-gallery-lightbox__side:disabled{
opacity:.28;pointer-events:none;
background:rgba(255,255,255,.45);color:#444;
}
.treby-gallery-lightbox__side--prev{left:max(8px, env(safe-area-inset-left));}
.treby-gallery-lightbox__side--next{right:max(8px, env(safe-area-inset-right));}
.treby-gallery-lightbox__stage{
flex:1;min-height:0;width:100%;position:relative;
}
.treby-gallery-lightbox__strip{
display:flex;height:100%;width:100%;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
outline:none;
}
.treby-gallery-lightbox__strip::-webkit-scrollbar{display:none}
.treby-gallery-lightbox__pane{
flex:0 0 100%;width:100%;max-width:100%;height:100%;
scroll-snap-align:start;box-sizing:border-box;
display:flex;flex-direction:column;align-items:center;
justify-content:center;
justify-content:safe center;
overflow-x:hidden;overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding:max(16px, env(safe-area-inset-top)) 64px max(20px, env(safe-area-inset-bottom));
gap:10px;
}
.treby-gallery-lightbox__zoomhost{
touch-action:none;
display:flex;align-items:center;justify-content:center;
width:100%;max-width:100%;flex-shrink:0;
max-height:min(78dvh, 720px);
overflow:visible;
}
.treby-gallery-lightbox__zoomhost .treby-gallery-lightbox__img{
max-width:100%;width:auto;height:auto;
max-height:min(78dvh, 720px);object-fit:contain;
border-radius:var(--radius-md, 10px);
transform-origin:center center;
will-change:transform;
}
.treby-gallery-lightbox__caption{
flex-shrink:0;max-width:100%;padding:0 8px 8px;
font-size:14px;line-height:1.45;
color:rgba(255,255,255,.9);text-align:center;
}
/* --- Toggle consegna/asporto/prenotazione -------------------------------- */
.delivery-toggle{
display:flex;gap:6px;background:var(--surface2);
padding:4px;border-radius:var(--radius-md);
margin:12px 16px;
}
.d-opt{
flex:1;padding:10px;text-align:center;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
font-size:12px;font-weight:700;color:var(--text2);
border-radius:var(--radius-sm);cursor:pointer;
transition:all .2s;
}
.cart-delivery-toggle-gps-ico{
flex-shrink:0;display:block;width:18px;height:18px;
}
.d-opt.active{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm)}
/* CTA prenotazione tavolo sotto i dettaglio, prima del menu (ristoranti) */
.detail-book-wrap{
padding:4px 16px 12px;
margin-bottom:4px;
}
.detail-book-hint{
font-size:13px;margin:0 0 10px;
}
/* Stessa risorsa lista notizie: su CTA primary resa chiara con filtro */
.btn-primary .detail-book-btn-date-ico,
.btn-primary .detail-menu-btn-ico{
flex-shrink:0;width:20px;height:20px;object-fit:contain;display:block;
filter:brightness(0) invert(1);
}
.btn-primary .detail-menu-btn-ico{
width:22px;height:22px;
}
/* --- Menu (categorie + prodotti) ----------------------------------------- */
/* Titolo di categoria: più marcato, con accento di colore a sinistra */
.menu-cat-title{
font-size:14px;font-weight:800;color:var(--text);
text-transform:uppercase;letter-spacing:.6px;
padding:18px 16px 8px;
display:flex;align-items:center;gap:8px;
}
.menu-cat-title::before{
content:"";width:4px;height:16px;border-radius:2px;
background:var(--primary);flex-shrink:0;
}
/* Contenitore delle card di una categoria: gap verticale costante */
.menu-list{
display:flex;flex-direction:column;gap:10px;
padding:0 16px 6px;
}
/* Card del prodotto: miniatura a SINISTRA, corpo al centro, + in basso a destra */
.menu-item{
position:relative;
display:flex;gap:12px;
padding:12px 12px 14px;
background:var(--surface);
border:.5px solid var(--border);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
cursor:pointer;
transition:transform .1s,border-color .15s,box-shadow .15s;
}
.menu-item:active{transform:scale(.99)}
/* Stato: prodotto già nel carrello → bordo/accento colorato per feedback visivo */
.menu-item.in-cart{
border-color:var(--success);
box-shadow:0 2px 10px rgba(21,128,61,.12);
}
/* Miniatura: quadrato soft con emoji grande, nessuna sovrapposizione */
.menu-item-img{
width:84px;height:84px;flex-shrink:0;border-radius:14px;
background:linear-gradient(135deg,var(--surface2),var(--surface3));
display:flex;align-items:center;justify-content:center;
font-size:38px;
}
/* Corpo: nome, descrizione, riga prezzo/allergeni (con spazio per il + in basso dx) */
.menu-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding-right:36px}
.menu-item-name{
font-size:14px;font-weight:800;color:var(--text);line-height:1.25;
display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.menu-item-desc{
font-size:12px;color:var(--text2);line-height:1.4;
display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.menu-item-bottom{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:4px;flex-wrap:wrap}
.price{font-size:15px;font-weight:800;color:var(--accent);letter-spacing:-.2px}
/* Allergeni: pill più piccole, leggibili, dopo il prezzo */
.allergen-pills{display:flex;gap:4px;flex-wrap:wrap}
.allergen-pill{
font-size:10px;font-weight:700;background:var(--warning-bg);color:var(--warning);
padding:2px 7px;border-radius:var(--radius-pill);text-transform:lowercase;
}
/* Pulsante + / ✓: flottante in basso a destra della card */
.add-btn{
position:absolute;right:10px;bottom:10px;
width:34px;height:34px;border-radius:50%;
background:var(--accent);color:#fff;border:none;
display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:20px;line-height:1;
cursor:pointer;box-shadow:0 4px 10px rgba(232,97,44,.35);
transition:transform .1s,background .15s,box-shadow .15s;
}
.add-btn:active{transform:scale(.92)}
.add-btn.checked{
background:var(--success);
box-shadow:0 4px 10px rgba(21,128,61,.35);
}
/* Pulsante "Personalizza" all'interno della card prodotto (visibile solo con extra) */
.menu-item-customize{
display:inline-flex;align-items:center;gap:6px;
margin-top:8px;padding:5px 12px;
background:var(--primary-light);color:var(--primary);
border:.5px solid var(--primary);
border-radius:var(--radius-pill);
font-size:11px;font-weight:700;letter-spacing:.2px;
cursor:pointer;align-self:flex-start;width:fit-content;
transition:background .15s,color .15s,transform .1s;
}
.menu-item-customize:hover{background:var(--primary);color:#fff}
.menu-item-customize:active{transform:scale(.97)}
/* --- Bottom sheet overlay (es. Personalizza prodotto) -------------------- */
.sheet-overlay{
position:fixed;inset:0;z-index:90;
background:rgba(0,0,0,.5);
display:flex;align-items:flex-end;justify-content:center;
animation:sheet-fade .18s ease;
}
.sheet-overlay.hidden{display:none}
.sheet{
position:relative;
width:100%;max-width:560px;
background:var(--surface);
border-radius:24px 24px 0 0;
max-height:88vh;overflow-y:auto;
padding:8px 0 10px;
box-shadow:0 -12px 40px rgba(0,0,0,.28);
animation:sheet-up .24s cubic-bezier(.2,.8,.2,1);
}
.sheet-handle{
width:44px;height:4px;border-radius:2px;
background:var(--border2);margin:4px auto 8px;
}
.sheet-close{
position:absolute;top:10px;right:12px;
width:32px;height:32px;border-radius:50%;
background:var(--surface2);color:var(--text);
border:none;cursor:pointer;
font-size:22px;line-height:1;font-weight:600;
display:flex;align-items:center;justify-content:center;
}
.sheet-hero{
display:flex;gap:12px;padding:6px 16px 14px;
border-bottom:.5px solid var(--border);
}
.sheet-hero-img{
width:76px;height:76px;flex-shrink:0;border-radius:16px;
background:linear-gradient(135deg,var(--surface2),var(--surface3));
display:flex;align-items:center;justify-content:center;
font-size:36px;
}
.sheet-hero-body{flex:1;min-width:0;padding-right:36px}
.sheet-hero-name{font-size:17px;font-weight:800;color:var(--text);line-height:1.2}
.sheet-hero-price{font-size:13px;font-weight:700;color:var(--accent);margin-top:3px}
.sheet-hero-desc{font-size:12px;color:var(--text2);margin-top:6px;line-height:1.4}
.sheet-section-title{
padding:16px 16px 2px;
font-size:12px;font-weight:800;color:var(--text);
text-transform:uppercase;letter-spacing:.6px;
}
.sheet-section-sub{padding:0 16px 10px;font-size:12px;color:var(--text2)}
.sheet-empty{
padding:14px 16px;font-size:13px;color:var(--text3);
background:var(--surface2);border-radius:var(--radius-md);
text-align:center;
}
/* Lista di extra: ogni riga è una label cliccabile (checkbox + nome + prezzo) */
.extras-list{padding:0 16px;display:flex;flex-direction:column;gap:8px}
.extra-row{
display:flex;align-items:center;gap:12px;padding:12px 14px;
background:var(--surface2);border:1px solid var(--border);
border-radius:var(--radius-md);cursor:pointer;
transition:background .15s,border-color .15s;
}
.extra-row:hover{background:var(--surface3)}
.extra-row.checked{
background:var(--primary-light);
border-color:var(--primary);
}
.extra-row input[type="checkbox"]{
width:18px;height:18px;accent-color:var(--primary);
cursor:pointer;flex-shrink:0;margin:0;
}
.extra-name{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--text)}
.extra-price{
font-size:13px;font-weight:800;color:var(--accent);flex-shrink:0;
letter-spacing:-.1px;
}
.extra-price.free{color:var(--success);font-weight:700}
/* CTA "Aggiungi al carrello" sticky in fondo allo sheet */
.sheet-cta-wrap{
position:sticky;bottom:0;
padding:12px 16px 6px;margin-top:10px;
background:var(--surface);
border-top:.5px solid var(--border);
}
/* Etichetta extra dentro le righe del carrello.
Specificità più alta per vincere su `.cart-item-name span` (che colora il prezzo). */
.cart-item-name .cart-item-extras{
display:block;font-size:11px;color:var(--text3);
margin-top:2px;line-height:1.35;
font-style:italic;font-weight:500;
}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes sheet-fade{from{opacity:0}to{opacity:1}}
/* --- FAB carrello --------------------------------------------------------- */
.cart-fab{
position:absolute;
left:16px;right:16px;
/* Sopra la bottom-nav flottante */
bottom:calc(78px + var(--nav-float-bottom) + var(--android-gesture-nav-pad, 0px));
background:var(--accent);color:#fff;
border-radius:var(--radius-pill);
padding:12px 16px;
display:none;align-items:center;gap:12px;
box-shadow:0 10px 22px rgba(232,97,44,.4);
cursor:pointer;z-index:25;
font-weight:700;
}
.cart-fab.show{display:flex}
.cart-fab .badge{
background:rgba(255,255,255,.22);padding:2px 9px;border-radius:var(--radius-pill);font-weight:800;font-size:12px;
}
.cart-fab .chev{margin-left:auto;font-size:18px}
/* --- Cart / carrello ------------------------------------------------------ */
.cart-list{padding:6px 16px;display:flex;flex-direction:column;gap:8px}
.cart-item{
background:var(--surface);border:.5px solid var(--border);
border-radius:var(--radius-md);padding:10px 12px;
display:flex;align-items:center;gap:10px;
}
.cart-item-name{flex:1;min-width:0}
.cart-item-name strong{font-size:13px;font-weight:800;display:block}
.cart-item-name span{font-size:12px;color:var(--accent);font-weight:700}
.qty-group{
display:flex;align-items:center;gap:6px;
background:var(--surface2);border-radius:var(--radius-pill);padding:3px;
}
.qty-btn{
width:26px;height:26px;border-radius:50%;border:none;background:var(--surface);
color:var(--text);font-weight:800;cursor:pointer;
}
.qty-val{min-width:18px;text-align:center;font-weight:800;font-size:13px}
.order-summary{
margin:12px 16px;background:var(--surface);
border:.5px solid var(--border);border-radius:var(--radius-md);
padding:12px 14px;
}
.os-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;color:var(--text2)}
.os-row.total{font-weight:800;font-size:15px;color:var(--text);border-top:.5px solid var(--border);margin-top:6px;padding-top:10px}
.os-row--discount{color:var(--success, #16a34a);font-weight:700}
/* Sezione codice promo nel carrello (sopra i totali). */
.cart-promo-section{
margin:12px 16px;background:var(--surface);
border:.5px solid var(--border);border-radius:var(--radius-md);
padding:12px 14px;
}
.cart-promo-title{
font-size:13px;font-weight:800;color:var(--text);margin-bottom:8px;
}
.cart-promo-row{display:flex;gap:8px;align-items:stretch}
.cart-promo-input{
flex:1;min-width:0;
border:1px solid var(--border);border-radius:var(--radius-md);
padding:10px 12px;font-size:14px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;background:var(--surface2);color:var(--text);
}
.cart-promo-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent)}
.cart-promo-apply-btn{flex:0 0 auto;padding:10px 16px;border-radius:var(--radius-md);font-weight:800;font-size:13px}
.cart-promo-applied{
display:flex;align-items:center;gap:10px;
padding:10px 12px;border-radius:var(--radius-md);
background:color-mix(in srgb, var(--success, #16a34a) 8%, var(--surface));
border:1px solid color-mix(in srgb, var(--success, #16a34a) 30%, var(--border));
}
.cart-promo-applied__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cart-promo-applied__code{
font-weight:900;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
color:var(--text);
}
.cart-promo-applied__sub{font-size:12px;color:var(--text2);font-weight:600}
.cart-promo-applied__amount{font-weight:800;font-size:14px;color:var(--success, #16a34a)}
.cart-promo-remove-btn{
width:28px;height:28px;border-radius:50%;border:none;cursor:pointer;
background:var(--surface2);color:var(--text2);font-weight:800;font-size:14px;
}
.cart-promo-remove-btn:hover{background:var(--surface3, var(--surface2));color:var(--danger, #dc2626)}
.address-card{
margin:12px 16px;background:var(--surface);
border:.5px solid var(--border);border-radius:var(--radius-md);
padding:12px 14px;display:flex;align-items:center;gap:10px;
}
.address-card svg{width:18px;height:18px;stroke:var(--primary);stroke-width:2;fill:none}
.address-card strong{display:block;font-size:13px;font-weight:800}
.address-card span{font-size:12px;color:var(--text2)}
.pay-list{margin:0 16px 16px;display:flex;flex-direction:column;gap:8px}
.pay-card{
background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius-md);
padding:12px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;
}
.pay-card.active{border-color:var(--primary);background:var(--primary-light)}
.pay-ico{
width:36px;height:36px;border-radius:10px;background:var(--surface2);
display:flex;align-items:center;justify-content:center;font-size:18px;
}
.pay-ico-img{
width:100%;height:100%;max-width:30px;max-height:22px;object-fit:contain;
padding:2px;box-sizing:border-box;
}
[data-theme="dark"] .pay-ico--applepay .pay-ico-img{
filter:invert(1);
}
.pay-card-name{flex:1;font-size:13px;font-weight:700}
.radio{
width:18px;height:18px;border-radius:50%;border:2px solid var(--border2);
display:flex;align-items:center;justify-content:center;
}
.radio.checked{border-color:var(--primary)}
.radio.checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary)}
/* --- Success view --------------------------------------------------------- */
.success-wrap{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:24px;text-align:center;
}
.success-ico{
width:90px;height:90px;border-radius:50%;
background:var(--success-bg);color:var(--success);
font-size:44px;display:flex;align-items:center;justify-content:center;
margin-bottom:14px;
}
.success-wrap h2{font-size:22px;font-weight:800}
.success-wrap p{font-size:13px;color:var(--text2);margin-top:6px}
.tracker{
width:100%;max-width:340px;margin:24px 0;
display:flex;flex-direction:column;gap:10px;
}
.track-step{
display:flex;align-items:center;gap:12px;padding:10px 12px;
background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius-md);
}
.track-step .dot{width:12px;height:12px;border-radius:50%;background:var(--border2)}
.track-step.done .dot{background:var(--success)}
.track-step.curr .dot{background:var(--primary);box-shadow:0 0 0 4px rgba(30,95,168,.25)}
.track-step span{font-size:13px;font-weight:700}
.track-step small{margin-left:auto;font-size:11px;color:var(--text3)}
/* Lista ordini: niente padding-top extra sotto le pill (evita “fascia” vuota sotto l’header di tab). */
section.view[data-view="orders"] #ordersList.service-list{padding-top:0}
/* --- Tabs ordini ---------------------------------------------------------- */
.tabs{display:flex;gap:6px;padding:10px 16px;background:var(--surface);border-bottom:.5px solid var(--border)}
.tab-pill{
flex:1;padding:10px;text-align:center;cursor:pointer;
font-size:13px;font-weight:700;color:var(--text2);
background:var(--surface2);border-radius:var(--radius-pill);
transition:all .2s;
}
.tab-pill.active{background:var(--primary);color:#fff}
/* --- Chat IA -------------------------------------------------------------- */
/* Dock: contenitore trasparente; campo e invio sono due pillole vetro separate (come la nav). */
.ai-chat-dock{
display:none;
flex-direction:column;
flex-shrink:0;
z-index:40;
}
html[data-shell-tab="ai"] .ai-chat-dock{
display:flex;
position:absolute;
left:0;
right:0;
/* Il dock sta in fondo a `#app`. È `#app` che si accorcia di `--ai-kb-h` con la tastiera,
quindi il dock si trova automaticamente sopra i tasti — qui basta un piccolo gap visivo.
Su Android a tastiera chiusa si somma `--android-gesture-nav-pad` (barra gesture / nav). */
bottom:calc(8px + var(--android-gesture-nav-pad, 0px));
flex-direction:column;
gap:6px;
padding:0 10px 4px;
background:transparent;
border:none;
box-shadow:none;
backdrop-filter:none;
-webkit-backdrop-filter:none;
/* Niente transizione su `bottom`: deve seguire la tastiera frame-per-frame senza “lag”. */
}
/* Chip sopra il composer: solo padding orizzontale (niente “scatola” unica). */
html[data-shell-tab="ai"] .ai-chat-dock .ai-chat-dock-replies{
padding:0 2px;
gap:6px;
}
/* Riga: campo (flex) + pulsante invio flottante fuori dal form. */
.ai-chat-composer-row{
display:flex;
align-items:flex-end;
gap:10px;
width:100%;
}
/* Form: solo wrapper logico, nessuna “scatola” visiva attorno al campo. */
html[data-shell-tab="ai"] .ai-chat-dock .ai-chat-form-only{
flex:1;
min-width:0;
margin:0;
padding:0;
border:none;
background:transparent;
box-shadow:none;
display:block;
}
/* Campo testo: pillola vetro direttamente sull’input (niente contenitore doppio). */
html[data-shell-tab="ai"] .ai-chat-dock .ai-chat-input-float{
display:block;
width:100%;
box-sizing:border-box;
margin:0;
min-height:44px;
padding:8px 12px;
font-size:16px;
line-height:1.3;
color:var(--text);
border:none;
outline:none;
border-radius:22px;
background:color-mix(in srgb, var(--surface) 78%, transparent);
-webkit-backdrop-filter:saturate(180%) blur(20px);
backdrop-filter:saturate(180%) blur(20px);
border:.5px solid var(--border);
/* Niente ombra esterna ampia verso il basso: il blur sembra una “lastra” larga quanto la tastiera
ma resta sopra i tasti; solo bordo + highlight interno. */
box-shadow:
inset 0 1px 0 rgba(255,255,255,.22),
inset 0 0 0 0.5px color-mix(in srgb, var(--border) 55%, transparent);
}
@supports not (background:color-mix(in srgb, red, blue)){
html[data-shell-tab="ai"] .ai-chat-dock .ai-chat-input-float{background:var(--surface)}
}
[data-theme="dark"] html[data-shell-tab="ai"] .ai-chat-dock .ai-chat-input-float{
background:color-mix(in srgb, var(--surface) 72%, transparent);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 0 0 0.5px rgba(255,255,255,.1);
}
@supports not (background:color-mix(in srgb, red, blue)){
[data-theme="dark"] html[data-shell-tab="ai"] .ai-chat-dock .ai-chat-input-float{background:var(--surface)}
}
/* Pulsante invio: pillola circolare separata, stesso linguaggio della bottom-nav. */
html[data-shell-tab="ai"] .ai-chat-dock .ai-chat-send-float{
flex-shrink:0;
width:44px;
height:44px;
margin:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
border:.5px solid var(--border);
cursor:pointer;
font-size:18px;
line-height:1;
color:#fff;
background:var(--primary);
-webkit-backdrop-filter:saturate(180%) blur(16px);
backdrop-filter:saturate(180%) blur(16px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.25),
0 1px 3px rgba(0,0,0,.12);
transition:transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
html[data-shell-tab="ai"] .ai-chat-dock .ai-chat-send-float:active{transform:scale(.94)}
html[data-shell-tab="ai"] .ai-chat-dock .ai-chat-send-float:disabled{
opacity:.45;
cursor:not-allowed;
transform:none;
}
[data-theme="dark"] html[data-shell-tab="ai"] .ai-chat-dock .ai-chat-send-float{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 1px 4px rgba(0,0,0,.35);
}
/* Colonna IA: header Youkiko, stream scrollabile; il dock è fuori dal flusso (absolute).
Qui riserviamo solo l'altezza del dock + gap fisso.
La tastiera è già gestita da iOS/WKWebView e dal `bottom` del dock: aggiungere anche
`--ai-kb-h` qui creava un doppio offset (vuoto enorme). */
section.view[data-view="ai"] .ai-page-column{
flex:1;
min-height:0;
padding-bottom:calc(var(--ai-dock-h, 88px) + 8px);
box-sizing:border-box;
display:flex;
flex-direction:column;
overflow:hidden;
position:relative;
}
section.view[data-view="ai"] .chat-header{
flex-shrink:0;
}
section.view[data-view="ai"] .chat-stream{
flex:1;
min-height:0;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
/* Capacitor iOS (keyboardResize: "none"): la WebView resta full-screen quando la tastiera si
apre. Per evitare che WKWebView scrolli automaticamente la window (portando gli header fuori
dall'area visibile), rimpiccioliamo direttamente `#app` all'altezza disponibile (schermo - kb).
Così non c'è più spazio "fisico" sotto dove la window possa scrollare. Usiamo flex normale,
niente `position: fixed` (in WKWebView con resize:none è inaffidabile). */
html[data-shell-tab="ai"][data-capacitor-native-ai="1"] section.view[data-view="ai"] .ai-page-column{
display:flex;
flex-direction:column;
flex:1;
min-height:0;
overflow:hidden;
}
html[data-shell-tab="ai"][data-capacitor-native-ai="1"] section.view[data-view="ai"] .chat-header{
flex-shrink:0;
/* Notch in cima + stessi padding laterali della regola globale. */
padding:calc(env(safe-area-inset-top, 0px) + 12px) 14px 12px 14px;
box-sizing:border-box;
}
html[data-shell-tab="ai"][data-capacitor-native-ai="1"] section.view[data-view="ai"] #chatStream.chat-stream{
flex:1;
min-height:0;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
/* Con pochi messaggi: bolle agganciate al bordo sopra il composer (spazio vuoto solo in alto). */
justify-content:flex-end;
}
/* Tastiera aperta in Capacitor iOS (resize "none"): `#app` resta intatto, lo spazio sotto è
coperto dalla tastiera; il dock segue `--ai-kb-h` come nella regola generale. */
html[data-shell-tab="ai"][data-capacitor-native-ai="1"][data-ai-kb-open="1"] #app{
/* Nessuna altezza forzata: la WebView con resize "none" è già full-screen. */
}
html[data-shell-tab="ai"][data-capacitor-native-ai="1"][data-ai-kb-open="1"]{
overflow-y:hidden;
overflow-x:hidden;
overscroll-behavior-y:none;
}
html[data-shell-tab="ai"][data-capacitor-native-ai="1"][data-ai-kb-open="1"] body{
min-height:100dvh;
overflow:hidden;
}
/* Header interno alla vista AI: avatar Youkiko (immagine) + nome + stato.
La bottom-nav è nascosta (NAV_HIDDEN_TABS); indietro: swipe da bordo o tasto Android. */
.chat-header{
display:flex;align-items:center;gap:12px;
padding:12px 14px;
background:var(--surface);
border-bottom:.5px solid var(--border);
box-shadow:0 2px 8px rgba(15,23,42,.04);
flex-shrink:0;
position:relative;
z-index:10;
}
.chat-header-avatar{
width:42px;height:42px;border-radius:50%;
flex-shrink:0;overflow:hidden;
background:var(--surface2);
border:2px solid var(--border);
box-shadow:0 3px 8px rgba(30,95,168,.22);
}
.chat-header-avatar img{
width:100%;height:100%;object-fit:cover;display:block;
}
/* Mascot PNG trasparente: evita il crop del cerchio */
#youkikoAvatarBtn.chat-header-avatar img{
object-fit:contain;padding:3px;
}
/* Avatar cliccabile: apre il lightbox a schermo intero */
#youkikoAvatarBtn.chat-header-avatar{cursor:pointer}
#youkikoAvatarBtn.chat-header-avatar:focus-visible{
outline:2px solid var(--primary);outline-offset:2px;
}
/* Lightbox avatar Youkiko (immagine ingrandita sopra tutto) */
.youkiko-lightbox{
position:fixed;inset:0;z-index:10000;
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:24px 20px 32px;
background:rgba(15,23,42,.9);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.youkiko-lightbox.hidden{display:none!important}
.youkiko-lightbox-img{
max-width:min(92vw,520px);max-height:min(82vh,520px);
width:auto;height:auto;object-fit:contain;
border-radius:18px;
box-shadow:0 16px 48px rgba(0,0,0,.45);
border:1px solid rgba(255,255,255,.12);
}
.youkiko-lightbox-close{
position:absolute;top:max(12px, env(safe-area-inset-top, 0px));right:max(12px, env(safe-area-inset-right, 0px));
appearance:none;border:.5px solid rgba(255,255,255,.35);
background:rgba(255,255,255,.12);color:#fff;
width:40px;height:40px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:18px;font-weight:700;cursor:pointer;z-index:10001;
transition:background .15s, transform .1s;
}
.youkiko-lightbox-close:active{transform:scale(.92)}
.youkiko-lightbox-close:hover{background:rgba(255,255,255,.22)}
.chat-header-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.chat-header-name{
font-size:14px;font-weight:800;color:var(--text);
line-height:1.2;letter-spacing:-.1px;
}
.chat-header-status{
display:flex;align-items:center;gap:5px;
font-size:11px;color:var(--text3);line-height:1.2;
}
.chat-status-dot{
width:7px;height:7px;border-radius:50%;
background:#22C55E;flex-shrink:0;
box-shadow:0 0 0 2px rgba(34,197,94,.2);
animation:chatDotPulse 1.8s ease-in-out infinite;
}
@keyframes chatDotPulse{
0%,100%{box-shadow:0 0 0 2px rgba(34,197,94,.2)}
50%{box-shadow:0 0 0 4px rgba(34,197,94,.05)}
}
.chat-stream{
flex:1;
min-height:0;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding:14px 14px 20px;display:flex;flex-direction:column;gap:10px;
}
/* Vista Youkiko: lo spazio per il dock + tastiera è riservato dalla colonna (`padding-bottom`),
quindi qui solo un piccolo respiro interno per l’ultimo messaggio.
Con pochi messaggi: contenuto della colonna flex ancorato in basso (come una chat tipica). */
section.view[data-view="ai"] #chatStream.chat-stream{
padding-bottom:8px;
justify-content:flex-end;
}
/* Blocco invito al login quando la chat IA richiede sessione (API remota). */
.chat-login-gate{
align-self:stretch;max-width:100%;
padding:4px 0 8px;
}
.chat-login-gate .chat-login-btn{margin-top:12px}
/* Tab ordini senza sessione (lista vuota ma serve login). */
.orders-login-hint .btn{margin-top:14px}
.msg{max-width:82%;padding:10px 12px;border-radius:16px;font-size:13px;line-height:1.45;white-space:pre-wrap}
.msg.bot{background:var(--surface);border:.5px solid var(--border);color:var(--text);border-bottom-left-radius:4px;align-self:flex-start}
.msg.user{background:var(--primary);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
/* Bolla bot con testo + pulsanti [[LINK:...]] da Youkiko.
Layout moderno: card con sottile gradiente, padding generoso, spaziatura tra paragrafi/elenchi
per leggibilità su risposte lunghe (es. ricerca ristoranti con menu/orari/contatti). */
.msg-bot-rich{align-self:flex-start;max-width:94%;display:flex;flex-direction:column;gap:10px}
.msg-bot-rich .msg-text{
max-width:100%;
padding:14px 16px;
border-radius:18px;
border-bottom-left-radius:6px;
font-size:13.5px;line-height:1.55;
white-space:pre-wrap;
color:var(--text);
background:linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 92%, var(--primary-light) 8%) 100%);
border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
box-shadow:0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.04);
}
.msg-bot-rich .msg-text.chat-md{white-space:normal;word-wrap:break-word}
/* Spaziatura paragrafi/elenchi generata dal renderer Youkiko (chat-md). */
.msg-bot-rich .msg-text.chat-md > br + br{display:block;content:"";margin-top:6px}
.msg-bot-rich .msg-text.chat-md ul,
.msg-bot-rich .msg-text.chat-md ol{margin:6px 0 6px 18px;padding:0}
.msg-bot-rich .msg-text.chat-md ol.chat-md-ol--youkiko{margin:10px 0 12px 20px;padding-left:1.1rem;list-style-position:outside}
.msg-bot-rich .msg-text.chat-md ol.chat-md-ol--youkiko .chat-md-ol-li{margin:8px 0;padding-left:2px}
.msg-bot-rich .msg-text.chat-md li{margin:3px 0}
.msg-bot-rich .msg-text.chat-md p{margin:0 0 8px}
.msg-bot-rich .msg-text.chat-md p:last-child{margin-bottom:0}
.msg-bot-rich .msg-text.chat-md .chat-md-strong{font-weight:800;color:color-mix(in srgb, var(--text) 88%, var(--primary) 12%)}
.msg-bot-rich .msg-text.chat-md .chat-md-em{font-style:italic;color:var(--text2, var(--text))}
.msg-bot-rich .msg-text.chat-md .chat-md-u{text-decoration:underline;text-underline-offset:2px}
.msg-bot-rich .msg-text.chat-md .chat-md-del{opacity:.85;text-decoration:line-through}
.msg-bot-rich .msg-text.chat-md .chat-md-code{
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;
padding:1px 6px;border-radius:6px;background:var(--bg);border:1px solid var(--border);color:var(--text);
}
.msg-bot-rich .msg-text.chat-md .chat-md-a{color:var(--primary-soft);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.msg-bot-rich .msg-text.chat-md .chat-md-a:visited{color:var(--primary)}
.msg-bot-rich .msg-text.chat-md .chat-md-tone--accent{color:var(--accent);font-weight:700}
.msg-bot-rich .msg-text.chat-md .chat-md-tone--primary{color:var(--primary);font-weight:700}
.msg-bot-rich .msg-text.chat-md .chat-md-tone--muted{color:var(--text3);font-size:12px}
.msg-bot-rich .msg-text.chat-md .chat-md-tone--warn{color:#CA8A04;font-weight:700}
.msg-bot-rich .msg-text.chat-md .chat-md-tone--success{color:#16A34A;font-weight:700}
/* Riga azioni: chip "Apri scheda" con nome del servizio/notizia. */
.msg-actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:4px}
.msg-action-btn{
font-size:12.5px!important;
padding:8px 14px!important;
border-radius:var(--radius-pill)!important;
font-weight:700!important;
background:var(--primary-light)!important;
color:var(--primary)!important;
border:1px solid color-mix(in srgb, var(--primary) 22%, transparent)!important;
box-shadow:0 1px 2px rgba(30,95,168,.10)!important;
transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.msg-action-btn:hover{
background:color-mix(in srgb, var(--primary-light) 70%, var(--primary) 12%)!important;
box-shadow:0 2px 6px rgba(30,95,168,.18)!important;
}
.msg-action-btn:active{transform:translateY(1px)}
.msg.typing{color:var(--text3);font-style:italic;display:flex;gap:4px;align-items:center}
.msg.typing .dot{width:6px;height:6px;border-radius:50%;background:var(--text3);animation:blink 1.2s infinite}
.msg.typing .dot:nth-child(2){animation-delay:.2s}
.msg.typing .dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.quick-replies{display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 4px;flex-shrink:0}
.quick-replies.is-hidden{display:none!important}
.quick-reply{
background:var(--primary-light);color:var(--primary);
padding:6px 12px;border-radius:var(--radius-pill);
font-size:12px;font-weight:700;cursor:pointer;border:1px solid rgba(30,95,168,.22);
}
/* Barra messaggi Youkiko: stesso sfondo della vista (--bg) così il padding iOS
(safe-area sotto) non diventa una “lastra” bianca sotto al campo. */
.chat-input{
display:flex;align-items:center;gap:7px;
padding:7px 10px;
/* Padding stabile al focus; su web/Android l’altezza shell può seguire `--app-vvh`. */
padding-bottom:max(8px, env(safe-area-inset-bottom, 0px));
background:var(--bg);border-top:.5px solid var(--border);
flex-shrink:0;
}
.chat-input input{
flex:1;min-width:0;border:.5px solid var(--border2);background:var(--surface);
border-radius:var(--radius-pill);padding:9px 15px;outline:none;
color:var(--text);
/* 16px: su iOS evita lo zoom al focus che ruba spazio verticale alla chat. */
font-size:16px;line-height:1.25;
}
.chat-input button{
width:37px;height:37px;border-radius:50%;border:none;cursor:pointer;
flex-shrink:0;display:flex;align-items:center;justify-content:center;
background:var(--primary);color:#fff;font-size:18px;line-height:1;padding:0;
}
/* --- Filtri orizzontali --------------------------------------------------- */
.filter-row{
display:flex;gap:8px;padding:10px 16px;overflow-x:auto;
scrollbar-width:none;
touch-action:pan-x;
-webkit-overflow-scrolling:touch;
}
.filter-row::-webkit-scrollbar{display:none}
.filter-chip{
flex-shrink:0;padding:7px 14px;
background:var(--surface);border:.5px solid var(--border);
border-radius:var(--radius-pill);
font-size:12px;font-weight:700;color:var(--text);cursor:pointer;
transition:all .2s;
}
.filter-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}
.filter-row--home{
display:flex;gap:8px;overflow-x:auto;
padding:0 16px 12px;
scroll-snap-type:x proximity;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.filter-row--home::-webkit-scrollbar{display:none}
.filter-chip--premium{
background:color-mix(in srgb, var(--surface) 92%, transparent);
border:.5px solid color-mix(in srgb, var(--border) 80%, transparent);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
scroll-snap-align:start;
}
.filter-chip--premium.active{
background:var(--primary);
border-color:var(--primary);
color:#fff;
box-shadow:0 4px 14px rgba(30,95,168,.28);
}
/* --- Empty state ---------------------------------------------------------- */
.empty-state{
padding:60px 30px;text-align:center;color:var(--text3);
}
.empty-state .ico{font-size:48px;margin-bottom:10px}
.empty-state h3{font-size:16px;font-weight:800;color:var(--text2);margin-bottom:4px}
.empty-state p{font-size:12px;color:var(--text3)}
/* --- Toast ---------------------------------------------------------------- */
.toast{
position:fixed;bottom:calc(100px + var(--nav-float-bottom) + var(--android-gesture-nav-pad, 0px));left:50%;
transform:translateX(-50%) translateY(20px);
background:var(--text);color:var(--surface);
padding:10px 16px;border-radius:var(--radius-pill);
font-size:13px;font-weight:700;opacity:0;pointer-events:none;
transition:opacity .25s,transform .25s;z-index:100050;
box-shadow:var(--shadow-lg);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* --- Banner push in foreground (Capacitor / FCM, stile JonioHUB) ------------ */
#pushBannerHost{
position:fixed;inset:0;pointer-events:none;z-index:150;
display:flex;flex-direction:column;align-items:stretch;padding:12px;
padding-top:max(12px, env(safe-area-inset-top, 0px));
gap:8px;
}
.push-banner{
pointer-events:auto;align-self:stretch;
display:flex;align-items:stretch;gap:0;
background:var(--surface);color:var(--text);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-lg);
overflow:hidden;
border:1px solid var(--border2);
opacity:0;transform:translateY(-12px);
transition:opacity .28s ease,transform .28s ease;
max-width:100%;
}
.push-banner--visibile{opacity:1;transform:translateY(0)}
.push-banner__accent{
width:5px;flex-shrink:0;
background:linear-gradient(180deg,var(--primary) 0%,var(--accent) 100%);
}
.push-banner__body{padding:12px 10px 12px 8px;min-width:0;flex:1}
.push-banner__k{
font-family:var(--font);font-size:10px;font-weight:800;letter-spacing:.12em;
color:var(--primary);text-transform:uppercase;margin-bottom:4px;
}
.push-banner__title{font-weight:800;font-size:15px;line-height:1.25;margin-bottom:2px}
.push-banner__text{font-size:13px;color:var(--text2);line-height:1.35}
.push-banner__close{
flex-shrink:0;width:40px;border:none;background:transparent;
color:var(--text3);font-size:18px;line-height:1;cursor:pointer;
align-self:stretch;display:flex;align-items:center;justify-content:center;
}
.push-banner__close:active{opacity:.65}
/* --- Loader overlay (cambio lingua) --------------------------------------- */
/* Splash web Capacitor: sotto boot (99999) e gate legale (100000) così restano cliccabili */
.treby-cap-splash{
position:fixed;inset:0;z-index:50000;display:flex;align-items:center;justify-content:center;
background:#fff;pointer-events:none;transition:opacity .28s ease;
}
.treby-cap-splash__logo{
display:block;width:min(200px,48vw);height:auto;object-fit:contain;
}
.treby-cap-splash--out{opacity:0}
.treby-cap-splash--hidden{display:none!important}
/* Blocco avvio: niente connessione, server down, manutenzione (sopra tutta la shell). */
.treby-boot-blocker{
position:fixed;inset:0;z-index:99999;
display:flex;align-items:center;justify-content:center;
padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
background:linear-gradient(165deg, var(--primary-soft) 0%, var(--primary) 45%, #0b3a5c 100%);
color:#fff;
}
.treby-boot-blocker.hidden{display:none!important}
.treby-boot-card{
max-width:420px;width:100%;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.28);
border-radius:24px;
padding:28px 24px 24px;
box-shadow:0 24px 48px rgba(0,0,0,.25);
backdrop-filter:blur(8px);
}
.treby-boot-brand{
width:52px;height:52px;margin:0 auto 16px;
border-radius:16px;
background:rgba(255,255,255,.2);
display:flex;align-items:center;justify-content:center;
font-family:Oswald,sans-serif;font-weight:700;font-size:1.5rem;
}
.treby-boot-brand--logo{
background:rgba(255,255,255,.94);
border:1px solid rgba(255,255,255,.55);
color:var(--primary);
}
.treby-boot-brand-img{
display:block;width:38px;height:38px;object-fit:contain;
}
.treby-boot-title{
margin:0 0 12px;font-size:1.35rem;font-weight:800;text-align:center;
line-height:1.25;font-family:Nunito,sans-serif;
}
.treby-boot-body{
margin:0 0 22px;font-size:0.98rem;line-height:1.5;opacity:.95;text-align:center;
}
.treby-boot-btn{
display:block;width:100%;padding:14px 18px;border:none;border-radius:14px;
font-weight:800;font-size:1rem;letter-spacing:.04em;
background:#fff;color:var(--primary);cursor:pointer;
font-family:Nunito,sans-serif;
}
.treby-boot-btn:active{transform:scale(.98)}
.treby-boot-panel.hidden{display:none}
.treby-boot-meta{
margin:0 0 14px;font-size:0.88rem;line-height:1.45;opacity:.88;text-align:center;
}
.treby-boot-store-row{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.treby-boot-link{
display:block;width:100%;padding:12px 14px;border-radius:14px;text-align:center;font-weight:800;
font-size:0.95rem;text-decoration:none;background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.35);
font-family:Nunito,sans-serif;
}
.treby-boot-link:active{transform:scale(.98)}
.treby-boot-link.hidden{display:none!important}
/* --- Gate consenso documenti legali (blocca shell finché non accettato) --- */
html:not([data-treby-legal-ok]) #app{
visibility:hidden;
pointer-events:none;
}
.treby-legal-gate{
position:fixed;inset:0;z-index:100000;
display:flex;align-items:flex-start;justify-content:center;
padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
overflow-y:auto;-webkit-overflow-scrolling:touch;
background:linear-gradient(165deg, var(--primary-soft) 0%, var(--primary) 45%, #0b3a5c 100%);
color:#fff;
}
.treby-legal-gate.hidden{display:none!important}
html[data-treby-legal-ok] .treby-legal-gate{display:none!important}
.treby-legal-card{
width:100%;max-width:440px;margin:0 auto 24px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.28);
border-radius:24px;padding:24px 20px;
box-shadow:0 24px 48px rgba(0,0,0,.25);
backdrop-filter:blur(8px);
}
.treby-legal-logo{display:block;margin:0 auto 12px;border-radius:16px}
.treby-legal-title{margin:0 0 10px;font-size:1.35rem;font-weight:800;text-align:center;font-family:Nunito,sans-serif;line-height:1.25}
.treby-legal-acc{margin-bottom:16px}
.treby-legal-details{
background:rgba(0,0,0,.12);
border-radius:12px;margin-bottom:8px;
border:1px solid rgba(255,255,255,.2);
}
.treby-legal-details summary{
cursor:pointer;padding:12px 14px;font-weight:700;
list-style:none;
}
.treby-legal-details summary::-webkit-details-marker{display:none}
.treby-legal-iframe{
display:block;width:100%;min-height:200px;height:36vh;border:0;
border-top:1px solid rgba(255,255,255,.15);
background:#fff;
}
.treby-legal-check{
display:flex;gap:10px;align-items:flex-start;font-size:0.9rem;line-height:1.35;
margin:0 0 14px;cursor:pointer;
}
.treby-legal-check input{margin-top:4px;flex-shrink:0}
.treby-legal-body{text-align:center;opacity:.95;line-height:1.45;margin:0 0 16px}
.treby-legal-modal{
position:fixed;inset:0;z-index:100001;
display:flex;align-items:center;justify-content:center;
padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.treby-legal-modal.hidden{display:none!important}
.treby-legal-modal__backdrop{
position:absolute;inset:0;z-index:0;
background:rgba(0,0,0,.45);
}
.treby-legal-modal__sheet{
position:relative;z-index:2;width:100%;max-width:520px;
height:70vh;max-height:70vh;
margin:0;
display:flex;flex-direction:column;
background:var(--surface);color:var(--text);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-lg);
overflow:hidden;
}
.treby-legal-modal__head{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:12px 14px;border-bottom:1px solid var(--border);
flex-shrink:0;
position:relative;z-index:3;
}
.treby-legal-modal__title{margin:0;font-size:1.05rem;font-weight:800}
.treby-legal-modal__close{
position:relative;z-index:4;
border:none;background:transparent;font-size:1.5rem;line-height:1;
cursor:pointer;color:var(--text2);padding:8px 12px;border-radius:8px;
flex-shrink:0;-webkit-tap-highlight-color:transparent;
}
.treby-legal-modal__close:active{opacity:.7}
.treby-legal-modal__frame{
flex:1;min-height:0;width:100%;border:0;background:#fff;
}
/* Modale di benvenuto per la richiesta di abilitazione notifiche push.
Stile coerente con .treby-legal-modal ma più compatto (card centrata
invece di sheet a tutto schermo). */
.treby-push-welcome{
position:fixed;inset:0;z-index:100002;
display:flex;align-items:center;justify-content:center;
padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.treby-push-welcome.hidden{display:none!important}
.treby-push-welcome__backdrop{
position:absolute;inset:0;z-index:0;
background:rgba(0,0,0,.5);
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);
}
.treby-push-welcome__sheet{
position:relative;z-index:2;width:100%;max-width:420px;
background:var(--surface);color:var(--text);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-lg);
padding:24px 22px 20px;
text-align:center;
animation:trebyPushWelcomeIn .22s ease-out;
}
@keyframes trebyPushWelcomeIn{
from{opacity:0;transform:translateY(8px) scale(.98)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.treby-push-welcome__icon{
font-size:42px;line-height:1;margin-bottom:10px;
}
.treby-push-welcome__title{
margin:0 0 8px;font-size:1.15rem;font-weight:800;line-height:1.25;
}
.treby-push-welcome__lang{
margin:0 0 16px;padding:12px;
border:1px solid var(--border);border-radius:16px;background:var(--surface2);
}
.treby-push-welcome__lang-title{
margin:0 0 10px;font-size:.92rem;font-weight:800;color:var(--text);
}
.treby-push-welcome__lang-list{
display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
}
.treby-push-welcome__lang-btn{
width:46px;height:42px;border:1px solid var(--border);border-radius:14px;
background:var(--surface);box-shadow:var(--shadow-sm);font-size:24px;line-height:1;
display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.treby-push-welcome__lang-btn.active{
border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.treby-push-welcome__body{
margin:0 0 18px;font-size:0.95rem;color:var(--text2);line-height:1.45;
}
.treby-push-welcome__field{
display:block;text-align:left;margin:0 0 16px;font-size:.9rem;font-weight:700;color:var(--text);
}
.treby-push-welcome__select{
width:100%;margin-top:7px;border:1px solid var(--border);border-radius:12px;
background:var(--surface);color:var(--text);padding:12px 12px;font-size:1rem;
}
.treby-push-welcome__actions{
display:flex;flex-direction:column;gap:8px;
}
.treby-push-welcome__actions .btn{margin:0}
.legal-register-intro{font-size:0.88rem;color:var(--text2);margin:0 0 10px;line-height:1.4}
.legal-doc-links{
display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;
margin-bottom:14px;font-size:0.9rem;
}
.legal-doc-link{padding:0;background:none;border:none;cursor:pointer;text-decoration:underline;font:inherit;color:var(--primary)}
.legal-doc-sep{opacity:.45}
.lang-overlay{
position:fixed;inset:0;background:var(--overlay);
display:none;align-items:center;justify-content:center;z-index:200;
backdrop-filter:blur(4px);
}
.lang-overlay.show{display:flex}
.lang-overlay .box{
background:var(--surface);padding:20px 28px;border-radius:var(--radius-lg);
display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-lg);
}
.spinner{
width:22px;height:22px;border:3px solid var(--border2);
border-top-color:var(--primary);border-radius:50%;
animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* Anteprima mappa consegna GPS nel carrello (Leaflet riempie l’altezza del contenitore) */
.cart-gps-mini-map .leaflet-container{
height:100%;
width:100%;
font:inherit;
}
/* --- Auth / Account views ------------------------------------------------- */
.brand-text{min-width:0;position:relative}
.auth-hero{
padding:30px 24px 22px;text-align:center;
background:linear-gradient(160deg,var(--primary-soft) 0%,var(--primary) 55%,var(--primary-strong) 100%);
color:#fff;border-radius:0 0 28px 28px;position:relative;
overflow:hidden;
}
.auth-hero::before{
content:"";position:absolute;top:-40px;right:-40px;
width:180px;height:180px;border-radius:50%;
background:radial-gradient(closest-side, rgba(245,199,86,.5), rgba(245,199,86,0) 70%);
pointer-events:none;
transition:background .4s ease;
}
.auth-hero.is-evening::before{
background:
radial-gradient(closest-side, rgba(230,235,255,.55), rgba(230,235,255,0) 70%),
radial-gradient(circle at 35% 45%, rgba(14,74,155,.55) 0 18%, rgba(14,74,155,0) 19%);
}
.auth-hero > *{position:relative;z-index:1}
.auth-hero.compact{padding:22px 20px 18px}
.auth-logo-img{
width:64px;height:64px;object-fit:contain;
display:block;margin:0 auto 12px;
border-radius:20px;
background:rgba(255,255,255,.16);
box-shadow:0 6px 18px rgba(0,0,0,.18);
border:1.5px solid rgba(255,255,255,.28);
}
.auth-title{font-size:22px;font-weight:800;letter-spacing:-.3px}
.auth-sub{font-size:13px;opacity:.92;margin-top:6px;line-height:1.4}
.auth-tagline{
display:inline-block;margin-top:10px;
background:rgba(255,255,255,.2);
padding:5px 12px;border-radius:var(--radius-pill);
font-size:11px;font-weight:700;letter-spacing:.3px;
}
.about-version-badge{
display:none;align-items:center;gap:6px;
margin-top:10px;
background:rgba(255,255,255,.22);
padding:4px 12px;border-radius:var(--radius-pill);
font-size:11px;font-weight:700;
}
.about-version-badge strong{font-weight:800}
.auth-body{padding:20px 20px 30px;display:flex;flex-direction:column;gap:10px}
/* Campi form */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.field .lbl{font-size:12px;font-weight:700;color:var(--text2);letter-spacing:.1px}
.field input,
.field select{
border:1px solid var(--border2);
background:var(--surface);
border-radius:var(--radius-md);
padding:12px 14px;font-size:14px;
color:var(--text);outline:none;
transition:border-color .15s,background .15s;
}
.field input:focus,
.field select:focus{border-color:var(--primary);background:var(--surface2)}
.field input::placeholder{color:var(--text3)}
.field select{
min-height:46px;
appearance:none;
-webkit-appearance:none;
cursor:pointer;
}
.phone-intl-row{display:flex;gap:8px;align-items:stretch;width:100%}
.phone-intl-row select{
flex:0 1 46%;
min-width:0;
max-width:240px;
}
.phone-intl-row input{
flex:1;
min-width:0;
}
.profile-town-select{
padding-right:42px;
background-image:
linear-gradient(45deg, transparent 50%, var(--text3) 50%),
linear-gradient(135deg, var(--text3) 50%, transparent 50%);
background-position:
calc(100% - 19px) 19px,
calc(100% - 13px) 19px;
background-size:6px 6px,6px 6px;
background-repeat:no-repeat;
}
.profile-town-select:disabled{
opacity:.7;
cursor:progress;
}
/* Controlli con classe .field sul nodo stesso (input/textarea/select): stesso look dei campi in wrapper .field */
input.field,
textarea.field,
select.field{
width:100%;
max-width:100%;
box-sizing:border-box;
display:block;
border:1px solid var(--border2);
background:var(--surface);
border-radius:var(--radius-md);
padding:12px 14px;
font-size:14px;
line-height:1.35;
color:var(--text);
outline:none;
transition:border-color .15s,background .15s,box-shadow .15s;
margin-bottom:10px;
}
textarea.field{
min-height:88px;
resize:vertical;
font-family:inherit;
}
select.field{
cursor:pointer;
appearance:none;
padding-right:36px;
background-color:var(--surface);
background-image:linear-gradient(45deg,transparent 50%,var(--text2) 50%),linear-gradient(135deg,var(--text2) 50%,transparent 50%);
background-position:calc(100% - 18px) calc(1em + 2px),calc(100% - 13px) calc(1em + 2px);
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
}
input.field:focus,
textarea.field:focus,
select.field:focus{
border-color:var(--primary);
background-color:var(--surface2);
box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent);
}
input.field::placeholder,
textarea.field::placeholder{color:var(--text3)}
[data-theme="dark"] select.field{
background-color:var(--surface);
}
/* Indirizzo dimostrativo carrello (ospite non loggato) */
.cart-guest-address-demo{
display:block;
margin-top:6px;
font-size:13px;
color:var(--text2);
line-height:1.45;
}
.check-row{
display:flex;align-items:flex-start;gap:10px;
font-size:13px;color:var(--text2);
padding:6px 0;cursor:pointer;user-select:none;
}
.check-row input{
width:18px;height:18px;accent-color:var(--primary);margin-top:2px;flex-shrink:0;
}
.auth-row-end{display:flex;justify-content:flex-end;margin-top:-2px}
.auth-switch{
text-align:center;margin-top:16px;
font-size:13px;color:var(--text2);
display:flex;justify-content:center;gap:6px;flex-wrap:wrap;
}
.link{
color:var(--primary);font-weight:700;cursor:pointer;
font-size:13px;text-decoration:none;
}
.link:hover{text-decoration:underline}
.auth-sep{
display:flex;align-items:center;gap:10px;
margin:14px 0 8px;
color:var(--text3);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
}
.auth-sep::before,.auth-sep::after{
content:"";flex:1;height:1px;background:var(--border);
}
/* Bottoni social / link */
.btn-social{
background:var(--surface);
border:1px solid var(--border2);
color:var(--text);
font-weight:700;
gap:10px;
}
.btn-social .soc-ico{
width:24px;height:24px;border-radius:6px;
display:inline-flex;align-items:center;justify-content:center;
font-weight:800;
background:var(--surface2);
}
/* Loghi ufficiali Google / Apple (SVG in img/brand/) */
.btn-social .soc-ico--brand{
background:transparent;
padding:0;
}
.btn-social .soc-ico--brand img{
display:block;width:20px;height:20px;object-fit:contain;
}
[data-theme="dark"] .btn-social .auth-brand-apple{
filter:invert(1);
}
.btn-link{
background:transparent;color:var(--primary);
border:none;font-weight:700;padding:10px;
}
.auth-version{
display:none;margin-top:24px;text-align:center;
font-size:11px;color:var(--text3);font-weight:700;
}
.auth-version strong{color:var(--primary)}
/* --- Profilo -------------------------------------------------------------- */
.profile-header{
padding:26px 20px 22px;
background:linear-gradient(160deg,var(--primary-soft) 0%,var(--primary) 55%,var(--primary-strong) 100%);
color:#fff;display:flex;align-items:center;gap:14px;
border-radius:0 0 24px 24px;
position:relative;overflow:hidden;
}
.profile-header::before{
content:"";position:absolute;top:-30px;right:-30px;
width:140px;height:140px;border-radius:50%;
background:radial-gradient(closest-side, rgba(245,199,86,.45), rgba(245,199,86,0) 70%);
pointer-events:none;
transition:background .4s ease;
}
.profile-header.is-evening::before{
background:
radial-gradient(closest-side, rgba(230,235,255,.55), rgba(230,235,255,0) 70%),
radial-gradient(circle at 35% 45%, rgba(14,74,155,.55) 0 18%, rgba(14,74,155,0) 19%);
}
.profile-header > *{position:relative;z-index:1}
.profile-avatar{
width:62px;height:62px;border-radius:50%;
background:rgba(255,255,255,.22);
display:flex;align-items:center;justify-content:center;
font-size:26px;font-weight:800;flex-shrink:0;
border:2px solid rgba(255,255,255,.32);
overflow:hidden;
}
.profile-avatar--tap{cursor:pointer;outline-offset:3px}
.profile-avatar--tap:focus-visible{outline:2px solid rgba(255,255,255,.95)}
.profile-avatar-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.profile-avatar-letter{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.profile-avatar-hint{
font-size:11px;font-weight:700;opacity:.88;margin-top:8px;line-height:1.35;
}
.profile-name{font-size:18px;font-weight:800;letter-spacing:-.2px}
.profile-mail{font-size:12px;opacity:.9;margin-top:2px}
.profile-member{font-size:11px;opacity:.8;margin-top:2px}
/* ID utente + versione app in fondo profilo (sopra tagline) */
.profile-user-meta--footer{
text-align:center;padding:20px 16px 6px;
}
.profile-user-meta--footer .profile-user-id{
font-size:11px;font-weight:700;color:var(--text3);opacity:.88;
}
.profile-user-meta--footer .profile-app-version{
font-size:11px;font-weight:600;color:var(--text3);opacity:.75;margin-top:4px;
}
/* FAQ aiuto profilo */
.help-faq-intro-text{font-size:14px;line-height:1.5;color:var(--text2);margin:0 0 8px}
.help-faq-list{padding-bottom:24px}
.help-faq-item{
border:1px solid var(--hairline,rgba(255,255,255,.08));
border-radius:12px;
margin-bottom:10px;
background:var(--surface2,rgba(255,255,255,.04));
overflow:hidden;
}
.help-faq-item[open]{background:var(--surface,rgba(255,255,255,.06))}
.help-faq-q{
cursor:pointer;
list-style:none;
font-weight:700;
font-size:14px;
padding:12px 14px;
color:var(--text);
line-height:1.35;
}
.help-faq-q::-webkit-details-marker{display:none}
.help-faq-a{
font-size:13px;
line-height:1.5;
color:var(--text2);
padding:0 14px 12px;
border-top:1px solid var(--hairline,rgba(255,255,255,.06));
padding-top:10px;
}
.profile-section{padding:16px 16px 8px}
.profile-section-title{
font-size:12px;font-weight:800;color:var(--text3);
text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;padding:0 4px;
}
.profile-list{
background:var(--surface);
border:.5px solid var(--border);
border-radius:var(--radius-md);
overflow:hidden;
}
.profile-row{
display:flex;align-items:center;gap:12px;
padding:13px 14px;cursor:pointer;
border-bottom:.5px solid var(--border);
transition:background .15s;
}
.profile-row:last-child{border:none}
.profile-row:active{background:var(--surface2)}
.profile-row .ico{
width:32px;height:32px;border-radius:9px;
background:var(--surface2);
display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;
}
.profile-row .lbl{flex:1;font-size:14px;font-weight:700;color:var(--text)}
.profile-row .val{font-size:12px;color:var(--text2);font-weight:600}
.profile-row .chev{color:var(--text3);font-size:18px}
.profile-row.danger .lbl{color:var(--danger)}
.profile-row.danger .ico{background:var(--danger-bg);color:var(--danger)}
.profile-delete-account{
margin-top:28px;padding:14px;border:1px solid var(--danger-bg);
border-radius:var(--radius-md);background:rgba(220,38,38,.06);
}
.profile-delete-account__title{
font-size:13px;font-weight:900;color:var(--danger);text-transform:uppercase;
letter-spacing:.04em;margin-bottom:6px;
}
.profile-delete-account__text{
margin:0 0 12px;font-size:13px;line-height:1.45;color:var(--text2);
}
.profile-notif-list{
background:var(--surface);
border:.5px solid var(--border);
border-radius:var(--radius-md);
overflow:hidden;
}
.profile-notif-row{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:12px 14px;border-bottom:.5px solid var(--border);
cursor:pointer;font-size:14px;font-weight:700;color:var(--text);
}
.profile-notif-row:last-child{border:none}
.profile-notif-row input[type="checkbox"]{width:20px;height:20px;accent-color:var(--accent)}
.service-card__fav{
position:absolute;top:8px;right:8px;z-index:3;
width:40px;height:40px;border-radius:50%;
border:none;cursor:pointer;
background:rgba(0,0,0,.35);color:#fff;font-size:20px;line-height:1;
display:flex;align-items:center;justify-content:center;
box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.service-card__fav--on{background:rgba(220,38,38,.85);color:#fff}
.profile-version{
text-align:center;padding:16px;font-size:11px;color:var(--text3);font-weight:700;
}
.profile-version strong{color:var(--primary)}
/* --- About --------------------------------------------------------------- */
.about-developer{
display:flex;gap:14px;align-items:flex-start;
padding:4px 2px 14px;
}
.about-developer-photo{
width:88px;height:88px;border-radius:50%;
object-fit:cover;flex-shrink:0;
border:2px solid var(--border2);
background:var(--surface2);
}
.about-developer-inner{flex:1;min-width:0}
.about-developer-role{
font-size:11px;font-weight:800;color:var(--text3);
text-transform:uppercase;letter-spacing:.55px;margin-bottom:4px;
}
.about-developer-name{
font-size:16px;font-weight:800;color:var(--text);letter-spacing:-.2px;
margin-bottom:6px;
}
.about-developer-bio{
font-size:14px;line-height:1.5;color:var(--text2);
margin:0 0 10px;
}
.about-developer-social{
display:flex;align-items:center;flex-wrap:wrap;gap:6px;
font-size:13px;font-weight:700;
}
.about-social-link{
color:var(--primary);text-decoration:none;
}
.about-social-link:hover{text-decoration:underline}
.about-social-sep{color:var(--text3);font-weight:700}
.about-text{
font-size:14px;line-height:1.55;color:var(--text2);
padding:4px 2px 12px;
}
.about-list{
background:var(--surface);
border:.5px solid var(--border);
border-radius:var(--radius-md);
overflow:hidden;margin-top:8px;
}
.about-row{
display:flex;align-items:center;gap:12px;
padding:13px 14px;cursor:pointer;
border-bottom:.5px solid var(--border);
}
.about-row:last-child{border:none}
.about-row .ico{font-size:18px;width:28px;text-align:center}
.about-row .lbl{flex:1;font-size:14px;font-weight:700;color:var(--text)}
.about-row .chev{color:var(--text3);font-size:18px}
.about-credits{
text-align:center;margin-top:18px;font-size:11px;
color:var(--text3);font-weight:700;letter-spacing:.3px;
}
.brand-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* --- Utility -------------------------------------------------------------- */
.hidden{display:none !important}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
/* --- Scrollbar generica --------------------------------------------------- */
.scroll-area::-webkit-scrollbar,
.chat-stream::-webkit-scrollbar{width:4px}
.scroll-area::-webkit-scrollbar-thumb,
.chat-stream::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
/* Home: regola globale scrollbar sopra non applica (override in blocco hero premium) */
html[data-shell-tab="home"] section.view[data-view="home"] .scroll-area::-webkit-scrollbar{width:0;display:none}
/* ==========================================================================
HEADER CART BUTTON + TEMA NASCOSTO + PICKER CARRELLI
Queste regole stanno in fondo per vincere su eventuali regole pre-esistenti.
========================================================================== */
/* Pulsante tema: temporaneamente nascosto (verrà ri-attivato/spostato in futuro). */
#themeToggleBtn{display:none !important}
/* FAB "Vai al carrello" nella vista detail: disattivato, l'accesso al carrello
ora avviene dal bottone nell'header. */
.cart-fab{display:none !important}
/* Pulsante carrello nell'header: nascosto di default, diventa visibile quando
c'è almeno un articolo in uno dei carrelli (classe .show gestita da JS). */
.cart-header-btn{display:none;position:relative}
.cart-header-btn.show{display:inline-flex}
.cart-header-btn .cart-header-badge{
position:absolute;top:-2px;right:-2px;
min-width:16px;height:16px;padding:0 4px;
background:var(--accent);color:#fff;
font-size:10px;font-weight:800;line-height:1;
border-radius:999px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 0 0 2px var(--bg);
}
/* ---------- Picker carrelli (scelta quale carrello aprire) ---------- */
.picker-header{padding:16px 16px 8px}
.picker-header h2{font-size:20px;font-weight:800;color:var(--text);margin:0}
.picker-header p{font-size:13px;color:var(--text2);margin:4px 0 0;line-height:1.4}
.cart-picker-list{
padding:8px 16px 24px;
display:flex;flex-direction:column;gap:10px;
}
.cart-picker-card{
display:flex;align-items:center;gap:12px;
padding:12px;
background:var(--surface);
border:.5px solid var(--border);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
cursor:pointer;
transition:transform .1s ease, box-shadow .15s ease;
}
.cart-picker-card:active{transform:scale(.98)}
.cart-picker-card:hover{box-shadow:var(--shadow-md)}
.cart-picker-cover{
width:56px;height:56px;flex-shrink:0;
border-radius:14px;
display:flex;align-items:center;justify-content:center;
font-size:28px;color:#fff;
}
.cart-picker-body{flex:1;min-width:0}
.cart-picker-name{
font-size:14px;font-weight:800;color:var(--text);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cart-picker-meta{
font-size:12px;color:var(--text2);margin-top:3px;
display:flex;align-items:center;gap:6px;
}
.cart-picker-total{color:var(--accent);font-weight:800}
.dot-sep{color:var(--text3)}
.cart-picker-chev{
font-size:24px;color:var(--text3);font-weight:300;
flex-shrink:0;line-height:1;
}
/* ---------- Intestazione ristorante nella vista cart ---------- */
.cart-rest-header{
display:flex;align-items:center;gap:12px;
padding:14px 16px 0;
}
.cart-rest-badge{
width:44px;height:44px;flex-shrink:0;
border-radius:12px;
display:flex;align-items:center;justify-content:center;
font-size:22px;color:#fff;
}
.cart-rest-label{
font-size:10px;text-transform:uppercase;letter-spacing:.5px;
color:var(--text3);font-weight:700;
}
.cart-rest-name{
font-size:15px;font-weight:800;color:var(--text);
}
/* Evidenziazione breve dopo tap notifica push (ordine / prenotazione / promo). */
@keyframes treby-push-flash-kf{
0%{box-shadow:0 0 0 0 rgba(37,99,235,.55)}
40%{box-shadow:0 0 0 6px rgba(37,99,235,.25)}
100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}
}
.treby-push-flash{
animation:treby-push-flash-kf 1.2s ease-out 2;
border-radius:12px;
}
/* --- Blocco autore cliccabile (profilo redattore utente app) --- */
.news-author-tap{
cursor:pointer;border-radius:14px;padding:4px;margin:-4px;
outline-offset:2px;
}
.news-author-tap:focus-visible{outline:2px solid var(--primary)}
/* --- Vista profilo pubblico redattore --- */
.writer-profile-loading,
.writer-profile-empty{
padding:20px 16px;text-align:center;color:var(--text2);font-weight:600;font-size:14px;
}
.writer-profile-header{
display:flex;align-items:flex-start;gap:16px;padding:22px 16px 12px;
background:linear-gradient(160deg,var(--primary-soft) 0%,var(--primary) 55%,var(--primary-strong) 100%);
color:#fff;border-radius:0 0 22px 22px;
}
.writer-profile-header .service-card__fav.writer-profile-fav-ent{
position:static;top:auto;right:auto;flex-shrink:0;margin-top:2px;
align-self:flex-start;
}
.writer-profile-headtext{flex:1;min-width:0}
.writer-profile-avatar{
width:88px;height:88px;border-radius:50%;flex-shrink:0;
background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;
border:2px solid rgba(255,255,255,.35);overflow:hidden;
}
.writer-profile-avatar-img{width:100%;height:100%;object-fit:cover;display:block}
.writer-profile-avatar-letter{font-size:32px;font-weight:800}
.writer-profile-name{margin:0;font-size:20px;font-weight:800;letter-spacing:-.3px}
.writer-profile-since{font-size:12px;opacity:.9;margin-top:6px;font-weight:600}
.writer-profile-section-title{
margin:18px 16px 8px;font-size:13px;font-weight:800;color:var(--text3);
text-transform:uppercase;letter-spacing:.5px;
}
.writer-profile-list{padding:0 12px 8px;display:flex;flex-direction:column;gap:10px}
.writer-profile-card{
display:flex;align-items:stretch;gap:12px;width:100%;text-align:left;
padding:12px;border:none;border-radius:16px;
background:var(--surface);box-shadow:var(--shadow-sm);
cursor:pointer;font:inherit;color:inherit;
}
.writer-profile-card:active{transform:scale(.98)}
.writer-profile-card-ico{
width:52px;height:52px;flex-shrink:0;border-radius:14px;
display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;
}
.writer-profile-card-body{flex:1;min-width:0}
.writer-profile-card-title{font-size:14px;font-weight:800;color:var(--text);line-height:1.25}
.writer-profile-card-meta{font-size:11px;color:var(--text3);margin-top:4px;font-weight:600}
.writer-profile-back-wrap{padding:8px 16px 24px}
/* --- Redazione notizie mobile --- */
.news-composer-wrap{padding:16px 16px 36px;max-width:560px;margin:0 auto}
.news-composer-title{margin:0 0 16px;font-size:20px;font-weight:800;color:var(--text)}
.news-composer-label{
display:block;font-size:12px;font-weight:700;color:var(--text3);
margin:14px 0 6px;text-transform:uppercase;letter-spacing:.4px;
}
.news-composer-hint{
margin:6px 2px 0;font-size:12px;line-height:1.4;color:var(--text3);font-weight:500;
}
.news-composer-input{
width:100%;box-sizing:border-box;
border:1px solid var(--border2);background:var(--surface);
border-radius:var(--radius-md);padding:12px 14px;font-size:14px;
color:var(--text);outline:none;
transition:border-color .15s,background .15s;
}
.news-composer-input:focus{border-color:var(--primary);background:var(--surface2)}
.news-composer-input::placeholder{color:var(--text3)}
.news-composer-select{appearance:none;background-position:right 12px center;background-repeat:no-repeat;padding-right:36px}
.news-composer-ta{min-height:88px;resize:vertical;line-height:1.45;font-family:inherit}
.news-composer-actions{margin-top:12px}
.news-composer-actions--publish{margin-top:18px}
.mt-8{margin-top:8px}
/* Riga selettore emoji */
.news-composer-emoji-block{display:flex;flex-direction:column;gap:8px;margin-bottom:2px}
.news-composer-emoji-visibility{font-size:13px;font-weight:600;color:var(--text2)}
.news-composer-emoji-row{display:flex;align-items:center;gap:10px}
.news-composer-emoji-display{
appearance:none;border:1px solid var(--border2);background:var(--surface);
width:56px;height:56px;border-radius:14px;font-size:30px;line-height:1;
display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
flex:0 0 auto;
transition:transform .12s,border-color .15s;
}
.news-composer-emoji-display:active{transform:scale(.96)}
.news-composer-emoji-btn{
appearance:none;border:1px solid var(--border2);background:var(--surface2);
color:var(--text);font-weight:700;font-size:13px;
border-radius:999px;padding:10px 16px;cursor:pointer;flex:1 1 auto;
display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;
}
.news-composer-emoji-btn:active{transform:scale(.98)}
/* Bottom-sheet emoji */
.news-composer-emoji-overlay{
position:fixed;inset:0;background:var(--overlay);
display:flex;align-items:flex-end;justify-content:center;
z-index:9000;backdrop-filter:blur(4px);
opacity:0;pointer-events:none;transition:opacity .18s ease-out;
}
.news-composer-emoji-overlay.show{opacity:1;pointer-events:auto}
.news-composer-emoji-sheet{
width:100%;max-width:560px;
background:var(--surface);border-radius:22px 22px 0 0;
padding:10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
box-shadow:var(--shadow-lg);
transform:translateY(20px);transition:transform .22s cubic-bezier(.2,.8,.2,1);
max-height:78vh;display:flex;flex-direction:column;
}
.news-composer-emoji-overlay.show .news-composer-emoji-sheet{transform:translateY(0)}
.news-composer-emoji-handle{
width:44px;height:4px;border-radius:2px;background:var(--border2);
margin:6px auto 8px;
}
.news-composer-emoji-row-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.news-composer-emoji-title{margin:0;font-size:16px;font-weight:800;color:var(--text)}
.news-composer-emoji-close{
appearance:none;border:none;background:transparent;color:var(--text2);
font-size:18px;width:36px;height:36px;border-radius:999px;cursor:pointer;
}
.news-composer-emoji-close:active{background:var(--surface2)}
.news-composer-emoji-search{
width:100%;box-sizing:border-box;
border:1px solid var(--border2);background:var(--surface2);
border-radius:var(--radius-md);padding:10px 14px;font-size:14px;
color:var(--text);outline:none;margin-bottom:10px;
}
.news-composer-emoji-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));
gap:6px;overflow-y:auto;padding-right:2px;flex:1 1 auto;
-webkit-overflow-scrolling:touch;
}
.news-composer-emoji-cell{
appearance:none;border:1px solid transparent;background:var(--surface2);
border-radius:12px;font-size:24px;line-height:1;
height:48px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.news-composer-emoji-cell:active{transform:scale(.94);background:var(--primary-light)}
.news-composer-emoji-empty{
grid-column:1/-1;text-align:center;padding:24px 8px;color:var(--text3);font-size:13px;font-weight:600;
}
/* Riga selettore colore brand */
.news-composer-color-row{
display:flex;align-items:center;gap:12px;
border:1px solid var(--border2);background:var(--surface);
border-radius:var(--radius-md);padding:10px 12px;
}
.news-composer-color-swatch{
width:32px;height:32px;border-radius:10px;border:1px solid var(--border2);
flex:0 0 auto;
}
.news-composer-color-inp{
appearance:none;-webkit-appearance:none;border:none;background:transparent;
width:48px;height:36px;cursor:pointer;padding:0;
}
.news-composer-color-inp::-webkit-color-swatch-wrapper{padding:0}
.news-composer-color-inp::-webkit-color-swatch{border:1px solid var(--border2);border-radius:8px}
.news-composer-color-hex{font-size:13px;font-weight:700;color:var(--text2);font-family:var(--mono, monospace)}
.news-composer-cover-row{margin-top:14px;padding:12px;border:1px solid var(--border2);border-radius:12px;background:var(--surface2)}
.news-composer-cover-preview-wrap{border-radius:10px;overflow:hidden;aspect-ratio:2/1;max-height:180px;background:var(--surface3);margin-bottom:10px}
.news-composer-cover-preview-img{width:100%;height:100%;object-fit:cover;display:block}
.news-composer-cover-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.news-composer-cover-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0,0,0,0)}
/* Pulsante Youkiko (tono caldo, allineato al brand della mascotte) */
.btn-youkiko{
background:linear-gradient(135deg,#FFB347 0%,#E8612C 100%);
color:#fff;border:none;
box-shadow:0 6px 14px rgba(232,97,44,.25);
font-weight:800;letter-spacing:.2px;
}
.btn-youkiko:hover{filter:brightness(1.05)}
.btn-youkiko:active{transform:scale(.98)}
.btn-youkiko:disabled{opacity:.65;cursor:not-allowed;box-shadow:none}
.news-composer-yk-btn{min-height:48px;font-size:15px}
/* Toolbar generica per blocchi */
.news-composer-blocks-toolbar{
display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 10px;
}
.news-composer-blocks-add{
appearance:none;border:1px dashed var(--border2);background:var(--surface);
color:var(--text2);font-weight:700;font-size:13px;
border-radius:999px;padding:8px 14px;cursor:pointer;min-height:40px;
}
.news-composer-blocks-add:active{transform:scale(.98);background:var(--surface2)}
/* Card singolo blocco */
.news-composer-blocks-host{display:flex;flex-direction:column;gap:10px}
.news-composer-block{
border:1px solid var(--border2);background:var(--surface);
border-radius:14px;overflow:hidden;
}
.news-composer-block__bar{
display:flex;align-items:center;gap:6px;
padding:8px 10px;background:var(--surface2);
border-bottom:1px solid var(--border2);
}
.news-composer-block__label{
font-size:11px;font-weight:800;color:var(--text3);
text-transform:uppercase;letter-spacing:.5px;flex:1 1 auto;
}
.news-composer-block__act{
appearance:none;border:none;background:transparent;color:var(--text2);
font-size:14px;width:32px;height:32px;border-radius:8px;cursor:pointer;
}
.news-composer-block__act:active{background:var(--surface)}
.news-composer-block__inner{padding:10px 12px}
/* Toolbar interna del paragrafo */
.news-composer-rich-toolbar{
display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;
padding:6px;border:1px solid var(--border2);border-radius:10px;background:var(--surface2);
}
.news-composer-rich-btn{
appearance:none;border:1px solid var(--border2);background:var(--surface);
color:var(--text);font-size:14px;font-weight:700;
width:36px;height:36px;border-radius:8px;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
}
.news-composer-rich-btn:active{transform:scale(.94);background:var(--surface2)}
.news-composer-rich-color{
position:relative;display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;border:1px solid var(--border2);border-radius:8px;background:var(--surface);
cursor:pointer;overflow:hidden;
}
.news-composer-rich-color__dot{
width:18px;height:18px;border-radius:50%;background:#111;border:1px solid var(--border2);
}
.news-composer-rich-color__inp{
position:absolute;inset:0;opacity:0;cursor:pointer;border:none;background:transparent;
}
/* Editor contenteditable */
.news-composer-rich{
min-height:96px;outline:none;font-size:15px;line-height:1.5;color:var(--text);
padding:8px 10px;border:1px solid var(--border2);border-radius:10px;background:var(--surface);
}
.news-composer-rich:focus{border-color:var(--primary);background:var(--surface2)}
.news-composer-rich p{margin:0 0 8px}
.news-composer-rich p:last-child{margin-bottom:0}
.news-composer-rich a{color:var(--primary);text-decoration:underline}
.news-composer-rich ul{margin:0 0 8px 18px;padding:0}
/* Citazione */
.news-composer-quote-text{
width:100%;box-sizing:border-box;min-height:80px;resize:vertical;
border:1px solid var(--border2);border-radius:10px;background:var(--surface);
padding:10px 12px;font-size:14px;line-height:1.45;color:var(--text);outline:none;
font-family:inherit;
}
.news-composer-quote-text:focus{border-color:var(--primary);background:var(--surface2)}
.news-composer-quote-attr{
width:100%;box-sizing:border-box;margin-top:8px;
border:1px solid var(--border2);border-radius:10px;background:var(--surface);
padding:10px 12px;font-size:13px;color:var(--text);outline:none;
}
.news-composer-quote-attr:focus{border-color:var(--primary);background:var(--surface2)}
/* Blocco galleria foto (composer mobile) */
.news-composer-gallery-hint{margin:0 0 6px}
.news-composer-gallery-status{
font-size:12px;font-weight:700;color:var(--text2);
background:var(--surface2);border:1px dashed var(--border2);
border-radius:10px;padding:6px 10px;margin:0 0 10px;
}
.news-composer-gallery-grid{
display:grid;grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
gap:10px;margin-bottom:10px;
}
.news-composer-gallery-tile{
position:relative;background:var(--surface);
border:1px solid var(--border2);border-radius:12px;overflow:hidden;
display:flex;flex-direction:column;
}
.news-composer-gallery-img{
display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#0001;
}
.news-composer-gallery-cap{
width:100%;box-sizing:border-box;border:0;border-top:1px solid var(--border2);
background:var(--surface);padding:8px 10px;font-size:12px;color:var(--text);outline:none;
}
.news-composer-gallery-cap:focus{background:var(--surface2)}
.news-composer-gallery-tile__act{
position:absolute;top:6px;right:6px;display:flex;gap:4px;
}
.news-composer-gallery-rm,
.news-composer-gallery-mv{
appearance:none;border:0;background:rgba(0,0,0,.55);color:#fff;
width:28px;height:28px;border-radius:50%;font-size:14px;font-weight:800;
display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.news-composer-gallery-rm:hover,
.news-composer-gallery-mv:hover{background:rgba(0,0,0,.78)}
.news-composer-gallery-file{display:none}
.news-composer-gallery-add{margin-top:4px}
.news-composer-gallery-add.is-loading{opacity:.6;cursor:progress}
/* Overlay caricamento (IA / pubblicazione) */
.news-composer-loading{
position:fixed;inset:0;background:var(--overlay);
display:flex;align-items:center;justify-content:center;
z-index:9100;backdrop-filter:blur(4px);
opacity:0;pointer-events:none;transition:opacity .15s ease-out;
}
.news-composer-loading.show{opacity:1;pointer-events:auto}
.news-composer-loading__box{
background:var(--surface);padding:18px 24px;border-radius:var(--radius-lg);
display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-lg);
max-width:84vw;
}
.news-composer-loading__spinner{
width:24px;height:24px;flex:0 0 auto;
}
.news-composer-loading__txt{
font-weight:800;color:var(--text);font-size:14px;line-height:1.35;
}
/* Programmazione data/ora di uscita (composer mobile) */
.news-composer-sched-row{
display:flex;flex-direction:column;gap:10px;
margin:6px 0 10px;
}
/* Due colonne solo per data+ora; il pulsante «Adesso» resta sotto a tutta larghezza */
.news-composer-sched-fields{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:10px 12px;
align-items:start;
}
.news-composer-sched-grp{
display:flex;flex-direction:column;gap:4px;min-width:0;
}
.news-composer-sched-cap{
font-size:10px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;
line-height:1.2;
}
/* Input nativi più compatti (evitano overflow e altezze diverse tra browser) */
.news-composer-sched-grp .news-composer-input.news-composer-date,
.news-composer-sched-grp .news-composer-input.news-composer-time{
width:100%;max-width:100%;min-width:0;box-sizing:border-box;
padding:8px 10px;font-size:15px;line-height:1.25;
min-height:40px;height:auto;
}
.news-composer-sched-now{
width:100%;max-width:100%;box-sizing:border-box;
font-size:13px;font-weight:700;padding:8px 12px;
}
@media (max-width:340px){
.news-composer-sched-fields{grid-template-columns:1fr;gap:10px}
}
/* Pulsante elimina notizia (modalità modifica composer) */
.btn-danger{
background:#dc2626;color:#fff;border:1px solid #b91c1c;
font-weight:800;
}
.btn-danger:hover{background:#b91c1c}
.btn-danger:active{background:#991b1b}
.news-composer-delete-btn{margin-top:10px}
/* Composer notizie: bottone «🚨 EMERGENZA» (sopra il tasto Pubblica, solo enti abilitati). */
.news-composer-emergency-btn{
display:block;
width:100%;
padding:12px 16px;
margin-bottom:10px;
font-weight:700;
font-size:0.95rem;
border-radius:10px;
border:2px solid #dc2626;
background:#ffffff;
color:#b91c1c;
cursor:pointer;
transition:background .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease;
letter-spacing:.02em;
}
.news-composer-emergency-btn:hover{
background:#fef2f2;
box-shadow:0 2px 8px rgba(220,38,38,.18);
}
.news-composer-emergency-btn:active{transform:translateY(1px)}
.news-composer-emergency-btn.is-active{
background:#dc2626;
color:#ffffff;
border-color:#b91c1c;
box-shadow:0 4px 14px rgba(220,38,38,.35);
}
.news-composer-emergency-btn.is-active:hover{background:#b91c1c}
@media (prefers-color-scheme: dark){
.news-composer-emergency-btn{
background:transparent;
color:#fca5a5;
border-color:#fca5a5;
}
.news-composer-emergency-btn:hover{background:rgba(220,38,38,.12)}
.news-composer-emergency-btn.is-active{
background:#dc2626;
color:#ffffff;
border-color:#dc2626;
}
}
/* Composer notizie: modal di conferma EMERGENZA. */
.news-composer-emergency-backdrop{}
.news-composer-emergency-panel{
border-top:4px solid #dc2626;
}
.news-composer-emergency-modal-title{
color:#b91c1c;
font-weight:800;
}
.news-composer-emergency-modal-hint{
font-size:0.85rem;
opacity:.75;
}
.news-composer-emergency-modal-yes{
background:#dc2626;
color:#ffffff;
border:1px solid #b91c1c;
font-weight:700;
margin-top:6px;
}
.news-composer-emergency-modal-yes:hover{background:#b91c1c}
.news-composer-emergency-modal-yes:active{background:#991b1b}
.news-composer-emergency-modal-no{margin-top:6px}
@media (prefers-color-scheme: dark){
.news-composer-emergency-modal-title{color:#fca5a5}
}
/* Composer notizie: etichetta sezione + pulsante ? (modale aiuto) */
.news-composer-label-with-help{
display:flex;align-items:center;gap:6px;flex-wrap:wrap;
margin:10px 0 4px;
}
.news-composer-help-q{
flex-shrink:0;width:26px;height:26px;padding:0;border-radius:999px;
border:.5px solid var(--border);background:var(--surface2);
color:var(--text2);font-weight:900;font-size:14px;line-height:1;cursor:pointer;
}
.news-composer-help-q:active{transform:scale(.96)}
.news-composer-help-q--inBlock{margin-left:4px}
.news-composer-help-backdrop{
position:fixed;inset:0;z-index:12000;
background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;
padding:16px;padding-bottom:max(16px, env(safe-area-inset-bottom, 0px));
}
.news-composer-help-panel{
width:100%;max-width:420px;max-height:min(78vh, 560px);
overflow:auto;background:var(--surface);border-radius:var(--radius-lg);
border:.5px solid var(--border);padding:16px 16px 12px;
box-shadow:0 -8px 32px rgba(0,0,0,.2);
}
.news-composer-help-title{
margin:0 0 10px;font-size:17px;font-weight:800;color:var(--text);
}
.news-composer-help-body{margin:0 0 14px}
.news-composer-help-p{
margin:0 0 10px;font-size:14px;line-height:1.45;color:var(--text2);
}
.news-composer-help-p:last-child{margin-bottom:0}
.news-composer-help-close{margin-top:4px}
/* Selezione indirizzo di consegna nel carrello */
.shipping-pick-list{width:100%}
.shipping-pick-row{
display:flex;align-items:flex-start;gap:10px;padding:12px 14px;margin-bottom:8px;
border-radius:var(--radius-lg);border:.5px solid var(--border);background:var(--surface2);
cursor:pointer;user-select:none;
}
.shipping-pick-row--on{border-color:var(--accent);background:var(--accent-bg)}
.shipping-pick-radio{flex-shrink:0;width:22px;text-align:center;font-size:14px;line-height:1.4}
.address-card--pick{align-items:flex-start}
/* --- Gestione «I miei ristoranti» (editor menu/orari) -------------------- */
#managedRestaurantsScroll,#managedRestaurantDetailScroll{
background:linear-gradient(180deg, rgba(30,95,168,.07) 0%, transparent 160px);
}
/* Lista scelta locale (vista elenco) */
.mr-pick-hint{
margin:0;padding:4px 16px 14px;
font-size:15px;font-weight:800;color:var(--text);
letter-spacing:-0.02em;
}
.mr-pick-list{
padding:0 16px 22px;
display:flex;flex-direction:column;gap:10px;
}
.mr-pick-row{
display:flex;align-items:center;gap:12px;
padding:14px 14px;
border-radius:16px;
border:.5px solid var(--border);
background:var(--surface);
box-shadow:0 1px 0 rgba(0,0,0,.05), 0 4px 14px rgba(30,95,168,.07);
cursor:pointer;user-select:none;
transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .08s ease;
}
.mr-pick-row:hover{
border-color:rgba(30,95,168,.38);
box-shadow:0 2px 0 rgba(0,0,0,.04), 0 6px 18px rgba(30,95,168,.1);
}
.mr-pick-row:active{transform:scale(.99)}
.mr-pick-row:focus-visible{
outline:2px solid var(--accent);outline-offset:2px;
}
.mr-pick-emoji{
width:48px;height:48px;flex-shrink:0;border-radius:14px;
background:linear-gradient(145deg, rgba(30,95,168,.14), rgba(30,95,168,.06));
display:flex;align-items:center;justify-content:center;
font-size:26px;line-height:1;
box-shadow:inset 0 0 0 1px rgba(30,95,168,.16);
}
.mr-pick-body{flex:1;min-width:0}
.mr-pick-name{font-size:16px;font-weight:800;color:var(--text);line-height:1.25;letter-spacing:-0.02em}
.mr-pick-badge{
margin-top:5px;font-size:11px;font-weight:800;
color:var(--text3);text-transform:uppercase;letter-spacing:.05em;
}
.mr-pick-badge--on{color:var(--primary)}
.mr-pick-chev{flex-shrink:0;font-size:20px;font-weight:700;color:var(--text3);line-height:1;opacity:.88}
.mr-page-title{
font-size:22px;font-weight:800;padding:16px 16px 8px;margin:0;
letter-spacing:-0.02em;color:var(--text);
}
/* Schede dettaglio ristorante (allineate alla redazione notizie) */
.mr-composer-wrap{max-width:560px;margin:0 auto}
.mr-composer-wrap .mr-card{margin-left:0;margin-right:0}
.mr-detail-title-row{
display:flex;align-items:center;gap:10px;padding:4px 0 6px;
}
.mr-detail-emoji{
font-size:28px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:14px;background:rgba(30,95,168,.10);
box-shadow:inset 0 0 0 1px rgba(30,95,168,.18);
}
.mr-detail-title{padding-left:0;padding-right:0;margin:0;flex:1;min-width:0}
/* Banner "compila in italiano" sopra le schede */
.mr-only-it-banner{
display:flex;align-items:center;gap:10px;
margin:6px 0 16px;padding:10px 12px;
border-radius:var(--radius-md);
background:linear-gradient(135deg, rgba(30,95,168,.10), rgba(22,163,74,.08));
border:1px solid rgba(30,95,168,.20);
color:var(--text2);font-size:13px;line-height:1.4;
}
.mr-only-it-banner__ico{font-size:20px;flex-shrink:0}
.mr-only-it-banner__txt{flex:1}
/* Navigazione sezioni gestore (☰ modale al posto della griglia tab) */
.mr-section-nav{
display:flex;align-items:center;gap:10px;margin:0 0 14px;
padding:10px 12px;border-radius:14px;
background:var(--surface2);border:1px solid var(--border2);
position:sticky;top:0;z-index:3;
}
.mr-section-nav__burger{
flex-shrink:0;min-width:44px;min-height:44px;font-size:20px;line-height:1;padding:0;
}
.mr-section-nav__label{flex:1;min-width:0;font-weight:800;font-size:15px;line-height:1.25;}
.mr-section-nav-modal__list{display:flex;flex-direction:column;gap:8px;max-height:min(70vh,520px);overflow-y:auto;}
.mr-section-nav-modal__item{
display:flex;align-items:center;gap:12px;width:100%;text-align:left;
padding:12px 14px;border-radius:12px;border:1px solid var(--border2);
background:var(--surface);font:inherit;color:var(--text);cursor:pointer;
}
.mr-section-nav-modal__item:hover,.mr-section-nav-modal__item:focus-visible{
border-color:var(--primary);background:var(--surface2);
}
.mr-section-nav-modal__item.is-active{
border-color:var(--primary);background:rgba(30,95,168,.08);
box-shadow:0 0 0 2px rgba(30,95,168,.12);
}
.mr-section-nav-modal__ico{font-size:20px;line-height:1;flex-shrink:0;}
.mr-section-nav-modal__lbl{font-weight:700;font-size:14px;}
/* Tabs con icona (legacy, non più usati in gestione ristorante) */
.mr-tabs{
display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;
padding:6px;border-radius:14px;
background:var(--surface2);
border:1px solid var(--border2);
}
.mr-tab{
appearance:none;border:none;background:transparent;
color:var(--text3);font-weight:700;font-size:13px;
padding:8px 12px;border-radius:10px;cursor:pointer;
display:inline-flex;align-items:center;gap:6px;
transition:background .15s,color .15s,box-shadow .15s,transform .1s;
}
.mr-tab__ico{font-size:14px;line-height:1}
.mr-tab__lbl{line-height:1}
.mr-tab:hover{color:var(--text);background:var(--surface)}
.mr-tab:active{transform:scale(.97)}
.mr-tab--active{
color:var(--primary);background:var(--surface);
box-shadow:0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(30,95,168,.25);
}
.mr-tab-panels{min-height:80px}
.mr-tab-panel[hidden]{display:none!important}
.mr-trans-inner{padding:4px 0 8px}
.mr-trans-line{display:flex;gap:10px;padding:6px 0;border-bottom:.5px solid var(--border2);font-size:13px;line-height:1.35}
.mr-trans-line--cat{font-weight:800}
.mr-trans-line--sub{padding-left:8px;opacity:.95}
.mr-trans-k{flex:0 0 38%;max-width:46%;color:var(--text3)}
.mr-trans-v{flex:1;min-width:0;color:var(--text);word-break:break-word}
.mr-trans-block{margin-bottom:8px}
.mr-section-title{
font-size:13px;font-weight:800;letter-spacing:.02em;
color:var(--text);padding:6px 4px;margin:0 0 8px;
display:flex;align-items:center;gap:8px;
}
.mr-section-title--with-info{justify-content:flex-start}
.mr-card{
margin:0 0 12px;padding:14px;border-radius:var(--radius-lg);
background:var(--surface);border:1px solid var(--border);
box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.mr-card--profile{border-top:3px solid var(--primary)}
/* Scheda pubblica: campi grandi e leggibili (come orari/menu; qui `field` è sull’input, non wrapper). */
.mr-card--profile input.field{
display:block;
width:100%;
box-sizing:border-box;
margin-bottom:0;
border:1px solid var(--border2);
background:var(--surface);
border-radius:12px;
padding:12px 14px;
font-size:16px;
min-height:44px;
color:var(--text);
outline:none;
transition:border-color .15s,background .15s;
-webkit-appearance:none;
appearance:none;
}
.mr-card--profile input.field:focus{
border-color:var(--primary);
background:var(--surface2);
}
.mr-card--profile input.field::placeholder{
color:var(--text3);
}
/* Descrizione servizio (Scheda): toolbar + area rich come redazione notizie */
.mr-story-toolbar{
display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 10px;
}
.mr-story-tool{
appearance:none;min-height:44px;min-width:44px;padding:0 14px;
font-size:15px;font-weight:800;line-height:1;
border-radius:10px;border:1px solid var(--border2);background:var(--surface2);
color:var(--text);cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.mr-story-tool:active{background:var(--surface)}
.mr-card--profile .mr-story-rich{
min-height:120px;font-size:16px;line-height:1.5;
}
.mr-profile-save-bar{
margin-top:14px;padding-top:14px;border-top:1px solid var(--border);
}
.mr-profile-save-bar.hidden{display:none!important}
.mr-profile-save-btn{min-height:48px;font-weight:800;width:100%}
.mr-card--ops{border-top:3px solid var(--success)}
/* Label di campo con icona info accanto */
.mr-form-label{
font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
color:var(--text3);margin:10px 0 4px;
}
.mr-form-label--with-info{
display:flex;align-items:center;gap:6px;
}
.mr-form-label__txt{flex:0 0 auto}
/* Icona "?" per modale info */
.mr-info-btn{
appearance:none;border:1px solid var(--border);background:var(--surface);
color:var(--primary);font-weight:800;font-size:11px;line-height:1;
width:18px;height:18px;border-radius:50%;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
flex-shrink:0;padding:0;transition:background .15s,color .15s,transform .1s;
-webkit-tap-highlight-color:transparent;
}
.mr-info-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.mr-info-btn:active{transform:scale(.92)}
/* Modale info (singleton sul body) */
.mr-info-modal{
position:fixed;inset:0;z-index:9999;
display:flex;align-items:flex-end;justify-content:center;
padding:16px;
padding-bottom:max(16px, env(safe-area-inset-bottom));
}
.mr-info-modal.hidden{display:none!important}
.mr-info-modal__backdrop{
position:absolute;inset:0;z-index:0;background:rgba(0,0,0,.5);
animation:mrInfoFadeIn .15s ease-out;
}
.mr-info-modal__sheet{
position:relative;z-index:1;width:100%;max-width:440px;
background:var(--surface);color:var(--text);
border-radius:18px;box-shadow:0 12px 48px rgba(0,0,0,.25);
overflow:hidden;animation:mrInfoSlideUp .2s ease-out;
}
.mr-info-modal__head{
display:flex;align-items:center;justify-content:space-between;
gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);
}
.mr-info-modal__title{margin:0;font-size:1rem;font-weight:800;color:var(--text)}
.mr-info-modal__close{
appearance:none;border:none;background:transparent;
font-size:18px;line-height:1;cursor:pointer;color:var(--text2);
padding:6px 10px;border-radius:8px;-webkit-tap-highlight-color:transparent;
}
.mr-info-modal__close:active{background:var(--surface2)}
.mr-info-modal__body{padding:14px 16px 18px;font-size:14px;line-height:1.5;color:var(--text2)}
.mr-info-modal__body p{margin:0}
@media (min-width:560px){
.mr-info-modal{align-items:center}
}
@keyframes mrInfoFadeIn{from{opacity:0}to{opacity:1}}
@keyframes mrInfoSlideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
/* Modale aggiungi/modifica opzione lista ingredienti */
.mr-option-modal{
position:fixed;inset:0;z-index:10000;
display:flex;align-items:flex-end;justify-content:center;
padding:16px;
padding-bottom:max(16px, env(safe-area-inset-bottom));
background:rgba(0,0,0,.5);
animation:mrInfoFadeIn .15s ease-out;
}
.mr-option-modal__sheet{
position:relative;z-index:1;width:100%;max-width:440px;
background:var(--surface);color:var(--text);
border-radius:18px;box-shadow:0 12px 48px rgba(0,0,0,.25);
overflow:hidden;animation:mrInfoSlideUp .2s ease-out;
}
.mr-option-modal__head{
display:flex;align-items:center;justify-content:space-between;
gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);
}
.mr-option-modal__title{margin:0;font-size:1rem;font-weight:800;color:var(--text)}
.mr-option-modal__close{
appearance:none;border:none;background:transparent;
font-size:22px;line-height:1;cursor:pointer;color:var(--text2);
padding:6px 10px;border-radius:8px;-webkit-tap-highlight-color:transparent;
}
.mr-option-modal__close:active{background:var(--surface2)}
.mr-option-modal__body{padding:14px 16px 18px}
.mr-option-modal__body--scroll{
max-height:min(78vh,640px);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
}
.mr-option-modal__sheet--dish{max-width:520px}
/* Wizard prodotto (piatto): schermo intero a passi */
.mr-option-modal--dish-wizard{
padding:0;
align-items:stretch;
justify-content:stretch;
}
.mr-option-modal__sheet--dish-wizard{
max-width:none;
width:100%;
height:100%;
min-height:100%;
max-height:none;
border-radius:0;
display:flex;
flex-direction:column;
}
/* Fascia brand JONIOHUB + inset notch / isola dinamica (wizard aggiunta/modifica piatto). */
.mr-dish-wizard-brand-bar{
flex-shrink:0;
display:flex;align-items:center;gap:10px;
padding-top:max(10px, env(safe-area-inset-top, 0px));
padding-right:max(14px, env(safe-area-inset-right, 0px));
padding-bottom:10px;
padding-left:max(14px, env(safe-area-inset-left, 0px));
background:linear-gradient(180deg,var(--primary) 0%,var(--primary-strong) 100%);
color:var(--hero-text);
border-bottom:.5px solid rgba(255,255,255,.18);
}
.mr-dish-wizard-brand-bar__logo{
width:32px;height:32px;object-fit:contain;border-radius:8px;flex-shrink:0;
background:rgba(255,255,255,.12);
box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.mr-dish-wizard-brand-bar__wordmark{color:inherit;}
.mr-option-modal__sheet--dish-wizard .mr-option-modal__head{
padding-left:max(16px, env(safe-area-inset-left, 0px));
padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.mr-option-modal__sheet--dish-wizard .mr-option-modal__body--dish-wizard{
padding-left:max(16px, env(safe-area-inset-left, 0px));
padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.mr-option-modal__sheet--dish-wizard .mr-option-modal__footer{
padding-bottom:max(16px, env(safe-area-inset-bottom, 0px));
padding-left:max(16px, env(safe-area-inset-left, 0px));
padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.mr-option-modal__body--dish-wizard{
flex:1;
min-height:0;
max-height:none;
}
.mr-dish-wizard-steps{min-height:120px;}
.mr-dish-wizard-step--hidden{display:none!important;}
.mr-dish-wizard-head__text{flex:1;min-width:0;}
.mr-dish-wizard__step-meta{margin:6px 0 0;font-size:13px;font-weight:700;color:var(--text2);}
.mr-dish-wizard-row-name{display:flex;flex-direction:row;gap:10px;align-items:stretch;margin-bottom:4px;}
.mr-dish-wizard-row-name .field{margin-bottom:0;}
.mr-dish-wizard-row-name .mr-emoji-input{
flex:0 0 76px;
width:auto;
max-width:92px;
}
.mr-dish-wizard-row-name > input.field:not(.mr-emoji-input),
.mr-dish-wizard-row-name > .field:not(.mr-emoji-input){
flex:1;
min-width:0;
}
.mr-dish-wizard-summary__title{margin:0 0 12px;font-size:1rem;font-weight:800;color:var(--text);}
.mr-dish-wizard-summary__row{
display:grid;
grid-template-columns:minmax(100px,34%) 1fr;
gap:8px 12px;
padding:10px 0;
border-bottom:1px solid var(--border2);
font-size:14px;
}
.mr-dish-wizard-summary__row:last-of-type{border-bottom:none;}
.mr-dish-wizard-summary__dt{font-weight:700;color:var(--text2);}
.mr-dish-wizard-summary__dd{color:var(--text);word-break:break-word;}
.mr-dish-wizard-summary__extras-title{
margin:16px 0 8px;
font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);
}
.mr-dish-wizard-summary__ul{margin:0;padding-left:18px;color:var(--text);font-size:14px;line-height:1.45;}
.mr-dish-wizard-summary__empty{list-style:none;margin-left:-18px;color:var(--text3);}
.mr-option-modal__footer{
padding:12px 16px 16px;
border-top:1px solid var(--border2);
background:var(--surface);
flex-shrink:0;
}
.mr-dish-modal-inghead{
display:flex;align-items:center;gap:8px;margin:12px 0 8px;
font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);
}
.mr-dish-modal-extras{margin-top:4px}
/* Input nel modale: stesso comfort dell’editor (il modale non sta dentro .mr-menu-root). */
.mr-option-modal input.field,
.mr-option-modal select.field,
.mr-option-modal textarea.field,
.mr-option-modal .field{
width:100%;
box-sizing:border-box;
margin-bottom:12px;
font-size:16px;
min-height:44px;
padding:12px 14px;
border-radius:12px;
border:1px solid var(--border2);
background:var(--surface);
color:var(--text);
}
.mr-option-modal textarea.field{
min-height:96px;
line-height:1.45;
resize:vertical;
}
.mr-option-modal .mr-emoji-input{
font-size:22px;
text-align:center;
min-height:48px;
padding:10px 12px;
}
.mr-option-modal .mr-price-input,
.mr-option-modal .mr-ing-name,
.mr-option-modal .mr-ing-price{
min-height:44px;
padding:12px 14px;
font-size:16px;
}
.mr-option-modal .mr-select{
min-height:44px;
font-size:16px;
padding:12px 14px;
}
.mr-option-modal .mr-form-label{
margin-top:10px;
margin-bottom:6px;
font-size:13px;
font-weight:700;
color:var(--text2);
}
.mr-option-modal .mr-form-label:first-child{margin-top:0}
.mr-option-modal__footer .btn{
min-height:44px;
padding:12px 18px;
font-size:15px;
font-weight:800;
}
.mr-option-modal__actions{
display:flex;align-items:center;justify-content:space-between;gap:10px;
flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid var(--border2);
}
.mr-option-modal__actions-end{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
@media (min-width:560px){
/* Escludi il wizard prodotto: deve restare a tutta altezza */
.mr-option-modal:not(.mr-option-modal--dish-wizard){align-items:center}
}
/* Tabella opzioni nelle liste ingredienti */
.mr-ing-table-wrap{
overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 12px;
border-radius:var(--radius-md);border:1px solid var(--border2);
background:var(--surface);
}
.mr-ing-table{width:100%;border-collapse:collapse;font-size:14px}
.mr-ing-table th,.mr-ing-table td{
padding:10px 10px;border-bottom:1px solid var(--border2);
text-align:left;vertical-align:middle;
}
.mr-ing-table tr:last-child td{border-bottom:none}
.mr-ing-table th{
font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
color:var(--text3);background:var(--surface2);
}
.mr-ing-table__price{font-variant-numeric:tabular-nums;white-space:nowrap}
.mr-ing-table__act{text-align:right;width:1%;white-space:nowrap}
.mr-ing-table__th-act{width:1%}
.mr-list-options-empty{margin:8px 0 12px;font-size:13px;line-height:1.45}
.mr-dish-table .mr-dish-table__name{font-weight:700;line-height:1.35;word-break:break-word}
.mr-dish-table .mr-dish-table__emoji{font-size:1.1em;margin-right:2px}
.mr-ing-table__list{font-size:13px;color:var(--text2);max-width:140px;word-break:break-word}
/* Card giorno settimana — colore diverso aperto/chiuso */
.mr-day-card{
border:1px solid var(--border2);border-radius:var(--radius-md);padding:12px;margin-bottom:10px;
background:var(--surface);
transition:border-color .15s,background .15s;
}
.mr-day-card--open{
border-left:3px solid var(--success);
background:linear-gradient(90deg, rgba(22,163,74,.06) 0%, var(--surface) 60%);
}
.mr-day-card--closed{
border-left:3px solid var(--danger);
background:linear-gradient(90deg, rgba(220,38,38,.06) 0%, var(--surface) 60%);
}
.mr-day-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.mr-day-head__left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mr-day-name{font-weight:800;font-size:15px;color:var(--text)}
.mr-day-status{
display:inline-flex;align-items:center;justify-content:center;
font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
padding:3px 8px;border-radius:999px;line-height:1;
}
.mr-day-status--open{background:var(--success-bg);color:var(--success)}
.mr-day-status--closed{background:var(--danger-bg);color:var(--danger)}
/* Switch / checkbox stilizzato (toggle iOS-like) — touch-friendly */
.mr-check{
display:inline-flex;align-items:center;gap:10px;
font-size:14px;cursor:pointer;user-select:none;flex-wrap:wrap;
min-height:44px;padding:6px 4px;
-webkit-tap-highlight-color:transparent;
}
.mr-switch{position:relative;display:inline-flex;align-items:center;gap:10px}
/* Trasparente ma cliccabile sopra il "binario": niente più pointer-events:none */
.mr-switch input[type="checkbox"]{
position:absolute;inset:0;width:100%;height:100%;
opacity:0;margin:0;cursor:pointer;
z-index:2;
}
.mr-switch__slider{
position:relative;display:inline-block;width:50px;height:30px;flex-shrink:0;
background:var(--surface3);border-radius:999px;
transition:background .2s;
box-shadow:inset 0 0 0 1px var(--border);
}
.mr-switch__slider::after{
content:"";position:absolute;top:3px;left:3px;
width:24px;height:24px;border-radius:50%;
background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);
transition:transform .2s;
}
.mr-switch input:checked + .mr-switch__slider{background:var(--primary);box-shadow:none}
.mr-switch input:checked + .mr-switch__slider::after{transform:translateX(20px)}
.mr-switch__lbl{color:var(--text);font-weight:600}
/* Bottone "touch" (min 44px) per icone/elimina/aggiungi nei form mobile */
.mr-touch-btn{min-height:44px;padding:10px 14px;font-size:14px}
.mr-add-slot-btn{
margin-top:4px;font-weight:700;font-size:14px;
border-style:dashed !important;
}
.mr-day-empty{
font-size:13px;font-style:italic;color:var(--text3);
padding:8px 4px;text-align:center;
}
.mr-ranges{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.mr-range-row{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
padding:10px;border-radius:12px;
background:var(--surface2);
}
/* Input "time" mobile-friendly: testo più grande e padding generoso */
.mr-time{
flex:1 1 110px;min-width:96px;max-width:160px;
font-variant-numeric:tabular-nums;font-size:16px;
padding:10px 12px;
}
.mr-dash{color:var(--text3);font-weight:800;font-size:18px;padding:0 4px}
.mr-icon-btn{
padding:8px 12px;min-width:44px;min-height:44px;
color:var(--danger);font-size:16px;
display:inline-flex;align-items:center;justify-content:center;
}
.mr-subtitle{
font-size:14px;font-weight:800;margin:18px 0 10px;color:var(--text);
display:flex;align-items:center;gap:8px;
}
.mr-subtitle--first{margin-top:0}
.mr-subtitle--with-info{justify-content:flex-start}
.mr-extra-block{
border-top:1px solid var(--border2);padding-top:12px;margin-top:14px;
border-radius:var(--radius-md);
transition:background .15s;
}
.mr-extra-block--active{
background:rgba(217,119,6,.06);
border:1px solid rgba(217,119,6,.30);
border-top-color:var(--warning);
padding:12px;margin-top:10px;
}
.mr-extra-fields{margin-top:10px;display:flex;flex-direction:column;gap:8px}
/* Eccezioni: card colorate per stato (chiusa / orari diversi) */
.mr-exc-card{
border:1px solid var(--border2);border-radius:var(--radius-md);padding:12px;margin-bottom:10px;
background:var(--surface);
}
.mr-exc-card--closed{border-left:3px solid var(--danger);background:linear-gradient(90deg,rgba(220,38,38,.04),var(--surface) 60%)}
.mr-exc-card--altered{border-left:3px solid var(--warning);background:linear-gradient(90deg,rgba(217,119,6,.05),var(--surface) 60%)}
.mr-exc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.mr-exc-badge{
display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;
border-radius:8px;background:var(--text3);color:var(--surface);font-size:12px;font-weight:800;
}
.mr-exc-status{
display:inline-flex;align-items:center;font-size:10px;font-weight:800;
text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:999px;
margin-right:auto;
}
.mr-exc-status--closed{background:var(--danger-bg);color:var(--danger)}
.mr-exc-status--altered{background:var(--warning-bg);color:var(--warning)}
.mr-exc-slots{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border2)}
/* Categorie e piatti del menu */
.mr-menu-root .mr-cat-card{
border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;margin-bottom:14px;
background:linear-gradient(145deg, var(--surface) 0%, var(--surface2) 100%);
box-shadow:0 1px 6px rgba(0,0,0,.03);
}
.mr-cat-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.mr-cat-toolbar-start{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
flex:1;min-width:0;
}
.mr-cat-reorder{
display:flex;flex-direction:column;gap:4px;flex-shrink:0;
}
/* Frecce ordine categorie: touch target adeguato, sopra lo scroll della scheda */
.mr-cat-move-btn{
width:44px;min-height:36px;padding:0 4px;
border-radius:10px;border:1px solid var(--border2);
background:var(--surface2);color:var(--text);
font-size:16px;font-weight:800;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background .15s,border-color .15s,transform .06s;
}
.mr-cat-move-btn:hover:not(:disabled){background:var(--surface3);border-color:var(--primary)}
.mr-cat-move-btn:active:not(:disabled){transform:scale(.96)}
.mr-cat-move-btn:disabled{opacity:.38;cursor:not-allowed}
.mr-cat-remove-btn{flex-shrink:0;position:relative;z-index:2;max-width:100%}
.mr-cat-badge{
display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;
border-radius:10px;background:var(--primary);color:#fff;font-size:13px;font-weight:800;
box-shadow:0 2px 4px rgba(30,95,168,.25);
}
.mr-cat-badge--list{background:var(--success);box-shadow:0 2px 4px rgba(22,163,74,.25)}
.mr-cat-name{font-weight:700}
.mr-item-card{
border:1px dashed var(--border2);border-radius:var(--radius-md);padding:12px;margin-top:12px;
background:var(--surface);
}
.mr-item-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.mr-item-title{font-size:13px;font-weight:800;color:var(--text);display:inline-flex;align-items:center;gap:6px}
.mr-item-emoji{font-size:18px;line-height:1}
.mr-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:380px){.mr-grid-2{grid-template-columns:1fr}}
.mr-ing-head{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);margin:12px 0 8px}
.mr-ing-head--with-info{display:flex;align-items:center;gap:6px}
.mr-ing-row{
display:grid;grid-template-columns:minmax(96px,116px) 1fr minmax(80px,96px) 44px;
gap:10px;align-items:center;margin-bottom:10px;
padding:10px 12px;border-radius:12px;
background:var(--surface2);
border:1px solid var(--border2);
border-left:3px solid transparent;
transition:border-color .15s, background .15s, box-shadow .15s;
}
.mr-ing-row:focus-within{
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(30,95,168,.10);
}
/* Variante senza select tipo: 3 colonne (nome / prezzo / X) */
.mr-ing-row--nokind{grid-template-columns:1fr minmax(80px,96px) 44px}
.mr-ing-row--add{border-left-color:var(--success)}
.mr-ing-row--remove{border-left-color:var(--warning)}
@media (max-width:480px){
.mr-ing-row{grid-template-columns:1fr 96px 44px;gap:8px;padding:10px}
.mr-ing-row .mr-ing-kind{grid-column:1 / -1}
.mr-ing-row--nokind{grid-template-columns:1fr 96px 44px}
}
.mr-ing-kind{min-width:0}
.mr-ing-kind--add{color:var(--success);font-weight:700}
.mr-ing-kind--remove{color:var(--warning);font-weight:700}
.mr-ing-name{
min-width:0;font-size:15px;font-weight:600;
background:var(--surface);border:1px solid var(--border2);
border-radius:10px;padding:10px 12px;
}
.mr-ing-name:focus{border-color:var(--primary);background:var(--surface)}
.mr-ing-price{
min-width:0;font-variant-numeric:tabular-nums;
text-align:right;font-weight:700;font-size:15px;
background:var(--surface);border:1px solid var(--border2);
border-radius:10px;padding:10px 12px;
}
.mr-ing-price:focus{border-color:var(--primary)}
.mr-add-product{margin-top:10px}
/* Bottone X delete (riga ingrediente / fascia oraria): rosso, tondo, ben visibile */
.mr-icon-btn--del{
width:40px;height:40px;min-width:40px;min-height:40px;
padding:0;border-radius:50%;
background:var(--danger-bg, #fee);
color:var(--danger);
border:1px solid transparent;
font-size:14px;font-weight:800;line-height:1;
display:inline-flex;align-items:center;justify-content:center;
cursor:pointer;
transition:background .15s, color .15s, transform .05s;
}
.mr-icon-btn--del:hover{background:var(--danger);color:#fff}
.mr-icon-btn--del:active{transform:scale(.94)}
/* Riga toggle servizi/ordini (tab Servizio) */
.mr-ops-row{
display:flex;align-items:center;gap:12px;
padding:12px;margin-bottom:8px;
border-radius:var(--radius-md);
border:1px solid var(--border2);
background:var(--surface);
cursor:pointer;
transition:background .15s, border-color .15s;
}
.mr-ops-row[data-checked="1"]{
background:linear-gradient(90deg, rgba(22,163,74,.06), var(--surface) 60%);
border-color:rgba(22,163,74,.30);
}
.mr-ops-row__main{flex:1;min-width:0}
.mr-ops-row .mr-form-label{margin:0;text-transform:none;letter-spacing:0;font-size:14px;color:var(--text);font-weight:600}
/* Pulsante Salva con icona */
.mr-save-wrap{padding:12px 0 28px}
.mr-save-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:800}
.mr-save-btn__ico{font-size:18px;line-height:1}
/* Lista ingredienti riutilizzabili */
.mr-lista-ing-card{
border:1px solid var(--success);border-radius:var(--radius-lg);padding:14px;margin-bottom:14px;
background:rgba(22,163,74,.05);
}
/* Input monospace per slug/ID tecnici e prezzo allineato */
.mr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.mr-emoji-input{font-size:20px;text-align:center}
.mr-price-input{font-variant-numeric:tabular-nums;text-align:right}
/* Select con freccia custom */
.mr-select{
appearance:none;-webkit-appearance:none;-moz-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 10px center;background-size:14px;
padding-right:30px!important;
}
.extra-row--remove{
border-left:3px solid var(--warning);padding-left:10px;
}
/* Carrello personalizza: ricerca con icona + lista verticale (no carosello) */
.extras-search-wrap{padding:4px 0 12px;position:sticky;top:0;z-index:5;background:var(--surface);}
.extras-search-box{
position:relative;display:flex;align-items:center;
background:var(--surface2);
border:1px solid var(--border);
border-radius:999px;
padding:8px 12px 8px 38px;
transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.extras-search-box:focus-within{
border-color:var(--accent);
background:var(--surface);
box-shadow:0 0 0 3px var(--accent-bg);
}
.extras-search-ico{
position:absolute;left:12px;top:50%;transform:translateY(-50%);
font-size:15px;line-height:1;opacity:.7;pointer-events:none;
}
.extras-search-input{
flex:1;min-width:0;
background:transparent;border:0;outline:0;
font:inherit;font-size:15px;color:var(--text);
padding:2px 0;
}
.extras-search-input::placeholder{color:var(--text3)}
.extras-search-input::-webkit-search-cancel-button{display:none}
.extras-search-clear{
flex:0 0 auto;margin-left:8px;
width:22px;height:22px;border-radius:50%;
border:0;background:var(--border);color:var(--text2);
font-size:12px;line-height:1;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
transition:background .15s ease, color .15s ease;
}
.extras-search-clear:hover{background:var(--accent);color:#fff}
.extras-filter-empty{font-size:13px;padding:8px 0 4px}
.extras-lists-host{display:flex;flex-direction:column;gap:14px}
.extras-section{display:flex;flex-direction:column;gap:6px}
.extras-vertical-list{
display:flex;flex-direction:column;gap:8px;
margin-top:4px;
}
/* Sezione Aggiunte: al massimo ~4 righe elenco visibili (varianti), il resto in scroll. */
.extras-vertical-list--max4{
max-height:min(38vh,11.6rem);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
padding-right:4px;
scrollbar-gutter:stable;
}
.extras-vertical-row{
display:flex;align-items:center;gap:12px;
padding:10px 12px;border-radius:var(--radius-md);
border:1px solid var(--border);background:var(--surface2);
cursor:pointer;user-select:none;
transition:border-color .15s ease, background .15s ease, transform .05s ease;
}
.extras-vertical-row:active{transform:scale(.995)}
.extras-vertical-row.checked{
border-color:var(--accent);background:var(--accent-bg);
}
.extras-vertical-row--remove{border-left:3px solid var(--warning)}
.extras-vertical-check{
flex:0 0 auto;width:20px;height:20px;
accent-color:var(--accent);cursor:pointer;margin:0;
}
.extras-vertical-name{
flex:1 1 auto;min-width:0;
font-size:14px;font-weight:700;line-height:1.3;color:var(--text);
word-break:break-word;
}
.extras-vertical-price{
flex:0 0 auto;font-size:13px;font-weight:800;color:var(--primary);
white-space:nowrap;
}
.extras-vertical-price.free{color:var(--text3);font-weight:700}
/* =====================================================================
Editor ristorante – ottimizzazioni mobile (touch-target + leggibilità)
===================================================================== */
.mr-hours-root .field,
.mr-menu-root .field,
.mr-hours-root input.field,
.mr-menu-root input.field,
.mr-hours-root select.field,
.mr-menu-root select.field,
.mr-hours-root textarea.field,
.mr-menu-root textarea.field,
.mr-hours-root .mr-select,
.mr-menu-root .mr-select{
font-size:16px; /* iOS evita zoom automatico se ≥ 16px */
min-height:44px;
padding:10px 12px;
}
.mr-hours-root textarea.field,
.mr-menu-root textarea.field{
min-height:80px;
}
.mr-hours-root .form-label,
.mr-menu-root .form-label,
.mr-hours-root .mr-form-label,
.mr-menu-root .mr-form-label{
font-size:13px;margin-top:8px;margin-bottom:4px;
}
.mr-hours-root .btn,
.mr-menu-root .btn{
min-height:44px;font-size:14px;
}
.mr-hours-root .btn-sm,
.mr-menu-root .btn-sm{
min-height:38px;padding:8px 12px;font-size:13px;
}
/* Card più ariose per touch */
.mr-day-card,.mr-exc-card,.mr-item-card,.mr-cat-card,.mr-lista-ing-card{
padding:14px;
}
/* Riga ingrediente: a tutta larghezza su mobile per editing comodo */
@media (max-width:560px){
.mr-ing-row{grid-template-columns:1fr;gap:8px;padding:10px}
.mr-ing-row .mr-select,
.mr-ing-row input.field{font-size:16px;min-height:44px}
.mr-grid-2{grid-template-columns:1fr}
.mr-day-head{align-items:flex-start}
.mr-time{flex:1 1 45%;max-width:none}
}
/* ================================================================
BLOCCO .appt-* — Prenotazioni Appuntamenti (salone, estetista…)
Parallelo al blocco .mr-* (ristorante). Stessa logica token/breakpoint.
================================================================ */
/* --- Pannelli gestore --- */
.appt-panel{padding:0 2px 24px}
.appt-divider{border:none;border-top:1px solid var(--border,#e5e7eb);margin:16px 0}
.appt-hint{font-size:13px;color:var(--text2);padding:8px 0}
.appt-color-input{width:100%;height:44px;padding:4px;cursor:pointer}
/* --- Griglia servizi lista gestore --- */
.appt-svc-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.appt-svc-card{
display:flex;align-items:center;justify-content:space-between;gap:12px;
background:var(--surface);border:1px solid var(--border,#e5e7eb);
border-radius:12px;padding:12px 14px;
}
.appt-svc-card--inactive{opacity:.55}
.appt-svc-card__left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.appt-svc-card__emoji{font-size:24px;flex-shrink:0;line-height:1}
.appt-svc-card__info{flex:1;min-width:0}
.appt-svc-card__name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt-svc-price{font-size:13px;color:var(--primary);font-weight:600;margin-top:2px}
.appt-svc-duration{font-size:12px;color:var(--text2);margin-top:1px}
/* Card cliente (griglia 2 colonne) */
.appt-svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.appt-svc-card--cliente{
flex-direction:column;align-items:flex-start;cursor:pointer;transition:box-shadow .15s;
}
.appt-svc-card--cliente:hover{box-shadow:0 2px 8px rgba(0,0,0,.12)}
.appt-svc-card--selected{border-color:var(--primary)!important;background:var(--primary-light,#eff6ff)}
.appt-svc-card__emoji{font-size:28px;margin-bottom:6px}
/* --- Staff lista gestore --- */
.appt-staff-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.appt-staff-card{
display:flex;align-items:center;justify-content:space-between;gap:12px;
background:var(--surface);border:1px solid var(--border,#e5e7eb);
border-radius:12px;padding:12px 14px;
}
.appt-staff-card--inactive{opacity:.55}
.appt-staff-card__left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.appt-staff-card__info{flex:1;min-width:0}
.appt-staff-card__name{font-weight:600;font-size:15px}
.appt-staff-avatar{
display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;border-radius:50%;font-size:20px;flex-shrink:0;
background:var(--border,#e5e7eb);
}
.appt-staff-avatar--any{background:linear-gradient(135deg,#8B5CF6,#EC4899);color:#fff}
/* Card staff cliente */
.appt-staff-card--cliente{cursor:pointer;transition:box-shadow .15s}
.appt-staff-card--cliente:hover{box-shadow:0 2px 8px rgba(0,0,0,.12)}
.appt-staff-card--selected{border-color:var(--primary)!important;background:var(--primary-light,#eff6ff)}
/* Checkbox servizi staff */
.appt-services-check-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.appt-svc-check-row{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;min-height:44px}
.appt-svc-check-emoji{font-size:18px}
/* --- Eccezioni operatore --- */
.appt-exceptions{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.appt-exception-row{
display:flex;align-items:center;justify-content:space-between;gap:8px;
background:var(--surface);border:1px solid var(--border,#e5e7eb);
border-radius:8px;padding:10px 12px;font-size:13px;
}
.appt-exception-row__date{flex:1;min-width:0;color:var(--text1)}
.appt-exceptions-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* --- Prezzo editor --- */
.appt-price-row{display:flex;flex-direction:column;gap:4px;margin-top:4px}
/* --- Dashboard gestore --- */
.appt-dashboard{display:flex;flex-direction:column;gap:12px}
.appt-dashboard-filters{display:flex;flex-direction:column;gap:8px;padding:4px 0}
.appt-filter-chips{display:flex;gap:8px;flex-wrap:wrap}
.appt-filter-chips--secondary{gap:6px}
.appt-filter-chip{
padding:6px 14px;border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;
background:var(--surface);border:1.5px solid var(--border,#e5e7eb);
transition:background .15s,border-color .15s;min-height:36px;display:flex;align-items:center;
}
.appt-filter-chip--active{background:var(--primary);color:#fff;border-color:var(--primary)}
.appt-search-input{margin-top:4px}
/* Card prenotazione dashboard gestore */
.appt-bookings-list{display:flex;flex-direction:column;gap:10px}
.appt-booking-card{
background:var(--surface);border:1px solid var(--border,#e5e7eb);
border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;
}
.appt-booking-card__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.appt-booking-card__status{
font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;
}
.appt-booking-card__dt{font-size:13px;color:var(--text2)}
.appt-booking-card__body{display:flex;flex-direction:column;gap:4px}
.appt-booking-card__svc{font-weight:600;font-size:15px}
.appt-booking-card__meta{display:flex;gap:12px;font-size:13px;color:var(--text2);flex-wrap:wrap}
.appt-booking-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.appt-booking-actions .btn{min-height:36px;font-size:13px}
/* Varianti colore badge per status (dashboard gestore) */
.appt-booking-badge-pending{border-left:3px solid #F59E0B}
.appt-booking-badge-confirmed{border-left:3px solid #10B981}
.appt-booking-badge-modified{border-left:3px solid #3B82F6}
.appt-booking-badge-completed{border-left:3px solid #6B7280}
.appt-booking-badge-rejected,.appt-booking-badge-cancelled_by_user,.appt-booking-badge-cancelled_by_manager{
border-left:3px solid #EF4444;opacity:.8;
}
/* --- Card prenotazione/ordine cliente (tab Prenotazioni, Attivi, Storico) --- */
/* Definizione base rimossa: regole canoniche a blocco unico nella sezione "Card prenotazione cliente (vista ordini)" */
.appt-cancel-btn{color:var(--danger,#EF4444)!important}
/* --- Wizard cliente (overlay fullscreen) — safe area iOS notch / home indicator --- */
.appt-wizard-overlay{
position:fixed;inset:0;z-index:900;background:var(--bg,#fff);
display:flex;flex-direction:column;overflow:hidden;
}
.appt-wizard-sheet{
display:flex;flex-direction:column;height:100%;
max-width:520px;margin:0 auto;width:100%;
}
.appt-wizard-header{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding-top:max(12px, env(safe-area-inset-top, 0px));
padding-right:max(16px, env(safe-area-inset-right, 0px));
padding-bottom:12px;
padding-left:max(16px, env(safe-area-inset-left, 0px));
border-bottom:1px solid var(--border,#e5e7eb);
background:var(--surface);
}
.appt-wizard-close{
background:none;border:none;font-size:22px;cursor:pointer;
color:var(--text2);padding:4px 8px;line-height:1;
}
.appt-wizard-pills{display:flex;gap:6px;align-items:center}
.appt-wizard-pill{
width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-size:12px;font-weight:700;
background:var(--border,#e5e7eb);color:var(--text2);
}
.appt-wizard-pill--active{background:var(--primary);color:#fff}
.appt-wizard-pill--done{background:var(--success-bg,#D1FAE5);color:var(--success,#10B981)}
.appt-wizard-nav{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding-top:8px;
padding-right:max(16px, env(safe-area-inset-right, 0px));
padding-bottom:max(8px, env(safe-area-inset-bottom, 0px));
padding-left:max(16px, env(safe-area-inset-left, 0px));
background:var(--surface);
border-bottom:1px solid var(--border,#e5e7eb);
}
.appt-wizard-step-meta{font-size:12px;color:var(--text2)}
.appt-wizard-body{
flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding-top:16px;
padding-right:max(16px, env(safe-area-inset-right, 0px));
padding-bottom:max(16px, env(safe-area-inset-bottom, 0px));
padding-left:max(16px, env(safe-area-inset-left, 0px));
}
.appt-wizard-step{display:flex;flex-direction:column;gap:12px}
/* Passi wizard servizio salone: senza questa regola tutti i passi restano visibili in colonna. */
.appt-wizard-step--hidden{display:none!important;}
.appt-wizard-steps{min-height:120px;}
.appt-wizard-step__title{font-size:18px;font-weight:700;margin:0 0 8px}
/* --- Calendario orizzontale --- */
.appt-day-strip{
display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px;
overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.appt-day-strip::-webkit-scrollbar{display:none}
.appt-day-chip{
flex-shrink:0;padding:8px 12px;border-radius:10px;font-size:12px;font-weight:500;
background:var(--surface);border:1.5px solid var(--border,#e5e7eb);cursor:pointer;
text-align:center;white-space:nowrap;min-width:64px;min-height:44px;
display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.appt-day-chip--active{background:var(--primary);color:#fff;border-color:var(--primary)}
/* --- Griglia slot --- */
.appt-slots-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;
}
.appt-slot-btn{
padding:10px 4px;border-radius:10px;font-size:14px;font-weight:600;
background:var(--primary-light,#EFF6FF);color:var(--primary);
border:1.5px solid var(--primary-light,#BFDBFE);cursor:pointer;
min-height:44px;transition:background .15s;
}
.appt-slot-btn:hover:not(:disabled){background:var(--primary);color:#fff}
.appt-slot-btn--occupied{
background:var(--border,#F3F4F6);color:var(--text3,#9CA3AF);
border-color:var(--border,#E5E7EB);cursor:not-allowed;
}
.appt-slot-btn--selected{background:var(--primary);color:#fff;border-color:var(--primary)}
/* --- Riepilogo conferma --- */
.appt-summary-card{
background:var(--surface);border:1px solid var(--border,#e5e7eb);
border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px;
}
.appt-summary-svc{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px}
.appt-summary-emoji{font-size:24px}
.appt-summary-nome{}
.appt-summary-row{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.appt-summary-row__dt{color:var(--text2)}
.appt-summary-row__dd{font-weight:500;text-align:right}
/* Chip lista servizi (appointment_service) */
.service-feature-chip--appt{background:#F3E8FF;color:#7C3AED}
/* --- Touch target minimi 44px --- */
.appt-slot-btn,.appt-day-chip,.appt-filter-chip,.appt-staff-card,.appt-svc-card--cliente{
min-height:44px;
}
/* --- Breakpoint 480px --- */
@media (max-width:480px){
.appt-svc-grid{grid-template-columns:1fr}
.appt-slots-grid{grid-template-columns:repeat(3,1fr)}
.appt-booking-card-cliente__head{flex-direction:column;align-items:flex-start}
.appt-exceptions-quick{flex-direction:column}
.appt-exceptions-quick .btn{width:100%;text-align:center}
}
/* --- Breakpoint 380px --- */
@media (max-width:380px){
.appt-slots-grid{grid-template-columns:repeat(2,1fr)}
.appt-wizard-nav .btn{font-size:12px;padding:8px 10px}
}
/* ============================================================
COMPONENTI APPUNTAMENTI (.appt-*)
Parallelo al blocco .mr-* del ristorante.
Touch target minimo 44px, CSS variables esistenti.
Breakpoint: 380px, 480px.
============================================================ */
/* ---- Wizard cliente 4-step (fullscreen PWA / Safari) — inset notch e indicatori iOS/Android ---- */
.appt-wizard{
position:fixed;inset:0;z-index:2000;
background:var(--bg,#fff);
display:flex;flex-direction:column;
overflow:hidden;
}
.appt-wizard-open body,.appt-wizard-open{overflow:hidden;}
/* Fascia superiore wizard: status-bar + top-bar (classi condivise con index; niente hero/ricerca). */
.appt-wizard__home-stack{
flex-shrink:0;
display:flex;
flex-direction:column;
min-height:0;
}
/* Fascia sotto page-context: pill 1–2–3 su sfondo scheda (titolo sr-only per accessibilità). */
.appt-wizard__booking-head{
flex-shrink:0;
background:var(--surface,#fff);
border-bottom:1px solid var(--border,#e5e7eb);
padding:12px 16px 14px;
padding-left:max(16px, env(safe-area-inset-left, 0px));
padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.appt-wizard__booking-head-title{
font-size:15px;
font-weight:800;
text-align:center;
margin:0 0 10px;
color:var(--text,#111);
letter-spacing:-.02em;
}
.appt-wizard__booking-head .appt-wizard-pills{
display:flex;
gap:8px;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.appt-wizard__booking-head .appt-wizard-pill{
width:30px;height:30px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:700;
background:var(--surface2,#f3f4f6);
color:var(--text,#111);
border:1px solid var(--border,#e5e7eb);
}
.appt-wizard__booking-head .appt-wizard-pill--active{
background:var(--primary,#1E5FA8);
color:#fff;
border-color:var(--primary,#1E5FA8);
}
.appt-wizard__booking-head .appt-wizard-pill--done{
background:var(--success-bg,#D1FAE5);
color:var(--success,#10B981);
border-color:transparent;
}
.appt-wizard__body{
flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding-top:16px;
padding-right:max(16px, env(safe-area-inset-right, 0px));
padding-bottom:16px;
padding-left:max(16px, env(safe-area-inset-left, 0px));
}
.appt-wizard-step__title{font-size:18px;font-weight:800;margin-bottom:16px;color:var(--text,#111);}
.appt-wizard-nav{
display:flex;gap:10px;
padding-top:12px;
padding-right:max(16px, env(safe-area-inset-right, 0px));
padding-bottom:max(12px, env(safe-area-inset-bottom, 0px));
padding-left:max(16px, env(safe-area-inset-left, 0px));
border-top:1px solid var(--border,#e5e7eb);
flex-shrink:0;
background:var(--bg,#fff);
}
.appt-wizard-nav .btn{flex:1;min-height:48px;}
/* Step 1: solo uscita — pulsante allineato a sinistra (non a tutta larghezza). */
.appt-wizard-nav--step1-only{justify-content:flex-start;}
.appt-wizard-nav--step1-only .appt-wiz-close-step1{flex:0 1 auto;min-width:min(160px,100%);}
/* ---- Card servizio (lista e griglia) ---- */
.appt-svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.appt-svc-card{
display:flex;align-items:flex-start;gap:10px;
padding:12px;border-radius:14px;
background:var(--surface,#f9fafb);border:1px solid var(--border,#e5e7eb);
transition:border-color .15s,background .15s;
}
.appt-svc-card--selectable{cursor:pointer;}
.appt-svc-card--selectable:hover,.appt-svc-card--selectable:focus-visible{
border-color:var(--primary,#1E5FA8);background:rgba(30,95,168,.06);outline:none;
}
.appt-svc-card--selected{
border-color:var(--primary,#1E5FA8);background:rgba(30,95,168,.1);
box-shadow:0 0 0 2px var(--primary,#1E5FA8);
}
.appt-svc-card--inactive{opacity:.55;}
.appt-svc-card__emoji{font-size:26px;line-height:1;flex-shrink:0;}
.appt-svc-card__body{flex:1;min-width:0;}
.appt-svc-card__name{font-weight:700;font-size:14px;color:var(--text,#111);margin-bottom:4px;}
.appt-svc-duration{font-size:12px;color:var(--text2,#6b7280);margin-bottom:2px;}
.appt-svc-price{font-size:13px;font-weight:700;color:var(--primary,#1E5FA8);}
/* Pannello servizi gestore */
.appt-svc-panel,.appt-staff-panel{padding:0;}
.appt-panel-header{
display:flex;align-items:center;justify-content:space-between;
padding:12px 0 8px;
}
.appt-panel-title{font-size:16px;font-weight:800;color:var(--text,#111);margin:0;}
.appt-panel-add-btn{min-height:40px;font-size:13px;}
.appt-svc-list,.appt-staff-list{display:flex;flex-direction:column;gap:10px;}
/* ---- Staff card ---- */
.appt-staff-card{
display:flex;align-items:center;gap:12px;
padding:12px;border-radius:14px;
background:var(--surface,#f9fafb);border:1px solid var(--border,#e5e7eb);
}
.appt-staff-card--selectable{cursor:pointer;}
.appt-staff-card--selectable:hover,.appt-staff-card--selectable:focus-visible{
border-color:var(--primary,#1E5FA8);background:rgba(30,95,168,.06);outline:none;
}
.appt-staff-card--selected{
border-color:var(--primary,#1E5FA8);background:rgba(30,95,168,.1);
box-shadow:0 0 0 2px var(--primary,#1E5FA8);
}
.appt-staff-card--inactive{opacity:.55;}
.appt-staff-avatar{
width:44px;height:44px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:22px;background:var(--primary,#1E5FA8);flex-shrink:0;
}
.appt-staff-avatar--any{background:var(--surface2,#f3f4f6);}
.appt-staff-card__body{flex:1;min-width:0;}
.appt-staff-card__name{font-weight:700;font-size:14px;color:var(--text,#111);}
.appt-staff-card__svccount{font-size:12px;color:var(--text2,#6b7280);margin-top:2px;}
/* Badge utente app collegato (staff ↔ app_user). */
.appt-staff-card__app-badge{
font-size:14px;margin-left:6px;vertical-align:middle;cursor:help;
}
/* ===== Agenda staff personale (vista fullscreen da profilo) ===== */
.staff-agenda__wrap{
padding:
calc(12px + env(safe-area-inset-top, 0px))
16px
calc(24px + env(safe-area-inset-bottom, 0px));
display:flex;flex-direction:column;gap:12px;
}
/* Pulsante "Indietro" in testa alle viste fullscreen (bookingDetail, staffAgenda, dettaglio gestore). */
.booking-detail__back,
.staff-agenda__back,
.mr-detail-back{
align-self:flex-start;padding:6px 12px;font-size:14px;
margin-bottom:4px;min-height:36px;
}
.staff-agenda__header{display:flex;flex-direction:column;gap:4px;margin-bottom:4px;}
.staff-agenda__title{font-size:20px;font-weight:700;color:var(--text,#111);margin:0;}
.staff-agenda__subtitle{font-size:13px;margin:0;}
.staff-agenda__list{display:flex;flex-direction:column;gap:10px;}
.staff-agenda__card{
background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);
border-radius:14px;padding:12px;box-shadow:0 1px 2px rgba(0,0,0,0.03);
}
.staff-agenda__card.treby-push-flash{
outline:2px solid var(--primary,#1E5FA8);outline-offset:2px;
transition:outline-color 0.2s ease;
}
.staff-agenda__card-head{display:flex;gap:10px;align-items:flex-start;}
.staff-agenda__card-emoji{font-size:24px;line-height:1;}
.staff-agenda__card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.staff-agenda__card-svc{font-weight:700;color:var(--text,#111);}
.staff-agenda__card-when,.staff-agenda__card-client,.staff-agenda__card-pub,.staff-agenda__card-note{
font-size:13px;color:var(--text2,#6b7280);
}
/* ===== Dettaglio prenotazione cliente (bookingDetail.js) ===== */
/* Niente safe-area-inset-top qui: la shell ha già `.status-bar` + header globale; sommare creava un vuoto sotto il titolo app. */
.booking-detail__wrap{
padding:
10px
16px
calc(24px + env(safe-area-inset-bottom, 0px));
display:flex;flex-direction:column;gap:12px;
}
.booking-detail__header{
display:flex;align-items:center;gap:14px;
padding:4px 4px 8px 4px;
}
.booking-detail__emoji{
width:56px;height:56px;border-radius:16px;
display:flex;align-items:center;justify-content:center;
font-size:28px;line-height:1;flex-shrink:0;
}
.booking-detail__title-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.booking-detail__title{
font-size:20px;font-weight:700;color:var(--text,#111);margin:0;
overflow:hidden;text-overflow:ellipsis;
}
.booking-detail__badge{
align-self:flex-start;
font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;
}
.booking-detail__card{
background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);
border-radius:14px;padding:14px;box-shadow:0 1px 2px rgba(0,0,0,0.03);
display:flex;flex-direction:column;gap:10px;
}
.booking-detail__section-title{
font-size:13px;font-weight:700;color:var(--text2,#6b7280);
text-transform:uppercase;letter-spacing:0.04em;margin:0;
}
.booking-detail__row{display:flex;gap:10px;align-items:flex-start;}
.booking-detail__row-ico{font-size:18px;line-height:1.2;flex-shrink:0;margin-top:1px;}
.booking-detail__row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.booking-detail__row-label{font-size:12px;color:var(--text2,#6b7280);}
.booking-detail__row-value{
font-size:15px;color:var(--text,#111);word-break:break-word;
}
a.booking-detail__row-value{color:var(--primary,#1E5FA8);text-decoration:none;}
a.booking-detail__row-value:hover{text-decoration:underline;}
.booking-detail__cancel{display:flex;flex-direction:column;gap:8px;}
.booking-detail__cancel-rule{font-size:13px;}
.booking-detail__cancel-locked{
background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;
border-radius:10px;padding:10px 12px;font-size:14px;
}
.booking-detail__cancel-btn{align-self:flex-start;}
.booking-detail__cancel-form{display:flex;flex-direction:column;gap:8px;}
.booking-detail__cancel-reason-label{font-size:12px;}
.booking-detail__cancel-reason{
width:100%;min-height:72px;padding:8px 10px;
border:1px solid var(--border,#e5e7eb);border-radius:10px;
font-family:inherit;font-size:14px;resize:vertical;
}
.booking-detail__cancel-actions{
display:flex;gap:8px;flex-wrap:wrap;
}
/* Card cliente cliccabile: affordance visiva chevron + cursor pointer. */
.appt-booking-card-cliente--clickable{cursor:pointer;position:relative;}
.appt-booking-card-cliente__chev{
position:absolute;right:10px;top:50%;transform:translateY(-50%);
color:var(--text2,#9ca3af);font-size:22px;line-height:1;
}
/* Campo collegamento utente app nella sezione Dati dello wizard staff. */
.appt-staff-app-link{margin-top:12px;}
.appt-staff-app-link__form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.appt-staff-app-link__form input{flex:1;min-width:140px;}
.appt-staff-app-link__linked{
display:flex;align-items:center;gap:8px;
background:color-mix(in srgb, var(--primary) 8%, transparent);
border:1px solid color-mix(in srgb, var(--primary) 24%, transparent);
border-radius:10px;padding:8px 12px;
}
.appt-staff-app-link__ico{font-size:18px;}
.appt-staff-app-link__lbl{flex:1;min-width:0;font-size:14px;color:var(--text,#111);}
/* Wizard staff interno */
.appt-staff-tabs{
display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;
gap:4px;padding-bottom:8px;
scrollbar-width:none;
}
.appt-staff-tabs::-webkit-scrollbar{display:none;}
.appt-staff-tab{
flex-shrink:0;padding:8px 14px;border-radius:20px;border:none;
background:var(--surface2,#f3f4f6);color:var(--text2,#6b7280);
font-size:13px;font-weight:600;cursor:pointer;min-height:36px;
}
.appt-staff-tab--active{background:var(--primary,#1E5FA8);color:#fff;}
.appt-staff-section{padding:12px 0;}
.appt-staff-section--hidden{display:none;}
.appt-staff-wizard-body{padding:0;}
.appt-staff-svc-row{
display:flex;align-items:center;gap:8px;padding:10px 0;
border-bottom:1px solid var(--border,#e5e7eb);cursor:pointer;
font-size:14px;font-weight:600;color:var(--text,#111);
min-height:44px;
}
.appt-staff-svc-row:last-child{border-bottom:none;}
.appt-staff-svc-row__emoji{font-size:18px;}
.appt-staff-svc-row__name{flex:1;}
.appt-staff-svc-hint{font-size:13px;color:var(--text2,#6b7280);padding:8px 0;}
/* ---- Calendario orizzontale strip ---- */
.appt-day-strip{
display:flex;gap:8px;overflow-x:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior-x:contain;
padding-bottom:10px;margin-bottom:12px;
scrollbar-width:none;
}
.appt-day-strip::-webkit-scrollbar{display:none;}
.appt-day-chip{
flex-shrink:0;
min-width:60px;min-height:60px;
border-radius:14px;border:2px solid var(--border,#e5e7eb);
display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:700;color:var(--text,#111);
background:var(--surface,#f9fafb);cursor:pointer;
transition:border-color .15s,background .15s;
}
.appt-day-chip:hover:not(.appt-day-chip--no-slots){border-color:var(--primary,#1E5FA8);}
.appt-day-chip--active{
border-color:var(--primary,#1E5FA8);
background:rgba(30,95,168,.1);color:var(--primary,#1E5FA8);
}
.appt-day-chip--no-slots{opacity:.35;cursor:not-allowed;}
/* ---- Griglia slot orari ---- */
.appt-slots-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
margin-top:8px;
}
.appt-slot-btn{
min-height:44px;border-radius:10px;
border:2px solid var(--border,#e5e7eb);
background:var(--surface,#f9fafb);
font-size:14px;font-weight:700;color:var(--text,#111);
cursor:pointer;transition:border-color .12s,background .12s;
}
.appt-slot-btn--available:hover{border-color:var(--primary,#1E5FA8);background:rgba(30,95,168,.06);}
.appt-slot-btn--selected{
border-color:var(--primary,#1E5FA8);
background:var(--primary,#1E5FA8);color:#fff;
}
.appt-slot-btn--occupied{opacity:.3;cursor:not-allowed;}
.appt-slots-hint,.appt-slots-empty{font-size:13px;color:var(--text2,#6b7280);padding:16px 0;}
.appt-slots-container{min-height:80px;}
/* ---- Selettore orario cliente (ora → minuti, scorrimento orizzontale) ---- */
@keyframes appt-time-chip-enter{
from{opacity:0;transform:translateX(-14px) scale(0.96);}
to{opacity:1;transform:translateX(0) scale(1);}
}
@keyframes appt-time-min-strip-enter{
from{opacity:0;transform:translateY(6px);}
to{opacity:1;transform:translateY(0);}
}
@keyframes appt-time-min-btn-enter{
from{opacity:0;transform:translateY(12px) scale(0.92);}
to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes appt-time-caption-second{
from{opacity:0;transform:translateY(6px);}
to{opacity:1;transform:translateY(0);}
}
.appt-time-picker{margin-top:4px;}
.appt-time-picker__caption{
font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--text2,#6b7280);margin:12px 0 8px;
}
.appt-time-picker__caption--second{
margin-top:16px;
animation:appt-time-caption-second .38s cubic-bezier(0.22,1,0.36,1) both;
}
.appt-time-scroll{
display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
overscroll-behavior-x:contain;scrollbar-width:none;
scroll-snap-type:x proximity;
padding:4px 2px 12px;margin:0 -2px;
mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
}
.appt-time-scroll::-webkit-scrollbar{display:none;}
.appt-time-scroll--hours .appt-time-chip{
animation:appt-time-chip-enter .38s cubic-bezier(0.22,1,0.36,1) backwards;
animation-delay:calc(var(--appt-stagger,0) * 42ms);
}
.appt-time-chip{
flex:0 0 auto;scroll-snap-align:start;
min-width:72px;min-height:48px;padding:0 14px;border-radius:14px;
border:2px solid var(--border,#e5e7eb);background:var(--surface,#f9fafb);
font-size:15px;font-weight:800;color:var(--text,#111);cursor:pointer;
transition:border-color .2s,background .2s,box-shadow .2s,transform .18s cubic-bezier(0.22,1,0.36,1);
box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.appt-time-chip:hover{border-color:var(--primary,#1E5FA8);background:rgba(30,95,168,.06);}
.appt-time-chip:active{transform:scale(0.97);}
.appt-time-chip--active{
border-color:var(--primary,#1E5FA8);
background:rgba(30,95,168,.12);color:var(--primary,#1E5FA8);
box-shadow:0 0 0 1px rgba(30,95,168,.2);
transform:scale(1.03);
}
.appt-time-min-btn{
flex:0 0 auto;scroll-snap-align:start;
min-width:76px;min-height:48px;padding:0 12px;border-radius:12px;
border:2px solid var(--border,#e5e7eb);background:var(--surface,#fff);
font-size:15px;font-weight:700;color:var(--text,#111);cursor:pointer;
transition:border-color .18s,background .18s,transform .18s cubic-bezier(0.22,1,0.36,1),box-shadow .18s;
animation:appt-time-min-btn-enter .34s cubic-bezier(0.22,1,0.36,1) backwards;
animation-delay:calc(var(--appt-stagger,0) * 40ms);
}
.appt-time-min-btn--available:hover{
border-color:var(--primary,#1E5FA8);
background:rgba(30,95,168,.07);
}
.appt-time-min-btn:active{transform:scale(0.96);}
.appt-time-min-btn--selected{
border-color:var(--primary,#1E5FA8);
background:var(--primary,#1E5FA8);color:#fff;
box-shadow:0 4px 14px rgba(30,95,168,.28);
}
.appt-time-scroll--minutes{
flex-wrap:nowrap;gap:10px;
animation:appt-time-min-strip-enter .4s cubic-bezier(0.22,1,0.36,1) both;
}
/* Carrello: giorni (etichette più larghe) e fascia orari a scorrimento orizzontale */
.cart-order-slot{
margin:0 16px 14px;padding:14px 14px 10px;
border-radius:16px;background:var(--surface);
border:1px solid var(--border2);box-shadow:var(--shadow-sm);
}
.cart-order-slot__title{
margin:0 0 6px;font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.02em;
}
.cart-order-slot__hint{
margin:0 0 12px;font-size:13px;line-height:1.45;color:var(--text2);font-weight:500;
}
.cart-order-slot__empty{
margin:0;font-size:13px;font-weight:700;line-height:1.45;color:var(--warning,#b45309);
}
.cart-order-slot .appt-time-picker__caption{
font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;
color:var(--text2);margin:12px 0 8px;
}
.cart-order-slot .appt-time-picker__caption:first-of-type{margin-top:0}
.cart-order-slot .appt-time-scroll{
mask-image:none;-webkit-mask-image:none;
padding:4px 0 8px;margin:0;gap:10px;
}
.cart-slot-strip--days .appt-time-chip{min-width:92px}
.cart-order-slot .appt-time-chip,
.cart-order-slot .appt-time-min-btn{
background:var(--surface2);border-color:var(--border2);color:var(--text);
box-shadow:none;transform:none;
}
.cart-order-slot .cart-slot-day-chip.appt-time-chip--active,
.cart-order-slot .cart-slot-time-chip.appt-time-min-btn--selected{
border-color:var(--primary);background:var(--primary);color:#fff;
box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 32%,transparent);
}
.cart-confirm-block{padding:0 16px 24px}
.cart-confirm-hint{
margin:10px 0 0;padding:12px 14px;border-radius:12px;
background:color-mix(in srgb,var(--warning,#f59e0b) 14%,var(--surface));
border:1px solid color-mix(in srgb,var(--warning,#f59e0b) 28%,var(--border2));
color:var(--text);font-size:13px;font-weight:700;line-height:1.45;text-align:center;
}
[data-theme="dark"] .cart-confirm-hint{
background:color-mix(in srgb,var(--warning,#f59e0b) 18%,var(--surface));
}
@media (prefers-reduced-motion:reduce){
.view{transition:none!important;}
.appt-time-scroll--hours .appt-time-chip,
.appt-time-min-btn,
.appt-time-scroll--minutes,
.appt-time-picker__caption--second{
animation:none!important;
animation-delay:0!important;
}
.appt-time-chip--active{transform:none;}
.appt-time-chip:active,.appt-time-min-btn:active{transform:none;}
}
/* ---- Step conferma ---- */
.appt-confirm-card{
border-radius:16px;background:var(--surface,#f9fafb);
border:1px solid var(--border,#e5e7eb);
padding:16px;margin-bottom:16px;
}
.appt-confirm-row{display:flex;gap:10px;align-items:flex-start;padding:6px 0;}
.appt-confirm-row__ico{font-size:18px;min-width:24px;}
.appt-confirm-row__txt{font-size:14px;font-weight:600;color:var(--text,#111);}
.appt-confirm-notes label{font-size:13px;font-weight:700;color:var(--text2,#6b7280);display:block;margin-bottom:4px;}
.appt-wizard-summary{padding:8px 0;}
.appt-wizard-summary__title{font-size:15px;font-weight:800;margin-bottom:12px;}
.appt-wizard-summary__dl{display:flex;flex-direction:column;gap:8px;}
.appt-wizard-summary__row{display:flex;gap:8px;}
.appt-wizard-summary__dt{flex:0 0 120px;font-size:12px;font-weight:700;color:var(--text2,#6b7280);text-transform:uppercase;letter-spacing:.4px;}
.appt-wizard-summary__dd{flex:1;font-size:14px;font-weight:600;color:var(--text,#111);}
/* ---- Dashboard gestore ---- */
.appt-dashboard{padding:0 0 24px;}
.appt-filter-chips{
display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
padding:10px 0 4px;scrollbar-width:none;flex-wrap:wrap;
}
.appt-filter-chips::-webkit-scrollbar{display:none;}
.appt-filter-chip{
padding:8px 14px;border-radius:20px;border:1px solid var(--border,#e5e7eb);
background:var(--surface,#f9fafb);font-size:13px;font-weight:600;
color:var(--text2,#6b7280);cursor:pointer;white-space:nowrap;
min-height:36px;
}
.appt-filter-chip--active{background:var(--primary,#1E5FA8);color:#fff;border-color:var(--primary,#1E5FA8);}
.appt-dashboard__toolbar{display:flex;justify-content:flex-end;padding:6px 0;}
.appt-dashboard__refresh{font-size:13px;}
/* Card prenotazione gestore */
.appt-booking-list{display:flex;flex-direction:column;gap:12px;margin-top:12px;}
.appt-booking-card{
border-radius:16px;border:1px solid var(--border,#e5e7eb);
background:var(--surface,#fff);padding:14px;
box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.appt-booking-card__head{display:flex;gap:10px;align-items:flex-start;}
.appt-booking-card__emoji{font-size:28px;flex-shrink:0;}
.appt-booking-card__info{flex:1;min-width:0;}
.appt-booking-card__svc{font-weight:800;font-size:15px;color:var(--text,#111);margin-bottom:4px;}
.appt-booking-card__date{font-size:13px;color:var(--text2,#6b7280);margin-bottom:2px;}
.appt-booking-card__dur{font-size:12px;color:var(--text3,#9ca3af);}
.appt-booking-card__staff{font-size:12px;color:var(--text2,#6b7280);}
.appt-booking-card__price{font-size:13px;font-weight:700;color:var(--primary,#1E5FA8);margin-top:4px;}
.appt-booking-card__note{font-size:12px;color:var(--text3,#9ca3af);margin-top:4px;}
.appt-booking-badge{
flex-shrink:0;padding:4px 10px;border-radius:20px;
font-size:11px;font-weight:700;white-space:nowrap;
}
.appt-booking-actions{
display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;
}
.appt-booking-actions .btn{min-height:40px;font-size:13px;}
/* Card prenotazione cliente (vista ordini) */
/* Card ordine/prenotazione cliente — usata in tutti e tre i tab (prenotazioni, attivi, storico). */
.appt-booking-card-cliente{
border-radius:16px;border:1px solid var(--border,#e5e7eb);
background:var(--surface,#fff);padding:14px;
box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.appt-booking-card-cliente__head{
display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:10px;
}
.appt-booking-card-cliente__svc{display:flex;align-items:center;gap:8px;}
.appt-booking-card-cliente__emoji{
width:38px;height:38px;border-radius:10px;
display:flex;align-items:center;justify-content:center;
font-size:22px;flex-shrink:0;
}
.appt-booking-card-cliente__name{font-weight:800;font-size:15px;color:var(--text,#111);}
/* Titolo a due righe nelle card prenotazione lato cliente: nome salone (più
evidente) sopra, nome del servizio scelto (più discreto) sotto. */
.appt-booking-card-cliente__titles{display:flex;flex-direction:column;min-width:0;gap:2px;flex:1;}
.appt-booking-card-cliente__titles .appt-booking-card-cliente__name{
font-weight:800;font-size:15px;color:var(--text,#111);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.appt-booking-card-cliente__svcname{
font-weight:600;font-size:13px;color:var(--text2,#6B7280);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.appt-booking-card-cliente__badge{
padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;flex-shrink:0;
}
.appt-booking-card-cliente__body{display:flex;flex-direction:column;gap:4px;}
.appt-booking-card-cliente__dt{font-size:13px;font-weight:700;color:var(--text,#111);}
.appt-booking-card-cliente__meta{font-size:12px;color:var(--text2,#6b7280);}
.appt-booking-card-cliente__actions{margin-top:10px;}
.appt-cancel-btn{color:var(--danger,#B91C1C)!important;}
/* Badge stati prenotazione (colori semantici) */
.appt-booking-badge--pending{background:var(--warning-bg,#fef3c7);color:#B45309;}
.appt-booking-badge--confirmed{background:var(--success-bg,#d1fae5);color:#15803D;}
.appt-booking-badge--modified{background:rgba(59,130,246,.12);color:#1D4ED8;}
.appt-booking-badge--completed{background:var(--surface2,#f3f4f6);color:#6B7280;}
.appt-booking-badge--cancelled_by_user,
.appt-booking-badge--cancelled_by_manager,
.appt-booking-badge--rejected{background:rgba(220,38,38,.12);color:#B91C1C;}
/* ---- Eccezioni operatore ---- */
.appt-exceptions{padding:8px 0;}
.appt-exceptions__header{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:10px;
}
.appt-exceptions__title{font-size:14px;font-weight:700;color:var(--text,#111);}
.appt-exceptions__list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.appt-exception-row{
display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
padding:10px 12px;border-radius:12px;
background:var(--surface,#f9fafb);border:1px solid var(--border,#e5e7eb);
}
.appt-exception-row__info{flex:1;min-width:0;}
.appt-exception-row__date{font-weight:700;font-size:13px;display:block;}
.appt-exception-row__reason{font-size:12px;color:var(--text2,#6b7280);display:block;}
.appt-exception-row__ranges{font-size:12px;color:var(--primary,#1E5FA8);display:block;}
.appt-exceptions__empty{font-size:13px;color:var(--text3,#9ca3af);padding:8px 0;}
.appt-exceptions__actions{display:flex;flex-direction:column;gap:8px;}
/* ---- Badge e switch generici ---- */
.appt-badge{
display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;
background:var(--surface2,#f3f4f6);color:var(--text2,#6b7280);
}
.appt-badge--inactive{background:rgba(220,38,38,.12);color:#B91C1C;}
.appt-badge--closed{background:rgba(220,38,38,.12);color:#B91C1C;}
.appt-switch{margin-top:10px;margin-bottom:10px;}
.appt-color-input{height:44px;padding:4px 8px;cursor:pointer;}
/* ---- Impostazioni ---- */
.appt-settings-panel .mr-ops-row{margin-bottom:8px;}
/* ---- Empty states ---- */
.appt-empty{padding:24px 8px;text-align:center;}
.appt-empty .ico{font-size:36px;margin-bottom:8px;}
/* ---- Chip appuntamento in lista servizi ---- */
.service-feature-chip--appt{
background:rgba(30,95,168,.1);color:var(--primary,#1E5FA8);
border:1px solid rgba(30,95,168,.25);
}
/* ---- Breakpoint 480px ---- */
@media(max-width:480px){
.appt-svc-grid{grid-template-columns:1fr;}
.appt-slots-grid{grid-template-columns:repeat(3,1fr);}
.appt-wizard-summary__dt{flex:0 0 90px;font-size:11px;}
}
/* ---- Breakpoint 380px ---- */
@media(max-width:380px){
.appt-day-chip{min-width:52px;min-height:52px;font-size:12px;}
.appt-slots-grid{grid-template-columns:repeat(3,1fr);gap:6px;}
.appt-slot-btn{min-height:40px;font-size:13px;}
.appt-staff-tab{padding:8px 10px;font-size:12px;}
.appt-wizard-nav .btn{min-height:44px;font-size:14px;}
}
/* =========================================================================
Categorie servizi appuntamento (migrazione 036): carosello cliente e
strip vendor, chip colorate, selettore nel wizard servizio.
========================================================================= */
/* ---- Carosello categorie nel booking wizard cliente ---- */
.appt-cat-carousel__wrap{margin:4px 0 14px 0;}
.appt-cat-carousel{
display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;
padding:4px 2px 8px 2px;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
}
.appt-cat-carousel::-webkit-scrollbar{height:4px;}
.appt-cat-carousel::-webkit-scrollbar-thumb{background:var(--border,#e5e7eb);border-radius:4px;}
.appt-cat-chip{
--appt-cat-color:#1E5FA8;
flex-shrink:0;display:flex;align-items:center;gap:6px;
padding:8px 14px;border-radius:999px;
background:var(--surface,#f9fafb);
border:1.5px solid var(--appt-cat-color);
color:var(--text,#111);
font-weight:600;font-size:13px;
cursor:pointer;transition:background .15s,transform .1s,box-shadow .15s;
white-space:nowrap;
min-height:38px;
}
.appt-cat-chip:hover,.appt-cat-chip:focus-visible{
background:color-mix(in srgb, var(--appt-cat-color) 10%, transparent);
outline:none;
}
.appt-cat-chip:active{transform:scale(.97);}
.appt-cat-chip--active{
background:var(--appt-cat-color);color:#fff;
box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.appt-cat-chip--add{
--appt-cat-color:var(--primary,#1E5FA8);
border-style:dashed;
background:transparent;
}
.appt-cat-chip__emoji{font-size:16px;line-height:1;}
.appt-cat-chip__name{line-height:1.2;}
/* Contorno colorato delle card servizio in base alla categoria (wizard cliente). */
.appt-svc-card--selectable{--appt-svc-color:var(--primary,#1E5FA8);}
.appt-svc-card--selectable{border-left:4px solid var(--appt-svc-color, var(--primary,#1E5FA8));}
.appt-svc-empty{padding:20px;text-align:center;}
/* ---- Strip categorie lato vendor (sopra lista servizi) ---- */
.appt-cat-strip{margin:12px 0;}
.appt-cat-strip__label{
font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
color:var(--text2,#6b7280);margin-bottom:6px;
}
.appt-cat-strip__scroller{
display:flex;gap:8px;overflow-x:auto;
padding:4px 2px 6px 2px;-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
}
.appt-cat-strip__empty{padding:4px 8px;align-self:center;}
/* Badge categoria nella card servizio vendor. */
.appt-svc-card__cat{
--appt-cat-color:#1E5FA8;
display:inline-flex;align-items:center;gap:4px;
margin:2px 0 6px 0;padding:2px 8px;border-radius:999px;
font-size:11px;font-weight:600;line-height:1.4;
color:var(--appt-cat-color);
background:color-mix(in srgb, var(--appt-cat-color) 10%, transparent);
border:1px solid color-mix(in srgb, var(--appt-cat-color) 40%, transparent);
}
/* Selettore categoria nel wizard servizio (editor vendor). */
.appt-cat-select{margin-top:4px;}
/* ---- Card prenotazione vendor: riga cliente con nome/email/tel ---- */
.appt-booking-card__cliente{
display:flex;flex-wrap:wrap;gap:8px 14px;margin:4px 0;
font-size:13px;color:var(--text,#111);
}
.appt-booking-card__cliente-nome{font-weight:600;}
.appt-booking-card__cliente-email{color:var(--text2,#6b7280);font-size:12px;}
.appt-booking-card__cliente-tel{
display:inline-flex;align-items:center;gap:4px;
color:#fff;background:var(--success,#15803D);
padding:2px 10px;border-radius:999px;font-weight:600;font-size:12px;
text-decoration:none;
}
.appt-booking-card__cliente-tel:hover{background:#127029;}
/* === COMANDE ristorante (vista gestore) ===
Lista compatta: riga summary; tap apre dettaglio (items, indirizzo, azioni). */
.mr-comande-list{display:flex;flex-direction:column;gap:8px;}
.mr-comanda-fold{
border:1px solid var(--border);border-radius:var(--radius-lg);
background:var(--surface);overflow:hidden;
}
.mr-comanda-fold--ok{border-left:4px solid var(--success,#15803D);}
.mr-comanda-fold--warn{border-left:4px solid var(--warning,#D97706);}
.mr-comanda-fold--info{border-left:4px solid #1D4ED8;}
.mr-comanda-fold--danger{border-left:4px solid var(--danger,#B91C1C);}
.mr-comanda-fold__sum{
list-style:none;cursor:pointer;padding:10px 12px;
display:flex;align-items:center;gap:10px;
}
.mr-comanda-fold__sum::-webkit-details-marker{display:none;}
.mr-comanda-fold__sum-inner{flex:1;min-width:0;}
.mr-comanda-fold__sum-top{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.mr-comanda-fold__id{
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:12px;font-weight:700;color:var(--text2);
background:var(--surface2);padding:2px 7px;border-radius:6px;
}
.mr-comanda-fold__total{font-weight:800;font-size:16px;color:var(--text);}
.mr-comanda-fold__pills{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto;}
.mr-comanda-fold__sum-meta{font-size:12px;margin-top:4px;line-height:1.35;}
.mr-comanda-fold__chev{
flex-shrink:0;font-size:20px;font-weight:700;line-height:1;color:var(--text2);
transition:transform .2s;
}
.mr-comanda-fold[open] .mr-comanda-fold__chev{transform:rotate(180deg);}
.mr-comanda-fold__body{
margin:0;border:none;border-radius:0;border-top:1px dashed var(--border);
box-shadow:none;padding:12px 14px 14px;
}
/* Barra categorie menu (☰ → modale scelta) */
.mr-menu-cat-bar{
display:flex;align-items:center;gap:10px;margin:10px 0 12px;
padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-lg);
background:var(--surface2);
}
.mr-menu-cat-bar__burger{
flex-shrink:0;min-width:44px;min-height:44px;font-size:20px;line-height:1;padding:0;
}
.mr-menu-cat-bar__info{flex:1;min-width:0;}
.mr-menu-cat-bar__label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.mr-menu-cat-bar__title{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mr-menu-cat-bar__count{flex-shrink:0;font-size:12px;white-space:nowrap;}
.mr-menu-cat-modal__list{display:flex;flex-direction:column;gap:8px;}
.mr-menu-cat-modal__item{
display:flex;align-items:center;justify-content:space-between;gap:12px;
width:100%;text-align:left;padding:12px 14px;border-radius:12px;
border:1px solid var(--border2);background:var(--surface);
font:inherit;color:var(--text);cursor:pointer;
}
.mr-menu-cat-modal__item:hover,.mr-menu-cat-modal__item:focus-visible{
border-color:var(--primary);background:var(--surface2);
}
.mr-menu-cat-modal__item.is-active{
border-color:var(--primary);background:rgba(30,95,168,.08);
box-shadow:0 0 0 2px rgba(30,95,168,.12);
}
.mr-menu-cat-modal__name{font-weight:700;font-size:14px;}
.mr-menu-cat-modal__meta{font-size:12px;}
.mr-comanda-card{
margin:0 0 14px;padding:14px 14px 12px;
border-left:4px solid var(--border);
}
.mr-comanda-card--ok{border-left-color:var(--success,#15803D);}
.mr-comanda-card--warn{border-left-color:var(--warning,#D97706);}
.mr-comanda-card--info{border-left-color:#1D4ED8;}
.mr-comanda-card--danger{border-left-color:var(--danger,#B91C1C);}
.mr-comanda-card__head{
display:flex;align-items:flex-start;justify-content:space-between;
gap:10px;flex-wrap:wrap;margin-bottom:8px;
}
.mr-comanda-card__id{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.mr-comanda-card__id-num{
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:12px;font-weight:700;color:var(--text2);
background:var(--surface2);padding:3px 8px;border-radius:6px;
}
.mr-comanda-card__total{font-weight:800;font-size:18px;color:var(--text);}
.mr-comanda-card__pills{display:flex;gap:6px;flex-wrap:wrap;}
.mr-comanda-pill{
display:inline-flex;align-items:center;gap:4px;
padding:3px 9px;border-radius:999px;
font-size:11px;font-weight:700;line-height:1.3;
white-space:nowrap;
}
.mr-comanda-pill--mode{background:var(--surface2);color:var(--text2);}
.mr-comanda-pill--ok{background:var(--success-bg);color:#15803D;}
.mr-comanda-pill--warn{background:var(--warning-bg);color:#B45309;}
.mr-comanda-pill--info{background:var(--info-bg);color:#1D4ED8;}
.mr-comanda-pill--danger{background:var(--danger-bg);color:#B91C1C;}
/* Riga cliente (nome + email + telefono cliccabile). */
.mr-comanda-card__cust{
display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
margin:4px 0 6px;
font-size:13px;line-height:1.35;
}
.mr-comanda-card__cust-name{font-weight:700;color:var(--text);}
.mr-comanda-card__cust-email{
color:var(--text2);font-size:12px;text-decoration:none;
}
.mr-comanda-card__cust-email:hover{text-decoration:underline;}
.mr-comanda-card__cust-tel{
display:inline-flex;align-items:center;gap:4px;
color:#fff;background:var(--success,#15803D);
padding:2px 10px;border-radius:999px;font-weight:700;font-size:12px;
text-decoration:none;
}
.mr-comanda-card__cust-tel:hover{background:#127029;}
/* Badge metodo di pagamento (ben visibile: il rider deve sapere se incassare). */
.mr-comanda-card__pay{
display:flex;align-items:center;gap:8px;
padding:8px 10px;border-radius:10px;margin:6px 0 8px;
font-size:13px;font-weight:700;
border:1px solid transparent;
}
.mr-comanda-card__pay--ok{
background:var(--success-bg);color:#15803D;border-color:rgba(21,128,61,.2);
}
.mr-comanda-card__pay--warn{
background:var(--warning-bg);color:#B45309;border-color:rgba(217,119,6,.25);
}
.mr-comanda-card__pay-ico{font-size:16px;line-height:1;}
.mr-comanda-card__pay-txt{flex:1;}
/* Dettaglio pagamento online + rimborso gestore (tab Comande). */
.mr-comanda-pay-detail{
margin:8px 0 10px;padding:10px 12px;
background:var(--surface2);border:1px solid var(--border);
border-radius:10px;font-size:13px;line-height:1.45;
}
.mr-comanda-pay__row{margin:2px 0;}
.mr-comanda-pay__lbl{color:var(--text2);margin-right:6px;}
.mr-comanda-pay__tl-wrap{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}
.mr-comanda-pay__tl-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);margin-bottom:4px;}
.mr-comanda-pay__timeline{margin:0;padding-left:18px;font-size:12px;color:var(--text2);}
.mr-comanda-refund{
margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);
display:flex;flex-direction:column;gap:6px;
}
.mr-comanda-refund__partial{align-items:center;}
.mr-comanda-complaint{
margin:8px 0;padding:10px 12px;border-radius:10px;
background:var(--warning-bg);border:1px solid rgba(217,119,6,.25);
}
.mr-comanda-complaint__title{font-weight:800;font-size:13px;color:#B45309;margin-bottom:6px;}
.mr-comanda-complaint__thread{max-height:200px;overflow-y:auto;margin:6px 0;}
.mr-comanda-complaint__msg{margin:6px 0;padding:8px;background:var(--surface);border-radius:8px;font-size:12px;}
.mr-comanda-complaint__msg-meta{font-size:11px;color:var(--text2);margin-bottom:4px;}
.booking-detail__complaint-thread{margin-top:8px;}
.booking-detail__complaint-msg{
margin:8px 0;padding:10px 12px;border-radius:10px;background:var(--surface2);
border:1px solid var(--border);
}
.booking-detail__complaint-msg--mine{background:var(--info-bg);border-color:rgba(29,78,216,.2);}
.booking-detail__complaint-msg--joniohub{
background:rgba(220,38,38,.1);
border-color:rgba(220,38,38,.45);
}
.booking-detail__complaint-msg--joniohub .booking-detail__complaint-msg-head{color:#dc2626;}
.booking-detail__complaint-msg--joniohub .booking-detail__complaint-msg-body{color:var(--text);}
.booking-detail__complaint-msg-head{font-size:11px;font-weight:700;color:var(--text2);margin-bottom:4px;}
.booking-detail__complaint-msg-body{margin:0;font-size:14px;line-height:1.45;}
.mr-comanda-card__time{
font-size:12px;color:var(--text2);margin-top:4px;
}
.mr-comanda-card__time--proposed{font-weight:700;}
.mr-comanda-card__time--created{color:var(--text3);font-size:11px;}
.mr-comanda-address{
display:flex;flex-direction:column;gap:2px;
margin:8px 0;padding:8px 10px;
background:var(--surface2);border-radius:8px;
font-size:12px;line-height:1.4;
}
.mr-comanda-address__label{font-weight:700;color:var(--text2);}
.mr-comanda-address__txt{color:var(--text);}
.mr-comanda-address__notes{color:var(--text2);font-style:italic;margin-top:2px;}
/* Elenco righe ordinate. */
.mr-comanda-items{margin-top:10px;}
.mr-comanda-items__title{
font-size:12px;font-weight:800;color:var(--text2);
text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;
}
.mr-comanda-items__list{
list-style:none;margin:0;padding:0;
border:1px solid var(--border);border-radius:10px;
background:var(--surface);
overflow:hidden;
}
.mr-comanda-item{
padding:8px 10px;
border-bottom:1px solid var(--border);
}
.mr-comanda-item:last-child{border-bottom:none;}
.mr-comanda-item__head{
display:flex;align-items:baseline;gap:8px;
font-size:14px;
}
.mr-comanda-item__qty{
flex:0 0 auto;
font-weight:800;color:var(--primary,#1E5FA8);min-width:28px;
}
.mr-comanda-item__name{
flex:1 1 auto;font-weight:600;color:var(--text);
}
.mr-comanda-item__price{
flex:0 0 auto;font-size:12px;font-weight:700;color:var(--text2);
}
.mr-comanda-item__extras{
list-style:none;margin:6px 0 0 36px;padding:0;
display:flex;flex-direction:column;gap:2px;
}
.mr-comanda-extra{
display:flex;align-items:baseline;gap:6px;
font-size:12px;line-height:1.35;
}
.mr-comanda-extra__sym{
flex:0 0 auto;font-weight:800;width:14px;text-align:center;
}
.mr-comanda-extra--add .mr-comanda-extra__sym{color:#15803D;}
.mr-comanda-extra--add .mr-comanda-extra__txt{color:#15803D;}
.mr-comanda-extra--remove .mr-comanda-extra__sym{color:#B91C1C;}
.mr-comanda-extra--remove .mr-comanda-extra__txt{color:#B91C1C;text-decoration:line-through;}
.mr-comanda-extra--note .mr-comanda-extra__sym{color:var(--text2);}
.mr-comanda-extra--note .mr-comanda-extra__txt{color:var(--text2);}
.mr-comanda-items--empty{
padding:8px 10px;border:1px dashed var(--border);border-radius:10px;
color:var(--text2);font-size:12px;
}
/* =========================================================================
Beach Club (lido / stabilimento balneare).
Convention prefix `.bc-` per tutti gli elementi del modulo.
========================================================================= */
/* Header dettaglio lido (gestore). */
.bc-detail__head{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:8px;margin:8px 0 4px;
}
.bc-detail__title{margin:0;font-size:18px;font-weight:800;color:var(--text);}
.bc-detail__pills{display:flex;gap:6px;flex-wrap:wrap;}
.bc-pill{
display:inline-block;padding:3px 10px;border-radius:999px;
background:rgba(30,95,168,.10);color:var(--brand,#1E5FA8);font-size:12px;font-weight:700;
}
/* Tab. */
.bc-tabs{
display:flex;gap:4px;flex-wrap:wrap;
border-bottom:1px solid var(--border);margin:8px 0;
}
.bc-tab{
background:transparent;border:0;padding:10px 14px;font-weight:700;
color:var(--text2);cursor:pointer;border-radius:8px 8px 0 0;
}
.bc-tab--active{
color:var(--brand,#1E5FA8);
background:rgba(30,95,168,.08);
border-bottom:2px solid var(--brand,#1E5FA8);
}
.bc-tab-pane{padding:8px 0 24px;display:flex;flex-direction:column;gap:14px;}
/* Card zona / form fieldset. */
.bc-zone-card{
border:1px solid var(--border);border-radius:12px;padding:12px;
background:var(--card,#fff);display:flex;flex-direction:column;gap:10px;
/* min-width:0 e' indispensabile: senza, i figli flex (in particolare
`.bc-grid-scroll`) ereditano la larghezza naturale del proprio
contenuto e l'overflow-x del wrapper interno non si attiva mai su
mobile (la card si "allarga" col grid invece di consentire lo scroll). */
min-width:0;
max-width:100%;
}
.bc-zone-card__head{display:flex;align-items:center;justify-content:space-between;min-width:0;}
.bc-fieldset{
border:1px solid var(--border);border-radius:12px;padding:12px;
background:var(--card,#fff);display:flex;flex-direction:column;gap:10px;
min-width:0;
max-width:100%;
}
.bc-fieldset > legend{padding:0 6px;font-weight:800;color:var(--text);}
/* Form grid responsive. */
.bc-form-grid{
display:grid;gap:10px;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.bc-field{display:flex;flex-direction:column;gap:4px;font-size:13px;}
.bc-field--inline{flex-direction:row;align-items:center;gap:8px;}
.bc-field__label{color:var(--text2);font-size:12px;font-weight:600;}
.bc-field input, .bc-field select, .bc-field textarea{
padding:8px 10px;border:1px solid var(--border);border-radius:8px;
background:var(--card,#fff);color:var(--text);font-size:14px;
}
/* Wrapper scrollabile per la griglia ombrelloni e per le tabelle prezzi:
permette lo scroll orizzontale su smartphone senza far uscire la card. */
.bc-grid-scroll, .bc-table-scroll{
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
/* Indica all'utente che si puo' scrollare orizzontalmente. */
scrollbar-width:thin;
}
.bc-grid-scroll::-webkit-scrollbar, .bc-table-scroll::-webkit-scrollbar{height:6px;}
.bc-grid-scroll::-webkit-scrollbar-thumb, .bc-table-scroll::-webkit-scrollbar-thumb{
background:rgba(0,0,0,.18);border-radius:3px;
}
.bc-table-rows{min-width:560px;}
/* Anteprima/griglia ombrelloni — base. */
.bc-grid-preview, .bc-grid__inner{
display:grid;gap:6px;padding:10px;border-radius:12px;
background:#FFF8E1; /* default sand */
margin-top:8px;
/* La griglia mantiene la sua larghezza naturale: il wrapper esterno
.bc-grid-scroll gestisce l'overflow su mobile. */
width:max-content;
min-width:100%;
box-sizing:border-box;
}
.bc-grid--surface-sand .bc-grid__inner, .bc-grid-preview.bc-grid--surface-sand{background:#FFF1C2;}
.bc-grid--surface-pebble .bc-grid__inner, .bc-grid-preview.bc-grid--surface-pebble{background:#E5E5E5;}
.bc-grid--surface-gravel .bc-grid__inner, .bc-grid-preview.bc-grid--surface-gravel{background:#D7CBA9;}
.bc-grid--surface-mixed .bc-grid__inner, .bc-grid-preview.bc-grid--surface-mixed{
background:repeating-linear-gradient(45deg,#FFF1C2 0 18px,#E5E5E5 18px 36px);
}
/* Ombrellone (cella). */
.bc-cell{
display:flex;flex-direction:column;align-items:center;justify-content:center;
width:48px;height:48px;border-radius:50%;
font-size:18px;font-weight:700;cursor:pointer;
border:2px solid transparent;
transition:transform 80ms ease;
}
.bc-cell:active{transform:scale(0.94);}
.bc-cell__n{font-size:11px;font-weight:800;line-height:1;margin-top:-2px;}
.bc-cell--free{background:#16A34A;color:#fff;}
.bc-cell--busy{background:#DC2626;color:#fff;cursor:not-allowed;opacity:.8;}
/* Mezza giornata occupata: cerchio diviso in due meta' (alto = mattino,
basso = pomeriggio) con tinte verdi/ambra desaturate e badge "1/2" in
alto a destra. Cosi' a colpo d'occhio il cliente capisce che NON e' un
ombrellone "tutto rosso/tutto verde" ma una situazione di mezza giornata.
Manteniamo la semantica: il colore caldo (ambra) sta per "meta' presa". */
.bc-cell--half{
background:linear-gradient(180deg,#16A34A 0 50%,#F59E0B 50% 100%);
color:#fff;
position:relative;
border-color:rgba(255,255,255,.35);
box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.bc-cell--half::after{
content:"\00BD";
position:absolute;top:-6px;right:-6px;
width:18px;height:18px;border-radius:50%;
background:#F59E0B;color:#7C2D12;
display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:900;line-height:1;
border:2px solid var(--card,#fff);
pointer-events:none;
}
/* Ombrellone visivamente "half" ma non selezionabile per lo slot scelto:
leggera opacita' e cursor not-allowed. Resta visibile come half (utile
per dare contesto al cliente sulla zona). */
.bc-cell--locked{cursor:not-allowed;opacity:.75;}
.bc-cell--selected{outline:3px solid #FCD34D;outline-offset:2px;}
/* Passarelle (corsie di passaggio tra file/colonne).
Sono righe/colonne sottili, color "passerella di legno chiaro" con
pattern a strisce per indicare la corsia di passaggio. */
.bc-walkway{
align-self:stretch;justify-self:stretch;
display:flex;align-items:center;justify-content:center;
font-size:10px;font-weight:700;color:#92400E;letter-spacing:2px;
background:repeating-linear-gradient(90deg,#F5DEB3 0 8px,#E0C28A 8px 16px);
border-radius:4px;
pointer-events:none;
opacity:.85;
}
.bc-walkway--col{
background:repeating-linear-gradient(0deg,#F5DEB3 0 8px,#E0C28A 8px 16px);
}
/* Sopra superfici scure usiamo un colore piu' chiaro. */
.bc-grid--surface-pebble .bc-walkway{
background:repeating-linear-gradient(90deg,#FFF8DC 0 8px,#E8DCB9 8px 16px);
}
.bc-grid--surface-pebble .bc-walkway--col{
background:repeating-linear-gradient(0deg,#FFF8DC 0 8px,#E8DCB9 8px 16px);
}
/* Chip per editor passarelle nel pannello layout. */
.bc-walks{
display:flex;flex-direction:column;gap:8px;
padding:10px;border:1px dashed var(--border);border-radius:10px;
background:rgba(245,222,179,.18);
}
.bc-walks__hint{margin:0;font-size:12px;}
.bc-walks__block{display:flex;flex-direction:column;gap:6px;}
.bc-walks__title{font-size:12px;color:var(--text2);}
.bc-walks__chips{display:flex;flex-wrap:wrap;gap:6px;}
.bc-walks__empty{font-size:12px;}
.bc-walks__chip{
background:transparent;border:1px solid var(--border);color:var(--text);
padding:5px 10px;border-radius:999px;font-size:12px;cursor:pointer;
font-weight:600;
}
.bc-walks__chip--on{
background:#92400E;color:#FFF8E1;border-color:#92400E;
}
/* Legenda. */
/* Legenda colori — mini card con titolo e pillole "icona+testo".
Le icone quadrate riusano gli stessi colori delle celle ombrellone per
coerenza diretta con la griglia. */
.bc-legend{
display:flex;flex-direction:column;gap:8px;
margin:0 0 12px;padding:12px 14px;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-lg);
}
.bc-legend__title{
font-size:11px;font-weight:800;color:var(--text2);
letter-spacing:.5px;text-transform:uppercase;
}
.bc-legend__items{display:flex;flex-wrap:wrap;gap:8px;}
.bc-legend__item{
display:inline-flex;align-items:center;gap:6px;
padding:5px 10px;
background:var(--surface2);
border-radius:var(--radius-pill);
font-size:12px;font-weight:600;color:var(--text);
}
.bc-legend__dot{
display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;border-radius:5px;
font-size:10px;font-weight:800;color:#fff;line-height:1;
flex-shrink:0;
}
.bc-legend__dot--free{background:linear-gradient(135deg,#16A34A 0%,#0E7A38 100%);}
.bc-legend__dot--busy{background:linear-gradient(135deg,#DC2626 0%,#991B1B 100%);}
.bc-legend__dot--half{background:linear-gradient(180deg,#16A34A 0 50%,#F59E0B 50% 100%);}
/* =========================================================================
Wizard cliente lido — design system JonioHUB (variabili --primary, --surface,
--radius-md/lg, gradient brand, stepper +/- come carrello).
========================================================================= */
/* (Hero locale .bc-wiz__hero rimosso: ora il header del wizard lido vive
nella `.page-context-bar` globale unificata sotto #topBar.) */
/* Date card — pseudo-input cliccabile con display IT umano + datepicker
nativo invisibile sopra (l'utente vede il design custom, ma il tap apre
il calendario di sistema). */
.bc-wiz__date{
position:relative;display:flex;align-items:center;gap:14px;
margin:0 0 14px;padding:14px 16px;
background:var(--surface);
border:1.5px solid var(--border);
border-radius:var(--radius-lg);
cursor:pointer;
transition:border-color .15s, box-shadow .15s, background .15s;
}
.bc-wiz__date:hover{border-color:var(--primary-mid);background:var(--surface2);}
.bc-wiz__date:focus-within{
border-color:var(--primary);
box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.bc-wiz__date-icon{
width:42px;height:42px;flex-shrink:0;border-radius:50%;
background:var(--primary-light);color:var(--primary);
display:flex;align-items:center;justify-content:center;
font-size:20px;
}
.bc-wiz__date-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.bc-wiz__date-label{
font-size:11px;font-weight:800;color:var(--text2);
letter-spacing:.5px;text-transform:uppercase;
}
.bc-wiz__date-display{
font-size:16px;font-weight:700;color:var(--text);
text-transform:capitalize;letter-spacing:-.1px;
}
.bc-wiz__date-caret{color:var(--text2);font-size:14px;flex-shrink:0;}
/* Bottone-card per la data: serve `text-align:left` perche' di default
un