/*
Theme Name: Houzez Child - Osoulk
Description: Osoulk Real Estate Child Theme - Full custom CSS
Version: 3.0
Template: houzez
*/

/* ============================================================
   1. CSS VARIABLES & DESIGN TOKENS
   ============================================================ */
:root {
  --clr-navy:        #004274;
  --clr-navy-light:  rgba(0, 66, 116, 0.07);
  --clr-navy-mid:    rgba(0, 66, 116, 0.12);
  --clr-red:         #ef4444;
  --clr-green:       #16a34a;
  --clr-text:        #0f172a;
  --clr-muted:       #64748b;
  --clr-border:      #e2e8f0;
  --clr-bg:          #f8fafc;
  --clr-white:       #ffffff;
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       16px;
  --radius-xl:       20px;
  --radius-pill:     999px;
  --shadow-sm:       0 2px 8px rgba(0,0,0,.05);
  --shadow-md:       0 4px 20px rgba(0,66,116,.06);
  --shadow-lg:       0 10px 40px rgba(0,66,116,.12);
  --transition:      all 0.25s cubic-bezier(0.4,0,0.2,1);
  --font:            'Cairo', 'Tajawal', sans-serif;
  --header-h-desk:   70px;
  --header-h-mob:    60px;
  --header-top-mob:  15px;
}

/* ============================================================
   2. BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font) !important;
  color: var(--clr-text) !important;
  background: var(--clr-bg) !important;
}
body.rtl {
  direction: rtl !important;
}
body:not(.rtl) {
  direction: ltr !important;
}

/* ============================================================
   3. DESKTOP HEADER — Global Premium Floating Pill (≥ 992px)
   ============================================================ */
/* Ensure the header wrappers have higher z-index than the announcement bar */
html body .header-main-wrap,
html body .mobile-header-wrap {
  z-index: 9999999 !important;
}

@media (min-width: 992px) {

  /* Hide mobile header on desktop (global) */
  #header-mobile { display: none !important; }

  /* ---- Floating pill header: GLOBAL ---- */
  html body #header-section.header-desktop {
    position: sticky !important;
    top: 15px !important;
    margin: 15px auto 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: calc(100% - 40px) !important;
    max-width: 1280px !important;
    height: var(--header-h-desk) !important;
    background: rgba(255,255,255,.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,.5) !important;
    border-radius: 35px !important;
    box-shadow: var(--shadow-md) !important;
    z-index: 9999999 !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    transition: var(--transition) !important;
  }
  
  html body.admin-bar #header-section.header-desktop {
    top: 47px !important; /* 32px adminbar + 15px margin */
  }

  /* Sticky scrolled state: switch to position fixed so it is independent of container height */
  html body #header-section.header-desktop.houzez-in-view,
  html body #header-section.header-desktop.sticky-nav-area,
  html body #header-section.header-desktop.header-sticky,
  html body #header-section.header-desktop.slide-down {
    position: fixed !important;
    background: rgba(255,255,255,.95) !important;
    box-shadow: var(--shadow-lg) !important;
    top: 15px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: calc(100% - 40px) !important;
    max-width: 1280px !important;
    height: 66px !important;
    z-index: 9999999 !important;
  }
  
  html body.admin-bar #header-section.header-desktop.houzez-in-view,
  html body.admin-bar #header-section.header-desktop.sticky-nav-area,
  html body.admin-bar #header-section.header-desktop.header-sticky,
  html body.admin-bar #header-section.header-desktop.slide-down {
    top: 47px !important;
  }

  /* Override container-fluid styling inside the header to prevent unwanted nested padding */
  #header-section.header-desktop .container-fluid {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #header-section.header-desktop .header-inner-wrap {
    width: 100% !important; height: 100% !important;
    display: flex !important; align-items: center !important;
    justify-content: space-between !important; padding: 0 !important;
  }

  #header-section.header-desktop .navbar {
    background: transparent !important; padding: 0 !important;
    height: 100% !important; display: flex !important; align-items: center !important;
    width: 100% !important;
  }

  #header-section.header-desktop #main-nav {
    display: flex !important; align-items: center !important; gap: 4px !important;
  }

  #header-section.header-desktop #main-nav .nav-item { margin: 0 !important; padding: 0 !important; }

  #header-section.header-desktop #main-nav .nav-link {
    color: #0c2340 !important; font-size: 13.5px !important; font-weight: 700 !important;
    padding: 8px 14px !important; border-radius: var(--radius-md) !important;
    transition: var(--transition) !important; line-height: normal !important;
  }

  #header-section.header-desktop #main-nav .nav-link:hover { background: var(--clr-navy-light) !important; color: var(--clr-navy) !important; }

  #header-section.header-desktop #main-nav .nav-item.current-menu-item .nav-link,
  #header-section.header-desktop #main-nav .nav-item.active .nav-link {
    background: var(--clr-navy-mid) !important; color: var(--clr-navy) !important;
  }

  #header-section.header-desktop #navi-user {
    display: flex !important; align-items: center !important; gap: 12px !important;
  }

  #header-section.header-desktop .btn-phone-number a {
    display: inline-flex !important; align-items: center !important;
    height: 42px !important; padding: 0 16px !important;
    background: var(--clr-navy-light) !important; color: var(--clr-navy) !important;
    font-weight: 700 !important; font-size: 13.5px !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--clr-navy-mid) !important;
    text-decoration: none !important; transition: var(--transition) !important;
  }
  #header-section.header-desktop .btn-phone-number a:hover {
    background: var(--clr-navy) !important; color: #fff !important;
  }

  #header-section.header-desktop .btn-create-listing {
    display: inline-flex !important; align-items: center !important;
    height: 42px !important; padding: 0 20px !important;
    background: var(--clr-navy) !important; color: #fff !important;
    font-weight: 700 !important; font-size: 13.5px !important;
    border-radius: var(--radius-md) !important; border: none !important;
    box-shadow: 0 4px 12px rgba(0,66,116,.2) !important; transition: var(--transition) !important;
  }
  #header-section.header-desktop .btn-create-listing:hover {
    background: var(--clr-red) !important;
    box-shadow: 0 4px 18px rgba(239,68,68,.3) !important;
    transform: translateY(-1px) !important;
  }

  /* Profile dropdown */
  #header-section.header-desktop .navbar-logged-in-wrap .dropdown-toggle img {
    border: 2px solid var(--clr-navy-mid) !important;
    border-radius: var(--radius-md) !important; width: 36px !important; height: 36px !important;
    transition: var(--transition) !important;
  }
  #header-section.header-desktop .navbar-logged-in-wrap .dropdown-toggle:hover img { border-color: var(--clr-navy) !important; }

  #header-section.header-desktop .navbar-logged-in-wrap .dropdown-menu {
    background: rgba(255,255,255,.95) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 10px !important; margin-top: 10px !important;
  }
  #header-section.header-desktop .navbar-logged-in-wrap .dropdown-menu li a {
    border-radius: var(--radius-sm) !important; padding: 8px 12px !important;
    font-weight: 600 !important; transition: var(--transition) !important;
  }
  #header-section.header-desktop .navbar-logged-in-wrap .dropdown-menu li a:hover {
    background: var(--clr-navy-light) !important; color: var(--clr-navy) !important;
  }

  /* ---- LIQUID/RESPONSIVE TRANSITIONS FOR MID-SIZE DESKTOP (992px to 1240px) ---- */
  @media (max-width: 1240px) {
    #header-section.header-desktop {
      padding: 0 16px !important;
      width: calc(100% - 20px) !important;
      margin: 10px auto 0 !important;
    }
    html body #header-section.header-desktop.header-sticky,
    html body #header-section.header-desktop.slide-down {
      width: calc(100% - 20px) !important;
      top: 10px !important;
    }
    html body.admin-bar #header-section.header-desktop.header-sticky,
    html body.admin-bar #header-section.header-desktop.slide-down {
      top: 42px !important;
    }
    #header-section.header-desktop #main-nav {
      gap: 2px !important;
    }
    #header-section.header-desktop #main-nav .nav-link {
      font-size: 12px !important;
      padding: 6px 10px !important;
    }
    #header-section.header-desktop .btn-phone-number a {
      font-size: 0 !important; /* Hide phone text node */
      padding: 0 !important;
      width: 38px !important;
      height: 38px !important;
      justify-content: center !important;
      border-radius: 50% !important;
    }
    #header-section.header-desktop .btn-phone-number a i {
      font-size: 15px !important;
      margin: 0 !important;
    }
    #header-section.header-desktop .btn-create-listing {
      font-size: 0 !important; /* Hide button text node */
      padding: 0 !important;
      width: 38px !important;
      height: 38px !important;
      justify-content: center !important;
      border-radius: 50% !important;
    }
    #header-section.header-desktop .btn-create-listing::before {
      content: "+" !important;
      font-size: 18px !important;
      font-weight: 700 !important;
      color: #fff !important;
      line-height: 1 !important;
    }
    #header-section.header-desktop #navi-user {
      gap: 8px !important;
    }
  }

  @media (max-width: 1100px) {
    #header-section.header-desktop #main-nav .nav-link {
      font-size: 11px !important;
      padding: 6px 6px !important;
    }
  }
}

/* ============================================================
   4. MOBILE HEADER — Global Premium Floating Pill (< 992px)
   ============================================================ */
@media (max-width: 991px) {

  /* Hide desktop header on mobile (global) */
  #header-section.header-desktop { display: none !important; }

  /* Mobile header: floating pill capsule layout globally with super high z-index to clear announcement bar */
  html body #header-mobile.header-mobile {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    width: calc(100% - 20px) !important;
    height: 56px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 28px !important;
    box-shadow: var(--shadow-md) !important;
    z-index: 9999999 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    justify-content: space-between !important;
    transition: var(--transition) !important;
    transform: none !important; /* Cancel the displacement translateX(-50%) on halfmap page */
  }

  /* Admin bar offset for mobile */
  .admin-bar #header-mobile.header-mobile {
    top: calc(46px + 10px) !important; /* 46px mobile adminbar + 10px margin */
  }

  /* Override internal container or row padding */
  #header-mobile.header-mobile .container,
  #header-mobile.header-mobile .row {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* In mobile white header, apply filter to ensure logo is black/highly visible (works for both white and custom logos) */
  html body #header-mobile .logo-mobile img,
  html body .logo.logo-mobile img,
  html body .logo-mobile img,
  html body .header-mobile .logo-mobile img {
    filter: brightness(0) invert(0) !important;
  }

  #header-mobile .header-mobile-left,
  #header-mobile .header-mobile-right {
    display: flex !important; align-items: center !important; gap: 8px !important;
  }

  #header-mobile .header-mobile-center {
    flex: 1 !important; text-align: center !important;
  }

  #header-mobile .logo-mobile img { max-height: 32px !important; width: auto !important; }

  /* Mobile triggers for homepage & halfmap variations: white pill menu icons */
  #header-mobile .mobile-nav-trigger,
  #header-mobile .user-icon,
  #header-mobile .toggle-button-left,
  #header-mobile .toggle-button-right {
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
    background: var(--clr-navy-light) !important;
    border: none !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    cursor: pointer !important; transition: var(--transition) !important;
    padding: 0 !important;
  }
  
  #header-mobile .mobile-nav-trigger:hover,
  #header-mobile .user-icon:hover,
  #header-mobile .toggle-button-left:hover,
  #header-mobile .toggle-button-right:hover {
    background: var(--clr-navy-mid) !important;
  }

  #header-mobile .mobile-nav-trigger i,
  #header-mobile .user-icon i,
  #header-mobile .toggle-button-left i,
  #header-mobile .toggle-button-right i {
    color: var(--clr-navy) !important;
    font-size: 16px !important;
    margin: 0 !important;
  }

  /* High-specificity override to cancel the off-screen displacement transform on search results / halfmap mobile pages */
  html body.houzez-halfmap-page #header-mobile.header-mobile {
    transform: none !important;
  }
}

/* ============================================================
   5. SEARCH FILTERS CARD
   ============================================================ */

/* Push page content below fixed desktop header */
@media (min-width: 992px) {
  .houzez-halfmap-page .wrap { padding-top: 110px !important; }
}

/* Push page content below fixed mobile header */
@media (max-width: 991px) {
  .houzez-halfmap-page .wrap { padding-top: 90px !important; }
}

/* ---- Card (Desktop) ---- */
.advanced-search-half-map {
  background: var(--clr-white) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 20px 24px !important;
  margin-bottom: 20px !important;
}

.advanced-search-half-map .container { padding: 0 !important; max-width: 100% !important; }

/* Keyword input */
.advanced-search-half-map .form-control {
  height: 46px !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--clr-bg) !important;
  font-family: var(--font) !important; font-weight: 600 !important;
  color: var(--clr-text) !important; padding: 0 20px !important;
  transition: var(--transition) !important; box-shadow: none !important;
  font-size: 14px !important;
}
.advanced-search-half-map .form-control:focus {
  border-color: var(--clr-navy) !important;
  background: var(--clr-white) !important;
  box-shadow: 0 0 0 4px rgba(0,66,116,.08) !important;
  outline: none !important;
}

/* Bootstrap-select buttons */
.advanced-search-half-map .bootstrap-select > .btn {
  height: 46px !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--clr-bg) !important;
  font-family: var(--font) !important; font-weight: 600 !important;
  color: var(--clr-text) !important; padding: 0 20px !important;
  line-height: 44px !important; transition: var(--transition) !important;
  box-shadow: none !important;
}
.advanced-search-half-map .bootstrap-select > .btn:hover,
.advanced-search-half-map .bootstrap-select > .btn:focus,
.advanced-search-half-map .bootstrap-select.hz-show-dropdown > .btn {
  border-color: var(--clr-navy) !important;
  background: var(--clr-white) !important;
  box-shadow: 0 0 0 4px rgba(0,66,116,.08) !important;
  outline: none !important;
}

/* Remove double border from bootstrap-select wrapper */
.advanced-search-half-map .bootstrap-select {
  border: none !important; background: transparent !important; box-shadow: none !important;
}

/* Fix Arabic text cut-off inside selects */
.bootstrap-select .filter-option-inner { line-height: normal !important; display: flex !important; align-items: center !important; }
.bootstrap-select .filter-option { display: flex !important; align-items: center !important; }

/* Bootstrap-select dropdown menu */
.bootstrap-select .dropdown-menu {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--clr-border) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: blur(10px) !important;
}
.bootstrap-select .dropdown-menu li a { font-family: var(--font) !important; font-weight: 600 !important; padding: 8px 16px !important; }
.bootstrap-select .dropdown-menu li a:hover { background: var(--clr-navy-light) !important; color: var(--clr-navy) !important; }

/* Radius slider */
.range-wrap {
  background: var(--clr-bg) !important; padding: 10px 16px !important;
  border-radius: var(--radius-md) !important; border: 1px solid var(--clr-border) !important;
}
.range-wrap label { font-weight: 700 !important; color: var(--clr-navy) !important; font-size: 13px !important; }

/* Search / Reset / Save buttons */
.advanced-search-half-map .btn-search {
  height: 46px !important; border-radius: var(--radius-md) !important;
  font-weight: 700 !important; font-family: var(--font) !important;
  background: var(--clr-navy) !important; color: #fff !important;
  border: none !important; box-shadow: 0 4px 12px rgba(0,66,116,.2) !important;
  transition: var(--transition) !important;
}
.advanced-search-half-map .btn-search:hover { background: var(--clr-red) !important; }

/* Hide native submit row - handled by auto-submit */
.half-map-buttons-wrap { display: none !important; }

/* ---- Mobile: Hide original filter — replaced by #omf-bar (injected via mu-plugin) ---- */
@media (max-width: 991px) {
  .houzez-halfmap-page .mobile-search-nav { display: none !important; }
  /* Keep form in DOM for Houzez AJAX but collapse to zero space */
  .houzez-halfmap-page .advanced-search-half-map {
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Push content below fixed filter bar — dynamically adjusted by JS but styled here as fallback */
  .houzez-halfmap-page .page-title-wrap {
    margin-top: 0 !important;
    padding: 12px 16px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  /* Neat, spacing-optimized results count and sort-by row */
  .houzez-halfmap-page .page-title-wrap > .d-flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .houzez-halfmap-page .page-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  .houzez-halfmap-page .sort-by {
    margin: 0 !important;
  }
  .houzez-halfmap-page .sort-by > .d-flex {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .houzez-halfmap-page #sort-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  .houzez-halfmap-page .sort-by .bootstrap-select {
    width: auto !important;
  }
  .houzez-halfmap-page .sort-by .bootstrap-select .btn {
    background: transparent !important;
    border: none !important;
    padding: 0 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #004274 !important;
    box-shadow: none !important;
  }

  /* Mobile header styling globally handled */

  /* Ensure bottom sheet is ABOVE bottom nav */
  .osoulk-bottom-nav { z-index: 99990 !important; }
  #omf-overlay.open { z-index: 99993 !important; }
  .omf-sheet { z-index: 99995 !important; }
}



/* ============================================================
   6. LISTING CARDS
   ============================================================ */
#half-map-listing-area.half-map-right-wrap {
  background: var(--clr-bg) !important;
  padding: 20px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: #cbd5e1 transparent !important;
}
#half-map-listing-area::-webkit-scrollbar { width: 5px !important; }
#half-map-listing-area::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 4px !important; }

/* Results bar */
.houzez_properties_listing_sort_by_wrap {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  padding: 0 0 16px !important; gap: 12px !important;
  font-family: var(--font) !important;
}
.houzez_properties_listing_sort_by_wrap .sort-by-count { font-weight: 700 !important; color: var(--clr-text) !important; }

/* Card wrapper */
#houzez_ajax_container .item-listing-wrap.item-wrap-v8 { margin-bottom: 20px !important; }

#houzez_ajax_container .item-wrap {
  background: var(--clr-white) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  transition: var(--transition) !important;
}

#houzez_ajax_container .item-listing-wrap:hover .item-wrap {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--clr-navy) !important;
}

/* Image */
.item-wrap .item-header { overflow: hidden !important; position: relative !important; }
.item-wrap .item-header img { transition: transform 0.5s ease !important; display: block !important; width: 100% !important; }
#houzez_ajax_container .item-listing-wrap:hover .item-header img { transform: scale(1.06) !important; }

/* Badges */
.item-wrap .label-featured,
.item-wrap .label-status {
  border-radius: var(--radius-sm) !important; font-size: 11px !important;
  font-weight: 700 !important; text-transform: uppercase !important;
  padding: 5px 10px !important; letter-spacing: 0.3px !important;
}

/* Card body */
.item-wrap .item-body { padding: 18px 20px !important; }

.item-wrap .item-body .item-price {
  font-size: 20px !important; font-weight: 800 !important;
  color: var(--clr-navy) !important; margin-bottom: 6px !important;
  font-family: var(--font) !important;
}

.item-wrap .item-body .item-title a {
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--clr-text) !important; transition: var(--transition) !important;
  text-decoration: none !important;
}
.item-wrap .item-body .item-title a:hover { color: var(--clr-red) !important; }

.item-wrap .item-body .item-address { color: var(--clr-muted) !important; font-size: 13px !important; }

/* Action buttons footer */
.item-footer .item-buttons-wrap {
  display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
  padding: 12px 20px !important; border-top: 1px solid var(--clr-border) !important;
}

.item-footer .item-buttons-wrap .btn-item {
  height: 38px !important; padding: 0 16px !important;
  border-radius: var(--radius-pill) !important; font-weight: 700 !important;
  font-size: 13px !important; border: none !important; font-family: var(--font) !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 6px !important;
  cursor: pointer !important; transition: var(--transition) !important;
  text-decoration: none !important;
}

/* Call button */
.item-footer .item-buttons-wrap .hz-call-popup-js {
  background: var(--clr-navy-light) !important; color: var(--clr-navy) !important;
  border: 1px solid var(--clr-navy-mid) !important;
}
.item-footer .item-buttons-wrap .hz-call-popup-js:hover { background: var(--clr-navy) !important; color: #fff !important; border-color: var(--clr-navy) !important; }

/* Email button */
.item-footer .item-buttons-wrap .hz-email-popup-js {
  background: var(--clr-navy-light) !important; color: var(--clr-navy) !important;
  border: 1px solid var(--clr-navy-mid) !important;
}
.item-footer .item-buttons-wrap .hz-email-popup-js:hover { background: var(--clr-navy) !important; color: #fff !important; border-color: var(--clr-navy) !important; }

/* WhatsApp button */
.item-footer .item-buttons-wrap a[href*="whatsapp.com"] {
  background: rgba(22,163,74,.08) !important; color: var(--clr-green) !important;
  border: 1px solid rgba(22,163,74,.15) !important; text-decoration: none !important;
}
.item-footer .item-buttons-wrap a[href*="whatsapp.com"]:hover { background: var(--clr-green) !important; color: #fff !important; border-color: var(--clr-green) !important; }

/* Force WhatsApp icon globally for all WhatsApp links */
a[href*="whatsapp.com"] i[class*="houzez-icon"]::before,
a[href*="whatsapp.com"] .houzez-icon::before {
  content: "\e953" !important;
}

/* Custom WhatsApp button style and icon fix */
.ok-wa-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ok-wa-btn svg {
  display: none !important;
}
.ok-wa-btn::before {
  content: "\e953" !important;
  font-family: "houzez-iconfont" !important;
  font-size: 20px !important;
  color: #fff !important;
  display: inline-block !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   7. MAP CONTAINER
   ============================================================ */
#map-view-wrap.half-map-left-wrap {
  position: sticky !important; top: 0 !important;
  height: 100vh !important; overflow: hidden !important;
}

#houzez-properties-map { width: 100% !important; height: 100% !important; }

/* Leaflet UI */
.leaflet-control-zoom a {
  border-radius: var(--radius-sm) !important; font-weight: 700 !important;
  color: var(--clr-navy) !important; border-color: var(--clr-border) !important;
}
.leaflet-control-zoom a:hover { background: var(--clr-navy) !important; color: #fff !important; }

/* ملء الشاشة button */
.half-map-full-screen-btn {
  background: var(--clr-navy) !important; color: #fff !important;
  border-radius: var(--radius-md) !important; font-weight: 700 !important;
  border: none !important; cursor: pointer !important; transition: var(--transition) !important;
}
.half-map-full-screen-btn:hover { background: var(--clr-red) !important; }

/* Map pagination */
.houzez_map_listing_navigation .btn {
  height: 38px !important; padding: 0 16px !important;
  border-radius: var(--radius-md) !important; font-weight: 700 !important;
  font-size: 13px !important; background: var(--clr-white) !important;
  border: 1px solid var(--clr-border) !important; color: var(--clr-navy) !important;
  transition: var(--transition) !important;
}
.houzez_map_listing_navigation .btn:hover { background: var(--clr-navy) !important; color: #fff !important; }

/* ============================================================
   8. PROMOTIONAL BANNER (between header and content)
   ============================================================ */
.osoulk-promo-banner,
.houzez-halfmap-page .alert-message-wrap {
  background: var(--clr-navy) !important;
  color: #fff !important; text-align: center !important;
  padding: 12px 20px !important; font-weight: 700 !important;
  font-family: var(--font) !important; font-size: 14px !important;
}

/* ============================================================
   9. MOBILE BOTTOM NAV (osoulk-bottom-nav & overrides)
   ============================================================ */

/* Hide by default on desktop */
@media (min-width: 992px) {
  .osoulk-bottom-nav {
    display: none !important;
  }
}

/* Beautiful Mobile bottom navigation bar */
@media (max-width: 991px) {
  /* Push content up to avoid bottom-nav overlapping page actions/footers */
  body {
    padding-bottom: 75px !important;
  }

  .osoulk-bottom-nav {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 65px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -4px 20px rgba(0, 66, 116, 0.08) !important;
    z-index: 999990 !important; /* Keep it above standard content but below overlays/sheets */
    transform: none !important; /* Cancel any theme or third-party horizontal displacement */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .osoulk-bottom-nav-inner {
    display: flex !important;
    height: 100% !important;
    width: 100% !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 0 8px !important;
    position: relative !important;
  }

  /* Central Floating Action Button (FAB) */
  .osoulk-bottom-nav-fab-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: 100% !important;
    position: relative !important;
  }

  .osoulk-bottom-nav-fab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: var(--clr-navy) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 66, 116, 0.35) !important;
    border: 4px solid #ffffff !important;
    transform: translateY(-16px) !important;
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
    z-index: 10 !important;
  }

  .osoulk-bottom-nav-fab svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #ffffff !important;
    stroke-width: 3 !important;
    fill: none !important;
    transition: transform 0.25s ease !important;
  }

  .osoulk-bottom-nav-fab:hover,
  .osoulk-bottom-nav-fab:active {
    background: var(--clr-red) !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.45) !important;
    transform: translateY(-18px) scale(1.06) !important;
  }

  .osoulk-bottom-nav-fab:active svg {
    transform: rotate(90deg) !important;
  }

  .osoulk-bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: 52px !important;
    color: var(--clr-muted) !important;
    text-decoration: none !important;
    gap: 2px !important;
    border-radius: 16px !important;
    transition: var(--transition) !important;
  }

  .osoulk-bottom-nav-item:hover,
  .osoulk-bottom-nav-item.active {
    color: var(--clr-navy) !important;
  }

  .osoulk-bottom-nav-item.active {
    background: rgba(0, 66, 116, 0.07) !important;
    flex: 1.25 !important;
  }

  .osoulk-bottom-nav-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    transition: var(--transition) !important;
  }

  .osoulk-bottom-nav-icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    fill: none !important;
    transition: var(--transition) !important;
  }

  .osoulk-bottom-nav-item.active .osoulk-bottom-nav-icon svg {
    transform: scale(1.1) !important;
    stroke: var(--clr-navy) !important;
  }

  .osoulk-bottom-nav-label {
    font-family: var(--font) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    transition: var(--transition) !important;
  }

  .osoulk-bottom-nav-item.active .osoulk-bottom-nav-label {
    font-weight: 700 !important;
    color: var(--clr-navy) !important;
  }

  /* Transition to hide bottom nav when scrolling down */
  .osoulk-bottom-nav.nav-hidden {
    transform: translateY(100%) !important;
  }

  /* Hide bottom nav when virtual keyboard is active */
  .osoulk-bottom-nav.keyboard-active {
    display: none !important;
  }

  /* Hide original theme's default bottom navigation to prevent double footer bars */
  .mobile-bottom-nav,
  .houzez-mobile-bottom-navigation {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }
}

/* ============================================================
   10. UTILITY / MISC
   ============================================================ */

/* Make sure dropdowns appear above sticky header */
.bootstrap-select.open .dropdown-menu { z-index: 99999 !important; }

/* Fix houzez default link hover color */
a { transition: color .2s ease !important; }
a:hover { text-decoration: none !important; }

/* Loader */
#houzez-ajax-loader { border-color: var(--clr-navy) !important; border-top-color: transparent !important; }

/* ============================================================
   11. ANNOUNCEMENT BAR OFFSET
   ============================================================ */
/* When the blue promo bar is present at top, push header down */
/* Pushes the sticky header down when scrolled, to clear the admin bar if present */
body:has(.top-announcement-bar) #header-section.header-desktop.houzez-in-view {
  top: 0 !important;
}
body.admin-bar:has(.top-announcement-bar) #header-section.header-desktop.houzez-in-view {
  top: 32px !important;
}

/* Pushes the transparent header down on homepage at scrollY = 0 to clear announcement bar */
body.transparent-yes:has(.top-announcement-bar) #header-section.header-desktop:not(.houzez-in-view) {
  top: 45px !important;
}
body.admin-bar.transparent-yes:has(.top-announcement-bar) #header-section.header-desktop:not(.houzez-in-view) {
  top: 77px !important;
}



/* Announcement bar itself */
.top-announcement-bar {
  background: var(--clr-navy) !important;
  color: #fff !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-align: center !important;
  padding: 10px 20px !important;
  position: relative !important;
  z-index: 1000000 !important;
}
.top-announcement-bar .btn,
.top-announcement-bar a.btn {
  background: #fff !important;
  color: var(--clr-navy) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 700 !important;
  padding: 6px 18px !important;
  font-size: 13px !important;
  border: none !important;
  margin-inline-start: 12px !important;
  transition: var(--transition) !important;
}
.top-announcement-bar .btn:hover { background: var(--clr-red) !important; color: #fff !important; }

/* ============================================================
   12. MOBILE — KEYWORD INPUT VISIBLE FIX
   ============================================================ */
@media (max-width: 991px) {
  .advanced-search-half-map .d-flex.pb-2 {
    display: flex !important;
    padding-bottom: 0 !important;
    margin-bottom: 10px !important;
  }
  .advanced-search-half-map .d-flex.pb-2 .form-control {
    flex: 1 !important;
    height: 44px !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px !important;
  }
}


/* Fix mobile sticky filters */
@media (max-width: 991px) {
  body {
    overflow: visible !important;
  }
  #half-map-listing-area.half-map-right-wrap {
    overflow: visible !important;
  }
}


/* Fix test environment scroll lock */
body.antigravity-scroll-lock {
  overflow: visible !important;
}


/* Mobile filters style enhancements */
@media (max-width: 991px) {
  #osoulk-more-filters-btn {
    height: 38px !important;
    border-radius: var(--radius-pill) !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: var(--clr-navy) !important;
    color: var(--clr-white) !important;
    border: none !important;
    width: auto !important;
    max-width: none !important;
  }
  #osoulk-more-filters-btn svg {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
  }
}


/* Hide Location and Radius on mobile devices */
@media (max-width: 991px) {
  #desktop-search-form > .d-flex:has(.location-search) {
    display: none !important;
  }
  #desktop-search-form > .range-wrap {
    display: none !important;
  }
}


/* ============================================================
   13. SINGLE PROPERTY PAGE MODERNIZATION (Boxed Layout)
   ============================================================ */

/* Force Cairo font and typography adjustments */
.property-wrap {
  font-family: var(--font) !important;
}
.property-wrap h1,
.property-wrap h2,
.property-wrap h3,
.property-wrap h4,
.property-wrap h5,
.property-wrap h6,
.property-wrap .block-title-wrap h2,
.property-wrap .block-title-wrap h3 {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  color: var(--clr-navy) !important;
}

/* Boxed Containers & Cards */
.property-wrap .block-wrap {
  border: 1px solid rgba(0, 66, 116, 0.05) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 10px 30px rgba(0, 45, 90, 0.03) !important;
  background: var(--clr-white) !important;
  padding: 30px !important;
  margin-bottom: 25px !important;
  overflow: hidden !important;
  transition: var(--transition) !important;
}

.property-wrap .block-wrap:hover {
  box-shadow: 0 15px 40px rgba(0, 66, 116, 0.06) !important;
  border-color: rgba(0, 66, 116, 0.1) !important;
}

/* Top Header & Price Layout */
.property-wrap .property-title-price-wrap {
  margin-bottom: 30px !important;
}
.property-wrap .item-price {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--clr-navy) !important;
  background: var(--clr-navy-light) !important;
  padding: 10px 20px !important;
  border-radius: var(--radius-pill) !important;
  display: inline-block !important;
}

/* Badges styling */
.property-wrap .label-status,
.property-wrap .label-type,
.property-wrap .label {
  border-radius: var(--radius-pill) !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

/* Property Overview Card Layout */
.property-wrap .property-overview-data {
  padding: 10px 0 !important;
}
.property-wrap .property-overview-data .row {
  margin: 0 -10px !important;
}
.property-wrap .property-overview-data .col {
  padding: 10px !important;
}
.property-wrap .property-overview-data .list-unstyled {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 20px 15px !important;
  border-radius: var(--radius-md) !important;
  background: var(--clr-bg) !important;
  border: 1px solid var(--clr-border) !important;
  transition: var(--transition) !important;
  height: 100% !important;
  margin-bottom: 0 !important;
}
.property-wrap .property-overview-data .list-unstyled:hover {
  transform: translateY(-4px) !important;
  background: var(--clr-white) !important;
  border-color: var(--clr-navy-mid) !important;
  box-shadow: 0 10px 25px rgba(0, 66, 116, 0.05) !important;
}
.property-wrap .property-overview-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.property-wrap .property-overview-item i {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: var(--clr-navy-light) !important;
  color: var(--clr-navy) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  transition: var(--transition) !important;
  margin: 0 auto !important;
}
.property-wrap .property-overview-data .list-unstyled:hover .property-overview-item i {
  background: var(--clr-navy) !important;
  color: #ffffff !important;
  transform: scale(1.05) !important;
}
.property-wrap .property-overview-item strong {
  font-size: 16px !important;
  color: var(--clr-text) !important;
  font-weight: 700 !important;
  display: block !important;
}
.property-wrap .property-overview-data .hz-meta-label {
  font-size: 13px !important;
  color: var(--clr-muted) !important;
  font-weight: 600 !important;
  display: block !important;
}

/* Property Details Section Cleanup */
.property-wrap .detail-wrap {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.property-wrap .list-lined {
  margin: 0 -10px !important;
}
.property-wrap .list-lined li {
  padding: 10px !important;
  border: none !important;
  background: transparent !important;
}
.property-wrap .list-lined-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 20px !important;
  border-radius: var(--radius-md) !important;
  background: var(--clr-bg) !important;
  border: 1px solid var(--clr-border) !important;
  transition: var(--transition) !important;
  width: 100% !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.property-wrap .list-lined-item:hover {
  transform: translateY(-2px) !important;
  background: var(--clr-white) !important;
  border-color: var(--clr-navy-mid) !important;
  box-shadow: 0 6px 18px rgba(0, 66, 116, 0.04) !important;
}
.property-wrap .list-lined-item strong {
  color: var(--clr-navy) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.property-wrap .list-lined-item span {
  color: var(--clr-text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Sidebar & Form Elements */
.property-wrap .sidebar-wrap {
  margin-bottom: 25px !important;
}
.property-wrap .widget {
  background: var(--clr-white) !important;
  border: 1px solid rgba(0, 66, 116, 0.05) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 10px 30px rgba(0, 45, 90, 0.03) !important;
  padding: 24px !important;
  margin-bottom: 25px !important;
}
.property-wrap .widget:hover {
  box-shadow: 0 15px 40px rgba(0, 66, 116, 0.06) !important;
}
.property-wrap .widget-title {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  color: var(--clr-navy) !important;
  margin-bottom: 20px !important;
  font-size: 18px !important;
  border-bottom: 2px solid var(--clr-navy-light) !important;
  padding-bottom: 10px !important;
}

/* Sidebar Tab Headers */
.property-wrap .agent-contact-wrap .nav-tabs {
  border: none !important;
  background: var(--clr-bg) !important;
  padding: 4px !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 20px !important;
  display: flex !important;
  gap: 4px !important;
}
.property-wrap .agent-contact-wrap .nav-tabs .nav-item {
  flex: 1 !important;
  margin: 0 !important;
}
.property-wrap .agent-contact-wrap .nav-tabs .nav-link {
  border: none !important;
  text-align: center !important;
  font-weight: 700 !important;
  color: var(--clr-muted) !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  padding: 10px 0 !important;
  transition: var(--transition) !important;
}
.property-wrap .agent-contact-wrap .nav-tabs .nav-link.active {
  background: var(--clr-white) !important;
  color: var(--clr-navy) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Form input styling */
.property-wrap .form-control,
.property-wrap .form-select,
.property-wrap select {
  height: 46px !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--clr-bg) !important;
  color: var(--clr-text) !important;
  padding: 0 16px !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  transition: var(--transition) !important;
  box-shadow: none !important;
}
.property-wrap textarea.form-control {
  height: auto !important;
  padding: 12px 16px !important;
}
.property-wrap .form-control:focus,
.property-wrap .form-select:focus,
.property-wrap select:focus {
  border-color: var(--clr-navy) !important;
  background: var(--clr-white) !important;
  box-shadow: 0 0 0 4px rgba(0, 66, 116, 0.08) !important;
}

/* Buttons in Sidebar & Forms */
.property-wrap .btn {
  height: 46px !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: var(--transition) !important;
  box-shadow: none !important;
  width: 100% !important;
}
.property-wrap .btn-primary,
.property-wrap button[type="submit"],
.property-wrap .houzez-ele-button {
  background: var(--clr-navy) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 66, 116, 0.2) !important;
}
.property-wrap .btn-primary:hover,
.property-wrap button[type="submit"]:hover,
.property-wrap .houzez-ele-button:hover {
  background: var(--clr-red) !important;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.3) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}
.property-wrap .btn-secondary {
  background: var(--clr-navy-light) !important;
  color: var(--clr-navy) !important;
  border: 1px solid var(--clr-navy-mid) !important;
}
.property-wrap .btn-secondary:hover {
  background: var(--clr-navy) !important;
  color: #ffffff !important;
  border-color: var(--clr-navy) !important;
  transform: translateY(-2px) !important;
}

/* Sticky top navigation bar on property details */
.property-wrap .property-navigation-wrap {
  position: sticky !important;
  top: 90px !important; /* Positioned nicely below floating header */
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-md) !important;
  margin-bottom: 30px !important;
  padding: 4px !important;
  z-index: 99999 !important;
}
.admin-bar .property-wrap .property-navigation-wrap {
  top: 122px !important;
}
.property-wrap .property-navigation {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.property-wrap .property-navigation li a {
  color: var(--clr-muted) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  padding: 8px 16px !important;
  border-radius: var(--radius-pill) !important;
  transition: var(--transition) !important;
  text-decoration: none !important;
  display: block !important;
}
.property-wrap .property-navigation li a:hover,
.property-wrap .property-navigation li.active a {
  background: var(--clr-navy-light) !important;
  color: var(--clr-navy) !important;
}

/* Premium WhatsApp action button style */
.property-wrap .hz-btn-whatsapp,
.property-wrap .btn-whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3) !important;
}
.property-wrap .hz-btn-whatsapp:hover,
.property-wrap .btn-whatsapp:hover {
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

/* Make sure the whatsapp icon in the button is white */
.property-wrap .hz-btn-whatsapp i,
.property-wrap .btn-whatsapp i {
  color: #ffffff !important;
}

/* ============================================================
   10. PREMIUM MORTGAGE CALCULATOR OVERRIDES
   ============================================================ */
.mortgage-calculator-chart {
  position: relative !important;
  margin-bottom: 0 !important;
  flex-shrink: 0;
  width: 250px !important;
  height: 250px !important;
}

/* Perfect alignment and centering for the payment text inside the donut chart */
.mortgage-calculator-monthly-payment-wrap {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  padding: 0 16px !important;
  text-align: center !important;
  pointer-events: none !important;
  margin: 0 !important;
}

.mortgage-calculator-monthly-payment {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--clr-navy) !important;
  line-height: 1.25 !important;
  word-break: break-all !important;
  max-width: 180px !important;
  margin: 0 auto !important;
}

.mortgage-calculator-monthly-requency {
  font-size: 11px !important;
  color: var(--clr-muted) !important;
  font-weight: 700 !important;
  margin-top: 3px !important;
  text-transform: uppercase;
}

/* Beautiful results cards */
.mortgage-calculator-data {
  margin-bottom: 0 !important;
}

.mortgage-calculator-data ul.list-lined {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mortgage-calculator-data ul.list-lined li {
  background: var(--clr-white) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition) !important;
  display: flex !important;
  align-items: center !important;
}

.mortgage-calculator-data ul.list-lined li:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--clr-navy-mid) !important;
}

.mortgage-calculator-data ul.list-lined li .list-lined-item {
  padding: 0 !important;
  border: none !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}

.mortgage-calculator-data ul.list-lined li .list-lined-item span:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: var(--clr-muted) !important;
}

.mortgage-calculator-data ul.list-lined li .list-lined-item strong {
  font-weight: 600 !important;
  color: var(--clr-muted) !important;
}

.mortgage-calculator-data ul.list-lined li .list-lined-item span[id$="Result"] {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--clr-navy) !important;
}

/* Styling for the calculator inputs form */
#houzez-calculator-form {
  background: rgba(0, 66, 116, 0.02) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  margin-top: 24px !important;
}

#houzez-calculator-form .form-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--clr-navy) !important;
  margin-bottom: 8px !important;
  display: block !important;
}

#houzez-calculator-form .input-group {
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--clr-border) !important;
  transition: var(--transition) !important;
  background: var(--clr-white) !important;
  display: flex !important;
  align-items: stretch !important;
}

#houzez-calculator-form .input-group:focus-within {
  border-color: var(--clr-navy) !important;
  box-shadow: 0 0 0 4px rgba(0, 66, 116, 0.08) !important;
}

#houzez-calculator-form .form-control {
  height: 44px !important;
  border: none !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--clr-text) !important;
  padding: 0 14px !important;
  box-shadow: none !important;
  flex: 1 !important;
  min-width: 0 !important;
}

#houzez-calculator-form .input-group-text {
  background: rgba(0, 66, 116, 0.04) !important;
  border: none !important;
  font-weight: 700 !important;
  color: var(--clr-navy) !important;
  font-size: 13px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#houzez-calculator-form .input-group-text i {
  color: var(--clr-navy) !important;
  font-size: 14px !important;
}

/* Bullet icon colors matching the chart */
.mortgage-calculator-data ul.list-lined li .list-lined-item span i.icon-sign-badge-circle {
  font-size: 10px !important;
}
.stats-data-1 i.icon-sign-badge-circle { color: #ff6384 !important; }
.stats-data-01 i.icon-sign-badge-circle { color: #004274 !important; }
.stats-data-2 i.icon-sign-badge-circle { color: #36a2eb !important; }
.stats-data-3 i.icon-sign-badge-circle { color: #ffce56 !important; }
.stats-data-4 i.icon-sign-badge-circle { color: #4bc0c0 !important; }
.stats-data-5 i.icon-sign-badge-circle { color: #c2d500 !important; }

/* Fallback single featured image layout styling */
.single-featured-image-grid {
  display: block !important;
}
.single-featured-image-grid .hs-gallery-v5-grid-item-01 {
  width: 100% !important;
}
.single-featured-image-grid .hs-gallery-v5-grid-item-01 img {
  width: 100% !important;
  max-height: 480px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

/* ============================================================
   UX/UI OVERRIDES FOR COMPREHENSIVE AUDIT
   ============================================================ */

/* Fix agent view listings button overlap */
.block-title-wrap.d-flex a.btn-slim {
  position: static !important;
  margin-left: 15px !important;
}
body.rtl .block-title-wrap.d-flex a.btn-slim {
  margin-right: 15px !important;
  margin-left: 0 !important;
}

/* Breadcrumb LTR Unification */
body:not(.rtl) .breadcrumb {
  direction: ltr !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
}
body:not(.rtl) .breadcrumb-item {
  display: flex !important;
  align-items: center !important;
}
body:not(.rtl) .breadcrumb-item + .breadcrumb-item {
  padding-left: 8px !important;
  padding-right: 0 !important;
}
body:not(.rtl) .breadcrumb-item + .breadcrumb-item::before {
  content: "\e912" !important;
  font-family: "houzez-iconfont" !important;
  padding-right: 8px !important;
  padding-left: 0 !important;
  transform: none !important;
}
body:not(.rtl) .breadcrumb-item.breadcrumb-item-home {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Fix search results tools collision and layout */
.listing-tools-wrap .d-flex {
  gap: 15px !important;
  flex-wrap: wrap !important;
}
.listing-tools-wrap .sort-by {
  margin-left: auto !important;
  margin-right: 0 !important;
}
body.rtl .listing-tools-wrap .sort-by {
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* Premium floating item tools (Favorite button) */
.item-tools, .item-tools-v2 {
  overflow: visible !important;
  z-index: 10 !important;
}
.item-tools .item-tool, .item-tools-v2 .item-tool {
  overflow: visible !important;
}
.item-tools .item-tool > span, .item-tools-v2 .item-tool > span {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Fix LTR inputs and placeholders alignment */
body:not(.rtl) input.form-control,
body:not(.rtl) textarea.form-control,
body:not(.rtl) select.form-control {
  text-align: left !important;
  direction: ltr !important;
}
body:not(.rtl) input::placeholder,
body:not(.rtl) textarea::placeholder {
  text-align: left !important;
}

/* Fix property size and area alignment */
body:not(.rtl) .property-overview-item .hz-meta-label,
body:not(.rtl) .property-overview-item .hz-meta-value {
  direction: ltr !important;
  text-align: left !important;
}
body.rtl .property-overview-item .hz-meta-label,
body.rtl .property-overview-item .hz-meta-value {
  direction: rtl !important;
  text-align: right !important;
}





/* ============================================================
   10. SELL MY PROPERTY ARABIC PAGE STYLING (Post ID: 21163)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800&display=swap');

/* Force Cairo font for this entire page */
.page-id-21163, 
.page-id-21163 * {
  font-family: 'Cairo', 'Tajawal', sans-serif !important;
}

/* Force RTL layout and align text to right */
.page-id-21163 .entry-content,
.page-id-21163 .elementor-section,
.page-id-21163 .elementor-container,
.page-id-21163 .elementor-widget-container {
  direction: rtl !important;
  text-align: right !important;
}

/* Fix Hero section alignment */
.page-id-21163 .elementor-widget-heading .elementor-heading-title {
  text-align: center !important;
}

/* Section descriptions text alignment */
.page-id-21163 .elementor-widget-text-editor {
  text-align: right !important;
}

/* Center headings that are meant to be centered */
.page-id-21163 .elementor-element-749e7b2 .elementor-heading-title, /* Step by step title */
.page-id-21163 .elementor-element-b86cc65 .elementor-heading-title, /* Counter title */
.page-id-21163 .elementor-element-fd46901 .elementor-heading-title, /* Top title */
.page-id-21163 .elementor-element-ee9ef1d .elementor-heading-title, /* Form title */
.page-id-21163 .elementor-element-3c13ff2 .elementor-heading-title /* Why sell title */ {
  text-align: center !important;
}

/* Centralized description texts */
.page-id-21163 .elementor-element-6083aae .elementor-text-editor, /* Hero description */
.page-id-21163 .elementor-element-ee9ef1d p /* Form description */ {
  text-align: center !important;
}

/* Step-by-step custom cards styling */
.page-id-21163 .elementor-element-2cb3a90,
.page-id-21163 .elementor-element-fa3df1e,
.page-id-21163 .elementor-element-8df8b46 {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(0, 66, 116, 0.08) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition) !important;
}
.page-id-21163 .elementor-element-2cb3a90:hover,
.page-id-21163 .elementor-element-fa3df1e:hover,
.page-id-21163 .elementor-element-8df8b46:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--clr-navy) !important;
}

/* Button style overrides - chic & premium */
.page-id-21163 .elementor-button {
  border-radius: var(--radius-pill) !important;
  font-weight: 700 !important;
  transition: var(--transition) !important;
}
.page-id-21163 .elementor-button:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 8px 24px rgba(0, 66, 116, 0.15) !important;
}

/* Quform Form - Premium Glassmorphism styling */
.page-id-21163 .quform-inner {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 66, 116, 0.08) !important;
  border-radius: var(--radius-xl) !important;
  padding: 30px !important;
  box-shadow: var(--shadow-lg) !important;
}
.page-id-21163 .quform-field-wrap input,
.page-id-21163 .quform-field-wrap textarea,
.page-id-21163 .quform-field-wrap select {
  height: 48px !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--clr-bg) !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--clr-text) !important;
  transition: var(--transition) !important;
  width: 100% !important;
  box-shadow: none !important;
  text-align: right !important;
  direction: rtl !important;
}
.page-id-21163 .quform-field-wrap textarea {
  height: auto !important;
  min-height: 120px !important;
  padding-top: 12px !important;
}
.page-id-21163 .quform-field-wrap input:focus,
.page-id-21163 .quform-field-wrap textarea:focus,
.page-id-21163 .quform-field-wrap select:focus {
  border-color: var(--clr-navy) !important;
  background: var(--clr-white) !important;
  box-shadow: 0 0 0 4px rgba(0, 66, 116, 0.08) !important;
}

/* Quform Submit Button */
.page-id-21163 .quform-submit-button-wrap button {
  width: 100% !important;
  height: 50px !important;
  background: linear-gradient(135deg, var(--clr-navy), #005a9e) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 4px 15px rgba(0, 66, 116, 0.2) !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}
.page-id-21163 .quform-submit-button-wrap button:hover {
  background: linear-gradient(135deg, #005a9e, var(--clr-navy)) !important;
  box-shadow: 0 6px 20px rgba(0, 66, 116, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* Layout alignment fixes for lists/icons */
.page-id-21163 .elementor-icon-box-wrapper {
  display: flex !important;
  flex-direction: row-reverse !important;
  gap: 15px !important;
}
.page-id-21163 .elementor-icon-box-icon {
  margin: 0 !important;
}