/* ZORBA APP – stile (concept C approvato) */
:root{
  --red:#D9421F; --green:#17663F; --deep:#0F4A2C; --cream:#E3E6C7; --soft:#B9D49A; --ink:#1F2A23;
  --line:#ffffff26; --field:#ffffff14;
  /* nomi Adobe Fonts (kit web) + nomi locali */
  --f-caps:"komu-new","Komu New",Impact,sans-serif;
  --f-title:"eger","Eger","Komu New",Impact,sans-serif;
  --f-script:"quimby-gubernatorial","Quimby Gubernatorial",cursive;
  --f-text:"Poppins",system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--deep);font-family:var(--f-text);color:var(--cream);overscroll-behavior:none}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
#app{max-width:480px;min-height:100%;margin:0 auto;background:var(--green);position:relative;overflow:hidden}
.screen{min-height:100dvh;position:relative;padding-bottom:calc(104px + var(--safe-b))}
.screen.nopad{padding-bottom:calc(24px + var(--safe-b))}

/* tipografia */
.k{font-family:var(--f-caps);text-transform:uppercase;line-height:.9;font-weight:400}
.k.b{font-weight:700}
.eg{font-family:var(--f-title);text-transform:uppercase;line-height:.86;display:inline-block;transform:skewX(-8deg);font-weight:400}
.q{font-family:var(--f-script);line-height:1;font-weight:400}
.star{position:absolute;pointer-events:none;z-index:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* barra superiore */
.top{display:flex;justify-content:space-between;align-items:center;padding:calc(10px + env(safe-area-inset-top,0px)) 22px 8px;position:relative;z-index:4;gap:10px}
.top .ttl{font-size:26px;text-align:center;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{width:48px;height:48px;border-radius:50%;border:2px solid #ffffff40;display:grid;place-items:center;font-size:20px;color:var(--cream);flex:none}
.ib.ghost{visibility:hidden}
.prog{display:flex;gap:6px;padding:0 22px;position:relative;z-index:2}
.prog i{flex:1;height:5px;border-radius:3px;background:#ffffff30}.prog i.on{background:var(--red)}

/* intestazione step */
.head{padding:16px 22px 0;position:relative;z-index:3}
.head .n{font-family:var(--f-caps);font-size:20px;color:var(--soft)}
.head .q{font-size:27px;color:var(--soft);transform:rotate(-5deg);transform-origin:left;display:inline-block;margin-top:4px}
.head .eg{font-size:clamp(64px,22vw,86px);color:var(--cream);margin-top:2px}
.wrap{padding:0 22px;position:relative;z-index:2}
.lab{font-family:var(--f-caps);font-size:20px;color:var(--soft);margin:16px 0 8px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lab em{font:400 12px var(--f-text);color:#ffffffd0;font-style:normal;text-transform:none}

/* campi */
.field{display:flex;align-items:center;gap:10px;min-height:54px;border-radius:16px;background:var(--field);border:2px solid #ffffff30;padding:0 16px;font-size:16px;width:100%}
.field:focus-within{border-color:var(--cream);background:#ffffff1f}
.field input,.field textarea,.field select{flex:1;outline:none;min-width:0;height:50px;font-size:16px;color:var(--cream)}
.field select option{color:#222}
.field textarea{height:76px;padding:14px 0;resize:none}
.field ::placeholder{color:#ffffff80}
.field.err{border-color:#ffb4a0}
.hint{font-size:12px;color:#ffffffd0;margin-top:6px;padding-left:4px}
.errmsg{font-size:12.5px;color:#ffcfbf;margin-top:6px;padding-left:4px}

/* pulsanti */
.nav{position:fixed;left:50%;transform:translateX(-50%);width:min(480px,100%);bottom:0;padding:12px 22px calc(18px + var(--safe-b));display:flex;gap:10px;z-index:20;background:linear-gradient(transparent,var(--green) 30%)}
.nav .p{width:58px;height:58px;border-radius:50%;border:2px solid #ffffff55;display:grid;place-items:center;font-size:22px;flex:none;background:var(--green)}
.cta{flex:1;min-height:58px;border-radius:30px;background:var(--red);display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-caps);font-size:26px;color:#fff;text-transform:uppercase;padding:0 18px;text-align:center}
.cta[disabled]{background:#ffffff26;color:#ffffff90}
.pill{min-height:48px;border-radius:24px;border:2px solid #ffffff55;display:grid;place-items:center;font-size:14px;font-weight:600;padding:0 10px}
.pill.on{background:var(--cream);color:var(--green);border-color:var(--cream)}
.pill[disabled]{opacity:.3}
.tt{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}

.note{background:var(--cream);color:var(--ink);border-radius:18px;padding:12px 14px;font-size:13.5px;line-height:1.45;position:relative}
.note b{color:var(--red)}
.note .t{font-family:var(--f-caps);font-size:19px;color:var(--green);margin-bottom:4px;text-transform:uppercase}
.card{background:var(--field);border-radius:18px;padding:6px 16px}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px dashed #ffffff26;font-size:14.5px}
.kv:last-child{border:none}
.kv span:first-child{color:#ffffffc0;font-size:13px;flex:none}
.kv span:last-child{font-weight:500;text-align:right}
.edit{display:inline-flex;align-items:center;min-height:48px;padding:0 4px;font-size:13px;color:var(--soft);text-decoration:underline;font-weight:500}

/* stepper */
.steps2{display:flex;gap:8px}
.step{display:flex;align-items:center;gap:6px;height:60px;border-radius:30px;background:#ffffff18;padding:0 6px 0 12px;flex:1;min-width:0}
.step .lb{font-size:20px;flex:1}
.step button{width:48px;height:48px;border-radius:50%;border:2px solid #ffffff66;display:grid;place-items:center;font-size:22px;flex:none}
.step button.plus{background:var(--cream);color:var(--green);border-color:var(--cream)}
.step b{font-family:var(--f-caps);font-size:28px;min-width:22px;text-align:center;font-weight:400}

/* HOME */
.photo{height:min(300px,40vh);background:url("../assets/home.jpg") center 40%/cover no-repeat;position:relative}
.photo:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;background:var(--green);clip-path:polygon(0 100%,100% 0,100% 100%)}
.badge{position:absolute;left:20px;bottom:34px;z-index:3;background:var(--cream);border-radius:14px;padding:8px 16px 6px;transform:rotate(-5deg);box-shadow:0 4px 0 var(--deep)}
.badge .k{font-size:22px;color:var(--green)}
.badge .q{font-size:20px;color:var(--red);margin-top:-2px}
.idx{padding:4px 22px 0;position:relative;z-index:2}
.r{display:flex;align-items:center;min-height:104px;border-bottom:1.5px solid var(--line);gap:6px;width:100%;text-align:left}
.r:last-child{border:none}
.r .n{font-family:var(--f-caps);font-size:22px;color:var(--soft);width:34px;align-self:flex-start;margin-top:26px;flex:none}
.r .q{font-size:22px;color:var(--soft);display:block;transform:rotate(-6deg);transform-origin:left bottom;margin-bottom:2px}
.r .k{font-size:clamp(34px,11vw,44px);color:var(--cream);display:block}
.r .txt{flex:1;min-width:0}
.go{margin-left:auto;width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:22px;flex:none}
.go.c{background:var(--cream);color:var(--red)}
.foot{display:flex;gap:8px;padding:8px 16px calc(16px + var(--safe-b))}
.foot a{flex:1;min-height:48px;border-radius:24px;background:#ffffff14;display:grid;place-items:center;font-size:12.5px;color:var(--soft);font-weight:500}

/* calendario */
.cal{background:var(--cream);border-radius:22px;padding:10px 14px 12px;color:var(--ink)}
.cal .mh{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-caps);font-size:23px;color:var(--red);text-transform:uppercase}
.cal .mh button{color:var(--green);width:48px;height:48px;display:grid;place-items:center;font-size:22px}
.cal .mh button[disabled]{opacity:.25}
.g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.g b{font-size:10px;color:var(--green);font-weight:600;padding-bottom:3px}
.g button{height:42px;display:grid;place-items:center;font-size:14px;font-weight:500;border-radius:50%;color:var(--ink)}
.g button[disabled]{opacity:.25}
.g button.on{background:var(--red);color:#fff;font-weight:600}
.g button.td{box-shadow:inset 0 0 0 2px var(--green)}

/* ORDINA */
.mode{display:flex;gap:8px}
.mode button{flex:1;height:56px;border-radius:18px;border:2px solid #ffffff40;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-caps);font-size:22px;text-transform:uppercase}
.mode button.on{background:var(--cream);color:var(--green);border-color:var(--cream)}
.chips{display:flex;gap:18px;padding:0 22px;border-bottom:1.5px solid var(--line);overflow-x:auto;scrollbar-width:none;position:sticky;top:0;background:var(--green);z-index:10}
.chips::-webkit-scrollbar{display:none}
.chips button{font-family:var(--f-caps);font-size:21px;color:#ffffffb8;flex:none;padding:12px 0 9px;border-bottom:3px solid transparent;text-transform:uppercase}
.chips button.on{color:var(--cream);border-color:var(--red)}
.sub{font-family:var(--f-script);font-size:30px;color:var(--soft);padding:18px 22px 2px}
.prod{display:flex;gap:10px;padding:11px 22px;border-bottom:1px dashed var(--line);align-items:center}
.prod .l{flex:1;min-width:0}
.prod h4,.item h4{font-size:13.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--cream)}
.prod p,.item p{font-size:12.5px;color:var(--soft);line-height:1.35}
.al{font-size:11px;color:#ffffffd0;font-weight:300;margin-top:2px}
.prod .pr{font-family:var(--f-caps);font-size:22px;min-width:40px;text-align:right}
.add{width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:24px;flex:none}
.qty{display:flex;align-items:center;background:var(--cream);border-radius:24px;height:48px;color:var(--green);flex:none}
.qty button{width:44px;height:48px;display:grid;place-items:center;font-size:20px;font-weight:600;color:var(--green)}
.qty b{font-family:var(--f-caps);font-size:24px;min-width:16px;text-align:center;font-weight:400}
.cartbar{position:fixed;left:50%;transform:translateX(-50%);width:min(452px,calc(100% - 28px));bottom:calc(16px + var(--safe-b));min-height:64px;border-radius:22px;background:var(--red);display:flex;align-items:center;padding:8px 8px 8px 18px;gap:12px;color:#fff;z-index:20;box-shadow:0 8px 20px #0004}
.cartbar .ic{position:relative;font-size:24px}
.cartbar .ic i{position:absolute;top:-6px;right:-10px;background:var(--cream);color:var(--red);font:600 11px var(--f-text);min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;font-style:normal;padding:0 4px}
.cartbar .t{flex:1;font-size:12px;line-height:1.3}
.cartbar .t b{font-family:var(--f-caps);font-size:24px;display:block;font-weight:400}
.cartbar .go2{background:var(--cream);color:var(--red);min-height:48px;border-radius:16px;padding:0 14px;display:flex;align-items:center;font-family:var(--f-caps);font-size:21px;text-transform:uppercase}
.meter{height:6px;border-radius:3px;background:#ffffff30;overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;background:var(--cream)}
.line{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px dashed var(--line)}
.line .l{flex:1;min-width:0}
.line h4{font-size:13.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase}
.line p{font-size:12px;color:var(--soft)}
.line .pr{font-family:var(--f-caps);font-size:22px;min-width:56px;text-align:right}
.tot .kv{border:none;padding:4px 0}
.tot .big{border-top:2px solid var(--cream);margin-top:6px;padding-top:10px}
.tot .big span:last-child{font-family:var(--f-caps);font-size:34px;font-weight:400}
.empty{text-align:center;padding:40px 22px;color:var(--soft);font-size:14px;line-height:1.5}
.tag{display:inline-block;background:#ffd36a;color:#4a3500;font-size:10px;font-weight:600;border-radius:6px;padding:2px 6px;vertical-align:middle}

/* MENU */
.mtop .dom{min-height:44px;border-radius:22px;background:var(--cream);color:var(--green);font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;padding:0 12px;flex:none}
.band{margin:16px 0 6px;background:var(--cream);padding:16px 22px 14px 88px;transform:rotate(-3deg) scale(1.08);position:relative;min-height:96px;display:flex;align-items:center}
.band .q{font-size:42px;color:var(--green);position:absolute;left:26px;top:50%;transform:translateY(-40%);z-index:2}
.band .eg{font-size:clamp(46px,15vw,64px);color:var(--red)}
.mnote{margin:10px 22px 0;font-family:var(--f-script);font-size:20px;color:var(--soft);line-height:1.2}
.info{display:flex;align-items:center;gap:8px;margin:6px 22px 0;font-size:12.5px;color:var(--soft);min-height:48px}
.info i{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--soft);display:grid;place-items:center;font-style:normal;font-weight:600;font-size:12px}
.item{display:flex;padding:10px 22px;border-bottom:1px dashed var(--line);gap:8px}
.item .l{flex:1}
.item .pr{font-family:var(--f-caps);font-size:22px;color:#fff;background:var(--red);min-height:36px;min-width:40px;padding:0 10px;border-radius:18px;display:grid;place-items:center;line-height:1;align-self:flex-start;white-space:nowrap}
.sala{font-size:11px;color:#ffd9a8;margin-left:4px}

/* bottom sheet */
.dim{position:fixed;inset:0;background:#0009;z-index:40;animation:fade .2s}
.sheet{position:fixed;left:50%;transform:translateX(-50%);width:min(480px,100%);bottom:0;background:var(--cream);color:var(--ink);border-radius:26px 26px 0 0;padding:12px 22px calc(22px + var(--safe-b));z-index:41;max-height:88dvh;overflow:auto;animation:up .25s}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:#0003;margin:0 auto 10px}
.sheet h3{font-family:var(--f-caps);font-size:28px;color:var(--red);font-weight:400;text-transform:uppercase}
.sheet .sd{font-size:13px;color:#0009;margin-top:2px}
.sheet .opt{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;border-bottom:1px solid #0000000f;font-size:14.5px;width:100%;text-align:left}
.sheet .opt .rb{width:24px;height:24px;border-radius:50%;border:2px solid var(--green);flex:none;display:grid;place-items:center}
.sheet .opt.on .rb:after{content:"";width:12px;height:12px;border-radius:50%;background:var(--green)}
.sheet .opt .cb{border-radius:6px}
.sheet .opt.on .cb{background:var(--green)}
.sheet .opt.on .cb:after{content:"✓";color:#fff;font-size:15px;width:auto;height:auto;background:none}
.sheet .opt small{color:#0008;font-size:12.5px}
.sheet .lab{color:var(--green)}
.sheet .field{background:#fff8;border-color:#0002;color:var(--ink)}
.sheet .field textarea,.sheet .field input{color:var(--ink)}
.sheet .field ::placeholder{color:#0007}
.sheet .warn{font-size:12px;background:#fff7;border-radius:12px;padding:10px 12px;margin-top:12px;line-height:1.4}
.al-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;margin-top:10px;font-size:12.5px}
.al-grid div{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #0000000f}
.al-grid b{font-family:var(--f-caps);font-size:18px;color:var(--green);width:22px;font-weight:400;flex:none}
.legend{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:12.5px;color:var(--green);font-weight:500}
.infolist{margin-top:12px;font-size:12.5px;line-height:1.45;padding-left:18px;color:#000c}
.toast{position:fixed;left:50%;transform:translateX(-50%);top:calc(70px + env(safe-area-inset-top,0px));background:var(--cream);color:var(--green);font-weight:600;font-size:13px;padding:10px 16px;border-radius:20px;z-index:60;box-shadow:0 6px 16px #0004;animation:fade .2s}
.preview{white-space:pre-line;background:#fff;color:#1d1d1d;border-radius:16px;padding:14px;font-size:13px;line-height:1.5;margin-top:12px}
.ph-box{margin:14px 22px;border:2px dashed #ffffff55;border-radius:18px;padding:18px;text-align:center;font-size:13px;color:#ffffffd0;line-height:1.5}
.ph-box b{display:block;font-family:var(--f-caps);font-size:24px;color:var(--cream);font-weight:400;margin-bottom:4px;text-transform:uppercase}
@keyframes up{from{transform:translate(-50%,40px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}

.head .eg,.head .q,.head .n{position:relative;z-index:3}
.fatto-star{right:-50px;top:250px}

.band2{flex-direction:column;align-items:flex-start;padding:14px 22px 12px 34px;min-height:0}
.band2 .q{position:static;transform:rotate(-4deg);transform-origin:left bottom;font-size:30px;margin:0 0 6px 4px;position:relative;z-index:2}
.band2 .eg{font-size:clamp(96px,32vw,124px)}
.band2{padding:12px 22px 10px 30px!important}

/* titolo come le pagine del menu stampato: script verde sovrapposto (multiply) al maiuscolo rosso, inclinato */
.otitle{background:#DCF0B8;padding:34px 22px 30px;margin-top:8px;overflow:hidden}
.ot{transform:rotate(-6deg);transform-origin:left bottom}
.ot .l1,.ot .l2{display:flex;align-items:flex-end;position:relative}
.ot .k{font-family:var(--f-caps);font-weight:400;color:#E2361B;font-size:clamp(78px,26vw,104px);line-height:.82;transform:skewX(-8deg);display:inline-block;letter-spacing:.5px}
.ot .q{color:#1A7A2C;mix-blend-mode:multiply;position:relative;z-index:2;line-height:1}
.ot .l1 .q{font-size:clamp(64px,21vw,84px);margin-right:-22px;margin-bottom:6px}
.ot .l2{padding-left:46px;margin-top:2px}
.ot .l2 .q{font-size:clamp(36px,12vw,48px);margin-right:-14px;margin-bottom:22px}
.otitle{padding:40px 22px 14px}
.ot .l2{padding-left:18px}
.ot .l2 .k{font-size:clamp(62px,20.5vw,80px)}
.ot .l2 .q{font-size:clamp(32px,10.5vw,42px);margin-right:-10px;margin-bottom:16px}

/* voci del footer nel font dei titoli, come il resto della home */
.foot a{font-family:var(--f-caps);font-size:19px;font-weight:400;text-transform:uppercase;letter-spacing:.3px;padding-top:2px}

/* ---- icone Zorba (js/icons.js) ---- */
.zi{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:-.25em}
.field .zi,.kv .zi,.hint .zi,.foot .zi{color:var(--soft)}
.note .zi{color:var(--red)}
.cta .zi,.go .zi,.go2 .zi{width:1em;height:1em;vertical-align:-.12em}
.step .lb .zi{width:26px;height:26px;color:var(--soft)}
.cartbar .ic .zi{width:28px;height:28px}
.mode button .zi{width:24px;height:24px}
.prod h4 .zi,.item h4 .zi{width:15px;height:15px;color:#9fd36b;vertical-align:-.15em}
.mtop .dom .zi{width:18px;height:18px}
.legend .zi{width:18px;height:18px}
.sheet .zi{color:var(--green)}
.pbtn i .zi{width:36px;height:36px}

.foot a{display:flex;align-items:center;justify-content:center;gap:6px}
.foot a .zi{width:18px;height:18px}

/* 17/10/2026 – corsivo sovrapposto come nel menu stampato, ma con il "box" allargato:
   il fusione multiply crea un livello grande quanto il box e su alcuni telefoni
   tagliava le code delle lettere (es. la "e" di "Le"). Padding + margini negativi = stessa posizione. */
.ot .q{padding:.18em .3em .22em .3em;margin-left:-.3em;margin-top:-.18em;margin-bottom:-.22em}
.ot .l1 .q{margin-right:-.6em!important}
.ot .l2 .q{margin-right:-.44em!important}