/* ================================================================
   NEOLINA MOBILE FIXES v2 (Front-end / Site)
   Updated: 2026-04-29 - Precise selectors based on DOM inspection
   
   ALL rules wrapped in @media (max-width: 767px)
   DESKTOP IS 100% UNCHANGED
   ================================================================ */

@media (max-width: 767px) {

  /* ---- 1. Stop horizontal overflow on mobile ---- */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* ---- 2. Three.js / canvas backgrounds visible on mobile ---- */
  /* Real canvas IDs: #nlC (hero), #nl-nav-canvas (header), 
     #neolina-molecule-bg (products), .section-whyus canvas, 
     .counter-section canvas */
  
  /* HERO BANNER - particles globe */
  #nlBanner {
    position: relative !important;
    overflow: hidden !important;
    min-height: 600px !important;
  }
  #nlBanner > #nlC,
  #nlC {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
    pointer-events: none;
  }
  #nlBanner > .container,
  #nlBanner > div:not(canvas) {
    position: relative !important;
    z-index: 2 !important;
  }
  
  /* HEADER nav background canvas */
  header { position: relative !important; }
  #nl-nav-canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
    pointer-events: none;
  }
  
  /* PRODUCTS section molecule animation */
  .neolina-products-premium {
    position: relative !important;
    overflow: hidden !important;
  }
  #neolina-molecule-bg,
  .neolina-products-premium canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
    pointer-events: none;
  }
  .neolina-products-premium > .container,
  .neolina-products-premium > div:not(canvas) {
    position: relative !important;
    z-index: 2 !important;
  }
  
  /* WHY US section background */
  .section-whyus {
    position: relative !important;
    overflow: hidden !important;
  }
  .section-whyus canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
    pointer-events: none;
  }
  .section-whyus > .container,
  .section-whyus > div:not(canvas) {
    position: relative !important;
    z-index: 2 !important;
  }
  
  /* COUNTER section */
  .counter-section {
    position: relative !important;
    overflow: hidden !important;
  }
  .counter-section canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
    pointer-events: none;
  }
  .counter-section > .container,
  .counter-section > div:not(canvas) {
    position: relative !important;
    z-index: 2 !important;
  }

  /* ---- 3. Hero stats row "300+ 300+ 16+ 28+" was cut off ---- */
  /* Force any flex/grid stat row to wrap so STATES doesn't clip */
  #nlBanner .row {
    flex-wrap: wrap !important;
  }
  #nlBanner .row > [class*="col"] {
    max-width: 100% !important;
  }

  /* ---- 4. Hide right-side floating cert badges (.nlUi) ---- */
  /* These force horizontal overflow on mobile */
  .nlUi,
  .floating-badges,
  [class*="cert-floating"] {
    display: none !important;
  }

  /* ---- 5. HAMBURGER MENU FIX (CRITICAL) ---- */
  /* #navbarSupportedContent had display:none even when toggled */
  /* Bootstrap collapse was failing - force it as proper drawer */
  #navbarSupportedContent.collapse:not(.show) {
    display: none !important;
  }
  #navbarSupportedContent.collapse.show,
  #navbarSupportedContent.collapsing {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #fff !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
    padding: 16px !important;
    z-index: 9999 !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #navbarSupportedContent .nav-link,
  #navbarSupportedContent a {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    color: #333 !important;
    font-size: 15px !important;
    display: block !important;
  }
  #navbarSupportedContent .dropdown-menu {
    position: static !important;
    border: none !important;
    box-shadow: none !important;
    background: #fafafa !important;
    padding-left: 16px !important;
    transform: none !important;
    width: 100% !important;
  }
  /* Make sure header/nav don't clip the absolute positioned drawer */
  header, header > nav, .navbar {
    position: relative !important;
  }

  /* ---- 6. Justified text - left align on mobile ---- */
  p, .about-text p, [class*="about"] p, section p {
    text-align: left !important;
    word-spacing: normal !important;
    hyphens: none !important;
  }

  /* ---- 7. Headings word-wrap ---- */
  h1, h2, h3, .section-title, .heading {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.2 !important;
  }

  /* ---- 8. Floating buttons - reduce clutter ---- */
  /* Hide "We Are Here" tooltip widget that overlaps content */
  [class*="we-are-here"],
  .chat-widget-tooltip,
  iframe[title*="chat" i] {
    display: none !important;
  }
  /* WhatsApp + Call buttons positioned cleanly */
  .whatsapp-float, a[href*="wa.me"],
  .call-float, a[href^="tel:"].float {
    bottom: 80px !important;
  }

  /* ---- 9. Product carousel cards fit viewport ---- */
  .owl-carousel .owl-item, .slick-slide {
    padding: 0 5px !important;
  }
  .product-card, [class*="product-card"] {
    max-width: 100% !important;
  }

  /* ---- 10. Footer columns stack ---- */
  footer .col, footer [class*="col-"] {
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  /* ---- 11. Bottom inquire bar slim ---- */
  .inquire-bar, [class*="bottom-inquire"] {
    padding: 10px !important;
    font-size: 13px !important;
  }

}