/* =====================================================================
   MOBILE RESPONSIVE FIXES — Chemlabs / Jyothi Hospital
   ---------------------------------------------------------------------
   PURPOSE
   This file is ADDITIVE ONLY. It does not remove, rename, or rewrite
   any existing CSS rule, HTML structure, class, ID, or JS behaviour.

   WHY THIS FILE EXISTS
   The site's base template (assets/css/style.css) already ships solid
   mobile breakpoints for its stock components. However, later files
   loaded on top of it — custom-overrides.css, header-redesign.css,
   booking-widget.css, and several per-page inline <style> blocks —
   contain unscoped desktop-only tweaks (fixed pixel widths, forced
   single-line/no-wrap flex rows, fixed card sizes) that were written
   without a matching mobile breakpoint. Because those rules use
   !important and load late in the cascade, they currently win on
   phones and tablets too, which breaks stacking/wrapping there.

   This file is loaded LAST on every page (after everything above) and
   only contains rules scoped inside mobile/tablet media queries, so it
   restores correct small-screen behaviour without touching a single
   desktop rule or existing file.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0) GLOBAL SAFETY NET — prevents horizontal scroll/overflow on any
   page regardless of what other rules do. Applies at all sizes but is
   harmless on desktop (it never constrains desktop layouts, it only
   stops elements from spilling past the viewport edge).
   --------------------------------------------------------------------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Bare (non-Bootstrap-wrapped) tables get horizontal scroll instead of
   forcing the page wider than the viewport. */
table {
  max-width: 100%;
}
@media (max-width: 767.98px) {
  table:not(.table-responsive table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------------------------------------------------------------------
   1) MAIN NAVIGATION (critical fix)
   custom-overrides.css and several per-page inline <style> blocks set
   `.navbar-nav { display:flex; gap:...; }` and
   `.navbar-nav .nav-item-link { white-space:nowrap; }` with no mobile
   breakpoint. On phones/tablets those rules fight the site's own
   off-canvas mobile menu (which expects the nav links stacked in a
   column inside a 240px-wide sliding panel — see style.css
   `@media (max-width:991px) .navbar .navbar-collapse .navbar-nav`),
   turning the mobile menu into an unreadable horizontal row.
   This restores the intended stacked layout at that same breakpoint.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .navbar .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .navbar .navbar-nav .nav-item {
    width: 100%;
  }

  .navbar .navbar-nav .nav-item-link {
    white-space: normal !important;
    width: 100%;
    display: block;
    font-size: 16px !important;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* The "Contact Now" CTA and any topbar contact list should also wrap
     instead of being forced onto one line. */
  .topbar-contact,
  .header-redesign .topbar-contact {
    gap: 14px !important;
  }

  .navbar .d-xl-flex {
    margin-left: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .navbar-brand img {
    max-height: 52px !important;
  }
  .btn-header-cta {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }
}

/* ---------------------------------------------------------------------
   2) BOOK CONSULTATION / BOOKING WIDGET BAR
   booking-widget.css already stacks the bar into a column under 520px.
   The inline <style> block added to several pages (index.html,
   tests-services.html, etc.) forces `flex-wrap:nowrap` and fixed
   min-widths on the location/speciality/doctor selects, which is fine
   on desktop but leaves tablets and large phones (521–767px, e.g. a
   phone in landscape or a small tablet in portrait) with an
   overflowing, unreadable bar. This widens the existing stacking
   breakpoint so the bar wraps sooner, and keeps every field full-width
   and easy to tap.
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #bw-widget .bw-bar,
  .bw-bar {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }

  #bw-widget .bw-field,
  .bw-field {
    width: 100% !important;
    min-width: 0 !important;
  }

  #bw-loc, #bw-spec, #bw-doc {
    min-width: 0 !important;
    width: 100% !important;
  }

  #bw-widget .bw-cta,
  .bw-cta {
    width: 100% !important;
    white-space: normal !important;
    padding: 14px !important;
  }
}

/* ---------------------------------------------------------------------
   3) HOMEPAGE "Expert Medical Specialists" CARDS
   custom-overrides.css gives these cards a fixed 280x280px box. The
   grid already drops to 1 column under 640px, but the fixed pixel size
   stays, which can crowd very narrow screens and wastes space on
   wider phones. This makes the card fluid within its grid cell while
   keeping the same visual proportions on tablet/desktop.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  #home-features .fancybox-item {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 240px;
    padding: 28px 20px 24px;
  }

  #home-features .home-features-img-col {
    min-height: 220px;
  }

  #home-features .home-features-img-col::before {
    width: 220px;
    height: 220px;
  }
}

@media (max-width: 575.98px) {
  #home-features .fancybox-item::before {
    font-size: 32px;
  }
}

/* ---------------------------------------------------------------------
   4) HERO SLIDER (index.html)
   Keep the custom hero button sizing but let two CTA buttons stack
   instead of squeezing side-by-side under a fixed 200px min-width
   each, which can overflow very narrow (320–360px) phones.
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
  .slide-content .btn-white.btn-xl,
  .slide-content .btn-white.btn-outlined {
    min-width: 0 !important;
    width: 100%;
    margin-bottom: 10px;
  }

  .slide-title {
    font-size: clamp(24px, 7vw, 32px) !important;
  }
}

/* ---------------------------------------------------------------------
   4b) HERO BANNER IMAGE CROP ON MOBILE (confirmed via screenshot)
   assets/js/main.js sets `background-position:center` inline on every
   `.bg-img` slide. The banner photos are wide compositions with a
   plain dark-blue gradient on the LEFT half (reserved for the desktop
   text overlay) and the actual people/subject on the RIGHT half. On a
   narrow phone, "center" crops to the middle of that image — mostly
   empty gradient, with the doctors barely visible at the edge.
   Shifting the crop toward the right on mobile keeps the subject
   visible, while keeping the exact same full-bleed-photo-with-overlay
   style as desktop (just scaled down) rather than restructuring the
   layout. This overrides the JS-set inline value with `!important`,
   without touching main.js or any slide markup.
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .slider .slide-item.bg-img {
    background-position: 78% center !important;
  }
}

@media (max-width: 480px) {
  .slider .slide-item.bg-img {
    background-position: 85% center !important;
  }
}

/* ---------------------------------------------------------------------
   4c) HEADER LOGO OVERFLOW → STRAY WHITE SHAPE ABOVE HERO
   (confirmed via screenshot + rendered inspection)
   Root cause found in assets/css/style.css:
     img { max-width: 500px; border-radius: 50px; }
   This is a base rule applying to literally every <img> on the site.
   Combined with how the logo is centered inside the 80px-tall mobile
   nav row, the logo image's own box ends up taller than the space
   available and its bottom edge (with that 50px corner radius baked
   in) spills a few pixels below the white nav bar into the hero
   image underneath — the stray white curved shape from the
   screenshot. This does not touch the shared `img` rule (which could
   affect other images sitewide); it only (a) clips anything that
   overflows the mobile nav row, and (b) removes the accidental
   radius/max-width specifically from the logo, which is the one place
   it was never meant to apply.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .header-redesign .navbar,
  .header-redesign .navbar > .container-fluid {
    overflow: hidden;
  }

  .navbar-brand img,
  .navbar-brand .logo-dark {
    border-radius: 0 !important;
    max-width: 160px !important;
  }
}

/* ---------------------------------------------------------------------
   5) GENERAL TOUCH-FRIENDLY SPACING
   Slightly larger tap targets and tighter section padding on phones,
   without altering desktop spacing rules defined elsewhere.
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .btn,
  .btn-header-cta,
  a.btn {
    min-height: 44px;
  }

  .page-title-compact {
    padding: 36px 0 28px !important;
  }

  .page-title-compact-heading {
    font-size: 28px !important;
  }
}

/* ---------------------------------------------------------------------
   6) DOCTOR CARD HOVER-ONLY CONTENT
   doctors.html reveals the profile photo/social icons only on
   `:hover`, which many touch devices never trigger. This keeps them
   visible by default below the desktop hover breakpoint so mobile
   users aren't missing content, without touching the hover rules
   themselves.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   8) ADMIN PANEL SIDEBAR
   admin/includes/header.php lays the sidebar and content out with
   `.d-flex` and a fixed 230px sidebar (`flex-shrink:0`) and no mobile
   breakpoint at all, so on a phone the content column gets squeezed
   into a sliver next to the sidebar. This stacks the sidebar above the
   content on small screens, which needs no JS since the sidebar has no
   collapse/toggle behavior to preserve.
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .admin-sidebar.flex-shrink-0 {
    width: 100% !important;
    min-height: auto !important;
  }

  body > .d-flex:has(> .admin-sidebar) {
    flex-direction: column;
  }

  .admin-content {
    padding: 1.1rem !important;
  }

  .admin-topbar.d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 4px;
  }
}

/* ---------------------------------------------------------------------
   9) FOOTER
   .footer-primary uses large fixed top padding (123px) tuned for
   desktop; on phones this pushes footer content unnecessarily far
   down. Footer columns already stack via Bootstrap's grid, this only
   trims vertical rhythm to match smaller screens.
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .footer .footer-primary {
    margin-top: 40px;
    padding: 60px 0 50px;
  }
  .footer .footer-secondary {
    padding: 28px 0;
    text-align: center;
  }
  .footer .footer-secondary:after {
    left: 20px;
    right: 20px;
  }
  .footer [class*="footer-widget"] {
    margin-bottom: 24px;
  }
}

/* ---------------------------------------------------------------------
   10) TABLET-SPECIFIC REFINEMENT (768–1024px)
   Ensures cards/grids that go straight from 1-col mobile to a wide
   desktop layout get a sensible 2-column tablet step instead of
   jumping straight to cramped desktop columns, matching the "tablet
   should not just reuse the mobile layout" requirement. Only applies
   to elements that already use Bootstrap's row/col grid, so no new
   markup or class is required.
   --------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024.98px) {
  .services-layout3 .col-lg-3,
  .fancybox-layout3 .col-lg-3,
  .col-xl-3.col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .page-title-compact-heading {
    font-size: 38px;
  }

  #home-features .fancybox-item {
    min-height: 260px;
  }
}

/* ---------------------------------------------------------------------
   11) FLOATING CALL / WHATSAPP BUTTONS (confirmed bug from live
   screenshots)
   Both assets/css/style.css (`.whatsapp-float`) and several pages' own
   inline <style> blocks (`.call-float`, `.whatsapp-float`) position
   these fixed buttons on the LEFT at left:20–40px. Because most body
   text is left-aligned with only ~15–20px of container padding, the
   buttons sit directly on top of headings and paragraphs as the user
   scrolls (confirmed in live screenshots on About/Why-Choose sections).
   Moving them to the right — the universal convention for these
   widgets, and away from where paragraph text starts — fixes the
   overlap without touching a single existing HTML element, link, or
   click handler; only position changes.
   --------------------------------------------------------------------- */
.whatsapp-float,
.call-float {
  left: auto !important;
  right: 18px !important;
}

.whatsapp-float {
  bottom: 18px !important;
}

.call-float {
  bottom: 84px !important;
}

@media (max-width: 576px) {
  .whatsapp-float,
  .call-float {
    right: 14px !important;
  }
  .whatsapp-float {
    bottom: 14px !important;
  }
  .call-float {
    bottom: 72px !important;
  }
}

/* ---------------------------------------------------------------------
   12) TWO-COLUMN "FANCYBOX" FEATURE GRIDS ON NON-HOMEPAGE PAGES
   (confirmed bug from live screenshots — "Improving Your Health" /
   "Better Health Outcomes" style cards)
   style.css defines the base rule
   `.fancybox-layout3 .fancybox-item { flex:0 0 calc(50% - 15px); }`
   with NO mobile override — the only breakpoint overrides that exist
   (max-width:991px) resize the icon/padding but never remove the 50%
   split, so these cards stay 2-up and clip their own text on every
   phone width. (On the homepage this class also carries the
   `#home-features` ID, which custom-overrides.css already overrides
   correctly — this fix only affects the *other* pages that reuse the
   same class without that ID: careers.html, testimonials.html,
   home-modern.html, home-classic.html, tests-provider-registration.html,
   tests-book-visit.html, tests-billing.html.)
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .fancybox-layout3 .fancybox-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Same unscoped 50%-split bug pattern, found in a couple of other
   reusable components. Corrected the same way, mobile-only. */
@media (max-width: 575.98px) {
  .list-horizontal li {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ---------------------------------------------------------------------
   13) FOOTER COLUMNS (confirmed bug from live screenshots)
   The footer markup (duplicated across ~34 static pages) uses
   Bootstrap columns like `col-6 col-md-3` for the "Useful Links" and
   "Services" widgets. An unprefixed `col-6` is 50% width at EVERY
   breakpoint including the smallest phones, which is why the footer
   showed two cramped columns with the logo/heading clipped on the
   right edge. This forces every footer column to full width below
   768px — a pure CSS fix, no HTML/link/content changes needed since
   the bug is a Bootstrap grid class applying at the wrong breakpoint,
   correctable from the CSS side alone.
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .footer-primary .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ---------------------------------------------------------------------
   14) HOME "Excellence in Every Care" PROMO BANNER (.video-promo-section)
   Rebuilt to match the reference design: a full-bleed photo behind
   everything with a dark gradient overlay, and white text sitting
   directly on top of it (badge / heading / description / CTA buttons)
   instead of a separate photo strip with a white card underneath.
   The gradient overlay is what keeps the white text readable against
   whatever part of the photo is behind it, the same way the reference
   site handles it.
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Full-bleed hero style (matches the reference: photo behind
     everything with a dark gradient overlay so white text stays
     readable on top of it), instead of a separate photo strip +
     white card below it. */
  #video-promo.video-promo-section,
  .video-promo-section.bg-img {
    background-color: #0a1b2e !important;
    background-image:
      linear-gradient(180deg, rgba(10, 27, 46, 0.55) 0%, rgba(10, 27, 46, 0.8) 55%, rgba(10, 27, 46, 0.94) 100%),
      url("../images/backgrounds/5.png") !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    min-height: 560px !important;
    height: auto !important;
    max-height: none !important;
    padding: 90px 0 40px !important;
    display: flex !important;
    align-items: flex-end !important;
    overflow: hidden !important;
  }

  #video-promo .bg-img {
    display: none !important;
  }

  #video-promo .container {
    position: relative !important;
    z-index: 2;
    width: 100%;
    margin-top: 0 !important;
    padding: 0 20px !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  #video-promo .video-promo-label > div {
    color: #ff9d4d !important;
  }

  .video-promo-title {
    color: #ffffff !important;

    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }

  .video-promo-desc {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }

  .video-promo-actions {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .video-promo-actions .btn.btn-white {
    margin-left: 0 !important;
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .video-promo-actions .video-btn-white .video-btn-title {
    color: #ffffff !important;
  }
}

/* ---------------------------------------------------------------------
   15) "WHAT OUR PATIENTS SAY" TESTIMONIAL IMAGE (confirmed via screenshot)
   index.html's inline <style> block hard-codes:
     .testimonial-img { width: 700px; margin-left: 50px; }
   with no mobile breakpoint. The surrounding column already goes full
   width on phones (col-12), but this fixed 700px box inside it doesn't
   shrink to fit — so the image just gets clipped at the screen edge
   instead of resizing, which is the cut-off look in the screenshot.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .testimonial-img {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 767.98px) {
  .testimonial-img img {
    max-height: 220px !important;
  }

  .testimonial-content {
    flex-direction: column !important;
  }

  .testimonial-bar {
    width: 100% !important;
    min-width: 0 !important;
    height: 4px !important;
    margin-bottom: 10px;
  }
}

/* ---------------------------------------------------------------------
   7) SERVICES / TESTS DEPARTMENT LIST (tests-services.html)
   Already resets to full width under 1199px via its own inline
   <style>; this only tightens spacing further on small phones so the
   scrollable department list isn't cramped.
   --------------------------------------------------------------------- */
   .services-explorer .service-panel h2,
.services-explorer .service-panel h3 {
  font-size: 26px !important;
  line-height: 1.3 !important;
}

.services-explorer .service-panel h4 {
  font-size: 20px !important;
}
@media (max-width: 575.98px) {
  .services-explorer-wrap.services-explorer-3col .services-nav {
    max-height: 320px !important;
  }
}
.services-explorer-wrap.services-explorer-3col .services-nav {
  max-height: 320px !important;
}
@media (max-width: 767px) {
  .services-explorer h3 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word;
  }

  .services-explorer h4 {
    font-size: 18px !important;
  }
}