/*
 * =============================================================
 * Samvridhi — Mobile Responsive Fixes (Overlay CSS)
 * Version: 1.0 | Date: 2026-08-30
 *
 * PURPOSE: Fix mobile/tablet layout issues without altering
 *          existing main.css. Loaded AFTER main.css so it
 *          takes precedence on mobile viewports only.
 *
 * STRATEGY: All rules are scoped inside media queries to avoid
 *           any unintended impact on desktop (≥992px) layouts.
 * =============================================================
 */


/* =============================================================
   1. HORIZONTAL OVERFLOW PROTECTION — Global Safety Net
   Prevents any element from causing horizontal scroll on mobile.

   IMPORTANT: Do NOT set overflow-x: hidden on both html AND body.
   When both root elements have overflow-x: hidden, mobile browsers
   (especially iOS Safari) treat body as a scroll container and
   CLIP position:fixed elements like the WhatsApp button.
   The safe approach is to only clamp overflow at wrapper level.
   ============================================================= */

/* Only set on html (not body) — preserves fixed positioning on mobile */
html {
  overflow-x: hidden;
}

/* Body must NOT have overflow-x: hidden — it clips fixed elements on iOS/Android */
body {
  overflow-x: clip; /* clip stops overflow without creating scroll context */
  max-width: 100vw;
}

@media (max-width: 991.98px) {
  .container,
  .container-fluid,
  .container-xl {
    max-width: 100%;
  }
}


/* =============================================================
   WhatsApp Float Button — Right-Edge Docked (Professional)
   ============================================================= */

/*
 * Design rationale:
 * - right: 0  → flush to screen edge, zero gap
 * - border-radius: 50% 0 0 50%  → semicircle: rounded left, flat right (intentional dock)
 * - box-shadow: negative x-offset → shadow falls LEFT only (no shadow on the wall side)
 * - hover: translateX(-6px) → slides OUT from edge, feels like it peeks out (not scale, 
 *   which would push the button into the wall edge and look broken)
 * - padding-right: 6px → nudges icon left so it sits centered in the visible semicircle
 */

.whatsapp-float {
  /* Always visible — never clipped */
  position: fixed !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;

  /* Dock flush to right edge */
  right: 0 !important;
  bottom: 20px !important;

  /* Size */
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;

  /* Half-pill shape: flat right (wall side), rounded left (visible side) */
  border-radius: 50% 0 0 50% !important;

  /* Nudge icon left so it reads centered inside the semicircle area */
  padding-right: 6px !important;

  /* Shadow only on the left/bottom — none on the right (flat wall side) */
  box-shadow: -4px 4px 18px rgba(0, 0, 0, 0.28), -2px 2px 8px rgba(37, 211, 102, 0.4) !important;

  /* Smooth slide transition */
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              background-color 0.2s ease !important;
}

/* Hover: slide LEFT out of the edge — like it "peeks" toward the user */
.whatsapp-float:hover {
  background-color: #20ba5a !important;
  color: #ffffff !important;
  transform: translateX(-8px) !important;
  box-shadow: -8px 6px 24px rgba(0, 0, 0, 0.32), -4px 4px 14px rgba(37, 211, 102, 0.5) !important;
}

/* Tap feedback: push back to wall */
.whatsapp-float:active {
  transform: translateX(2px) !important;
  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Desktop: slightly larger, same docking logic */
@media (min-width: 768px) {
  .whatsapp-float {
    right: 0 !important;
    bottom: 24px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    border-radius: 50% 0 0 50% !important;
    padding-right: 6px !important;
  }

  .whatsapp-float svg {
    width: 28px !important;
    height: 28px !important;
  }
}

/* Safe-area override — never add right inset (we're deliberately at the edge) */
@supports (bottom: env(safe-area-inset-bottom)) {
  .whatsapp-float {
    right: 0 !important;
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }
}

/* Scroll-top button: keep it visible and aligned above WhatsApp button */
.scroll-top {
  position: fixed !important;
  clip: auto !important;
  clip-path: none !important;
  right: 6px !important; /* slight gap from edge since it stays circular */
}

@media (min-width: 768px) {
  .scroll-top {
    right: 8px !important;
  }
}







/* =============================================================
   2. HEADER — Mobile Nav Clean Up
   Fix the "|" separator pseudo-element leaking into the
   mobile slide-out nav (it's only styled for ≥1280px desktop
   but the selector itself has no guard).
   ============================================================= */
@media (max-width: 1279px) {
  /* Hide pipe separators on mobile nav */
  .navbar > ul > li::after {
    display: none !important;
  }

  /* Ensure nav items are block-level in mobile drawer */
  .navbar > ul > li {
    display: block !important;
  }

  /* Better tap targets in mobile nav */
  .navbar a,
  .navbar a:focus {
    padding: 12px 20px !important;
    font-size: 15px !important;
    white-space: normal !important;
  }

  /* Client Portal CTA in mobile nav — make it stand out */
  .nav-cta-btn {
    margin: 8px 20px !important;
    display: block !important;
    text-align: center !important;
  }
}


/* =============================================================
   3. HERO SECTION — Mobile Padding & Typography
   The hero has excessive top-padding on mobile (130px+).
   Fix to give it a professional, breathable feel.
   ============================================================= */
@media (max-width: 991.98px) {
  .saas-hero {
    /* The fixed header is ~65px tall on mobile. Give 90px top padding. */
    padding: 95px 0 50px 0 !important;
    min-height: auto !important;
    /* Remove the negative margin trick that causes horizontal overflow */
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .saas-hero-text-wrap {
    padding: 0 20px !important;
    text-align: center;
  }

  /* Centre the badge on mobile */
  .saas-badge {
    margin-left: auto;
    margin-right: auto;
    font-size: 0.82rem !important;
    padding: 6px 14px !important;
    max-width: 90%;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.4 !important;
  }

  .saas-title-sub {
    font-size: 1.6rem !important;
  }

  .saas-title-hero {
    font-size: 2.6rem !important;
    line-height: 1.12 !important;
  }

  /* Remove left border on mobile — causes indent misalignment */
  .saas-lead {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: center !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }

  .saas-tagline-box {
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 0.88rem !important;
    padding: 8px 14px !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    white-space: normal !important;
  }

  .hero-cta-wrap {
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Make CTA buttons full-width and properly stacked on mobile */
  .btn-saas-red,
  .btn-saas-outline {
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 12px 20px !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

@media (max-width: 575.98px) {
  .saas-hero {
    padding: 90px 0 40px 0 !important;
  }

  .saas-title-sub {
    font-size: 1.35rem !important;
  }

  .saas-title-hero {
    font-size: 2.1rem !important;
    line-height: 1.18 !important;
  }

  .saas-lead {
    font-size: 0.9rem !important;
  }

  /* Sub-page hero red badge pill — scale it down on small screens */
  .saas-title .px-3.py-1.rounded-3.bg-danger,
  .saas-hero .px-3.py-1.rounded-3 {
    font-size: 1.1rem !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* Breadcrumbs page hero text — fix 56px font on mobile */
@media (max-width: 767.98px) {
  .breadcrumbs h2 {
    font-size: 2rem !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }
}

@media (max-width: 575.98px) {
  .breadcrumbs {
    padding: 110px 0 40px 0 !important;
  }

  .breadcrumbs h2 {
    font-size: 1.6rem !important;
  }
}


/* =============================================================
   4. INDUSTRIAL COVERAGE RIBBON — Homepage Bottom-of-Hero
   The dark ribbon with badges can overflow on narrow viewports.
   ============================================================= */
@media (max-width: 767.98px) {
  /* Ribbon: stack label and badges vertically */
  .saas-hero .bg-dark.bg-opacity-75 {
    flex-direction: column !important;
    text-align: center !important;
    padding: 14px 16px !important;
    gap: 10px !important;
  }

  .saas-hero .bg-dark.bg-opacity-75 .d-flex.align-items-center.gap-2 {
    justify-content: center !important;
  }

  .saas-hero .bg-dark.bg-opacity-75 .d-flex.flex-wrap.gap-2 {
    justify-content: center !important;
  }
}


/* =============================================================
   5. #services-list — Remove Forced 60px Container Padding
   This section forces 60px side padding on its container,
   which leaves < 240px usable width on a 360px phone.
   ============================================================= */
@media (max-width: 991.98px) {
  #services-list .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #services-list {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 575.98px) {
  #services-list .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* =============================================================
   6. FOOTER — Reduce Forced Container Padding on Mobile
   Footer forces 35px side padding — too large for mobile.
   ============================================================= */
@media (max-width: 767.98px) {
  .footer .footer-content .container,
  .footer .footer-legal .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Footer info card — remove padding mismatch */
  .footer .footer-content .footer-info {
    padding: 16px !important;
    margin-bottom: 20px !important;
  }

  /* Footer columns — ensure they fill space and don't look cramped */
  .footer .col-6.footer-links {
    padding-right: 8px;
    padding-left: 8px;
  }

  /* Footer contact — text alignment on mobile */
  .footer .footer-contact {
    text-align: center !important;
  }

  /* Footer social links — center on mobile */
  .footer .social-links {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  /* Stack the Useful Links and Our Services columns on tiny screens */
  .footer .col-6.footer-links {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}


/* =============================================================
   7. INSTANT QUOTE MODAL — Mobile Usability Overhaul
   The modal's 3-column service radio buttons, text-end button
   alignment, and form padding all need mobile adjustments.
   ============================================================= */
@media (max-width: 767.98px) {
  /* Modal dialog — take full screen on mobile */
  #instantQuoteModal .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
  }

  #instantQuoteModal .modal-content {
    border-radius: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
  }

  /* Reduce modal body padding on mobile */
  #instantQuoteModal .modal-body {
    padding: 16px !important;
  }

  /* Modal header padding */
  #instantQuoteModal .modal-header {
    padding: 14px 16px !important;
  }

  /* Modal title font size */
  #instantQuoteModal .modal-title {
    font-size: 1rem !important;
  }

  /* Service selection: stack 3-col buttons to single column on mobile */
  #instantQuoteModal .row.g-3 > div[class*="col-md-4"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Make each service radio button label full width */
  #instantQuoteModal label.btn {
    padding: 12px !important;
    text-align: left !important;
  }

  /* Align submit button row to center on mobile (not text-end) */
  #instantQuoteModal .mt-4.text-end {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #instantQuoteModal .mt-4.text-end button {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Estimated price box — ensure ₹ symbols don't overflow */
  #estimated_price_range {
    font-size: 1.4rem !important;
    word-break: break-all !important;
  }

  /* Form row: stack col-md-6 to full width on mobile */
  #instantQuoteForm .row.g-3 > div[class*="col-md-6"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}


/* =============================================================
   8. CTA MODERN BLOCK — Reduce Padding on Mobile
   `.cta-modern` has padding: 60px 40px with no mobile override.
   On a 360px screen, 40px sides leave only 280px usable space.
   ============================================================= */
@media (max-width: 767.98px) {
  .cta-modern {
    padding: 36px 20px !important;
    border-left-width: 3px !important;
  }

  .cta-modern h2,
  .cta-modern h3 {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
  }

  .cta-modern p {
    font-size: 0.95rem !important;
    max-width: 100% !important;
  }

  /* Stack CTA buttons vertically on mobile */
  .cta-modern .d-flex.gap-3.flex-wrap,
  .cta-modern ~ * .d-flex,
  #call-to-action .d-flex {
    flex-direction: column !important;
    align-items: center !important;
  }
}

@media (max-width: 575.98px) {
  .cta-modern {
    padding: 28px 14px !important;
  }

  .cta-modern h2,
  .cta-modern h3 {
    font-size: 1.25rem !important;
  }
}


/* =============================================================
   9. SECTION HEADERS — Mobile Typography Scaling
   `.section-header-modern h2` is 2.25rem — fine on tablet but
   can wrap awkwardly on 360px phones, especially with icons.
   ============================================================= */
@media (max-width: 767.98px) {
  .section-header-modern h2 {
    font-size: 1.5rem !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
  }

  .section-header-modern {
    margin-bottom: 30px !important;
    padding: 0 8px !important;
  }
}

@media (max-width: 575.98px) {
  .section-header-modern h2 {
    font-size: 1.35rem !important;
  }

  /* Section header icons — scale down inline icons */
  .section-header-modern h2 .bi {
    font-size: 1.2rem !important;
    vertical-align: middle !important;
  }
}


/* =============================================================
   10. PILLAR CARDS — Reduce Padding on Mobile
   `.pillar-card` has 32px padding — excessive on small screens.
   ============================================================= */
@media (max-width: 575.98px) {
  .pillar-card {
    padding: 20px 16px !important;
  }

  .pillar-icon {
    font-size: 2rem !important;
    margin-bottom: 12px !important;
  }

  .pillar-card h3 {
    font-size: 1.1rem !important;
  }
}


/* =============================================================
   11. SPECIAL CARDS (Why Choose Us grid) — Mobile Fix
   `.special-card` uses `gap: 20px` with large icon — on narrow
   screens the icon pushes text too far right.
   ============================================================= */
@media (max-width: 575.98px) {
  .special-card {
    padding: 16px !important;
    gap: 14px !important;
  }

  .special-card-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }

  .special-card-icon img {
    width: 46px !important;
    height: 46px !important;
  }

  .special-card h4 {
    font-size: 1rem !important;
  }
}


/* =============================================================
   12. COUNTER STRIP — Mobile Padding & Font Size
   Counter strip cards are 2 per row (col-6) on mobile.
   Ensure numbers and icons don't overflow.
   ============================================================= */
@media (max-width: 575.98px) {
  .counter-strip {
    padding: 28px 0 !important;
  }

  .counter-card {
    padding: 10px 8px !important;
  }

  .counter-card i {
    font-size: 1.8rem !important;
    margin-bottom: 8px !important;
  }

  .counter-card h3 {
    font-size: 1.6rem !important;
    margin-bottom: 2px !important;
  }

  .counter-card p {
    font-size: 0.78rem !important;
  }
}


/* =============================================================
   13. HOME SECTION PADDING — Responsive Reduction
   Already has some media query overrides but let's tighten
   them further for very small screens.
   ============================================================= */
@media (max-width: 479.98px) {
  .home-section-padding {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}


/* =============================================================
   14. AI SECTION — Inner Column Padding Fix
   `.ps-lg-4` and `.pe-lg-4` are Bootstrap utilities that only
   apply at lg. However `.saas-hero-text-wrap` has a 60px left
   padding on desktop. On sub-pages some elements use pe-lg-4.
   Ensure mobile has sensible inner spacing.
   ============================================================= */
@media (max-width: 991.98px) {
  /* Left side of AI section — remove desktop-only right padding */
  #ai-small-industry .pe-lg-3,
  #ai-small-industry .ps-lg-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Ensure the AI window mock doesn't overflow */
  #ai-small-industry .bg-white.p-2.rounded-4 {
    margin: 0 !important;
  }
}


/* =============================================================
   15. WHAT MAKES SAMVRIDHI SPECIAL — Left Column Margin Fix
   `.ms-3.ms-lg-4` applied to the left column adds unwanted
   left indent on tablet/small viewports.
   ============================================================= */
@media (max-width: 991.98px) {
  #services-list .pe-lg-4.ms-3.ms-lg-4 {
    margin-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* =============================================================
   16. GOOGLE MAP IFRAME — Mobile Height Fix
   Map section uses min-height: 340px inline. On mobile,
   it should be shorter to not dominate the viewport.
   ============================================================= */
@media (max-width: 767.98px) {
  .style-map,
  .rounded-4.overflow-hidden.shadow.border.border-secondary[style*="min-height"] {
    min-height: 240px !important;
  }

  .style-map iframe {
    height: 240px !important;
  }
}


/* =============================================================
   17. CONTACT PAGE — Info Cards Grid
   On col-lg-4 col-md-6, the third card (Email) on md viewports
   takes full width which is fine, but centering needs a fix.
   ============================================================= */
@media (max-width: 575.98px) {
  /* Stack all contact info cards to full width on mobile */
  .contact-info-grid .col-lg-4,
  .contact-info-grid .col-md-6 {
    width: 100% !important;
  }
}


/* =============================================================
   18. HOLIDAYS PAGE & MISC TABLES — Horizontal Scroll
   Tables on the holidays page can overflow on mobile.
   Add scroll wrapper behaviour.
   ============================================================= */
@media (max-width: 767.98px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }

  /* But undo for Bootstrap tables that are supposed to be responsive */
  .table-responsive table {
    display: table;
    overflow-x: unset;
    white-space: normal;
  }
}


/* =============================================================
   19. SAAS HERO — Sub-page Red Badge Pill (inline `fs-3`)
   On sub-pages the hero uses `.fs-3` (1.75rem) inline red pill.
   On small phones this causes the text inside to be too large.
   ============================================================= */
@media (max-width: 575.98px) {
  .saas-hero h1 .px-3.py-1.rounded-3,
  .saas-hero .saas-title .d-inline-block {
    font-size: 1rem !important;
    padding: 6px 14px !important;
    display: block !important;
    width: auto !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
  }
}


/* =============================================================
   20. FOOTER LEGAL BAR — Clean Mobile Display
   The footer legal bar forces colours via !important.
   Ensure it wraps cleanly on mobile.
   ============================================================= */
@media (max-width: 575.98px) {
  .footer .footer-legal,
  .footer-legal {
    padding: 6px 0 !important;
    text-align: center !important;
  }

  .footer .footer-legal .copyright,
  .copyright {
    font-size: 0.75rem !important;
    padding: 4px 12px !important;
    line-height: 1.4 !important;
  }
}


/* =============================================================
   21. MODAL — Backdrop for mobile full-screen modals
   ============================================================= */
@media (max-width: 767.98px) {
  .modal-dialog-centered {
    min-height: 100% !important;
    align-items: flex-start !important;
  }

  /* Prevent the backdrop blur effect from causing jank on mobile */
  .modal-backdrop {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}


/* =============================================================
   22. GLOBAL — AOS Animation Delay Fix on Mobile
   Disable staggered animation delays on mobile for snappier UX.
   (Already in main.css at 768px, extend to 992px.)
   ============================================================= */
@media (max-width: 991.98px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }

  /* Also prevent AOS from causing layout shifts */
  [data-aos] {
    pointer-events: auto !important;
  }
}


/* =============================================================
   23. TRAINING & WEB_AP PAGES — Card Grid Spacing
   Cards using `.col-md-6.col-lg-4` should have comfortable
   spacing on mobile.
   ============================================================= */
@media (max-width: 575.98px) {
  /* Ensure full-width cards have proper padding */
  .col-md-6 > .bg-white.p-4,
  .col-md-6 > .bg-white.p-3 {
    padding: 16px !important;
  }
}


/* =============================================================
   END OF MOBILE RESPONSIVE FIXES
   ============================================================= */