/* ==========================================================================
   MENU.CSS — Stile completo per il menu (responsive)
   Obiettivo chiave: NOME | PREZZO sempre sulla stessa riga (anche su smartphone)
   ========================================================================== */
:root{
  --primary-color:#2c3e50;
  --accent-color:#c17c54;
  --text-color:#333333;
  --light-bg:#f9f5f0;
  --border-color:#e0d5c7;
}

/* Base */
body{
  background:#fff;
  color:var(--text-color);
  font-family:'Lato',sans-serif;
  line-height:1.6;
  padding-bottom:60px;
}
.container{max-width:860px;margin:0 auto;padding:20px;background:#fff;}

/* Header */
.header-ristorante{
  background:var(--primary-color);
  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:.9rem;opacity:.8;letter-spacing:1px}

/* Intro */
.container-menu{max-width:700px;margin:0 auto;padding:0 15px}
.menu-intro{text-align:center;font-style:italic;color:#666;margin-bottom:30px;padding:0 10px;font-weight:500}

/* Categorie */
.categoria-title{
  font-family:'Playfair Display',serif;
  font-size:1.6rem;
  color:var(--primary-color);
  margin:30px 0 20px;
  padding-bottom:8px;
  border-bottom:2px solid var(--accent-color);
  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-color);
}

/* Piatti */
.piatto-item{
  margin-bottom:20px;
  padding-bottom:15px;
  border-bottom:1px dashed var(--border-color);
}

/* === Riga NOME | PREZZO: sempre stessa riga ===
   Nome elastico (con ellissi) | Prezzo a destra (no wrap). */
.piatto-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) max-content; /* nome | prezzo */
  align-items:center;
  column-gap:10px;
  width:100%;
}

/* Dentro la cella del nome: nome + icone/bottoni in linea */
.piatto-info-principale{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;              /* consente l'ellissi */
  flex-wrap:nowrap;         /* evita che gli elementi interni vadano a capo */
}

/* Il testo del nome è l’unico a stringersi */
.piatto-nome{
  font-weight:700;
  font-size:1.1rem;
  color:var(--primary-color);
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;   /* “…” quando non c’è spazio */
}

.piatto-prezzo{
  justify-self:end;
  white-space:nowrap;       /* MAI a capo */
  font-weight:700;
  color:var(--accent-color);
  font-size:1.1rem;
  font-variant-numeric:tabular-nums; /* allineamento cifre più pulito */
}

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

/* Badge Popolare: sola icona, ma manteniamo il “palloncino” */
.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;
}

/* Bottone allergeni */
.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;margin-left:5px;
}
.btn-allergeni:hover{background:#c82333;color:#ffd54f}

/* Allergeni (nascosti finché non si clicca) */
.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;
}

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

/* Responsive tipografico */
@media (max-width:768px){
  .ristorante-name{font-size:1.6rem}
  .categoria-title{font-size:1.4rem;margin:25px 0 15px}
  .piatto-descrizione{font-size:.93rem}
}
@media (max-width:576px){
  .ristorante-name{font-size:1.5rem}
  .btn-allergeni{font-size:.8rem}
}
@media (max-width:460px){
  .categoria-title{font-size:1.3rem;letter-spacing:.3px}
}

/* Stampa */
@media print{
  body{background:#fff;color:#000}
  .container{padding:0}
  .btn-allergeni{display:none!important}
  .categoria,.piatto-item{break-inside:avoid;page-break-inside:avoid}
}
/* --- Tweak finali --- */

/* 1) Prezzo: stesso font/colore del nome piatto */
.piatto-prezzo{
  color: var(--primary-color) !important; /* come .piatto-nome */
  font-family: inherit;                   /* stesso font del testo */
  /* manteniamo peso e dimensione attuali */
}

/* 2) Box "Informazioni sugli allergeni": bordo rosso sottile tutt’intorno */
.info-allergeni{
  border: 1px solid #dc3545 !important;   /* rosso sottile */
  border-radius: 5px;                      /* conserviamo gli angoli arrotondati */
  /* il background e il resto restano invariati */
}
/* Prezzo leggermente più piccolo del nome (≈ -5%) */
.piatto-prezzo{
  font-size: 0.95em !important;
}