/* Asportissimo — pagina d'ordine dei clienti (<slug>.asportissimo.com). Si carica dopo kit.css.
   Telefono prima di tutto (390 px), poi tablet e computer (1440 px). Pulsanti alti almeno 44 px, campi a 16 px.
   Colore delle azioni: --accento (arancio di casa o il colore del ristorante, se regge il testo bianco). */

.pagina-ordina { background: var(--fondo); min-height: 100vh; }
.pagina-ordina main { display: block; }
.con-carrello .piede { padding-bottom: calc(110px + var(--sicuro-basso)); }
/* La barra del carrello non copre mai il piatto che si porta in vista (tastiera, tasto «vai a», categorie) */
html { scroll-padding-top: 72px; }
html.con-carrello { scroll-padding-bottom: calc(104px + var(--sicuro-basso)); }

/* ---------- Testata del ristorante (come un'app: foto o luci sfumate, logo, nome, azioni rapide) ---------- */
.pagina-ordina { --fondo: #F1F2F6; --linea: #E8EAEF; }
.ristorante { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #0E1116; }
.ristorante-sfondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ristorante-sfondo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: avvicina-copertina 18s ease-out both; }
@keyframes avvicina-copertina { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.ristorante-sfondo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 16, .42) 0%, rgba(10, 12, 16, .18) 28%, rgba(10, 12, 16, .55) 62%, rgba(10, 12, 16, .9) 100%);
}
/* Senza copertina: luci sfumate del colore del ristorante che si muovono piano */
.ristorante:not(.con-copertina) .ristorante-sfondo { background: radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--accento) 55%, #0E1116) 0%, #0E1116 70%); }
.ristorante:not(.con-copertina) .ristorante-sfondo::after { background: linear-gradient(180deg, rgba(14, 17, 22, 0) 40%, rgba(14, 17, 22, .55) 100%); }
.aurora { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .75; will-change: transform; }
.aurora-1 { width: 70vw; height: 70vw; max-width: 720px; max-height: 720px; left: -18%; top: -30%; background: var(--accento); animation: fluttua 16s ease-in-out infinite alternate; }
.aurora-2 { width: 55vw; height: 55vw; max-width: 560px; max-height: 560px; right: -14%; top: -10%; background: var(--arancio-2); opacity: .55; animation: fluttua 20s ease-in-out -6s infinite alternate-reverse; }
.aurora-3 { width: 60vw; height: 60vw; max-width: 600px; max-height: 600px; left: 30%; bottom: -55%; background: #7C5CFF; opacity: .35; animation: fluttua 24s ease-in-out -12s infinite alternate; }
@keyframes fluttua { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6%, 8%, 0) scale(1.15); } }

.ristorante-barra {
  position: relative; z-index: 2; display: flex; justify-content: flex-end; gap: 8px;
  max-width: 1112px; margin: 0 auto; padding: calc(12px + var(--sicuro-alto)) 16px 0;
}
.pillola-barra {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; min-width: 42px; padding: 0 14px;
  border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; text-decoration: none; font-weight: 750; font-size: 15px;
  border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  transition: background-color .2s ease;
}
.pillola-barra:hover { background: rgba(255, 255, 255, .26); }

.ristorante-dentro { position: relative; z-index: 2; max-width: 1112px; margin: 0 auto; padding: 46px 20px 96px; }
.ristorante-logo {
  display: block; width: 84px; height: 84px; border-radius: 26px; object-fit: cover; background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 14px 34px rgba(0, 0, 0, .35);
}
.ristorante-iniziale { display: grid; place-items: center; font-size: 38px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--arancio-2), var(--accento)); }
.ristorante-nome { margin-top: 18px; color: #fff; font-size: clamp(32px, 6vw, 52px); line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.ristorante-descrizione { margin-top: 10px; max-width: 640px; color: rgba(255, 255, 255, .86); font-size: 16.5px; line-height: 1.5; }
.ristorante-indirizzo { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: rgba(255, 255, 255, .74); font-size: 14.5px; font-weight: 600; }
.ristorante-indirizzo svg { flex: none; }

.azioni-rapide { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 24px; }
.azione-rapida { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; min-width: 64px; color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 700; }
.azione-cerchio {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  transition: transform .15s ease, background-color .2s ease;
}
.azione-rapida:hover .azione-cerchio { background: rgba(255, 255, 255, .28); }
.azione-rapida:active .azione-cerchio { transform: scale(.94); }
.azione-nome { white-space: nowrap; }

/* Scheda dello stato degli ordini, sopra la foto */
.stato-scheda {
  position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  max-width: 1080px; margin: -56px 16px 0; padding: 6px; border-radius: 24px; background: var(--carta);
  box-shadow: 0 1px 2px rgba(14, 17, 22, .06), 0 18px 46px rgba(14, 17, 22, .14);
}
@media (min-width: 1112px) { .stato-scheda { margin: -56px auto 0; } }
.stato-scheda > * { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 0; }
.stato-scheda > * + * { border-left: 1px solid var(--linea); }
.stato-testo { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.stato-testo b { font-size: 15.5px; font-weight: 800; color: var(--inchiostro); }
.stato-testo small { margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--grigio); }
.stato-punto { flex: none; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.stato-ordini { color: var(--grigio-2); }
.stato-ordini.aperto { color: var(--verde); }
.stato-ordini.aperto .stato-punto { animation: pulsa 2s infinite; }
.stato-ordini.chiuso { color: var(--rosso); }
.stato-ordini.pausa { color: var(--giallo); }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(14, 159, 94, .45); } 70% { box-shadow: 0 0 0 10px rgba(14, 159, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(14, 159, 94, 0); } }
.stato-paghi svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--verde-tenue); color: var(--verde-testo); }
@media (max-width: 520px) {
  .stato-scheda > * { gap: 10px; padding: 11px 12px; }
  .stato-testo b { font-size: 14.5px; }
  .stato-testo small { font-size: 12.5px; }
  .stato-paghi svg { width: 32px; height: 32px; padding: 7px; }
}
@media (max-width: 380px) {
  .stato-scheda { grid-template-columns: minmax(0, 1fr); }
  .stato-scheda > * + * { border-left: 0; border-top: 1px solid var(--linea); }
}
@media (min-width: 900px) {
  .con-copertina .ristorante-sfondo::after { background: linear-gradient(90deg, rgba(10, 12, 16, .74) 0%, rgba(10, 12, 16, .4) 42%, rgba(10, 12, 16, 0) 72%), linear-gradient(180deg, rgba(10, 12, 16, .45) 0%, rgba(10, 12, 16, .1) 30%, rgba(10, 12, 16, .45) 70%, rgba(10, 12, 16, .88) 100%); }
  .ristorante-dentro { padding: 70px 24px 110px; }
  .ristorante-logo { width: 96px; height: 96px; border-radius: 30px; }
  .stato-scheda { margin-top: -64px; }
  .stato-scheda > * { padding: 16px 20px; }
}

/* Proposta dell'altra lingua (browser in tedesco su pagina italiana, e il contrario) */
.proposta-lingua { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: #141826; color: #fff; font-size: 14.5px; font-weight: 600; }
.proposta-lingua a { color: #FFD3C7; font-weight: 800; }
.proposta-chiudi { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }

/* Ultimo ordine fatto da questo telefono */
.ultimo-ordine-posto { max-width: 1112px; margin: 14px auto 0; }
.ultimo-ordine {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 22px; text-decoration: none;
  background: #141826; color: #fff; box-shadow: 0 12px 30px rgba(14, 17, 22, .18);
}
.ultimo-ordine-n { flex: none; min-width: 46px; height: 46px; padding: 0 8px; border-radius: 15px; background: var(--accento); display: grid; place-items: center; font-size: 22px; font-weight: 800; }
.ultimo-ordine-testo { display: flex; flex-direction: column; line-height: 1.3; }
.ultimo-ordine-testo small { color: rgba(255,255,255,.75); font-size: 14px; font-weight: 600; }

/* ---------- Categorie (fila che scorre, ferma in cima, come un selettore a segmenti) ---------- */
.categorie {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 20; margin-top: 18px;
  background: color-mix(in srgb, var(--fondo) 86%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.categorie-scorri { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 10px 16px; max-width: 1112px; margin: 0 auto; scrollbar-width: none; }
.categorie-scorri::-webkit-scrollbar { display: none; }
.categoria {
  flex: none; display: inline-flex; align-items: center; min-height: 42px; padding: 0 17px; border-radius: 999px;
  background: rgba(14, 17, 22, .05); color: var(--inchiostro-2); text-decoration: none;
  font-weight: 750; font-size: 15px; white-space: nowrap; transition: background-color .2s ease, color .2s ease, transform .1s ease;
}
.categoria:hover { background: rgba(14, 17, 22, .09); }
.categoria:active { transform: scale(.97); }
.categoria.attiva { background: var(--inchiostro); color: #fff; }

/* ---------- Menu ---------- */
.menu { max-width: 1112px; margin: 0 auto; padding: 4px 16px 28px; }
.sezione-menu { padding-top: 22px; scroll-margin-top: 74px; }
.sezione-menu > h2 { display: flex; align-items: center; gap: 10px; font-size: 24px; letter-spacing: -0.025em; margin: 4px 4px 12px; }
.sezione-conta { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 8px; border-radius: 999px; background: rgba(14, 17, 22, .06); color: var(--grigio); font-size: 13.5px; font-weight: 750; letter-spacing: 0; }

/* Un elenco unico per categoria, come i movimenti di un conto: righe separate da una linea sottile */
.piatti { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--carta); border-radius: 24px; box-shadow: 0 1px 2px rgba(14, 17, 22, .04), 0 8px 24px rgba(14, 17, 22, .06); overflow: hidden; }
.piatto { position: relative; display: flex; gap: 14px; padding: 16px 16px 16px 18px; background: var(--carta); transition: background-color .2s ease, box-shadow .3s ease; }
.piatto + .piatto { border-top: 1px solid var(--linea); }
@media (min-width: 760px) {
  .piatti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piatto { padding: 20px 20px 20px 22px; }
  .piatto:nth-child(2) { border-top: 0; }
  .piatto:nth-child(odd) { border-right: 1px solid var(--linea); }
  .piatto:nth-child(odd):last-child { border-right: 0; }
}
.piatto:has(.passo.attivo) { background: color-mix(in srgb, var(--accento) 5%, #fff); }
.piatto:has(.passo.attivo)::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accento); }
.piatto-testo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.piatto-categoria { font-size: 13px; font-weight: 750; color: var(--accento-testo); }
.piatto-nome { font-size: 17.5px; line-height: 1.28; font-weight: 750; letter-spacing: -0.012em; }
.piatto-descrizione { color: var(--grigio); font-size: 14.5px; line-height: 1.45; }
.piatto-allergeni { color: var(--grigio); font-size: 13px; line-height: 1.4; }
.piatto-allergeni span { font-weight: 750; color: var(--inchiostro-2); }
.piatto-prezzo { margin-top: auto; padding-top: 4px; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.piatto-lato { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 10px; }
.piatto.con-foto .piatto-lato { justify-content: space-between; }
.piatto-foto { width: 104px; height: 104px; border-radius: 20px; object-fit: cover; background: #EEF0F3; }
@media (max-width: 370px) { .piatto-foto { width: 88px; height: 88px; } }
.piatto-spento .piatto-foto { filter: grayscale(.7); opacity: .75; }
.piatto-spento .piatto-nome, .piatto-spento .piatto-prezzo { color: var(--grigio); }

.piatto-segni { display: flex; flex-wrap: wrap; gap: 6px; }
.segno { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 750; line-height: 1.35; background: #EEF0F4; color: var(--inchiostro-2); }
.segno-oggi { background: var(--accento-tenue); color: var(--accento-testo); }
.segno-pochi { background: var(--giallo-tenue); color: #7A4F00; }
.segno-spento { background: #E7E9EE; color: var(--grigio); }
.segno-verde { background: var(--verde-tenue); color: #0B6B40; }
.segno-rosso { background: var(--rosso-tenue); color: #8F1D21; }
.segno-blu { background: var(--blu-tenue); color: #1D3E99; }

/* Pulsanti + e − (si vedono solo quando il JavaScript è partito) */
.passo { display: none; align-items: center; gap: 2px; border-radius: 999px; background: transparent; transition: background-color .2s ease; }
.js .passo { display: inline-flex; }
.passo.attivo { background: var(--accento-tenue); padding: 3px; }
.passo button {
  width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: transform .1s ease, background-color .15s, box-shadow .2s;
}
.passo button:active { transform: scale(.9); }
.passo-piu { background: var(--accento); color: var(--su-accento); box-shadow: 0 6px 16px color-mix(in srgb, var(--accento) 38%, transparent); }
.passo.attivo .passo-piu { box-shadow: none; width: 40px; height: 40px; }
.passo-piu[aria-disabled='true'] { opacity: .4; box-shadow: none; }
.passo-meno { background: #fff; color: var(--accento-testo); width: 40px !important; height: 40px !important; box-shadow: 0 1px 3px rgba(14, 17, 22, .12); }
.passo-n { min-width: 30px; text-align: center; font-weight: 800; font-size: 17px; color: var(--accento-testo); font-variant-numeric: tabular-nums; }

/* ---------- Piatti del giorno: la scheda scura in cima ---------- */
.blocco-oggi {
  position: relative; isolation: isolate; overflow: hidden; margin-top: 22px; padding: 22px 16px 16px; border-radius: 30px; color: #fff;
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--accento) 65%, #0E1116) 0%, #13161C 55%, #0E1116 100%);
  box-shadow: 0 24px 60px rgba(14, 17, 22, .28);
}
.blocco-oggi::before { content: ''; position: absolute; inset: auto -20% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accento) 45%, transparent), transparent); z-index: -1; }
.blocco-oggi-testa { padding: 0 6px 16px; }
.blocco-oggi-data { display: inline-flex; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .92); font-size: 13px; font-weight: 750; }
.blocco-oggi > .blocco-oggi-testa h2, .blocco-oggi h2 { margin: 12px 0 4px; color: #fff; font-size: 28px; letter-spacing: -0.03em; }
.blocco-oggi-sotto { color: rgba(255, 255, 255, .7); font-size: 15px; }
.blocco-oggi .piatti { background: transparent; box-shadow: none; gap: 10px; border-radius: 0; overflow: visible; }
.blocco-oggi .piatto { border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; background: rgba(255, 255, 255, .06); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.blocco-oggi .piatto + .piatto, .blocco-oggi .piatto:nth-child(odd) { border: 1px solid rgba(255, 255, 255, .1); }
.blocco-oggi .piatto-categoria { color: color-mix(in srgb, var(--accento) 40%, #fff); }
.blocco-oggi .piatto-nome { font-size: 19px; color: #fff; }
.blocco-oggi .piatto-descrizione, .blocco-oggi .piatto-allergeni { color: rgba(255, 255, 255, .72); }
.blocco-oggi .piatto-allergeni span { color: rgba(255, 255, 255, .9); }
.blocco-oggi .piatto-prezzo { font-size: 20px; color: #fff; }
.blocco-oggi .segno { background: rgba(255, 255, 255, .12); color: #fff; }
.blocco-oggi .segno-pochi { background: rgba(255, 200, 90, .18); color: #FFD68A; }
.blocco-oggi .passo.attivo { background: rgba(255, 255, 255, .12); }
.blocco-oggi .passo-n { color: #fff; }
.blocco-oggi .piatto:has(.passo.attivo) { background: rgba(255, 255, 255, .1); }
.blocco-oggi .piatto:has(.passo.attivo)::before { display: none; }
.blocco-oggi .piatto-spento .piatto-nome, .blocco-oggi .piatto-spento .piatto-prezzo { color: rgba(255, 255, 255, .55); }
@media (min-width: 760px) { .blocco-oggi { padding: 30px 24px 24px; } .blocco-oggi h2 { font-size: 32px; } }

/* Legenda degli allergeni */
.legenda { margin-top: 30px; padding: 20px 18px; background: var(--carta); border-radius: 24px; box-shadow: 0 1px 2px rgba(14, 17, 22, .04), 0 8px 24px rgba(14, 17, 22, .06); }
.legenda h2 { font-size: 20px; }
.legenda-elenco { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
@media (min-width: 760px) { .legenda-elenco { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.legenda-elenco li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; line-height: 1.3; }
.legenda-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--fondo); font-weight: 800; font-size: 13px; }
.legenda-nota { margin-top: 14px; font-size: 14px; color: var(--grigio); }
.menu-vuoto { text-align: center; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; }

/* ---------- Carrello fisso in basso ---------- */
.carrello { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; padding: 18px 16px calc(12px + var(--sicuro-basso)); pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--fondo) 96%, transparent) 50%, transparent); }
.carrello-btn {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 560px; min-height: 64px; margin: 0 auto; padding: 8px 22px 8px 9px;
  border-radius: 999px; background: linear-gradient(135deg, var(--accento) 0%, var(--accento-scuro) 100%); color: var(--su-accento); text-decoration: none; font-weight: 800;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--accento) 40%, transparent), 0 2px 6px rgba(14,17,22,.12); animation: sale .3s cubic-bezier(.2,.8,.2,1);
}
.carrello-btn:hover { filter: brightness(1.04); }
.carrello-btn.saltella { animation: saltella .34s ease; }
@keyframes saltella { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
.carrello-conta { flex: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 18px; font-variant-numeric: tabular-nums; }
.carrello-testo { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.2; font-size: 17px; }
.carrello-testo small { font-size: 13.5px; font-weight: 650; opacity: .9; }
.carrello-totale { flex: none; font-size: 18px; font-variant-numeric: tabular-nums; }

/* ---------- Piede ---------- */
.piede { max-width: 1112px; margin: 10px auto 0; padding: 22px 16px 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--grigio); font-size: 14.5px; }
.piede-link { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.piede-link a { color: var(--inchiostro-2); font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.piede-link a:hover { text-decoration: underline; }
.piede-marchio { display: inline-flex; align-items: center; gap: 8px; color: var(--grigio); text-decoration: none; }
.piede-marchio .marchio-scritta { font-size: 17px; }
.niente-js { max-width: 560px; margin: 16px auto; padding: 14px 16px; border-radius: 16px; background: var(--giallo-tenue); color: #7A4F00; font-weight: 600; }

/* ---------- Barra delle pagine interne ---------- */
.barra-pagina {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 30;
  background: rgba(244,245,248,.94); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--linea); padding-top: var(--sicuro-alto);
}
.barra-pagina-dentro { max-width: 600px; margin: 0 auto; min-height: 62px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; }
.barra-indietro {
  flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px 0 6px; border-radius: 999px;
  color: var(--inchiostro); text-decoration: none; font-weight: 750; font-size: 15px; background: var(--carta); box-shadow: inset 0 0 0 1.5px var(--linea-2);
}
.barra-indietro span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-pagina-titolo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.2; }
.barra-pagina-nome { font-weight: 800; font-size: 16.5px; }
.barra-pagina-ristorante { font-size: 13px; color: var(--grigio); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cambio-lingua { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--inchiostro); font-weight: 750; }
.cambio-lingua-piccolo { flex: none; min-height: 44px; padding: 0 12px; border-radius: 999px; background: var(--carta); box-shadow: inset 0 0 0 1.5px var(--linea-2); font-size: 14.5px; }
@media (max-width: 420px) {
  .barra-indietro span { display: none; }
  .barra-indietro { padding: 0; width: 44px; justify-content: center; }
  .cambio-lingua-piccolo span { display: none; }
  .cambio-lingua-piccolo { padding: 0; width: 44px; justify-content: center; }
}

.titolo-medio { font-size: 25px; letter-spacing: -0.02em; }
.sezione-titoletto { font-size: 19px; margin-bottom: 12px; }
.link-azione {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accento-testo); font-weight: 750; font-size: 15px; text-decoration: none; text-align: left;
}
.link-azione:hover { text-decoration: underline; }
.pagina-corta { padding-top: 40px; padding-bottom: 40px; }

/* ---------- Pagina dell'ordine ---------- */
.ordine-pagina { padding-top: 16px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 14px; }
#resto-ordine { display: flex; flex-direction: column; gap: 14px; }
#resto-ordine[hidden] { display: none; }
.ordine-righe { padding: 6px 16px 12px; }
.righe-carrello { list-style: none; margin: 0; padding: 0; }
.riga-carrello { padding: 14px 0; border-bottom: 1px solid var(--linea); }
.riga-carrello:last-child { border-bottom: 0; }
.riga-alto { display: flex; align-items: flex-start; gap: 12px; }
.riga-foto { flex: none; width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: #EEF0F3; }
.riga-testo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.riga-nome { font-weight: 800; font-size: 16.5px; line-height: 1.3; }
.riga-unitario { color: var(--grigio); font-size: 14px; }
.riga-prezzo { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 16.5px; }
.riga-basso { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.riga-basso .passo { display: inline-flex; }
.riga-nota { margin-top: 10px; }
.riga-nota-input { min-height: 48px; }
.aggiungi-altro { margin-top: 6px; }
.sezione-ordine h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; margin-bottom: 14px; flex-wrap: wrap; }
.sezione-ordine h2 svg { flex: none; color: var(--accento-scuro); }
.facoltativa { font-size: 13.5px; font-weight: 650; color: var(--grigio); }
.tessere-prima { margin-bottom: 12px; }
.tessera-orario { min-height: 48px; min-width: 76px; justify-content: center; font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; position: relative; }
.tessera-orario small { font-size: 12px; font-weight: 700; }
.tessera-orario.piena { background: #F1F2F5; color: var(--grigio-2); border-style: dashed; cursor: not-allowed; flex-direction: column; gap: 0; line-height: 1.1; }
.tessera-prima { width: 100%; justify-content: flex-start; border-radius: 18px; padding: 12px 16px; min-height: 60px; gap: 12px; }
.tessera-due { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.tessera-due small { font-size: 14px; font-weight: 650; color: var(--grigio); }
.tessera[aria-pressed='true'] .tessera-due small { color: var(--accento-testo); }
.tessera-orario[aria-pressed='true'] { box-shadow: 0 0 0 1px var(--accento) inset; }
.giorno-fasce { font-weight: 800; font-size: 15px; margin: 14px 2px 8px; color: var(--inchiostro-2); }
.nota-fasce { font-size: 14.5px; color: #7A4F00; background: var(--giallo-tenue); padding: 10px 14px; border-radius: 14px; margin-bottom: 12px; }
.altri-orari { margin-top: 10px; }
.dati-cliente .aiuto { margin-top: -2px; }
.suggerimento { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--blu-tenue); color: #1D3E99; font-weight: 650; font-size: 15px; }
.suggerimento[hidden] { display: none; }
.spunta { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15.5px; line-height: 1.45; padding: 4px 0; }
.spunta input { flex: none; width: 26px; height: 26px; margin: 0; accent-color: var(--accento); cursor: pointer; }
.campo.ha-errore .spunta input { outline: 2px solid var(--rosso); outline-offset: 2px; }
.cliente-entrato { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--fondo); }
.cliente-icona { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--accento-tenue); color: var(--accento-scuro); }
.cliente-icona.grande { width: 60px; height: 60px; border-radius: 20px; }
.cliente-nome { font-weight: 800; font-size: 17px; }
.cliente-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 10px; color: var(--grigio); }
.cliente-azioni a { font-weight: 700; }
.ordine-fine { display: flex; flex-direction: column; gap: 12px; }
.totale-riga { font-size: 18px; font-weight: 800; }
.totale-riga strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.paghi-nota { display: flex; gap: 10px; align-items: flex-start; color: var(--grigio); font-size: 14.5px; }
.paghi-nota svg { flex: none; color: var(--verde); margin-top: 2px; }
.errore-conferma { padding: 12px 14px; border-radius: 14px; background: var(--rosso-tenue); color: #8F1D21; font-weight: 650; font-size: 15px; }
.errore-conferma[hidden] { display: none; }
.vuoto-azione { margin-top: 14px; }
.ordine-righe .vuoto h2 { color: var(--inchiostro); font-size: 21px; margin-bottom: 4px; }

/* ---------- Ordine fatto ---------- */
.conferma-pagina { padding-top: 18px; padding-bottom: 20px; display: flex; flex-direction: column; gap: 14px; }
.conferma-testa { text-align: center; padding: 22px 16px 8px; }
.conferma-testa h1 { font-size: 26px; margin: 12px 0 10px; }
.conferma-spunta { width: 66px; height: 66px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--verde); color: #fff; box-shadow: 0 10px 26px rgba(14,159,94,.32); }
.appena-fatto .conferma-spunta { animation: spunta .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes spunta { from { transform: scale(.4); opacity: 0; } }
.numero-grande { font-size: 92px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: var(--accento); margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.stato-ordine { display: flex; flex-direction: column; gap: 14px; }
.stato-testa { display: flex; align-items: center; gap: 14px; }
.stato-icona { flex: none; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--blu-tenue); color: var(--blu); }
.stato-ordine[data-stato='stampato'] .stato-icona { background: var(--accento-tenue); color: var(--accento-scuro); }
.stato-ordine[data-stato='pronto'] .stato-icona, .stato-ordine[data-stato='ritirato'] .stato-icona { background: var(--verde-tenue); color: var(--verde); }
.stato-ordine[data-stato='annullato'] .stato-icona, .stato-ordine[data-stato='non_ritirato'] .stato-icona { background: var(--rosso-tenue); color: var(--rosso); }
.stato-ordine[data-stato='pronto'] { box-shadow: 0 0 0 2px var(--verde), var(--ombra); }
.stato-titolo { font-weight: 800; font-size: 19px; }
.stato-sotto { color: var(--grigio); font-size: 15px; }
.stato-motivo { padding: 10px 14px; border-radius: 14px; background: var(--rosso-tenue); color: #8F1D21; font-size: 15px; }
.stato-motivo[hidden] { display: none; }
.passi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.passi[hidden] { display: none; }
.passi li { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--grigio-2); line-height: 1.2; }
.passi li span { display: block; height: 6px; border-radius: 999px; background: #E7E9EE; }
.passi li.fatto { color: var(--inchiostro-2); }
.passi li.fatto span { background: var(--verde); }
.passi li.adesso { color: var(--inchiostro); }
.passi li.adesso span { background: linear-gradient(90deg, var(--verde) 0%, var(--verde) 50%, #E7E9EE 50%); background-size: 200% 100%; animation: avanza 1.6s ease-in-out infinite alternate; }
@keyframes avanza { from { background-position: 100% 0; } to { background-position: 0 0; } }
.stato-ordine[data-stato='ritirato'] .passi li.adesso span { background: var(--verde); animation: none; }
.conferma-dati { gap: 14px; }
.dato { display: flex; gap: 14px; align-items: flex-start; }
.dato-icona { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--fondo); color: var(--accento-scuro); }
.dato-etichetta { font-size: 13.5px; font-weight: 700; color: var(--grigio); }
.dato-valore { font-weight: 750; font-size: 16.5px; }
.conferma-azioni { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.conferma-azioni .btn { flex: 1 1 200px; }
.righe-fatte { list-style: none; margin: 0 0 8px; padding: 0; }
.righe-fatte li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linea); align-items: flex-start; }
.righe-q { flex: none; min-width: 32px; font-weight: 800; }
.righe-nome { display: block; font-weight: 700; }
.righe-nota { display: block; color: var(--grigio); font-size: 14px; }
.righe-prezzo { flex: none; font-variant-numeric: tabular-nums; color: var(--inchiostro-2); }
.nota-fatta { margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: var(--fondo); font-size: 15px; }
.conferma-nota { padding: 0 8px; }

/* ---------- Account ---------- */
.account-pagina { padding-top: 18px; padding-bottom: 20px; }
.account-testa { display: flex; align-items: center; gap: 14px; padding: 6px 2px; }
.lista-ordini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.voce-ordine { padding: 14px 0; border-bottom: 1px solid var(--linea); display: flex; flex-direction: column; gap: 8px; }
.voce-ordine:last-child { border-bottom: 0; }
.voce-ordine-titolo { font-weight: 800; color: var(--inchiostro); text-decoration: none; }
.voce-ordine-righe { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.account-fine { gap: 14px; }

/* ---------- Testo legale (privacy) ---------- */
.testo-legale { margin: 16px 0 24px; padding: 22px 20px; line-height: 1.6; }
.testo-legale h1 { font-size: 27px; letter-spacing: -0.02em; }
.testo-legale h2 { font-size: 18px; margin: 24px 0 8px; }
.testo-legale p { margin: 8px 0; }
.testo-legale ul { margin: 8px 0; padding-left: 20px; }
.testo-legale li { margin: 6px 0; }
.legale-sotto { color: var(--grigio); font-size: 16px; }
.riquadro-contatti { padding: 12px 16px; border-radius: 14px; background: var(--fondo); }
.legale-data { margin-top: 22px !important; color: var(--grigio); font-size: 14px; }

/* Foglio di conferma (cancellazione dell'account) */
.foglio h2 { font-size: 21px; }

@media (min-width: 900px) {
  .carrello { padding-bottom: 22px; }
  .ordine-pagina, .conferma-pagina, .account-pagina { padding-top: 28px; }
}

/* Pagine interne (ordine, conferma, account): schede tonde e ombre morbide come il menu */
.pagina-ordina .scheda { border-radius: 24px; box-shadow: 0 1px 2px rgba(14, 17, 22, .04), 0 8px 24px rgba(14, 17, 22, .06); }
.pagina-ordina .barra-pagina { background: color-mix(in srgb, var(--fondo) 86%, transparent); }
.sezione-ordine h2 svg { width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: var(--accento-tenue); }

/* Pulsanti principali a 19 px in grassetto («Conferma l'ordine», «Entra»): è «testo grande», il bianco sull'arancio si legge bene */
.pagina-ordina .btn-grande { font-size: 19px; }
/* Tasti almeno da 44 px nelle pagine dei clienti («Vedi», «Ordina di nuovo», «Sì, correggi», «Esci», «Cambia i dati») */
.pagina-ordina .btn-piccolo { min-height: 44px; padding: 0 16px; }
.cliente-azioni a, .cliente-azioni .link-azione { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }

.piatto.evidenziato { box-shadow: 0 0 0 3px var(--accento, #FF4D2E), 0 10px 30px rgba(14, 17, 22, .12); transition: box-shadow .4s ease; }