/* ==========================================================================
   menu_online_unico.css
   Unificazione stili + FIX mobile: [Nome|Carrello|Prezzo] su una sola riga
   Mantiene logiche esistenti (toggle .form-ordine.visible, carrello flottante, ecc.)
   ========================================================================== */

/* === Variabili base / tipografia ======================================= */
:root{
  --primary:#2c3e50;
  --accent:#c17c54;
  --text:#333;
  --muted:#6c757d;
  --soft:#f8f9fa;
  --border:#e5e7eb;
}
body{ background:#fff; color:var(--text); font-family:'Lato',sans-serif; line-height:1.6; }
.container{ max-width:860px; margin:0 auto; padding:20px; background:#fff; }

/* === Header pagina ===================================================== */
.header-ristorante{
  background:var(--primary); color:#fff; text-align:center; padding:15px 0; margin-bottom:20px;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
}
.ristorante-name{ font-family:'Playfair Display',serif; font-size:1.8rem; margin:0; }
.ristorante-subtitle{ font-size:.95rem; opacity:.9; }

/* === Tabs menu online =================================================== */
.nav-tabs{ border-bottom:none; margin-bottom:1.5rem; }
.nav-tabs .nav-link{
  font-weight:600; color:#495057; padding:.75rem 1.5rem; border:none; background:transparent;
}
.nav-tabs .nav-link.active{ color:#dc3545; border-bottom:3px solid #dc3545; background:transparent; }
.tab-content{ padding-top:0; }
.menu-section{ display:none; }
.menu-section.active{ display:block; }

/* === Messaggi di successo ============================================== */
.messaggio-successo{
  background:#d4edda; color:#155724; padding:10px; border-radius:5px; margin:10px 0; border:1px solid #c3e6cb;
}

/* === Carrello flottante (desktop) ====================================== */
.carrello-flottante{
  position:fixed; top:100px; right:20px; background:#fff; border:2px solid #007bff; border-radius:10px;
  padding:15px; box-shadow:0 4px 12px rgba(0,0,0,.15); z-index:1000; max-width:300px;
}
.carrello-header{
  background:#007bff; color:#fff; padding:10px; margin:-15px -15px 15px; border-radius:8px 8px 0 0; text-align:center; font-weight:bold;
}
.carrello-item{ display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid #eee; }
.carrello-totale{
  font-weight:bold; font-size:1.1em; color:#dc3545; margin-top:10px; padding-top:10px; border-top:2px solid #007bff;
}
.btn-svuota-carrello{ background:#dc3545; color:#fff; border:none; padding:5px 10px; border-radius:4px; margin-top:10px; width:100%; }

/* === Categorie ========================================================== */
.categoria-title{
  font-family:'Playfair Display',serif; font-size:1.6rem; color:var(--primary);
  margin:30px 0 20px; padding-bottom:8px; border-bottom:2px solid var(--accent); text-align:center; position:relative;
}
.categoria-title::after{ content:""; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%); width:60px; height:2px; background:var(--accent); }

/* === Carta piatti ======================================================= */
.piatto-item{ 
  margin-bottom:20px; 
  padding-bottom:15px; 
  border-bottom:1px dashed #e0d5c7; 
}

/* HEADER riga piatto - Layout OTTIMIZZATO: [Nome + Allergeni] a SINISTRA, [Popolare | Prezzo | Carrello] a DESTRA */
.piatto-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.piatto-info-principale {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.piatto-nome {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--primary);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Allergeni - A SINISTRA VICINO AL NOME DEL PIATTO */
.btn-allergeni{
  background:#dc3545; border:none; color:#ffc107; font-size:.85rem; padding:2px 6px; border-radius:50%;
  cursor:pointer; font-weight:600; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  flex-shrink: 0;
  margin-left: 8px; /* VICINO al nome, a DESTRA del nome */
}
.btn-allergeni:hover{ background:#c82333; color:#ffd54f; }

/* Contenitore a destra: Popolare + Prezzo + Carrello */
.piatto-destra {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Badge popolare - Nella sezione destra */
.badge-popolare{
  background:#f39c12; color:#fff; font-size:.8rem; padding:4px 6px; border-radius:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}

/* Prezzo posizionato a destra */
.piatto-prezzo-header {
  font-weight: 700;
  color: var(--primary);
  font-size: 1.1rem;
  white-space: nowrap;
}

.allergeni-container{ margin-top:8px; display:none; flex-wrap:wrap; gap:6px; }
.allergene-badge{ background:#f8f9fa; border:1px solid #dee2e6; color:#5a6268; font-size:.8rem; padding:3px 8px; border-radius:4px; font-weight:600; }

/* ICONA CARRELLO PIÙ PICCOLA - DOPO IL PREZZO (STESSA GRANDEZZA DELLE ALTRE ICONE) */
.btn-acquista {
  background: #28a745;
  color: #fff;
  border: none;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.btn-acquista:hover {
  background: #218838;
  transform: scale(1.05);
}

/* Descrizione */
.piatto-descrizione{ font-size:.95rem; color:#555; margin:8px 0; font-weight:600; line-height:1.5; }

/* === Form ordine (toggle via .visible) ================================== */
.form-ordine{
  background:var(--soft); padding:15px; border-radius:8px; margin-top:15px; border-left:3px solid #007bff; display:none;
}
.form-ordine.visible{ display:block; }

/* === CORREZIONE: QUANTITÀ E PULSANTI SULLA STESSA RIGA ================== */
.quantita-selector{ 
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 0;
  justify-content: space-between;
  width: 100%;
  flex-wrap: nowrap; /* IMPEDISCE IL WRAP */
}

.quantita-selector label {
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* QUANTITÀ RIDOTTA (massimo 2 cifre) */
.qty-mobile{
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: auto; /* Spinge tutto il resto a destra */
}

.qty-mobile .quantita-input{
  width: 50px;
  text-align: center;
  border: 0;
  padding: 8px 4px;
  outline: none;
  background: #fff;
  font-weight: 600;
  font-size: 0.95rem;
}

/* PULSANTI AGGIUNGI/ANNULLA SULLA STESSA RIGA (A DESTRA) - STESSA GRANDEZZA DELL'ICONA CARRELLO */
.azioni-form-compact {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* ICONE AGGIUNGI E ANNULLA DELLA STESSA GRANDEZZA DELL'ICONA CARRELLO (36px) */
.btn-aggiungi-compact {
  background: #28a745;
  color: #fff;
  border: none;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  transition: all 0.2s;
}

.btn-annulla-compact {
  background: #6c757d;
  color: #fff;
  border: none;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  transition: all 0.2s;
}

.btn-aggiungi-compact:hover {
  background: #218838;
  transform: translateY(-1px);
}

.btn-annulla-compact:hover {
  background: #5a6268;
  transform: translateY(-1px);
}

/* === Responsive: comportamento voluto =================================== */
@media (max-width:768px){
  /* Carrello flottante divinta blocco normale */
  .carrello-flottante{ position:static; max-width:100%; margin:20px 0; }

  /* Layout mobile: Nome + Allergeni a SINISTRA, Popolare | Prezzo | Icona Carrello a DESTRA su una riga */
  .piatto-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  
  .piatto-info-principale {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    flex: 1;
  }
  
  .piatto-destra {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  
  .btn-acquista {
    margin: 0 !important;
  }
  
  .piatto-nome {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Icona allergeni più vicina su mobile */
  .btn-allergeni {
    margin-left: 6px;
  }

  /* Form mobile: TUTTO SULLA STESSA RIGA */
  .quantita-selector {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: space-between;
  }
  
  /* Label quantità */
  .quantita-selector > label {
    flex-shrink: 0;
    margin-bottom: 0;
    white-space: nowrap;
  }
  
  /* Contenitore quantità con pulsanti +/- */
  .qty-mobile {
    flex-shrink: 0;
    margin-right: auto;
  }
  
  /* Contenitore azioni - a destra sulla stessa riga */
  .azioni-form-compact {
    display: flex;
    gap: 8px;
    margin-left: auto; /* Spinge a destra */
    width: auto !important;
    margin-top: 0 !important;
    flex-shrink: 0;
  }

  /* piccoli aggiustamenti tipografici */
  .ristorante-name{ font-size:1.6rem }
  .categoria-title{ font-size:1.4rem; margin:25px 0 15px }
  .piatto-descrizione{ font-size:.93rem }
}

/* XS */
@media (max-width:576px){
  .ristorante-name{ font-size:1.5rem }
  .btn-allergeni{ font-size:.8rem }
  .piatto-prezzo-header { font-size: 1rem; }
  
  /* RIDUCI LEGGERMENTE IL BADGE POPOLARE SU SCREEN PICCOLI, MA NON NASCONDERLO */
  .badge-popolare {
    font-size: 0.7rem;
    padding: 3px 5px;
  }
}

@media (max-width:460px){
  .categoria-title{ font-size:1.3rem; letter-spacing:.3px }
  .btn-acquista, 
  .btn-aggiungi-compact,
  .btn-annulla-compact {
    width: 34px;
    height: 34px;
    padding: 5px 7px;
  }
  .qty-mobile .quantita-input{ width: 45px; padding: 6px 3px; }
  /* Per schermi molto stretti, riduci il gap */
  .quantita-selector {
    gap: 6px;
  }
  .azioni-form-compact {
    gap: 6px;
  }
  
  /* RIDUCI ULTERIORMENTE IL BADGE POPOLARE SU SCREEN MOLTO STRETTI */
  .badge-popolare {
    font-size: 0.65rem;
    padding: 2px 4px;
  }
}

/* Per schermi ultra stretti */
@media (max-width: 360px){
  .quantita-selector {
    gap: 4px;
  }
  .azioni-form-compact {
    gap: 4px;
  }
  .btn-acquista,
  .btn-aggiungi-compact,
  .btn-annulla-compact {
    width: 32px;
    height: 32px;
    padding: 4px 6px;
    font-size: 0.8rem;
  }
  .quantita-selector > label {
    font-size: 0.9rem; /* Riduci leggermente la label */
  }
  /* Icona allergeni più piccola su schermi molto stretti */
  .btn-allergeni {
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    margin-left: 4px;
  }
  
  /* BADGE POPOLARE ANCORA PIÙ COMPATTO */
  .badge-popolare {
    font-size: 0.6rem;
    padding: 2px 3px;
    border-radius: 10px;
  }
}

/* === Quantità con pulsanti +/- (sempre attivi) ========================= */
.qty-mobile{
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.qty-mobile .quantita-input{
  width: 64px;
  text-align: center;
  border: 0;
  padding: 8px 6px;
  outline: none;
  background: #fff;
  font-weight: 600;
}

/* bottoni - / + */
.qty-btn{
  appearance: none;
  border: 0;
  background: var(--soft);
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  user-select: none;
}
.qty-btn:active{ transform: translateY(0.5px); }

/* rimuovi le freccette native dell'input number (tutti i browser) */
.quantita-input::-webkit-outer-spin-button,
.quantita-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.quantita-input[type="number"]{ -moz-appearance: textfield; }

/* --- FIX: pulsanti quantità sempre a destra dell'input (no wrap) --- */
.qty-mobile{
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.qty-mobile .quantita-input{
  flex: 0 0 64px;
  width: 64px;
  text-align: center;
  border: 0;
  padding: 8px 6px;
  outline: none;
  background: #fff;
  font-weight: 600;
}

/* Bottoni - / + */
.qty-btn{
  appearance: none;
  flex: 0 0 auto;
  border: 0;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  user-select: none;
}

/* Colori richiesti */
.qty-minus{ background: #dc3545; color: #fff; }
.qty-plus { background: #28a745; color: #fff; }

.qty-minus:hover{ filter: brightness(0.95); }
.qty-plus:hover { filter: brightness(0.95); }

.qty-btn:active{ transform: translateY(0.5px); }

/* Rimuovi freccette native */
.quantita-input::-webkit-outer-spin-button,
.quantita-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.quantita-input[type="number"]{ -moz-appearance: textfield; }

/* Ultra-compatto su schermi molto stretti */
@media (max-width: 360px){
  .qty-mobile .quantita-input{ flex-basis: 56px; width: 56px; padding: 6px 4px; }
  .qty-btn{ padding: 6px 10px; }
}

/* blocca selezione/caret del campo quantità */
.qty-mobile{ user-select: none; }
.quantita-input{
  caret-color: transparent;
  pointer-events: none;
}

/* spazio leggero tra i due pulsanti - / + */
.qty-minus + .qty-plus{
  margin-left: 6px;
}

/* (opzionale) sottile separatore visivo tra i due pulsanti */
.qty-plus{
  border-left: 1px solid rgba(255,255,255,.35);
}

/* spazio tra quantità e pulsante "-" */
.quantita-input + .qty-minus{
  margin-left: 8px;
}

/* spazio tra "-" e "+" */
.qty-minus + .qty-plus{
  margin-left: 6px;
}

/* === Footer ============================================================= */
.footer{ background:var(--primary); color:#fff; text-align:center; padding:20px; margin-top:40px; font-size:.9rem }

/* === Compat: header/footer container trasparente (come in online.css) === */
.header-ristorante .container, .footer .container{ background:transparent !important; }