/* =============================================
   MOBILE HERO FIX v2 - Offerte in primo piano
   ============================================= */

/* Su mobile: NASCONDI immagine hero e mostra SUBITO le offerte */
@media (max-width: 767px) {
  
  /* IMMAGINE HERO - Nascosta o molto ridotta */
  section#banner .window-rounded {
    display: none !important;
  }
  
  /* Alternativa: se vuoi tenerla ma ridottissima, commenta sopra e usa questo:
  section#banner .window-rounded {
    max-height: 100px !important;
    min-height: 80px !important;
    margin-bottom: 0.5rem !important;
    overflow: hidden;
  }
  */
  
  /* TITOLO HERO - Piu compatto e incisivo */
  .ec-hero-title,
  section#banner h1 {
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
  }
  
  .ec-hero-title span,
  section#banner h1 span {
    font-size: 1.25rem !important;
  }
  
  /* CARD PREZZI - Piu grandi e visibili SUBITO */
  section#banner .bg-enel-magenta.rounded-3xl {
    padding: 1.25rem 1rem !important;
    margin-top: 0.75rem !important;
    border-radius: 1rem !important;
  }
  
  /* Prezzo principale GRANDE */
  section#banner .text-4xl,
  section#banner .text-3xl {
    font-size: 2.25rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }
  
  /* Unita misura */
  section#banner .text-xl {
    font-size: 1rem !important;
  }
  
  /* Badge risparmio - BEN VISIBILE */
  section#banner [class*="bg-green"],
  section#banner [class*="bg-emerald"] {
    padding: 0.4rem 0.85rem !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
  }
  
  /* Info prezzi leggibili */
  section#banner .text-sm {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }
  
  section#banner .text-xs {
    font-size: 0.75rem !important;
  }
  
  /* Quota fissa evidenziata */
  section#banner .opacity-90 {
    opacity: 1 !important;
  }
  
  /* CTA PRINCIPALE - Grande e tappabile */
  section#banner a[href="#consulenza"],
  section#banner button[type="submit"],
  section#banner .ec-cta-primary {
    padding: 1rem 1.5rem !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    margin-top: 1rem !important;
    border-radius: 0.75rem !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
  }
  
  /* Note legali piu piccole */
  section#banner .text-\[10px\],
  section#banner .text-\[11px\] {
    font-size: 8px !important;
    line-height: 1.25 !important;
    margin-top: 0.75rem !important;
    opacity: 0.8;
  }
  
  /* Trust badges compatti */
  section#banner .flex.items-center.gap-2 {
    gap: 0.35rem !important;
  }
  
  section#banner .flex.items-center.gap-2 svg,
  section#banner .flex.items-center.gap-2 img {
    width: 1.1rem !important;
    height: 1.1rem !important;
  }
  
  section#banner .flex.items-center.gap-2 span {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
  }
}

/* =============================================
   STICKY BOTTOM BAR - CTA sempre visibile
   ============================================= */
@media (max-width: 767px) {
  /* Spazio per sticky bar */
  body {
  }
  
  /* Sticky bar esistente */
  #easycontact-mobile-cta-bar,
  .ec-mobile-cta-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99998 !important;
    background: #fff !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
    padding: 0.6rem 0.75rem !important;
    display: flex !important;
    gap: 0.5rem !important;
  }
  
  #easycontact-mobile-cta-bar a,
  #easycontact-mobile-cta-bar button,
  .ec-mobile-cta-bar a,
  .ec-mobile-cta-bar button {
    flex: 1 !important;
    padding: 0.85rem 0.5rem !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    text-align: center !important;
    border-radius: 0.6rem !important;
    text-decoration: none !important;
  }
  
  /* Stile bottone chiamata */
  #easycontact-mobile-cta-bar a[href^="tel"],
  .ec-mobile-cta-bar a[href^="tel"] {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: #fff !important;
  }
  
  /* Stile bottone form */
  #easycontact-mobile-cta-bar a:not([href^="tel"]),
  #easycontact-mobile-cta-bar button,
  .ec-mobile-cta-bar a:not([href^="tel"]),
  .ec-mobile-cta-bar button {
    background: linear-gradient(135deg, #0ea5e9, #0369a1) !important;
    color: #fff !important;
  }
}

/* =============================================
   SEZIONE OFFERTE - Card compatte
   ============================================= */
@media (max-width: 767px) {
  section#offerte {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  section#offerte h2 {
    font-size: 1.3rem !important;
    margin-bottom: 0.75rem !important;
    text-align: center !important;
  }
  
  /* Card offerte */
  section#offerte article {
    margin-bottom: 0.75rem !important;
  }
  
  section#offerte article .p-6 {
    padding: 0.85rem !important;
  }
  
  /* Prezzi card */
  section#offerte .text-2xl,
  section#offerte .text-3xl {
    font-size: 1.6rem !important;
    font-weight: 900 !important;
  }
  
  /* Badge offerta migliore */
  section#offerte [class*="bg-sky"],
  section#offerte [class*="bg-blue"] {
    font-size: 0.65rem !important;
    padding: 0.25rem 0.6rem !important;
  }
}

/* =============================================
   FORM CONTATTO - Input grandi per mobile
   ============================================= */
@media (max-width: 767px) {
  section.bg-enel-magenta form input[type="tel"],
  section.bg-enel-magenta form input[type="text"],
  section.bg-enel-magenta form input[type="email"] {
    font-size: 16px !important; /* Previene zoom iOS */
    padding: 0.9rem 1rem !important;
    border-radius: 0.6rem !important;
  }
  
  section.bg-enel-magenta form button[type="submit"] {
    padding: 0.9rem 1rem !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    border-radius: 0.6rem !important;
  }
  
  /* Label radio piu tappabili */
  section.bg-enel-magenta form label {
    padding: 0.6rem !important;
    min-height: 44px !important;
  }
}

/* =============================================
   FLOATING BUTTON - Ricontatto
   ============================================= */
@media (max-width: 767px) {
  /* Sposta il floating button sopra la sticky bar */
  .ec-floating-cta,
  [class*="floating"] {
    bottom: 85px !important;
  }
}

/* =============================================
   SEZIONE FIBRA - Compatta
   ============================================= */
@media (max-width: 767px) {
  section#fibra,
  div.bg-enel-magenta:has(h2:contains("Fibra")) {
    padding: 1.5rem 1rem !important;
  }
  
  section#fibra h2,
  div.bg-enel-magenta h2 {
    font-size: 1.2rem !important;
  }
}

/* Fix spazio in fondo pagina */
@media (max-width: 767px) {
  #root > div.pb-20 {
    padding-bottom: 0px !important;
  }
}

@media (min-width: 768px) {
  #root > div.pb-20 {
    padding-bottom: 0 !important;
  }
}

/* Override Tailwind pb-20 on mobile - very specific */
@media (max-width: 767px) {
  #root > div[class*='pb-20'],
  #root > div.min-h-screen {
    padding-bottom: 0px !important;
  }
}
@media (min-width: 768px) {
  #root > div[class*='pb-20'],
  #root > div.min-h-screen.pb-20 {
    padding-bottom: 0 !important;
  }
}