/* ═══════════════════════════════════════════════════════════════
   mobile-fixes.css  —  ZERO DESKTOP IMPACT
   Add as LAST <link> in header.php
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. MOBILE NAV: logo + navbar ABSOLUTELY positioned inside fixed nav ── */
@media (max-width: 989px) {

  /* Kill pseudo-element and small-nav side effects */
  .navigation.small:before { display: none !important; }
  .navigation.small .navigation__logo { opacity: 1 !important; display: block !important; }

  /* ── Navigation: fixed block, fixed height ──
     display:block so absolutely-positioned children stack correctly.
     This avoids fighting main42f3.css flex vs the logo's position:fixed. */
  .navigation {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 50px !important;
    min-height: unset !important;
    display: block !important;
    /* overflow: hidden !important; */
    overflow: visible !important;
    background: #1a2e1a !important;
    z-index: 9000 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.32) !important;
    transition: box-shadow 0.3s ease !important;
  }

  /* ── Logo: absolute WITHIN the fixed nav (not viewport-fixed!) ──
     position:absolute on a child of position:fixed → positions relative
     to the nav bar, not the viewport. This defeats main42f3.css
     .navigation__logo { position:fixed } at all specificity levels. */
  .navigation > .navigation__logo,
  .navigation .navigation__logo {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    right: auto !important;
    z-index: 2 !important;
    opacity: 1 !important;
    display: block !important;
    line-height: 0 !important;
    padding: 0 !important;
    transition: none !important;
  }
  .navigation .navigation__logo img {
    height: 34px !important;
    width: auto !important;
    display: block !important;
    transition: height 0.3s ease !important;
  }
  .navigation.small .navigation__logo img { height: 26px !important; }

  /* Hide mobile-alternate logo and hamburger */
  .navigation > .navigation__logo--mobile,
  .navigation .navigation__logo--mobile { display: none !important; }
  .navigation__hamburger { display: none !important; }

  /* ── Navbar: absolute, starts AFTER the logo ──
     Logo natural 646×322px → at 34px height = 68px wide.
     CSS fallback left:90px (10px logo-left + 68px logo-width + 12px gap).
     JS applyLogoOffset() confirms this from naturalWidth/naturalHeight. */
  .navbar {
    position: absolute !important;
    left: 110px !important;  /* JS inline style overrides this */
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 50px !important;
    width: auto !important;  /* override main42f3.css width:100% */
    flex: none !important;
    display: flex !important;
    /* align-items: center !important; */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background: transparent !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-left: 1px solid rgba(212,200,154,0.15) !important;
    border-top: none !important;
    box-shadow: none !important;
    transform: none !important;
    scrollbar-width: none !important;
    min-width: 0 !important;
    max-height: none !important;
  }
  .navbar::-webkit-scrollbar { display: none !important; }

  /* Nav list: single horizontal row */
  .navbar__list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    padding: 0 6px !important;
    margin: 0 !important;
    gap: 0 !important;
    align-items: center !important;
    height: 100% !important;
  }

  .navbar__item {
    border-bottom: none !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    height: 100% !important;
  }
  .navbar__item > a,
  .navbar__item .dropdown > a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 50px !important;
    padding: 0 12px !important;
    color: #d4c89a !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color 0.2s !important;
  }
  .navbar__item > a:hover,
  .navbar__item .dropdown > a:hover { color: #ffffff !important; }
  .navbar__item .caret { display: none !important; }

  /* ── Dropdown: full-width panel below the nav ── */
  .navbar__item .dropdown-menu {
    display: none !important;
    position: fixed !important;
    top: 50px !important;
    left: 0 !important; right: 0 !important;
    float: none !important;
    width: 100% !important;
    background: #1a2e1a !important;
    border: none !important;
    border-top: 2px solid rgba(212,200,154,0.35) !important;
    border-left: none !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.30) !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    z-index: 9300 !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
  .navbar__item .dropdown.mob-dd-open .dropdown-menu { display: block !important; }
  .navbar__item .dropdown-menu li { display: inline-block !important; }
  .navbar__item .dropdown-menu li a {
    display: inline-block !important;
    padding: 10px 16px !important;
    font-size: 12px !important;
    color: rgba(255,255,255,0.85) !important;
    border-bottom: none !important;
    border-right: 1px solid rgba(255,255,255,0.10) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  .navbar__item .dropdown-menu li:last-child a { border-right: none !important; }
  .navbar__item .dropdown-menu li a:hover { color: #d4c89a !important; }

  /* ── Push page content below fixed 50px nav ── */
  main { padding-top: var(--wir-nav-h, 50px) !important; }
  .hp-header { margin-top: 0 !important; }
}

/* ── 2. HERO + SEARCH BOX ──────────────────────────────────────── */
@media (max-width: 767px) {

  body { overflow-x: hidden !important; }

  /* Fix h1 pre-wrap wrapping */
  .hp-searchform h1,
  .hp-header h1 {
    font-size: 22px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }

  /* Search box padding */
  .d3-search-box {
    padding: 12px !important;
    border-radius: 12px !important;
    /* Slightly stronger backdrop when filters open to stay readable */
    background: rgba(0,0,0,0.38) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  /* Hide full filter grid by default on mobile — toggle reveals it */
  .d3-filter-grid { display: none !important; }
  .d3-filter-grid.mob-open {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    animation: d3FadeIn 0.2s ease !important;
  }
  @keyframes d3FadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .d3-filter-select { font-size: 11px !important; padding: 8px 10px !important; }
  .d3-filter-label { font-size: 9px !important; }

  /* Bottom row (search input + find + reset) stays flat */
  .d3-search-bottom {
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin-bottom: 0 !important;
  }
  .d3-search-input-wrap { flex: 1 !important; min-width: 0 !important; }
  .d3-find-btn { padding: 9px 14px !important; font-size: 11px !important; white-space: nowrap !important; }
  .d3-reset-btn { padding: 9px 10px !important; font-size: 12px !important; }

  /* Quick tags: horizontal scroll */
  .d3-quick-tags {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding-bottom: 2px !important;
    margin-top: 8px !important;
    gap: 5px !important;
  }
  .d3-quick-tags::-webkit-scrollbar { display: none !important; }
  .d3-qtag { flex-shrink: 0 !important; font-size: 10px !important; padding: 3px 10px !important; white-space: nowrap !important; }

  /* ── Filter form: fix Bootstrap row negative-margin bleed & column padding ── */
  .hp-searchform { text-align: center !important; }
  .hp-header__inner .banner-on-form { width: 100% !important; }
  .hp-header__inner .banner-on-form .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hp-header__inner .new-search-properties {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
  }
  #header_search_form { width: 100% !important; }
  .d3-search-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }
}

/* Toggle button — hidden on desktop, shown on mobile by JS */
.d3-mob-toggle { display: none; }

/* ── 3. HERO SLIDER (hp-gallery / slick) ───────────────────────── */
@media (max-width: 767px) {

  /* ── Hero: height auto so it grows when filter is expanded ──
     overflow:visible so expanded filter content is NOT clipped ── */
  .hp-header {
    height: auto !important;
    min-height: 300px !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* ── Gallery: absolute background — overflow:hidden HERE (not on hero)
     so gallery images don't bleed outside its own box ── */
  .hp-gallery {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 300px !important;
    z-index: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  .hp-gallery .slick-slider,
  .hp-gallery .slick-list,
  .hp-gallery .slick-track {
    height: 100% !important;
    min-height: 300px !important;
  }
  /* Slick adds an extra <div> wrapper inside .slick-slide — chain must be 100% */
  .hp-gallery .slick-slide > div { height: 100% !important; }
  .hp-gallery-item,
  .hp-gallery .slick-slide { height: 100% !important; }
  .hp-gallery-item img {
    width: 100% !important;
    height: 100% !important;
    min-height: 300px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* ── Inner: relative flow so form content drives hero height ── */
  .hp-header__inner {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    padding: 22px 14px 24px !important;
    z-index: 2 !important;
  }
}

/* ── 4. HOTTEST SELLING SWIPER CARDS ───────────────────────────── */
@media (max-width: 767px) {
  .hottest-projects-wrapper { padding: 0 0 20px !important; }
  .hottest-projects-wrapper .sec-heading h2 { font-size: 15px !important; font-weight: 800 !important; }
  .hottest-projects-wrapper .sec-heading p  { font-size: 11px !important; }
  .seeAllProperty { font-size: 11px !important; color: #c9a84c !important; }
  .veshm-list-wraps { border-radius: 10px !important; overflow: hidden !important; border: 1px solid #e5e5e5 !important; }
  .veshm-list-thumb img { height: 110px !important; object-fit: cover !important; width: 100% !important; display: block !important; }
  .veshm-list-block { padding: 9px 10px !important; }
  .product_name { font-size: 11.5px !important; font-weight: 700 !important; color: #1a1a1a !important; margin-bottom: 2px !important; }
  .rlhc-title-name { font-size: 10px !important; color: #3a7c30 !important; font-weight: 600 !important; }
  .list_details { font-size: 10px !important; color: #999 !important; }
  .listing-price { font-size: 11px !important; font-weight: 700 !important; }
  .detailBtn a { font-size: 9.5px !important; padding: 5px 8px !important; }
  /* DO NOT set width on .hotSellingSwiper .swiper-slide — Swiper sets slide
     width via inline style based on slidesPerView. Overriding with !important
     breaks loop-mode positioning (all slides go off-screen → white blank). */
  .hotSellingSwiper { min-height: 220px !important; overflow: hidden !important; }
  .hotSellingSwiper .swiper-slide { height: auto !important; }
}

/* ── 5. EXCLUSIVE — full-width card swiper on mobile ──────────── */
@media (max-width: 767px) {
  .exclusive-rise-wrapper { padding: 20px 0 24px !important; background: #f5f5f0 !important; }
  .exclusive-rise-wrapper .title {
    padding: 0 16px !important;
    margin-bottom: 14px !important;
    text-align: center !important;
  }
  .exclusive-rise-wrapper .title h2.hero-title {
    font-size: 15px !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    color: #1a2e1a !important;
    font-weight: 700 !important;
  }

  /* Swiper: horizontal with padding so next card peeks in */
  .mySwiper4 {
    overflow: hidden !important;
    padding: 0 14px 42px !important;
  }
  .mySwiper4 .swiper-wrapper { padding-right: 0 !important; }

  /* Each slide: DO NOT set width — Swiper writes slide widths as inline styles
     for loop-mode clone positioning. width:auto !important in CSS beats those
     inline styles and breaks the loop (all clones go off-screen → blank). */
  .mySwiper4 .swiper-slide {
    position: relative !important;
    height: 230px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important;
  }

  /* Images */
  .mySwiper4 .swiper-slide picture img,
  .mySwiper4 .swiper-slide > img {
    width: 100% !important;
    height: 230px !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Gradient overlay — override desktop ::after */
  .exclusive-rise-wrapper .swiper-slide::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.35) 55%, transparent 100%) !important;
    border-radius: 0 !important;
    z-index: 1 !important;
  }

  /* Caption */
  .exclusive-rise-wrapper .slide-caption {
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 2 !important;
    background: none !important;
    padding: 20px 14px 14px !important;
  }
  .exclusive-rise-wrapper .slide-caption h3 {
    font-size: 14px !important; font-weight: 700 !important; color: #fff !important;
    margin: 0 0 4px !important; line-height: 1.3 !important;
  }
  .exclusive-rise-wrapper .slide-caption p {
    display: block !important;
    font-size: 11px !important; color: rgba(255,255,255,0.82) !important;
    margin: 0 0 8px !important; line-height: 1.5 !important;
  }
  .exclusive-rise-wrapper .banner-button {
    display: inline-block !important;
    font-size: 10px !important; font-weight: 700 !important;
    background: #d4c89a !important; color: #1a2e1a !important;
    padding: 5px 14px !important; border-radius: 5px !important;
    text-decoration: none !important; border: none !important;
  }

  /* Pagination dots */
  .exclusive-rise-wrapper .swiper-pagination { bottom: 14px !important; }
}

/* ── 6. TOP FEATURED LOCATIONS — 2-col image grid ──────────────── */
@media (max-width: 767px) {
  .top-locations-wrapper { padding: 14px !important; }

  /* Show info panel as a slim header strip above the city grid */
  .top-locations-wrapper > .container-fluid > .row > .col-lg-3:first-child,
  .top-locations-wrapper .col-md-3 {
    display: block !important;
    width: 100% !important; max-width: 100% !important; float: none !important;
    padding: 0 0 8px 0 !important;
  }
  /* Strip the box style — just centred text */
  .top-locations-wrapper .col-md-3 .xxx { padding: 0 !important; }
  .top-locations-wrapper .col-md-3 .veshm-location-prt {
    border: none !important; background: transparent !important;
    padding: 0 !important; text-align: center !important;
  }
  /* "TOP CITIES" label (first <p>) — show in gold */
  .top-locations-wrapper .col-md-3 .veshm-location-prt > p:first-child {
    display: block !important;
    color: #c9a84c !important; font-size: 10px !important; font-weight: 700 !important;
    letter-spacing: 2px !important; margin: 0 0 3px !important; text-transform: uppercase !important;
  }
  /* "Featured Locations" h2 — show in dark green */
  .top-locations-wrapper .col-md-3 .veshm-location-prt h2 {
    display: block !important;
    color: #1a2e1a !important; font-size: 15px !important; font-weight: 700 !important;
    margin: 0 !important;
  }
  /* Hide description text + Explore link */
  .top-locations-wrapper .col-md-3 .veshm-location-prt > p:not(:first-child),
  .top-locations-wrapper .col-md-3 .seeAllProperty { display: none !important; }

  /* Image grid: full width, 2 columns */
  .top-locations-wrapper > .container-fluid > .row > .col-lg-9,
  .top-locations-wrapper .col-md-9 {
    width: 100% !important; max-width: 100% !important;
    flex: 0 0 100% !important; padding: 0 !important;
  }
  .top-locations-wrapper .col-xl-3 {
    width: 50% !important; float: left !important; padding: 4px !important;
  }

  /* City card: fixed-height image with overlay */
  .veshm-location-prt {
    position: relative !important; border-radius: 10px !important;
    overflow: hidden !important; height: 80px !important;
    padding: 0 !important; border: none !important; background: transparent !important;
    margin-bottom: 0 !important;
  }
  .veshm-location-figure { display: block !important; height: 80px !important; margin: 0 !important; }
  .veshm-location-figure img { width: 100% !important; height: 80px !important; object-fit: cover !important; display: block !important; }
  .veshm-location-prt::after {
    content: '' !important; position: absolute !important; inset: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.62), transparent) !important;
    border-radius: 10px !important;
  }
  .veshm-location-content {
    position: absolute !important; bottom: 6px !important; left: 8px !important; right: 8px !important;
    z-index: 2 !important; background: transparent !important; border: none !important; padding: 0 !important;
  }
  .veshm-location-content h4 {
    font-size: 11px !important; font-weight: 700 !important; color: #fff !important; margin: 0 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9) !important;
  }
  .veshm-location-content a { text-decoration: none !important; }
  .veshm-location-lists {
    position: absolute !important; bottom: 21px !important; left: 8px !important; z-index: 2 !important;
    font-size: 10px !important; color: #fff !important; background: none !important; padding: 0 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9) !important;
  }
  /* See all link below grid */
  .top-locations-wrapper .seeAllProperty {
    display: block !important; text-align: center !important; font-size: 11px !important;
    color: #3a7c30 !important; font-weight: 700 !important; margin-top: 10px !important;
    clear: both !important; float: none !important;
  }
}

/* ── 7. DEVELOPERS — owl carousel handles all breakpoints (no static grid) ─── */
@media (max-width: 767px) {
  /* Heading: centered */
  .main-1 .new-home-heading { font-size: 14px !important; font-weight: 800 !important; text-align: center !important; margin-bottom: 10px !important; }
  /* Keep owl carousel visible on mobile — JS reinit sets 2 items */
  .main-1 .owl-carousel { display: block !important; }
  /* Tighter section padding on mobile */
  section.main-1 { padding: 20px 12px !important; }
}
/* wir-dev-grid permanently hidden (not used) */
.wir-dev-grid { display: none !important; }

/* ── 8. ABOUT — compact side-by-side mobile card ───────────────── */
@media (max-width: 767px) {
  .about-us { background: #f2f2f2 !important; padding: 16px 14px !important; }
  /* Hide huge desktop layout */
  .about-us .container-fluid > .row { display: none !important; }
  /* Show mobile card built by JS */
  .wir-about-mobile { display: block !important; }
  .wir-about-title { font-size: 14.5px !important; font-weight: 800 !important; color: #1a2e1a !important; margin-bottom: 12px !important; text-align: center !important; }
  .wir-about-inner { display: flex !important; gap: 12px !important; align-items: flex-start !important; }
  .wir-about-img { width: 90px !important; height: 110px !important; border-radius: 10px !important; overflow: hidden !important; flex-shrink: 0 !important; }
  .wir-about-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .wir-about-text h3 { font-size: 11px !important; font-weight: 700 !important; color: #c9a84c !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 4px !important; }
  .wir-about-text h2 { font-size: 13px !important; font-weight: 800 !important; color: #1a2e1a !important; margin-bottom: 6px !important; }
  .wir-about-text p  { font-size: 11px !important; color: #555 !important; line-height: 1.65 !important; }
  .wir-about-link { font-size: 11px !important; color: #1a2e1a !important; font-weight: 700 !important; margin-top: 8px !important; display: inline-block !important; text-decoration: none !important; }
}
.wir-about-mobile { display: none; }

/* ── 9. REVIEWS / TESTIMONIALS ─────────────────────────────────── */
@media (max-width: 767px) {
  .main.director { padding: 30px 0 !important; }
  .test_head { font-size: 22px !important; }
  .google-testimonial-box { padding: 12px !important; }
  .client-comment p { font-size: 12.5px !important; line-height: 1.7 !important; }
}

/* ── 10. FOOTER — stack columns ────────────────────────────────── */
@media (max-width: 767px) {
  footer.footer { padding: 20px 14px 80px !important; }
  footer.footer .col-md-3 { width: 100% !important; float: none !important; margin-bottom: 20px !important; padding: 0 !important; }
  footer.footer h4 { font-size: 14px !important; margin-bottom: 10px !important; }
  footer.footer ul li a { font-size: 13px !important; line-height: 1.9 !important; }
  .footer__social--links { margin-top: 12px !important; display: flex !important; gap: 10px !important; }
  .footer__social--links img { width: 22px !important; height: 22px !important; }
  .wir-copyright-bar { flex-direction: column !important; gap: 8px !important; text-align: center !important; padding: 12px 14px !important; }
  .wir-policy-links { justify-content: center !important; flex-wrap: wrap !important; }
}

/* ── 11. STICKY CTA BAR ────────────────────────────────────────── */
.wir-mob-cta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 8999;
  background: #fff; border-top: 1px solid #e5e5e5;
  padding: 10px 14px; gap: 10px;
  box-shadow: 0 -3px 16px rgba(0,0,0,0.10);
}
@media (max-width: 767px) { .wir-mob-cta { display: flex !important; } }
.wir-cta-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 7px; padding: 12px 10px; border-radius: 9px;
  font-size: 13.5px; font-weight: 700; border: none; cursor: pointer; text-decoration: none;
}
.wir-cta-call { background: #1a2e1a; color: #d4c89a !important; }
.wir-cta-wa   { background: #25D366; color: #fff !important; }

/* ── 12. NAVPANEL — float above CTA bar ────────────────────────── */
@media (max-width: 767px) {
  .navPanel { bottom: 72px !important; }
  .intercom, .intercomCloseBtn { bottom: 72px !important; }
}

/* ── 13. ABOUT — DESKTOP: show full text, no Read More toggle ── */
@media (min-width: 768px) {
  #wir-ab-full { display: block !important; }
  #wir-ab-short { display: none !important; }
  #wir-ab-btn  { display: none !important; }
}