/* ============================================================
   MENU — stile della sezione "TPB: Eat!" integrata nel viaggio.
   Tutto sotto .mnu (la sezione e il pannello di dettaglio la portano
   entrambi) così i token rossi e le superfici piene non toccano il
   resto dell'app, che ha i suoi token glass e l'accento blu.
   ============================================================ */

/* I token dei menu, ridefiniti solo dentro .mnu: qui vince il rosso TPB
   e le superfici piene dell'app dei menu, non il glass del viaggio. */
.mnu{
  --surface-2:#ffffff;
  --surface-1:#f7f6f3;
  --surface-0:#f0eee9;

  --text-primary:#1a1a18;
  --text-secondary:#6b6a64;
  --text-muted:#9b9a92;

  --border:rgba(26,26,24,.10);
  --border-strong:rgba(26,26,24,.16);

  --accent:#f01c1c;
  --bg-accent:#fde3e3;
  --text-accent:#c00d0d;
  --border-accent:rgba(240,28,28,.24);

  --bg-success:#e6f2d9;  --text-success:#3b6d11;
  --bg-warning:#faeeda;  --text-warning:#854f0b;
  --bg-teal:#dcf2ea;     --text-teal:#0f6e56;
  --bg-purple:#e8e6fb;   --text-purple:#4b41ad;

  --radius:8px;
  color:var(--text-primary);
}

/* Neutralizza le regole glass globali del viaggio SOLO sulle card e sui
   pill dei menu (gli unici selettori che il viaggio marca !important). */
.mnu .card{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:none!important;border:.5px solid var(--border)!important;
}
.mnu .pill{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:none!important;border:.5px solid transparent!important;
}

/* iOS in standalone colora indirizzi, orari e quantità di azzurro: glielo riprendiamo */
.mnu a[x-apple-data-detectors],
.mnu a[x-apple-data-detectors] *{
  color:inherit!important;-webkit-text-fill-color:currentColor!important;
  text-decoration:none!important;font-size:inherit!important;
  font-weight:inherit!important;font-family:inherit!important;pointer-events:none;
}
.mnu button{color:var(--text-primary);-webkit-text-fill-color:currentColor}
.mnu .card,.mnu .card *,.mnu .dish,.mnu .dish *,.mnu .d-hero,.mnu .d-hero *,
.mnu .gloss,.mnu .gloss *,.mnu .cat,.mnu .cat *,.mnu .res-head,.mnu .res-head *,
.mnu .city-head,.mnu .pill,.mnu .act,.mnu .act *{-webkit-text-fill-color:currentColor}
.mnu a{color:var(--text-accent);text-decoration:none;-webkit-text-fill-color:currentColor}

/* ---------- intestazione ---------- */
.mnu .brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.mnu .brand .mark{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;display:block;object-fit:cover;
}
.mnu .brand .name{font-size:15px;font-weight:700;letter-spacing:-.2px}
.mnu .brand .name em{font-style:normal;color:var(--accent)}
.mnu .brand .where{margin-left:auto;font-size:11px;color:var(--text-muted);letter-spacing:.4px;text-transform:uppercase}

.mnu h1.greet{margin:0 0 4px;font-size:27px;font-weight:600;letter-spacing:-.6px;line-height:1.2;color:var(--text-primary)}
.mnu p.sub{margin:0 0 18px;font-size:14px;color:var(--text-secondary)}

/* ---------- le tre chip in alto (Ristoranti / Cerca / Tipici) ---------- */
.mnu-tabs{display:flex;gap:6px;overflow-x:auto;margin:0 -20px 16px;padding:0 20px 4px;scrollbar-width:none}
.mnu-tabs::-webkit-scrollbar{display:none}
.mnu-tabs button{
  flex-shrink:0;background:var(--surface-0);border:0;border-radius:20px;
  padding:8px 15px;font-size:13px;color:var(--text-secondary);white-space:nowrap;
}
.mnu-tabs button.on{background:var(--accent);color:#fff;font-weight:600}

/* ---------- chip città ---------- */
.mnu .tabs{display:flex;gap:6px;overflow-x:auto;margin:0 -20px 16px;padding:0 20px 4px;scrollbar-width:none}
.mnu .tabs::-webkit-scrollbar{display:none}
.mnu .tabs button{
  flex-shrink:0;background:var(--surface-0);border:0;border-radius:20px;
  padding:7px 14px;font-size:13px;color:var(--text-secondary);white-space:nowrap;
}
.mnu .tabs button.on{background:var(--text-primary);color:#fff;font-weight:500}

/* ---------- card ristorante ---------- */
.mnu .card{
  display:block;width:100%;text-align:left;
  background:var(--surface-2);border-radius:12px;
  padding:15px 16px;margin-bottom:10px;
  transition:transform .12s ease, border-color .12s ease;
}
.mnu .card:active{transform:scale(.985);border-color:var(--border-strong)}
.mnu .card .top{display:flex;align-items:flex-start;gap:12px}
.mnu .card .ct{font-size:16px;font-weight:600;letter-spacing:-.2px;display:block}
.mnu .card .cs{font-size:12.5px;color:var(--text-muted);display:block;margin-top:1px}
.mnu .card .price{
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  color:var(--text-secondary);background:var(--surface-0);
  padding:3px 7px;border-radius:6px;white-space:nowrap;flex-shrink:0;
}
.mnu .card .blurb{margin:9px 0 0;font-size:13px;color:var(--text-secondary);line-height:1.45}
.mnu .card .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.mnu .pill{
  font-size:11px;font-weight:500;padding:2.5px 8px;border-radius:100px;white-space:nowrap;
}
.mnu .pill.red{background:var(--bg-accent);color:var(--text-accent);border-color:var(--border-accent)!important}
.mnu .pill.warn{background:var(--bg-warning);color:var(--text-warning)}
.mnu .pill.teal{background:var(--bg-teal);color:var(--text-teal)}
.mnu .pill.grey{background:var(--surface-0);color:var(--text-secondary)}

.mnu .city-head{
  display:flex;align-items:center;gap:8px;
  margin:22px 0 10px;font-size:11px;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--text-muted);
}
.mnu #mnu-body > .city-head:first-of-type{margin-top:0}
.mnu .city-head::after{content:"";flex:1;height:.5px;background:var(--border)}

/* ---------- dettaglio ristorante ---------- */
#mnu-detail{
  position:fixed;inset:0;z-index:70;background:var(--surface-1);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(100%);transition:transform .26s cubic-bezier(.32,.72,0,1);
}
#mnu-detail.open{transform:none}
.mnu .d-bar{
  position:sticky;top:0;z-index:2;
  background:rgba(247,246,243,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:.5px solid var(--border);
  padding:calc(env(safe-area-inset-top) + 10px) 20px 10px;
}
.mnu .d-bar .row{display:flex;align-items:center;gap:10px;max-width:520px;margin:0 auto}
.mnu .d-back{
  background:none;border:0;padding:0;color:var(--accent);
  display:flex;align-items:center;gap:2px;font-size:15px;font-weight:500;
}
.mnu .d-back i{font-size:20px;margin-left:-4px}
.mnu .d-bar .title{font-size:15px;font-weight:600;flex:1;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mnu .d-lang{
  flex-shrink:0;background:var(--surface-0);border:.5px solid var(--border);border-radius:20px;
  padding:5px 10px;display:flex;align-items:center;gap:4px;color:var(--text-primary);
  font-size:12px;font-weight:600;letter-spacing:.3px;font-variant-numeric:tabular-nums;
}
.mnu .d-lang i{font-size:15px;color:var(--accent)}
.mnu .d-lang.on{background:var(--accent);color:#fff}
.mnu .d-lang.on i{color:#fff}
.mnu .d-body{max-width:520px;margin:0 auto;padding:20px 20px calc(var(--nav-h) + 30px)}

.mnu .d-hero h1{margin:0 0 3px;font-size:26px;font-weight:600;letter-spacing:-.5px}
.mnu .d-hero .addr{margin:0;font-size:13.5px;color:var(--text-secondary)}
.mnu .d-hero .meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}
.mnu .d-hero .blurb{margin:12px 0 0;font-size:14px;color:var(--text-secondary);line-height:1.5}

.mnu .d-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 4px}
.mnu .act{
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--surface-2);border:.5px solid var(--border);border-radius:var(--radius);
  padding:11px 8px;font-size:13.5px;font-weight:500;color:var(--text-primary);
}
.mnu .act i{font-size:17px;color:var(--accent)}
.mnu .act:active{background:var(--surface-0)}

/* chip categorie, sticky sotto la barra */
.mnu .cat-nav{
  position:sticky;top:calc(env(safe-area-inset-top) + 48px);z-index:1;
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  margin:18px -20px 0;padding:10px 20px;
  background:rgba(247,246,243,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
.mnu .cat-nav::-webkit-scrollbar{display:none}
.mnu .cat-nav button{
  flex-shrink:0;background:var(--surface-0);border:0;border-radius:20px;
  padding:6px 13px;font-size:12.5px;color:var(--text-secondary);white-space:nowrap;
}
.mnu .cat-nav button.on{background:var(--accent);color:#fff;font-weight:500}

.mnu .cat{margin-top:22px;scroll-margin-top:110px}
.mnu .cat h2{
  margin:0 0 2px;font-size:11px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--accent);
}
.mnu .cat .cnote{margin:0 0 8px;font-size:12px;color:var(--text-muted);font-style:italic}
.mnu .dishes{background:var(--surface-2);border:.5px solid var(--border);border-radius:12px;overflow:hidden}
.mnu .dish{padding:12px 14px;border-bottom:.5px solid var(--border)}
.mnu a.dish{color:var(--text-primary);display:block}
.mnu .dish:last-child{border-bottom:0}
.mnu .dish.pick{background:linear-gradient(90deg,var(--bg-accent) 0 3px,transparent 3px)}
.mnu .dish .line{display:flex;align-items:baseline;gap:8px}
.mnu .dish .n{font-size:14.5px;font-weight:500;letter-spacing:-.1px}
.mnu .dish .lead{flex:1;border-bottom:1px dotted var(--border-strong);transform:translateY(-3px);min-width:12px}
.mnu .dish .p{font-family:var(--font-mono);font-size:13.5px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.mnu .dish .p .cur{color:var(--text-muted);font-size:11.5px;margin-left:1px}
.mnu .dish .d{margin:3px 0 0;font-size:12.5px;color:var(--text-secondary);line-height:1.45}
.mnu .dish .tip{
  display:inline-flex;align-items:center;gap:3px;margin-top:5px;
  font-size:10.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--accent);
}
.mnu .dish .tip i{font-size:12px}
.mnu .dish .free{color:var(--text-success);font-weight:600}

/* ---------- ricerca ---------- */
.mnu .searchbar{
  display:flex;align-items:center;gap:8px;
  background:var(--surface-2);border:.5px solid var(--border);border-radius:10px;
  padding:10px 12px;margin-bottom:16px;
}
.mnu .searchbar i{font-size:19px;color:var(--text-muted)}
.mnu .searchbar input{
  flex:1;border:0;outline:0;background:none;font-family:inherit;font-size:16px;
  color:var(--text-primary);min-width:0;
}
.mnu .searchbar input::placeholder{color:var(--text-muted)}
.mnu .searchbar .clr{background:none;border:0;padding:0;color:var(--text-muted);display:none}
.mnu .searchbar .clr.show{display:block}

.mnu .res{background:var(--surface-2);border:.5px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:10px}
.mnu .res-head{
  display:flex;align-items:center;gap:6px;padding:9px 14px;
  background:var(--surface-0);font-size:11px;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;color:var(--text-secondary);
}
.mnu .res-head .rc{color:var(--text-muted);font-weight:500;letter-spacing:.4px;text-transform:none}
.mnu .res-head .go{margin-left:auto;color:var(--accent);font-size:16px}

.mnu .empty{text-align:center;padding:46px 20px;color:var(--text-muted)}
.mnu .empty i{font-size:34px;display:block;margin-bottom:10px;opacity:.5}
.mnu .empty p{margin:0;font-size:14px}

/* ---------- glossario piatti tipici ---------- */
.mnu .gloss{background:var(--surface-2);border:.5px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:14px}
.mnu .gloss .g{padding:12px 14px;border-bottom:.5px solid var(--border)}
.mnu .gloss .g:last-child{border-bottom:0}
.mnu .gloss .g .w{font-size:14.5px;font-weight:600}
.mnu .gloss .g .m{font-size:13px;color:var(--text-secondary);margin-top:2px}

.mnu .note{
  background:var(--bg-warning);border-radius:var(--radius);
  padding:12px 14px;font-size:12.5px;color:var(--text-warning);line-height:1.5;margin-top:18px;
}
.mnu .note b{font-weight:600}

/* ============================================================
   MODALITÀ SCURA — stessi valori dell'app dei menu, sotto data-tema="scuro".
   ============================================================ */
:root[data-tema="scuro"] .mnu{
  --surface-2:#201f26;
  --surface-1:#16151a;
  --surface-0:#2b2a33;

  --text-primary:#f3f2ef;
  --text-secondary:#b4b2ac;
  --text-muted:#8f8d86;

  --border:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.20);

  --accent:#ff4d4d;
  --bg-accent:rgba(240,28,28,.20);
  --text-accent:#ff7a7a;
  --border-accent:rgba(240,28,28,.35);

  --bg-success:rgba(143,202,95,.16);  --text-success:#9ccf6a;
  --bg-warning:rgba(224,169,75,.16);  --text-warning:#e0b060;
  --bg-teal:rgba(79,192,165,.16);     --text-teal:#57c4a8;
  --bg-purple:rgba(154,144,224,.16);  --text-purple:#a79ce8;
}
:root[data-tema="scuro"] .mnu .tabs button.on{color:#16151a}
:root[data-tema="scuro"] .mnu .d-bar,
:root[data-tema="scuro"] .mnu .cat-nav{background:rgba(22,21,26,.90)}

/* Correzione ottica del nav in basso: il glifo posate (voce Menu) ha
   l'inchiostro più stretto delle altre icone e, da ultima voce, sembra un
   filo staccato dalla Mappa. Gli spazi vuoti misurati sono 62/62/61/63px:
   un nudge di 2px a sinistra porta l'ultimo a 61, in pari con gli altri. */
#nav button[data-tab="menu"] i{transform:translateX(-2px)}

/* ---------- riga "ristorante" nelle sezioni Oggi e Viaggio ----------
   Vive fuori da .mnu: la riga apre il menu, il pin resta un link a Mappe. */
.riga.apri-menu,.act.apri-menu{cursor:pointer}
.pin-link{display:inline-flex;align-items:center;color:inherit;-webkit-tap-highlight-color:transparent}