:root{ --pri:#4a6b3a; --pri-d:#33481f; --acc:#c98a3b; --ink:#25241d; --muted:#7c7660; --bg:#f6f4ec; --card:#fffefa; --line:#e7e2cf; --ok:#2f7a3a; --green:#eaf3e3; --ui:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --shadow-sm:0 1px 2px rgba(35,32,20,.05),0 1px 3px rgba(35,32,20,.04); --shadow-md:0 4px 16px rgba(35,32,20,.07),0 2px 6px rgba(35,32,20,.05); --shadow-lg:0 16px 38px rgba(35,32,20,.13); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} [hidden]{display:none!important} /* Sfondo anche su : senza, le aree scoperte durante le View Transitions tra pagina e pagina (freccia indietro), l'overscroll su iPhone e la status bar in modalita' app mostrano il BIANCO di default del browser -> barre bianche sopra e a destra. */ html{background:var(--bg)} /* l'area operatore oggi e' CHIARA (crema, come il resto): il vecchio scuro qui era il colore che sbucava ai bordi durante le transizioni di pagina */ html:has(body.operatore-theme){background:#F8F4EB} ::view-transition{background:var(--bg)} /* icone Lucide inline: ereditano colore (currentColor) e scalano col testo (1em) */ .ico{width:1em;height:1em;flex:0 0 auto;vertical-align:-.14em;stroke:currentColor;fill:none} .ico-lg{width:1.3em;height:1.3em} .ico-xl{width:2.2em;height:2.2em;vertical-align:middle} body{margin:0;font-family:var(--ui);color:var(--ink);background:var(--bg);line-height:1.5; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility; /* toccando due volte in fretta (es. + e - a raffica) il telefono zoomava la pagina: 'manipulation' toglie SOLO il doppio-tap-zoom, restano scroll e zoom con due dita */ touch-action:manipulation} /* comandi: nessun lampo al tocco e nessuna selezione del testo tenendo premuto (i campi di testo restano ovviamente selezionabili) */ button,.btn,input[type=button],input[type=submit],select{ -webkit-tap-highlight-color:transparent; -webkit-user-select:none;-moz-user-select:none;user-select:none; -webkit-touch-callout:none; } a{color:inherit;text-decoration:none} h1{font-size:1.4rem;margin:.2rem 0;letter-spacing:-.015em} h2{font-size:1.05rem;margin:.4rem 0;letter-spacing:-.01em} .muted{color:var(--muted)} .small{font-size:.82rem} .r{text-align:right} .pad{padding:1rem} /* brand / logo */ .wordmark{font-family:'Baloo 2',cursive;font-weight:700;letter-spacing:.005em} .brand-logo{height:36px;width:36px;border-radius:10px;vertical-align:middle;flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.22)} .login-logo{width:104px;height:104px;border-radius:24px;display:block;margin:0 auto .9rem; box-shadow:0 10px 26px rgba(0,0,0,.18)} /* --- iscrizione nuovo cliente --- */ /* compound (non .signup-card da solo) per battere .login-card qualunque sia l'ordine nel file */ .login-card.signup-card{width:min(460px,100%);text-align:left} .signup-card h1,.signup-card .sub{text-align:center} .signup-form label{font-size:.85rem;color:var(--ink);font-weight:600;margin-bottom:.8rem} .signup-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:0 .9rem} .signup-hint{display:block;font-size:.75rem;color:var(--muted);font-weight:400;line-height:1.35;margin-top:.25rem} .signup-link{color:var(--pri);font-weight:700} /* "Hai dimenticato la password?" sotto il campo password del login */ .forgot-link{text-align:right;margin:-.35rem 0 .9rem} .forgot-link a{font-size:.82rem;font-weight:600;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent} .forgot-link a:hover{color:var(--pri-d);border-bottom-color:currentColor} /* check "Ricordami su questo dispositivo" nel login */ .remember-row{display:flex;align-items:center;gap:.55rem;margin:0 0 1rem;cursor:pointer; font-size:.88rem;font-weight:600;color:var(--ink)} .remember-row input{width:1.1rem;height:1.1rem;margin:0;flex:0 0 auto;accent-color:var(--pri);cursor:pointer} /* casella a 6 cifre (OTP) per il codice nel recupero password */ .otp-label{font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:.5rem;text-align:left} .otp{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;margin-bottom:.9rem} .otp-cell{width:100%;aspect-ratio:1/1.18;padding:0;text-align:center; font-size:1.7rem;font-weight:800;color:var(--pri-d);font-variant-numeric:tabular-nums; border:2px solid var(--line);border-radius:13px;background:#fff;caret-color:var(--pri); transition:border-color .15s,box-shadow .15s,background .15s,transform .08s} .otp-cell:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(74,107,58,.16)} .otp-cell.filled{background:#f3f6ee;border-color:var(--pri)} @media (max-width:360px){.otp{gap:.35rem}.otp-cell{font-size:1.4rem;border-radius:11px}} .otp-paste{display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%; margin-bottom:.7rem;padding:.6rem;border-radius:12px;font-weight:700;font-size:.92rem; color:var(--pri-d);background:#eef4e7;border:1px solid #d6e3c8;cursor:pointer; transition:background .15s,transform .1s} .otp-paste:hover{background:#e4eedb} .otp-paste:active{transform:scale(.98)} .otp-paste .ico{width:1.05em;height:1.05em} .signup-cta{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap; margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)} .signup-cta .btn{padding:.45rem 1.1rem;font-size:.88rem} /* honeypot: fuori schermo, invisibile ai clienti ma compilato dai bot */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* --- area account cliente --- */ .acc-hero{display:flex;align-items:center;gap:1rem;background:var(--card);border:1px solid var(--line); border-radius:16px;padding:1.1rem 1.2rem;margin-bottom:1.1rem;box-shadow:var(--shadow-sm)} .acc-avatar-big{flex:0 0 auto;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--pri),var(--pri-d));color:#fff;font-weight:800;font-size:1.4rem; box-shadow:0 4px 12px -3px rgba(74,107,58,.5)} .acc-ident{min-width:0} .acc-name{font-size:1.2rem;font-weight:800;letter-spacing:-.015em;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acc-email{font-size:.85rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acc-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.15rem 1.25rem; margin-bottom:1rem;box-shadow:var(--shadow-sm);max-width:640px} .acc-h{margin:0 0 .9rem;font-size:1rem;font-weight:800;color:var(--pri-d)} .acc-card label{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:.9rem} .acc-card input{margin-top:.25rem} .acc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:0 1rem} .acc-logout{display:flex;align-items:center;justify-content:center;max-width:640px;margin-top:.4rem; padding:.85rem;border-radius:13px;font-weight:700;color:#8a2f1f;background:#fbeeee;border:1px solid #f0d5d5; transition:background .15s,transform .12s} .acc-logout:hover{background:#f6dede} .acc-logout:active{transform:scale(.98)} /* evidenzia la sezione "cambia password" quando si arriva dal recupero (?reset=1) */ .acc-reset-hint{display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:700;color:var(--pri-d); background:#eef6e8;border:1px solid #d6e8c8;border-radius:11px;padding:.55rem .7rem;margin:0 0 1rem} .acc-highlight{border-color:var(--pri);box-shadow:0 0 0 3px rgba(74,107,58,.18),var(--shadow-sm); animation:accpulse 1.1s ease-out 2} @keyframes accpulse{0%{box-shadow:0 0 0 0 rgba(74,107,58,.35),var(--shadow-sm)} 100%{box-shadow:0 0 0 8px rgba(74,107,58,0),var(--shadow-sm)}} /* --- admin: iscrizioni in attesa di approvazione --- */ .isc-section{margin-bottom:1.6rem} .isc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:1rem} .isc-card{display:flex;flex-direction:column;gap:.6rem;background:var(--card);border:1px solid #f0e2c2; border-left:4px solid var(--acc);border-radius:14px;padding:.9rem 1rem;box-shadow:var(--shadow-sm)} .isc-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem} .isc-name{margin:0;font-size:1.05rem;font-weight:800;letter-spacing:-.015em;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .isc-when{flex:0 0 auto;font-size:.72rem;color:var(--muted);font-weight:600} .isc-contatti{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem} .isc-contatti a{color:var(--pri-d);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .isc-contatti a:hover{text-decoration:underline} .isc-comune{color:var(--muted);font-size:.8rem} .isc-actions{display:flex;gap:.5rem;margin-top:.1rem} .isc-actions form{flex:1} .isc-actions button{width:100%} /* "Installa l'app" (PWA): scorciatoia sul desktop / schermata Home */ .install-wrap{text-align:left} /* mostra separatore + spazio SOLO se il bottone "installa app" e' davvero visibile (su browser che non offrono l'installazione i figli restano [hidden] -> niente riga vagante) */ .install-wrap:has(> :not([hidden])){margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line)} .install-btn{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;color:var(--ink); background:var(--card);border:1px solid var(--line);border-radius:13px;padding:.7rem .75rem; box-shadow:var(--shadow-sm);cursor:pointer;transition:border-color .15s,background .15s,transform .14s} .install-btn:hover{background:var(--green);border-color:var(--pri)} .install-btn:active{transform:scale(.98)} .install-hint,.install-hint:hover{cursor:default;background:var(--card);border-color:var(--line)} .install-ico{width:38px;height:38px;border-radius:10px;flex:0 0 auto;box-shadow:0 2px 6px rgba(0,0,0,.2)} .install-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1} .install-txt b{font-size:.9rem;color:var(--ink);font-weight:800;line-height:1.2} .install-txt em{font-style:normal;font-size:.75rem;color:var(--muted);line-height:1.35} .install-plus{flex:0 0 auto;font-size:1.25rem;color:var(--pri);font-weight:400;line-height:1} /* stesso blocco nella pagina account: allineato alle card (max 640px) */ .acc-install{max-width:640px} /* topbar */ .topbar{display:flex;align-items:center;gap:1rem;background:linear-gradient(180deg,var(--pri),var(--pri-d)); color:#fff;padding:.7rem 1.2rem;position:sticky;top:0;z-index:20;box-shadow:0 8px 22px -10px rgba(35,32,20,.45)} .brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.18rem;white-space:nowrap} .top-links{display:flex;flex:1;justify-content:flex-end;gap:.35rem} .top-links a{padding:.45rem .9rem;border-radius:10px;color:rgba(255,255,255,.9);font-weight:600; transition:background .15s,color .15s} .top-links a:hover{background:rgba(255,255,255,.14);color:#fff} .top-links a.active{background:rgba(255,255,255,.2);color:#fff} /* avatar cliente all'estrema DESTRA del topbar: apre la sezione account */ .user-avatar{flex:0 0 auto;margin-left:auto;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center; justify-content:center;background:rgba(255,255,255,.22);border:1.5px solid rgba(255,255,255,.55);color:#fff; font-weight:800;font-size:.92rem;letter-spacing:.02em;transition:background .15s,transform .12s,box-shadow .15s} .user-avatar:hover{background:rgba(255,255,255,.32)} .user-avatar:active{transform:scale(.93)} .user-avatar.active{background:#fff;color:var(--pri-d);box-shadow:0 0 0 2px rgba(255,255,255,.5)} .logout{border:1px solid rgba(255,255,255,.5);padding:.42rem .9rem;border-radius:10px;white-space:nowrap; color:#fff;font-weight:600;transition:background .15s;flex:0 0 auto} .logout:hover{background:rgba(255,255,255,.15)} /* barra di navigazione in basso: nav moderna a pillola espandibile (solo mobile) */ .tabbar{display:none} @media(max-width:859px){ .top-links{display:none} /* i link vanno nella tabbar in basso */ .logout{padding:.42rem .8rem;font-size:.85rem} .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:41; gap:.55rem;justify-content:center;align-items:center; padding:.55rem 1rem calc(.55rem + env(safe-area-inset-bottom)); background:rgba(255,255,255,.9);border-top:1px solid rgba(255,255,255,.6); border-radius:24px 24px 0 0; -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5); box-shadow:0 -14px 36px -18px rgba(35,32,20,.4)} .tab{display:flex;align-items:center;justify-content:center;gap:.5rem; height:52px;min-width:52px;padding:0 1rem;border-radius:999px; color:var(--muted);font-weight:800;text-decoration:none;-webkit-tap-highlight-color:transparent; transition:background .32s cubic-bezier(.3,.9,.3,1.1),color .25s ease, padding .32s cubic-bezier(.3,.9,.3,1.1),box-shadow .3s ease,transform .12s ease} .tab-ico{width:23px;height:23px;flex:0 0 auto;transition:transform .32s cubic-bezier(.3,.9,.3,1.4)} .tab-lbl{max-width:0;overflow:hidden;opacity:0;white-space:nowrap; font-size:.95rem;letter-spacing:-.01em; transition:max-width .34s cubic-bezier(.3,.9,.3,1.1),opacity .22s ease} .tab.on{color:#fff;padding:0 1.3rem; background:linear-gradient(180deg,var(--pri),var(--pri-d)); box-shadow:0 12px 24px -10px color-mix(in srgb,var(--pri-d) 82%,#000)} .tab.on .tab-ico{transform:scale(1.06)} .tab.on .tab-lbl{max-width:160px;opacity:1} .tab:not(.on):active{background:color-mix(in srgb,var(--pri) 14%,transparent);transform:scale(.93)} /* spazio in fondo per non finire sotto la tabbar (e footer sopra di essa) */ body{padding-bottom:calc(80px + env(safe-area-inset-bottom))} /* quando c'e' anche la barra carrello flottante il footer deve stare SOPRA di essa (altrimenti il logo Leonardo TEC finisce coperto) */ body:has(.cart-bar){padding-bottom:calc(132px + env(safe-area-inset-bottom))} .foot{padding-bottom:.5rem} } .container{max-width:1100px;margin:0 auto;padding:1rem} .foot{text-align:center;color:var(--muted);font-size:.8rem;padding:1.5rem} .powered{display:inline-flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none; opacity:.7;margin-top:.6rem} .powered:hover{opacity:1} .powered span{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)} .powered img{height:22px;width:auto} .foot .powered{display:flex;margin:.6rem auto 0} .admin-foot .powered.dark{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1);width:100%} .admin-foot .powered.dark span{color:rgba(255,255,255,.6)} .admin-foot .powered.dark img{height:26px} /* flash */ .flash{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem} .flash-error{background:#fbe9e2;color:#9b3a1c;border:1px solid #f0c4ae} .flash-success{background:var(--green);color:#1d6b2f;border:1px solid #bfe0bf} /* login */ /* campo password con occhio mostra/nascondi (login, iscrizione, cambio password) */ .pwd-field{position:relative;display:block;margin-top:.2rem} /* niente margine interno: l'input riempie il .pwd-field, cosi' l'occhio (top:50%) e' centrato verticalmente sul campo di testo e non sul contenitore piu' alto del margine */ .pwd-field input{width:100%;padding-right:2.9rem;margin-top:0} .pwd-toggle{position:absolute;top:50%;right:.35rem;transform:translateY(-50%); width:36px;height:36px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--muted); display:inline-flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent; transition:background .16s ease,color .16s ease} .pwd-toggle:hover{color:var(--pri-d);background:var(--green)} .pwd-toggle:active{transform:translateY(-50%) scale(.9)} .pwd-toggle svg{width:21px;height:21px;flex:0 0 auto} .pwd-toggle .eye-hide{display:none} .pwd-toggle.is-shown .eye-show{display:none} .pwd-toggle.is-shown .eye-hide{display:inline} .login-wrap{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center; padding:24px 16px;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))} .login-card{background:var(--card);padding:2rem;border-radius:14px;width:min(340px,100%); box-shadow:0 10px 30px rgba(0,0,0,.1);border-top:5px solid var(--pri)} .login-card{text-align:center} .login-card h1{color:var(--pri);margin:0;font-family:'Baloo 2',cursive;font-size:1.7rem} .login-card .sub{color:var(--muted);margin:.2rem 0 1.2rem} .login-card form{text-align:left} label{display:block;font-size:.85rem;color:#444;margin-bottom:.8rem} input,textarea,select{width:100%;padding:.6rem .7rem;border:1px solid var(--line); border-radius:10px;font-size:1rem;margin-top:.2rem;background:#fff;font-family:inherit;color:var(--ink); transition:border-color .15s,box-shadow .15s} /* Niente zoom automatico quando si tocca un campo: iOS ingrandisce la pagina se il testo del campo sta sotto i 16px. Sui dispositivi touch impongo 16px a TUTTI i campi, !important compreso: le regole di stile delle singole pagine (ricerca del catalogo, note del messaggio...) sono piu' specifiche e altrimenti vincerebbero, riportando lo zoom. Lo zoom a due dita resta possibile: non tocchiamo il viewport. */ @media (pointer: coarse){ input,textarea,select{font-size:16px !important} } input:focus,textarea:focus,select:focus{outline:none;border-color:var(--pri); box-shadow:0 0 0 3px rgba(74,107,58,.14)} button,.btn{background:var(--pri);color:#fff;border:0;padding:.62rem 1.15rem;border-radius:10px; font-size:.98rem;cursor:pointer;font-weight:700;font-family:inherit;display:inline-block;letter-spacing:.005em; transition:background .15s,box-shadow .15s,transform .12s} button:hover,.btn:hover{background:var(--pri-d)} button:active,.btn:active{transform:translateY(1px)} button:disabled{background:#bcb9a8;cursor:not-allowed;box-shadow:none} .btn-outline{background:#fff;color:var(--pri);border:1px solid var(--pri);box-shadow:none} .btn-outline:hover{background:var(--green)} .btn-danger{background:#a83c2a} .btn-danger:hover{background:#8a2f1f} .btn-sm{padding:.38rem .7rem;font-size:.85rem;border-radius:8px} /* page head */ .page-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem;flex-wrap:wrap;justify-content:space-between} .page-head:has(.page-back) h1{flex:1 1 auto;min-width:0} .back{color:var(--pri);font-weight:600} /* cards */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem} .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem; display:block;box-shadow:0 2px 10px rgba(0,0,0,.04)} .card-title{font-weight:700} .card-sub{color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;font-weight:700} .card-num{font-size:2.2rem;font-weight:800;color:var(--pri-d);line-height:1.1;margin-top:.3rem} .card-meta{color:var(--muted);font-size:.85rem;margin-top:.3rem} table{width:100%;border-collapse:collapse;background:var(--card);border-radius:12px;overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.04)} th,td{padding:.65rem .75rem;border-bottom:1px solid var(--line);text-align:left;font-size:.92rem} th{background:#f0ecd9;color:#4c4a3a;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.02em} tr:last-child td{border-bottom:0} .badge{display:inline-flex;align-items:center;gap:.32rem;padding:.22rem .55rem;border-radius:8px;font-size:.68rem; font-weight:700;text-transform:uppercase;letter-spacing:.045em;line-height:1;white-space:nowrap} .badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.85} .badge-attesa{background:#fbeecb;color:#946200} .badge-confermato{background:var(--green);color:#1d6b2f} .badge-evaso{background:#e3ecf7;color:#26466e} .badge-annullato{background:#f4dede;color:#933422} /* card cliente: ordini prenotati e mai ritirati — deve saltare all'occhio */ .badge-noshow{display:inline-flex;align-items:center;gap:.3rem;background:#a83c2a;color:#fff; font-weight:800} /* ── ricerca istantanea (lista clienti) ── */ /* la riga filtrata via deve sparire anche in vista "card" su mobile, dove il CSS ridefinisce display:block e vincerebbe sull'attributo hidden */ tbody tr[hidden]{display:none !important} .cerca-cli{flex:1 1 320px;align-items:center} .cerca-box{position:relative;flex:1 1 260px;min-width:0;max-width:420px} .cerca-box input{width:100%;padding-left:2.3rem;padding-right:2.1rem;border-radius:9px;margin:0} .cerca-box input::-webkit-search-cancel-button{display:none} .cerca-ico{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);display:flex; color:var(--muted);pointer-events:none} .cerca-ico .ico{width:16px;height:16px} .cerca-x{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);background:transparent; border:0;color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer;padding:.1rem .35rem; min-height:0;box-shadow:none} .cerca-x:hover{color:var(--ink);background:transparent} .cerca-conta{flex:0 0 auto;font-size:.8rem;font-weight:700;color:var(--muted);white-space:nowrap} /* "Riprendi il lavoro di un altro mercato" (Disponibilita' & sconti) */ .copia-card{background:var(--card);border:1px solid var(--line);border-radius:14px; padding:.9rem 1.1rem;margin-bottom:1.1rem;max-width:760px} .copia-head{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.8rem} .copia-head .copia-ico{display:flex;color:var(--pri);margin-top:.1rem} .copia-head .copia-ico .ico{width:19px;height:19px} .copia-head b{display:block;font-size:.98rem;color:var(--ink);margin-bottom:.1rem} .copia-head span{font-size:.84rem;color:var(--muted);line-height:1.45} .copia-form{display:flex;gap:.7rem;align-items:end;flex-wrap:wrap} .copia-campo{margin:0;flex:0 1 auto;font-size:.82rem;font-weight:600;color:var(--muted)} .copia-campo select{width:auto;min-width:190px;margin-top:.25rem} .copia-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem} .copia-dettaglio{margin:.7rem 0 0;font-size:.82rem;font-weight:600;color:#2c5222; background:#f3f8f1;border-radius:9px;padding:.45rem .7rem;display:inline-block} .copia-dettaglio.senza-sconti{color:#8a6d1f;background:#fdf6e3} .copia-nota{margin:.55rem 0 0;font-size:.8rem;color:var(--muted)} @media(max-width:560px){ .copia-form{display:grid;grid-template-columns:1fr;gap:.6rem} .copia-campo select{width:100%;min-width:0} .copia-btn{width:100%;justify-content:center} } /* ── barra filtri degli ordini ── */ .ord-toolbar{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-bottom:.6rem} .ord-cerca{flex:1 1 260px;max-width:460px} .ord-select{flex:0 0 auto;width:auto;max-width:260px;margin:0;border-radius:9px} .ord-chips{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.7rem} .ord-chips .chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--card); color:var(--ink);border:1px solid var(--line);border-radius:99px;padding:.4rem .8rem; font-size:.85rem;font-weight:600;cursor:pointer;box-shadow:none;min-height:0} .ord-chips .chip:hover{background:#faf8f2;border-color:#c9c2b4} .ord-chips .chip.active{background:var(--pri);border-color:var(--pri);color:#fff} .ord-chips .chip .chip-n{background:rgba(0,0,0,.08);border-radius:99px;padding:.05rem .42rem; font-size:.76rem;font-weight:800} .ord-chips .chip.active .chip-n{background:rgba(255,255,255,.25)} .ord-chips .chip-allarme{border-color:#eccaca;color:#8a2f1f} .ord-chips .chip-allarme.active{background:#a83c2a;border-color:#a83c2a;color:#fff} /* chip senza ordini nel mercato scelto: resta cliccabile ma non attira l'occhio */ .ord-chips .chip.chip-zero{opacity:.45} .ord-riepilogo{font-size:.86rem;font-weight:700;color:var(--muted);margin-bottom:.6rem;min-height:1.2em} /* contatore dentro il campo di ricerca del catalogo (che ha gia' la sua × a destra) */ .search-box .search-conta{position:absolute;right:2.4rem;top:50%;transform:translateY(-50%); font-size:.76rem;font-weight:700;color:var(--muted);pointer-events:none;background:var(--card); padding-left:.3rem} /* storico prezzi nella scheda prodotto: elenco a periodi, regge largo e stretto */ .sp-list{max-width:640px;background:var(--card);border:1px solid var(--line);border-radius:12px; overflow:hidden} .sp-riga{display:flex;align-items:center;gap:.9rem;padding:.6rem .9rem;border-top:1px solid #f0ece1} .sp-riga:first-child{border-top:0} .sp-riga.is-attuale{background:#f3f8f1} .sp-prezzo{flex:0 0 108px;white-space:nowrap} .sp-prezzo b{font-size:1.05rem;font-weight:800;color:var(--ink)} .sp-prezzo em{font-style:normal;font-size:.78rem;color:var(--muted)} .sp-periodo{flex:1;min-width:0;font-size:.86rem;color:var(--ink)} .sp-tag{display:inline-block;background:#2c5222;color:#fff;font-size:.68rem;font-weight:800; text-transform:uppercase;letter-spacing:.05em;border-radius:99px;padding:.14rem .5rem;margin-right:.25rem} .sp-mercati{display:inline-block;margin-left:.45rem;font-size:.72rem;color:var(--muted); background:#f4f1e8;border-radius:99px;padding:.12rem .5rem;white-space:nowrap} .sp-delta{flex:0 0 auto} .sp-chip{display:inline-block;font-size:.8rem;font-weight:800;border-radius:8px;padding:.2rem .5rem} .sp-chip.delta-su{background:#f4dede} .sp-chip.delta-giu{background:#d9ead3} .sp-chip.sp-primo{background:#f4f1e8;color:var(--muted);font-weight:600;font-size:.74rem} @media(max-width:560px){ .sp-riga{flex-wrap:wrap;row-gap:.25rem} .sp-prezzo{flex:1 1 auto} .sp-delta{order:2} .sp-periodo{order:3;flex-basis:100%} } .delta-su{color:#a83c2a;font-weight:700} .delta-giu{color:#2c5222;font-weight:700} /* apertura manuale delle ordinazioni (Disponibilita' & sconti) */ .apertura-box{display:flex;align-items:center;justify-content:space-between;gap:1rem; flex-wrap:wrap;margin:0 0 1rem;padding:.9rem 1.1rem;border:1px solid #eccaca; border-radius:12px;background:#fdf7f6} .apertura-box.is-aperta{border-color:#cfe3d2;background:#f3f8f1} .apertura-box .ab-txt{flex:1;min-width:240px} .apertura-box .ab-txt b{display:flex;align-items:center;gap:.4rem;margin-bottom:.15rem;color:#8a2f1f} .apertura-box.is-aperta .ab-txt b{color:#2c5222} .apertura-box .ab-txt span{font-size:.85rem;color:var(--muted);line-height:1.45} /* interruttore ordini nella scheda cliente */ .stato-ordini-box{display:flex;align-items:center;justify-content:space-between;gap:1rem; flex-wrap:wrap;margin-top:1.6rem;padding:.9rem 1.1rem;border:1px solid #cfe3d2; border-radius:12px;background:#f3f8f1;max-width:600px} .stato-ordini-box.is-off{border-color:#eccaca;background:#fdf7f6} .stato-ordini-box .sob-txt{flex:1;min-width:220px} .stato-ordini-box .sob-txt b{display:flex;align-items:center;gap:.4rem;margin-bottom:.15rem;color:#2c5222} .stato-ordini-box.is-off .sob-txt b{color:#8a2f1f} .stato-ordini-box .sob-txt span{font-size:.85rem;color:var(--muted);line-height:1.45} /* zona pericolosa in fondo alla scheda cliente */ .danger-zone{margin-top:2.2rem;padding:1rem 1.1rem;border:1px solid #eccaca;border-radius:12px; background:#fdf7f6;max-width:600px} .danger-zone h2{margin:0 0 .35rem;font-size:1.02rem;color:#8a2f1f} .danger-zone p{margin:0 0 .7rem} /* QR a tutto schermo dal dettaglio ordine */ #qr-thumb{cursor:zoom-in;border-radius:10px} .qr-full{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center; background:rgba(252,251,246,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); animation:ordModalIn .18s ease} .qr-full img{width:min(92vw,72vh);height:auto;image-rendering:pixelated; border-radius:14px;box-shadow:var(--shadow-lg)} .qrf-close{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;width:46px;height:46px; display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%; background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-md); font-size:1.15rem;cursor:pointer;transition:background .15s,transform .12s} .qrf-close:hover{background:#f3f0e6;color:var(--ink)} .qrf-close:active{transform:scale(.94)} /* card dei prodotti nel dettaglio ordine cliente */ .ordr-list{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem} .ordr-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px; padding:.85rem 1rem;box-shadow:var(--shadow-sm)} .ordr-nome{font-weight:800;font-size:1.05rem;color:var(--ink);margin-bottom:.55rem} .ordr-riga{display:flex;flex-wrap:wrap;gap:.45rem} /* cella-info: etichetta in alto, valore CENTRATO nello spazio che resta (le celle della stessa riga si stirano alla stessa altezza, il valore non rimane mai appiccicato in alto) */ .ordr-cell{flex:1 1 130px;min-width:0;display:flex;flex-direction:column; background:#faf8f2;border:1px solid #eee9da;border-radius:10px;padding:.45rem .65rem} .ordr-cell span{display:block;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.15rem} .ordr-cell b{margin:auto 0;font-size:clamp(.9rem,3.9vw,1.02rem);font-weight:800;color:var(--ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ordr-tot{background:#f3f6ee;border-color:#dfe8d3} .ordr-tot b{color:var(--pri-d)} .ordr-tot s{color:var(--muted);font-weight:600;font-size:.82rem;margin-right:.25rem} /* prodotto in sconto: card calda + badge percentuale sul bordo */ .ordr-card.is-sconto{border-color:#ecd3a2;background:linear-gradient(180deg,#fffdf6,#fff7e6)} .ordr-sconto-badge{position:absolute;top:-10px;right:12px;display:inline-flex;align-items:center;gap:.28rem; background:linear-gradient(135deg,#e8a33d,var(--acc));color:#fff;font-size:.74rem;font-weight:800; padding:.2rem .6rem;border-radius:999px;box-shadow:0 5px 12px -5px rgba(201,138,59,.65)} /* totale ordine in evidenza */ .ordr-totale{display:flex;align-items:center;justify-content:space-between;margin-top:.9rem; background:linear-gradient(135deg,var(--pri),var(--pri-d));color:#fff;border-radius:14px; padding:.9rem 1.15rem;box-shadow:0 12px 24px -12px rgba(51,72,31,.6)} .ordr-totale span{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;opacity:.9} .ordr-totale b{font-size:1.5rem;font-weight:800;letter-spacing:-.01em} /* annullo ordine dal dettaglio cliente */ .annulla-box{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line);text-align:center} .btn-annulla{display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%; padding:.85rem 1.4rem;border-radius:13px; font-weight:700;font-size:.95rem;color:#8a2f1f;background:#fbeeee;border:1px solid #f0d5d5; cursor:pointer;transition:background .15s,transform .12s} .btn-annulla:hover{background:#f6dede} .btn-annulla:active{transform:scale(.97)} .annulla-box .small{margin:.5rem 0 0} /* i bottoni dentro il modal di conferma occupano tutta la colonna anche se in un form */ .omc-actions form{display:contents} /* varianti di stato del riquadro ritiro nel dettaglio ordine */ .mercato-box.mb-cancel{background:#faeceb;border-color:#f0d5d5;color:#7c2d21} .mercato-box.mb-cancel b{color:#933422} .mercato-box.mb-done{background:#e9f1fa;border-color:#d3e2f2;color:#2c4a6e} .mercato-box.mb-done b{color:#26466e} .mercato-box{background:var(--green);border:1px solid #cfe4c1;border-radius:12px; padding:.65rem .85rem;margin-bottom:1rem;color:#274a1f} .mercato-box b{color:#1c3616} /* riquadro mercato riducibile */ .mb-top{display:flex;align-items:flex-start;gap:.5rem} .mb-main{flex:1 1 auto;min-width:0;line-height:1.4;font-size:.95rem} .mb-pin{margin-right:.15rem} .mb-info{flex:0 0 auto;width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center; border:0;border-radius:50%;background:rgba(255,255,255,.6);color:var(--pri-d);cursor:pointer; -webkit-tap-highlight-color:transparent;transition:background .18s ease,color .18s ease,transform .16s ease} .mb-info svg{width:18px;height:18px;flex:0 0 auto} .mb-info:hover{background:#fff} .mb-info:active{transform:scale(.9)} .mercato-box.open .mb-info{background:var(--pri);color:#fff} .mb-deadline{margin-top:.45rem;font-weight:800;color:var(--acc);font-size:.92rem} .mb-extra{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.3,.9,.3,1)} .mercato-box.open .mb-extra{grid-template-rows:1fr} .mb-extra-in{overflow:hidden;min-height:0} .mb-row{font-size:.88rem;line-height:1.5;margin-top:.55rem} .mb-row>span{margin-right:.2rem} /* freccia "torna indietro" nelle sotto-pagine cliente (account, dettaglio ordine) */ .page-back{flex:0 0 auto;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center; border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none; -webkit-tap-highlight-color:transparent;transition:background .16s ease,border-color .16s ease,transform .14s ease} .page-back svg{width:22px;height:22px} .page-back:hover{background:var(--green);border-color:var(--pri)} .page-back:active{transform:scale(.9)} /* slot orario di ritiro */ .slot-box{background:var(--card);border:1px solid var(--line);border-radius:12px; padding:.8rem .9rem;margin-bottom:1rem} .slot-title{font-weight:700;color:var(--ink);margin-bottom:.5rem} /* fasce orarie: griglia di chip, colorate per livello, con selezione ben visibile */ .slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:.5rem} .slot{position:relative;display:flex;flex-direction:column;gap:.12rem;padding:.6rem .7rem; border:1.5px solid var(--line);border-radius:13px;background:#fff;cursor:pointer; transition:border-color .15s,background .15s,box-shadow .15s,transform .12s} .slot input{position:absolute;opacity:0;width:0;height:0;margin:0} .slot-time{font-weight:800;font-size:1rem;color:var(--ink);letter-spacing:-.01em} .slot-lvl{font-size:.7rem;font-weight:700} .slot-consigliato{border-color:#cfe4c1;background:#f4faef} .slot-consigliato .slot-lvl{color:var(--ok)} .slot-affollato{background:#fdf1ee;border-color:#f0d5cd} .slot-affollato .slot-lvl{color:#b5471f} .slot-normale .slot-lvl{color:var(--muted)} .slot:has(input:checked){border-color:var(--pri);background:var(--green); box-shadow:0 0 0 2px var(--pri) inset;transform:translateY(-1px)} .slot:has(input:checked) .slot-time{color:var(--pri-d)} .slot:active{transform:scale(.97)} .slot input:focus-visible + .slot-time{outline:2px solid var(--acc);outline-offset:2px} /* avviso "hai gia' un ordine": pop-up glass sopra la pagina ordini (che resta sotto, sfocata) */ body.modal-open{overflow:hidden} .ord-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center; padding:1.2rem;padding-bottom:calc(1.2rem + env(safe-area-inset-bottom)); background:rgba(38,34,20,.34); -webkit-backdrop-filter:blur(9px) saturate(1.15);backdrop-filter:blur(9px) saturate(1.15); animation:ordModalIn .28s ease both} .ord-modal.closing{animation:ordModalOut .24s ease both} .ord-modal-card{position:relative;width:min(430px,100%);text-align:center; padding:1.7rem 1.5rem 1.5rem;border-radius:26px; background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.72)); border:1px solid rgba(255,255,255,.75); -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4); box-shadow:0 30px 70px -18px rgba(30,28,15,.5), inset 0 1px 0 rgba(255,255,255,.9); animation:ordCardIn .42s cubic-bezier(.2,.9,.3,1.25) both} .omc-ico{width:66px;height:66px;margin:0 auto .9rem;display:flex;align-items:center;justify-content:center; font-size:2rem;border-radius:50%; background:radial-gradient(circle at 30% 25%,#fff6e6,#f6e7c4); box-shadow:0 8px 20px -8px rgba(201,138,59,.6), inset 0 1px 0 rgba(255,255,255,.9)} .omc-title{font-family:var(--brand,'Baloo 2',var(--ui));font-size:1.42rem;font-weight:800;color:var(--ink); letter-spacing:-.01em;margin:0 0 .35rem} .omc-text{font-size:.96rem;line-height:1.55;color:var(--muted);margin:0 auto 1.3rem;max-width:34ch} .omc-text b{color:var(--ink)} .omc-actions{display:flex;flex-direction:column;gap:.7rem} .omc-btn{display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%; padding:.92rem 1rem;border-radius:15px;font:inherit;font-size:1.02rem;font-weight:800;cursor:pointer; border:1.5px solid transparent;transition:transform .14s ease,box-shadow .2s ease,background .2s ease} .omc-btn:active{transform:scale(.975)} .omc-bi{font-size:1.15rem;line-height:1} .omc-primary{color:#fff;text-decoration:none; background:linear-gradient(180deg,var(--pri),var(--pri-d)); box-shadow:0 12px 24px -10px color-mix(in srgb,var(--pri) 70%,#000)} .omc-primary:hover{background:linear-gradient(180deg,var(--pri),var(--pri-d)); box-shadow:0 16px 30px -10px color-mix(in srgb,var(--pri) 70%,#000)} .omc-ghost{color:var(--pri-d);background:rgba(255,255,255,.55);border-color:color-mix(in srgb,var(--pri) 35%,#fff)} .omc-ghost:hover{background:#fff} .omc-danger{color:#fff;background:linear-gradient(180deg,#e0594a,#c0392b); box-shadow:0 12px 24px -10px rgba(192,57,43,.6)} .omc-danger:hover{background:linear-gradient(180deg,#e0594a,#c0392b); box-shadow:0 16px 30px -10px rgba(192,57,43,.6)} .omc-ico-danger{color:#c0392b;background:radial-gradient(circle at 30% 25%,#fdecea,#f6cfc9); box-shadow:0 8px 20px -8px rgba(192,57,43,.45), inset 0 1px 0 rgba(255,255,255,.9)} @keyframes ordModalIn{from{opacity:0}to{opacity:1}} @keyframes ordModalOut{from{opacity:1}to{opacity:0}} @keyframes ordCardIn{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .ord-modal,.ord-modal.closing,.ord-modal-card{animation-duration:.01ms} } /* dettaglio ordine: box QR */ .qr-box{display:flex;align-items:center;gap:1rem;background:var(--card);border:1px solid var(--line); border-radius:14px;padding:1rem;margin-bottom:1rem;flex-wrap:wrap} .qr-box img{border-radius:10px;border:1px solid var(--line);flex:0 0 auto} .qr-box b{color:var(--pri-d)} /* "I miei ordini": card in evidenza con QR grande + elenco ordini */ .qr-hero{position:relative;display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;background:var(--card); border:1px solid var(--line);border-left:5px solid var(--pri);border-radius:18px;padding:1.1rem 1.2rem; margin-bottom:1.3rem;box-shadow:var(--shadow-md);transition:transform .16s,box-shadow .16s} .qr-hero:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)} /* chip con l'ora prevista di arrivo, a cavallo del bordo in alto a sinistra */ .qr-hero.has-ora{margin-top:1rem;padding-top:1.5rem} .qh-ora{position:absolute;top:-13px;left:14px;display:inline-flex;align-items:center;gap:.35rem; background:linear-gradient(135deg,var(--pri),var(--pri-d));color:#fff;font-size:.85rem;font-weight:800; padding:.34rem .8rem;border-radius:999px;box-shadow:0 6px 14px -6px rgba(51,72,31,.55);white-space:nowrap} .qh-qr{flex:0 0 auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;line-height:0} .qh-qr img{display:block;border-radius:8px} .qh-info{flex:1;min-width:180px;display:flex;flex-direction:column;gap:.15rem} .qh-eyebrow{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--pri)} .qh-title{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)} .qh-mercato{font-weight:700;color:var(--pri-d)} /* focus su numero prodotti e stima totale: due riquadri grandi */ .qh-stats{display:flex;gap:.6rem;margin-top:.55rem} .qh-stat{flex:1;background:#f3f6ee;border:1px solid #dfe8d3;border-radius:12px;padding:.5rem .7rem;text-align:center} .qh-stat b{display:block;font-size:1.35rem;font-weight:800;color:var(--pri-d);letter-spacing:-.02em;line-height:1.2} .qh-stat span{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .qh-open{margin-top:.5rem;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--acc)} .storico-h{margin:1.4rem 0 .7rem;font-size:.82rem;font-weight:800;text-transform:uppercase; letter-spacing:.06em;color:var(--muted)} .ord-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:.8rem} .ord-card{display:flex;align-items:center;gap:.8rem;background:var(--card);border:1px solid var(--line); border-radius:14px;padding:.85rem .95rem;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s,border-color .15s} .ord-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--pri)} .ord-card.is-past{opacity:.9} .ord-qr{flex:0 0 auto;border-radius:9px;border:1px solid var(--line)} .ord-body{flex:1;min-width:0} .ord-title{font-weight:800;color:var(--ink);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .ord-sub{font-size:.8rem;color:var(--pri-d);font-weight:600;margin-top:.1rem} .ord-meta{font-size:.8rem;color:var(--muted);margin-top:.1rem} .ord-arrow{flex:0 0 auto;font-size:1.6rem;color:var(--muted)} /* catalogo ordine */ .data-select{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem} /* stepper data (mono-mercato): frecce ‹ data › al posto della combo, con puntini di posizione */ .data-stepper{max-width:460px;margin-bottom:1rem} .ds-label{font-size:.85rem;color:var(--muted);margin-bottom:.3rem} .ds-nav{display:flex;align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--line); border-radius:16px;padding:.5rem;box-shadow:var(--shadow-sm)} .ds-arrow{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; color:var(--pri-d);background:var(--green);text-decoration:none;-webkit-tap-highlight-color:transparent; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pri) 22%,transparent); transition:transform .12s ease,background .16s ease} .ds-arrow svg{width:22px;height:22px} .ds-arrow:hover{background:color-mix(in srgb,var(--pri) 16%,var(--green))} .ds-arrow:active{transform:scale(.88)} .ds-arrow.is-off{background:var(--bg);color:color-mix(in srgb,var(--muted) 45%,transparent); box-shadow:inset 0 0 0 1px var(--line);cursor:default;pointer-events:none} .ds-current{flex:1 1 auto;min-width:0;text-align:center;line-height:1.22;padding:0 .2rem} .ds-date{font-family:var(--brand,'Baloo 2',var(--ui));font-weight:800;font-size:1.2rem;color:var(--ink);letter-spacing:-.01em} .ds-market{font-size:.84rem;color:var(--muted);margin-top:.12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ds-chiuso{font-size:.76rem;font-weight:800;color:var(--acc);margin-top:.15rem} .ds-dots{display:flex;justify-content:center;gap:.35rem;margin-top:.5rem} .ds-dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .2s ease,transform .2s ease} .ds-dot.on{background:var(--pri);transform:scale(1.25)} .esaurito-tag{color:#a83c2a;font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.03em} .empty{padding:2.5rem 1rem;text-align:center;color:var(--muted)} /* searchbar */ .searchbar{display:flex;gap:.5rem;margin-bottom:.7rem} .searchbar input{flex:1;margin:0} .ordine-layout{display:block} .catalogo,.carrello{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.8rem} /* barra categorie sticky, stile app food: chip orizzontali con scroll-spy */ .cat-chips{position:sticky;top:calc(var(--topbar-h,60px) - 1px);z-index:18; display:flex;gap:.4rem;overflow-x:auto;scroll-behavior:smooth; scrollbar-width:none;-ms-overflow-style:none; margin:0 0 .7rem;padding:.55rem 0;background:var(--card);border-bottom:1px solid var(--line); box-shadow:0 10px 16px -12px rgba(35,32,20,.5)} .cat-chips::-webkit-scrollbar{display:none} /* barra categorie CLIENTE (#cat-chips): larga fino ai bordi del box .catalogo (sfonda il suo padding .8rem) e chip distribuite a riempire la larghezza (flex:1). `width:calc(100%+1.6rem)` perche' il solo margine negativo non allarga un contenitore con overflow-x:auto. */ #cat-chips{width:calc(100% + 1.6rem);margin-left:-.8rem;margin-right:-.8rem;padding-left:.6rem;padding-right:.6rem} #cat-chips .cat-chip{flex:1 0 auto;justify-content:center} .cat-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap; border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px; padding:.42rem .8rem;font:inherit;font-size:.86rem;font-weight:800;cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease,box-shadow .2s ease} .cat-chip .cat-emoji{font-size:1rem;line-height:1} .cat-chip:active{transform:scale(.94)} .cat-chip.on{color:#fff;border-color:transparent;background:linear-gradient(180deg,var(--pri),var(--pri-d)); box-shadow:0 6px 14px -6px color-mix(in srgb,var(--pri-d) 70%,#000)} /* sezioni per categoria nel catalogo */ .cat-section{margin-bottom:1.1rem;scroll-margin-top:calc(var(--topbar-h,60px) + 54px)} .cat-head{display:flex;align-items:center;gap:.45rem;margin:.1rem 0 .6rem; font-family:var(--brand,'Baloo 2',var(--ui));font-size:1.15rem;font-weight:800;color:var(--ink);letter-spacing:-.01em} .cat-head .cat-emoji{font-size:1.25rem} .cat-head .cat-count{font-family:var(--ui);font-size:.72rem;font-weight:800;color:var(--muted); background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:.05rem .5rem} /* catalogo: schede prodotto con stepper +/- */ .art-list{padding-bottom:.6rem} .cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:.6rem} .art-item{display:flex;align-items:center;gap:.7rem;border:1px solid var(--line);border-radius:14px; padding:.6rem .7rem;background:var(--card);box-shadow:var(--shadow-sm); transition:box-shadow .18s ease,border-color .18s ease,transform .14s ease} .art-item.in-cart{border-color:var(--pri);background:color-mix(in srgb,var(--pri) 7%,var(--card)); box-shadow:0 8px 20px -12px color-mix(in srgb,var(--pri) 65%,#000)} .art-item.esaurito{opacity:.55} .ai-foto{width:58px;height:58px;object-fit:cover;border-radius:12px;flex:0 0 auto;background:#eee6cf} /* segnaposto "senza foto": riquadro grigino tenue con icona piccola e discreta */ .ai-foto-empty{display:flex;align-items:center;justify-content:center;background:#edece6;color:#c1bcac} .ai-foto-empty .ico{width:24px;height:24px;stroke-width:1.75} .ai-main{flex:1;min-width:0} .ai-desc{font-size:.98rem;font-weight:800;line-height:1.2;color:var(--ink)} .ai-unita-toggle{display:inline-flex;gap:.15rem;background:var(--bg);border:1px solid var(--line); border-radius:999px;padding:.15rem;margin:.32rem 0 .28rem} .ai-un{background:transparent;border:0;color:var(--muted);font-size:.74rem;font-weight:800; padding:.2rem .72rem;border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent; transition:background .16s ease,color .16s ease} .ai-un.on{color:#fff;background:linear-gradient(180deg,var(--pri),var(--pri-d)); box-shadow:0 3px 8px -3px color-mix(in srgb,var(--pri-d) 70%,#000)} .ai-meta{font-size:.83rem;color:var(--pri-d);font-weight:700} .ai-meta.muted{color:var(--muted);font-weight:400} .ai-extra{font-size:.72rem;color:var(--muted);margin-top:.1rem} .ai-meta .old{color:var(--muted);text-decoration:line-through;font-weight:400;margin-right:.25em} .prod-sconto{display:inline-block;background:var(--acc);color:#fff;border-radius:6px;padding:.05rem .4rem; font-size:.68rem;font-weight:800;margin-left:.25em} .ai-incart{margin-top:.28rem;display:inline-flex;align-items:center;gap:.25rem; background:color-mix(in srgb,var(--pri) 14%,transparent);color:var(--pri-d);font-size:.72rem; font-weight:800;padding:.1rem .55rem;border-radius:999px} /* stepper tondo moderno: + prominente, quando nel carrello diventa [− q +] */ .ai-stepper{display:inline-flex;align-items:center;gap:.35rem;flex:0 0 auto} .ai-minus,.ai-plus{width:38px;height:38px;border:0;border-radius:50%;font-size:1.4rem;line-height:1; display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;flex:0 0 auto; -webkit-tap-highlight-color:transparent;transition:transform .12s ease,box-shadow .2s ease,background .18s ease} .ai-plus{background:linear-gradient(180deg,var(--pri),var(--pri-d));color:#fff; box-shadow:0 7px 16px -6px color-mix(in srgb,var(--pri-d) 70%,#000)} .ai-plus:active,.ai-minus:active{transform:scale(.88)} .ai-plus:disabled{background:#bcb9a8;box-shadow:none;cursor:not-allowed} .ai-minus{background:var(--green);color:var(--pri-d);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pri) 22%,transparent)} .ai-qty{min-width:30px;text-align:center;font-weight:800;font-size:.95rem;color:var(--ink);white-space:nowrap} /* carrello */ .pill{background:var(--pri);color:#fff;border-radius:20px;padding:.05rem .5rem;font-size:.85rem} .cart-rows{display:flex;flex-direction:column;gap:.5rem;margin:.5rem 0;max-height:46vh;overflow:auto} .cart-row{border:1px solid var(--line);border-radius:10px;padding:.55rem .65rem;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)} .cr-main{display:flex;justify-content:space-between;gap:.6rem;align-items:flex-start} .cr-desc{font-size:.9rem;line-height:1.2;font-weight:600;color:var(--ink)} .cr-del{display:inline-flex;align-items:center;justify-content:center;background:#fdecea;border:1px solid #f2cfc8;padding:0; color:#c0392b;width:32px;height:32px;border-radius:9px;cursor:pointer;flex:0 0 auto; transition:background .15s,color .15s,transform .12s} .cr-del .ico{width:17px;height:17px} .cr-del:hover{background:#c0392b;color:#fff;border-color:#c0392b} .cr-del:active{transform:scale(.88)} .cr-line{display:flex;align-items:center;gap:.6rem;margin-top:.5rem} .cr-step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:24px;background:#fff;overflow:hidden;flex:0 0 auto} .cr-step button{background:var(--pri);color:#fff;border:0;width:2.1rem;height:2.1rem;font-size:1.2rem; line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0} .cr-step button:hover{background:var(--pri-d)} .cr-step .cr-qty{min-width:3.4rem;text-align:center;font-weight:700;font-size:.85rem} .cr-price{color:#7a7a7a;font-size:.82rem;line-height:1.2} .cr-sc{color:var(--ok);font-weight:700} .cr-subtot{margin-left:auto;font-weight:700;color:var(--pri-d);font-size:1rem;white-space:nowrap;text-align:right} .cart-tot{border-top:2px solid var(--line);padding-top:.5rem;margin-bottom:.6rem} .cart-tot .grand{display:flex;justify-content:space-between;font-size:1.1rem} .cart-tot .grand b{color:var(--pri-d)} #btn-salva{width:100%;margin-top:.4rem;padding:.8rem} /* carrello: colonna SEMPRE visibile a fianco del catalogo su schermi larghi (desktop/tablet); solo su mobile diventa un pannello a comparsa con barra fissa (spazio troppo stretto per tenerlo aperto in permanenza) — identico a ordinifalcone ma solo dove serve davvero. */ /* azioni nell'intestazione carrello: "Svuota" + chiudi */ .sheet-actions{display:flex;align-items:center;gap:.45rem;flex:0 0 auto} .cart-clear{display:inline-flex;align-items:center;gap:.3rem;background:transparent;border:1px solid var(--line); color:var(--muted);font:inherit;font-size:.8rem;font-weight:700;padding:.34rem .62rem;border-radius:999px;cursor:pointer; transition:background .15s,color .15s,border-color .15s,transform .12s} .cart-clear .ico{width:15px;height:15px} .cart-clear:hover{background:#fdecea;color:#c0392b;border-color:#f0c9c2} .cart-clear:active{transform:scale(.95)} .cart-bar,.cart-backdrop,.sheet-head,.sheet-close{display:none} @media(min-width:860px){ .ordine-layout{display:grid;grid-template-columns:1fr 360px;gap:1rem;align-items:start} .carrello{position:sticky;top:76px;max-height:calc(100vh - 96px);overflow:auto} .sheet-head{display:flex;justify-content:space-between;align-items:center; margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)} .sheet-head h2{margin:0} } @media(max-width:859px){ /* lo spazio per non finire sotto barra-carrello/tabbar e' gestito da body:has(.cart-bar) */ /* il carrello parte SOTTO la topbar (var impostata via JS = altezza reale topbar), cosi' l'intestazione con la × non finisce mai sotto la barra verde su nessun browser */ .carrello{position:fixed;top:var(--topbar-h,60px);right:0;bottom:0;left:auto;width:min(440px,94vw);z-index:50;margin:0; overflow:auto;border-radius:14px 0 0 14px;border:0; transform:translateX(110%);transition:transform .22s ease; box-shadow:-10px 0 30px rgba(0,0,0,.28)} body.cart-open .carrello{transform:translateX(0)} .sheet-head{display:flex;justify-content:space-between;align-items:center; position:sticky;top:0;background:var(--card);padding:.2rem 0 .5rem;margin-bottom:.2rem; border-bottom:1px solid var(--line);z-index:2} .sheet-head h2{margin:0} .sheet-close{display:inline-flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--line); width:38px;height:38px;border-radius:50%;color:var(--muted);cursor:pointer;flex:0 0 auto;padding:0; transition:background .15s,color .15s,border-color .15s,transform .12s} .sheet-close .ico{width:20px;height:20px} .sheet-close:hover{background:var(--line);color:var(--ink)} .sheet-close:active{transform:scale(.9)} .cart-backdrop{display:block;position:fixed;top:var(--topbar-h,60px);right:0;bottom:0;left:0;background:rgba(0,0,0,.45); z-index:45;opacity:0;visibility:hidden;transition:.2s} body.cart-open .cart-backdrop{opacity:1;visibility:visible} .cart-bar{display:flex;position:fixed;left:0;right:0;bottom:calc(76px + env(safe-area-inset-bottom));z-index:40; align-items:center;justify-content:space-between;gap:.5rem; background:var(--pri-d);color:#fff;border:0;width:100%; padding:.7rem 1rem;font-size:.95rem;cursor:pointer; box-shadow:0 -3px 12px rgba(0,0,0,.25)} body.cart-open .cart-bar{display:none} .cb-badge{background:#fff;color:var(--pri);border-radius:20px;padding:.05rem .5rem; font-weight:700;margin-right:.25rem} .cb-left{font-weight:600} .cb-right b{font-size:1.05rem} } /* ========================================================= OPERATORE (tema scuro): barra, schede ordine, preparazione, lettore QR ========================================================= */ body.operatore-theme{ --bg:#131b26; --card:#232f3f; --line:#33475a; --ink:#f4efe1; --muted:#93a0b3; --ok:#4ade80; } /* barra superiore: brand + azioni SEMPRE visibili (niente menu nascosto) */ .op-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap; padding:.6rem .9rem;background:linear-gradient(180deg,#1b2635,#151e2b); border-bottom:1px solid var(--line);box-shadow:0 6px 20px -10px rgba(0,0,0,.8)} .op-brand{display:inline-flex;align-items:center;gap:.6rem;min-width:0;flex:1} .op-brand img{width:38px;height:38px;border-radius:10px;flex:0 0 auto;box-shadow:0 2px 8px rgba(0,0,0,.45)} .op-brand-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0} .op-brand-txt b{font-family:'Baloo 2',cursive;font-size:1.05rem;color:#f4efe1; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .op-brand-txt em{font-style:normal;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .op-actions{display:flex;align-items:center;gap:.5rem;flex:0 0 auto} .op-btn{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:11px; padding:.55rem .85rem;font-weight:700;font-size:.88rem;color:#eaf1f8;background:#2b3a4d;cursor:pointer; transition:background .15s,border-color .15s,transform .12s} .op-btn:hover{background:#35485e} .op-btn:active{transform:scale(.97)} .op-btn-ico{font-size:1.05rem;line-height:1} .op-scan-btn{background:linear-gradient(135deg,var(--ok),#22a45a);border-color:#22a45a;color:#08210f; box-shadow:0 5px 14px -4px rgba(74,222,128,.55)} .op-scan-btn:hover{filter:brightness(1.06);background:linear-gradient(135deg,var(--ok),#22a45a)} .op-btn-ghost{background:transparent} .op-btn-exit{background:transparent;border-color:#6b3b3b;color:#f0a8a0} .op-btn-exit:hover{background:#3a1f22} .op-main{max-width:1400px;margin:0 auto;padding:1rem} /* intestazione + filtri */ .op-head{display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap;margin-bottom:.8rem} .op-head h1{margin:0;font-size:1.35rem;display:flex;align-items:center;gap:.55rem;letter-spacing:-.02em} .op-count{background:var(--ok);color:#08210f;border-radius:20px;padding:.05rem .6rem;font-size:1rem;font-weight:800} .op-date{width:auto;margin:0;background:var(--card);color:var(--ink);border-color:var(--line)} .op-toolbar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem} .op-search{position:relative;flex:1 1 220px;min-width:0;max-width:420px} .op-search input{width:100%;margin:0;padding-left:2.3rem;background:var(--card);color:var(--ink);border-color:var(--line)} .op-search-ico{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);opacity:.6;pointer-events:none} .ordina-toggle{display:flex;gap:.25rem;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.2rem} .ordina-toggle a{padding:.42rem .85rem;border-radius:9px;font-size:.85rem;font-weight:700;color:var(--muted)} .ordina-toggle a.on{background:var(--ok);color:#08210f} /* griglia schede: 1 colonna telefono, 2 su tablet, 3+ su desktop */ .op-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:.9rem} .op-card{position:relative;display:flex;flex-direction:column;gap:.7rem;background:var(--card); border:1px solid var(--line);border-left:5px solid var(--muted);border-radius:15px;padding:.95rem 1rem; box-shadow:0 4px 16px -8px rgba(0,0,0,.7);transition:transform .16s,box-shadow .16s,border-color .16s} .op-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(0,0,0,.85)} .op-card.is-nuovo{border-left-color:#f0c96b} .op-card.is-corso{border-left-color:#5aa9e6} .op-card.is-done{border-left-color:var(--ok)} .op-card-link{position:absolute;inset:0;z-index:2;border-radius:15px} .op-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem} .op-cliente{margin:0;font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .op-ora{flex:0 0 auto;font-size:.8rem;font-weight:700;color:#cfe4c1;background:#1d2b3a; border:1px solid var(--line);border-radius:8px;padding:.15rem .5rem;white-space:nowrap} .op-prog-bar{height:8px;background:#1a2432;border-radius:6px;overflow:hidden} .op-prog-bar span{display:block;height:100%;background:linear-gradient(90deg,#22a45a,var(--ok));transition:width .35s ease} .op-prog-txt{display:flex;align-items:baseline;gap:.45rem;margin-top:.35rem;font-size:.85rem;color:var(--muted)} .op-prog-txt b{color:var(--ok);font-size:1rem;font-weight:800} .op-prog-txt em{font-style:normal;margin-left:auto;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em} .op-card-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem} .op-tel{position:relative;z-index:3;font-size:.88rem;font-weight:700;color:#9dc2f0} .op-tel:hover{text-decoration:underline} .op-apri{font-size:.82rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .op-note{font-size:.82rem;color:#f0c96b;background:#2e2717;border:1px solid #4a3d1f;border-radius:9px;padding:.4rem .6rem} /* dettaglio ordine */ .op-dett-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin:.7rem 0 .9rem} .op-dett-cliente h1{margin:0;font-size:1.5rem;letter-spacing:-.02em} .op-dett-contatti{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.35rem} .op-prep-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem; margin:1.3rem 0 .4rem;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)} .op-prep-count b{color:var(--ok);font-size:1.05rem} .op-prep-bar{height:8px;background:#1a2432;border-radius:6px;overflow:hidden;margin-bottom:.7rem} .op-prep-bar span{display:block;height:100%;background:linear-gradient(90deg,#22a45a,var(--ok));transition:width .35s ease} /* righe da preparare: tutta la riga e' un bottone, comodo da toccare al banco */ .prep-list{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line); border-radius:14px;overflow:hidden} .prep-riga{margin:0;border-bottom:1px solid var(--line)} .prep-riga:last-child{border-bottom:0} .prep-hit{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;padding:1rem; background:transparent;border:0;border-radius:0;color:var(--ink);cursor:pointer;font-family:inherit; transition:background .14s} .prep-hit:hover{background:#2b3a4d} .prep-hit:active{transform:none;background:#31435a} .prep-check{flex:0 0 auto;width:30px;height:30px;border-radius:9px;border:2px solid var(--line); background:#1a2432;display:flex;align-items:center;justify-content:center;color:#08210f; font-size:1rem;font-weight:900;transition:background .15s,border-color .15s} .prep-qta{flex:0 0 auto;min-width:92px;font-weight:800;font-size:1.05rem;color:var(--ok)} .prep-nome{font-size:1.05rem;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis} .prep-riga.done .prep-check{background:var(--ok);border-color:var(--ok)} .prep-riga.done .prep-qta,.prep-riga.done .prep-nome{text-decoration:line-through;opacity:.55} .op-evadi-wrap{margin-top:1.2rem} .op-evadi{width:100%;padding:1rem;font-size:1.05rem;font-weight:800;border-radius:14px; background:linear-gradient(135deg,var(--ok),#22a45a);color:#08210f; box-shadow:0 8px 20px -8px rgba(74,222,128,.6)} .op-evadi:hover{filter:brightness(1.06);background:linear-gradient(135deg,var(--ok),#22a45a)} /* colori del tema scuro su componenti condivisi */ .operatore-theme .mercato-box{background:#1d2b3a;border-color:var(--line);color:#cfe4c1} .operatore-theme .mercato-box b{color:#eaf6ee} .operatore-theme .mercato-box.note-box{background:#2e2717;border-color:#4a3d1f;color:#f0c96b} .operatore-theme .flash-error{background:#3a1f22;border-color:#5c2c30;color:#ffb4ab} .operatore-theme .flash-success{background:#1c3324;border-color:#2f5c3f;color:#8ce0ab} .operatore-theme .badge-confermato{background:#1c3324;color:#8ce0ab} .operatore-theme .badge-evaso{background:#1c2b3a;color:#9dc2f0} .operatore-theme .badge-annullato{background:#3a1f22;color:#f0a8a0} .operatore-theme .back{color:var(--ok);font-weight:700} .operatore-theme .empty{color:var(--muted);background:var(--card);border:1px dashed var(--line); border-radius:14px;padding:2rem 1rem;text-align:center} .operatore-theme .foot{color:var(--muted)} /* lettore QR a schermo */ .scan-overlay{position:fixed;inset:0;z-index:100;background:rgba(8,12,18,.88); display:flex;align-items:center;justify-content:center;padding:1rem} .scan-box{width:min(520px,100%);background:var(--card);border:1px solid var(--line);border-radius:18px; overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.7)} .scan-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem; padding:.85rem 1rem;border-bottom:1px solid var(--line);font-size:1rem;color:var(--ink)} .scan-close{background:transparent;border:0;color:var(--muted);font-size:1.8rem;line-height:1; padding:0 .3rem;cursor:pointer} .scan-close:hover{background:transparent;color:var(--ink)} .scan-video-wrap{position:relative;background:#000;aspect-ratio:4/3} .scan-video-wrap video{width:100%;height:100%;object-fit:cover;display:block} .scan-frame{position:absolute;inset:12%;border:3px solid rgba(74,222,128,.9);border-radius:16px;pointer-events:none} .scan-msg{padding:.85rem 1rem;font-size:.9rem;color:var(--muted);text-align:center;min-height:2.6rem} @media(max-width:640px){ .op-btn-txt{display:none} .op-btn{padding:.55rem .7rem} .op-main{padding:.8rem} .op-dett-cliente h1{font-size:1.28rem} } /* admin layout */ .admin-wrap{display:flex;min-height:100vh} .admin-sidebar{width:250px;background:var(--pri-d);color:#fff;flex-shrink:0;display:flex;flex-direction:column; padding:1.5rem 0 1.1rem} /* profilo in cima: avatar tondo + nome + sottotitolo (stile menu profilo del design) */ .sb-profile{padding:0 1.35rem 1.15rem;margin:0 0 .85rem;border-bottom:1px solid rgba(255,255,255,.15)} .sb-avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;display:block;margin-bottom:.65rem; border:2px solid rgba(255,255,255,.3);box-shadow:0 3px 10px rgba(0,0,0,.25)} .sb-name{font-size:1.3rem;font-weight:800;line-height:1.1;letter-spacing:-.01em} .sb-sub{font-size:.85rem;color:rgba(255,255,255,.55);margin-top:.15rem} /* voci: icona in "chip" + etichetta + eventuale badge */ .sb-nav{display:flex;flex-direction:column;gap:.15rem;padding:0 .75rem;flex:1} .sb-item{display:flex;align-items:center;gap:.75rem;padding:.55rem .6rem;border-radius:13px; color:rgba(255,255,255,.82);font-weight:600;font-size:.96rem;transition:background .14s,color .14s} .sb-item:hover{background:rgba(255,255,255,.09);color:#fff} .sb-item.active{background:rgba(255,255,255,.16);color:#fff} .sb-ico{width:36px;height:36px;flex:0 0 auto;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.12);border-radius:11px;font-size:1.05rem} .sb-item.active .sb-ico{background:rgba(255,255,255,.24)} .sb-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sb-badge{flex:0 0 auto;background:#ffcf33;color:#4a3500;font-size:.72rem;font-weight:800; border-radius:20px;padding:.1rem .55rem;line-height:1.5} .admin-foot{margin-top:auto;padding:.9rem 1rem 0;display:flex;flex-direction:column;gap:1rem} .sb-signout{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1); color:#fff;font-weight:700;padding:.72rem;border-radius:15px;border:1px solid rgba(255,255,255,.16); transition:background .15s} .sb-signout:hover{background:rgba(255,255,255,.2)} .sb-backdrop{display:none} .admin-main{flex:1;min-width:0} .admin-topbar{display:flex;align-items:center;gap:.9rem;background:rgba(255,255,255,.9); backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px); border-bottom:1px solid var(--line);padding:0 1.5rem;height:64px;position:sticky;top:0;z-index:10; box-shadow:0 1px 0 rgba(35,32,20,.02),0 6px 18px -14px rgba(35,32,20,.25)} .at-title{flex:1;min-width:0;font-family:var(--ui);font-weight:800;font-size:1.22rem;letter-spacing:-.02em; color:var(--ink);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* avatar menu admin (a destra nella topbar) */ .at-account{position:relative;flex:0 0 auto} .at-avatar{width:44px;height:44px;padding:0;border:0;border-radius:50%;cursor:pointer;overflow:hidden; background:var(--green);box-shadow:0 0 0 1px var(--line),0 4px 12px -6px rgba(35,32,20,.4); transition:transform .15s ease,box-shadow .2s ease} .at-avatar img{width:100%;height:100%;object-fit:cover;display:block} .at-avatar:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--pri),0 8px 18px -8px rgba(35,32,20,.5)} .at-avatar[aria-expanded="true"]{box-shadow:0 0 0 2px var(--pri),0 8px 18px -8px rgba(35,32,20,.5)} .at-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:30;width:252px; background:var(--card);border:1px solid var(--line);border-radius:16px;padding:.5rem; box-shadow:0 22px 54px -16px rgba(35,32,20,.42); transform-origin:top right;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.96); transition:opacity .18s ease,transform .2s cubic-bezier(.3,.9,.3,1.25),visibility .18s} .at-menu.open{opacity:1;visibility:visible;transform:none} .at-menu-head{display:flex;align-items:center;gap:.6rem;padding:.4rem .55rem .7rem; border-bottom:1px solid var(--line);margin-bottom:.4rem} .atm-logo{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto; box-shadow:0 0 0 1px var(--line)} .atm-name{font-weight:800;color:var(--ink);font-size:.95rem;line-height:1.2; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px} .atm-role{font-size:.77rem;color:var(--muted)} .at-menu-item{display:flex;align-items:center;gap:.6rem;padding:.6rem .65rem;border-radius:10px; color:var(--ink);font-weight:600;font-size:.92rem;text-decoration:none;transition:background .14s,color .14s} .at-menu-item:hover{background:var(--green)} .at-menu-item.on{background:color-mix(in srgb,var(--pri) 12%,transparent);color:var(--pri-d);font-weight:800} .atm-ico{font-size:1.05rem;line-height:1;width:1.35rem;text-align:center;flex:0 0 auto} .atm-badge{margin-left:auto;background:var(--acc);color:#fff;font-size:.72rem;font-weight:800; border-radius:999px;padding:.05rem .45rem;min-width:1.3rem;text-align:center;line-height:1.35} .at-menu-sep{height:1px;background:var(--line);margin:.4rem .2rem} .at-menu-exit{color:#b3402f} .at-menu-exit:hover{background:#fdece8} .admin-content{padding:1.7rem 2rem;max-width:1560px;margin:0 auto} /* hamburger a 3 linee dentro un bottone-icona */ .admin-nav-toggle{display:none;width:42px;height:42px;flex:0 0 auto;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:11px;background:var(--card);cursor:pointer;padding:0} .admin-nav-toggle:hover{background:var(--green);border-color:var(--pri)} .admin-nav-toggle .hb{position:relative;display:block;width:18px;height:2px;border-radius:2px;background:var(--pri-d)} .admin-nav-toggle .hb::before,.admin-nav-toggle .hb::after{content:"";position:absolute;left:0;width:18px;height:2px; border-radius:2px;background:var(--pri-d)} .admin-nav-toggle .hb::before{top:-6px} .admin-nav-toggle .hb::after{top:6px} @media(max-width:1000px){.admin-content{padding:1.2rem}} @media(max-width:640px){.admin-content{padding:1rem}} @media(max-width:800px){ .admin-sidebar{position:fixed;left:-280px;top:0;bottom:0;transition:left .22s ease;z-index:50; box-shadow:8px 0 30px rgba(0,0,0,.3)} .admin-sidebar.open{left:0} .admin-nav-toggle{display:inline-flex} .sb-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:45; opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s} .admin-sidebar.open ~ .sb-backdrop{opacity:1;visibility:visible} } /* tabelle: su desktop card con scroll di riserva, su telefono/tablet righe -> schede */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line); border-radius:14px;background:var(--card);box-shadow:0 2px 12px rgba(0,0,0,.05)} .table-wrap table{border:0;border-radius:0;box-shadow:none;min-width:560px} .table-wrap + .table-wrap{margin-top:1rem} tbody tr{transition:background .12s} .table-wrap tbody tr:hover{background:#fbf9f0} th{white-space:nowrap} @media(max-width:860px){ /* niente scroll orizzontale: ogni riga diventa una card orizzontale "stile blog": foto alta a sinistra, a destra titolo + campi (chip) + pill d'azione, stato in alto a destra */ .table-wrap{overflow:visible;border:0;background:none;box-shadow:none} .table-wrap table{min-width:0;background:none;box-shadow:none;border-radius:0} .table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .table-wrap tbody{display:block} .table-wrap tbody tr{position:relative;box-sizing:border-box;display:block;background:var(--card);border:1px solid var(--line); border-radius:16px;box-shadow:0 5px 18px rgba(0,0,0,.07);padding:.95rem 1.05rem;margin-bottom:.9rem;overflow:hidden} .table-wrap tbody tr:hover{background:var(--card)} .table-wrap tbody td{display:block;border:0;padding:0;margin:0;text-align:left;font-size:.95rem;line-height:1.3;min-width:0} .table-wrap tbody td.r{text-align:left} /* l'id "#" e' poco utile sulla card (il titolo identifica gia' la riga) */ .table-wrap tbody td[data-label="#"]{display:none} /* Card CON foto: la miniatura e' posizionata in assoluto in alto a sinistra e tutto il contenuto (titolo, campi, pill) scorre in una colonna a destra grazie al padding-left. Cosi' OGNI scheda ha la stessa identica disposizione, con o senza foto reale. */ .table-wrap tbody tr.has-thumb{padding-left:calc(1.05rem + 106px + 1rem);min-height:calc(128px + 1.9rem)} /* FOTO: box alto a sinistra, angoli arrotondati (immagine vera o emoji segnaposto) */ .table-wrap tbody td[data-card=thumb]{position:absolute;left:1.05rem;top:.95rem;width:106px;height:128px;margin:0;padding:0; overflow:hidden;border-radius:12px;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#eef3e6,#e1e9d2);font-size:2.6rem;line-height:1} .table-wrap tbody td[data-card=thumb]::before{display:none} .table-wrap tbody td[data-card=thumb] img{width:106px!important;height:128px!important; border-radius:12px!important;object-fit:cover;display:block;border:0} /* TITOLO */ .table-wrap tbody td[data-card=title]{display:block;font-size:1.15rem;font-weight:800;color:var(--ink); margin-bottom:.45rem;line-height:1.2} .table-wrap tbody td[data-card=title]::before{display:none} /* CAMPI: chip "etichetta / valore" affiancati che vanno a capo */ .table-wrap tbody td[data-label]:not([data-card]){display:inline-block;vertical-align:top; margin:0 1.4rem .5rem 0;max-width:100%;overflow-wrap:anywhere} .table-wrap tbody td[data-label]:not([data-card])::before{content:attr(data-label);display:block;margin-bottom:.05rem; font-weight:700;text-transform:uppercase;font-size:.6rem;letter-spacing:.03em;color:var(--muted)} /* STATO: badge in alto a destra, piu' grande e in evidenza */ .table-wrap tbody td[data-card=status]{position:absolute;top:.8rem;right:.95rem;padding:0;margin:0;z-index:2;display:block} .table-wrap tbody td[data-card=status]::before{display:none} .table-wrap tbody td[data-card=status] .badge{font-size:.85rem;font-weight:800;padding:.35rem .9rem; border-radius:22px;box-shadow:0 2px 6px rgba(0,0,0,.08)} .table-wrap tbody tr.has-status td[data-card=title]{padding-right:5.6rem} /* AZIONE: pill in stile "READ MORE" (arancio del design), la delete resta rossa */ .table-wrap tbody td:not([data-label]){display:block;margin-top:.55rem;text-align:left} .table-wrap tbody td:not([data-label]) a:not(.btn-danger), .table-wrap tbody td:not([data-label]) button:not(.btn-danger){display:inline-block;padding:.55rem 1.5rem; font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border:0;border-radius:11px; color:#fff;background:linear-gradient(180deg,#d97a44,#c85a2a);box-shadow:0 5px 13px -3px rgba(200,90,42,.5)} .table-wrap tbody td:not([data-label]) a:not(.btn-danger):hover, .table-wrap tbody td:not([data-label]) button:not(.btn-danger):hover{filter:brightness(1.05)} .table-wrap tbody td:not([data-label]) .btn-danger{border-radius:22px;padding:.5rem 1.4rem} .table-wrap tbody td:empty{display:none} .table-wrap tbody td[colspan]{display:block;text-align:center;color:var(--muted);padding:1.1rem;clear:both} .table-wrap tbody td input,.table-wrap tbody td select{max-width:100%;margin-top:.15rem} /* riga totale (tfoot): scheda evidenziata, etichetta a sinistra e importo a destra */ .table-wrap tfoot tr{display:flex;justify-content:space-between;align-items:center;gap:1rem; background:var(--green);border:1px solid #cfe4c1;border-radius:12px;padding:.7rem 1rem;margin-top:.2rem} .table-wrap tfoot td{display:inline;border:0;padding:0} } .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem 1.4rem; background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.4rem; max-width:820px;box-shadow:0 3px 14px rgba(0,0,0,.05)} .form-grid + .form-grid{margin-top:1rem} .form-grid .full{grid-column:1/-1} .form-grid label{margin-bottom:.9rem;font-weight:600;font-size:.9rem;color:var(--ink)} .form-grid input,.form-grid select,.form-grid textarea{margin-top:.3rem;border-radius:10px;font-weight:400} /* i color picker non devono allargarsi a tutta la cella */ input[type=color]{width:64px;height:40px;padding:3px;cursor:pointer;border-radius:9px} .colori-row{display:flex;flex-wrap:wrap;gap:1rem 1.4rem} .colori-row label{margin:0} @media(max-width:560px){.form-grid{grid-template-columns:1fr;padding:1.1rem}} /* --- scheda prodotto (nuovo/modifica) --- */ .prod-card{background:var(--card);border:1px solid var(--line);border-radius:16px; padding:1.4rem 1.6rem;max-width:820px;margin:.7rem auto 0;box-shadow:0 3px 14px rgba(0,0,0,.05)} .prod-intro{color:var(--muted);font-size:.9rem;line-height:1.5;margin:0 0 1.3rem} .prod-form .field{display:block;margin-bottom:1.1rem} .prod-form .flabel{display:block;font-weight:700;font-size:.9rem;color:var(--ink);margin-bottom:.4rem} .prod-form input,.prod-form select{border-radius:10px;padding:.62rem .7rem;font-size:1rem} .prod-form input:focus,.prod-form select:focus{outline:none;border-color:var(--pri); box-shadow:0 0 0 3px rgba(74,107,58,.18); box-shadow:0 0 0 3px color-mix(in srgb, var(--pri) 18%, transparent)} .prod-form input.num{max-width:220px} .prod-form .hint{display:block;color:var(--muted);font-size:.78rem;line-height:1.45;margin-top:.45rem} /* riga di campi che si adatta alla larghezza del contenitore: un campo solo riempie tutta la riga, due campi si dividono, e su contenitori stretti (es. scheda-giorno) vanno a capo */ .prod-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:0 1.3rem} .price-panel{background:var(--bg);border:1px solid var(--line);border-radius:12px; padding:1.1rem 1.15rem;margin:0 0 1.1rem} .foto-prev{display:block;width:80px;height:80px;object-fit:cover;border-radius:10px; border:1px solid var(--line);margin-bottom:.5rem} .prod-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap; margin-top:.4rem;padding-top:1.2rem;border-top:1px solid var(--line)} .prod-actions button{padding:.7rem 1.7rem;font-size:1rem;border-radius:10px} .prod-actions .cancel{color:var(--muted);font-weight:600} .prod-actions .cancel:hover{color:var(--ink)} @media(max-width:560px){ .prod-card{padding:1.1rem;border-radius:14px} .prod-form input.num{max-width:none} .prod-actions button{flex:1} } /* switch segmentato "figo": due meta' uguali con una pillola che scorre (glider) */ .seg-toggle{display:flex;position:relative;width:100%;max-width:360px;background:var(--bg); border:1px solid var(--line);border-radius:16px;padding:.32rem;gap:0; box-shadow:inset 0 1px 3px rgba(35,32,20,.06)} .seg-opt{position:relative;flex:1 1 0;min-width:0;margin:0;cursor:pointer;z-index:1} .seg-opt input{position:absolute;opacity:0;width:0;height:0;margin:0} .seg-opt span{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%; padding:.62rem .7rem;border-radius:12px;font-weight:700;font-size:.92rem;color:var(--muted); white-space:nowrap;user-select:none;transition:color .25s ease} .seg-ico{font-size:1.05rem;line-height:1;transition:transform .28s cubic-bezier(.34,1.56,.5,1)} .seg-opt input:checked + span{color:#fff} .seg-opt input:checked + span .seg-ico{transform:scale(1.14)} .seg-opt:hover input:not(:checked) + span{color:var(--ink)} .seg-opt input:focus-visible + span{outline:2px solid var(--acc);outline-offset:2px} /* fallback senza :has -> sfondo sull'opzione attiva */ .seg-opt input:checked + span{background:linear-gradient(135deg,var(--pri),var(--pri-d))} /* glider: pillola che scivola fra le due meta' (browser con :has) */ .seg-glider{position:absolute;top:.32rem;bottom:.32rem;left:.32rem;right:50%;border-radius:12px; background:linear-gradient(135deg,var(--pri),var(--pri-d));box-shadow:0 7px 18px -6px rgba(74,107,58,.65); opacity:0;z-index:0;pointer-events:none; transition:left .38s cubic-bezier(.34,1.56,.5,1),right .38s cubic-bezier(.34,1.56,.5,1)} .seg-toggle:has(.seg-glider) .seg-glider{opacity:1} .seg-toggle:has(.seg-glider) .seg-opt input:checked + span{background:none} .seg-toggle:has(.seg-opt:nth-child(2) input:checked) .seg-glider{left:50%;right:.32rem} /* feedback tattile delicato al tocco (sostituisce l'aura blu di sistema) */ .seg-opt,.slot-pill,.cat-opt,.giorno-card,.come-arrivare{transition:transform .14s ease} .chip:active,.slot-pill:active,.cat-opt:active,.seg-opt:active{transform:scale(.955)} .btn-add:active,.come-arrivare:active{transform:scale(.97)} .prod-item:active{transform:scale(.988)} /* --- pagina catalogo prodotti: toolbar (ricerca + filtri) e griglia a schede --- */ .ph-title{font-size:1.4rem;font-weight:800;margin:0;display:inline-flex;align-items:center;gap:.55rem;letter-spacing:-.02em} .ph-count{background:var(--green);color:var(--pri-d);border-radius:9px;padding:.1rem .5rem;font-size:.8rem;font-weight:800} .btn-add{display:inline-flex;align-items:center;gap:.4rem;border-radius:24px;padding:.6rem 1.25rem;font-weight:700; box-shadow:0 5px 14px rgba(74,107,58,.3)} .btn-add .plus{font-size:1.2rem;line-height:1;font-weight:400} .catalog-toolbar{display:flex;gap:.7rem 1rem;align-items:center;flex-wrap:wrap;margin:.4rem 0 1.4rem} .search-box{position:relative;flex:1 1 260px;max-width:440px} .search-box input{width:100%;padding:.62rem 2.4rem;border-radius:26px;border:1px solid var(--line); background:#fff;font-size:.95rem;margin:0} .search-box input:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(74,107,58,.16)} .search-ico{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);opacity:.55;font-size:.95rem;pointer-events:none} .search-clear{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:24px;height:24px;padding:0; border:0;border-radius:50%;background:var(--line);color:var(--muted);font-size:.75rem;cursor:pointer; display:flex;align-items:center;justify-content:center} .search-clear:hover{background:#d8d2b8;color:var(--ink)} .cat-chips{display:flex;gap:.5rem;flex-wrap:wrap} .chip{display:inline-flex;align-items:center;gap:.35rem;background:#fff;border:1px solid var(--line);color:var(--ink); border-radius:22px;padding:.45rem .9rem;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .15s} .chip:hover{border-color:var(--pri);color:var(--pri-d)} .chip.active{background:var(--pri);color:#fff;border-color:var(--pri);box-shadow:0 3px 9px rgba(74,107,58,.28)} .chip-emoji{font-size:.95rem;line-height:1} .chip-n{background:rgba(0,0,0,.09);border-radius:11px;padding:0 .42rem;font-size:.72rem;min-width:1.1rem;text-align:center} .chip.active .chip-n{background:rgba(255,255,255,.28)} .cat-section{margin-bottom:1.7rem} .cat-title{display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:800;color:var(--pri-d); text-transform:uppercase;letter-spacing:.06em;margin:.2rem 0 .95rem;padding-bottom:.55rem;border-bottom:1px solid var(--line)} .cat-emoji{font-size:1.1rem} .cat-count{margin-left:.1rem;background:var(--green);color:var(--pri-d);border-radius:8px;padding:.05rem .45rem;font-size:.72rem;letter-spacing:0} .prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1rem} .prod-item{position:relative;display:flex;gap:1rem;background:var(--card);border:1px solid var(--line); border-radius:18px;padding:.9rem;box-shadow:var(--shadow-sm);overflow:hidden; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .prod-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#d9d2b8} .prod-item.is-off{opacity:.6} .pi-link{position:absolute;inset:0;z-index:3} .pi-photo{flex:0 0 98px;width:98px;height:108px;border-radius:13px;overflow:hidden;display:flex; align-items:center;justify-content:center;background:linear-gradient(160deg,#f1f3ea,#e6e9db); border:1px solid rgba(35,32,20,.04)} .pi-photo img{width:100%;height:100%;object-fit:cover;display:block} .pi-ph{font-size:2.1rem;line-height:1;opacity:.5;filter:grayscale(.25)} .pi-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem} .pi-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem} .pi-name{font-size:1.08rem;font-weight:800;line-height:1.22;margin:0;color:var(--ink);letter-spacing:-.015em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pi-head .badge{flex:0 0 auto} .pi-mode{font-size:.8rem;color:var(--muted);font-weight:600} .pi-prices{display:flex;align-items:center;gap:.55rem;margin-top:.2rem} .pi-price b{font-size:1.02rem;font-weight:800;color:var(--pri-d);letter-spacing:-.01em} .pi-price em{font-style:normal;color:var(--muted);font-size:.75rem;margin-left:.12rem;font-weight:600} .pi-edit{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.35rem; font-size:.74rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.05em; background:linear-gradient(180deg,#d97a44,#c85a2a);padding:.44rem .95rem;border-radius:11px; box-shadow:0 5px 13px -3px rgba(200,90,42,.5)} .prod-item:hover .pi-edit{filter:brightness(1.04)} .catalog-empty{text-align:center;color:var(--muted);padding:2.2rem 1rem;background:var(--card); border:1px dashed var(--line);border-radius:14px} .catalog-empty a{color:var(--pri);font-weight:700} /* --- form prodotto: sezioni a scheda, categoria a pillole, dropzone foto --- */ .prod-wrap{max-width:860px;margin:.6rem auto 0} .fsection{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:1.15rem 1.25rem; margin-bottom:1rem;box-shadow:0 3px 12px rgba(0,0,0,.045)} .fsec-head{display:flex;align-items:center;gap:.55rem;margin-bottom:1.05rem} .fsec-ico{font-size:1.2rem;line-height:1} .fsec-title{font-size:1.02rem;font-weight:800;margin:0;color:var(--pri-d)} .fsec-title .opt{font-weight:400;color:var(--muted);font-size:.8rem;margin-left:.25rem} /* le pillole categoria riempiono la riga (una accanto all'altra), non si ammucchiano a sinistra */ .cat-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem;margin-top:.3rem} .cat-opt{position:relative;margin:0;cursor:pointer} .cat-opt input{position:absolute;opacity:0;width:0;height:0;margin:0} .cat-opt span{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;padding:.58rem 1.05rem; border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:700;font-size:.9rem;color:var(--muted); transition:border-color .15s,background .15s,color .15s} .cat-opt-emoji{font-size:1.05rem;line-height:1} .cat-opt input:checked + span{border-color:var(--pri);background:var(--green);color:var(--pri-d); box-shadow:inset 0 0 0 1px var(--pri)} .cat-opt input:focus-visible + span{outline:2px solid var(--acc);outline-offset:2px} .cat-opt:hover input:not(:checked) + span{border-color:var(--pri);color:var(--ink)} .decimal-note{display:flex;align-items:center;gap:.7rem;margin:1rem 0 0;font-size:.83rem;line-height:1.45; color:var(--ink);background:linear-gradient(180deg,#fffdf5,#fbf5e4);border:1px solid #efe6cd; border-radius:13px;padding:.7rem .8rem;box-shadow:var(--shadow-sm)} .decimal-note .tip-ico{flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center; background:#fff;border:1px solid #f1e7c9;border-radius:9px;font-size:1rem;box-shadow:var(--shadow-sm)} .decimal-note b{color:var(--pri-d)} .dropzone{position:relative;display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;margin:0; border:2px dashed var(--line);border-radius:14px;background:var(--bg);cursor:pointer;transition:border-color .15s,background .15s} .dropzone:hover,.dropzone.drag{border-color:var(--pri);background:var(--green)} .dz-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;z-index:1} .dz-thumb{flex:0 0 auto;width:78px;height:78px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff} .dz-thumb img{width:100%;height:100%;object-fit:cover;display:block} .dz-ico{flex:0 0 auto;width:78px;height:78px;display:flex;align-items:center;justify-content:center; font-size:2.2rem;background:#fff;border:1px solid var(--line);border-radius:12px} .dz-text{display:flex;flex-direction:column;gap:.15rem;min-width:0;position:relative;z-index:0} .dz-text b{font-size:.98rem;color:var(--ink)} .dz-text span{font-size:.82rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .dz-remove{position:absolute;top:.5rem;right:.6rem;z-index:2;width:27px;height:27px;border-radius:50%; background:#fff;border:1px solid var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center; cursor:pointer;font-size:.78rem} .dz-remove:hover{background:#a83c2a;color:#fff;border-color:#a83c2a} @media(max-width:600px){ .catalog-toolbar{flex-direction:column;align-items:stretch} .search-box{max-width:none;flex-basis:auto} .cat-chips{width:100%;min-width:0;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.35rem;-webkit-overflow-scrolling:touch; scrollbar-width:none} .cat-chips::-webkit-scrollbar{display:none} .chip{flex:0 0 auto} .fsection{padding:1rem 1.05rem} /* switch prezzo a tutta larghezza, due meta' uguali: niente sfori su schermi stretti */ .seg-toggle{display:flex;width:100%} .seg-opt{flex:1 1 0;min-width:0} .seg-opt span{width:100%;justify-content:center;padding:.6rem .6rem} } /* campi form riutilizzabili (usati sia dalla scheda prodotto sia dai mercati) */ .field{display:block;margin-bottom:1rem} .flabel{display:block;font-weight:700;font-size:.88rem;color:var(--ink);margin-bottom:.4rem} .hint{display:block;color:var(--muted);font-size:.78rem;line-height:1.45;margin-top:.45rem} /* --- admin mercati: schede-giorno con switch e sotto-pannelli --- */ .giorni-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1rem;margin-bottom:1rem} .giorno-card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:1rem 1.1rem; box-shadow:0 3px 12px rgba(0,0,0,.045);align-self:start} .giorno-card:not(.on){opacity:.72;background:#faf8f1} .gc-head{display:flex;align-items:center;gap:.7rem} .gc-day{font-weight:800;font-size:1.08rem;color:var(--pri-d)} .gc-off-tag{margin-left:auto;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em; color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:.15rem .6rem} .giorno-card.on .gc-off-tag{display:none} .gc-body{margin-top:.9rem;display:flex;flex-direction:column;gap:.7rem} .giorno-card:not(.on) .gc-body{display:none} .gc-body .field{margin-bottom:0} .gc-sub{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:.75rem .8rem} .gc-sub-title{font-weight:700;font-size:.85rem;color:var(--ink);margin-bottom:.55rem} .gc-sub .seg-toggle{display:flex;width:100%;background:#fff} .gc-sub .seg-opt{flex:1 1 0;min-width:0} .gc-sub .seg-opt span{width:100%;justify-content:center;padding:.5rem .4rem;font-size:.85rem;font-weight:700} .soglia-field{margin-top:.7rem} .win-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:.6rem;align-items:start} .inline-num{display:inline-flex;align-items:center;gap:.4rem} .inline-num input{width:62px;text-align:center} .inline-num em{font-style:normal;color:var(--muted);font-size:.82rem;white-space:nowrap} .win-row input[type=time]{max-width:150px} /* switch stile iOS */ .switch{position:relative;display:inline-block;width:46px;height:26px;flex:0 0 auto} .switch input{position:absolute;opacity:0;width:0;height:0;margin:0} .switch-slider{position:absolute;inset:0;background:#cfc9b4;border-radius:26px;transition:.2s;cursor:pointer} .switch-slider::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff; border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)} .switch input:checked + .switch-slider{background:var(--pri)} .switch input:checked + .switch-slider::before{transform:translateX(20px)} .switch input:focus-visible + .switch-slider{outline:2px solid var(--acc);outline-offset:2px} .save-bar{position:sticky;bottom:0;background:linear-gradient(to top,var(--bg) 62%,transparent); padding:.7rem 0 .3rem;margin-top:.3rem;z-index:4} .save-bar button{padding:.75rem 2rem;font-size:1rem;border-radius:24px;box-shadow:0 5px 14px rgba(74,107,58,.3)} .ecc-section{margin-top:1.9rem} @media(max-width:560px){ .giorni-grid{grid-template-columns:1fr} .win-row input[type=time]{max-width:none} } /* --- cliente: stato prenotazioni (non ancora aperte / chiuse) --- */ .ordini-stato{display:flex;gap:.9rem;align-items:flex-start;border-radius:16px;padding:1.1rem 1.2rem; margin:.4rem 0 1rem;border:1px solid var(--line)} .ordini-stato .os-ico{font-size:1.9rem;line-height:1;flex:0 0 auto} .ordini-stato .os-title{font-weight:800;font-size:1.06rem;margin-bottom:.15rem} .ordini-stato p{margin:.25rem 0;font-size:.92rem;line-height:1.5} .ordini-stato .os-hint{color:var(--muted);font-size:.85rem} .stato-attesa{background:#eef4fb;border-color:#cfe0f2} .stato-attesa .os-title{color:#26466e} .stato-chiuse{background:#fbeeee;border-color:#f0d5d5} .stato-chiuse .os-title{color:#8a2f1f} /* account disabilitato dall'admin: stesso impianto, tono rosso pieno + contatti */ .stato-sospeso{background:#fbeeee;border-color:#eccaca} .stato-sospeso .os-title{color:#8a2f1f} .stato-sospeso .os-ico{color:#a83c2a} .os-contatti{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.6rem} .os-contatti .btn-outline{display:inline-flex;align-items:center;gap:.35rem} .os-contatti .os-hint{flex-basis:100%} .mercato-box .deadline{margin-top:.5rem;font-weight:700;color:var(--acc)} /* badge disponibilita' nel catalogo cliente */ .stock-low{color:#b5471f;font-weight:700} .stock-ok{color:var(--ok);font-weight:600} /* --- mercati: orario inizio/fine, mappa, scadenza prenotazioni --- */ .orario-range{display:flex;align-items:flex-end;gap:.6rem} .orario-range .field{margin:0;flex:1} .range-sep{color:var(--muted);font-weight:800;padding-bottom:.6rem} .map-search{display:flex;gap:.5rem;margin-bottom:.55rem} .map-search .map-q{flex:1;margin:0} .map-search .btn-sm{flex:0 0 auto;white-space:nowrap} .map-pick{height:200px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#e9e6d8} .map-actions{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.55rem} .map-coords{font-size:.8rem;color:var(--muted);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .map-clear{background:none;border:0;color:#a83c2a;font-weight:700;font-size:.82rem;cursor:pointer;padding:.2rem .3rem;flex:0 0 auto} .map-clear:hover{background:none;text-decoration:underline} .scad-fields{margin-top:.7rem} .scad-preview{margin-top:.65rem;font-size:.82rem;line-height:1.45;color:var(--pri-d);background:var(--green); border:1px solid #d5e3c8;border-radius:10px;padding:.55rem .75rem} /* mappa lato cliente + pulsante indicazioni */ .come-arrivare{display:flex;width:100%;align-items:center;justify-content:center;gap:.4rem;margin-top:.7rem;color:#fff;font-weight:700;font-size:.92rem; background:linear-gradient(180deg,var(--pri),var(--pri-d));padding:.62rem 1.15rem;border-radius:11px; box-shadow:0 5px 14px -4px rgba(74,107,58,.5)} .come-arrivare:hover{filter:brightness(1.06)} /* la mappa Leaflet non deve stare sopra la barra/sidebar */ .leaflet-container{z-index:1;font:inherit} .leaflet-pane{z-index:1} /* --- mercati: 3 modalita' disponibilita' (righe radio selezionabili) --- */ .disp-modes{display:flex;flex-direction:column;gap:.4rem} .disp-opt{display:flex;align-items:flex-start;gap:.65rem;padding:.6rem .7rem;border:1px solid var(--line); border-radius:11px;background:#fff;cursor:pointer;margin:0;transition:border-color .15s,background .15s} .disp-opt input{position:absolute;opacity:0;width:0;height:0;margin:0} .disp-radio{flex:0 0 auto;width:18px;height:18px;margin-top:.12rem;border-radius:50%;border:2px solid #cfc9b4; position:relative;transition:border-color .15s} .disp-opt input:checked ~ .disp-radio{border-color:var(--pri)} .disp-opt input:checked ~ .disp-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--pri)} .disp-opt:has(input:checked){border-color:var(--pri);background:var(--green)} .disp-opt input:focus-visible ~ .disp-radio{outline:2px solid var(--acc);outline-offset:2px} .disp-txt{display:flex;flex-direction:column;gap:.08rem;min-width:0} .disp-txt b{font-size:.9rem;font-weight:700;color:var(--ink)} .disp-txt em{font-style:normal;font-size:.78rem;color:var(--muted);line-height:1.35} .disp-modes .soglia-field{margin:.1rem 0 .2rem;padding:0 .2rem} /* --- prenotazioni: schede prodotto (nome + quantita' in evidenza) --- */ .preno-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:1rem;margin-bottom:1rem} .preno-card{display:flex;flex-direction:column;gap:.7rem;background:var(--card);border:1px solid var(--line); border-radius:16px;padding:1rem;box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease} .preno-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} .pc-top{display:flex;align-items:center;gap:.7rem;min-width:0} .pc-thumb{flex:0 0 auto;width:46px;height:46px;border-radius:11px;overflow:hidden;display:flex;align-items:center; justify-content:center;background:linear-gradient(160deg,#f1f3ea,#e6e9db);border:1px solid rgba(35,32,20,.05);font-size:1.35rem} .pc-thumb img{width:100%;height:100%;object-fit:cover;display:block} .pc-headings{min-width:0;display:flex;flex-direction:column;gap:.1rem} .pc-name{margin:0;font-size:1.08rem;font-weight:800;letter-spacing:-.015em;color:var(--ink);line-height:1.2; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pc-sub{font-size:.75rem;color:var(--muted);font-weight:600} .pc-qty-box{display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap;padding:.5rem .75rem;border-radius:12px; background:var(--green);border:1px solid #d5e3c8} .pc-qty{font-size:1.75rem;font-weight:800;color:var(--pri-d);letter-spacing:-.02em;line-height:1} .pc-qty-u{font-size:.95rem;font-weight:700;color:var(--pri)} .pc-qty-det{flex-basis:100%;font-size:.75rem;color:var(--muted);font-weight:600;margin-top:.15rem} .pc-stock{display:flex;flex-wrap:wrap;gap:.4rem} .pc-chip{font-size:.72rem;color:var(--muted);background:var(--bg);border:1px solid var(--line); border-radius:8px;padding:.2rem .5rem;font-weight:600} .pc-chip b{color:var(--ink);font-weight:700} .pc-chip-low{background:#fbeeee;border-color:#f0d5d5;color:#8a2f1f} .pc-chip-low b{color:#8a2f1f} .preno-total{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--pri-d); color:#fff;border-radius:14px;padding:.85rem 1.2rem;font-weight:600;max-width:420px;margin-left:auto} .preno-total b{font-size:1.2rem;font-weight:800} .filter-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:end;margin-bottom:1.1rem; background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem} .filter-row label,.filter-row .field{margin:0;flex:1 1 180px;min-width:0;max-width:380px;font-weight:600;font-size:.85rem} .filter-row > input{flex:1 1 200px;min-width:0;max-width:380px} .filter-row input,.filter-row select{border-radius:9px;width:100%} .filter-row button{flex:0 0 auto;align-self:flex-end} .filter-row.plain{background:none;border:0;padding:0} /* ── Chiamata al cliente dall'admin: bottone + conferma ───────────────── */ .btn-chiama{display:inline-flex;align-items:center;gap:.35rem;background:var(--pri);color:#fff; border:0;border-radius:8px;padding:.38rem .7rem;font-size:.85rem;font-weight:600;cursor:pointer} .btn-chiama:hover{background:var(--pri-d)} .btn-chiama .ico{width:15px;height:15px} .call-modal{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center; padding:1rem;background:rgba(38,51,43,.45);backdrop-filter:blur(3px)} .call-modal[hidden]{display:none} .call-card{background:#fff;border-radius:18px;padding:1.6rem 1.4rem;max-width:380px;width:100%; text-align:center;box-shadow:0 24px 60px -20px rgba(0,0,0,.4)} .call-ico{width:56px;height:56px;border-radius:50%;background:#EAF2E6;color:var(--pri); display:flex;align-items:center;justify-content:center;margin:0 auto .8rem} .call-ico .ico{width:26px;height:26px} .call-title{margin:0 0 .4rem;font-size:1.2rem} .call-txt{margin:0 0 1.2rem;font-size:.9rem;color:var(--muted);line-height:1.5} .call-txt b{color:var(--ink)} .call-actions{display:flex;flex-direction:column;gap:.5rem} .call-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem; border-radius:10px;padding:.75rem 1rem;font-size:.92rem;font-weight:700;cursor:pointer;border:0} .call-ok{background:var(--pri);color:#fff;text-decoration:none} .call-ok:hover{background:var(--pri-d);color:#fff} .call-ko{background:transparent;color:var(--muted);border:1px solid var(--line)} .call-ko:hover{background:#f3f0e6;color:var(--ink)} /* ── Messaggio per il gruppo WhatsApp ───────────────────────────────── */ .msg-wrap{display:grid;grid-template-columns:1fr;gap:1.1rem;align-items:start} @media(min-width:1000px){ .msg-wrap{grid-template-columns:1.15fr .85fr} } .msg-vars{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.2rem} .msg-vars b{font-size:.8rem;color:var(--muted);margin-right:.2rem} /* ── PILLOLE DELLE VARIABILI ───────────────────────────────────────────────── Una sola forma per l'elenco e per il testo del messaggio. Non e' una bolla tonda: e' una targhetta, con lo spigolo appena addolcito, un pallino che dice «qui dentro ci finisce un valore» e il nome in chiaro. Il fondo e' un velo verde su carta, con un filo di luce in alto e un'ombra cortissima sotto: sembra posata sul foglio, non disegnata sopra. ── */ .vd-chip, .vd-tok{ --pill-fondo:#EFF5EA; --pill-bordo:#C6D9BA; --pill-scuro:#2C4726; --pill-punto:#6E9459; /* inline-block, non flex: cosi' la linea di base della pillola e' quella del suo testo — la stessa delle parole intorno — e non quella del pallino */ display:inline-block;position:relative; width:auto;max-width:100%;padding:.14em .58em .14em 1.22em; border-radius:7px;border:1px solid var(--pill-bordo); background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,0)) ,var(--pill-fondo); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 1.5px rgba(44,71,38,.07); color:var(--pill-scuro);font-family:inherit;font-size:.84em;font-weight:600; line-height:1.3;letter-spacing:.005em;white-space:nowrap; vertical-align:baseline;text-decoration:none; -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none; transition:background-color .16s ease, border-color .16s ease, box-shadow .18s ease, transform .14s cubic-bezier(.2,.7,.3,1), opacity .16s ease} /* il pallino: fuori dal flusso, centrato in verticale sulla pillola */ .vd-chip::before, .vd-tok::before{ content:"";position:absolute;left:.52em;top:50%;margin-top:-.21em; width:.42em;height:.42em;border-radius:50%; background:var(--pill-punto);box-shadow:0 0 0 .14em rgba(110,148,89,.2); transition:background .16s ease, box-shadow .16s ease} .vd-chip:hover, .vd-tok:hover{ --pill-fondo:#E5EFDD;--pill-bordo:#AEC89C; box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 3px 9px rgba(44,71,38,.14); transform:translateY(-1px)} .vd-chip:hover::before, .vd-tok:hover::before{box-shadow:0 0 0 .2em rgba(110,148,89,.26)} .vd-chip:active, .vd-tok:active{transform:translateY(0) scale(.98); box-shadow:inset 0 1px 2px rgba(44,71,38,.14)} .vd-chip:focus-visible, .vd-tok:focus-visible{outline:2px solid var(--pri);outline-offset:2px} /* nell'elenco */ .msg-vars .vd-chip{cursor:grab} .msg-vars .vd-chip:active{cursor:grabbing} .msg-vars .vd-presa{opacity:.28;transform:none;box-shadow:none} .msg-vars .vd-usata{--pill-fondo:#D9EACE;--pill-bordo:#9CBE87} .msg-vars .hint{flex-basis:100%;margin-top:.25rem} /* dentro il testo: centrata sulla riga e contenuta nell'altezza della riga */ .vd-tok{cursor:grab;margin:0 .08em;vertical-align:.129em} .vd-tok:active{cursor:grabbing} .vd-tok.vd-in-viaggio{opacity:.3;transform:none;box-shadow:none} .vd-tok.vd-atterrata{animation:vdAtterrata .5s cubic-bezier(.2,.9,.3,1)} @keyframes vdAtterrata{ 0%{transform:scale(.7);box-shadow:0 0 0 .5em rgba(110,148,89,.28)} 55%{transform:scale(1.07)} 100%{transform:scale(1);box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 1.5px rgba(44,71,38,.07)} } .vd-tok.vd-via{opacity:0;transform:scale(.6);transition:opacity .18s ease-in, transform .18s ease-in} /* il riquadro di scrittura: stesso vestito dei campi di prima */ .vd-editor{ width:100%;border:1px solid var(--line);border-radius:12px; padding:.62rem .7rem;background:#fff;color:var(--ink); font:inherit;font-size:1rem;line-height:1.6;cursor:text; white-space:pre-wrap;overflow-wrap:break-word;overflow-y:auto;max-height:14rem; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease} .vd-editor:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(63,90,52,.13)} .vd-editor:empty::before{content:attr(data-vuoto);color:var(--muted);opacity:.7;pointer-events:none} .vd-editor.vd-target{border-color:var(--pri);box-shadow:0 0 0 3px rgba(63,90,52,.16);background:#FCFDFB} .vd-nascosto{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* la copia che segue il dito */ .vd-ghost{position:fixed;left:0;top:0;z-index:9999;pointer-events:none; box-shadow:0 12px 24px rgba(44,71,38,.28), inset 0 1px 0 rgba(255,255,255,.95); transform-origin:50% 50%;rotate:-2deg;will-change:transform;opacity:.98} .vd-ghost.vd-elimina{ --pill-fondo:#FAEAE4;--pill-bordo:#E0B4A3;--pill-scuro:#96371C;--pill-punto:#C2603F; text-decoration:line-through;text-decoration-thickness:1px} /* il cursore di testo nel punto d'inserimento */ .vd-caret{position:fixed;left:0;top:0;width:2px;border-radius:1px;z-index:9998; background:var(--pri,#3f5a34);pointer-events:none;will-change:transform; box-shadow:0 0 0 1px rgba(255,255,255,.65);animation:vdBlink .9s steps(1,end) infinite} @keyframes vdBlink{0%,55%{opacity:1}56%,100%{opacity:.15}} body.vd-trascino{-webkit-user-select:none;user-select:none;cursor:grabbing} /* ── COMBO DEI COMUNI ──────────────────────────────────────────────────────── Vale ovunque si scelga un comune: registrazione, profilo del cliente e anagrafica del backoffice. Sta qui in style.css (caricato da tutti i layout) e si aggancia agli attributi, non alle classi del wizard: prima nel backoffice la tendina non era ancorata al campo e spingeva giu' la pagina. */ /* flex, non block: cosi' l'altezza del contenitore e' ESATTAMENTE quella del campo (senza lo spazio di riga che lasciava il testo fra i tag) e la pastiglia della spunta cade centrata */ [data-comuni]{position:relative;display:flex;align-items:center} [data-comuni] [data-comune]{width:100%;padding-right:2.4rem} /* la freccina della tendina: colore neutro, come in ogni menu a discesa. Quando l'elenco si apre punta in su, e ci gira con una molla morbida. */ .cm-freccia{ position:absolute;right:.62rem;top:50%;margin-top:-.55rem; width:1.1rem;height:1.1rem;display:flex;align-items:center;justify-content:center; color:var(--muted,#8B8677);pointer-events:none;transition:color .16s ease} .cm-freccia svg{width:100%;height:100%;display:block; transform:rotate(0deg);transform-origin:50% 50%; transition:transform .26s cubic-bezier(.34,1.28,.5,1)} .cm-freccia.e-su svg{transform:rotate(180deg)} [data-comuni]:focus-within .cm-freccia{color:var(--pri,#3f5a34)} @media (prefers-reduced-motion: reduce){ .cm-freccia svg{transition:none} } /* comune scelto: il campo resta NEUTRO, uguale a tutti gli altri. La classe .e-scelto resta sul contenitore perche' la legge il JS, ma non colora piu' niente: l'unico segnale visivo e' la freccina, come in un menu qualsiasi. */ [data-comuni] [data-comune].comune-da-scegliere{ border-color:#C9603C;box-shadow:inset 0 0 0 1px rgba(201,96,60,.25);background:#FFFCFB} /* la tendina: ancorata al campo, sopra tutto, con lo scorrimento se serve */ [data-comuni] [data-comune-lista]{ position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60; margin:0;padding:.3rem;list-style:none;max-height:15rem;overflow-y:auto; background:#fff;border:1px solid var(--line,#E7E2CF);border-radius:12px; box-shadow:0 12px 28px rgba(40,50,30,.16), 0 2px 6px rgba(40,50,30,.08)} [data-comuni] [data-comune-lista] li{ display:flex;align-items:baseline;justify-content:space-between;gap:.6rem; padding:.5rem .6rem;border-radius:8px;cursor:pointer; -webkit-user-select:none;user-select:none} [data-comuni] [data-comune-lista] li b{font-weight:600;color:var(--ink,#25241D)} [data-comuni] [data-comune-lista] li span{font-size:.78rem;color:var(--muted,#8B8677);white-space:nowrap} [data-comuni] [data-comune-lista] li:hover, [data-comuni] [data-comune-lista] li.on{background:#F1F5EE} /* la voce gia' scelta: in cima, evidenziata, con la sua spunta */ [data-comuni] [data-comune-lista] li.e-quello{background:#EAF2E5} [data-comuni] [data-comune-lista] li.e-quello b{color:var(--pri-d,#2C4726)} [data-comuni] [data-comune-lista] li.e-quello b::before{ content:"\2713";display:inline-block;margin-right:.35rem;color:var(--pri,#3f5a34);font-weight:700} /* ── NASTRO "ACCOUNT DI PROVA" ─────────────────────────────────────────────── Compare in cima al sito quando ci si e' entrati dal backoffice con l'account di collaudo: ricorda che NON si e' un cliente vero e riporta indietro in un tocco. Colore terracotta perche' si distingua dal verde di tutto il resto. */ .nastro-prova{ display:flex;align-items:center;gap:.5rem;width:100%; padding:.5rem .9rem;text-decoration:none; background:linear-gradient(180deg,#C9603C,#B4522F);color:#fff; font-size:.84rem;font-weight:600;letter-spacing:.005em; box-shadow:0 1px 6px rgba(112,48,26,.28);position:relative;z-index:60} .nastro-prova .np-tag{ flex:0 0 auto;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35); border-radius:999px;padding:.1rem .5rem;font-size:.74rem;font-weight:700; text-transform:uppercase;letter-spacing:.04em} .nastro-prova .np-testo{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nastro-prova .np-frec{flex:0 0 auto;font-size:1.2rem;line-height:1;opacity:.9} .nastro-prova:hover{filter:brightness(1.06)} .nastro-prova:active{filter:brightness(.96)} /* mentre si trascina NIENTE e' selezionabile, in tutta la pagina: e' la rete che impedisce al telefono di aprire la sua selezione col dito */ body.vd-trascino *{-webkit-user-select:none!important;user-select:none!important} body.vd-trascino .vd-editor{caret-color:transparent} /* ── LENTE D'INGRANDIMENTO ─────────────────────────────────────────────────── Col dito, la mano e la pastiglia coprono proprio il punto in cui la variabile sta per finire. La lente lo mostra ingrandito poco piu' su, come fa il telefono quando si sposta il cursore dentro un testo: vetro chiaro, angoli morbidi, un'ombra che la stacca dalla pagina e una codina che indica il dito. Dentro non c'e' un'immagine ma una COPIA del riquadro, percio' il testo resta nitido. Compare solo mentre si e' dentro un riquadro. ── */ .vd-lente{ position:fixed;left:0;top:0;z-index:10000;pointer-events:none; border-radius:16px;background:#fff; border:1px solid rgba(44,71,38,.16); box-shadow:0 14px 30px rgba(28,44,22,.26), 0 3px 8px rgba(28,44,22,.14), inset 0 1px 0 rgba(255,255,255,.9); opacity:0;transition:opacity .13s ease;will-change:transform} .vd-lente.si-vede{opacity:1} .vd-lente-vetro{position:absolute;inset:0;border-radius:15px;overflow:hidden;background:#fff} .vd-lente-vetro::after{ /* riflesso appena accennato, da vetro */ content:"";position:absolute;inset:0;pointer-events:none;border-radius:15px; background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 42%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)} .vd-lente-copia{ position:absolute!important;left:0;top:0;transform-origin:0 0; /* il padding resta IDENTICO all'originale: e' lui che tiene il testo allineato col punto d'inserimento; si toglie solo il bordo */ border:0!important;border-radius:0!important; box-shadow:none!important;background:transparent!important; max-height:none!important;overflow:visible!important;min-height:0!important} .vd-lente-copia::before{content:none!important} /* niente testo di esempio nella copia */ .vd-lente-caret{ position:absolute;left:50%;top:50%;width:3px;margin-left:-1.5px;border-radius:2px; background:var(--pri,#3f5a34);transform:translateY(-50%); box-shadow:0 0 0 1px rgba(255,255,255,.7); animation:vdBlink .9s steps(1,end) infinite} /* la codina che indica il dito */ .vd-lente::after{ content:"";position:absolute;left:50%;bottom:-5px;width:11px;height:11px;margin-left:-5.5px; background:#fff;border-right:1px solid rgba(44,71,38,.16);border-bottom:1px solid rgba(44,71,38,.16); border-radius:0 0 3px 0;transform:rotate(45deg)} .vd-lente.sotto::after{ bottom:auto;top:-5px;border:0;border-left:1px solid rgba(44,71,38,.16); border-top:1px solid rgba(44,71,38,.16);border-radius:3px 0 0 0} @media (prefers-reduced-motion: reduce){ .vd-lente-caret{animation:none} } .vd-aiuto{display:flex;align-items:flex-start;gap:.4rem;margin:.1rem 0 .55rem} .vd-aiuto .ico{flex:0 0 auto;margin-top:.15em;color:var(--pri,#3f5a34)} /* col dito serve piu' spazio per afferrarle */ @media (pointer: coarse){ .msg-vars .vd-chip{padding:.32em .7em .32em 1.3em;font-size:.88em} .vd-tok{padding:.2em .62em .2em 1.26em} } @media (prefers-reduced-motion: reduce){ .vd-caret{animation:none} .vd-tok.vd-atterrata{animation:none} .vd-chip:hover, .vd-tok:hover{transform:none} } /* variabile + valore attuale: ogni riga larga quanto le serve */ .msg-vals{flex-basis:100%;list-style:none;margin:.3rem 0 0;padding:0; display:flex;flex-direction:column;gap:.32rem} .msg-vals li{display:flex;align-items:center;gap:.55rem;min-width:0} .msg-vals li > .vd-chip{flex:0 0 auto} .msg-vals span{font-size:.82rem;color:var(--ink);min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .msg-vars b{flex-basis:100%;font-size:.72rem;font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);margin:0 0 .1rem} /* opzioni di impaginazione dell'elenco */ .msg-stile{margin-top:.9rem;padding:.75rem .85rem;border:1px solid var(--line);border-radius:12px; background:#faf8f2} .msg-stile .flabel{display:block;margin-bottom:.5rem} .msg-opt{display:flex;align-items:flex-start;gap:.55rem;margin:0 0 .4rem;font-size:.86rem;cursor:pointer} .msg-opt:last-child{margin-bottom:0} .msg-opt input{width:17px;height:17px;margin:.1rem 0 0;flex:0 0 auto} .msg-opt em{font-style:normal;color:var(--muted)} /* elenco prodotti: una scheda per categoria, righe leggibili a colpo d'occhio */ .msg-cat{margin-bottom:.9rem;border:1px solid var(--line);border-radius:12px;overflow:hidden} .msg-cat-h{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;background:#f4f1e8; border-bottom:1px solid var(--line)} .msg-cat-t{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)} .msg-cat-n{margin-right:auto;font-size:.75rem;color:var(--muted)} .msg-cat-all{padding:.2rem .5rem;font-size:.72rem;font-weight:700;background:#fff;color:var(--muted); border:1px solid var(--line);border-radius:99px;min-height:0;box-shadow:none} .msg-cat-all:hover{background:#fff;color:var(--ink);border-color:#c9c2b4} .msg-riga{display:flex;align-items:center;gap:.6rem;padding:.4rem .7rem; border-top:1px solid #f0ece1;background:#fff} .msg-riga:first-of-type{border-top:0} .msg-riga:hover{background:#faf8f2} .msg-chk{display:flex;align-items:center;gap:.55rem;flex:1;min-width:0;margin:0;cursor:pointer} .msg-chk input{width:18px;height:18px;margin:0;flex:0 0 auto} .msg-nome{font-size:.92rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .msg-riga input:not(:checked) ~ .msg-nome{opacity:.45;text-decoration:line-through} .msg-riga:has(.p-on:not(:checked)){background:#fbfaf7} .msg-riga:has(.p-on:not(:checked)) .msg-prezzo{opacity:.4} .msg-prezzo{flex:0 0 auto;font-size:.85rem;color:var(--ink);min-width:82px;text-align:right; white-space:nowrap} .msg-prezzo b{font-weight:700} .msg-prezzo em{font-style:normal;font-size:.78rem;color:var(--muted)} .msg-nota{flex:0 0 128px;margin:0;padding:.3rem .45rem;font-size:.8rem;border-radius:7px} @media(max-width:520px){ /* nome sopra, prezzo e nota affiancati sotto: 2 righe invece di 3 */ .msg-riga{flex-wrap:wrap;row-gap:.3rem;column-gap:.5rem} .msg-chk{flex:1 1 100%} .msg-prezzo{margin-left:1.9rem;min-width:0;text-align:left} .msg-nota{flex:1 1 90px} } /* anteprima in stile bolla WhatsApp */ .msg-preview{position:sticky;top:1rem;background:var(--card);border:1px solid var(--line); border-radius:16px;padding:1rem} .msg-prev-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem; font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);margin-bottom:.6rem} .msg-count{font-weight:600;letter-spacing:0;text-transform:none} .wa-bolla{background:#E7FFDB;border-radius:14px 14px 14px 4px;padding:.9rem 1rem; box-shadow:0 1px 2px rgba(0,0,0,.12);max-height:60vh;overflow:auto} .wa-bolla pre{margin:0;font-family:inherit;font-size:.92rem;line-height:1.45;color:#111b21; white-space:pre-wrap;word-break:break-word} .msg-copia{width:100%;margin-top:.9rem;display:flex;align-items:center;justify-content:center;gap:.45rem} .msg-copia.ok{background:#3E7C48} /* ── prezzi sulla card prodotto (backoffice) ──────────────────────────────── Comanda l'impostazione del prodotto: il prezzo BASE (quello digitato) e' in evidenza, quello calcolato col peso del pezzo e' piu' tenue, e sotto si legge il conto (es. 1,50 €/kg x 4,5 kg) cosi' si capisce da dove esce. */ /* il prezzo impostato nella scheda: riquadro verde, un filo piu' grande */ .pi-price.is-base{background:#EAF2E6;border-radius:10px;padding:.2rem .55rem;flex:0 0 auto} .pi-price.is-base b{color:var(--bosco,#24382A);font-size:1.16rem} .pi-price.is-base em{font-size:.8rem} /* di fianco, incolonnate su due righe: peso di un pezzo e prezzo dell'altra unita' */ .pi-extra{display:flex;flex-direction:column;gap:.05rem;min-width:0} .pi-x{white-space:nowrap;line-height:1.2} .pi-x b{font-size:.8rem;font-weight:700;color:var(--ink)} .pi-x em{font-style:normal;font-size:.68rem;color:var(--muted);font-weight:600;margin-left:.1rem} .pi-x.is-manca{color:#A33B1E;font-size:.72rem;font-weight:600;white-space:normal} /* storico prezzi della scheda prodotto: stessi margini laterali degli altri gruppi (sta fuori dal form, quindi va allineato a mano al suo contenitore) */ /* lo storico sta nel contenitore della scheda (prod-wrap): stessi margini laterali degli altri gruppi, senza rientri suoi */ .sp-wrap{margin-top:2rem} .sp-wrap .sp-titolo{margin:0 0 .7rem} .sp-wrap .sp-list{max-width:none} .sp-wrap .sp-nota{max-width:none;margin-top:.5rem} /* scheda a cui si torna dal catalogo: un lampo, per ritrovarla con l'occhio */ @keyframes posTornato{ 0%{box-shadow:0 0 0 3px rgba(201,96,60,.55)} 100%{box-shadow:0 0 0 3px rgba(201,96,60,0)} } .prod-item.pos-tornato{animation:posTornato 1.6s ease-out both} /* nelle tabelle (clienti, ordini) il bordo luminoso non si vede: si accende la riga */ @keyframes posTornatoRiga{ 0%{background:rgba(201,96,60,.16)} 100%{background:rgba(201,96,60,0)} } tr.pos-tornato > td{animation:posTornatoRiga 1.6s ease-out both} @media (prefers-reduced-motion: reduce){ .prod-item.pos-tornato{animation:none} tr.pos-tornato > td{animation:none} }