/* ============================================================================
   MAGNAMO — Design system

   Direzione: MAGNAMO-Concept-v2 ("editoriale/premium").
   Fondo crema, titoli in serif, card bianche, bande scure, navigazione a
   pillola flottante. I token e i componenti qui sotto sono ripresi fedelmente
   dal concept; le sezioni marcate ADATTAMENTO e AGGIUNTE contengono
   rispettivamente cio che serve per un device reale (larghezza fluida, safe
   area) e i componenti che il concept non disegnava perche' i dati erano finti.
   ============================================================================ */

:root{
  /* Palette */
  --bg:#FAF6EF;
  --card:#FFFFFF;
  --ink:#201A14;
  --sub:#8D8377;
  --line:#EAE1D3;
  --red:#E6392B;
  --red-deep:#C42A1E;
  --red-soft:#FDECEA;
  --dark:#211C17;
  --dark-2:#2C261F;
  --ok:#2E7D46;
  --ok-bg:#EAF5EC;
  --warn:#8A6A1F;
  --warn-bg:#FBF0DA;

  /* Profondita' */
  --shadow:0 14px 34px rgba(32,26,20,.10);
  --shadow-sm:0 6px 16px rgba(32,26,20,.07);

  /* Tipografia */
  --ff:'Manrope',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:'DM Serif Display',Georgia,serif;

  --nav-h:64px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--ff);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
a{ color:var(--red); text-decoration:none; }
a:hover{ color:var(--red-deep); }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }
input,textarea,select{ font-family:inherit; }

/* Stile "app nativa": il testo dell'interfaccia NON si seleziona (niente
   evidenziazione blu al tap prolungato / drag). Restano selezionabili e
   modificabili i campi di input, dove la selezione serve davvero. */
body{ -webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-touch-callout:none; }
input, textarea, select, [contenteditable]{ -webkit-user-select:text; -moz-user-select:text; user-select:text; }

/* ============================================================================
   ADATTAMENTO — dal mockup dentro un telefono disegnato allo schermo reale
   Il concept mostrava l'app dentro una cornice 412x872. Qui l'app E' lo
   schermo: larghezza PIENA su ogni dispositivo (telefono, tablet, iPad), come
   un'app nativa dentro la WebView a tutto schermo.
   ============================================================================ */

.app{
  position:relative;
  width:100%;
  margin:0 auto;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
}

.scroll{
  flex:1;
  overflow-x:hidden;
  padding:0 22px calc(var(--nav-h) + 46px + env(safe-area-inset-bottom));
}
.scroll--nonav{ padding-bottom:calc(34px + env(safe-area-inset-bottom)); }
.scroll--flush{ padding-left:0; padding-right:0; }

/* Il concept disegnava una status bar finta ("9:41"). Su un device vero quella
   zona la occupa quella di sistema: qui si lascia solo lo spazio reale. */
.pad-top{ padding-top:calc(24px + env(safe-area-inset-top)); }
.pad-top--lg{ padding-top:calc(52px + env(safe-area-inset-top)); }

/* ============================================================================
   TIPOGRAFIA
   ============================================================================ */

.overline{
  font-size:11px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sub);
}
.overline--red{ color:var(--red); }
.overline--light{ color:#9C9184; }

.t-display{
  font-family:var(--serif); font-weight:400;
  letter-spacing:0; line-height:1.05; margin:0;
}
.t-sub{ color:var(--sub); font-size:14.5px; line-height:1.5; font-weight:500; }
.hairline{ height:1px; background:var(--line); border:0; margin:0; }

.shead{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; margin:30px 0 14px;
}
.shead .overline{ margin:0; }
.shead a,
.shead button{ font-size:13px; font-weight:800; color:var(--red); flex:none; }

/* ============================================================================
   BOTTONI E CHIP
   ============================================================================ */

.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; border-radius:999px; font-weight:800; font-size:15.5px;
  padding:16px 24px; transition:transform .08s, background .15s, color .15s;
}
.btn:active{ transform:scale(.985); }
.btn--red{ background:var(--red); color:#fff; box-shadow:0 10px 24px rgba(230,57,43,.30); }
.btn--red:hover{ background:var(--red-deep); color:#fff; }
.btn--ink{ background:var(--ink); color:#fff; }
.btn--ink:hover{ color:#fff; }
.btn--ghost{ border:1.5px solid var(--line); color:var(--ink); background:#fff; }
.btn--ghost:hover{ border-color:var(--ink); color:var(--ink); }
.btn--sm{ padding:11px 18px; font-size:13.5px; width:auto; }
.btn--sold{ background:#D8CFC1; color:#fff; box-shadow:none; }
.btn:disabled,
.btn.is-disabled{ opacity:.55; pointer-events:none; }

.chip{
  flex:none; padding:10px 18px; border-radius:999px;
  border:1.5px solid var(--line); background:#fff;
  font-weight:700; font-size:13.5px; color:var(--sub); transition:.15s;
}
.chip.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.chips{
  display:flex; gap:8px; overflow-x:auto;
  margin:0 -22px; padding:4px 22px; scrollbar-width:none;
}
.chips::-webkit-scrollbar{ display:none; }
.chips--wrap{ flex-wrap:wrap; overflow:visible; margin:0; padding:4px 0; }
.chip--more{ color:var(--red); border-color:#F0C7C2; font-weight:800; }
/* Selettore a "card" che sostituisce un <select>: chip a scelta singola. */
.chipsel{ flex-wrap:wrap; overflow:visible; margin:0; padding:2px 0; }
.chipsel[data-disabled]{ pointer-events:none; opacity:.55; }

/* Campo che apre un foglio di scelta (province): ha l'aria di un input, ma e'
   un bottone. Serve dove le voci sono troppe per delle chip e una tendina
   nativa sarebbe lunga un chilometro. */
.pickfield{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  border:1.5px solid var(--line); border-radius:14px; background:#fff;
  padding:14px 16px; font-size:15px; font-family:inherit; color:var(--sub);
}
.pickfield.is-set{ color:var(--ink); font-weight:700; }
.pickfield__val{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pickfield svg{ width:16px; height:16px; color:#C9BFB2; flex:none; }
/* Nei moduli a sola underline (accesso, registrazione) si adegua al contorno. */
.fieldu .pickfield{
  border:0; border-radius:0; padding:10px 0; background:transparent; font-size:16px;
}

/* "Che serata cerchi?": le voci principali della home diventano tessere con una
   piccola foto reale del tema (serata conviviale, chitarra dal vivo, vino...).
   L'atmosfera si "vede", coerente con il rail "I piu' apprezzati". "Vedi tutte"
   chiude la fila e apre il foglio con tutti i temi (etichette). */
.temarail{
  display:flex; align-items:flex-start; gap:14px; overflow-x:auto;
  margin:0 -22px; padding:4px 22px 6px; scrollbar-width:none;
}
.temarail::-webkit-scrollbar{ display:none; }
.tema{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:8px;
  width:120px; text-align:center; background:none; font-family:inherit;
}
.tema__ph{
  width:120px; height:120px; border-radius:20px; overflow:hidden;
  background:#fff; border:1.5px solid var(--line); box-shadow:var(--shadow-sm);
}
.tema__ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.tema__ph--none{ background:var(--line); }
.tema__lbl{
  font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.2;
  max-width:120px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tema--more .tema__ph{
  display:flex; align-items:center; justify-content:center; color:var(--red);
}
.tema--more .tema__ph svg{ width:32px; height:32px; }
.tema--more .tema__lbl{ color:var(--red); font-weight:800; }

/* Ordinamento della ricerca: pulsante che apre un popup (foglio dal basso). */
.ordine-btn{
  display:inline-flex; align-items:center; gap:5px;
  font-weight:800; font-size:13px; color:var(--sub);
  background:none; font-family:inherit;
}
.ordine-btn svg{ width:12px; height:12px; color:var(--red); }
.sortopt{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:15px 4px; border-bottom:1px solid var(--line);
  font-weight:700; font-size:15.5px; color:var(--ink); font-family:inherit; background:none;
}
.sortopt:last-child{ border-bottom:0; }
.sortopt.on{ color:var(--red); }
.sortopt svg{ width:20px; height:20px; color:var(--red); flex:none; }

/* Banner promozionale della home (sconto / serate in evidenza).
   Mostrato per INTERO (rapporto del PNG preservato), non ritagliato: l'immagine
   e' un <img> a tutta larghezza, il testo ci sta sopra con ombra per leggibilita'. */
.promo{
  display:block; position:relative; margin-top:18px;
  border-radius:22px; overflow:hidden;
}
.promo__img{ width:100%; height:auto; display:block; }
.promo__txt{
  position:absolute; left:22px; top:50%; transform:translateY(-50%);
  color:#fff; max-width:66%; text-shadow:0 2px 12px rgba(0,0,0,.38);
}
.promo__txt b{
  font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.12;
  display:block;
}
.promo__sub{ display:block; margin-top:7px; font-weight:700; font-size:13.5px; line-height:1.3; }

/* Barra orizzontale delle categorie cucina della home (icone lineari + "Vedi tutte"). */
.catrail{
  display:flex; gap:12px; overflow-x:auto;
  margin:0 -22px; padding:4px 22px 6px; scrollbar-width:none;
}
.catrail::-webkit-scrollbar{ display:none; }
.cat{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:8px;
  width:66px; text-align:center; background:none; font-family:inherit;
}
.cat__ico{
  width:62px; height:62px; border-radius:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1.5px solid var(--line); color:#2FA36B;
}
.cat__ico svg{ width:30px; height:30px; }
/* La forchetta verde (mark-mint) ha molto margine interno: va mostrata piu'
   grande della bianca perche' la forchetta VISIBILE risulti della stessa
   dimensione di quella rossa "Tutte" (che invece riempie tutto il suo canvas). */
.cat__ico img{ width:48px; height:48px; object-fit:contain; }
.cat__ico--all{ background:var(--red); border-color:var(--red); }
.cat__ico--all img{ width:32px; height:32px; }
.cat--more .cat__ico{ color:var(--sub); }
.cat--more .cat__ico svg{ width:26px; height:26px; }
/* Solo l'etichetta (ultimo span): NON l'icona, altrimenti sovrascriverebbe il
   colore di .cat__ico (che e' anch'esso uno <span>). */
.cat > span:last-child{ font-size:11.5px; font-weight:700; color:var(--ink); line-height:1.15; }

.pill-date{
  display:inline-flex; align-items:center; background:#fff; color:var(--ink);
  font-weight:800; font-size:12px; padding:8px 14px; border-radius:999px;
  box-shadow:var(--shadow-sm); white-space:nowrap;
}
.tagchip{
  display:inline-flex; align-items:center; gap:6px;
  background:#F4EDE1; color:#7A6B52; font-weight:700; font-size:12px;
  padding:7px 12px; border-radius:999px;
}
.tagchip--warn{ background:var(--warn-bg); color:var(--warn); }
.tagchip--ok{ background:var(--ok-bg); color:var(--ok); }

.status{
  flex:none; font-size:10.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:6px 10px; border-radius:999px;
  background:#F1EBE1; color:var(--sub); white-space:nowrap;
}
.status--ok{ background:var(--ok-bg); color:var(--ok); }
.status--past{ background:#F1EBE1; color:var(--sub); }
.status--warn{ background:var(--warn-bg); color:var(--warn); }
.status--ko{ background:var(--red-soft); color:var(--red-deep); }

/* ============================================================================
   RICERCA E POSIZIONE
   ============================================================================ */

.search{
  display:flex; align-items:center; gap:11px;
  background:#fff; border:1.5px solid var(--line); border-radius:999px;
  padding:14px 20px; box-shadow:var(--shadow-sm);
}
.search input{
  flex:1; border:none; outline:none; background:none;
  font-size:15px; font-family:inherit; color:var(--ink); min-width:0;
}
.search input::placeholder{ color:#B9AE9F; font-weight:500; }
.search svg{ width:20px; height:20px; color:#B9AE9F; flex:none; }

.locrow{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:800; font-size:14px; margin-bottom:12px; padding:0; background:none;
}
.locrow svg{ width:15px; height:15px; color:var(--red); }

.mapbtn{
  flex:none; width:50px; height:50px; border-radius:50%;
  background:#fff; border:1.5px solid var(--line); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; color:var(--red);
}
.mapbtn svg{ width:22px; height:22px; }
.mapbtn__badge{
  position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--red); color:#fff;
  font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center;
}

/* Testata della home: wordmark a sinistra, avatar a destra */
.tophead{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:20px;
}
.tophead__mark{ height:22px; width:auto; }
.tophead__ava{
  width:42px; height:42px; border-radius:50%; object-fit:cover;
  border:2.5px solid #fff; box-shadow:var(--shadow-sm); flex:none;
}
/* Utente senza foto: cerchio con le SUE iniziali (come nel profilo). */
.tophead__ava--ini{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#7BD0A8,#46B98A); color:#fff;
  font-weight:800; font-size:15px; letter-spacing:.02em;
}

/* ============================================================================
   TILE CUCINE, RAIL, AVATAR
   ============================================================================ */

.tiles2{
  display:flex; gap:12px; overflow-x:auto;
  margin:0 -22px; padding:4px 22px 6px; scrollbar-width:none;
}
.tiles2::-webkit-scrollbar{ display:none; }
/* Il concept aveva etichette corte ("Offerte", "Italiano"). Con nomi di cucina
   reali piu' lunghi ("Mediterraneo") a 74px il testo si spezzava a meta' parola:
   la tile si allarga quel tanto che basta. */
.tile2{ flex:none; width:84px; text-align:center; }
.tile2 .ico{
  width:64px; height:64px; margin:0 auto 7px; border-radius:18px;
  background:#fff; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--red);
}
.tile2 .ico svg{ width:26px; height:26px; }
.tile2 .ico.hot{
  background:var(--red); border-color:var(--red); color:#fff;
  box-shadow:0 10px 20px rgba(230,57,43,.25);
}
.tile2 span{
  font-size:11.5px; font-weight:700; color:var(--ink);
  display:block; line-height:1.25; overflow-wrap:anywhere;
}

.rail{
  display:flex; gap:14px; overflow-x:auto;
  margin:0 -22px; padding:4px 22px 8px; scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.ritem{ flex:none; width:132px; }
.ritem img{
  width:132px; height:132px; border-radius:20px; object-fit:cover;
  margin-bottom:8px; box-shadow:var(--shadow-sm);
}
/* Titolo su due righe al massimo, con l'altezza SEMPRE di due righe: le
   miniature del rail stanno una accanto all'altra, e senza questo le righe
   sotto (dove, chef, prezzo) si allineano a quote diverse da una tessera
   all'altra a seconda che il titolo vada a capo o no. */
.ritem b{
  font-size:13.5px; line-height:1.25; min-height:2.5em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Dove si tiene la serata: una riga sola, tagliata se non ci sta. */
.ritem__dove{
  display:block; font-size:11.5px; font-weight:600; color:var(--sub);
  margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ritem small{ display:block; color:var(--sub); font-weight:600; font-size:11.5px; margin-top:1px; }

.avrow{
  display:flex; gap:18px; overflow-x:auto;
  margin:0 -22px; padding:4px 22px 8px; scrollbar-width:none;
}
.avrow::-webkit-scrollbar{ display:none; }
.avitem{ flex:none; width:76px; text-align:center; }
.avitem img,
.avitem .ava-ini{
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  margin:0 auto 7px; border:2.5px solid #fff; box-shadow:var(--shadow-sm);
}
.avitem .ava-ini{ font-size:22px; }
.avitem span{ font-size:12px; font-weight:700; color:var(--ink); display:block; }
.avitem small{ font-size:10.5px; color:var(--sub); font-weight:600; }

/* ============================================================================
   CARD EVENTO EDITORIALE
   ============================================================================ */

.ev{
  background:var(--card); border-radius:24px; overflow:hidden;
  box-shadow:var(--shadow); margin-bottom:22px;
}
.ev__media{ position:relative; }
.ev__media img{ width:100%; height:200px; object-fit:cover; }
.ev__date{ position:absolute; top:14px; left:14px; }
/* Preferiti = SEGNALIBRO, non cuore: il cuore e' il "mi piace" pubblico.
   L'icona e' una sola: quando e' attiva si riempie (il tratto resta). */
.ev__save{
  position:absolute; top:12px; right:12px; width:38px; height:38px;
  border-radius:50%; background:#ffffffE6;
  display:flex; align-items:center; justify-content:center; color:#8D8377;
}
.ev__save svg{ width:19px; height:19px; }
.ev__save.on{ color:var(--ink); }
.ev__save.on svg path{ fill:currentColor; }
.ev__body{ padding:16px 18px 18px; display:block; color:inherit; }
.ev__title{ font-family:var(--serif); font-size:24px; margin:0 0 8px; line-height:1.12; }
.ev__meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:13.5px; font-weight:600; color:var(--sub);
}
.ev__meta img,
.ev__meta .ava-ini{ width:22px; height:22px; border-radius:50%; object-fit:cover; flex:none; }
.ev__meta .ava-ini{ font-size:9px; }
.ev__meta .dot{ width:3px; height:3px; border-radius:50%; background:#CFC5B6; flex:none; }
.ev__tags{ margin-top:9px; display:flex; flex-direction:column; gap:2px; }
.ev__tag{ font-size:13px; font-weight:600; color:var(--sub); }
.ev__tag b{ color:var(--ink); font-weight:700; }
.ev__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
}
.ev__price{ font-weight:800; font-size:16px; }
.ev__price small{ color:var(--sub); font-weight:600; font-size:12.5px; }
.ev__seats{ font-size:12.5px; font-weight:700; color:var(--sub); text-align:right; }
.ev__seats b{ color:var(--red); }

/* Riga contatori della card: quanti mi piace e quante volte e' stata aperta.
   E' sola lettura — si tocca (mi piace) e si condivide dalla pagina della serata. */
.ev__stats{
  display:flex; align-items:center; gap:16px;
  margin-top:10px; font-size:12.5px; font-weight:700; color:var(--sub);
}
.ev__stats span{ display:inline-flex; align-items:center; gap:5px; }
.ev__stats svg{ width:15px; height:15px; flex:none; }
.ev__stats .is-liked{ color:var(--red); }

/* ============================================================================
   BANDE PROMOZIONALI
   ============================================================================ */

.band{
  position:relative; overflow:hidden; background:var(--dark); color:#fff;
  border-radius:24px; padding:26px 24px; margin:8px 0 2px;
}
.band img{ height:20px; margin-bottom:14px; opacity:.9; }
.band h3{ font-family:var(--serif); font-weight:400; font-size:25px; margin:0 0 6px; line-height:1.1; }
.band p{ margin:0 0 18px; font-size:13.5px; color:#B9AE9F; font-weight:500; }
.band .bmark{
  position:absolute; right:-34px; bottom:-40px; width:170px;
  opacity:.10; height:auto; margin:0; pointer-events:none;
}
.band .btn{ width:auto; display:inline-flex; padding:12px 22px; font-size:13.5px; background:#fff; color:var(--ink); }
.band--red{ background:var(--red); }
.band--red p{ color:#FFD9D4; }
.band--red .btn{ color:var(--red); }
.band--red .overline{ color:#FFC7C0; }

/* ============================================================================
   DETTAGLIO EVENTO
   ============================================================================ */

.hero{ position:relative; }
.hero img{ width:100%; height:300px; object-fit:cover; }

/* Galleria dell'hero: quando la serata ha piu' di una foto si scorrono in
   orizzontale con lo scroll-snap del browser. Niente librerie e niente JS per
   lo scorrimento: il JS aggiorna solo i puntini, che sono un indicatore di
   posizione e non un comando. */
.hero__track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
}
.hero__track::-webkit-scrollbar{ display:none; }
.hero__track img{ flex:none; width:100%; scroll-snap-align:center; }
/* I 14px sono dal bordo visibile della foto, non dal fondo dell'hero: il
   foglio della pagina sale di 28px (.sheet-page) e copre quella striscia. */
.hero__dots{
  position:absolute; left:0; right:0; bottom:42px; z-index:5;
  display:flex; justify-content:center; gap:6px; pointer-events:none;
}
.hero__dots i{
  width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.55);
  transition:width .18s ease, background .18s ease;
}
.hero__dots i.on{ width:18px; background:#fff; }

/* Quante sono e a quale si e' arrivati. I puntini dicono "ce n'e' altre" solo
   a chi li ha gia' incontrati altrove; il numero lo dice a tutti, e su una
   serata con otto foto e' anche l'unico modo per sapere quanto manca. */
.hero__conta{
  position:absolute; right:16px; bottom:38px; z-index:5;
  background:rgba(32,26,20,.62); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.03em;
  padding:4px 10px; border-radius:999px; pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.34),transparent 40%);
  pointer-events:none;
}
.hero .hbtn{
  position:absolute; top:calc(20px + env(safe-area-inset-top));
  width:40px; height:40px; border-radius:50%; background:#ffffffE8;
  display:flex; align-items:center; justify-content:center; color:var(--ink); z-index:5;
}
.hero .hbtn svg{ width:20px; height:20px; }
/* Segnalibro sull'hero: pieno quando la serata e' salvata. */
.hero .hbtn.on svg path{ fill:currentColor; }

/* Banner "X ti ha invitato": la prima cosa che vede chi apre un link
   condiviso. Deve dire da chi arriva prima ancora del titolo della serata. */
.invito{
  display:flex; align-items:center; gap:12px;
  background:var(--dark); color:#fff;
  border-radius:18px; padding:13px 16px; margin:0 0 16px;
}
.invito img,
.invito .ava-ini{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; }
.invito b{ display:block; font-size:14.5px; }
.invito small{ display:block; color:#B9AE9F; font-size:12.5px; margin-top:2px; line-height:1.35; }
.invito--ko{ background:#F3EADF; color:var(--ink); }
.invito--ko small{ color:var(--sub); }

/* Barra azioni della serata: mi piace · visualizzazioni · salva · condividi.
   Due gruppi separati: a sinistra i NUMERI (quanto piace, quanto viene vista),
   a destra i GESTI personali (tenerla da parte, passarla a qualcuno). */
.actbar{
  display:flex; align-items:center; gap:20px;
  margin:18px 0 2px; padding:12px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.act{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; font-weight:800; color:var(--sub);
  background:none; border:0; padding:0; line-height:1;
}
.act svg{ width:23px; height:23px; flex:none; }
.act b{ font-weight:800; }
.act--like.on{ color:var(--red); }
.act--save{ margin-left:auto; }
.act--like.on svg path, .act--save.on svg path{ fill:currentColor; }
.act--save.on{ color:var(--ink); }
.act--stat{ pointer-events:none; }
.act:active{ transform:scale(.93); }

.sheet-page{
  position:relative; margin-top:-28px; background:var(--bg);
  border-radius:28px 28px 0 0; padding:26px 22px calc(var(--nav-h) + 120px); z-index:4;
}

.chefrow{
  display:flex; align-items:center; gap:13px; padding:16px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:18px 0;
  color:inherit;
}
.chefrow img,
.chefrow .ava-ini{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none; }
.chefrow .ava-ini{ font-size:17px; }
.chefrow b{ display:block; font-size:15px; }
.chefrow small{ color:var(--sub); font-weight:600; font-size:12.5px; }
.chefrow .rating{ margin-left:auto; display:flex; gap:3px; flex:none; }
.chefrow .rating img{ width:16px; height:16px; border-radius:0; }

.igrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0; }
.icell{ background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:13px 15px; }
.icell .overline{ font-size:9.5px; margin-bottom:3px; }
.icell b{ font-size:15px; font-weight:800; }
.icell b .hot{ color:var(--red); }

.course{ display:flex; gap:14px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--line); }
.course:last-child{ border-bottom:0; }
.course .n{ font-family:var(--serif); color:var(--red); font-size:17px; flex:none; width:22px; }
.course b{ font-size:15px; font-weight:700; display:block; }
.course small{ color:var(--sub); font-weight:500; font-size:12.5px; display:block; margin-top:2px; }

.cta-bar{
  position:fixed; left:50%; transform:translateX(-50%); bottom:0;
  width:100%; z-index:45;
  background:#ffffffF2; backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:14px 22px calc(20px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:16px;
}
.cta-bar .price{ font-weight:800; font-size:19px; line-height:1; flex:none; }
.cta-bar .price small{ display:block; font-size:11px; color:var(--sub); font-weight:700; margin-top:3px; }
.cta-bar .btn{ flex:1; }

/* "Apri nelle mappe": nessuna mappa embedded (la CSP resta 'self'), un pulsante
   che apre l'app mappe del telefono sulla zona o sull'indirizzo esatto (dopo la
   conferma). Vedi docs/DECISIONI.md. */
.maplink{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  padding:12px 18px; border-radius:999px; border:1.5px solid var(--line);
  background:#fff; box-shadow:var(--shadow-sm);
  font-weight:700; font-size:13.5px; color:var(--ink); font-family:inherit;
}
.maplink svg{ width:16px; height:16px; color:var(--red); }
.maplink:active{ transform:scale(.98); }

/* ============================================================================
   PRENOTAZIONI — controllo segmentato e timeline
   ============================================================================ */

.seg{ display:flex; background:#EFE8DC; border-radius:999px; padding:4px; margin:16px 0 22px; }
.seg button{
  flex:1; padding:10px; border-radius:999px;
  font-weight:800; font-size:13.5px; color:var(--sub);
}
.seg button.on{ background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); }

.bk{ display:flex; gap:16px; margin-bottom:18px; }
.bk__date{ flex:none; width:52px; text-align:center; padding-top:6px; }
.bk__date b{ font-family:var(--serif); font-size:26px; display:block; line-height:1; }
.bk__date span{
  font-size:10.5px; font-weight:800; letter-spacing:.12em;
  color:var(--sub); text-transform:uppercase;
}
.bk__card{
  flex:1; min-width:0; background:#fff; border-radius:18px;
  box-shadow:var(--shadow-sm); padding:14px 16px;
  display:flex; gap:13px; align-items:center; color:inherit;
}
.bk__card > div{ flex:1; min-width:0; }
.bk__card img,
.bk__card .ava-ini{ width:54px; height:54px; border-radius:14px; object-fit:cover; flex:none; }
.bk__card .ava-ini{ font-size:18px; }
.bk__card b{ display:block; font-size:14.5px; line-height:1.25; }
.bk__card small{ color:var(--sub); font-weight:600; font-size:11.5px; display:block; margin-top:3px; }
.bk__card .status{ margin-top:7px; display:inline-flex; }

/* ============================================================================
   PROFILO
   ============================================================================ */

.phead{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:16px 0 6px; text-align:center;
}
.phead img,
.phead .ava-ini{
  width:96px; height:96px; border-radius:50%; object-fit:cover;
  border:3px solid #fff; box-shadow:var(--shadow-sm); margin-bottom:10px;
}
.phead .ava-ini{ font-size:34px; }

/* Avatar caricabile: cerchio (foto o iniziali reali) con badge fotocamera che
   rende evidente che si puo' toccare per cambiare la foto profilo. */
.avaup{ position:relative; display:inline-block; cursor:pointer; }
.avaup img, .avaup .ava-ini{
  width:96px; height:96px; border-radius:50%; object-fit:cover; margin:0;
  border:3px solid #fff; box-shadow:var(--shadow-sm);
}
.avaup img{ display:block; }

/* Iniziali al posto della foto. Nasce nel profilo, ma vale ovunque compaia una
   persona senza immagine: meglio "MA" che la faccia di qualcun altro.
   Misura di default 40px; ogni contesto la ridefinisce insieme alla sua <img>. */
.ava-ini{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,#7BD0A8,#46B98A); color:#fff;
  font-weight:800; font-size:15px; letter-spacing:.02em;
  text-transform:uppercase;
}
.avaup .ava-ini{ font-size:34px; }
.avaup__cam{
  position:absolute; right:0; bottom:0; width:32px; height:32px; border-radius:50%;
  background:var(--red); color:#fff; border:3px solid #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(230,57,43,.35);
}
.avaup__cam svg{ width:16px; height:16px; }
.avaup__cam--lock{ background:var(--ink); box-shadow:0 4px 12px rgba(32,26,20,.30); }
.avaup__hint{ font-size:12px; font-weight:700; color:var(--sub); margin:8px 0 4px; }

/* Badge vincolo di pubblico sul dettaglio evento (Solo donne / Under 30 / Over 50). */
.pubchip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; font-weight:800; color:var(--red);
  background:#FCE9E7; border-radius:999px; padding:6px 13px;
}
.pubchip svg{ width:14px; height:14px; }

/* Chip "fascia d'età" accanto al nome di un partecipante (lato chef). */
.agechip{
  display:inline-block; font-size:11px; font-weight:800; color:var(--sub);
  background:var(--line); border-radius:999px; padding:2px 9px;
  margin-left:6px; vertical-align:middle;
}
/* Ospite arrivato da un invito, nella lista dello chef. */
.agechip--inv{ background:#F6E2DF; color:#A8321F; }
.pstats{
  display:flex; background:#fff; border-radius:20px;
  box-shadow:var(--shadow-sm); margin:22px 0; padding:18px 0;
}
.pstats div{ flex:1; text-align:center; border-right:1px solid var(--line); }
.pstats div:last-child{ border-right:0; }
.pstats b{ font-family:var(--serif); font-size:22px; display:block; }
.pstats span{
  font-size:11px; font-weight:700; color:var(--sub);
  text-transform:uppercase; letter-spacing:.08em;
}

.plist{ background:#fff; border-radius:20px; box-shadow:var(--shadow-sm); overflow:hidden; }
.plist a,
.plist button{
  display:flex; align-items:center; gap:13px; width:100%;
  padding:16px 18px; border-bottom:1px solid var(--line);
  color:var(--ink); font-weight:700; font-size:14.5px; text-align:left;
}
.plist a:last-child,
.plist button:last-child{ border-bottom:0; }
.plist a svg:first-child,
.plist button svg:first-child{ width:20px; height:20px; color:var(--red); flex:none; }
.plist .chev{ margin-left:auto; width:18px; height:18px; color:#C9BFB2; flex:none; }
.plist .val{ margin-left:auto; font-weight:800; color:var(--sub); font-size:13.5px; }
.plist .val--ok{ color:var(--ok); }
/* Voce ancora da compilare (es. l'IBAN mancante negli incassi). */
.plist .val--warn{ color:var(--red); }

/* ============================================================================
   DASHBOARD CHEF
   ============================================================================ */

.kpi{
  background:var(--dark); color:#fff; border-radius:24px;
  padding:24px; position:relative; overflow:hidden;
}
.kpi .overline{ color:#9C9184; }
.kpi .val{ font-family:var(--serif); font-size:42px; line-height:1; margin:8px 0 4px; }
.kpi .trend{
  display:inline-flex; align-items:center; gap:5px;
  background:#2E5E3C; color:#9FE0B4; font-size:11.5px; font-weight:800;
  padding:5px 10px; border-radius:999px;
}
.kpi .trend--flat{ background:#3A332B; color:#B9AE9F; }
.kpi .bars{ display:flex; align-items:flex-end; gap:7px; height:56px; margin-top:18px; }
.kpi .bars i{ flex:1; background:#3A332B; border-radius:5px 5px 0 0; min-height:3px; }
.kpi .bars i.hot{ background:var(--red); }
.kpi .bmark{ position:absolute; right:-30px; top:-30px; width:150px; opacity:.08; }
.kpi__note{ font-size:12px; color:#9C9184; font-weight:600; margin:14px 0 0; line-height:1.45; }

.qrow{ display:flex; gap:10px; margin:14px 0 4px; }
.qcell{ flex:1; background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:13px 15px; }
.qcell .overline{ font-size:9.5px; margin-bottom:3px; }
.qcell b{ font-size:14.5px; font-weight:800; display:block; }
.qcell b .hot{ color:var(--red); }

.mrow2{
  display:flex; align-items:center; gap:13px; background:#fff;
  border-radius:18px; box-shadow:var(--shadow-sm); padding:13px 15px;
  margin-bottom:12px; color:inherit;
}
.mrow2 img,
.mrow2 .ava-ini{ width:56px; height:56px; border-radius:14px; object-fit:cover; flex:none; }
.mrow2 .ava-ini{ font-size:19px; }
/* Nelle liste di persone (chef preferiti) il riquadro diventa un tondo. */
.mrow2 .tondo{ border-radius:50%; }
.mrow2 b{ display:block; font-size:15px; line-height:1.25; }
.mrow2 small{ color:var(--sub); font-weight:600; font-size:12px; display:block; margin-top:2px; }
.mrow2 .chev{ width:18px; height:18px; color:#C9BFB2; flex:none; }

/* ============================================================================
   RECENSIONI
   ============================================================================ */

.revcard{ background:#fff; border-radius:18px; box-shadow:var(--shadow-sm); padding:16px; margin-bottom:12px; }
.revcard .rhead{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.revcard .rhead img,
.revcard .rhead .ava-ini{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none; }
.revcard .rhead .ava-ini{ font-size:13px; }
.revcard .rhead b{ font-size:13.5px; display:block; }
.revcard .rhead small{ color:var(--sub); font-size:11px; font-weight:600; }
.revcard .forks{ margin-left:auto; display:flex; gap:3px; flex:none; }
.revcard .forks img{ width:15px; height:15px; }
.revcard p{ margin:0; font-size:13.5px; color:#4A423A; line-height:1.55; font-weight:500; }
.revcard .reply{
  margin:12px 0 0; padding:12px 14px; background:#F7F2E9;
  border-radius:12px; font-size:12.5px; line-height:1.5; color:#4A423A;
}
.revcard .reply b{ display:block; margin-bottom:3px; font-size:11px;
  text-transform:uppercase; letter-spacing:.1em; color:var(--sub); }

.rate-input{ display:flex; gap:14px; justify-content:center; margin:20px 0 8px; }
.rate-input img{ width:46px; height:46px; cursor:pointer; transition:transform .1s; }
.rate-input img:active{ transform:scale(.88); }
.rate-lbl{ text-align:center; font-weight:800; font-size:13px; color:var(--red); min-height:18px; }

.rating{ display:inline-flex; gap:3px; align-items:center; }
.rating img{ width:16px; height:16px; }
.rating--lg img{ width:20px; height:20px; }

/* ============================================================================
   FORM
   ============================================================================ */

.f{ margin:20px 0; }
.f label,
.f .lbl{
  display:block; font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sub); margin-bottom:8px;
}
.f input,
.f textarea,
.f select{
  width:100%; border:1.5px solid var(--line); border-radius:14px; background:#fff;
  padding:14px 16px; font-size:15px; font-family:inherit; color:var(--ink); outline:none;
}
.f input:focus,
.f textarea:focus,
.f select:focus{ border-color:var(--ink); }
.f textarea{ resize:none; height:100px; }
.f select{ appearance:none; background-image:none; }
.f .hint{ font-size:12.5px; color:var(--sub); font-weight:500; margin-top:7px; line-height:1.45; }
.f .err{ font-size:12.5px; color:var(--red); font-weight:700; margin-top:7px; }
.f.has-err input,
.f.has-err textarea{ border-color:var(--red); }
.f2{ display:flex; gap:12px; }
.f2 > .f{ flex:1; min-width:0; }

.upwell{
  border:1.5px dashed #D5CBBB; border-radius:16px; height:110px;
  display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center;
  color:#B9AE9F; font-size:12.5px; font-weight:700; background:#FFFDF9; cursor:pointer;
}
.upwell svg{ width:26px; height:26px; }
/* Il riquadro di upload e' un <label for>, e sta dentro un .f: senza questa
   riga `.f label` (piu' specifico) lo rimette a display:block e il contenuto
   si accuccia in alto a sinistra invece di stare al centro del riquadro. */
.f label.upwell{
  display:flex; margin-bottom:0;
  font-size:12.5px; font-weight:700; letter-spacing:0; text-transform:none; color:#B9AE9F;
}

.checkline{
  display:flex; align-items:flex-start; gap:12px; margin:18px 0;
  font-size:14px; line-height:1.5; color:#4A423A; font-weight:500;
}
/* Variante compatta per una riga sola (es. "Ricordami" nel form di accesso). */
.checkline--slim{ align-items:center; margin:16px 0 0; font-size:13.5px; }
.checkline input[type="checkbox"]{
  width:22px; height:22px; flex:none; margin-top:1px; accent-color:var(--red);
}

/* Griglia immagini caricate */
.imggrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0; }
.imggrid__cell{
  position:relative; aspect-ratio:1; border-radius:14px;
  overflow:hidden; background:#F1EBE1;
}
.imggrid__cell img{ width:100%; height:100%; object-fit:cover; }
.imggrid__del{
  position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%;
  background:rgba(32,26,20,.62); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.imggrid__del svg{ width:14px; height:14px; }
/* Foto scelta ma non ancora sul server: parte al primo salvataggio. */
.imggrid__attesa{
  position:absolute; left:0; right:0; bottom:0; background:rgba(32,26,20,.72); color:#fff;
  font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 0; text-align:center;
}
.imggrid__main{
  position:absolute; left:6px; bottom:6px; background:var(--red); color:#fff;
  font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px;
}

/* ============================================================================
   AUTENTICAZIONE
   ============================================================================ */

.authwrap{
  flex:1; display:flex; flex-direction:column;
  padding:0 26px calc(30px + env(safe-area-inset-bottom));
}
.authhero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-top:calc(70px + env(safe-area-inset-top));
}
.logo-badge{
  width:86px; height:86px; border-radius:24px; background:var(--red);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 34px rgba(230,57,43,.35);
}
.logo-badge img{ width:56px; height:auto; }
.authhero h1{ font-family:var(--serif); font-size:34px; margin:26px 0 8px; line-height:1.08; font-weight:400; }

.fieldu{ margin:20px 0; border-bottom:1.5px solid var(--line); padding-bottom:10px; }
.fieldu label{
  display:block; font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sub); margin-bottom:7px;
}
.fieldu__row{ display:flex; align-items:center; gap:10px; }
.fieldu input{
  width:100%; border:none; outline:none; background:none;
  font-size:17px; font-weight:600; font-family:inherit; color:var(--ink); min-width:0;
}
.fieldu select{
  width:100%; border:none; outline:none; background:none;
  font-size:17px; font-weight:600; font-family:inherit; color:var(--ink);
  padding:0; margin:0;
}
.fieldu__eye{ flex:none; color:#B9AE9F; padding:2px; }
.fieldu__eye svg{ width:20px; height:20px; }

/* Schermata iniziale "Let's eating social" (Cucino / Magno). */
.app.social{
  background:var(--red) url('../assets/img/bg-social.png') center center / cover no-repeat;
  justify-content:space-between; text-align:center; color:#fff;
  padding:calc(56px + env(safe-area-inset-top)) 30px calc(42px + env(safe-area-inset-bottom));
}
.social__hero{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:24px;
}
.social__mark{ width:92px; height:auto; filter:drop-shadow(0 8px 20px rgba(0,0,0,.18)); }
.social__title{ width:78%; max-width:300px; height:auto; }
.social__choose{
  display:flex; flex-direction:column; gap:13px;
  width:100%; max-width:264px; margin:0 auto 16vh;
}
.social__q{ font-weight:800; font-size:22px; margin:0 0 12px; color:#fff; }
.social__btn{
  width:100%; background:#fff; color:var(--red); font-family:inherit;
  border-radius:999px; font-weight:800; font-size:16px; padding:17px 24px;
  box-shadow:0 12px 30px rgba(0,0,0,.20); transition:transform .08s;
}
.social__btn:active{ transform:scale(.985); }

/* Lista verticale di pulsanti dentro un foglio (scelta accedi/registra/demo). */
.optlist{ display:flex; flex-direction:column; gap:12px; }

/* Barra "ospite": pillola flottante appena sopra la bottom-nav. Solo in demo. */
.guestbar{
  position:fixed; left:50%; transform:translateX(-50%); z-index:49;
  bottom:calc(20px + env(safe-area-inset-bottom) + var(--nav-h) + 12px);
  display:flex; align-items:center; gap:12px;
  max-width:calc(100% - 36px);
  background:var(--dark); color:#fff;
  padding:8px 8px 8px 18px; border-radius:999px;
  box-shadow:0 12px 30px rgba(32,26,20,.24);
  font-size:12.5px; font-weight:700; white-space:nowrap;
}
.guestbar b{ font-weight:800; }
.guestbar a{
  flex:none; background:var(--red); color:#fff;
  padding:8px 16px; border-radius:999px; font-weight:800; font-size:12.5px;
}

/* ============================================================================
   NAVIGAZIONE A PILLOLA FLOTTANTE
   ============================================================================ */

.nav2{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom));
  width:calc(100% - 36px); max-width:424px; height:var(--nav-h); z-index:50;
  background:#ffffffF5; backdrop-filter:blur(12px);
  border-radius:999px; box-shadow:0 14px 34px rgba(32,26,20,.16);
  display:flex; align-items:center; justify-content:space-around; padding:0 10px;
}
.nav2 .ni{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:#B9AE9F; font-size:10px; font-weight:800; flex:1; text-align:center;
}
.nav2 .ni svg{ width:22px; height:22px; }
/* Voce con icona-immagine (es. Scopri = forchetta rossa del brand): spenta da
   inattiva, piena quando selezionata, come le icone a tratto. */
.nav2 .ni__img{ width:22px; height:22px; object-fit:contain; opacity:.45; filter:grayscale(.35); transition:opacity .15s, filter .15s; }
.nav2 .ni.on .ni__img{ opacity:1; filter:none; }
.nav2 .ni.on{ color:var(--red); }
.nav2 .ni__dot{
  position:absolute; top:6px; right:calc(50% - 18px);
  width:8px; height:8px; border-radius:50%; background:var(--red);
  border:2px solid #fff;
}
.nav2 .ni{ position:relative; }

/* ============================================================================
   AGGIUNTE — componenti che il concept non disegnava
   (i dati erano finti: niente posti da calcolare, niente privacy da rispettare,
   niente stati di caricamento o errore)
   ============================================================================ */

/* --- Posti rimasti: e' l'informazione che fa decidere --- */
.seats{ display:flex; align-items:center; gap:11px; margin:16px 0; }
.seats__bar{ flex:1; height:6px; border-radius:999px; background:var(--line); overflow:hidden; }
.seats__fill{ height:100%; border-radius:999px; background:var(--ok); transition:width .3s; }
.seats__fill.is-warm{ background:#D89B2C; }
.seats__fill.is-hot{ background:var(--red); }
.seats__txt{ font-size:12.5px; font-weight:800; color:var(--sub); white-space:nowrap; }
.seats__txt b{ color:var(--red); }

/* --- Partecipanti, gia' filtrati dal backend secondo la privacy --- */
.people{ display:flex; align-items:center; gap:12px; margin:16px 0; }
.people__stack{ display:flex; flex:none; }
.people__stack img,
.people__stack .ph{
  width:36px; height:36px; border-radius:50%; border:2.5px solid var(--bg);
  object-fit:cover; margin-left:-11px; background:#EFE8DC;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:var(--sub);
}
.people__stack > *:first-child{ margin-left:0; }
/* Iconcine ospiti toccabili: al tap mostrano genere ed eta'. */
.people__stack .pav{ cursor:pointer; transition:transform .08s; }
.people__stack .pav:active{ transform:scale(.9); }
.pav--ris{ background:#E4DBCB; }
.people__more{
  width:36px; height:36px; border-radius:50%; border:2.5px solid var(--bg);
  background:var(--ink); color:#fff; margin-left:-11px;
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:800;
}
.people__txt{ font-size:13.5px; font-weight:700; min-width:0; }
.people__txt small{ display:block; color:var(--sub); font-weight:600; font-size:11.5px; margin-top:2px; }

/* --- Riepilogo economico --- */
.pricebox{ background:#fff; border:1.5px solid var(--line); border-radius:18px; padding:16px 18px; margin:18px 0; }
.pricebox__row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 0; font-size:14px; font-weight:600; color:#4A423A;
}
.pricebox__row--tot{
  border-top:1.5px solid var(--line); margin-top:6px; padding-top:14px;
  font-size:17px; font-weight:800; color:var(--ink);
}
.pricebox__note{ font-size:12px; color:var(--sub); margin:10px 0 0; line-height:1.5; font-weight:500; }

/* --- Condizioni economiche per chi apre una tavola (MG.condizioniChef) --- */
.cond__voce{ padding:12px 0; }
.cond__voce b{ display:block; font-size:14px; }
.cond__voce .t-sub{ font-size:13px; }
.cond__sep{ border:0; border-top:1px solid var(--line); margin:0; }
/* "Aprire la tavola non costa nulla" e' la frase che toglie il dubbio a chi
   sta decidendo: sta per prima e si stacca col rosso del marchio. Niente
   sottolineatura — in un foglio pieno di pulsanti si leggerebbe come un link. */
.cond__voce--spicca{ background:var(--red-soft); border-radius:12px; padding:12px 13px; }
.cond__voce--spicca b{ color:var(--red); }

/* --- Stepper numero partecipanti --- */
.stepper{ display:flex; align-items:center; gap:16px; }
.stepper button{
  width:44px; height:44px; border-radius:50%; flex:none;
  border:1.5px solid var(--line); background:#fff; color:var(--ink);
  font-size:22px; font-weight:600; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.stepper button:disabled{ color:#D5CBBB; }
.stepper__val{ font-family:var(--serif); font-size:30px; min-width:44px; text-align:center; }

/* --- Luogo, con la distinzione fra zona pubblica e indirizzo riservato --- */
.place{
  display:flex; align-items:flex-start; gap:12px;
  background:#fff; border:1.5px solid var(--line);
  border-radius:16px; padding:14px 16px; margin:16px 0;
}
.place--warn{ background:var(--warn-bg); border-color:#EFDFBC; }
.place--ko{ background:var(--red-soft); border-color:#F6D5D1; }
.place__ico{ flex:none; color:var(--red); }
.place--warn .place__ico{ color:var(--warn); }
.place__ico svg{ width:20px; height:20px; }
.place__txt{ flex:1; min-width:0; }
.place__nome{ font-weight:800; font-size:14.5px; margin:0 0 3px; }
.place__zona{ font-size:13.5px; color:#4A423A; margin:0; line-height:1.5; font-weight:500; }
.place__hint{
  font-size:12px; color:var(--sub); margin:8px 0 0; line-height:1.45; font-weight:600;
  display:flex; align-items:flex-start; gap:6px;
}
.place__hint svg{ width:14px; height:14px; flex:none; margin-top:1px; }

/* --- Caricamento e vuoto --- */
.spinner{
  width:30px; height:30px; margin:36px auto; display:block;
  border:3px solid var(--line); border-top-color:var(--red);
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.skeleton{
  /* Tinta piatta, non un gradiente animato.
     La versione precedente faceva scorrere un gradiente largo il quadruplo
     dell'elemento: e' un effetto che costa un RIDISEGNO per fotogramma, e su
     una home con una decina di segnaposto contemporanei si sente — proprio
     mentre la pagina sta caricando, cioe' nel momento peggiore. Qui si anima
     solo l'opacita', che il browser compone senza ridipingere nulla. */
  background:#EDE6DA; border-radius:24px;

  /* Invisibile per i primi 250 ms. Se il contenuto arriva prima — e quasi
     sempre arriva prima — non si vede alcuno stato di caricamento: la pagina
     appare gia' completa. Lo spazio pero' e' occupato fin dal primo disegno,
     quindi la proprieta' che conta (niente salti) resta.
     Mostrare un segnaposto per un decimo di secondo e' un lampo, non
     un'informazione: chi guarda ne ricava solo la sensazione di aver aspettato. */
  opacity:0;
  animation:skel-appare .22s ease .25s forwards,
            skel-pulsa 1.5s ease-in-out .47s infinite;
}
@keyframes skel-appare{ to{ opacity:1; } }
@keyframes skel-pulsa{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

/* Chi ha chiesto meno animazioni non le vuole nemmeno qui. */
@media (prefers-reduced-motion: reduce){
  .skeleton{ animation:skel-appare .01s linear .25s forwards; }
}

/* ---- Segnaposto di caricamento -------------------------------------------
   Occupano lo spazio ESATTO del contenuto che sostituiscono. E' questo il
   punto: uno spinner alto 30px sostituito da card alte 330px fa saltare la
   pagina di colpo, e con due chiamate che arrivano in momenti diversi la fa
   saltare due volte — quello che si vede come sfarfallio. Con i segnaposto la
   pagina nasce gia' della sua altezza e il contenuto ci si posa dentro. */
.skel-card{ display:block; height:330px; border-radius:24px; margin-bottom:22px; }
.skel-riga{ display:block; height:78px;  border-radius:18px; margin-bottom:14px; }
/* Tessera cucina: stessa struttura di .cat (icona 62 + gap 8 + etichetta). */
.skel-catcell{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; width:66px;
}
.skel-cat{ width:62px; height:62px; border-radius:20px; }
.skel-catlbl{ width:46px; height:13px; border-radius:7px; }

/* Tessera tema: stessa struttura di .tema (foto 120 + gap 8 + etichetta),
   altrimenti la riga cresce comunque di una trentina di pixel all'arrivo. */
.skel-temacell{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; width:120px;
}
.skel-tema{ width:120px; height:120px; border-radius:20px; }
.skel-temalbl{ width:76px; height:15px; border-radius:8px; }
.skel-titolo{ display:block; height:15px; width:140px; border-radius:8px; margin:0 0 16px; }

/* Attesa su contenuto gia' presente (cambio di filtro): il contenuto resta
   dov'e' e sbiadisce, invece di sparire e tornare. La classe la mette
   MG.attesa() solo se l'attesa dura abbastanza da essere percepita. */
.is-loading{ opacity:.4; pointer-events:none; transition:opacity .2s ease; }

.empty{ text-align:center; padding:44px 18px; }
.empty__ico{
  width:72px; height:72px; margin:0 auto 16px; border-radius:24px;
  background:#fff; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.empty__ico svg{ width:30px; height:30px; color:#C9BFB2; }
.empty__img{ width:100%; max-width:280px; height:auto; margin:0 auto 20px; display:block; }
.empty h3{ font-family:var(--serif); font-size:21px; font-weight:400; color:var(--ink); margin:0 0 8px; }
.empty p{ font-size:14px; line-height:1.55; margin:0 0 20px; color:var(--sub); font-weight:500; }
.empty .btn{ max-width:280px; margin:0 auto; }

/* --- Dialogo di conferma --- */
.dialog-bg{
  position:fixed; inset:0; z-index:300; background:rgba(32,26,20,.55);
  display:flex; align-items:center; justify-content:center; padding:26px;
}
.dialog{ background:var(--bg); border-radius:26px; padding:28px 24px 22px; width:100%; max-width:340px; text-align:center; }
.dialog h3{ font-family:var(--serif); font-size:22px; font-weight:400; margin:0 0 8px; }
.dialog p{ font-size:14px; line-height:1.55; color:var(--sub); margin:0 0 22px; font-weight:500; }
.dialog__actions{ display:flex; flex-direction:column; gap:10px; }

/* --- Foglio dal basso --- */
.sheet-bg{ position:fixed; inset:0; z-index:280; background:rgba(32,26,20,.5); display:flex; align-items:flex-end; }
.sheet{
  background:var(--bg); border-radius:28px 28px 0 0; width:100%;
  margin:0 auto; max-height:88dvh; display:flex; flex-direction:column;
}
.sheet__head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:22px 22px 14px; border-bottom:1px solid var(--line);
}
.sheet__head h3{ font-family:var(--serif); font-size:22px; font-weight:400; margin:0; }
.sheet__close{
  width:34px; height:34px; border-radius:50%; background:#fff; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.sheet__close svg{ width:16px; height:16px; }
.sheet__body{ flex:1; overflow-y:auto; padding:16px 22px; }
.sheet__foot{
  padding:16px 22px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); display:flex; gap:12px;
}

/* --- Notifiche --- */
.notif{ display:flex; gap:13px; padding:15px 0; border-bottom:1px solid var(--line); color:inherit; }
.notif:last-child{ border-bottom:0; }
.notif__dot{ width:8px; height:8px; border-radius:50%; background:var(--red); flex:none; margin-top:6px; }
.notif__dot.is-read{ background:transparent; }
.notif__txt{ flex:1; min-width:0; }
.notif__titolo{ font-weight:800; font-size:14.5px; display:block; }
.notif__corpo{ font-size:13px; color:var(--sub); line-height:1.45; display:block; margin-top:2px; font-weight:500; }

/* --- Grafico a barre chiaro (insight) --- */
.bars-l{ display:flex; align-items:flex-end; gap:8px; height:110px; margin:16px 0 6px; }
.bars-l__col{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; }
.bars-l__bar{ width:100%; background:var(--red); border-radius:6px 6px 0 0; min-height:3px; }
.bars-l__lbl{ font-size:10.5px; color:var(--sub); font-weight:700; white-space:nowrap; }

/* --- Toast --- */
#toast-host{
  position:fixed; left:50%; bottom:calc(var(--nav-h) + 46px + env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:200;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;
}
.toast{
  background:var(--ink); color:#fff; font-weight:700; font-size:13.5px;
  padding:12px 22px; border-radius:999px; box-shadow:0 10px 28px rgba(0,0,0,.28);
  opacity:0; transform:translateY(12px); transition:.28s; white-space:nowrap;
  max-width:88vw; overflow:hidden; text-overflow:ellipsis;
}
.toast.show{ opacity:1; transform:none; }

/* --- Maschera offline --- */
#app-offline{
  position:fixed; inset:0; z-index:400; background:var(--bg);
  display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:30px;
}
#app-offline.is-on{ display:flex; }
#app-offline .logo-badge{ margin-bottom:24px; }
#app-offline h2{ font-family:var(--serif); font-size:24px; font-weight:400; margin:0 0 10px; }
#app-offline p{ font-size:14px; color:var(--sub); line-height:1.55; max-width:320px; margin:0; font-weight:500; }

/* Lavorazione lunga in corso (MG.lavorazione): la foto del menu disegnata
   dall'assistente ci mette una quarantina di secondi. Copre lo schermo di
   proposito — non c'e' niente da fare mentre si aspetta, e uscire dalla pagina
   butterebbe via il risultato. */
.lavoro{
  position:fixed; inset:0; z-index:420; background:rgba(32,26,20,.62);
  display:flex; align-items:center; justify-content:center; padding:26px;
  animation:lavoro-in .18s ease;
}
@keyframes lavoro-in{ from{ opacity:0 } to{ opacity:1 } }
.lavoro__card{
  background:#fff; border-radius:24px; padding:32px 26px; text-align:center;
  max-width:320px; width:100%; box-shadow:0 24px 60px rgba(32,26,20,.28);
}
.lavoro__card .spinner{ margin:0 auto 18px; }
.lavoro__card h3{
  font-family:var(--serif); font-size:21px; font-weight:400; color:var(--ink); margin:0 0 8px;
}
.lavoro__msg{ font-size:14px; line-height:1.55; color:var(--sub); font-weight:500; margin:0; }

/* Comandi di una portata nel menu dello chef: sposta su, sposta giu', togli. */
.portata__cmd{ display:flex; align-items:center; gap:6px; }
.ordbtn{
  width:28px; height:28px; border-radius:9px; background:#F7F2E9;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.ordbtn svg{ width:15px; height:15px; }
.ordbtn[disabled]{ opacity:.3; pointer-events:none; }

/* --- Utilita' --- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.hidden{ display:none !important; }
.divider-lg{ height:1px; background:var(--line); border:0; margin:26px 0; }
.section-note{ font-size:12.5px; color:var(--sub); margin:-8px 0 12px; font-weight:600; line-height:1.5; }
.stack-12 > * + *{ margin-top:12px; }
.stack-16 > * + *{ margin-top:16px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.text-red{ color:var(--red); }
.text-sub{ color:var(--sub); }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }
.mb-8{ margin-bottom:8px; } .mb-16{ margin-bottom:16px; } .mb-24{ margin-bottom:24px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}