/* ================================================================
   MEDISCAN — MOBILE-FIX.CSS
   Complete mobile/responsive overrides
   Breakpoints: 1024px | 768px | 576px | 480px
   ================================================================ */

/* ================================================================
   BASE — prevent horizontal scroll on ALL devices
   ================================================================ */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
}
*, *::before, *::after {
  box-sizing: border-box;
  max-width: 100%;
}
img { max-width: 100%; height: auto; display: block; }

/* ================================================================
   TOP BAR — hidden on mobile (≤768px)
   ================================================================ */
@media (max-width: 768px) {
  .top-bar { display: none !important; }
  .accent-line { display: none !important; }
}

/* ================================================================
   HEADER — mobile layout
   ================================================================ */
@media (max-width: 1024px) {
  .nav, .header-right { display: none !important; }
  .hamburger { display: flex !important; }
  .header { padding: 0 !important; }
  .header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    height: auto !important;
    min-height: 64px !important;
  }
  .logo { gap: 10px !important; }
  .ms-full-logo { height: 38px !important; max-width: 150px !important; }
  .logo-txt .brand { font-size: 18px !important; }
  .logo-txt .tag { font-size: 10px !important; }
}

/* ================================================================
   HERO SLIDER — mobile
   ================================================================ */
@media (max-width: 1024px) {
  .hero-slide .container {
    flex-direction: column !important;
    text-align: center !important;
    padding-top: 40px !important;
    padding-bottom: 60px !important;
    gap: 32px !important;
  }
  .hero-content { max-width: 100% !important; }
  .hero-btns { justify-content: center !important; }
  .hero-stats-row { justify-content: center !important; }

  /* Hide right-side visual panel on tablet */
  .hero-visual { display: none !important; }
}

@media (max-width: 768px) {
  .hero { overflow: hidden !important; }
  .hero-slide {
    min-height: auto !important;
    padding: 40px 0 60px !important;
  }
  .hero-title { font-size: 28px !important; line-height: 1.25 !important; }
  .hero-desc { font-size: 14px !important; margin: 0 auto 28px !important; }
  .hero-badge { font-size: 11px !important; padding: 6px 14px !important; }

  /* Hide ALL decorative hero images/glass cards on mobile */
  .hero-visual,
  .hero-card-main,
  .hero-glass,
  .hero-glass-1,
  .hero-glass-2,
  .hero-glass-3,
  .hero-deco,
  .hero-deco-1,
  .hero-deco-2 { display: none !important; }

  .hero-btns {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .hero-btns .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .hero-stats-row {
    justify-content: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
  }
  .hero-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

@media (max-width: 576px) {
  .hero-title { font-size: 24px !important; }
  .hero-stats-row { flex-direction: row !important; justify-content: center !important; flex-wrap: wrap !important; }
}

/* ================================================================
   STATS BAR
   ================================================================ */
@media (max-width: 768px) {
  .stats-inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding: 28px 20px !important;
  }
  .stat-item::after { display: none !important; }
}
@media (max-width: 480px) {
  .stats-inner { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ================================================================
   ABOUT SECTION
   ================================================================ */
@media (max-width: 1024px) {
  .about .container {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  /* Hide decorative about image on mobile — show text only */
  .about-visual { display: none !important; }
  .about-content { max-width: 100% !important; }
}

/* ================================================================
   SERVICES SECTION
   ================================================================ */
@media (max-width: 1200px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .svc-grid { grid-template-columns: 1fr !important; }
  .svc-card-img { height: 180px !important; }
}

/* ================================================================
   WHY SECTION — hide image on mobile
   ================================================================ */
@media (max-width: 1024px) {
  .why-section .container {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Hide right-side image panel on mobile */
  .why-visual { display: none !important; }
  .why-content { max-width: 100% !important; }
  .why-features { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 576px) {
  .why-features { grid-template-columns: 1fr !important; }
}

/* ================================================================
   BRANCHES SECTION
   ================================================================ */
@media (max-width: 1024px) {
  .branch-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
}
@media (max-width: 768px) {
  .branch-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   TESTIMONIALS
   ================================================================ */
@media (max-width: 768px) {
  .test-nav-btn { display: none !important; }
  .test-wrap { padding: 0 8px !important; }
}

/* ================================================================
   CTA SECTION
   ================================================================ */
@media (max-width: 768px) {
  .cta-box {
    flex-direction: column !important;
    text-align: center !important;
    padding: 40px 24px !important;
    gap: 24px !important;
  }
  .cta-content p { margin: 0 auto !important; max-width: 320px !important; }
  .cta-acts { justify-content: center !important; flex-wrap: wrap !important; }
}

/* ================================================================
   PAGE HERO (inner pages) — breadcrumb + title only
   ================================================================ */
@media (max-width: 768px) {
  .page-hero { padding: 60px 0 40px !important; min-height: auto !important; }
  /* Hide decorative BG image on mobile - keep gradient overlay */
  .page-hero-bg img { opacity: 0.3 !important; }
  .page-hero-content h1 { font-size: 28px !important; }
  .breadcrumb { font-size: 12px !important; margin-bottom: 10px !important; }

  /* Inner banner same fix */
  .inner-banner { padding: 50px 0 36px !important; }
  .inner-banner h1 { font-size: 26px !important; }
}

/* ================================================================
   SERVICE / BRANCH SINGLE PAGES — hero fix
   ================================================================ */
@media (max-width: 768px) {
  /* Hide large decorative images in service/branch hero, show only text */
  .single-service-hero .hero-img,
  .service-hero-img,
  .branch-hero-img,
  .svc-hero-visual { display: none !important; }

  /* Service detail page */
  .svc-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .svc-sidebar { display: none !important; }

  /* Branch detail page */
  .branch-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .branch-sidebar { order: -1 !important; }

  /* Fix page-hero on single service/branch pages */
  .page-hero-bg { height: 100% !important; }
}

/* ================================================================
   FACILITIES PAGE — branch grid
   ================================================================ */
@media (max-width: 1024px) {
  .b-grid, .facilities-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .b-grid, .facilities-grid { grid-template-columns: 1fr !important; }
  /* Hide filter buttons row decorative BG */
  .branch-filters-bg { display: none !important; }
}

/* ================================================================
   CONTACT PAGE
   ================================================================ */
@media (max-width: 768px) {
  .contact-cards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .contact-form-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  /* Hide map on very small screens */
}
@media (max-width: 480px) {
  .contact-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ================================================================
   APPOINTMENT PAGE
   ================================================================ */
@media (max-width: 1024px) {
  .appt-layout { grid-template-columns: 1fr !important; }
  /* Hide sidebar info panel on mobile */
  .appt-sidebar { display: none !important; }
}

/* ================================================================
   CAREERS PAGE
   ================================================================ */
@media (max-width: 768px) {
  .jobs-list { gap: 12px !important; }
  .job-card { flex-direction: column !important; gap: 12px !important; }
}

/* ================================================================
   ABOUT PAGE
   ================================================================ */
@media (max-width: 768px) {
  /* Hide large decorative images on about page */
  .about-page-visual,
  .about-team-img,
  .about-accred-img { display: none !important; }
}

/* ================================================================
   SIGNIN PAGE
   ================================================================ */
@media (max-width: 768px) {
  .signin-page { flex-direction: column !important; }
  /* Hide left visual panel on mobile */
  .signin-visual { display: none !important; }
  .signin-form-panel { width: 100% !important; padding: 24px 16px !important; }
}

/* ================================================================
   FOOTER
   ================================================================ */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; }
}
@media (max-width: 768px) {
  .footer-top { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-btm { flex-direction: column !important; text-align: center !important; gap: 12px !important; }
  .footer-social { justify-content: flex-start !important; }
}

/* ================================================================
   FLOATING BUTTONS — WhatsApp + Back to top
   ================================================================ */
@media (max-width: 768px) {
  .wa-float { bottom: 16px !important; left: 16px !important; }
  .btt { bottom: 16px !important; right: 16px !important; width: 40px !important; height: 40px !important; font-size: 14px !important; }
}

/* ================================================================
   POPUP — mobile
   ================================================================ */
@media (max-width: 768px) {
  .popup-overlay { padding: 16px !important; align-items: flex-end !important; }
  .popup-box { border-radius: 20px 20px 0 0 !important; max-height: 90vh !important; overflow-y: auto !important; }
  .popup-inner { flex-direction: column !important; }
  .popup-visual { flex: 0 0 140px !important; }
  .popup-info { padding: 24px 20px !important; }
  .popup-info h2 { font-size: 20px !important; }
  .popup-features { grid-template-columns: 1fr 1fr !important; }
  .popup-actions { flex-direction: column !important; }
  .popup-cta { width: 100% !important; justify-content: center !important; }
}
@media (max-width: 480px) {
  .popup-visual { display: none !important; }
  .popup-box { border-radius: 20px !important; }
  .popup-overlay { align-items: center !important; }
}

/* ================================================================
   GENERAL MOBILE CONTAINERS
   ================================================================ */
@media (max-width: 576px) {
  .container { padding: 0 16px !important; }
  .section { padding: 60px 0 !important; }
  .section-title { font-size: 24px !important; }
}
@media (max-width: 768px) {
  .section { padding: 64px 0 !important; }
  h1 { font-size: 28px !important; }
  h2 { font-size: 22px !important; }
}

/* ================================================================
   SWIPER — prevent overflow
   ================================================================ */
.swiper { overflow: hidden !important; width: 100% !important; max-width: 100% !important; }
.swiper-wrapper { max-width: 100% !important; }
.swiper-slide { max-width: 100% !important; overflow: hidden !important; }

/* ================================================================
   HIDE DECORATIVE / EXTRA ELEMENTS ON MOBILE
   ================================================================ */
@media (max-width: 768px) {
  /* Decorative shapes and patterns */
  .bg-shapes, .pat, .ph-deco,
  .hero-deco, .hero-deco-1, .hero-deco-2,
  .about-accent,
  .shape { display: none !important; }
}

/* ================================================================
   BREADCRUMB FIX
   ================================================================ */
.breadcrumb {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
@media (max-width: 576px) {
  .breadcrumb { font-size: 12px !important; }
  .breadcrumb span { max-width: 200px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
}