/* ================================================================
   NAFAY MOTORS — mobile.css  COMPLETE FINAL v4
   Replace the entire contents of /css/mobile.css with this file
   ================================================================ */

/* ── GLOBAL ──────────────────────────────────────────────────────── */
body { padding: 0 !important; overflow-x: hidden !important; }
*, *::before, *::after { box-sizing: border-box; }

/* ── DARK SECTION TEXT — all screen sizes ────────────────────────── */
.browse-cta h2, .browse-cta h3 { color: #ffffff !important; }
.browse-cta p { color: rgba(255, 255, 255, 0.75) !important; }
.locations-section h2,
.locations-section .section-title { color: #ffffff !important; }
.locations-section .section-head p,
.locations-section .section-sub { color: rgba(255, 255, 255, 0.65) !important; }


/* ================================================================
   MOBILE — max-width: 767px
   ================================================================ */
@media (max-width: 767px) {

  /* ── NAV: hide desktop bar, show mobile row ──────────────────── */
  #nfLinks, #nfDsWrap, .navul, nav.navul, ul.navul,
  .navbar-nav.d-none.d-md-flex { display: none !important; }
  #nfMob {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* ── LOGO: white pill, compact height ────────────────────────── */
  #nfMobLogo {
    flex: 0 0 auto !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    padding: 3px 6px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 0 !important;
  }
  #nfMobLogo img {
    height: 26px !important;
    width: auto !important;
    display: block !important;
    mix-blend-mode: normal !important;
  }

  /* ── SEARCH BOX: fills all available space between logo & burger  */
  #nfMob .msbox {
    display: flex !important;
    flex: 1 1 0 !important;       /* grows to fill remaining width */
    min-width: 0 !important;
    align-items: center !important;
    background: #ffffff !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    border: none !important;
  }
  #nfMob .msbox #nfMs {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #222 !important;
    box-shadow: none !important;
  }

  /* ── SEARCH BUTTON: clearly visible orange ───────────────────── */
  #nfMob .msbox button {
    flex: 0 0 auto !important;
    background: #FE5214 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 12px !important;
    font-size: 15px !important;
    cursor: pointer !important;
    line-height: 1 !important;
  }

  /* ── HAMBURGER: fixed size, always visible ───────────────────── */
  #nfBurger {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
    background: #ffffff !important;
    color: #FE5214 !important;
    border: none !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  /* ── FLOATING WA: move up so it never covers page content ─────── */
  a.wa-float, .wa-float {
    bottom: 80px !important;
    right: 16px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* ── SIDEBAR: hide Filter By Make ───────────────────────────── */
  .col-2.leftsidebar, .leftsidebar, div.col-2 { display: none !important; }

  /* ── MAIN CONTENT: full width ────────────────────────────────── */
  .col-8 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* ── CONTACT/PAYMENT: hide stray Search Stock widget ─────────── */
  .container-fluid > .row > .search-sidebar-box,
  .container > .row > .search-sidebar-box,
  .container-fluid > .row > .whatsapp-sidebar-box,
  .container > .row > .whatsapp-sidebar-box { display: none !important; }
  .search-sidebar-box { margin-top: 24px !important; }

  /* ── CONTACT FORM: full-width inputs ─────────────────────────── */
  input[name="name"], input[name="email"], input[name="whatsapp"],
  input[name="country"], textarea[name="message"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── STOCK CARDS: single column ──────────────────────────────── */
  .car-card { flex-direction: column !important; width: 100% !important; }
  .car-img-wrap {
    width: 100% !important; max-width: 100% !important;
    height: 200px !important; flex: none !important;
  }
  .car-actions { display: none !important; }
  .d-block.d-md-none { display: block !important; }

  /* ── HOME CARDS ──────────────────────────────────────────────── */
  .home-car-card { width: 100% !important; margin-bottom: 16px !important; }

  /* ── FOOTER ──────────────────────────────────────────────────── */
  .footer .row > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px !important;
  }

  /* ── CONTAINERS: no overflow ─────────────────────────────────── */
  .container, .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: hidden !important;
  }
  .row { margin-left: 0 !important; margin-right: 0 !important; }

} /* end @media 767px */


/* ================================================================
   EXTRA SMALL — max-width: 400px
   ================================================================ */
@media (max-width: 400px) {
  #nfTzBar { gap: 12px; }
  #nfTzBar .name { display: none; }
  .trust-item .trust-num { font-size: 18px !important; }
  a.wa-float, .wa-float { padding: 9px 12px !important; font-size: 12px !important; }
} /* end @media 400px */