/* Progettato per chi il telefono lo sopporta, non lo ama:
   caratteri grandi, bersagli grandi, contrasto alto, niente decorazioni. */
:root {
  --arancio: #e8492b;
  --scuro: #1c1c1c;
  --chiaro: #ffffff;
  --grigio: #f0f0f0;
  --bordo: #cccccc;
  --verde: #1a7f37;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; font-family: system-ui, -apple-system, sans-serif;
  font-size: 20px; line-height: 1.4; color: var(--scuro); background: var(--chiaro);
}
header {
  background: var(--scuro); color: var(--chiaro);
  padding: 16px; font-size: 22px; font-weight: 700;
  position: sticky; top: 0; z-index: 10;
}
main { padding: 16px; padding-bottom: 140px; }
.schermata { display: none; }
.schermata.attiva { display: block; }
button {
  font-size: 22px; font-family: inherit; padding: 18px;
  border: 2px solid var(--bordo); border-radius: 12px;
  background: var(--chiaro); width: 100%; margin-bottom: 12px; cursor: pointer;
}
button.principale { background: var(--arancio); color: var(--chiaro); border-color: var(--arancio); font-weight: 700; }
button.grande { font-size: 26px; padding: 24px; }
/* Un bottone spento deve SEMBRARE spento anche quando ha un colore suo:
   senza questo, Invia disabilitato resta arancione pieno. */
button:disabled { opacity: 0.45; cursor: default; }
.elenco button { text-align: left; }
.elenco .titoletto { font-size: 16px; color: #666; margin: 20px 0 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.ore-rapide { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ore-rapide button { margin-bottom: 0; }
.totale { font-size: 28px; font-weight: 700; padding: 16px 0; }
.riga {
  border: 2px solid var(--bordo); border-radius: 12px;
  padding: 14px; margin-bottom: 12px;
}
.riga .dettaglio { font-size: 17px; color: #555; }
.avviso {
  background: #fff4e5; border: 2px solid var(--arancio);
  border-radius: 12px; padding: 14px; margin-bottom: 16px; font-size: 18px;
}
.conferma {
  background: #e8f5e9; border: 2px solid var(--verde); color: var(--verde);
  border-radius: 12px; padding: 16px; margin-bottom: 16px;
  font-size: 20px; font-weight: 700;
}
.fascia {
  background: #fff4e5; border: 3px solid var(--arancio);
  border-radius: 12px; padding: 16px; margin-bottom: 20px;
}
.fascia .titolo { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.fondo {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--chiaro); border-top: 2px solid var(--bordo); padding: 16px;
}
input[type="text"], input[type="tel"], input[type="search"] {
  font-size: 22px; padding: 16px; width: 100%;
  border: 2px solid var(--bordo); border-radius: 12px; font-family: inherit;
}
.piepagina { font-size: 16px; color: #666; margin-top: 28px; }
.piepagina a { color: #666; }