/* ============================================
   CHAT WIDGET MOBILE FIX - ADD THIS TO YOUR CSS
   ============================================ */

/* On mobile, change chat widget from absolute to relative positioning */
@media (max-width: 768px) {

  /* Make chat widget part of normal flow on mobile */
  .chat-widget-section,
  .overlap-wrapper .chat-widget-section {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px 40px 20px !important;
    z-index: 1 !important;
  }

  /* Hero section needs less bottom padding since widget is now in flow */
  .hero-section,
  section.hero-section {
    padding-bottom: 40px !important;
  }

  /* Dark section doesn't need extra top padding anymore */
  .dark-section,
  .overlap-wrapper .dark-section {
    padding-top: 80px !important;
    margin-top: 0 !important;
  }

  /* Chat widget styling for mobile */
  .chat-widget,
  .chat-widget-section .chat-widget {
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

/* Smaller phones - even tighter spacing */
@media (max-width: 640px) {
  .chat-widget-section,
  .overlap-wrapper .chat-widget-section {
    padding: 0 16px 30px 16px !important;
  }

  .hero-section,
  section.hero-section {
    padding-bottom: 30px !important;
  }

  .dark-section,
  .overlap-wrapper .dark-section {
    padding-top: 60px !important;
  }
}

/* Very small phones */
@media (max-width: 480px) {
  .dark-section,
  .overlap-wrapper .dark-section {
    padding-top: 50px !important;
  }
}