/* =========================================
   1. FONTS & VARIABLES
   ========================================= */

/* Great Vibes - Regular */
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/great-vibes-v21-latin-regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/noto-serif-jp-v33-latin-regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/noto-serif-jp-v33-latin-700.woff2') format('woff2');
  font-display: swap;
}

/* Cormorant Garamond (Serif) */
@font-face {
  font-family: 'Serif';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Serif';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Serif';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/cormorant-garamond-v21-latin-700.woff2') format('woff2');
  font-display: swap;
}



/* Playfair Display (Serif) */
@font-face {
  font-family: 'Serif';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/playfair-display-v40-latin-regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Serif';
  font-style: italic;
  font-weight: 400;
  src: url('./fonts/playfair-display-v40-latin-italic.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Serif';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/playfair-display-v40-latin-500.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Serif';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/playfair-display-v40-latin-700.woff2') format('woff2');
  font-display: swap;
}

:root {
  --font-heading: 'Great Vibes', cursive;
  --font-body: 'Noto Serif', serif;
  --font-menu: 'Noto Serif', serif;

  --color-heading: #ae1c2c;
  /* Rosso principale/titoli */
  --color-body: #4a4a4a;
  /* Testo paragrafi */
  --color-accent: #f2c70e;
  /* Giallo dettagli */
  --color-bg-light: #fffcf2;
  /* Sfondo chiaro ristorante */
}

/* =========================================
   2. BASE & TYPOGRAPHY
   ========================================= */

body,
p,
ul,
ol,
li {
  font-family: var(--font-body);
  color: var(--color-body);
  line-height: 1.6;
}

p {
  font-size: large;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: #444;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  margin-bottom: 0.5em;
  font-weight: 400;
  font-size: large;
}

.h-regular {
  font-family: var(--font-menu) !important;
  font-weight: 400;
  margin-bottom: 0.5em;
  font-style: italic;
  font-size: 85%;
}


.heading-variant {
  font-family: var(--font-body);
}

/* Links */
a {
  color: var(--color-heading);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--color-accent);
  text-decoration: underline;
}

/* Liste */
ul.menu-list,
ol.menu-list {
  padding-left: 0;
}

ul.menu-list li {
  margin-bottom: 0.6em;
  font-size: 1rem;
}

/* Decorazioni testo */
.accent-text {
  font-family: 'Great Vibes', cursive;
  font-size: 1.8rem;
  color: var(--color-heading);
  display: block;
  margin-bottom: -10px;
}


/* PADDING RIDOTTO per la sezione rossa (per non appesantire) */
.py-section {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.mb-huge {
  margin-bottom: 80px !important;
}

/* TITOLI: Rimosso lo spazio sotto */
.italic-title {
  font-size: 4.8rem !important;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
  margin-bottom: 30px !important;
  /* Rimuove lo spazio tra titolo e testo */
  text-align: left;
}

/* PARAGRAFI: Allineati a sinistra e attaccati al titolo */
.small-paragraph {
  font-size: 1rem !important;
  line-height: 1.6;
  color: #555;
  max-width: 650px;
  margin-top: 5px !important;
  margin-left: 10px;
  margin-right: 10px;
  /* Spazio minimo per leggibilità */
  text-align: left;
}


/* =========================================
   3. BUTTONS
   ========================================= */

.btn-primary-custom {
  background-color: var(--color-heading);
  border: none;
  /* Uniformato senza bordo come da blocco hero */
  color: #ffffff;
  padding: 12px 30px;
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 50px;
  /* Stile "pill" più moderno (dal tuo blocco hero) */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.btn-primary-custom:hover,
.btn-primary-custom:focus,
.btn-primary-custom:active {
  background-color: #8a1722;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(167, 29, 42, 0.4);
}

.btn-outline-custom {
  background-color: transparent;
  border: 2px solid var(--color-heading);
  color: var(--color-heading);
  padding: 0.6em 1.4em;
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.25s ease;
}

.btn-outline-custom:hover,
.btn-outline-custom:focus,
.btn-outline-custom:active {
  background-color: var(--color-heading);
  color: #ffffff;
}

.btn-detail-custom {
  background-color: var(--color-accent);
  border: 2px solid var(--color-accent);
  color: #1c1c1c;
  padding: 0.6em 1.3em;
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.25s ease;
}

.btn-detail-custom:hover,
.btn-detail-custom:focus,
.btn-detail-custom:active {
  background-color: #d9b109;
  border-color: #d9b109;
  color: #1c1c1c;
}

/* =========================================
   4. NAVBAR, HEADER & HERO
   ========================================= */


#mainNav {
  /* Manteniamo la posizione fissa senza sovrascrivere le dimensioni */
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;

  /* Transizione solo per il colore di sfondo e l'ombra */
  background-color: transparent !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Quando si attiva lo scroll (classe is-fixed) */
#mainNav.is-fixed {
  background-color: #fffcf2 !important;
  /* Colore crema del brand */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* NON aggiungiamo padding o height qui per evitare il bug del salto */
}

/* --- Gestione Colore Testo --- */

/* Stato Trasparente: testo bianco per risaltare sul video */
#mainNav .nav-link {
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  font-weight: 500;
}

/* Stato Colorato: testo scuro per la leggibilità sullo sfondo crema */
#mainNav.is-fixed .nav-link {
  color: #4a4a4a !important;
  text-shadow: none;
}

/* 1. Colore base per i link non attivi */
.navbar-nav .nav-link {
  color: #ffffff !important;
  /* Un grigio scuro o nero per i link normali */
  transition: color 0.3s ease;
}

/* 2. Colore al passaggio del mouse (Hover) */
.navbar-nav .nav-link:hover {
  color: #ae1c2c !important;
  /* Diventa rosso quando ci passi sopra */
}

/* 3. Colore della PAGINA CORRENTE (Stato Attivo) */
/* Bootstrap aggiunge automaticamente la classe .active al link o all'item */
#navbarResponsive .nav-link.active {
  color: #ae1c2c !important;
  font-weight: 700;
  /* Opzionale: rende il testo più grassetto per evidenziarlo */
}

/* Classe per bloccare le dimensioni del logo */
.navbar-logo-fixed {
  width: 223.98px !important;
  height: 32px !important;
  object-fit: contain;
  /* Mantiene le proporzioni originali senza deformare */
  display: block;
  /* Evita spazi vuoti sotto l'immagine */
}

/* Rende fluida la rotazione della freccia */
.navbar-nav .dropdown-toggle::after {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.35s ease-in-out;
}

/* Applica la rotazione quando il dropdown è aperto */
/* Il selettore .show viene aggiunto da Bootstrap al genitore .nav-item */
.navbar-nav .nav-item.dropdown.show .dropdown-toggle::after {
  transform: rotate(180deg);
}

/* Reset Margini Header */
header.masthead,
header.hero,
.intro-header,
h1.site-title {
  margin-top: 0 !important;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

/* Struttura Hero/Masthead */
.hero,
.masthead {
  position: relative;
  height: 70vh;
  overflow: hidden;
  margin-bottom: 0 !important;
}

.mainHeader {
  position: relative;
  height: 70vh;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent !important;
  background: none !important;
}

/* Overlay & Video */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(135deg, rgba(147, 38, 49, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%);
  z-index: 1;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
  /* LIVELLO BASE */
}

/* Contenuti Hero */
.hero-content,
.container {
  position: relative;
  z-index: 10;
}

.hero-content {
  color: white;
  text-align: center;
  margin-top: 30vh;
}

h1.site-title {
  font-size: 5rem;
  font-weight: 400;
  color: var(--color-bg-light);
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
  margin-bottom: 10px;
  line-height: 1.1;
}

.subheading {
  font-weight: 300;
  font-style: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 1.2rem;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
  margin-bottom: 10px;
  line-height: 1.1;
}

/* =========================================
   5. SECTIONS & BACKGROUNDS
   ========================================= */

section {
  padding-top: 100px !important;
  /* Spazio generoso sopra */
  padding-bottom: 100px !important;
  /* Spazio generoso sotto */
}

/* Sfondi Personalizzati */
.bg-restaurant-yellow {
  background-color: var(--color-bg-light);
}

.bg-restaurant-red {
  background-color: var(--color-heading);
  color: #fdfdfd;
}

.bg-restaurant-red h1,
.bg-restaurant-red h2,
.bg-restaurant-red h3 {
  color: var(--color-bg-light);
  font-weight: 400;
  letter-spacing: 0.5px;
}

.bg-restaurant-red p {
  font-size: large;
  color: var(--color-bg-light);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.bg-restaurant-red a,
.bg-restaurant-red i {
  color: var(--color-bg-light);
}

.bg-restaurant-red a {
  transition: opacity 0.2s ease-in-out;
}

.bg-restaurant-red a:hover {
  opacity: 0.8;
}

/* Sezione Menù */
h2.section-heading {
  font-size: 3rem;
  font-weight: 400;
  margin-top: 0.7em;
  margin-bottom: 0.7em;
}

/* =========================================
   SEZIONE MENÙ - STILI UNIFICATI
   ========================================= */

.section-menu {
  background-color: #fdfaf6;
  padding: 2em 1em;
  margin-top: 2em;
  /* Se hai il file paper-texture.jpg decommenta la riga sotto */
  /* background-image: url('/media/paper-texture.jpg'); */
  background-size: auto;
  background-repeat: repeat;
}

.section-menu h3.menu-heading {
  font-family: var(--font-heading);
  font-size: 3.5rem !important;
  color: var(--color-heading);
  margin-top: 1em;
  margin-bottom: 0.5em;
  text-align: center;
}

/* Contenitore bianco del menu */
.menu-border {
  border: 1px solid rgba(174, 28, 44, 0.1);
  padding: 25px;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(174, 28, 44, 0.08);
  margin-bottom: 2rem;
}

/* Immagini del menu */
.menu-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  padding: 0 15px;
  /* Spazio bianco ai lati */
  border-radius: 25px !important;
  /* Arrotondamento deciso */
  overflow: hidden;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
}

.menu-img:hover {
  transform: scale(1.03);
}

/* Logo all'interno del menu */
.menu-logo-wrapper {
  display: flex;
  justify-content: center;
  margin: 2rem 0 1rem;
}

.menu-logo {
  max-width: 450px;
  /* Aumentato per permettere una dimensione maggiore */
  width: 75%;
  /* Aumentato da 45% a 75% per occupare più spazio */
  height: auto;
  /* Mantiene le proporzioni */
  transition: transform 0.3s ease;
}

/* Singola riga del piatto */
.menu-item {
  display: flex !important;
  align-items: baseline;
  justify-content: flex-start;
  width: 100%;
  padding: 8px 0;
  margin-bottom: 0.5rem;
  list-style: none;
  font-family: var(--font-menu);
}

/* Nome del piatto */
.menu-item span[data-i18n] {
  flex-shrink: 1;
  /* <-- CAMBIATO: Ora il testo può restringersi */
  min-width: 0;
  /* Permette al flex-item di scendere sotto la dimensione del contenuto */
  word-wrap: break-word;
  /* Spezza le parole se troppo lunghe */
  padding-right: 5px;
  font-family: var(--font-body);
  font-weight: 500;
  order: 1;
}

/* Linea tratteggiata dinamica (Attaccata a .menu-item, non allo span!) */
.menu-item::after {
  content: "";
  flex-grow: 1;
  flex-shrink: 1;
  /* Permette ai puntini di sparire se il testo occupa tutto lo spazio */
  border-bottom: 1px dotted var(--color-heading);
  opacity: 0.3;
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
  top: -4px;
  order: 2;
  min-width: 10px;
  /* Evita che i puntini si attacchino troppo se c'è poco spazio */
}

.menu-item-description {
  font-size: 0.9rem;
  color: var(--color-body);
  margin-top: -1rem;
  margin-bottom: 0.5rem;
  margin-right: 3rem;
  padding-left: 10px;
  list-style: none;
}

.menu-item-important-note {
  font-size: 0.85rem;
  color: var(--color-heading);
  font-weight: 600;
  margin-top: -0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 10px;
  list-style: none;
}

.menu-item-note {
  font-size: 0.5rem;
  font-style: italic;
  color: var(--color-body);
  margin-bottom: 0.5rem;
  margin-right: 3rem;
  padding-left: 10px;
  list-style: none;
}

/* Prezzo */
.menu-item .price {
  flex-shrink: 0;
  /* Impedisce al prezzo di andare a capo */
  font-family: var(--font-menu);
  font-weight: 700;
  color: var(--color-heading);
  text-align: right;
  min-width: 50px;
  /* Riserva uno spazio fisso per i prezzi */
  order: 3;
  /* <-- FONDAMENTALE: Posiziona il prezzo al 3° posto */
}

/* =========================================
   EFFETTI INTERATTIVI (Immagini e Card)
   ========================================= */

.hover-zoom {
  /* Imposta una transizione morbida per i movimenti */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  /* Assicura che appaia la "manina" del cursore */
}

.hover-zoom:hover {
  /* Solleva l'immagine verso l'alto di 5px e la ingrandisce impercettibilmente (2%) */
  transform: translateY(-5px) scale(1.02);
  /* Amplia l'ombra per dare un effetto 3D di distacco dalla pagina */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

/* =========================================
   6. FORMS & INPUTS
   ========================================= */

/* Controlli Generali */
.form-control {
  color: var(--color-body);
}

.form-control::placeholder {
  color: var(--color-heading);
  opacity: 1;
}

.form-control:focus {
  border-color: var(--color-heading) !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.05);
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label {
  color: var(--color-heading) !important;
}

/* International Telephone Input (ITI) */
.iti {
  width: 100%;
  display: block;
}

.iti .form-control {
  height: 58px !important;
  padding-top: 10px;
}

.iti__country-list {
  z-index: 9999 !important;
  background-color: #fff !important;
  color: #333 !important;
  border: 1px solid #ccc !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  max-width: 300px;
}

.iti__country-name,
.iti__dial-code {
  color: #333 !important;
}

.iti__country:hover {
  background-color: #f0f0f0 !important;
}

/* Data & Ora */
.date-wrapper,
.time-wrapper {
  position: relative;
}

input[type="date"],
input[type="time"] {
  color-scheme: light;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

.date-icon,
.time-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  /* Fondamentale */
  font-size: 1.2rem;
  color: var(--color-heading);
}

/* =========================================
   7. FOOTER
   ========================================= */

footer#main-footer {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.footer-menu li {
  margin: 0.4em 0;
}

.footer-menu li a {
  color: white;
  font-size: 1rem;
  text-decoration: none;
}

.footer-menu li a:hover,
.footer-highlight {
  color: var(--color-accent);
}

.footer-description {
  line-height: 1.6;
  color: #bebebe;
}

.social-icon {
  font-size: 1.5rem;
  color: var(--color-accent);
  transition: 0.2s;
}

.social-icon:hover {
  color: #ffffff;
}

/* =========================================
   8. PRIVACY POLICY & COOKIE BANNER
   ========================================= */

/* Privacy Policy */
.privacy-heading,
.privacy-title-main {
  font-family: 'Open Sans', sans-serif !important;
  font-style: normal !important;
  color: var(--color-heading) !important;
}

.privacy-heading {
  font-weight: 700 !important;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.privacy-title-main {
  font-weight: 800 !important;
  margin-bottom: 0.5rem;
}

/* Cookie Banner */
.cm__btn[data-role="all"],
.pm__btn[data-role="all"] {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(174, 28, 44, 0.2);
  transition: all 0.3s ease;
  background: var(--color-heading) !important;
}

.cm__btn[data-role="necessary"],
.pm__btn[data-role="necessary"] {
  text-decoration: underline;
  background: var(--color-heading) !important;
}

#cc-main .c-mask {
  background: rgba(179, 179, 179, 0.5);
  backdrop-filter: blur(3px);
}

.cm__desc a,
.pm__section a {
  color: var(--color-heading) !important;
  text-decoration: underline;
}

.section__toggle:checked~.toggle__icon {
  background-color: var(--color-heading) !important;
  color: #1c1c1c !important;
}

/* =========================================
   9. MEDIA QUERIES (MOBILE)
   ========================================= */

@media (max-width: 991.98px) {
  h1.site-title {
    font-size: 2.2rem;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
  }

  h2.section-heading {
    font-size: 2.4rem;
    font-weight: 400;
    /* Corretto da font-size: 400 */
  }

  ul.menu-list li {
    font-size: 0.95rem;
  }

  .italic-title {
    font-size: 2.5rem !important;
  }

  .py-section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  #mainNav {
    background-color: var(--color-bg-light) !important;
  }

  .navbar-nav .nav-item .nav-link {
    color: #ae1c2c !important;
  }

  .nav-link,
  .nav-link:visited,
  .nav-link:hover,
  .nav-link:active {
    color: #ae1c2c !important;
  }

  /* Aumentiamo lo spazio tra le voci del menu */
  #navbarResponsive .nav-item {
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    /* Linea sottile di separazione */
  }

  /* Stile per la voce attiva nel menu mobile */
  #navbarResponsive .nav-link.active {
    background-color: rgba(174, 28, 44, 0.05);
    /* Leggero sfondo rosso */
    border-left: 5px solid #ae1c2c;
    /* Barretta rossa laterale */
    padding-left: 15px !important;
  }

  /* Rimuovi il bordo dall'ultima voce per pulizia */
  #navbarResponsive .nav-item:last-child {
    border-bottom: none;
  }

  /* Crea una linea sottile a sinistra del link attivo nel menu mobile */
  .navbar-nav .nav-link.active {
    border-left: 4px solid #ae1c2c;
    padding-left: 15px !important;
    /* Compensa lo spessore del bordo */
  }


  /* Spaziatura e stile del contenitore che collassa */
  #navbarResponsive {
    /* Colore di fondo per distacco */
    padding: 20px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 10px;
  }

  /* Spaziatura tra le voci principali (HOME, MENU, PRENOTA) */
  #navbarResponsive .nav-item {
    padding: 10px 20px;
    /* Aumenta lo spacing verticale */
  }

  /* Miglioramento del testo dei link */
  #navbarResponsive .nav-link {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    /* Spaziatura tra le lettere per un look premium */
    color: #ae1c2c !important;
    /* Il rosso del tuo brand */
    font-weight: 600;
    display: block;
  }

  /* Allineamento dropdown lingua su mobile */
  #navbarResponsive .nav-item.dropdown {
    border-top: 1px solid rgba(174, 28, 44, 0.1);
    margin-top: 10px;
    padding-top: 20px;
  }

  /* Stile per il sottomenu delle lingue aperto */
  #navbarResponsive .dropdown-menu {
    border: none;
    background-color: transparent;
    padding-left: 20px;
  }

  #navbarResponsive .dropdown-item {
    padding: 12px 0;
    font-size: 1rem;
    color: #555;
  }

  /* Effetto hover/active per feedback visivo */
  #navbarResponsive .nav-link:active {
    background-color: rgba(174, 28, 44, 0.05);
  }

  /* Rendi il menu delle lingue animato */
  #navbarResponsive .dropdown-menu {
    display: block;
    /* Forziamo il blocco per gestire l'altezza */
    max-height: 0;
    /* Partiamo da altezza zero */
    overflow: hidden;
    /* Nascondiamo il contenuto */
    opacity: 0;
    /* Invisibile */
    transition: all 0.4s ease-in-out;
    /* Velocità dell'animazione */
    border: none;
    padding: 0;
    /* Rimuovi padding iniziale */
    margin: 0;
  }

  /* Quando il dropdown viene aperto (Bootstrap aggiunge la classe .show) */
  #navbarResponsive .dropdown-menu.show {
    max-height: 300px;
    /* Un'altezza sufficiente a contenere tutte le lingue */
    opacity: 1;
    /* Diventa visibile */
    padding-top: 10px;
    /* Ripristina lo spazio interno */
    padding-bottom: 10px;
  }

  /* Miglioriamo lo spacing dei singoli elementi lingua */
  #navbarResponsive .dropdown-item {
    padding: 10px 25px;
    transition: background 0.3s;
  }

  /* Ruota la freccia del dropdown quando è aperto */
  #navbarResponsive .dropdown-toggle::after {
    transition: transform 0.3s ease;
  }

  #navbarResponsive .nav-item.show .dropdown-toggle::after {
    transform: rotate(180deg);
  }

  .dropdown-menu li a {
    padding: 15px 20px;
    /* Aumenta lo spazio sopra e sotto il testo */
    display: block;
    /* Assicura che l'intera riga sia cliccabile */
    margin-bottom: 5px;
    /* Distanzia leggermente i blocchi tra loro */
  }

  .navbar-logo {
    height: 40px;
    /* Leggermente più piccolo su mobile */
  }

  /* Contenitore principale */
  .menu-item {
    padding: 5px 0;
    /* Ridotto il padding verticale per guadagnare spazio */
    margin-bottom: 0.3rem;
  }

  /* Nome del piatto - Più piccolo */
  .menu-item span[data-i18n] {
    font-size: 0.85rem;
    /* Prima era ~1rem o 0.95rem */
    flex-shrink: 1;
    /* Fondamentale per non uscire dai bordi */
    line-height: 1.2;
    /* Più compatto se va su due righe */
  }

  /* Prezzo - Più piccolo */
  .menu-item .price {
    font-size: 0.85rem;
    min-width: 40px;
    /* Occupa meno spazio orizzontale */
  }

  /* Descrizione - Più piccola */
  .menu-item-description {
    font-size: 0.75rem;
    /* Molto sottile e discreta */
    margin-top: -0.8rem;
    /* Avvicina la descrizione al titolo */
    margin-right: 1rem;
    /* Ridotto il margine destro per usare più spazio */
    line-height: 1.1;
  }

  /* Nota importante (es. allergeni) */
  .menu-item-important-note {
    font-size: 0.7rem;
    margin-top: -0.4rem;
  }

  /* Nota a piè di pagina (il carattere piccolissimo) */
  .menu-item-note {
    font-size: 0.6rem;
    /* Leggermente più grande di 0.5rem per essere leggibile */
    margin-right: 1rem;
  }

  /* Puntini dinamici */
  .menu-item::after {
    margin-left: 5px;
    /* Accorciamo lo spazio tra testo e punti */
    margin-right: 5px;
    opacity: 0.2;
    /* Ancora più discreti */
  }
}