/* =====================================================================
   IL SITO DEI CLIENTI — la grafica (15 ottobre, sera)

   Scelta della proprieta' fra tre proposte: la "B", L'INSEGNA. Una
   fascia rossa in alto come la tenda di una pizzeria, il logo INTERO su
   un cartello bianco, il resto chiaro e leggero. Il logo non si ritaglia:
   ha il suo fondo bianco, e sul chiaro sta bene cosi' com'e'. (La prima
   grafica, scura, lo ritagliava, e i bordi venivano male: bocciata.)

   Un file solo per le tre pagine (la vetrina, prenota, ordina): stessi
   colori, stessi bottoni, stessi campi. Ogni pagina tiene solo i suoi
   pezzi propri.

   I CARATTERI STANNO QUI, in /sito/caratteri/ (Bricolage Grotesque per i
   titoli, Karla per il testo; licenza libera OFL). Non si prendono da
   Google Fonts: direbbe a Google chi visita il sito.
   ===================================================================== */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/sito/caratteri/bricolage.woff2) format("woff2"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/sito/caratteri/karla.woff2) format("woff2"); }

:root {
  --fondo: #ffffff;
  --fondo-2: #faf3ee;      /* i riquadri: un bianco caldo */
  --carta-scura: #ffffff;  /* campi e bottoni di scelta */
  --bordo: #eedfd5;
  --rosso: #d7261e;
  --rosso-scuro: #b51d16;
  --rosso-tenue: #fde9e7;
  --crema: #231a17;        /* l'inchiostro forte: prezzi, totali */
  --inchiostro: #231a17;
  --testo: #231a17;
  --spento: #86716a;
  --ok: #1d7a45;
  --ok-tenue: #e4f4ea;
  --avviso: #8f5400;
  --avviso-tenue: #fff1da;
  --titoli: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --corpo: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--fondo); }
body {
  margin: 0; background: var(--fondo); color: var(--testo); font-family: var(--corpo);
  line-height: 1.5; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.contenuto { max-width: 40rem; margin: 0 auto; padding: 0 1rem; }

h1, h2, h3, .titolo { font-family: var(--titoli); font-weight: 800; line-height: 1.15; text-wrap: balance; }
h2 { font-size: 1.5rem; margin: 1.8rem 0 .6rem; }
h3 { font-size: 1.1rem; margin: 1.4rem 0 .5rem; color: var(--rosso); }
.nota { color: var(--spento); font-size: .92rem; }

/* La fascia rossa delle pagine interne: il logo piccolo, il titolo, "indietro" */
.testata {
  position: sticky; top: 0; z-index: 8; background: var(--rosso); color: #fff;
  padding: calc(env(safe-area-inset-top) + .55rem) 1rem .55rem; box-shadow: 0 4px 14px rgba(120,20,10,.18);
}
.testata .contenuto { display: flex; align-items: center; gap: .75rem; padding: 0; }
.testata img { display: block; width: 3rem; height: 3rem; border-radius: .8rem; background: #fff; padding: .15rem; object-fit: contain; }
.testata h1 { margin: 0; font-size: 1.35rem; flex: 1; }
.testata a { color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem; }

/* I bottoni */
.principale, .barra button {
  display: block; width: 100%; min-height: 3.5rem; border: none; border-radius: 999px; cursor: pointer;
  background: var(--rosso); color: #fff; font-family: var(--titoli); font-weight: 800; font-size: 1.15rem;
  transition: transform .08s ease, background .15s ease;
}
.principale { margin: 1.4rem 0 .6rem; }
.principale:active, .barra button:active { transform: scale(.98); background: var(--rosso-scuro); }
.principale:disabled { opacity: .45; }
.principale:focus-visible, .barra button:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 2px; }
.piatto { background: none; border: none; color: var(--spento); font: inherit; text-decoration: underline; cursor: pointer; padding: .4rem 0; }

/* Le scelte a bottoni: quanti, che giorno, che ora */
.scelte { display: flex; flex-wrap: wrap; gap: .5rem; }
.scelte button, .due button {
  min-width: 3.3rem; min-height: 3.1rem; padding: .4rem .9rem; border-radius: .9rem; cursor: pointer;
  border: 1px solid var(--bordo); background: var(--fondo-2); color: var(--testo); font: inherit; font-weight: 700;
}
.scelte button small { display: block; font-weight: 400; font-size: .75rem; color: var(--spento); }
.scelte button:disabled { opacity: .35; cursor: default; }
.scelte button.su-richiesta { border-style: dashed; }
.scelto, .scelte button.scelto {
  background: var(--rosso) !important; border-color: var(--rosso) !important; color: #fff !important;
}
.scelto small { color: #ffdcd8 !important; }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.due button { min-height: 3.6rem; font-size: 1.1rem; font-family: var(--titoli); font-weight: 800; }

/* I campi */
label { display: block; font-weight: 700; margin: .9rem 0 .3rem; color: var(--testo); }
input[type=text], input[type=tel], input[type=email], input[type=number], textarea {
  width: 100%; font: inherit; font-size: 1.05rem; padding: .8rem .9rem; border-radius: .9rem;
  border: 1px solid #e2cfc3; background: var(--carta-scura); color: var(--testo);
}
input::placeholder, textarea::placeholder { color: #b3a49c; }
input:focus, textarea:focus { outline: 2px solid var(--rosso); outline-offset: 1px; border-color: transparent; }
textarea { min-height: 4.5rem; resize: vertical; }
.casella { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; margin: .8rem 0; color: var(--spento); }
.casella input { width: 1.35rem; height: 1.35rem; flex: none; margin-top: .15rem; accent-color: var(--rosso); }
.codice { font-size: 2rem !important; letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums; }

/* I riquadri */
.riquadro, .riassunto {
  background: var(--fondo-2); border: 1px solid var(--bordo); border-radius: 1.1rem; padding: 1rem; margin: .8rem 0;
}
.riassunto { font-weight: 700; }
.errore { background: var(--rosso-tenue); color: var(--rosso-scuro); border-radius: .9rem; padding: .8rem 1rem; font-weight: 700; margin: .8rem 0; }
.prova { background: var(--avviso-tenue); color: var(--avviso); border-radius: .9rem; padding: .8rem 1rem; margin: .8rem 0; font-weight: 700; }

/* Il risultato: fatto, in attesa, no */
.fatto, .stato { text-align: center; padding: 2rem 0; }
.fatto .grande, .stato .grande { font-family: var(--titoli); font-size: 1.7rem; font-weight: 800; margin: .6rem 0; }
.fatto.ok .grande, .stato.ok .grande { color: var(--ok); }
.fatto.attesa .grande, .stato.attesa .grande { color: var(--avviso); }
.stato.no .grande { color: var(--rosso); }

/* La barra in basso (ordina) */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--bordo);
  padding: .7rem 1rem calc(env(safe-area-inset-bottom) + .7rem);
}
.barra button { max-width: 38rem; margin: 0 auto; }

/* Il pannello che sale dal basso (ordina: la pizza, le aggiunte) */
.velo { position: fixed; inset: 0; background: rgba(35,26,23,.55); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.pannello {
  background: var(--fondo); color: var(--testo); width: 100%; max-width: 40rem; max-height: 92vh; overflow-y: auto;
  border-radius: 1.4rem 1.4rem 0 0; padding: 1.1rem 1rem calc(env(safe-area-inset-bottom) + 1rem);
}

/* Il piede: scuro, come il riquadro delle informazioni */
.piede {
  margin-top: 3rem; background: var(--inchiostro); color: #cbbab2; font-size: .88rem;
  padding: 1.8rem 1rem calc(env(safe-area-inset-bottom) + 1.8rem);
}
.piede .contenuto > div { margin-bottom: .3rem; }
.piede a { color: #fff; }

/* IT | EN (15 ottobre, sera, 073): la lingua, in alto a destra */
.lingue { display: inline-flex; gap: 2px; background: rgba(255,255,255,.18); border-radius: 999px; padding: 2px; flex: none; }
.lingue button { border: none; background: transparent; color: #fff; font: inherit; font-weight: 700; font-size: .8rem;
  min-width: 2.5rem; min-height: 2rem; border-radius: 999px; cursor: pointer; }
.lingue button.scelta { background: #fff; color: var(--rosso); }
.lingue button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }