/* --- 1. RESET & GLOBALS --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 14px !important;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  color: #333;
  line-height: 1.5;
  background: #fff;
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 60px 0;
  background-color: #fff;
}

/* --- 2. TOP BAR & HEADER --- */
.top-bar {
  background-color: #ffffff;
  height: 35px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
  width: 100%;
}

.top-bar-full {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 96%;
  margin: 0 auto;
}

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-link img {
  width: 28px !important;
  height: auto;
  border-radius: 2px;
}

.separator {
  color: #eee;
}

.main-header {
  background-color: #eaddb0;
  min-height: 100px; /* 'min-height' è più flessibile di 'height' */
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.header-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Se non usi un .container esterno, aggiungi un padding qui */
  padding: 0 40px; 
}

.logo img {
  height: 75px;
  width: auto;
  display: block;
  transition: transform 0.3s ease; /* Piccolo tocco per un eventuale effetto hover */
}

.logo img:hover {
  transform: scale(1.05); /* Un leggero zoom quando ci passi sopra */
}

/* Navigazione */
.nav-menu ul {
  display: flex;
  list-style: none;
  gap: 30px; /* Ridotto leggermente per sicurezza su tablet */
}

.nav-menu a {
  text-decoration: none;
  color: #cd1d27;
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.nav-menu a:hover {
  color: #000;
}

/* Bottone Header */
.btn-header {
  background: #fff;
  border: 1px solid #cd1d27;
  padding: 10px 20px;
  text-decoration: none;
  color: #cd1d27;
  font-weight: 400;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  margin-right: 40px; /* Sostituisce il right: 100px in modo più solido */
  min-width: 140px;    /* Evita che il bottone cambi dimensione al click */
  justify-content: center;
}

.btn-header:hover {
  background-color: #cd1d27;
  color: #fff;
}

/* Logica mostrata/nascosta numero */
.phone-num {
  display: none;
}

.btn-header.active .phone-num {
  display: inline;
}

.btn-header.active .btn-text {
  display: none;
}
/* --- 3. HERO SLIDER --- */
.hero-slider {
  height: 500px !important;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #000;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index: 1;
}

.slide.active {
  opacity: 1 !important;
  z-index: 2;
}

.hero-slider::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3;
}

.hero-title-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  width: 100%;
}

.hero-title-container h1 {
  font-family: 'Courgette', cursive;
  font-size: 45px;
  color: #ffffff !important;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

/* --- 4. INTRO SECTION --- */
.intro-flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
}

.text-column-narrow {
  width: 330px;
  flex-shrink: 0;
}

.title-black {
  font-family: 'Cabin', sans-serif;
  font-size: 24px !important;
  color: #000 !important;
  margin-bottom: 4px;
  font-weight: 700;
}
.title-black2 {
  font-family: 'Cabin', sans-serif;
  font-size: 28px !important;
  color: #000 !important;
  margin-bottom: 10px;
  font-weight: 700;
  text-align: left !important;
}
.divider-black {
  width: 30px;
  height: 1px;
  background-color: #000 !important;
  margin-bottom: 15px;
}
.divider-black2 {
  width: 100px;
  height: 2px;
  background-color: #000 !important;
  margin-bottom: 12px;
}
.text-micro {
  font-size: 12px !important;
  line-height: 1.5;
  color: #666;
  margin-bottom: 8px;
  text-align: left;
}

.text-micro2 {
  font-size: 14px !important;
  line-height: 2;
  color: #666;
  margin-bottom: 8px;
  text-align: left;
}

.video-box-compact {
  width: 280px;
  flex-shrink: 0;
}

.video-square {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.video-square video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* --- 5. PIZZA SECTION --- */
.section-pizza-quality {
  padding: 60px 0;
  position: relative;
  background-color: #000;
  background-image: url('../img/104408492_4504059629611528_5708260908281798433_n-2880w.jpg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section-pizza-quality::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.section-pizza-quality .container,
.section-pizza-quality .text-center-compact {
  position: relative;
  z-index: 2;
}

.text-center-compact {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.title-black-centered {
  font-family: 'Cabin', sans-serif;
  font-size: 17px !important;
  color: #fff !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.divider-black-center {
  width: 30px;
  height: 1px;
  background-color: #fff;
  margin: 0 40px 20px;
}
.divider-white-center {
  width: 50px;
  height: 0px;
  background-color: #fff;
  margin: 0 auto 40px;
}
.text-micro-center {
  font-size: 14px !important; /* Un filo più grande su mobile per la leggibilità */
  line-height: 2;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 15px;
}

.text-micro-center p {
  margin-bottom: 15px; /* Spazio tra un paragrafo e l'altro */
  line-height: 1.6;    /* Rende la lettura meno faticosa */
}

.highlight-dough {
  font-size: 16px;     /* Leggermente più grande per enfasi */
  color: #fff;         /* Bianco acceso */
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 20px 0 !important;
}

/* Fix per mobile: evitiamo che il testo sia troppo largo */
@media (max-width: 768px) {
  .text-center-compact {
    max-width: 90%; 
    padding: 0 10px;
  }  
}
.special-note-red {
  font-family: 'Cabin', sans-serif;
  font-size: 16px !important;
  font-weight: 700;
  color: #fff;
  margin: 25px 0 !important;
  text-transform: uppercase;
}

/* --- 6. BAGGIO SECTION --- */
.section-baggio {
  padding: 60px 0;
  background-color: #fff;
  text-align: center;
}

.baggio-title {
  font-family: 'Cabin', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #000;
  margin-bottom: 8px;
}

.baggio-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
  margin-bottom: 25px;
}

.baggio-item img {

  height: 320px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.baggio-note {
  font-size: 13px;
  color: #666;
  font-style: italic;
  margin-top: 10px;
}

/* --- 7. RESPONSIVE --- */
@media (max-width: 900px) {
  .intro-flex-container {
    flex-direction: column;
    text-align: center;
  }

  .text-column-narrow {
    width: 100%;
    max-width: 90%;
  }

  .divider-black {
    margin: 0 auto 12px;
  }

  .nav-menu {
    display: none;
  }

  .logo,
  .btn-header {
    position: static;
  }
}

@media (max-width: 768px) {
  .video-box-compact {
    width: 250px;
  }

  .baggio-gallery {
    grid-template-columns: 1fr;
    justify-items: center; /* Fondamentale: centra gli elementi nel grid */
    gap: 30px;             /* Dà respiro verticale tra le foto */
  }

  .baggio-item {
    width: 100%;
    display: flex;
    justify-content: center; /* Centra l'immagine nel suo contenitore */
  }

  .baggio-item img {
    height: auto;
    max-width: 85%; /* Impedisce alle foto di toccare i bordi del telefono */
  }

  /* FIX LOGO BOLOGNA: puntiamo alla prima immagine della gallery 
     (o aggiungi la classe .logo-bologna come dicevamo prima) */
  .baggio-item:first-child img {
    max-width: 150px; /* Qui decidi tu la misura, 150px-180px di solito è perfetto */
    margin-bottom: 10px;
  }

  .baggio-title {
    font-size: 20px;
  }
}

/* --- OFFER SECTION --- */
.section-offer {
  background-color: #fff;
    float: none !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    padding-top: 60px !important;
    padding-left: 40px !important;
    padding-bottom: 60px !important;
    max-width: none !important;
    padding-right: 40px !important;
    min-width: 0 !important;
    text-align: center !important;
}

.offer-flex-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-height: 450px;
}

.offer-image-column {
  width: 40%;
  background-image: url('../img/WhatsApp+Image+2023-11-10+at+20.18.39-2880w.jpeg.webp');
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: bottom !important;
  height: 350px;
}
.offer-image-column-right {
  width: 40%;
  background-image: url('../img/73388349_3668335309850635_5661978132740046848_n-648h.jpg.webp');
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: bottom !important;
  height: 350px;
}

.offer-image-column-right-pizza {
  width: 40%;
  background-image: url('../img/104359886_4504059622944862_7879989459272396569_n-2880w.jpg.webp');
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: bottom !important;
  height: 350px;
}
.offer-image-column-right-menu {
  width: 40%;
  background-image: url('../img/pino-menu.jpg.webp');
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: bottom !important;
  height: 350px;
}

.offer-image-column-left {
  width: 40%;
  background-image: url('../img/583h.jpg');
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: bottom !important;
  height: 350px;
}
.offer-text-column {
  width: 50%;
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Responsive */
@media (max-width: 900px) {
  .offer-flex-container {
    flex-direction: column;
  }

  .offer-image-column {
    width: 100%;
    min-height: 280px;
  }
    .offer-image-column-right {
    width: 100%;
    min-height: 280px;
  }
    .offer-image-column-left {
    width: 100%;
    min-height: 280px;
  }
   .offer-image-column-right-pizza {
    width: 100%;
    min-height: 280px;
  }
  .offer-image-column-right-menu {
    width: 100%;
    min-height: 280px;
  }
}

/* --- MENU MOBILE PINO --- */
#menu-pino {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000000;
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body.menu-attivo #menu-pino {
  display: flex;
}

#chiudi-pino {
  position: absolute;
  top: 25px;
  right: 30px;
  font-size: 36px;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}

.link-pino {
  color: #fff;
  text-decoration: none;
  font-size: 22px;          /* Ridotto leggermente da 24/26px */
  padding: 8px 0 !important; /* Ridotto da 15px a 8px: questo dimezza lo spazio verticale */
  width: 100%;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'Cabin', sans-serif;
  display: block;
  transition: color 0.3s;
}

.link-pino:hover {
  color: #cd1d27;
}

.btn-prenota-pino {
  margin-top: 20px !important; /* Ridotto il distacco dal menù da 30px a 20px */
  padding: 12px 35px !important;
  background-color: #cd1d27;
  color: #fff !important;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
}

.btn-prenota-pino:hover {
  background-color: #a8151e;
  color: #fff;
}
/* Nascondi l'hamburger su desktop */
.menu-icon-mobile {
  display: none;
  font-size: 28px;
  color: #cd1d27;
  cursor: pointer;
}

/* Mostra l'hamburger solo su schermi piccoli */
@media (max-width: 900px) {
  .menu-icon-mobile {
    display: block;
    position: absolute;
    left: 20px;
  }
  
  .nav-menu {
    display: none; /* Nasconde il menu orizzontale */
  }

  .logo {
    left: 0;
    margin: 0 auto; /* Centra il logo in mobile */
  }

  .btn-header {
    right: 20px;
    padding: 8px 12px;
  }
}
body.menu-attivo {
  overflow: hidden; /* Impedisce lo scroll della pagina quando il menu è aperto */
}
/* 1. REGOLE PER DESKTOP (Sopra i 900px) */
@media (min-width: 901px) {
  .menu-icon-mobile {
    display: none !important; /* Nasconde l'hamburger su PC */
  }
  #menu-pino {
    display: none !important; /* Nasconde l'overlay mobile su PC */
  }
  .nav-menu {
    display: flex !important; /* Mostra il menù orizzontale su PC */
  }
}

/* 2. REGOLE PER MOBILE (Sotto i 900px) */
@media (max-width: 900px) {
  .nav-menu {
    display: none !important; /* Nasconde il menù orizzontale su Mobile */
  }
  .menu-icon-mobile {
    display: block !important; /* Mostra l'hamburger su Mobile */
  }
  
  /* L'overlay deve restare nascosto finché non c'è la classe menu-attivo */
  #menu-pino {
    display: none; 
  }
  
  body.menu-attivo #menu-pino {
    display: flex !important; /* Lo mostra solo quando clicchi */
  }
}

/* --- FIX MENÙ MOBILE SU UNA RIGA --- */
#menu-pino {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.98); /* Quasi nero totale per coprire tutto */
  z-index: 10001;
  
  /* Queste tre righe mettono tutto in colonna e al centro */
  display: flex !important; 
  flex-direction: column !important; 
  justify-content: center !important; 
  align-items: center !important;
  
  /* Nascondi di base, mostriamo solo con .menu-attivo */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Mostra il menu quando attivo */
body.menu-attivo #menu-pino {
  visibility: visible;
  opacity: 1;
}

/* Forza i link ad andare a capo e ad avere spazio */
.link-pino {
  display: block !important; /* Forza il link a comportarsi come un blocco */
  width: 100%;               /* Prende tutta la larghezza per centrare il testo */
  text-align: center;
  color: #fff !important;
  text-decoration: none;
  font-size: 26px !important; /* Leggibile da mobile */
  padding: 15px 0 !important; /* Spazio tra una riga e l'altra */
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

/* Gestione del bottone dentro il menù mobile */
.btn-prenota-pino {
  display: inline-block !important;
  margin-top: 30px !important;
  padding: 15px 40px !important;
  background-color: #cd1d27 !important;
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  border-radius: 4px;
}

.baggio-item img.logo-bologna {
  object-fit: contain; /* Non taglia il logo, lo tiene tutto visibile */
  padding: 40px;       /* Gli dà un po' di respiro rispetto alle foto */
  background-color: #f9f9f9; /* Opzionale: un leggero sfondo per farlo staccare */
}

/* --- 7. OFFER SECTION (OTTIMIZZATA) --- */
.section-offer {
  padding: 0 !important; /* Rimuoviamo il padding della section per far toccare i bordi al flex */
  overflow: hidden;
}

.offer-flex-container {
  display: flex;
  flex-direction: row;
  align-items: stretch; /* Fa sì che immagine e testo abbiano sempre la stessa altezza */
  width: 100%;
}

/* --- RESPONSIVE PER QUESTA SEZIONE --- */
@media (max-width: 900px) {
  .offer-flex-container {
    flex-direction: column; /* L'immagine va sopra e il testo sotto */
  }

  .offer-image-column {
    width: 100%;
    height: 300px; /* Ridotto su mobile per non occupare troppo spazio */
    min-height: 250px;
  }

  .offer-text-column {
    width: 100%;
    padding: 40px 20px;
    text-align: center;
  }

  .divider-black2 {
    margin: 0 auto 15px; /* Centra il divisore su mobile */
  }
}

/* --- GALLERY SECTION --- */
.section-gallery {
  background-color: #fff;
  padding: 60px 0;
}

.gallery-grid {
  display: grid;
  /* Crea 3 colonne su desktop, 2 su tablet, 1 su mobile */
  grid-template-columns: repeat(3, 1fr); 
  gap: 20px; /* Spazio tra le foto */
  margin-top: 40px;
}

.gallery-item {
  overflow: hidden;
  border-radius: 4px;
  height: 250px; /* Altezza fissa per tenere tutto allineato */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Taglia l'immagine senza deformarla */
  transition: transform 0.5s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.gallery-item img:hover {
  transform: scale(1.1); /* Effetto zoom quando ci passi sopra */
}

/* --- RESPONSIVE GALLERY --- */
@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colonne sui tablet */
  }
}

@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: 1fr; /* 1 colonna sui telefoni */
    gap: 15px;
  }
  .gallery-item {
    height: 200px; /* Un po' più basse su mobile */
  }
}

/* --- GLOBAL TITLES (per sicurezza, se non li hai già) --- */
.title-black-centered {
  font-family: 'Cabin', sans-serif;
  font-size: 28px; /* O la misura che preferisci per gli H2 */
  color: #000 !important; /* Forza il nero, così lo vedi sullo sfondo bianco */
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.title-white-centered {
  font-family: 'Cabin', sans-serif;
  font-size: 28px; /* O la misura che preferisci per gli H2 */
  color: #fff !important; /* Forza il bianco, così lo vedi sullo sfondo nero   */
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.divider-black-center {
  width: 60px;
  height: 2px;
  background-color: #cd1d27; /* Usiamo il rosso Pino per staccare */
  margin: 0 auto 40px; /* Centrato, con spazio sotto */
}

/* --- GALLERY GRID (Moderno e Responsive) --- */
.section-gallery {
  background-color: #fff;
  padding: 30px 0;
}

/* Effetto Zoom su Hover (per desktop) */
@media (min-width: 992px) {
  .gallery-item img:hover {
    transform: scale(1.08);
  }
}

/* --- GALLERY GRID 6 COLONNE --- */
#my-gallery.gallery-grid {
  display: grid !important;
  /* 6 colonne: ognuna deve essere larga almeno 150px. 
     Se lo spazio totale è poco, passerà a meno colonne solo sotto i 900px circa */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; 
  gap: 8px !important; /* Gap leggermente ridotto per guadagnare spazio */
  width: 100% !important;
  margin: 30px auto !important;
}

.gallery-item {
  height: 140px !important; /* Altezza ridotta per non farle sembrare troppo "lunghe" ora che sono strette */
}

.gallery-item {
  width: 100%;
  height: 150px; /* Altezza ridotta (da 250 a 150) per mantenere le proporzioni con 6 colonne */
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Usiamo l'ID per essere sicuri di vincere su ogni altra regola */
#my-gallery.gallery-grid {
  display: grid !important;
  /* Forziamo 6 colonne su desktop (sopra i 1200px) */
  grid-template-columns: repeat(6, 1fr) !important; 
  grid-template-rows: auto !important;
  gap: 5px !important;
  width: 100% !important;
  max-width: none !important; /* Rimuove eventuali limiti di larghezza */
  margin: 30px auto !important;
}

/* Modifichiamo le media query per assicurarci che i "salti" avvengano solo quando serve */

@media (max-width: 1200px) {
  #my-gallery.gallery-grid {
    grid-template-columns: repeat(4, 1fr) !important; /* 4 colonne su schermi medi/laptop */
  }
}

@media (max-width: 900px) {
  #my-gallery.gallery-grid {
    grid-template-columns: repeat(3, 1fr) !important; /* 3 colonne su tablet */
  }
}

@media (max-width: 600px) {
  #my-gallery.gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* 2 colonne su smartphone */
  }
}

/* --- SECTION MAP --- */
.section-map {
    width: 100%;
    line-height: 0; /* Rimuove piccoli spazi bianchi sotto l'iframe */
    background-color: #f9f9f9;
}

.map-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05); /* Un leggero ombra per staccare dalla sezione sopra */
}

.map-wrapper iframe {
    filter: grayscale(0.2) contrast(1.1); /* Un tocco vintage per abbinarsi al sito, opzionale */
    transition: filter 0.3s ease;
}

.map-wrapper iframe:hover {
    filter: grayscale(0); /* Torna a colori quando ci passi sopra */
}

@media (max-width: 768px) {
    .map-wrapper iframe {
        height: 300px; /* Più bassa sui telefoni per non dover scrollare troppo */
    }
}

/* Usiamo una classe extra .pino-cta-fix per "vincere" contro i vecchi stili */
.section-cta-red.pino-cta-fix {
    background-color: #cd1d27 !important; /* Rosso Pino forzato */
    padding: 30px 0 !important;
    text-align: center !important;
}

.pino-cta-fix .cta-title {
    font-family: 'Cabin', sans-serif !important;
    font-size: 20px !important; /* Più piccola come richiesto */
    color: #ffffff !important;  /* Bianco forzato */
    margin-bottom: 25px !important;
    font-weight: 700 !important;
    text-transform: none !important; /* Evita che IOL lo metta tutto maiuscolo */
}

.pino-cta-fix .btn-cta-white {
    background-color: #ffffff !important;
    color: #cd1d27 !important;
    padding: 12px 30px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border-radius: 50px !important;
    display: inline-block !important;
    transition: transform 0.3s ease !important;
}

.pino-cta-fix .btn-cta-white:hover {
    transform: scale(1.05) !important;
}

.pino-cta-fix .phone-number {
    margin-left: 10px;
    font-size: 16px;
    font-weight: 400;
}

/* Fix per Mobile */
@media (max-width: 768px) {
    .pino-cta-fix .cta-title {
        font-size: 18px !important;
        padding: 0 20px;
    }
}
/* --- SECTION REVIEWS --- */
.section-reviews {
    background-color: #ffffff;
    padding: 70px 0;
    text-align: center;
}

.reviews-row {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    margin-top: 40px;
}

.review-card {
    flex: 1; /* Fa sì che siano tutte larghe uguali */
    background: #fdfdfd;
    padding: 35px 25px;
    border: 1px solid #eee;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.review-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-red);
}

.stars {
    color: #ffc107; /* Giallo oro per le stelline */
    font-size: 18px;
    margin-bottom: 15px;
}

.review-card p {
    font-style: italic;
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px;
}

.review-author {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 13px;
    color: #999;
    text-transform: uppercase;
}

/* Responsive: su mobile le mettiamo in colonna */
@media (max-width: 900px) {
    .reviews-row {
        flex-direction: column;
        padding: 0 20px;
    }
    .review-card {
        margin-bottom: 20px;
    }
}
/* --- TRIPADVISOR BUTTON --- */
.reviews-footer {
    margin-top: 30px;
    text-align: center;
}

.btn-tripadvisor {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #00af87; /* Verde TripAdvisor */
    color: #ffffff !important;
    padding: 14px 28px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 175, 135, 0.2);
}

.btn-tripadvisor:hover {
    background-color: #008767;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 175, 135, 0.3);
}

.trip-icon {
    font-size: 20px;
}

/* Adattamento Mobile */
@media (max-width: 600px) {
    .btn-tripadvisor {
        width: 90%;
        justify-content: center;
        font-size: 15px;
    }
}

/* --- GOOGLE BUTTON (Gemello di TripAdvisor) --- */
.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px; /* Stessa spaziatura di TripAdvisor */
    background-color: #ffffff;
    color: #444444 !important;
    padding: 14px 28px; /* Stesso padding */
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    border-radius: 4px; /* Stesso raggio */
    border: 1px solid #dadce0; 
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Stessa ombra */
}

.btn-google:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* IL "GABBIOTTO" PER LA G GIGANTE */
.google-svg {
    width: 20px;  /* Ecco il segreto: dimensioni fisse! */
    height: 20px;
    flex-shrink: 0; /* Impedisce che si schiacci */
    display: block;
}

/* Adattamento Mobile */
@media (max-width: 600px) {
    .btn-google {
        width: 90%;
        font-size: 15px;
    }
}
/* --- FIX DISTANZA REVIEWS -> FOOTER --- */

.section-reviews {
    padding-top: 40px !important;
    /* Aumentiamo il padding inferiore per staccare il bottone dal bordo della sezione */
    padding-bottom: 60px !important; 
}

.reviews-footer {
    /* Diamo un margine generoso sotto il bottone TripAdvisor */
    margin-top: 50px !important;
    margin-bottom: 20px !important; 
}

/* Se vuoi essere ancora più sicuro, aggiungi un margine sopra il footer */
.main-footer {
    margin-top: 0; /* Lo teniamo a 0 se vogliamo che i colori si tocchino */
    border-top: 1px solid rgba(0,0,0,0.05); /* Una linea leggerissima per separare */
}
/* --- FOOTER 1: La parte con le colonne --- */
.main-footer {
    background-color: #eadbb0 !important; /* Il tuo crema */
    padding: 60px 0 40px;
    border-top: 1px solid rgba(0,0,0,0.1);
    color: #333; /* Testo scuro sul crema */
}

.main-footer h3 {
    color: #cd1d27; /* Usiamo il rosso per i titoli delle colonne */
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 700;
}

.footer-col a {
    color: #333;
    transition: color 0.3s;
}

.footer-col a:hover {
    color: #cd1d27;
}
/* --- FIX LOGO FOOTER --- */
.footer-logo {
    width: 120px !important; /* Misura fissa per il footer */
    height: auto !important;
    display: block;
    margin-bottom: 20px;
    /* Se vuoi che sia un po' trasparente per integrarsi meglio nel crema */
    opacity: 0.9; 
    transition: opacity 0.3s ease;
}

.footer-logo:hover {
    opacity: 1;
}

/* Su mobile possiamo anche rimpicciolirlo un altro po' */
@media (max-width: 600px) {
    .footer-logo {
        width: 100px !important;
        margin: 0 auto 20px; /* Lo centra se le colonne si impilano */
    }
}
/* --- SOLUZIONE ATOMICA 4 COLONNE --- */
.footer-grid {
    display: grid !important;
    /* Forza 4 colonne uguali */
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 30px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    
    /* Reset per Chrome */
    float: none !important; 
    clear: both !important;
}

.footer-col {
    /* Reset totale per annullare le vecchie classi IOL */
    width: auto !important; 
    max-width: none !important;
    min-width: 0 !important; 
    float: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* TABLET (Portrait): Passiamo a 2 colonne solo sotto i 768px */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* MOBILE: 1 Colonna sotto i 480px */
@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
}

/* --- FIX FOOTER 2: FULL WIDTH E DISTANZA --- */
.footer-bottom {
    background-color: #333 !important; /* Grigio scuro a tutto schermo */
    width: 100% !important;
    padding: 30px 0 !important; /* Aumentato per dare più "stacco" e respiro */
    color: #ffffff !important;
    border-top: 1px solid rgba(255,255,255,0.1); /* Una linea sottile per definire il bordo */
    margin-top: 30px !important; /* Diamo un po' di spazio sopra per staccare dal resto del footer */
}

.footer-bottom .container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* Spinge Copyright a sinistra e Legal a destra */
    align-items: center !important;
    max-width: 1200px; /* Deve essere uguale al max-width del resto del sito */
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.footer-bottom p {
    margin: 0 !important;
    font-size: 13px;
    opacity: 0.7;
}

.footer-legal-nav {
    display: flex !important;
    gap: 25px !important; /* Spazio tra i link legali */
}

.footer-legal-nav a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 12px;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.footer-legal-nav a:hover {
    opacity: 1;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .footer-bottom .container {
        flex-direction: column !important; /* Incolonna su mobile */
        gap: 15px !important;
        text-align: center !important;
    }
    
    .footer-legal-nav {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}
/* --- FORZA FULL WIDTH FOOTER 2 --- */
.footer-bottom {
    background-color: #333 !important;
    color: #ffffff !important;
    
    /* Queste 4 righe forzano la fascia a uscire dai contenitori stretti */
    width: 100vw !important; 
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    
    padding: 20px 0 !important;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* IMPORTANTE: Il contenuto interno deve restare centrato */
.footer-bottom .container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1200px !important; /* Qui metti la larghezza del tuo sito */
    margin: 0 auto !important;
    padding: 0 20px !important;
    width: 100% !important;
}
/* --- MODAL STYLES --- */
.modal-overlay {
    display: none; /* Nascosto di base */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7); /* Sfondo scuro semitrasparente */
    backdrop-filter: blur(5px); /* Effetto sfocato figo */
}

.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 5px 30px rgba(0,0,0,0.3);
    font-family: sans-serif;
    line-height: 1.6;
}

.close-modal {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #999;
}

.close-modal:hover { color: #cd1d27; }

.modal-content h3 {
    color: #cd1d27;
    margin-top: 0;
    border-bottom: 2px solid #eadbb0;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

#scroll-top-pino {
    position: fixed !important;
    bottom: 25px;
    right: 25px;
    width: 50px; /* Un pelo più grande per il pollice su mobile */
    height: 50px;
    background-color: #cd1d27; /* Il nostro rosso Pino */
    color: #fff;
    border-radius: 50%;
    display: none; /* Nascondi all'inizio */
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    z-index: 9999;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    outline: none;
}

#scroll-top-pino:hover {
    background-color: #333; /* Diventa scuro al passaggio */
    transform: translateY(-5px); /* Salta leggermente su */
}

 #cookie-banner-pino {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(34, 34, 34, 0.98); /* Quasi nero, molto elegante */
    color: white;
    padding: 20px 0;
    z-index: 10000000;
    display: none; /* Gestito dal JavaScript */
    text-align: center;
    border-top: 3px solid #cd1d27; /* Rosso Pino */
    font-family: sans-serif;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.4);
}

.cookie-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#cookie-banner-pino p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

#cookie-banner-pino a {
    color: #eadbb0; /* Crema per il link */
    text-decoration: underline;
}

#accetta-pino {
    background: #cd1d27;
    color: white;
    border: none;
    padding: 10px 25px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    transition: background 0.3s;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
}

#accetta-pino:hover {
    background: #a3171f;
}

/* Adattamento Mobile */
@media (max-width: 600px) {
    .cookie-content {
        flex-direction: column;
        gap: 15px;
    }
}

/* --- HERO RESTAURANT (Versione "Fresh & Genuine") --- */
#hero-restaurant {
    height: 500px;
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), 
                url('../img/70275299_3739833119367520_2301580005064310784_n-2880w.jpg.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
}
#hero-restaurant-pino {
    height: 500px;
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), 
                url('../img/slide3.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
}
#hero-restaurant-contacts {
    height: 500px;
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), 
                url('../img/contatti.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
}
#hero-menu-pino {
    height: 500px;
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), 
                url('../img/pino-menu.jpg.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
}
#hero-restaurant-contacts .hero-text h1 {
    font-family: "Cardo", serif; /* Il font che hai indicato */
    font-size: 42px; /* Grandezza d'impatto per la Hero */
    font-weight: 700;
    font-style: italic; /* Lo rende molto "fine dining" */
    line-height: 1.3;
    max-width: 800px; /* Evita che la scritta diventi troppo lunga su schermi grandi */
    margin: 0 auto;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
#hero-restaurant .hero-text h1 {
    font-family: "Cardo", serif; /* Il font che hai indicato */
    font-size: 42px; /* Grandezza d'impatto per la Hero */
    font-weight: 700;
    font-style: italic; /* Lo rende molto "fine dining" */
    line-height: 1.3;
    max-width: 800px; /* Evita che la scritta diventi troppo lunga su schermi grandi */
    margin: 0 auto;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
#hero-restaurant-pino .hero-text h1 {
    font-family: "Cardo", serif; /* Il font che hai indicato */
    font-size: 42px; /* Grandezza d'impatto per la Hero */
    font-weight: 700;
    font-style: italic; /* Lo rende molto "fine dining" */
    line-height: 1.3;
    max-width: 800px; /* Evita che la scritta diventi troppo lunga su schermi grandi */
    margin: 0 auto;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
#hero-menu-pino .hero-text h1 {
    font-family: "Cardo", serif; /* Il font che hai indicato */
    font-size: 42px; /* Grandezza d'impatto per la Hero */
    font-weight: 700;
    font-style: italic; /* Lo rende molto "fine dining" */
    line-height: 1.3;
    max-width: 800px; /* Evita che la scritta diventi troppo lunga su schermi grandi */
    margin: 0 auto;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Adattamento Mobile */
@media (max-width: 768px) {
    #hero-restaurant {
        height: 400px;
        padding: 0 20px;
    }
    #hero-restaurant-pino {
        height: 400px;
        padding: 0 20px;
    }
    #hero-menu-pino {
        height: 400px;
        padding: 0 20px;
    }
    #hero-restaurant-contacts {
        height: 400px;
        padding: 0 20px;
    }
    #hero-restaurant-contacts .hero-text h1 {
        font-size: 28px;
    }

    #hero-restaurant .hero-text h1 {
        font-size: 28px;
    }
    #hero-restaurant-pino .hero-text h1 {
        font-size: 28px;
    }
    #hero-menu-pino .hero-text h1 {
        font-size: 28px;
    }
}
/* --- BOTTONE FULL MENU (VERSIONE REFINED) --- */
.btn-pino-star {
    /* Layout e Centratura (dal vecchio CSS) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* Colori e Sfondo (il nostro Rosso Pino) */
    background-color: #cd1d27;
    background-image: none; /* Puliamo eventuali gradienti vecchi */
    color: #ffffff !important;
    
    /* Bordi (Semplificati) */
    border: none;
    border-radius: 4px; /* Se lo vuoi squadrato come l'originale, o 50px per tondo */
    
    /* Spaziatura e Font */
    padding: 10px 20px;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    
    /* Effetti moderni che nel vecchio CSS mancavano */
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    cursor: pointer;
}

.btn-pino-star:hover {
    background-color: #333;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.menu-accordion { max-width: 900px; margin: 0 auto; }

.accordion-btn {
    width: 100%;
    background: #fdfaf3;
    border: 1px solid #eadbb0;
    padding: 20px;
    font-family: 'Cardo', serif;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
    margin-top: 10px;
}

.accordion-btn:hover { background: #cd1d27; color: white; }

.accordion-content {
    display: none;
    padding: 20px;
    background: white;
    border: 1px solid #eadbb0;
    border-top: none;
}

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px dotted #ccc;
}

.dish { font-weight: bold; font-size: 18px; color: #333; }
.description { font-size: 14px; color: #777; margin: 5px 0 0 0; font-style: italic; }
.price { font-weight: bold; color: #cd1d27; font-size: 18px; }

.allergen-note {
    font-size: 14px;
    color: #999;
    text-align: center;
    margin-top: 30px;
}
/* --- SEZIONE PRENOTAZIONI --- */
.booking-section {
    padding: 100px 0;
    /* Usiamo un gradiente per scurire l'immagine e far leggere bene il testo bianco */
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                url('../img/85188781_4029875850363244_1584406735345418240_n-f2316e6f-2880w.jpg.webp'); /* Cambia con il tuo percorso locale */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Leggero effetto parallax che dà profondità */
    color: #ffffff;
    text-align: center;
}

.booking-wrapper {
    max-width: 850px;
    margin: 0 auto;
}

.booking-wrapper h3 {
    font-family: 'Cardo', serif;
    font-size: 48px;
    font-style: italic;
    margin-bottom: 30px;
    color: #eadbb0; /* Usiamo il crema per il titolo su sfondo scuro */
}

.booking-text p {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 25px;
    opacity: 0.9;
}

.btn-pino-booking {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 30px;
    background-color: #cd1d27;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.btn-pino-booking:hover {
    background-color: #eadbb0;
    color: #333 !important;
    transform: translateY(-3px);
}

/* Mobile */
@media (max-width: 768px) {
    .booking-section {
        padding: 60px 20px;
        background-attachment: scroll; /* Disabilita parallax su mobile per performance */
    }
    .booking-wrapper h3 {
        font-size: 32px;
    }
}
/* --- SEZIONE PIZZA GOURMET --- */
.gourmet-section {
    padding: 120px 0;
    /* Ricordati di rinominare e caricare l'immagine in locale per sicurezza */
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), 
                url('../img/bufala.jpg.webp'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Effetto elegante mentre si scorrre */
    color: #ffffff;
    text-align: center;
}

.gourmet-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.gourmet-wrapper h3 {
    font-family: 'Cardo', serif;
    font-size: 44px;
    font-style: italic;
    margin-bottom: 30px;
    color: #eadbb0; /* Il nostro crema preferito */
}

.gourmet-content p {
    font-size: 19px;
    line-height: 1.8;
    margin-bottom: 20px;
    font-weight: 300;
}

.gourmet-content strong {
    color: #cd1d27; /* Rosso Pino per evidenziare il Sourdough */
    font-weight: 700;
}

/* Mobile */
@media (max-width: 768px) {
    .gourmet-section {
        padding: 80px 20px;
        background-attachment: scroll;
    }
    .gourmet-wrapper h3 {
        font-size: 30px;
    }
}

/* --- PAGINA CONTATTI --- */
.contact-page {
    background-color: #fdfaf3; /* Crema chiarissimo */
    padding: 80px 0;
}

.contact-header {
    max-width: 800px;
    margin: 0 auto 60px;
}

.section-title {
    font-family: 'Cardo', serif;
    font-size: 42px;
    font-style: italic;
    color: #cd1d27;
    margin-bottom: 20px;
    text-align: center !important;
}

.divider {
    width: 60px;
    height: 3px;
    background-color: #eadbb0;
    margin: 0 auto 30px;
}

.contact-intro p {
    font-size: 18px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 15px;
}

.phone-link {
    color: #cd1d27;
    font-weight: bold;
    text-decoration: none;
}

/* Griglia Info */
.contact-grid {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 60px;
    text-align: left;
}

.contact-info, .contact-hours {
    flex: 1;
    background: white;
    padding: 40px;
    border: 1px solid #eadbb0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.contact-grid h3 {
    font-family: 'Cardo', serif;
    font-size: 28px;
    color: #333;
    margin-bottom: 25px;
    border-bottom: 2px solid #fdfaf3;
    padding-bottom: 10px;
}

.contact-grid p, .hours-list li {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #555;
}

.hours-list {
    list-style: none;
    padding: 0;
}

.contact-grid a {
    color: #cd1d27;
    text-decoration: none;
    transition: 0.3s;
}

.contact-grid a:hover {
    text-decoration: underline;
}

/* Mappa */
.map-container {
    border: 1px solid #eadbb0;
    padding: 10px;
    background: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Responsive */
@media (max-width: 768px) {
    .contact-grid {
        flex-direction: column;
    }
    .section-title {
        font-size: 32px;
    }
}