/* Il widget del demo, uguale a quello che il cliente vede davvero.
 *
 * [8/8/2026] PERCHE' ESISTE, oltre a mt-style-plugin.css. Quel foglio e' la
 * copia esatta del CSS del plugin, ma sul sito del cliente il widget non e'
 * vestito solo da quello: il tema di WordPress ci mette del suo. Il risultato
 * che il ristoratore vede davvero e' la SOMMA dei due, e il titolare quando
 * dice «uguale» intende uguale a quello, non uguale al foglio del plugin.
 *
 * QUESTI VALORI NON SONO INVENTATI NE' STIMATI A OCCHIO: sono i valori
 * calcolati (getComputedStyle) letti sul widget vero di srwebdemo l'8/8/2026.
 * Se un giorno il widget vero cambia, si rileggono e si riscrivono qui: non si
 * "aggiustano" guardando due schermate affiancate.
 *
 * Va caricato DOPO mt-style-plugin.css.
 */

.mt-booking {
  background: transparent;
  padding: 32px 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* [8/8/2026] 645px: e' la larghezza del widget VERO dentro la colonna del
     sito del cliente, misurata. Senza, il clone si allargava a tutta la
     pagina e i bottoni uscivano 328 invece di 138: stessi stili, forma
     diversa. La larghezza fa parte dell'«uguale» quanto i colori. */
  max-width: 645px;
  margin: 0 auto;
  font-family: Inter, -apple-system, system-ui, "Segoe UI", sans-serif;
  color: #1a1a1a;
}

.mt-booking .mt-title    { font-size: 24px; font-weight: 400; color: #1a1a1a; margin: 0 0 4px; }
.mt-booking .mt-subtitle { font-size: 14px; color: #6b7280; }

/* [8/8/2026] I PASSI: il pallino ATTIVO e' blu pieno, quelli NON ancora
   raggiunti sono VUOTI con bordo e testo grigi. Prima li avevo fatti tutti
   blu perche' avevo misurato il PRIMO elemento, che e' l'attivo, e avevo
   generalizzato: stesso errore di leggere un solo caso e dedurne la regola.
   Questi sono i quattro passi misurati uno per uno sul widget vero. */
.mt-booking .mt-step span {
  background: transparent !important;
  color: #9ca3af !important;
  border: 1.5px solid #d1d5db !important;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 30px; box-sizing: border-box;
}
.mt-booking .mt-step.active span {
  background: #3b82f6 !important;
  color: #fff !important;
  border-color: #3b82f6 !important;
}
.mt-booking .mt-step        { font-size: 13px; color: #9ca3af; font-weight: 500; gap: 8px; }
.mt-booking .mt-step.active { color: #1a1a1a; }

.mt-booking .mt-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.mt-booking .mt-panel-title { font-size: 17px; font-weight: 400; color: #1a1a1a; margin: 0 0 20px; }

/* [8/8/2026] I BOTTONI USANO ARIAL, i titoli Inter. Non e' un dettaglio: il
   mio clone usava Inter dappertutto ed era il motivo per cui le forme non
   tornavano. Misurato con getComputedStyle sul widget vero. */
.mt-booking .mt-guest-btn {
  background: #fff;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 22px 4px !important;
  font-size: 20px !important; font-weight: 700 !important; color: #1a1a1a;
  font-family: Arial, sans-serif !important;
}

/* Il bordo del bottone locale e' ORO, non blu: il blu della schermata del
   titolare era il bottone SELEZIONATO. */
/* Il bordo e' ORO anche nel widget vero: il blu che sembrava esserci era una
   svista della mia cattura, non del prodotto. Misurato: 186x55. */
.mt-booking .mt-location-btn {
  background: #fff;
  border: 2px solid #c9a96e !important;
  border-radius: 10px !important;
  padding: 16px 28px !important;
  font-size: 16px !important; font-weight: 600 !important; color: #1a1a1a;
  font-family: Arial, sans-serif !important;
}

/* [8/8/2026] Il locale SELEZIONATO e' blu pieno con testo bianco, non un
   contorno oro: e' cosi' nel widget vero dal secondo passo in poi. */
.mt-booking .mt-location-btn.active {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #fff !important;
}