/*
Theme Name: My Sunshine Theme
Author: B&B My Sunshine
Version: 1.0
Description: Tema personalizzato su misura per My Sunshine
*/


   /* RESET BASE */
 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

body {
  font-family: Arial, sans-serif;
}

/* 1. SEZIONE HEADER & NAVIGAZIONE */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo-link img {
  width: 130px;
  height: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 25px;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  color: #333333;
  font-weight: 600;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #f39c12;
}

.btn-prenota {
  background-color: #f39c12;
  color: #ffffff !important;
  padding: 8px 18px;
  border-radius: 20px;
  transition: background-color 0.3s ease !important;
}

.btn-prenota:hover {
  background-color: #e67e22 !important;
}

.btn-whatsapp {
  color: #25d366 !important;
}

.btn-whatsapp:hover {
  opacity: 0.8;
}

/* 2. SEZIONE HERO (SLIDER DI SFONDO) */
.hero-slider {
  position: relative;
  width: 100%;
  height: 75vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: slideAnimation 15s infinite; /* Ciclo totale 15 secondi per 5 foto */
}

/* Ritardi per 5 foto (3 secondi l'una) */
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 3s; }
.slide:nth-child(3) { animation-delay: 6s; }
.slide:nth-child(4) { animation-delay: 9s; }
.slide:nth-child(5) { animation-delay: 12s; }

@keyframes slideAnimation {
  0% { opacity: 0; }
  4% { opacity: 1; }
  20% { opacity: 1; }
  24% { opacity: 0; }
  100% { opacity: 0; }
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  color: #ffffff;
  text-align: center;
  padding: 0 20px;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-content p {
  font-size: 1.4rem;
  margin-bottom: 25px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-btn {
  display: inline-block;
  padding: 12px 30px;
  background-color: #f39c12;
  color: #ffffff;
  text-decoration: none;
  border-radius: 25px;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.hero-btn:hover {
  background-color: #e67e22;
  transform: translateY(-2px);
}

/* RESPONSIVE PER SMARTPHONE */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    padding: 15px 20px;
    gap: 15px;
  }

  .nav-links {
    gap: 15px;
  }

  .hero-content h1 {
    font-size: 2rem;
  }

  .hero-content p {
    font-size: 1.1rem;
  }
}
   /*aggiunta 2*/

   /* =========================================
      STILI PER LE NUOVE SEZIONI DELLA HOME
      ========================================= */

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

   .services-section, .reviews-section, .map-section {
     padding: 60px 0;
   }

   .services-section h2, .reviews-section h2, .map-section h2 {
     font-size: 2rem;
     color: #222222;
     text-align: center;
     margin-bottom: 8px;
   }

   .section-subtitle {
     text-align: center;
     color: #666666;
     font-size: 1.1rem;
     margin-bottom: 40px;
   }

   /* --- 1. SERVIZI (GRID CON EMOJI) --- */
   .services-section {
     background-color: #f9f9f9;
   }

   .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
     gap: 20px;
   }

   .service-card {
     background: #ffffff;
     padding: 18px 20px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     gap: 15px;
     font-weight: 600;
     color: #333333;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
     border: 1px solid #eeeeee;
   }

   .service-icon {
     font-size: 1.5rem;
   }

   /* --- 2. RECENSIONI --- */
   .reviews-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 25px;
   }

   .review-card {
     background: #ffffff;
     border: 1px solid #e0e0e0;
     border-radius: 16px;
     padding: 25px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
     display: flex;
     flex-direction: column;
   }

   .review-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 12px;
   }

   .reviewer-info strong {
     display: block;
     font-size: 1.05rem;
     color: #222222;
   }

   .review-date {
     font-size: 0.85rem;
     color: #888888;
   }

   /* Badges Piattaforme */
   .badge {
     padding: 4px 10px;
     border-radius: 12px;
     font-size: 0.75rem;
     font-weight: bold;
   }

   .platform-airbnb {
     background-color: #ffe5e5;
     color: #ff385c;
   }

   .platform-booking {
     background-color: #e6f0fa;
     color: #003580;
   }

   .stars {
     color: #f39c12;
     font-size: 1.2rem;
     margin-bottom: 12px;
   }

   .review-text {
     color: #555555;
     font-size: 0.95rem;
     line-height: 1.5;
     font-style: italic;
   }

   /* --- 3. MAPPA --- */
   /* --- SEZIONE MAPPA PERFETTAMENTE CENTRATA E RESPONSIVE --- */
   .map-section {
     background-color: #f9f9f9;
     padding: 60px 0;
   }

   .map-wrapper {
     width: 100%;
     height: 450px; /* Altezza fissa del riquadro */
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     position: relative;
     background-color: #e5e3df; /* Colore di sfondo di caricamento tipo Maps */
   }

   /* Forziamo l'iframe ad occupare ESATTAMENTE tutto il riquadro */
   .map-wrapper iframe {
     width: 100% !important;
     height: 100% !important;
     border: 0;
     display: block;
   }

   /* --- 4. FOOTER --- */
   .footer {
     background-color: #1a1a1a;
     color: #dddddd;
     padding-top: 50px;
   }

   .footer-content {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 40px;
     padding-bottom: 40px;
   }

   .footer-col h3 {
     color: #ffffff;
     margin-bottom: 20px;
     font-size: 1.2rem;
     border-bottom: 2px solid #f39c12;
     display: inline-block;
     padding-bottom: 5px;
   }

   .footer-col p {
     margin-bottom: 10px;
     font-size: 0.95rem;
     line-height: 1.6;
   }

   .footer-col a {
     color: #f39c12;
     text-decoration: none;
   }

   .footer-col a:hover {
     text-decoration: underline;
   }

   .footer-bottom {
     background-color: #111111;
     text-align: center;
     padding: 20px;
     font-size: 0.85rem;
     color: #888888;
     border-top: 1px solid #222222;
   }

   /* RESPONSIVE PER SMARTPHONE */
   @media (max-width: 768px) {
     .services-grid {
       grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
     }

     .service-card {
       padding: 12px 15px;
       font-size: 0.9rem;
     }

     .footer-content {
       grid-template-columns: 1fr;
       gap: 25px;
     }
   }