/* ====== RESPONSIVE CSS - Mobile & Tablet Enhancements ====== */

/* --- Mobile Slider Styles --- */
[data-mobile-slider]::-webkit-scrollbar { display: none; }
[data-mobile-slider] { scrollbar-width: none; }

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-bottom: 0.5rem;
}

.slider-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  transition: background 0.3s, transform 0.3s;
  cursor: pointer;
}

.slider-dots span.active {
  background: var(--burnt-orange);
  transform: scale(1.2);
}

/* --- Tablet (max 992px) --- */
@media (max-width: 992px) {
  /* Pricing slider on tablet */
  .pricing-grid[data-slider-active] {
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    display: flex !important;
    gap: 1rem !important;
    padding-bottom: 0.5rem !important;
  }

  .pricing-grid[data-slider-active] .pricing-card {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    scroll-snap-align: center !important;
    height: auto !important;
  }

  /* Services grid slider */
  .services-grid[data-slider-active] {
    display: flex !important;
    grid-template-columns: unset !important;
  }

  /* Footer bottom stack */
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }
}

/* --- Mobile (max 768px) --- */
@media (max-width: 768px) {
  /* General text improvements */
  body {
    font-size: 15px;
  }

  /* Override stacked pricing for slider mode */
  .pricing-grid[data-slider-active] {
    flex-wrap: nowrap !important;
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    justify-content: flex-start !important;
  }

  .pricing-grid[data-slider-active] .pricing-card {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    scroll-snap-align: center !important;
  }

  /* Services grid slider override */
  .services-grid[data-slider-active] {
    display: flex !important;
    grid-template-columns: unset !important;
  }

  .services-grid[data-slider-active] .service-card {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    scroll-snap-align: center !important;
  }

  /* Benefits slider override */
  [data-slider-active] .benefit-card {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    scroll-snap-align: center !important;
  }

  /* Pricing card height auto for mobile */
  .pricing-card {
    height: auto !important;
    min-height: unset !important;
  }

  .pricing-featured {
    transform: none !important;
  }

  /* CTA sections - better padding */
  section[style*="background: linear-gradient(135deg, var(--burnt-orange)"] {
    padding: 2.5rem 1rem !important;
  }

  section[style*="background: linear-gradient(135deg, var(--burnt-orange)"] h2 {
    font-size: 1.5rem !important;
  }

  /* Final CTA card */
  section div[style*="max-width: 800px"][style*="background: white"] {
    padding: 2rem 1.25rem !important;
    border-radius: 16px !important;
  }

  /* Benefit cards in mobile */
  .benefit-card {
    padding: 1.75rem !important;
  }

  .benefit-card h3 {
    font-size: 1.2rem !important;
  }

  /* About service section */
  .about-service-content {
    text-align: center;
  }

  /* Footer grid improvements */
  .footer-grid {
    gap: 2rem !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }

  .footer-bottom div {
    justify-content: center;
  }

  /* Fix inline style grids for image+text sections */
  div[style*="grid-template-columns: 1fr 1.5fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    gap: 1.5rem !important;
  }

  /* Images in stacked sections */
  div[style*="min-height: 350px"][style*="background: url"] {
    min-height: 220px !important;
    border-radius: 12px !important;
  }

  /* Service page "Why Choose Us" image height */
  div[style*="border-radius: 20px"] img[style*="height: 600px"],
  div[style*="border-radius: 20px"] img[style*="height: 500px"] {
    height: 280px !important;
  }

  /* Contact hero form card */
  .contact-hero .form-card {
    padding: 1.25rem !important;
  }

  /* Popup image hide on mobile */
  .popup-image {
    display: none !important;
  }

  .popup-modal {
    grid-template-columns: 1fr !important;
  }
}

/* --- Small phones (max 480px) --- */
@media (max-width: 480px) {
  /* Slider cards wider on small screens */
  .pricing-grid[data-slider-active] .pricing-card {
    flex: 0 0 92% !important;
    max-width: 92% !important;
  }

  .services-grid[data-slider-active] .service-card {
    flex: 0 0 92% !important;
    max-width: 92% !important;
    padding: 1.5rem !important;
  }

  [data-slider-active] .benefit-card {
    flex: 0 0 92% !important;
    max-width: 92% !important;
    padding: 1.25rem !important;
  }

  /* Footer text size */
  .footer-section p,
  .footer-section a {
    font-size: 0.9rem !important;
  }
}