/* Capri Blu Totem v0.4.27 - coerenza pulsanti flusso iniziale */

:root {
  --cb-navy: #0b3150;
  --cb-navy-2: #123f6d;
  --cb-glass: rgba(9, 39, 64, 0.82);
  --cb-glass-soft: rgba(18, 63, 109, 0.64);
  --cb-cream: #fff1bf;
  --cb-white: #ffffff;
  --cb-line: rgba(255, 255, 255, 0.34);
  --cb-shadow: 0 12px 30px rgba(0,0,0,.24);
}

/* Pulsanti indietro: niente piu bianco pieno */
#screen-home .back-button,
#screen-zone .back-button,
#screen-table .back-button,
#screen-confirm .back-button,
#screen-people .back-button,
#screen-allergens .back-button {
  background: rgba(7, 40, 67, .82) !important;
  color: var(--cb-white) !important;
  border: 1.5px solid rgba(255,255,255,.48) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18) !important;
  font-weight: 800 !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#screen-home .back-button:hover,
#screen-zone .back-button:hover,
#screen-table .back-button:hover,
#screen-confirm .back-button:hover,
#screen-people .back-button:hover,
#screen-allergens .back-button:hover {
  background: var(--cb-navy-2) !important;
  border-color: var(--cb-cream) !important;
  transform: translateY(-1px);
}

/* Scelta zona: card navy/glass coerenti col pannello */
#screen-zone .zone-card {
  background: linear-gradient(160deg, rgba(18,63,109,.92), rgba(8,39,64,.88)) !important;
  color: var(--cb-white) !important;
  border: 1.5px solid rgba(255,255,255,.36) !important;
  border-radius: 22px !important;
  box-shadow: var(--cb-shadow) !important;
  min-height: 190px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#screen-zone .zone-card strong,
#screen-zone .zone-card span {
  color: var(--cb-white) !important;
}

#screen-zone .zone-card strong {
  font-size: clamp(1.55rem, 2.2vw, 2.15rem) !important;
}

#screen-zone .zone-card span {
  opacity: .82;
}

#screen-zone .zone-card:hover,
#screen-zone .zone-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--cb-cream) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.30), 0 0 0 2px rgba(255,241,191,.15) !important;
}

#screen-zone .zone-card-takeaway {
  background: linear-gradient(160deg, rgba(111,77,12,.92), rgba(73,48,4,.90)) !important;
  border-color: rgba(255,241,191,.72) !important;
}

#screen-zone .zone-card-takeaway strong {
  color: var(--cb-cream) !important;
}

/* Tavoli: NON sovrascrivere colori e stati.
   Il sistema originale gestisce libero / occupato / selezionato e deve restare visibile. */

/* Selettore persone */
#screen-people .people-selector,
#screen-people .people-control,
#screen-people .people-stepper {
  gap: 28px !important;
}

#screen-people #people-minus,
#screen-people #people-plus {
  width: 88px !important;
  height: 88px !important;
  border-radius: 22px !important;
  background: linear-gradient(160deg, rgba(18,63,109,.96), rgba(8,39,64,.94)) !important;
  color: var(--cb-white) !important;
  border: 2px solid rgba(255,255,255,.45) !important;
  box-shadow: var(--cb-shadow) !important;
  font-size: 2rem !important;
  font-weight: 900 !important;
}

#screen-people #people-minus:hover,
#screen-people #people-plus:hover {
  color: var(--cb-cream) !important;
  border-color: var(--cb-cream) !important;
  transform: translateY(-2px);
}

/* Call to action del flusso: stesso linguaggio visivo */
#screen-home .button-primary,
#screen-zone .button-primary,
#screen-table .button-primary,
#screen-confirm .button-primary,
#screen-people .button-primary,
#screen-allergens .button-primary {
  background: var(--cb-cream) !important;
  color: var(--cb-navy) !important;
  border: 1.5px solid var(--cb-cream) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.20) !important;
  font-weight: 900 !important;
}

#screen-home .button-secondary,
#screen-zone .button-secondary,
#screen-table .button-secondary,
#screen-confirm .button-secondary,
#screen-people .button-secondary,
#screen-allergens .button-secondary {
  background: rgba(8,39,64,.72) !important;
  color: var(--cb-white) !important;
  border: 1.5px solid rgba(255,255,255,.44) !important;
  border-radius: 16px !important;
  font-weight: 800 !important;
}

/* Le box informative diventano piu leggere, senza competere con i pulsanti */
#screen-people .cover-charge-box,
#screen-people .coperto-box,
#screen-people .summary-box,
#screen-confirm .summary-box {
  background: rgba(6,33,55,.38) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 20px !important;
  color: var(--cb-white) !important;
}

@media (max-width: 820px) {
  #screen-zone .zone-grid { gap: 14px !important; }
  #screen-zone .zone-card { min-height: 150px; border-radius: 18px !important; }
  #screen-people #people-minus,
  #screen-people #people-plus { width: 74px !important; height: 74px !important; border-radius: 18px !important; }
}