/* Prenotazione dei tavoli: stile del modulo a passi (Nexorat Lab, 31/10/2026).
   Prende carattere e colore del testo dal sito; il sito cambia solo le variabili --tv-* (di solito l'accento). */
.tavoli {
  --tv-accento: #7a1f1f;
  --tv-su-accento: #fff;
  --tv-linea: color-mix(in srgb, currentColor 16%, transparent);
  --tv-tenue: color-mix(in srgb, currentColor 62%, transparent);
  --tv-fondo-tasto: color-mix(in srgb, currentColor 5%, transparent);
  --tv-raggio: 10px;
  --tv-ok: #1f6b3b;
  --tv-attesa: #8a5a00;
  --tv-errore: #a3221b;
  max-width: 34rem;
  margin-inline: auto;
  line-height: 1.5;
  text-align: start;
}
/* :where() = forza zero: le regole dei singoli tasti (colore del bottone pieno) vincono sempre su queste */
:where(.tavoli) *, :where(.tavoli) *::before, :where(.tavoli) *::after { box-sizing: border-box; }
:where(.tavoli) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.tavoli) button { cursor: pointer; }
:where(.tavoli) button:disabled { cursor: not-allowed; }
.tavoli :focus-visible { outline: 2px solid var(--tv-accento); outline-offset: 2px; }
.tv-icona { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* i passi */
.tv-passi[hidden] { display: none; }
.tv-passi { list-style: none; display: flex; gap: .25rem; margin: 0 0 1.25rem; padding: 0; }
.tv-passo { flex: 1 1 0; min-width: 0; border-top: 3px solid var(--tv-linea); padding-top: .5rem; font-size: .85rem; color: var(--tv-tenue); }
.tv-passo.fatto, .tv-passo.corrente { border-top-color: var(--tv-accento); color: inherit; }
.tv-passo button { all: unset; display: flex; gap: .4rem; align-items: center; cursor: pointer; max-width: 100%; border-radius: 4px; }
.tv-passo button:hover .tv-nome { text-decoration: underline; }
.tv-passo:not(:has(button)) { display: flex; gap: .4rem; align-items: center; }
.tv-num { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid currentColor; font-size: .75rem; flex: none; }
.tv-passo.fatto .tv-num { background: var(--tv-accento); border-color: var(--tv-accento); color: var(--tv-su-accento); }
.tv-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* titoli e testi: interlinea larga, le righe non si toccano */
.tv-titolo { margin: 0 0 .9rem; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); line-height: 1.22; outline: none; }
.tv-sottotitolo { margin: -.4rem 0 1rem; color: var(--tv-tenue); }
.tv-servizio { margin: 1.2rem 0 .6rem; font-size: 1rem; line-height: 1.3; }
.tv-nota { margin: 1rem 0 0; font-size: .92rem; color: var(--tv-tenue); }
.tv-nota a, .tv-riquadro a, .tv-spunta a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.tv-avviso:empty { display: none; }
.tv-avviso { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--tv-raggio); border-inline-start: 4px solid var(--tv-accento); background: var(--tv-fondo-tasto); }
.tv-avviso[data-tipo="errore"] { border-inline-start-color: var(--tv-errore); }
.tv-avviso[data-tipo="ok"] { border-inline-start-color: var(--tv-ok); }
.tv-riquadro { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--tv-raggio); background: var(--tv-fondo-tasto); }
.tv-riquadro.attesa { border-inline-start: 4px solid var(--tv-attesa); }

/* tasti */
.tv-tasto { min-height: 3rem; border: 1px solid var(--tv-linea); border-radius: var(--tv-raggio); background: var(--tv-fondo-tasto); transition: border-color .15s, background-color .15s; }
.tv-tasto:hover:not(:disabled) { border-color: var(--tv-accento); }
.tv-tasto.scelto { background: var(--tv-accento); border-color: var(--tv-accento); color: var(--tv-su-accento); }
.tv-griglia-persone { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.tv-griglia-persone .tv-tasto { font-size: 1.15rem; min-height: 3.4rem; }
.tv-piu { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; }
.tv-campo-select { min-height: 2.75rem; padding: 0 .75rem; border: 1px solid var(--tv-linea); border-radius: var(--tv-raggio); background: transparent; }
.tv-campo-select option { color: #111; }

/* calendario */
.tv-mese { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.tv-nome-mese { display: inline-block; font-weight: 600; }
.tv-nome-mese::first-letter { text-transform: uppercase; }
.tv-freccia { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--tv-linea); border-radius: 50%; background: transparent; }
.tv-freccia:disabled { opacity: .3; }
.tv-calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
.tv-giorno-settimana { text-align: center; font-size: .78rem; color: var(--tv-tenue); padding-bottom: .2rem; text-transform: capitalize; }
.tv-giorno { position: relative; aspect-ratio: 1; min-height: 2.6rem; border: 1px solid var(--tv-linea); border-radius: var(--tv-raggio); background: var(--tv-fondo-tasto); font-variant-numeric: tabular-nums; }
.tv-giorno:hover:not(:disabled) { border-color: var(--tv-accento); }
.tv-giorno.oggi { font-weight: 700; }
.tv-giorno.scelto { background: var(--tv-accento); border-color: var(--tv-accento); color: var(--tv-su-accento); }
.tv-giorno:disabled { background: transparent; border-color: transparent; color: var(--tv-tenue); opacity: .55; }
.tv-giorno.pieno:disabled { text-decoration: line-through; }
.tv-giorno.attesa::after, .tv-legenda .attesa .tv-segno::after { content: ""; position: absolute; left: 50%; bottom: 18%; width: .35rem; height: .35rem; margin-left: -.175rem; border-radius: 50%; background: var(--tv-attesa); }
.tv-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .9rem 0 0; padding: 0; font-size: .82rem; color: var(--tv-tenue); }
.tv-legenda li { display: flex; align-items: center; gap: .4rem; }
.tv-segno { position: relative; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 5px; font-size: .72rem; line-height: 1; }
.tv-legenda .pieno .tv-segno { text-decoration: line-through; }
.tv-legenda .chiuso .tv-segno { border: 1px dashed var(--tv-linea); }
.tv-legenda .attesa .tv-segno { border: 1px solid var(--tv-linea); background: var(--tv-fondo-tasto); }

/* orari */
.tv-griglia-ore { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .5rem; }
.tv-ora { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .35rem; font-variant-numeric: tabular-nums; }
.tv-ora small { font-size: .7rem; line-height: 1.2; color: var(--tv-tenue); }
.tv-ora.attesa small { color: var(--tv-attesa); }
.tv-ora.scelto small { color: inherit; }
.tv-ora:disabled { opacity: .5; text-decoration: line-through; }

/* modulo */
.tv-modulo { display: grid; gap: .9rem; }
.tv-riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .9rem; }
.tv-campo { display: grid; gap: .3rem; min-width: 0; }
.tv-campo label { font-weight: 600; font-size: .92rem; }
.tv-facoltativo { font-weight: 400; color: var(--tv-tenue); }
.tv-campo input, .tv-campo textarea { width: 100%; min-height: 2.9rem; padding: .6rem .8rem; border: 1px solid var(--tv-linea); border-radius: var(--tv-raggio); background: transparent; font-size: 1rem; }
.tv-campo textarea { resize: vertical; min-height: 5rem; }
.tv-campo input:focus, .tv-campo textarea:focus { border-color: var(--tv-accento); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tv-accento) 22%, transparent); }
.tv-campo.sbagliato input, .tv-campo.sbagliato textarea { border-color: var(--tv-errore); }
.tv-errore { margin: 0; font-size: .85rem; color: var(--tv-errore); }
/* la casella della privacy resta nativa: si vede la spunta (errore n. 53) */
.tv-spunta { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; align-items: start; font-size: .95rem; }
.tv-spunta input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--tv-accento); }
.tv-spunta .tv-errore { grid-column: 2; }
/* inset-inline-start e non left: in ebraico e arabo (dir="rtl") quello che esce a sinistra allarga la pagina (errore n. 90) */
.tv-trappola { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* azioni */
.tv-azioni { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; align-items: center; margin-top: 1.2rem; }
.tv-azioni-gestione { justify-content: flex-start; }
.tv-primario, .tv-secondario, .tv-pericolo { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.9rem; padding: .55rem 1.2rem; border-radius: 999px; font-weight: 600; text-decoration: none; }
.tv-primario { border: 1px solid var(--tv-accento); background: var(--tv-accento); color: var(--tv-su-accento); }
.tv-primario:hover:not(:disabled) { filter: brightness(1.08); }
.tv-primario:disabled { opacity: .7; }
.tv-secondario { border: 1px solid var(--tv-linea); background: transparent; }
.tv-secondario:hover { border-color: currentColor; }
.tv-pericolo { border: 1px solid var(--tv-errore); background: transparent; color: var(--tv-errore); }
.tv-pericolo:hover:not(:disabled) { background: var(--tv-errore); color: #fff; }
.tv-collegamento { border: 0; background: none; padding: .4rem 0; text-decoration: underline; text-underline-offset: .15em; color: var(--tv-tenue); }
.tv-domanda { flex-basis: 100%; margin: 0; font-weight: 600; }

/* riepilogo ed esito */
.tv-riepilogo { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.2rem; margin: 0 0 1rem; padding: 1rem 1.1rem; border: 1px solid var(--tv-linea); border-radius: var(--tv-raggio); }
.tv-riepilogo dt { color: var(--tv-tenue); }
.tv-riepilogo dd { margin: 0; overflow-wrap: anywhere; }
.tv-esito-segno { display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .6rem; border-radius: 50%; background: var(--tv-ok); color: #fff; }
.tv-esito-segno .tv-icona { width: 1.6rem; height: 1.6rem; }
.tv-esito-segno.da_confermare, .tv-esito-segno.attesa { background: var(--tv-attesa); }
.tv-esito-testo { margin: 0 0 1rem; font-size: 1.05rem; }
.tv-link { padding: 1rem 1.1rem; border-radius: var(--tv-raggio); background: var(--tv-fondo-tasto); }
.tv-link p { margin: 0 0 .4rem; }
.tv-link .tv-nota { margin: .5rem 0 .8rem; }
.tv-link-indirizzo { display: block; overflow-wrap: anywhere; font-size: .9rem; color: inherit; }
/* il messaggio per il ristorante, mandato dal cliente col suo WhatsApp (05/11/2026) */
.tv-whatsapp { margin: 0 0 1rem; padding: 1rem 1.1rem; border: 1px solid var(--tv-linea); border-radius: var(--tv-raggio); }
.tv-whatsapp-titolo { margin: 0 0 .3rem; font-weight: 600; }
.tv-whatsapp .tv-nota { margin: 0 0 .9rem; }
.tv-icona-piena { fill: currentColor; stroke: none; }
.tv-stato { display: inline-block; margin: 0 0 1rem; padding: .25rem .8rem; border-radius: 999px; font-size: .88rem; font-weight: 600; background: var(--tv-fondo-tasto); border: 1px solid var(--tv-linea); }
.tv-stato.confermata { color: var(--tv-ok); border-color: currentColor; }
.tv-stato.da_confermare, .tv-stato.attesa { color: var(--tv-attesa); border-color: currentColor; }
.tv-stato.annullata, .tv-stato.rifiutata { color: var(--tv-errore); border-color: currentColor; }

@media (max-width: 400px) {
  .tv-passo { font-size: .78rem; }
  .tv-passo:not(.fatto):not(.corrente) .tv-nome { display: none; }
  .tv-passo.fatto .tv-num { display: none; }   /* sul telefono la barra rossa basta: lo spazio va alla scelta fatta */
  .tv-calendario { gap: .2rem; }
  .tv-riepilogo { grid-template-columns: 1fr; gap: .1rem; }
  .tv-riepilogo dd { margin-bottom: .45rem; }
}
@media (prefers-reduced-motion: reduce) { .tavoli * { transition: none !important; } }

/* da destra a sinistra (ebraico, arabo): le frecce di mese e «Indietro» si girano, il resto segue da solo (03/11/2026) */
[dir="rtl"] .tavoli .tv-freccia .tv-icona, [dir="rtl"] .tavoli .tv-secondario .tv-icona { transform: scaleX(-1); }