/* MANIFESTO · modulo ORDINE · v0.42 — pelle del menu, del piatto, del carrello e della conferma.
   Token del viewer (viewer.css): --oro, --oro-ink, --luce, --muto, --filo, --vetro-chiaro, --ease, --f-ui, --f-display.
   Un solo pulsante d'oro per schermata (.or-oro); bersagli ≥ 44 px; niente MAIUSCOLE spaziate. */

/* foglio a tutta altezza mentre si ordina: fondo pieno, le foto si leggono */
#sheet.or-pieno{ height:96vh; height:96dvh; max-height:none; background:#0A0E18; backdrop-filter:none; -webkit-backdrop-filter:none; }
#sheet.or-pieno .sh-body{ flex:1; }
.sh-body.or-corpo{ padding:0 18px 18px; overscroll-behavior:contain; }
#sheet.con-ind .sh-body.or-corpo{ padding-top:0; }
#sheet .sh-body.or-corpo > :first-child{ margin-right:0; }
#sheet .sh-body.or-corpo > .or-hero, #sheet .sh-body.or-corpo > .or-foto-g{ margin:0 -18px; }
#sheet.or-pieno .sh-top{ z-index:6; } #sheet.or-pieno .grab{ display:none; }
#sheet.or-pieno .sh-foot{ padding-top:10px; background:linear-gradient(180deg,rgba(10,14,24,0),#0A0E18 28%); position:relative; z-index:2; }
#sheet .or-corpo h2{ margin:0; }

/* ── copertina e titolo ── */
.or-hero{ margin:0 -18px; height:184px; position:relative; overflow:hidden; background:linear-gradient(135deg,#1B2236,#0E1322); }
.or-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.or-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,14,24,.35) 0%,rgba(10,14,24,0) 35%,rgba(10,14,24,.2) 70%,#0A0E18 100%); }
.or-hero.or-sk{ animation:orSk 1.2s ease-in-out infinite alternate; } @keyframes orSk{ from{ opacity:.55; } to{ opacity:1; } }
.or-hero.senza{ height:72px; }
.or-tit{ position:relative; margin-top:-30px; z-index:1; }
#sheet .or-tit h2{ font:900 30px/1.05 var(--f-display); letter-spacing:-.015em; }
.or-info{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:9px 0 4px; color:var(--muto); font:600 14px/1.3 var(--f-ui); }
.or-pill{ display:inline-flex; align-items:center; padding:5px 10px; border-radius:99px; background:rgba(255,244,214,.1); color:var(--luce); box-shadow:inset 0 0 0 1px rgba(255,244,214,.18); font:700 13px var(--f-ui); }
.or-pill b{ font-weight:800; }
.or-sk-righe{ margin-top:20px; }

/* ── il solito ── */
.or-solito{ display:flex; align-items:center; gap:12px; width:100%; margin:14px 0 2px; padding:10px 14px 10px 10px; border:0; border-radius:18px; text-align:left; color:#fff; font:inherit;
  background:linear-gradient(100deg,rgba(201,153,26,.16),rgba(255,255,255,.05)); box-shadow:inset 0 0 0 1px rgba(201,153,26,.45); min-height:64px; }
.or-sol-f{ width:46px; height:46px; border-radius:12px; overflow:hidden; flex:none; background:#1B2236; } .or-sol-f img{ width:100%; height:100%; object-fit:cover; display:block; }
.or-sol-t{ flex:1; min-width:0; display:flex; flex-direction:column; } .or-sol-t b{ font:800 15px var(--f-ui); } .or-sol-t small{ color:var(--muto); font:600 13px/1.3 var(--f-ui); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.or-solito em{ font-style:normal; font:800 14px var(--f-ui); color:#fff; padding:9px 13px; border-radius:99px; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px var(--filo); }

/* ── barra delle categorie (si ancora in alto, segue lo scorrimento) ── */
.or-barra{ position:sticky; top:0; z-index:3; margin:10px -18px 0; padding:8px 0; background:#0A0E18; transition:padding .2s var(--ease), box-shadow .2s; }
.or-barra.fissa{ padding:7px 52px 9px; box-shadow:0 10px 24px -14px rgba(0,0,0,.9), 0 1px 0 var(--filo); }
.or-chips{ display:flex; gap:8px; overflow-x:auto; padding:0 18px; scrollbar-width:none; -webkit-overflow-scrolling:touch; -webkit-mask:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent); mask:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent); } .or-chips::-webkit-scrollbar{ display:none; }
.or-barra.fissa .or-chips{ padding:0 4px; }
.or-chip{ flex:none; border:0; min-height:40px; padding:0 16px; border-radius:99px; background:rgba(255,255,255,.07); color:var(--muto); font:700 14px var(--f-ui); box-shadow:inset 0 0 0 1px var(--filo); transition:background .2s,color .2s; position:relative; }
.or-chip::after{ content:""; position:absolute; inset:-3px 0; } /* bersaglio 46 px */
.or-chip.on{ background:#fff; color:#0A0E18; box-shadow:none; }

/* ── sezioni e piatti ── */
.or-sez{ padding-top:6px; } .or-sez h3{ font:900 22px/1.1 var(--f-display); letter-spacing:-.01em; margin:22px 0 4px; }
.or-voce{ display:flex; gap:14px; align-items:stretch; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.07); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s; }
.or-voce:active{ background:rgba(255,255,255,.03); }
.or-v-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; padding-top:2px; }
.or-v-t b{ font:800 16px/1.25 var(--f-ui); color:#fff; }
.or-v-t small{ color:var(--muto); font:500 13.5px/1.4 var(--f-ui); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.or-v-t em{ font-style:normal; font:800 15px var(--f-ui); color:#fff; padding-top:6px; }
.or-pop{ align-self:flex-start; font-style:normal; font:700 11px var(--f-ui); color:var(--luce); background:rgba(255,244,214,.1); padding:3px 8px; border-radius:99px; }
.or-v-f{ position:relative; width:112px; height:112px; flex:none; border-radius:18px; background:#151B2C; }
.or-v-f img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:18px; }
.or-voce.senza .or-v-f{ width:52px; height:auto; background:none; }
.or-voce.senza .or-v-f .or-piu{ position:static; margin-top:auto; } .or-voce.senza .or-v-f{ display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; }
.or-v-f.senza{ background:linear-gradient(135deg,#1B2236,#10162A); }
.or-q{ position:absolute; left:8px; top:8px; min-width:26px; height:26px; padding:0 7px; border-radius:99px; background:var(--oro); color:var(--oro-ink); font:800 13px/26px var(--f-ui); text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.35); }
.or-q[hidden]{ display:none; }
.or-voce.in .or-v-f img{ box-shadow:0 0 0 2px var(--oro); }
.or-piu{ position:absolute; right:7px; bottom:7px; width:44px; height:44px; border:0; border-radius:50%; background:#fff; color:#0A0E18; display:grid; place-items:center; box-shadow:0 6px 16px rgba(0,0,0,.45); transition:transform .15s var(--ease); }
.or-piu svg{ width:22px; height:22px; } .or-piu:active{ transform:scale(.88); }
.or-piu.mini{ position:static; width:44px; height:44px; } .or-piu.fatto{ background:var(--luce); }
.or-combo{ position:relative; display:flex; gap:12px; align-items:center; padding:16px 60px 16px 16px; border-radius:18px; background:linear-gradient(120deg,rgba(201,153,26,.18),rgba(255,255,255,.04)); box-shadow:inset 0 0 0 1px rgba(201,153,26,.4); margin-top:8px; }
.or-combo.on{ box-shadow:inset 0 0 0 2px var(--oro); }
.or-cb-t{ display:flex; flex-direction:column; gap:2px; } .or-cb-t b{ font:800 16px var(--f-ui); } .or-cb-t small{ color:var(--muto); font:600 13px var(--f-ui); } .or-cb-t em{ font-style:normal; font:800 15px var(--f-ui); margin-top:4px; }
.or-combo .or-piu{ right:12px; bottom:auto; top:50%; transform:translateY(-50%); } .or-combo .or-piu:active{ transform:translateY(-50%) scale(.88); }
.or-piede{ color:rgba(184,191,208,.7); font:600 12px var(--f-ui); text-align:center; margin:22px 0 8px; }

/* ── barra d'oro: «Vedi ordine · 2 · 14,50 EUR» (l'unico pulsante d'oro) ── */
.or-oro{ flex:1 1 100%; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:58px; padding:0 18px; border:0; border-radius:18px; background:var(--oro); color:var(--oro-ink); font:800 17px var(--f-ui); box-shadow:0 12px 34px rgba(201,153,26,.32); text-decoration:none; transition:transform .15s var(--ease), opacity .2s; }
.or-oro:active{ transform:scale(.98); } .or-oro:disabled{ opacity:.6; }
.or-oro.or-va, .or-oro.or-solo{ justify-content:center; }
.or-vedi .or-n{ min-width:30px; height:30px; padding:0 8px; border-radius:99px; background:rgba(26,19,0,.16); font:800 15px/30px var(--f-ui); text-align:center; }
.or-vedi .or-l{ flex:1; text-align:left; } .or-vedi .or-tot{ font-weight:800; }
.or-vedi.entra{ animation:orSu .28s var(--ease) both; } .or-vedi.via{ opacity:0; transform:translateY(10px); }
.or-vedi.salta .or-n{ animation:orSalta .35s var(--ease); }
@keyframes orSu{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes orSalta{ 0%{ transform:scale(1); } 40%{ transform:scale(1.35); background:#fff; } 100%{ transform:scale(1); } }
.or-volo{ position:fixed; z-index:80; border-radius:50%; background:#fff center/cover no-repeat; box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 0 3px #fff; pointer-events:none; will-change:transform; }

/* ── piatto ── */
.or-foto-g{ margin:0 -18px; height:300px; background:#151B2C; position:relative; overflow:hidden; }
.or-foto-g img{ width:100%; height:100%; object-fit:cover; display:block; }
.or-foto-g::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:60px; background:linear-gradient(180deg,transparent,#0A0E18); }
.or-foto-g.senza{ height:64px; }
.or-p-t{ padding:6px 0 4px; } #sheet .or-p-t h2{ font:900 28px/1.08 var(--f-display); }
.or-p-d{ color:var(--muto); font:500 15px/1.45 var(--f-ui); margin:6px 0 0; } .or-p-p{ font:800 17px var(--f-ui); margin:8px 0 0; }
.or-gr{ border:0; margin:20px 0 0; padding:0; min-width:0; }
.or-gr legend{ display:flex; align-items:baseline; justify-content:space-between; width:100%; padding:0; margin-bottom:6px; } .or-gr legend b{ font:800 17px var(--f-ui); } .or-gr legend small{ color:var(--muto); font:700 12px var(--f-ui); background:rgba(255,255,255,.07); padding:3px 9px; border-radius:99px; }
.or-op{ display:flex; align-items:center; gap:12px; min-height:52px; padding:4px 2px; border-bottom:1px solid rgba(255,255,255,.07); cursor:pointer; }
.or-op input{ position:absolute; opacity:0; pointer-events:none; }
.or-rd{ width:24px; height:24px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); transition:box-shadow .15s; }
.or-op input:checked + .or-rd{ box-shadow:inset 0 0 0 7px #fff; }
.or-ck{ width:24px; height:24px; border-radius:7px; flex:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); display:grid; place-items:center; color:transparent; transition:background .15s; } .or-ck svg{ width:16px; height:16px; }
.or-op input:checked + .or-ck{ background:#fff; color:#0A0E18; box-shadow:none; }
.or-op input:focus-visible + span{ outline:2px solid var(--luce); outline-offset:2px; }
.or-op-n{ flex:1; font:600 15px var(--f-ui); } .or-op-p{ color:var(--muto); font:700 14px var(--f-ui); }
.or-nota{ display:block; margin:20px 0 0; } .or-nota b{ display:block; font:800 17px var(--f-ui); margin-bottom:8px; }
.or-nota textarea, .or-campo input{ width:100%; box-sizing:border-box; border:0; border-radius:14px; padding:13px 14px; background:rgba(255,255,255,.07); color:#fff; font:500 16px/1.35 var(--f-ui); box-shadow:inset 0 0 0 1px var(--filo); resize:none; }
.or-nota textarea:focus, .or-campo input:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--luce); }
.or-nota textarea::placeholder, .or-campo input::placeholder{ color:rgba(184,191,208,.6); }
.or-stepper{ display:flex; align-items:center; gap:4px; flex:none; border-radius:99px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px var(--filo); padding:3px; }
.or-stepper button{ width:44px; height:44px; border:0; border-radius:50%; background:none; color:#fff; display:grid; place-items:center; } .or-stepper button svg{ width:18px; height:18px; } .or-stepper button:disabled{ opacity:.3; }
.or-stepper b{ min-width:20px; text-align:center; font:800 17px var(--f-ui); }
.sh-foot .or-stepper + .or-oro{ flex:1 1 auto; }
.or-agg span:first-child{ flex:1; text-align:left; }

/* ── con questo prendono spesso ── */
.or-cons{ margin:24px 0 4px; } .or-cons h4, .or-h4{ font:800 17px var(--f-ui); margin:0 0 10px; }
.or-cons-l{ display:flex; gap:10px; overflow-x:auto; margin:0 -18px; padding:0 18px 4px; scrollbar-width:none; } .or-cons-l::-webkit-scrollbar{ display:none; }
.or-cons-c{ position:relative; flex:none; width:128px; display:flex; flex-direction:column; gap:2px; }
.or-cons-f{ width:128px; height:96px; border-radius:14px; overflow:hidden; background:#151B2C; margin-bottom:6px; } .or-cons-f img{ width:100%; height:100%; object-fit:cover; display:block; }
.or-cons-c b{ font:700 14px/1.25 var(--f-ui); padding-right:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .or-cons-c em{ font-style:normal; color:var(--muto); font:700 13px var(--f-ui); }
.or-cons-c .or-piu{ position:absolute; right:6px; top:52px; }

/* ── carrello ── */
.or-c-t{ padding-top:56px; } #sheet .or-c-t h2{ font:900 30px/1.05 var(--f-display); } .or-c-t .h2s{ margin:4px 0 6px; }
.or-righe{ margin-top:6px; }
.or-rg{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.or-stepper.pic{ padding:0; } .or-stepper.pic button{ width:44px; height:44px; } .or-stepper.pic b{ font-size:15px; min-width:14px; }
.or-rg-t{ flex:1; min-width:0; display:flex; flex-direction:column; } .or-rg-t b{ font:700 15px/1.3 var(--f-ui); } .or-rg-t small{ color:var(--muto); font:600 13px/1.35 var(--f-ui); } .or-rg-n{ font-style:italic; }
.or-rg em{ font-style:normal; font:800 15px var(--f-ui); white-space:nowrap; }
.or-h4{ margin-top:26px; }
.or-seg{ display:flex; gap:6px; padding:4px; border-radius:18px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--filo); }
.or-seg button{ flex:1; min-height:56px; border:0; border-radius:14px; background:none; color:var(--muto); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; transition:background .2s,color .2s; }
.or-seg button b{ font:800 15px var(--f-ui); } .or-seg button small{ font:600 12px var(--f-ui); opacity:.85; }
.or-seg button.on{ background:#fff; color:#0A0E18; box-shadow:0 4px 14px rgba(0,0,0,.3); }
.or-quando{ margin:14px 0 8px; } .or-ora{ display:flex; flex-direction:column; } .or-ora b{ font:800 18px var(--f-ui); color:var(--luce); } .or-ora small{ color:var(--muto); font:600 13px var(--f-ui); }
.or-orari{ display:flex; gap:8px; overflow-x:auto; margin:0 -18px; padding:2px 18px 4px; scrollbar-width:none; } .or-orari::-webkit-scrollbar{ display:none; }
.or-campo{ display:block; margin:14px 0 0; } .or-campo b{ display:block; font:700 14px var(--f-ui); color:var(--muto); margin-bottom:6px; }
.or-nota-p{ color:var(--muto); font:600 13px/1.4 var(--f-ui); margin:8px 0 0; }
.or-paga{ display:flex; flex-direction:column; gap:8px; }
.or-pg{ display:flex; align-items:center; gap:14px; width:100%; min-height:64px; padding:12px 14px; border:0; border-radius:16px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--filo); color:#fff; text-align:left; font:inherit; }
.or-pg > span:last-child{ display:flex; flex-direction:column; } .or-pg b{ font:800 15px var(--f-ui); } .or-pg small{ color:var(--muto); font:600 13px/1.35 var(--f-ui); }
.or-pg.on{ box-shadow:inset 0 0 0 2px #fff; background:rgba(255,255,255,.08); } .or-pg.on .or-rd{ box-shadow:inset 0 0 0 7px #fff; }
.or-tot-box{ margin:22px 0 4px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--filo); }
.or-tot-box div{ display:flex; justify-content:space-between; color:var(--muto); font:600 14px/2 var(--f-ui); }
.or-tot-box .or-tot-t{ color:#fff; font:800 18px/2 var(--f-ui); border-top:1px solid rgba(255,255,255,.08); margin-top:4px; padding-top:4px; }
.or-vuoto{ padding:90px 10px 20px; text-align:center; } .or-vuoto b{ font:900 24px var(--f-display); } .or-vuoto p{ color:var(--muto); }
.or-vetro-b{ flex:1; min-height:52px; border:0; border-radius:99px; background:rgba(255,255,255,.08); color:#fff; font:700 16px var(--f-ui); box-shadow:inset 0 0 0 1px var(--filo); }
.or-fr{ display:inline-block; margin-bottom:6px; font:800 12px var(--f-ui); color:var(--oro); }

/* ── conferma con stato dal vivo ── */
.or-st{ padding-top:56px; }
.or-st-k{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:99px; background:rgba(255,244,214,.1); color:var(--luce); font:700 13px var(--f-ui); }
.or-st-k i{ width:8px; height:8px; border-radius:50%; background:var(--luce); box-shadow:0 0 8px rgba(255,244,214,.9); }
#sheet .or-st h2{ font:900 30px/1.08 var(--f-display); margin:12px 0 0; } .or-st .h2s{ margin:6px 0 0; }
.or-passi{ display:flex; gap:6px; margin:18px 0 6px; }
.or-passo{ flex:1; display:flex; flex-direction:column; gap:8px; }
.or-bar{ height:6px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; } .or-bar i{ display:block; height:100%; background:var(--luce); transform-origin:left; transform:scaleX(0); transition:transform .8s var(--ease); }
.or-passo b{ font:700 12px var(--f-ui); color:rgba(184,191,208,.7); } .or-passo.fatto b, .or-passo.ora b{ color:#fff; }
.or-passo.ora .or-bar i{ box-shadow:0 0 10px rgba(255,244,214,.8); }
.or-st[data-stato="pronto"] .or-bar i{ background:var(--oro); } .or-st[data-stato="pronto"] h2{ color:var(--luce); }
.or-big{ margin-top:18px; } .or-big .tempo{ font-weight:700; }
.or-riep{ padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--filo); } .or-riep > b{ display:block; font:800 15px var(--f-ui); margin-bottom:6px; }
.or-riep-r{ font:600 14px/1.5 var(--f-ui); color:#E6E9F2; } .or-riep-t{ display:flex; justify-content:space-between; font:800 16px/2 var(--f-ui); border-top:1px solid rgba(255,255,255,.08); margin-top:8px; padding-top:4px; } .or-riep small{ color:var(--muto); font:600 13px var(--f-ui); }
.or-zaino{ text-align:center; margin:14px 0 4px; }

@media (prefers-reduced-motion: reduce){ .or-vedi.entra, .or-vedi.salta .or-n, .or-hero.or-sk{ animation:none; } .or-bar i{ transition:none; } }
@media (min-width:560px){ #sheet.or-pieno{ left:50%; right:auto; width:520px; margin-left:-260px; } }