/* --------------------------------------------------------------------------
   La pagina d'ordine dell'asporto e la pagina dell'ordine.

   Si appoggia al foglio del widget (/widget/widget.css): stessi colori, gia'
   misurati per le WCAG 2.1 AA (testo 4,5:1, bordi dei controlli 3:1), stesso
   anello del fuoco, stesso accento del locale messo da brand.js. Qui ci sono
   solo i pezzi che il widget non ha: le scelte a riquadro, i piatti con il
   contatore, il carrello, i passi dell'ordine.
   -------------------------------------------------------------------------- */

fieldset.block {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

fieldset.block + .section,
.block.first {
  margin-top: 4px;
}

legend.label {
  margin: 0 0 10px;
  padding: 0;
  font-weight: 600;
}

#payBox {
  margin-top: 16px;
}

/* --- scelte: ritiro o consegna, come pagare ------------------------------ */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choices.column {
  flex-direction: column;
}

/* In colonna la base di 140px di .choice diventa l'altezza: «Pago al ritiro»
   usciva in un riquadro alto 140 pixel (collaudo del 23/10/2026). */
.choices.column .choice {
  flex-basis: auto;
}

.choice {
  display: flex;
  flex: 1 1 140px;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.92rem;
  cursor: pointer;
}

.choice input {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  accent-color: var(--accent);
}

.choice:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.field.cap {
  flex: 0 1 120px;
}

/* --- fasce --------------------------------------------------------------- */
#days:empty,
#slots:empty {
  display: none;
}

#days {
  margin-bottom: 10px;
}

/* Una fascia piena si vede ma non si sceglie: il cliente capisce che c'era. */
.time:disabled {
  border-style: dashed;
  color: var(--ink-faint);
  cursor: default;
}

.time small {
  display: block;
  font-size: 0.72rem;
}

/* --- piatti -------------------------------------------------------------- */
.menu-section + .menu-section {
  margin-top: 16px;
}

.menu-section h3 {
  margin: 0 0 6px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dish {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

.dish-text {
  min-width: 0;
}

.dish-name {
  font-weight: 600;
}

.dish-desc,
.dish-allergens {
  margin: 2px 0 0;
  color: var(--ink-faint);
  font-size: 0.82rem;
}

.dish-price {
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.dish-soldout {
  color: var(--warn);
  font-size: 0.82rem;
}

.qty {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
}

.qty .step {
  width: 36px;
  height: 36px;
}

.qty output {
  min-width: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* --- carrello e totali ---------------------------------------------------- */
.cart {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cart li,
.totals div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
}

.totals {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
}

.totals .total {
  font-weight: 600;
}

.totals .muted {
  color: var(--ink-soft);
}

/* --- la pagina dell'ordine ------------------------------------------------ */
.order-number {
  margin: 0 0 4px;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 6px;
  padding: 0;
  list-style: none;
}

.steps li {
  padding: 4px 9px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-faint);
  font-size: 0.78rem;
}

.steps li.done {
  border-color: var(--line);
  color: var(--ink-soft);
}

/* Il passo di adesso: pieno, nel colore del locale, e detto anche a parole (aria-current). */
.steps li[aria-current='step'] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.contact {
  margin-top: 14px;
  font-size: 0.9rem;
}