/* =========================================

   CONTATTI - ROBUST NEGATIVE MARGIN LAYOUT

   ========================================= */



/* --- 1. HERO SECTION --- */

.hero-premium {

  position: relative;

  height: auto;

  min-height: auto;

  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9)), url('../assets/images/pdc.webp') center/cover no-repeat;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 120px 20px 60px;

  margin-bottom: 0;

  overflow: hidden;

}



.hero-content-wrapper {

  position: relative;

  z-index: 2;

  max-width: 800px;

  margin: 0 auto;

}



/* Typography */

.text-premium-gradient {

  background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 50%, var(--primary-red) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

}



.hero-subtitle {

  font-size: 1.1rem;

  letter-spacing: 0.5px;

  font-weight: 300;

  opacity: 0.95;

  margin: 0 auto;

  line-height: 1.6;

}



/* --- 2. CARDS SECTION --- */

.floating-cards-container {

  padding: 40px 15px;

  /* Mobile Padding */

  position: relative;

  z-index: 50;

  /* Above Hero, Above Form */

}



/* DESKTOP OVERRIDES - THE FIX */

@media (min-width: 992px) {

  .hero-premium {

    height: 70vh;

    min-height: 600px;

    /* Padding bottom must be large enough so Hero text isn't covered by the cards pulled up */

    padding-bottom: 180px;

  }



  .floating-cards-container {

    padding: 0 15px;

    /* THE KEY: No absolute. Just pull it up. */

    margin-top: -120px;

    margin-bottom: 60px;

    /* Space below cards before form starts */

    background: transparent;

  }

}



.card-glass-wow {

  background: #ffffff;

  border: 1px solid rgba(0, 0, 0, 0.05);

  border-radius: 20px;

  padding: 2rem;

  text-align: center;

  height: 100%;

  margin-bottom: 15px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

}



.icon-wow {

  width: 70px;

  height: 70px;

  background: #f0f0f0;

  color: var(--brand-primary);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.8rem;

  margin: 0 auto 1.5rem;

}



@media (min-width: 992px) {

  .card-glass-wow {

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);

    border: 1px solid rgba(255, 255, 255, 0.8);

    margin-bottom: 0;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

  }



  .card-glass-wow:hover {

    transform: translateY(-15px);

    box-shadow: 0 30px 60px rgba(220, 53, 69, 0.2);

  }

}





/* --- 3. FORM SECTION --- */

.section-form {

  padding-top: 2rem;

  padding-bottom: 4rem;

  background: linear-gradient(to bottom, #f8f9fa, #ffffff);

  position: relative;

  z-index: 10;

}



.form-premium-wrapper {

  background: #ffffff;

  border-radius: 24px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  border: 1px solid rgba(0, 0, 0, 0.05);

}



.form-body {

  padding: 2rem;

}



.form-sidebar {

  background-color: #1a1a1a;

  color: white;

  padding: 2rem;

  position: relative;

  overflow: hidden;

}



@media (min-width: 992px) {

  .form-premium-wrapper {

    flex-direction: row;

    min-height: 600px;

  }



  .form-sidebar {

    width: 35%;

    padding: 3rem;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

  }



  .form-body {

    width: 65%;

    padding: 4rem;

  }

}



/* --- 4. MAP --- */

.map-premium-overlay {

  height: 400px;

  width: 100%;

}



.map-premium {

  width: 100%;

  height: 100%;

  filter: grayscale(100%);

  transition: filter 0.5s ease;

}



.map-premium:hover {

  filter: grayscale(0%);

}



@media (min-width: 992px) {

  .map-premium-overlay {

    height: 600px;

    clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%);

    margin-top: -50px;

  }

}



/* --- 5. WOW BUTTON (RED) --- */

.btn-wow {

  background: linear-gradient(135deg, #cc0000 0%, #a00000 100%);

  color: white;

  font-weight: 700;

  padding: 1rem 3rem;

  border-radius: 50px;

  border: none;

  box-shadow: 0 10px 25px rgba(204, 0, 0, 0.3);

  transition: all 0.3s ease;

}



.btn-wow:hover {

  transform: translateY(-3px);

  box-shadow: 0 15px 35px rgba(204, 0, 0, 0.45);

  color: white;

}



/* -- Hover Scale Up Animation -- */

.hover-scale-up {

  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.27), box-shadow 0.4s ease;

}



.hover-scale-up:hover {

  transform: scale(1.02);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;

}



/* -- Map Satellite Style -- */

.map-premium-satellite {

  width: 100%;

  height: 500px;

  border: 0;

  border-top: 5px solid #cc0000;

  /* Red top border */

}



/* -- WhatsApp Pop-up -- */

.whatsapp-popup {

  position: fixed;

  bottom: 25px;

  right: 25px;

  width: 300px;

  background: white;

  border-radius: 12px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

  z-index: 10000;

  overflow: hidden;

  font-family: 'Red Hat Display', sans-serif;

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.4s ease, transform 0.4s ease;

  pointer-events: none;

}



.whatsapp-popup.show {

  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;

}



.whatsapp-header {

  background: #25D366;

  color: white;

  padding: 12px 16px;

  display: flex;

  align-items: center;

  gap: 10px;

  font-weight: 700;

}



.whatsapp-header i {

  font-size: 1.4rem;

}



.whatsapp-close {

  margin-left: auto;

  background: none;

  border: none;

  color: white;

  font-size: 1.5rem;

  line-height: 1;

  cursor: pointer;

}



.whatsapp-body {

  padding: 16px;

  color: #333;

  font-size: 0.95rem;

  line-height: 1.4;

}



.whatsapp-btn-action {

  display: block;

  text-align: center;

  background: #f0f2f5;

  color: #25D366;

  font-weight: 700;

  padding: 12px;

  text-decoration: none;

  transition: background 0.2s;

}



.whatsapp-btn-action:hover {

  background: #e4e6eb;

  color: #128C7E;

}



/* ── MOBILE OPTIMIZATIONS ── */

@media (max-width: 767px) {



  /* Fix Footer/Map Overlap & Spacing */

  .map-premium-overlay {

    height: 350px;

    margin-bottom: 0;

    clip-path: none;

    /* Remove clip-path on mobile to avoid layout issues */

    border-bottom: 5px solid #cc0000;

    /* Add border to separate from footer */

  }



  /* Ensure footer doesn't overlap */

  footer {

    position: relative;

    z-index: 20;

    /* Ensure footer is above map if they touch */

  }



  .hero-premium {

    padding-bottom: 60px;

    /* Reduce bottom padding on mobile */

  }



  /* WhatsApp Popup - Smaller on Mobile */

  .whatsapp-popup {

    width: auto;

    left: 10px;

    right: 10px;

    bottom: 10px;

    transform: translateY(20px);

    max-width: 350px;

    /* Prevent it from being too wide on landscape */

    margin: 0 auto;

    /* Center if max-width hit */

  }



  .whatsapp-header {

    padding: 8px 12px;

    font-size: 0.85rem;

  }



  .whatsapp-header i {

    font-size: 1.1rem;

  }



  .whatsapp-close {

    font-size: 1.2rem;

  }



  .whatsapp-body {

    padding: 10px 12px;

    font-size: 0.8rem;

    line-height: 1.3;

  }



  .whatsapp-btn-action {

    padding: 8px;

    font-size: 0.85rem;

    margin: 0 10px 10px 10px;

    border-radius: 6px;

  }

}