/* ==========================================================
   Dolci Notti — stile condiviso (pagina Ordine e pagina Cassa)
   Palette ricavata dal logo (giallo burro + cioccolato + latte)
   e dall'immagine di ispirazione (foto rotonde, bollini prezzo scuri).
   ========================================================== */
:root {
  --burro: #F6C860;          /* fondo del logo */
  --burro-chiaro: #FBE2A4;
  --latte: #FFF8EA;          /* schede e pannelli */
  --cioccolato: #4F2614;     /* testo e pulsanti */
  --fondente: #2C130A;
  --caramello: #9A6838;
  --amarena: #7C1D2C;        /* titoli in corsivo, come nel menu cartaceo */
  --verde: #2F6B3A;
  --ombra: 0 10px 30px -12px rgba(79, 38, 20, .45);
  --script: 'Yellowtail', cursive;
  --testo: 'Baloo 2', system-ui, sans-serif;
  /* colatura di cioccolato (stessa forma del logo), ripetuta in orizzontale */
  --colatura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 56'%3E%3Cpath fill='%234F2614' d='M0 0h120v16c-6 0-9 3-9 9v20a5 5 0 0 1-10 0V27c0-6-4-9-10-9H70c-6 0-8 3-8 8v6a4 4 0 0 1-8 0v-4c0-6-4-10-10-10H32c-6 0-9 3-9 9v16a5.5 5.5 0 0 1-11 0V26c0-6-4-10-12-10z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--testo);
  color: var(--cioccolato);
  background: var(--burro);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; touch-action: manipulation; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--amarena); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Modalità chiosco: niente selezione del testo, niente menu "tieni premuto" */
.kiosk body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.kiosk input { -webkit-user-select: text; user-select: text; }
.kiosk img { -webkit-user-drag: none; pointer-events: none; }

.colatura {
  height: 56px;
  background: var(--colatura) repeat-x top left / 120px 56px;
  pointer-events: none;
}

/* Pulsanti */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 60px; padding: .4em 1.4em;
  border-radius: 999px;
  font-weight: 700; font-size: 1.25rem;
  background: var(--cioccolato); color: var(--latte);
  transition: transform .12s, background .2s;
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .4; }
.btn.secondario { background: transparent; color: var(--cioccolato); box-shadow: inset 0 0 0 3px var(--cioccolato); }
.btn.pericolo { background: transparent; color: var(--amarena); box-shadow: inset 0 0 0 3px var(--amarena); }
.btn.ok { background: var(--verde); }

/* Form di accesso (entrambe le pagine) */
.accesso {
  min-height: 100%; display: grid; place-items: center; padding: 24px;
}
.accesso form {
  width: min(420px, 100%); background: var(--latte); border-radius: 28px;
  padding: 32px 28px; box-shadow: var(--ombra); display: grid; gap: 14px; text-align: center;
}
.accesso img { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto; }
.accesso h1 { font-family: var(--script); font-weight: 400; font-size: 2.6rem; margin: 0; color: var(--amarena); }
.accesso p { margin: 0; }
.campo {
  width: 100%; min-height: 56px; padding: 0 18px; border-radius: 16px;
  border: 2px solid var(--burro); background: #fff; font-size: 1.1rem;
}
.campo:focus { border-color: var(--cioccolato); outline: none; }
.errore { color: var(--amarena); font-weight: 600; min-height: 1.4em; }

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