.hd-home-search {
    max-width: 820px;
    width: 100%;
    margin: 400px auto 0;
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    position: relative;
    z-index: 999;
    overflow: visible;
}

.hd-home-search,
.hd-home-search * {
    box-sizing: border-box;
}

/* =========================================================
   INNER SEARCH BAR (Header / Listing / Search Pages)
   Compact, sleek, single horizontal line matching header height
========================================================= */
/* Header stacking context: ensure header and all user/nav dropdowns float above search bar */
.header-main-wrap,
#header-section,
.header-transparent-wrap {
    position: relative !important;
    z-index: 1050 !important;
}

.navbar-logged-in-wrap,
.logged-in-nav-wrap,
#navi-user {
    position: relative !important;
    z-index: 1051 !important;
}

.logged-in-nav.dropdown-menu,
.navbar-logged-in-wrap .dropdown-menu,
.header-main-wrap .dropdown-menu {
    z-index: 1060 !important;
}

.hd-inner-search-bar {
    background: #00457c !important;
    padding: 10px 0 !important;
    position: relative !important;
    z-index: 20 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hd-inner-search-bar .hd-home-search {
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative !important;
    z-index: 25 !important;
}

/* Suppress old Houzez mobile search bar on all screens */
.mobile-search-nav {
    display: none !important;
}

.hd-inner-search-bar .hd-search-wrapper {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    display: block !important;
}


.hd-inner-search-bar .hd-search-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hd-inner-search-bar .hd-search-bar-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
}

.hd-inner-search-bar .hd-type-dropdown-wrap {
    flex-shrink: 0 !important;
}

.hd-inner-search-bar .hd-type-trigger-btn {
    height: 42px !important;
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.hd-inner-search-bar .hd-keyword-input-wrap {
    height: 42px !important;
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.hd-inner-search-bar .hd-search-input {
    height: 40px !important;
    font-size: 13.5px !important;
    padding: 0 12px 0 38px !important;
    border: none !important;
    box-shadow: none !important;
}

.hd-inner-search-bar .hd-search-submit-btn {
    left: 10px !important;
    width: 20px !important;
    height: 20px !important;
}

.hd-inner-search-bar .hd-filter-toggle-btn {
    height: 42px !important;
    width: 44px !important;
    min-width: 44px !important;
    background: #D9B34B !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 2px rgba(217, 179, 75, 0.25) !important;
    transition: background 0.2s ease !important;
}

.hd-inner-search-bar .hd-filter-toggle-btn:hover {
    background: #C49E38 !important;
}


.hd-inner-search-bar .hd-mobile-search-toggle,
.hd-inner-search-bar .hd-mobile-search-close {
    display: none !important;
}

@media (min-width: 768px) {

    /* Home banner search drawer: strictly opens UP above the search bar */
    body.home .hd-home-search .hd-advanced-search-drawer,
    body.home #hd-advanced-search-drawer,
    .hd-home-search:not(.hd-inner-search-bar *) .hd-advanced-search-drawer,
    .hd-home-search:not(.hd-inner-search-bar *) #hd-advanced-search-drawer {
        position: absolute !important;
        bottom: calc(100% + 12px) !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        z-index: 100050 !important;
        width: 100% !important;
    }

    /* Properties search page (inner search bar): strictly opens DOWN below the search bar */
    .hd-inner-search-bar .hd-home-search .hd-advanced-search-drawer,
    .hd-inner-search-bar .hd-search-wrapper .hd-advanced-search-drawer,
    .hd-inner-search-bar .hd-advanced-search-drawer,
    .hd-inner-search-bar #hd-advanced-search-drawer {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        z-index: 100 !important;
        width: 100% !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    }
}

.hd-inner-search-bar:has(.is-open),
.hd-inner-search-bar.has-drawer-open {
    z-index: 100 !important;
}

/* Ensure Elementor hero section and containers do not trap or clip the search bar, drawer, or dropdowns */

.elementor-element-b147f27,
.elementor-element-5eee55b,
.elementor-section:has(.hd-home-search),
.elementor-container:has(.hd-home-search),
.elementor-column:has(.hd-home-search),
.elementor-widget-wrap:has(.hd-home-search),
.elementor-widget-shortcode:has(.hd-home-search) {
    z-index: 50 !important;
    position: relative !important;
    overflow: visible !important;
}

.elementor-element-b147f27>.elementor-container,
.elementor-section:has(.hd-home-search)>.elementor-container,
.elementor-element-b147f27 .elementor-column,
.elementor-section:has(.hd-home-search) .elementor-column,
.elementor-element-b147f27 .elementor-widget-wrap,
.elementor-section:has(.hd-home-search) .elementor-widget-wrap,
.elementor-element-b147f27 .elementor-widget-shortcode,
.elementor-section:has(.hd-home-search) .elementor-widget-shortcode,
.elementor-element-b147f27 .elementor-shortcode,
.elementor-section:has(.hd-home-search) .elementor-shortcode,
.elementor-element-5eee55b,
.elementor-element-5eee55b * {
    overflow: visible !important;
}

/* Ensure background animations and overlays never intercept mouse events */
.hd-hero-wrapper,
.hd-hero-wrapper * {
    pointer-events: none !important;
}


/* Mobile Search Toggle Button & Close */
.hd-mobile-search-toggle,
.hd-mobile-search-close {
    display: none;
}

/* =========================================================
   1. MAIN SEARCH CARD (Matches Reference Image)
========================================================= */
.hd-search-card {
    background: #f8fafc;
    border: 1px solid #eaedf1;
    border-radius: 12px;
    padding: 8px 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
    position: relative;
    z-index: 10;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.hd-search-card:hover {
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08), 0 2px 5px rgba(0, 0, 0, 0.03);
    border-color: #e2e8f0;
}

.hd-search-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

/* =========================================================
   2. PROPERTY TYPE DROPDOWN (Left Section)
========================================================= */
.hd-type-dropdown-wrap {
    position: relative;
    flex-shrink: 0;
}

.hd-type-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    user-select: none;
}

.hd-type-trigger-btn:hover {
    border-color: #cbd5e1;
    background: #fafafa;
}

.hd-type-trigger-btn:focus,
.hd-type-dropdown-wrap.is-open .hd-type-trigger-btn {
    outline: none;
    border-color: #D9B34B;
    box-shadow: 0 0 0 3px rgba(217, 179, 75, 0.18);
}

.hd-type-building-icon {
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hd-type-label {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.2px;
}

.hd-type-chevron {
    color: #64748b;
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

.hd-type-dropdown-wrap.is-open .hd-type-chevron {
    transform: rotate(180deg);
}

.hd-type-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 190px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12);
    padding: 6px;
    z-index: 10005;
    display: none;
    max-height: 280px;
    overflow-y: auto;
}

.hd-type-dropdown-wrap.is-open {
    z-index: 10010 !important;
}

.hd-type-dropdown-wrap.is-open .hd-type-dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: hdFadeIn 0.15s ease;
}

.hd-type-trigger-btn svg,
.hd-type-trigger-btn svg *,
.hd-search-submit-btn svg,
.hd-search-submit-btn svg * {
    pointer-events: none !important;
}

.hd-type-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.hd-type-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.hd-type-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.hd-type-item:hover .hd-type-item-icon {
    color: #D9B34B;
}

.hd-type-item.is-active {
    background: #fbf6ea;
    color: #a88220;
    font-weight: 600;
}

.hd-type-item.is-active .hd-type-item-icon {
    color: #D9B34B;
}

/* =========================================================
   3. KEYWORD / LOCATION SEARCH INPUT (Center Section)
========================================================= */
.hd-keyword-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    height: 42px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 0 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.hd-keyword-input-wrap:focus-within {
    border-color: #D9B34B;
    box-shadow: 0 0 0 3px rgba(217, 179, 75, 0.18);
}

.hd-search-icon,
.hd-search-submit-btn {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 8px 0 0;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease, transform 0.15s ease;
}

.hd-search-submit-btn:hover {
    color: #D9B34B;
    transform: scale(1.08);
}

.hd-search-submit-btn:focus {
    outline: none;
    color: #D9B34B;
}

.hd-search-input {
    flex: 1;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
    height: 100%;
    padding: 0;
}

@media screen and (max-width: 991px) {
    .hd-search-input {
        font-size: 16px !important;
        touch-action: manipulation;
    }
}

@supports (-webkit-touch-callout: none) {
    .hd-search-input {
        font-size: 16px !important;
        touch-action: manipulation;
    }
}

.hd-search-input::placeholder {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 400;
}

/* =========================================================
   4. ADVANCED FILTER TOGGLE BUTTON (Right Section)
========================================================= */
.hd-filter-toggle-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    background: #D9B34B;
    /* Site logo gold brand color */
    border: none;
    border-radius: 7px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(217, 179, 75, 0.35);
}

.hd-filter-toggle-btn *,
.hd-type-trigger-btn *,
.hd-advanced-drawer-close-btn * {
    pointer-events: none !important;
}

.hd-filter-toggle-btn:hover {
    background: #C49E38;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217, 179, 75, 0.45);
}

.hd-filter-toggle-btn:active,
.hd-filter-toggle-btn.is-active {
    background: #C49E38;
    transform: translateY(0);
    box-shadow: 0 0 0 3px rgba(217, 179, 75, 0.4);
}




/* =========================================================
   6. ADVANCED SEARCH DRAWER (Expands ABOVE the Search Bar)
========================================================= */
.hd-home-search .hd-search-wrapper {
    position: relative !important;
}

@media (min-width: 768px) {

    body.home .hd-home-search .hd-advanced-search-drawer,
    body.home #hd-advanced-search-drawer,
    .hd-home-search:not(.hd-inner-search-bar .hd-home-search) .hd-advanced-search-drawer,
    .hd-home-search:not(.hd-inner-search-bar .hd-home-search) #hd-advanced-search-drawer {
        display: none;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(100% + 12px) !important;
        top: auto !important;
        margin: 0 !important;
        z-index: 10005 !important;
        width: 100% !important;
    }
}

.hd-advanced-search-drawer.is-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: hdDrawerFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes hdDrawerFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hdDrawerFadeInDown {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ui-autocomplete.hd-ac-downwards {
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.16), 0 3px 8px rgba(0, 0, 0, 0.06) !important;
}

.ui-autocomplete.hd-ac-upwards {
    box-shadow: 0 -14px 35px rgba(15, 23, 42, 0.16), 0 -3px 8px rgba(0, 0, 0, 0.06) !important;
}

.hd-advanced-drawer-card {
    background: #ffffff;
    border: 1px solid #eaedf1;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);
    padding: 18px 20px 16px;
    position: relative;
    box-sizing: border-box;
    overflow: visible !important;
}

.hd-advanced-drawer-close-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 20;
    padding: 0;
}

.hd-advanced-drawer-close-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.hd-advanced-drawer-inner {
    position: relative;
    overflow: visible !important;
}

.hd-advanced-drawer-inner .advanced-search-module {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 10002 !important;
    overflow: visible !important;
}

.hd-advanced-drawer-inner .advanced-search-module-title {
    display: none !important;
}

.hd-advanced-drawer-inner .advanced-search-v1 {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

.hd-advanced-drawer-inner .row.g-2 {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

/* Ensure Houzez form controls and selectpickers match reference screenshot */
.hd-advanced-drawer-inner .form-control:not(.bootstrap-select),
.hd-advanced-drawer-inner input.form-control,
.hd-advanced-drawer-inner .bootstrap-select>.dropdown-toggle {
    height: 44px !important;
    background-color: #ffffff !important;
    border: 1px solid #dce0e0 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    color: #495057 !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hd-advanced-drawer-inner .form-control:not(.bootstrap-select):focus,
.hd-advanced-drawer-inner input.form-control:focus,
.hd-advanced-drawer-inner .bootstrap-select>.dropdown-toggle:focus {
    border-color: #D9B34B !important;
    box-shadow: 0 0 0 3px rgba(217, 179, 75, 0.18) !important;
    outline: none !important;
}

/* Strip borders, backgrounds, and extra padding from outer bootstrap-select wrapper to prevent double box */
.hd-advanced-drawer-inner .bootstrap-select,
.hd-advanced-drawer-inner .bootstrap-select.form-control,
.hd-advanced-drawer-inner div.bootstrap-select {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
}

/* =========================================================
   IOS MOBILE ANTI-ZOOM RULE FOR ADVANCED SEARCH DRAWER
   iOS Safari automatically zooms into any input or form control with font-size < 16px.
   Setting computed font-size: 16px on mobile & iOS prevents auto-zoom on all fields,
   while placeholder font-size remains 13.5px to keep text perfectly sized.
========================================================= */
@media screen and (max-width: 991px) {

    .hd-advanced-drawer-inner .form-control,
    .hd-advanced-search-drawer .form-control,
    .hd-advanced-drawer-inner input,
    .hd-advanced-search-drawer input,
    .hd-advanced-drawer-inner input[type="text"],
    .hd-advanced-drawer-inner input[type="number"],
    .hd-advanced-drawer-inner input[type="search"],
    .hd-advanced-drawer-inner input[type="tel"],
    .hd-advanced-drawer-inner input[type="email"],
    .hd-advanced-drawer-inner select,
    .hd-advanced-search-drawer select,
    .hd-advanced-drawer-inner select.selectpicker,
    .hd-advanced-search-drawer select.selectpicker,
    .hd-advanced-drawer-inner textarea,
    .hd-advanced-search-drawer textarea,
    .hd-advanced-drawer-inner .bootstrap-select>.dropdown-toggle,
    .hd-advanced-search-drawer .bootstrap-select>.dropdown-toggle,
    .hd-advanced-drawer-inner .bootstrap-select>.btn,
    .hd-advanced-search-drawer .bootstrap-select>.btn,
    .hd-advanced-drawer-inner .bootstrap-select .filter-option,
    .hd-advanced-search-drawer .bootstrap-select .filter-option,
    .hd-advanced-drawer-inner .bootstrap-select .filter-option-inner,
    .hd-advanced-search-drawer .bootstrap-select .filter-option-inner,
    .hd-advanced-drawer-inner .bootstrap-select .filter-option-inner-inner,
    .hd-advanced-search-drawer .bootstrap-select .filter-option-inner-inner,
    .hd-advanced-drawer-inner .bootstrap-select .bs-searchbox input,
    .hd-advanced-search-drawer .bootstrap-select .bs-searchbox input,
    .hd-advanced-drawer-inner .bootstrap-select .bs-searchbox .form-control,
    .hd-advanced-search-drawer .bootstrap-select .bs-searchbox .form-control {
        font-size: 16px !important;
        touch-action: manipulation;
    }

    .hd-advanced-drawer-inner .form-control::placeholder,
    .hd-advanced-drawer-inner input::placeholder,
    .hd-advanced-search-drawer .form-control::placeholder,
    .hd-advanced-search-drawer input::placeholder {
        font-size: 13.5px !important;
        color: #8892a0 !important;
        opacity: 0.85 !important;
    }
}

@supports (-webkit-touch-callout: none) {

    .hd-advanced-drawer-inner .form-control,
    .hd-advanced-search-drawer .form-control,
    .hd-advanced-drawer-inner input,
    .hd-advanced-search-drawer input,
    .hd-advanced-drawer-inner input[type="text"],
    .hd-advanced-drawer-inner input[type="number"],
    .hd-advanced-drawer-inner input[type="search"],
    .hd-advanced-drawer-inner input[type="tel"],
    .hd-advanced-drawer-inner input[type="email"],
    .hd-advanced-drawer-inner select,
    .hd-advanced-search-drawer select,
    .hd-advanced-drawer-inner select.selectpicker,
    .hd-advanced-search-drawer select.selectpicker,
    .hd-advanced-drawer-inner textarea,
    .hd-advanced-search-drawer textarea,
    .hd-advanced-drawer-inner .bootstrap-select>.dropdown-toggle,
    .hd-advanced-search-drawer .bootstrap-select>.dropdown-toggle,
    .hd-advanced-drawer-inner .bootstrap-select>.btn,
    .hd-advanced-search-drawer .bootstrap-select>.btn,
    .hd-advanced-drawer-inner .bootstrap-select .filter-option,
    .hd-advanced-search-drawer .bootstrap-select .filter-option,
    .hd-advanced-drawer-inner .bootstrap-select .filter-option-inner,
    .hd-advanced-search-drawer .bootstrap-select .filter-option-inner,
    .hd-advanced-drawer-inner .bootstrap-select .filter-option-inner-inner,
    .hd-advanced-search-drawer .bootstrap-select .filter-option-inner-inner,
    .hd-advanced-drawer-inner .bootstrap-select .bs-searchbox input,
    .hd-advanced-search-drawer .bootstrap-select .bs-searchbox input,
    .hd-advanced-drawer-inner .bootstrap-select .bs-searchbox .form-control,
    .hd-advanced-search-drawer .bootstrap-select .bs-searchbox .form-control {
        font-size: 16px !important;
        touch-action: manipulation;
    }

    .hd-advanced-drawer-inner .form-control::placeholder,
    .hd-advanced-drawer-inner input::placeholder,
    .hd-advanced-search-drawer .form-control::placeholder,
    .hd-advanced-search-drawer input::placeholder {
        font-size: 13.5px !important;
        color: #8892a0 !important;
        opacity: 0.85 !important;
    }
}

/* Houzez Search Button in drawer matching logo gold */
.hd-advanced-drawer-inner .btn-search {
    height: 44px !important;
    background-color: #D9B34B !important;
    border-color: #D9B34B !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease, transform 0.15s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hd-advanced-drawer-inner .btn-search:hover {
    background-color: #C49E38 !important;
    border-color: #C49E38 !important;
}

@media (max-width: 767px) {
    .hd-advanced-drawer-card {
        padding: 14px 12px;
        border-radius: 12px;
    }
}

/* =========================================================
   7. BOOTSTRAP SELECT & DROPDOWN Z-INDEX GUARDS (OPEN UP ONLY & 3-ITEM SCROLL)
========================================================= */
.hd-home-search:not(.hd-inner-search-bar *) .bootstrap-select {
    position: relative !important;
    z-index: 10 !important;
}

.hd-inner-search-bar .bootstrap-select {
    position: relative !important;
    z-index: 1 !important;
}

/* Advanced drawer elements must allow upward dropdown menus to overflow cleanly */
.hd-advanced-search-drawer,
.hd-advanced-drawer-card,
.hd-advanced-drawer-inner,
.hd-advanced-drawer-inner .advanced-search-module,
.hd-advanced-drawer-inner .advanced-search-v1,
.hd-advanced-drawer-inner form,
.hd-inner-search-bar .row,
.hd-inner-search-bar .col,
.hd-inner-search-bar [class*="col-"],
.hd-inner-search-bar .form-group {
    overflow: visible !important;
}

/* Prevent inner containers from creating competing stacking contexts */
.hd-inner-search-bar .hd-advanced-drawer-inner .form-group,
.hd-inner-search-bar .hd-advanced-search-drawer .form-group {
    position: relative !important;
    z-index: auto !important;
}

.hd-inner-search-bar .hd-advanced-drawer-inner .bootstrap-select,
.hd-inner-search-bar .hd-advanced-search-drawer .bootstrap-select {
    position: relative !important;
    z-index: auto !important;
}

/* All Properties Search: sequential decreasing stacking context for drawer columns so downward dropdowns naturally render in front of following rows */
.hd-inner-search-bar .hd-advanced-search-drawer .row>div,
.hd-inner-search-bar .hd-advanced-drawer-inner .row>div,
.hd-inner-search-bar .hd-advanced-search-drawer .row>.col,
.hd-inner-search-bar .hd-advanced-drawer-inner .row>.col,
.hd-inner-search-bar .hd-advanced-search-drawer .row>[class*="col-"],
.hd-inner-search-bar .hd-advanced-drawer-inner .row>[class*="col-"] {
    position: relative !important;
}

.hd-inner-search-bar .hd-advanced-search-drawer .row>div:nth-child(1),
.hd-inner-search-bar .hd-advanced-drawer-inner .row>div:nth-child(1) {
    z-index: 30 !important;
}

.hd-inner-search-bar .hd-advanced-search-drawer .row>div:nth-child(2),
.hd-inner-search-bar .hd-advanced-drawer-inner .row>div:nth-child(2) {
    z-index: 29 !important;
}

.hd-inner-search-bar .hd-advanced-search-drawer .row>div:nth-child(3),
.hd-inner-search-bar .hd-advanced-drawer-inner .row>div:nth-child(3) {
    z-index: 28 !important;
}

.hd-inner-search-bar .hd-advanced-search-drawer .row>div:nth-child(4),
.hd-inner-search-bar .hd-advanced-drawer-inner .row>div:nth-child(4) {
    z-index: 27 !important;
}

.hd-inner-search-bar .hd-advanced-search-drawer .row>div:nth-child(5),
.hd-inner-search-bar .hd-advanced-drawer-inner .row>div:nth-child(5) {
    z-index: 26 !important;
}

.hd-inner-search-bar .hd-advanced-search-drawer .row>div:nth-child(6),
.hd-inner-search-bar .hd-advanced-drawer-inner .row>div:nth-child(6) {
    z-index: 25 !important;
}

.hd-inner-search-bar .hd-advanced-search-drawer .row>div:nth-child(7),
.hd-inner-search-bar .hd-advanced-drawer-inner .row>div:nth-child(7) {
    z-index: 24 !important;
}

.hd-inner-search-bar .hd-advanced-search-drawer .row>div:nth-child(8),
.hd-inner-search-bar .hd-advanced-drawer-inner .row>div:nth-child(8) {
    z-index: 23 !important;
}

.hd-inner-search-bar .hd-advanced-search-drawer .row>div:nth-child(9),
.hd-inner-search-bar .hd-advanced-drawer-inner .row>div:nth-child(9) {
    z-index: 22 !important;
}

/* Elevated z-index on whichever column currently has an active or open dropdown */
.hd-inner-search-bar .hd-advanced-drawer-inner .row>div:has(button[aria-expanded="true"]),
.hd-inner-search-bar .hd-advanced-search-drawer .row>div:has(button[aria-expanded="true"]),
.hd-inner-search-bar .hd-advanced-drawer-inner .row>div:has(> .form-group > .bootstrap-select > .dropdown-menu.show),
.hd-inner-search-bar .hd-advanced-search-drawer .row>div:has(> .form-group > .bootstrap-select > .dropdown-menu.show),
.hd-inner-search-bar .hd-advanced-drawer-inner .row>div.hd-active-field,
.hd-inner-search-bar .hd-advanced-search-drawer .row>div.hd-active-field,
body.home .hd-home-search .hd-advanced-drawer-inner .row>div:has(button[aria-expanded="true"]),
body.home .hd-home-search .hd-advanced-search-drawer .row>div:has(button[aria-expanded="true"]),
body.home .hd-home-search .hd-advanced-drawer-inner .row>div:has(> .form-group > .bootstrap-select > .dropdown-menu.show),
body.home .hd-home-search .hd-advanced-search-drawer .row>div:has(> .form-group > .bootstrap-select > .dropdown-menu.show),
body.home .hd-home-search .hd-advanced-drawer-inner .row>div.hd-active-field,
body.home .hd-home-search .hd-advanced-search-drawer .row>div.hd-active-field {
    z-index: 100070 !important;
}

.hd-home-search .hd-advanced-search-drawer .row>div:nth-child(2),
.hd-home-search .hd-advanced-drawer-inner .row>div:nth-child(2) {
    z-index: 29 !important;
}

.hd-home-search .hd-advanced-search-drawer .row>div:nth-child(3),
.hd-home-search .hd-advanced-drawer-inner .row>div:nth-child(3) {
    z-index: 28 !important;
}

.hd-home-search .hd-advanced-search-drawer .row>div:nth-child(4),
.hd-home-search .hd-advanced-drawer-inner .row>div:nth-child(4) {
    z-index: 27 !important;
}

.hd-home-search .hd-advanced-search-drawer .row>div:nth-child(5),
.hd-home-search .hd-advanced-drawer-inner .row>div:nth-child(5) {
    z-index: 26 !important;
}

.hd-home-search .hd-advanced-search-drawer .row>div:nth-child(6),
.hd-home-search .hd-advanced-drawer-inner .row>div:nth-child(6) {
    z-index: 25 !important;
}

.hd-home-search .hd-advanced-search-drawer .row>div:nth-child(7),
.hd-home-search .hd-advanced-drawer-inner .row>div:nth-child(7) {
    z-index: 24 !important;
}

.hd-home-search .hd-advanced-search-drawer .row>div:nth-child(8),
.hd-home-search .hd-advanced-drawer-inner .row>div:nth-child(8) {
    z-index: 23 !important;
}

.hd-home-search .hd-advanced-search-drawer .row>div:nth-child(9),
.hd-home-search .hd-advanced-drawer-inner .row>div:nth-child(9) {
    z-index: 22 !important;
}

/* Force all dropdown menus inside the home banner advanced drawer to open UPWARD above the field */
body.home .hd-home-search .hd-advanced-drawer-inner .bootstrap-select .dropdown-menu,
body.home .hd-home-search .hd-advanced-search-drawer .bootstrap-select .dropdown-menu {
    top: auto !important;
    bottom: calc(100% + 4px) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.14), 0 -2px 6px rgba(0, 0, 0, 0.04) !important;
    z-index: 100080 !important;
}

/* Home banner Type dropdown opens UPWARD on both mobile and desktop */
body.home .hd-home-search .hd-type-dropdown-menu,
body.home #hd-type-dropdown-menu {
    top: auto !important;
    bottom: calc(100% + 6px) !important;
    box-shadow: 0 -14px 35px rgba(15, 23, 42, 0.12) !important;
}

/* All Properties Search (.hd-inner-search-bar): dropdowns strictly open DOWNWARD on desktop and mobile without breaking */
.hd-inner-search-bar .hd-advanced-drawer-inner .bootstrap-select .dropdown-menu,
.hd-inner-search-bar .hd-advanced-search-drawer .bootstrap-select .dropdown-menu,
.hd-inner-search-bar .bootstrap-select .dropdown-menu,
.hd-inner-search-bar .bootstrap-select.dropup .dropdown-menu,
.hd-inner-search-bar .dropup .dropdown-menu,
.hd-inner-search-bar [data-popper-placement^="top"],
.hd-inner-search-bar .dropdown-menu[data-popper-placement^="top"],
.hd-inner-search-bar select[name="areas[]"]~.dropdown-menu,
.hd-inner-search-bar select[name="type[]"]~.dropdown-menu,
.hd-inner-search-bar select[name="typography[]"]~.dropdown-menu,
.hd-inner-search-bar select[name="max-price"]~.dropdown-menu,
.hd-inner-search-bar select[name="status[]"]~.dropdown-menu,
body:not(.home) .hd-advanced-drawer-inner .bootstrap-select .dropdown-menu,
body:not(.home) .hd-advanced-search-drawer .bootstrap-select .dropdown-menu {
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16), 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    z-index: 100100 !important;
}

.hd-inner-search-bar .hd-advanced-drawer-inner .bootstrap-select .dropdown-toggle::after,
.hd-inner-search-bar .hd-advanced-search-drawer .bootstrap-select .dropdown-toggle::after,
.hd-inner-search-bar .bootstrap-select .dropdown-toggle::after,
.hd-inner-search-bar .bootstrap-select.dropup .dropdown-toggle::after,
body:not(.home) .hd-advanced-drawer-inner .bootstrap-select .dropdown-toggle::after {
    border: none !important;
    display: none !important;
    content: none !important;
}

.hd-inner-search-bar .hd-advanced-drawer-inner .bootstrap-select .inner,
.hd-inner-search-bar .hd-advanced-search-drawer .bootstrap-select .inner,
.hd-inner-search-bar .bootstrap-select .inner,
.hd-inner-search-bar .bootstrap-select .dropdown-menu.inner,
body:not(.home) .hd-advanced-drawer-inner .bootstrap-select .inner {
    height: 152px !important;
    min-height: 152px !important;
    max-height: 152px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

@media (min-width: 768px) {

    .hd-inner-search-bar .hd-advanced-drawer-inner .bootstrap-select .dropdown-menu,
    .hd-inner-search-bar .hd-advanced-drawer-inner select[name="areas[]"]~.dropdown-menu,
    .hd-inner-search-bar .hd-advanced-drawer-inner select[name="type[]"]~.dropdown-menu {
        top: calc(100% + 4px) !important;
        bottom: auto !important;
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    }
}

/* On mobile view, home banner drawer fields open UPWARDS above the field */
@media (max-width: 767px) {

    /* On mobile, home search drawer dropdowns open UPWARD above the field */
    body.home .hd-home-search .hd-advanced-drawer-inner .bootstrap-select .dropdown-menu,
    body.home .hd-home-search .hd-advanced-search-drawer .bootstrap-select .dropdown-menu {
        top: auto !important;
        bottom: calc(100% + 4px) !important;
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.14), 0 -2px 6px rgba(0, 0, 0, 0.04) !important;
        z-index: 100100 !important;
        max-height: none !important;
        height: auto !important;
    }

    body.home .hd-home-search .hd-advanced-drawer-inner .bootstrap-select>.dropdown-menu.show,
    body.home .hd-home-search .hd-advanced-drawer-inner .bootstrap-select>.dropdown-menu.open,
    body.home .hd-home-search .hd-advanced-drawer-inner .bootstrap-select.show>.dropdown-menu,
    body.home .hd-home-search .hd-advanced-drawer-inner .bootstrap-select.open>.dropdown-menu,
    body.home .hd-home-search .hd-advanced-search-drawer .bootstrap-select>.dropdown-menu.show,
    body.home .hd-home-search .hd-advanced-search-drawer .bootstrap-select>.dropdown-menu.open,
    body.home .hd-home-search .hd-advanced-search-drawer .bootstrap-select.show>.dropdown-menu,
    body.home .hd-home-search .hd-advanced-search-drawer .bootstrap-select.open>.dropdown-menu,
    .hd-inner-search-bar .hd-advanced-drawer-inner .bootstrap-select>.dropdown-menu.show,
    .hd-inner-search-bar .hd-advanced-drawer-inner .bootstrap-select>.dropdown-menu.open,
    .hd-inner-search-bar .hd-advanced-drawer-inner .bootstrap-select.show>.dropdown-menu,
    .hd-inner-search-bar .hd-advanced-drawer-inner .bootstrap-select.open>.dropdown-menu,
    .hd-inner-search-bar .hd-advanced-search-drawer .bootstrap-select>.dropdown-menu.show,
    .hd-inner-search-bar .hd-advanced-search-drawer .bootstrap-select>.dropdown-menu.open,
    .hd-inner-search-bar .hd-advanced-search-drawer .bootstrap-select.show>.dropdown-menu,
    .hd-inner-search-bar .hd-advanced-search-drawer .bootstrap-select.open>.dropdown-menu,
    .hd-inner-search-bar .bootstrap-select>.dropdown-menu.show,
    .hd-inner-search-bar .bootstrap-select>.dropdown-menu.open,
    .hd-inner-search-bar .bootstrap-select.show>.dropdown-menu,
    .hd-inner-search-bar .bootstrap-select.open>.dropdown-menu,
    body:not(.home) .hd-advanced-drawer-inner .bootstrap-select>.dropdown-menu.show,
    body:not(.home) .hd-advanced-drawer-inner .bootstrap-select>.dropdown-menu.open,
    body:not(.home) .hd-advanced-drawer-inner .bootstrap-select.show>.dropdown-menu,
    body:not(.home) .hd-advanced-drawer-inner .bootstrap-select.open>.dropdown-menu,
    body:not(.home) .hd-advanced-search-drawer .bootstrap-select>.dropdown-menu.show,
    body:not(.home) .hd-advanced-search-drawer .bootstrap-select>.dropdown-menu.open,
    body:not(.home) .hd-advanced-search-drawer .bootstrap-select.show>.dropdown-menu,
    body:not(.home) .hd-advanced-search-drawer .bootstrap-select.open>.dropdown-menu {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        overflow: hidden !important;
        max-height: none !important;
        height: auto !important;
    }

    .hd-advanced-drawer-inner .bootstrap-select .popover-header,
    .hd-advanced-search-drawer .bootstrap-select .popover-header,
    .hd-advanced-drawer-inner .bootstrap-select .popover-title,
    .hd-advanced-search-drawer .bootstrap-select .popover-title,
    .hd-advanced-drawer-inner .bootstrap-select .hd-dropdown-header,
    .hd-advanced-search-drawer .bootstrap-select .hd-dropdown-header,
    .hd-advanced-drawer-inner .bootstrap-select .hd-areas-header,
    .hd-advanced-search-drawer .bootstrap-select .hd-areas-header,
    .hd-inner-search-bar .bootstrap-select .hd-dropdown-header,
    .hd-inner-search-bar .bootstrap-select .popover-header,
    body:not(.home) .bootstrap-select .hd-dropdown-header {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        line-height: 40px !important;
        order: 0 !important;
        flex-shrink: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        background: #f8fafc !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 0 36px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .hd-advanced-drawer-inner .bootstrap-select .bs-actionsbox,
    .hd-advanced-search-drawer .bootstrap-select .bs-actionsbox,
    .hd-inner-search-bar .bootstrap-select .bs-actionsbox,
    body:not(.home) .bootstrap-select .bs-actionsbox {
        display: block !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        order: 1 !important;
        flex-shrink: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: #ffffff !important;
        border-bottom: 1px solid #f1f5f9 !important;
        padding: 5px 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    body.home .hd-home-search .hd-advanced-drawer-inner .bootstrap-select.show,
    body.home .hd-home-search .hd-advanced-drawer-inner .bootstrap-select.open {
        z-index: 100070 !important;
    }

    body.home .hd-home-search .hd-advanced-drawer-inner .bootstrap-select .dropdown-toggle::after {
        border: none !important;
        display: none !important;
        content: none !important;
    }

    /* All Properties Search on mobile: strictly DOWNWARD without breaking */
    .hd-inner-search-bar .hd-advanced-drawer-inner .bootstrap-select .dropdown-menu,
    .hd-inner-search-bar .hd-advanced-search-drawer .bootstrap-select .dropdown-menu,
    .hd-inner-search-bar .bootstrap-select .dropdown-menu,
    .hd-inner-search-bar .bootstrap-select.dropup .dropdown-menu,
    .hd-inner-search-bar .dropup .dropdown-menu,
    .hd-inner-search-bar [data-popper-placement^="top"],
    .hd-inner-search-bar .dropdown-menu[data-popper-placement^="top"],
    .hd-inner-search-bar select[name="areas[]"]~.dropdown-menu,
    .hd-inner-search-bar select[name="type[]"]~.dropdown-menu,
    .hd-inner-search-bar select[name="sub_type[]"]~.dropdown-menu,
    .hd-inner-search-bar select[name="plot-area-unit"]~.dropdown-menu,
    .hd-inner-search-bar select[name="typography[]"]~.dropdown-menu,
    .hd-inner-search-bar select[name="max-price"]~.dropdown-menu,
    .hd-inner-search-bar select[name="status[]"]~.dropdown-menu,
    body:not(.home) .hd-advanced-drawer-inner .bootstrap-select .dropdown-menu,
    body:not(.home) .hd-advanced-search-drawer .bootstrap-select .dropdown-menu {
        top: calc(100% + 4px) !important;
        bottom: auto !important;
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16), 0 4px 10px rgba(0, 0, 0, 0.05) !important;
        z-index: 100100 !important;
    }

    .hd-inner-search-bar .hd-advanced-drawer-inner .bootstrap-select .dropdown-toggle::after,
    .hd-inner-search-bar .hd-advanced-search-drawer .bootstrap-select .dropdown-toggle::after,
    .hd-inner-search-bar .bootstrap-select .dropdown-toggle::after,
    .hd-inner-search-bar .bootstrap-select.dropup .dropdown-toggle::after,
    body:not(.home) .hd-advanced-drawer-inner .bootstrap-select .dropdown-toggle::after,
    .hd-inner-search-bar .bootstrap-select.dropup .dropdown-toggle::after {
        border: none !important;
        display: none !important;
        content: none !important;
    }

    body.home .hd-home-search .hd-advanced-drawer-inner .bootstrap-select .inner,
    body.home .hd-home-search .hd-advanced-search-drawer .bootstrap-select .inner,
    .hd-inner-search-bar .hd-advanced-drawer-inner .bootstrap-select .inner,
    .hd-inner-search-bar .hd-advanced-search-drawer .bootstrap-select .inner,
    .hd-inner-search-bar .bootstrap-select .inner,
    body:not(.home) .hd-advanced-drawer-inner .bootstrap-select .inner,
    body:not(.home) .hd-advanced-search-drawer .bootstrap-select .inner {
        order: 3 !important;
        flex: 0 0 152px !important;
        height: 152px !important;
        min-height: 152px !important;
        max-height: 152px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.home .hd-home-search .hd-advanced-drawer-inner .bootstrap-select ul.dropdown-menu.inner,
    body.home .hd-home-search .hd-advanced-search-drawer .bootstrap-select ul.dropdown-menu.inner,
    .hd-inner-search-bar .hd-advanced-drawer-inner .bootstrap-select ul.dropdown-menu.inner,
    .hd-inner-search-bar .hd-advanced-search-drawer .bootstrap-select ul.dropdown-menu.inner,
    .hd-inner-search-bar .bootstrap-select ul.dropdown-menu.inner,
    body:not(.home) .hd-advanced-drawer-inner .bootstrap-select ul.dropdown-menu.inner,
    body:not(.home) .hd-advanced-search-drawer .bootstrap-select ul.dropdown-menu.inner {
        max-height: none !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        float: none !important;
    }

    .hd-advanced-drawer-inner .bootstrap-select .dropdown-menu li a,
    .hd-advanced-search-drawer .bootstrap-select .dropdown-menu li a,
    .hd-inner-search-bar .bootstrap-select .dropdown-menu li a,
    .hd-advanced-drawer-inner .bootstrap-select .dropdown-item,
    .hd-advanced-search-drawer .bootstrap-select .dropdown-item,
    .hd-inner-search-bar .bootstrap-select .dropdown-item,
    .hd-advanced-drawer-inner .bootstrap-select .dropdown-menu .text,
    .hd-advanced-search-drawer .bootstrap-select .dropdown-menu .text,
    .hd-inner-search-bar .bootstrap-select .dropdown-menu .text {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        line-height: 38px !important;
        font-size: 14px !important;
        touch-action: manipulation !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        white-space: nowrap !important;
    }
}

.hd-advanced-drawer-inner .bootstrap-select .dropdown-menu li a,
.hd-advanced-search-drawer .bootstrap-select .dropdown-menu li a {
    min-height: 38px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
}

/* Stacking context: only the truly active select/column sits on top of all other elements */
.hd-inner-search-bar .hd-advanced-drawer-inner [class*="col-"].hd-active-field,
.hd-inner-search-bar .hd-advanced-search-drawer [class*="col-"].hd-active-field,
.hd-inner-search-bar .hd-advanced-drawer-inner .row>div.hd-active-field,
.hd-inner-search-bar .hd-advanced-search-drawer .row>div.hd-active-field,
.hd-inner-search-bar .hd-advanced-drawer-inner .row>div:has(button[aria-expanded="true"]),
.hd-inner-search-bar .hd-advanced-search-drawer .row>div:has(button[aria-expanded="true"]),
.hd-inner-search-bar .hd-advanced-drawer-inner .form-group.hd-active-field,
.hd-inner-search-bar .hd-advanced-search-drawer .form-group.hd-active-field,
.hd-inner-search-bar .bootstrap-select.hd-active-select,
.hd-inner-search-bar .bootstrap-select:has(button[aria-expanded="true"]) {
    position: relative !important;
    z-index: 100095 !important;
}

.hd-advanced-drawer-inner .bootstrap-select.show .dropdown-menu,
.hd-advanced-drawer-inner .bootstrap-select.open .dropdown-menu,
.hd-advanced-drawer-inner .bootstrap-select .dropdown-menu,
.hd-advanced-search-drawer .bootstrap-select.show .dropdown-menu,
.hd-advanced-search-drawer .bootstrap-select.open .dropdown-menu,
.hd-advanced-search-drawer .bootstrap-select .dropdown-menu,
.hd-home-search:not(.hd-inner-search-bar *) .bootstrap-select .dropdown-menu,
.hd-home-search:not(.hd-inner-search-bar *) .dropdown-menu {
    z-index: 100080 !important;
}

.bs-container {
    z-index: 100080 !important;
}

.bs-container .dropdown-menu {
    z-index: 100080 !important;
}

/* =========================================================
   8. AUTOCOMPLETE STYLING
========================================================= */
.ui-autocomplete {
    position: absolute !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14), 0 3px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 0 0 8px 0 !important;
    max-height: 380px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 2147483647 !important;
    box-sizing: border-box !important;
}

/* Elegant scrollbar that doesn't overlap text or badges */
.ui-autocomplete::-webkit-scrollbar {
    width: 6px !important;
}

.ui-autocomplete::-webkit-scrollbar-track {
    background: transparent !important;
}

.ui-autocomplete::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px !important;
}

.ui-autocomplete::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}


.ui-autocomplete li.hd-ac-section-header {
    list-style: none !important;
    padding: 8px 16px 4px !important;
    margin: 2px 0 0 0 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    cursor: default !important;
    pointer-events: none !important;
}

.ui-autocomplete li.hd-ac-section-header:hover,
.ui-autocomplete li.hd-ac-section-header.ui-state-active {
    background: transparent !important;
    color: #94a3b8 !important;
}

.ui-autocomplete .ui-menu-item,
.ui-autocomplete li.hd-ac-item {
    list-style: none !important;
    padding: 0 6px !important;
    margin: 2px 0 !important;
    border-radius: 8px !important;
    font-family: inherit;
    font-size: 14px;
    color: #334155;
    cursor: pointer;
    overflow: hidden;
}

.ui-autocomplete .ui-menu-item-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    white-space: normal !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.ui-autocomplete .ui-menu-item:hover .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-state-active {
    background: #fbf6ea !important;
    color: #a88220 !important;
    margin: 0 !important;
    border: none !important;
}

.ui-autocomplete .ui-menu-item:hover .hd-ac-label,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active .hd-ac-label {
    color: #8f6d14 !important;
    font-weight: 600 !important;
}

.ui-autocomplete .ui-menu-item:hover .hd-ac-badge,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active .hd-ac-badge {
    background: #f3e8c7 !important;
    color: #8f6d14 !important;
}



@keyframes hdFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   9. TABLET & RESPONSIVE BREAKPOINTS (1024px & 768px)
========================================================= */
@media (max-width: 1024px) {

    /* Responsive Hero Section background & container height for 1024px and 768px */
    .elementor-element-b147f27,
    .elementor-section:has(.hd-home-search),
    .elementor-section.hd-hero-section {
        min-height: auto !important;
        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
    }

    .elementor .elementor-background-slideshow__slide__image,
    .elementor-background-slideshow__slide__image {
        background-position: initial !important;
    }

    .elementor-element-b147f27>.elementor-container,
    .elementor-section:has(.hd-home-search)>.elementor-container,
    .elementor-section.hd-hero-section>.elementor-container {
        min-height: clamp(370px, 46.8vw, 490px) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
    }

    .elementor-element-b147f27 .elementor-column,
    .elementor-section:has(.hd-home-search) .elementor-column,
    .elementor-element-b147f27 .elementor-widget-wrap,
    .elementor-section:has(.hd-home-search) .elementor-widget-wrap {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
    }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .hd-home-search {
        margin: auto auto 20px auto !important;
        width: 94% !important;
        padding: 0 !important;
    }
}

@media (max-width: 820px) and (min-width: 768px) {
    .hd-home-search {
        margin: auto auto 15px auto !important;
        width: 96% !important;
    }

    .hd-search-card {
        padding: 10px 12px !important;
    }
}

/* =========================================================
   10. MOBILE BREAKPOINT (< 768px)
========================================================= */
@media (max-width: 767px) {
    .hd-home-search {
        margin-top: 150px;
        margin-bottom: 20px;
        padding: 0 15px;
        width: 100%;
        max-width: 100%;
        position: static !important;
        z-index: 9999 !important;
        overflow: visible !important;
    }

    .hd-search-wrapper {
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        display: block !important;
    }

    .hd-mobile-search-toggle,
    .hd-mobile-search-close {
        display: none !important;
    }

    /* When expanded on mobile */
    .hd-home-search.hd-search-expanded {
        position: relative !important;
        z-index: 2147483647 !important;
    }

    .hd-home-search.hd-search-expanded .hd-search-wrapper {
        position: relative !important;
        z-index: 2147483647 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        display: block !important;
    }

    .hd-home-search.hd-search-expanded .hd-mobile-search-toggle,
    .hd-home-search.hd-search-expanded .hd-mobile-search-close {
        display: none !important;
    }

    /* Advanced filters on mobile: show as an overlay over the search card.
       It no longer pushes the layout, so the hero/banner image is never resized or zoomed.
       Flow: Search Properties button -> Type + Keyword -> Advanced only -> (close) -> Type + Keyword -> (X) -> button */
    .hd-home-search .hd-advanced-search-drawer,
    .hd-search-wrapper .hd-advanced-search-drawer,
    #hd-advanced-search-drawer {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        margin: 0 !important;
    }

    /* Hide Type + Keyword while advanced is open (visibility keeps the height so nothing jumps) */
    .hd-search-wrapper:has(.hd-advanced-search-drawer.is-open) .hd-search-card {
        visibility: hidden;
    }

    /* Advanced panel has its own close button, so hide the outer mobile X meanwhile */
    .hd-search-wrapper:has(.hd-advanced-search-drawer.is-open) .hd-mobile-search-close {
        display: none !important;
    }

    /* Remove close button from advanced search of home search */
    .hd-search-wrapper:not(.hd-inner-search-bar *) .hd-advanced-drawer-close-btn,
    .hd-home-search .hd-advanced-drawer-close-btn,
    body.home .hd-advanced-drawer-close-btn {
        display: none !important;
    }

    /* Mobile Search Bar: single horizontal row, compact & sleek (matches desktop layout in miniature) */
    .hd-search-card {
        padding: 6px 8px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
    }

    .hd-search-bar-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .hd-type-dropdown-wrap {
        flex: 0 0 auto !important;
        width: auto !important;
        order: 0 !important;
    }

    .hd-type-trigger-btn {
        height: 38px !important;
        padding: 0 8px !important;
        gap: 4px !important;
        font-size: 12.5px !important;
        border-radius: 8px !important;
        border: 1px solid #e2e8f0 !important;
        width: auto !important;
        flex-shrink: 0 !important;
        justify-content: center !important;
        background: #ffffff !important;
    }

    .hd-type-building-icon svg {
        width: 14px !important;
        height: 14px !important;
    }

    .hd-type-label {
        font-size: 12.5px !important;
        max-width: 65px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    .hd-type-chevron svg {
        width: 11px !important;
        height: 11px !important;
    }

    .hd-keyword-input-wrap {
        height: 38px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        order: 0 !important;
        margin: 0 !important;
        border-radius: 8px !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
    }

    .hd-search-input {
        font-size: 16px !important;
        height: 36px !important;
        padding: 0 6px 0 26px !important;
        touch-action: manipulation;
        width: 100% !important;
    }

    .hd-search-input::placeholder {
        font-size: 11.5px !important;
    }

    .hd-search-submit-btn {
        left: 6px !important;
        width: 15px !important;
        height: 15px !important;
    }

    .hd-search-submit-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    .hd-filter-toggle-btn {
        height: 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        flex: 0 0 38px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        order: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hd-filter-toggle-btn svg {
        width: 17px !important;
        height: 17px !important;
    }


    .hd-advanced-drawer-card {
        border-radius: 12px;
    }

    .hd-advanced-drawer-body {
        padding: 12px;
    }

    /* Autocomplete dropdown on mobile: opens upwards with height showing 2-3 items first, remainder scrollable */
    .ui-autocomplete {
        max-height: 230px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: 0 -12px 35px rgba(15, 23, 42, 0.16), 0 -2px 6px rgba(0, 0, 0, 0.04) !important;
        border-radius: 14px !important;
        z-index: 2147483640 !important;
    }

    .ui-autocomplete li.hd-ac-item {
        padding: 0 !important;
    }

    .ui-autocomplete .hd-ac-item-inner {
        padding: 10px 14px !important;
    }

    /* Inner Search Bar on Mobile: keep strictly horizontal single line & fully visible */
    .hd-inner-search-bar {
        padding: 8px 0 !important;
    }

    .hd-inner-search-bar .hd-home-search {
        margin: 0 auto !important;
        max-width: 100% !important;
        position: relative !important;
    }

    .hd-inner-search-bar .hd-search-wrapper {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        display: block !important;
    }

    .hd-inner-search-bar .hd-search-bar-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 5px !important;
    }

    .hd-inner-search-bar {
        position: relative !important;
        z-index: 20 !important;
    }

    /* Ensure Houzez mobile navigation offcanvas and backdrops sit above all page elements */
    .nav-mobile,
    #nav-mobile,
    .offcanvas,
    .offcanvas-backdrop,
    #hz-offcanvas-mobile-menu,
    #hz-offcanvas-login-register {
        z-index: 2147483640 !important;
    }

    .offcanvas.show,
    .offcanvas.showing,
    #hz-offcanvas-mobile-menu.show,
    #hz-offcanvas-mobile-menu.showing,
    #hz-offcanvas-login-register.show,
    #hz-offcanvas-login-register.showing {
        z-index: 2147483645 !important;
    }

    .offcanvas-backdrop.show,
    .offcanvas-backdrop.showing {
        z-index: 2147483642 !important;
    }

    /* Suppress and hide mobile inner search bar when mobile navigation is active */
    body.hd-menu-open .hd-inner-search-bar,
    body:has(.offcanvas.show) .hd-inner-search-bar,
    body:has(.offcanvas.showing) .hd-inner-search-bar,
    body:has(.offcanvas-backdrop.show) .hd-inner-search-bar,
    body:has(#hz-offcanvas-mobile-menu.show) .hd-inner-search-bar,
    body:has(#hz-offcanvas-mobile-menu.showing) .hd-inner-search-bar,
    body:has(#hz-offcanvas-login-register.show) .hd-inner-search-bar,
    body:has(#hz-offcanvas-login-register.showing) .hd-inner-search-bar {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }

    .hd-inner-search-bar .hd-type-dropdown-wrap {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    .hd-inner-search-bar .hd-type-trigger-btn {
        height: 38px !important;
        padding: 0 6px !important;
        font-size: 12px !important;
        gap: 3px !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    .hd-inner-search-bar .hd-type-building-icon svg {
        width: 14px !important;
        height: 14px !important;
    }

    .hd-inner-search-bar .hd-type-label {
        font-size: 12px !important;
        max-width: 62px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    .hd-inner-search-bar .hd-keyword-input-wrap {
        height: 38px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 0 6px !important;
        order: 0 !important;
        margin: 0 !important;
    }

    .hd-inner-search-bar .hd-search-input {
        font-size: 16px !important;
        height: 36px !important;
        padding: 0 4px 0 20px !important;
        touch-action: manipulation;
        width: 100% !important;
    }

    .hd-inner-search-bar .hd-search-input::placeholder {
        font-size: 12px !important;
    }

    .hd-inner-search-bar .hd-search-submit-btn {
        left: 6px !important;
        width: 15px !important;
        height: 15px !important;
    }

    .hd-inner-search-bar .hd-filter-toggle-btn {
        height: 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        flex: 0 0 38px !important;
        border-radius: 6px !important;
    }

    .hd-inner-search-bar .hd-mobile-search-toggle,
    .hd-inner-search-bar .hd-mobile-search-close {
        display: none !important;
    }

    /* Inner search bar keeps its original behaviour (drawer drops below, bar stays visible) */
    .hd-inner-search-bar .hd-search-wrapper:has(.hd-advanced-search-drawer.is-open) .hd-search-card {
        visibility: visible !important;
    }

    /* Inner search bar on mobile (properties search): strictly opens DOWNWARDS below the search bar */
    .hd-inner-search-bar .hd-home-search .hd-advanced-search-drawer,
    .hd-inner-search-bar .hd-search-wrapper .hd-advanced-search-drawer,
    .hd-inner-search-bar .hd-advanced-search-drawer,
    .hd-inner-search-bar #hd-advanced-search-drawer {
        position: absolute !important;
        top: calc(100% + 4px) !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        z-index: 100050 !important;
        width: 100% !important;
        transform: none !important;
        animation: hdDrawerFadeIn 0.18s ease forwards !important;
    }

    .hd-inner-search-bar .hd-search-wrapper .hd-advanced-drawer-close-btn {
        top: 10px;
        right: 12px;
        width: 26px;
        height: 26px;
        background: #f1f5f9;
        color: #64748b;
        box-shadow: none;
        z-index: 20;
    }

    /* Mobile home drawer selectpickers open UPWARDS above the field */
    body.home .hd-home-search .hd-advanced-drawer-inner .bootstrap-select .dropdown-menu,
    body.home .hd-home-search .hd-advanced-search-drawer .bootstrap-select .dropdown-menu {
        top: auto !important;
        bottom: calc(100% + 4px) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        transform: none !important;
        box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.14), 0 -2px 6px rgba(0, 0, 0, 0.04) !important;
        z-index: 100080 !important;
    }

    body.home .hd-home-search .hd-advanced-drawer-inner .bootstrap-select .dropdown-toggle::after,
    body.home .hd-home-search .hd-advanced-search-drawer .bootstrap-select .dropdown-toggle::after {
        border: none !important;
        display: none !important;
        content: none !important;
    }

    body.home .hd-home-search .hd-advanced-drawer-inner .bootstrap-select .inner,
    body.home .hd-home-search .hd-advanced-search-drawer .bootstrap-select .inner,
    body.home .hd-home-search .hd-advanced-drawer-inner .bootstrap-select .dropdown-menu.inner,
    body.home .hd-home-search .hd-advanced-search-drawer .bootstrap-select .dropdown-menu.inner {
        max-height: 160px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .hd-advanced-drawer-inner .bootstrap-select .dropdown-menu li a,
    .hd-advanced-search-drawer .bootstrap-select .dropdown-menu li a,
    .hd-advanced-drawer-inner .bootstrap-select .dropdown-item,
    .hd-advanced-search-drawer .bootstrap-select .dropdown-item,
    .hd-advanced-drawer-inner .bootstrap-select .dropdown-menu .text,
    .hd-advanced-search-drawer .bootstrap-select .dropdown-menu .text {
        min-height: 38px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        font-size: 16px !important;
        touch-action: manipulation !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Hide check-mark on single-select dropdowns and unselected items so they never overlap text */
    .hd-advanced-drawer-inner .bootstrap-select:not([multiple]) .check-mark,
    .hd-advanced-search-drawer .bootstrap-select:not([multiple]) .check-mark,
    .hd-home-search .bootstrap-select:not([multiple]) .check-mark,
    .hd-inner-search-bar .bootstrap-select:not([multiple]) .check-mark,
    .hd-advanced-drawer-inner .bootstrap-select:not(.show-tick) .check-mark,
    .hd-advanced-search-drawer .bootstrap-select:not(.show-tick) .check-mark,
    .hd-advanced-drawer-inner .bootstrap-select .dropdown-menu li:not(.selected) .check-mark,
    .hd-advanced-search-drawer .bootstrap-select .dropdown-menu li:not(.selected) .check-mark {
        display: none !important;
        content: none !important;
    }

    .hd-advanced-drawer-inner .bootstrap-select.show-tick .dropdown-menu li.selected a span.check-mark,
    .hd-advanced-search-drawer .bootstrap-select.show-tick .dropdown-menu li.selected a span.check-mark,
    .hd-home-search .bootstrap-select.show-tick .dropdown-menu li.selected a span.check-mark,
    .hd-inner-search-bar .bootstrap-select.show-tick .dropdown-menu li.selected a span.check-mark {
        display: inline-block !important;
        position: absolute !important;
        right: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }

    /* Ensure hidden empty placeholder option is not displayed in the budget dropdown menu */
    .hd-col-budget select[name="max-price"]~.dropdown-menu li.d-none,
    .hd-col-budget select[name="max-price"]~.dropdown-menu li.hidden,
    .hd-col-budget .bootstrap-select .dropdown-menu li.d-none,
    .hd-col-budget .bootstrap-select .dropdown-menu li.hidden {
        display: none !important;
    }

    /* Hide search box inside drawer dropdowns except Typography */
    .hd-advanced-drawer-inner .bootstrap-select:not(.hd-select-typography):not(:has(select[name="typography[]"])) .bs-searchbox,
    .hd-advanced-search-drawer .bootstrap-select:not(.hd-select-typography):not(:has(select[name="typography[]"])) .bs-searchbox {
        display: none !important;
    }

    /* Typography live search box */
    .hd-advanced-drawer-inner .bootstrap-select.hd-select-typography .bs-searchbox,
    .hd-advanced-search-drawer .bootstrap-select.hd-select-typography .bs-searchbox,
    .hd-advanced-drawer-inner .bootstrap-select:has(select[name="typography[]"]) .bs-searchbox,
    .hd-advanced-search-drawer .bootstrap-select:has(select[name="typography[]"]) .bs-searchbox,
    .bootstrap-select.hd-select-typography .bs-searchbox {
        display: block !important;
        padding: 6px 10px 6px 10px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #f1f5f9 !important;
        order: 2 !important;
    }

    /* Anti-shake & anti-overflow for advanced drawer dropdown menus on mobile */
    .hd-advanced-drawer-inner .bootstrap-select .dropdown-menu,
    .hd-advanced-search-drawer .bootstrap-select .dropdown-menu {
        max-width: calc(100vw - 28px) !important;
        box-sizing: border-box !important;
    }

    /* Right-column dropdowns on mobile (Typography & Plot Type): align to right edge so they never overflow past screen edge */
    .hd-advanced-drawer-inner .bootstrap-select:has(select[name="sub_type[]"]) .dropdown-menu,
    .hd-advanced-search-drawer .bootstrap-select:has(select[name="sub_type[]"]) .dropdown-menu,
    .hd-advanced-drawer-inner .bootstrap-select:has(select[name="typography[]"]) .dropdown-menu,
    .hd-advanced-search-drawer .bootstrap-select:has(select[name="typography[]"]) .dropdown-menu,
    .hd-inner-search-bar .bootstrap-select.hd-select-typography .dropdown-menu,
    .hd-inner-search-bar .hd-field-plot .bootstrap-select .dropdown-menu,
    .hd-inner-search-bar .bootstrap-select:has(select[name="sub_type[]"]) .dropdown-menu,
    .hd-inner-search-bar .bootstrap-select:has(select[name="typography[]"]) .dropdown-menu,
    .hd-advanced-drawer-inner select[name="sub_type[]"]~.dropdown-menu,
    .hd-advanced-search-drawer select[name="sub_type[]"]~.dropdown-menu,
    .hd-advanced-drawer-inner select[name="typography[]"]~.dropdown-menu,
    .hd-advanced-search-drawer select[name="typography[]"]~.dropdown-menu,
    .hd-inner-search-bar select[name="sub_type[]"]~.dropdown-menu,
    .hd-inner-search-bar select[name="typography[]"]~.dropdown-menu {
        left: auto !important;
        right: 0 !important;
        width: 220px !important;
        min-width: 200px !important;
        max-width: calc(100vw - 32px) !important;
    }

    /* Left-column dropdowns on mobile (All Areas, Status & Plot Unit): align to left edge so they are never cut off */
    .hd-advanced-drawer-inner .bootstrap-select:has(select[name="areas[]"]) .dropdown-menu,
    .hd-advanced-search-drawer .bootstrap-select:has(select[name="areas[]"]) .dropdown-menu,
    .hd-advanced-drawer-inner .bootstrap-select:has(select[name="status[]"]) .dropdown-menu,
    .hd-advanced-search-drawer .bootstrap-select:has(select[name="status[]"]) .dropdown-menu,
    .hd-advanced-drawer-inner .bootstrap-select:has(select[name="plot-area-unit"]) .dropdown-menu,
    .hd-advanced-search-drawer .bootstrap-select:has(select[name="plot-area-unit"]) .dropdown-menu,
    .hd-inner-search-bar .hd-col-areas .bootstrap-select .dropdown-menu,
    .hd-inner-search-bar .bootstrap-select.status-js .dropdown-menu,
    .hd-inner-search-bar .bootstrap-select:has(select[name="areas[]"]) .dropdown-menu,
    .hd-inner-search-bar .bootstrap-select:has(select[name="status[]"]) .dropdown-menu,
    .hd-inner-search-bar .bootstrap-select:has(select[name="plot-area-unit"]) .dropdown-menu,
    .hd-advanced-drawer-inner select[name="areas[]"]~.dropdown-menu,
    .hd-advanced-search-drawer select[name="areas[]"]~.dropdown-menu,
    .hd-advanced-drawer-inner select[name="status[]"]~.dropdown-menu,
    .hd-advanced-search-drawer select[name="status[]"]~.dropdown-menu,
    .hd-advanced-drawer-inner select[name="plot-area-unit"]~.dropdown-menu,
    .hd-advanced-search-drawer select[name="plot-area-unit"]~.dropdown-menu,
    .hd-inner-search-bar select[name="areas[]"]~.dropdown-menu,
    .hd-inner-search-bar select[name="status[]"]~.dropdown-menu,
    .hd-inner-search-bar select[name="plot-area-unit"]~.dropdown-menu {
        left: 0 !important;
        right: auto !important;
        width: 220px !important;
        min-width: 200px !important;
        max-width: calc(100vw - 32px) !important;
    }

    /* Responsive actions box for selectpickers on mobile */
    .hd-advanced-drawer-inner .bootstrap-select .bs-actionsbox,
    .hd-advanced-search-drawer .bootstrap-select .bs-actionsbox {
        padding: 4px 6px !important;
    }

    .hd-advanced-drawer-inner .bootstrap-select .bs-actionsbox .btn-group,
    .hd-advanced-search-drawer .bootstrap-select .bs-actionsbox .btn-group {
        display: flex !important;
        width: 100% !important;
        gap: 4px !important;
    }

    .hd-advanced-drawer-inner .bootstrap-select .bs-actionsbox .btn,
    .hd-advanced-search-drawer .bootstrap-select .bs-actionsbox .btn {
        flex: 1 1 auto !important;
        padding: 5px 6px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* Lock body / html from shaking horizontally on mobile */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* Very Small Mobile (< 380px) */
@media (max-width: 380px) {
    .hd-search-card {
        padding: 10px;
    }

    .hd-type-trigger-btn,
    .hd-keyword-input-wrap {
        height: 44px;
        font-size: 13px;
    }

    .hd-filter-toggle-btn {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }
}

/* =========================================================
   11. SHIFT VIDEO UP ON MOBILE / TABLET (PRESERVED FIX)
========================================================= */
@media (max-width: 1024px) {

    .elementor-background-video-container,
    .banner-video-container,
    .top-banner-wrap,
    .splash-video-background {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .elementor-background-video-container video,
    .banner-video-container video,
    .top-banner-wrap video,
    .splash-video-background video,
    .elementor-background-video-hosted {
        width: 100% !important;
        height: calc(100% + 50px) !important;
        object-fit: cover !important;
        object-position: center 70% !important;
        position: absolute !important;
        top: -40px !important;
        left: 0 !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Final safety */
.hd-home-search,
.hd-search-wrapper,
.hd-advanced-search-drawer,
.hd-search-card {
    overflow: visible !important;
}

/* =========================================================
   COMPACT SPACING: Breadcrumb, Sort By, & Listing Content
========================================================= */
.listing-wrap .page-title-wrap,
.page-title-wrap {
    padding-top: 14px !important;
    padding-bottom: 4px !important;
}

.listing-wrap .listing-tools-wrap,
.listing-tools-wrap {
    padding-top: 0 !important;
    padding-bottom: 4px !important;
}

.listing-wrap .listing-tools-wrap .d-flex,
.listing-tools-wrap .d-flex {
    margin-bottom: 4px !important;
}

.listing-wrap .listings-count,
.listings-count {
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* =========================================================
   MOBILE COMPACT: Single row Breadcrumbs & Sort By
========================================================= */
@media (max-width: 767px) {

    /* 1. Compact inner search bar */
    .hd-inner-search-bar {
        padding: 8px 0 !important;
        margin-bottom: 0 !important;
    }

    .hd-inner-search-bar .hd-home-search,
    .hd-inner-search-bar .hd-search-wrapper,
    .hd-inner-search-bar .hd-search-card {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. Main container & listing wrap spacing */
    main#main-wrap,
    .main-wrap,
    section.listing-wrap,
    .listing-wrap,
    .listing-v7 {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .listing-wrap>.container,
    .listing-wrap>.container-fluid {
        padding-top: 0 !important;
    }

    .listing-wrap .col-lg-12,
    .listing-wrap .bt-content-wrap {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* 3. Page title wrap on mobile: clean single row with comfortable breathing room */
    .listing-wrap .page-title-wrap,
    .page-title-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-top: 5px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    .breadcrumb-wrap {
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .breadcrumb-wrap nav,
    .breadcrumbs,
    .breadcrumb {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        line-height: 1.3 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        white-space: nowrap !important;
    }

    .breadcrumb li,
    .breadcrumb a,
    .breadcrumb-item,
    .breadcrumb-item a {
        font-size: 11.5px !important;
        line-height: 1.3 !important;
        padding: 0 !important;
        margin: 0 !important;
        color: #64748b !important;
        white-space: nowrap !important;
    }

    .breadcrumb-item+.breadcrumb-item::before {
        padding-left: 3px !important;
        padding-right: 3px !important;
        font-size: 10px !important;
        color: #94a3b8 !important;
    }

    /* 4. Compact Sort-by & View Switcher on same row after breadcrumb */
    .page-title-wrap .d-flex.align-items-center {
        width: auto !important;
        flex: 0 0 auto !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 6px !important;
    }

    .page-title-wrap .page-title.flex-grow-1 {
        display: none !important;
    }

    .hd-header-sort {
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    .sort-by,
    .sort-by .d-flex {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        position: relative !important;
        z-index: 50 !important;
    }

    .sort-by .sort-by-title {
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 26px !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
        color: #334155 !important;
    }

    .sort-by .bootstrap-select {
        width: auto !important;
        margin: 0 !important;
    }

    .sort-by .bootstrap-select>.btn {
        height: 26px !important;
        min-height: 26px !important;
        padding: 0 6px !important;
        font-size: 11px !important;
        line-height: 24px !important;
        border-radius: 5px !important;
        border: 1px solid #cbd5e1 !important;
        background: #f8fafc !important;
        color: #1e293b !important;
    }

    .sort-by .bootstrap-select>.btn .filter-option-inner-inner {
        font-size: 11px !important;
        line-height: 24px !important;
        white-space: nowrap !important;
    }

    .sort-by .bootstrap-select .dropdown-menu {
        z-index: 1060 !important;
    }

    /* Hide view switcher from header row on mobile so only breadcrumb + sort-by remain */
    .page-title-wrap .listing-switch-view {
        display: none !important;
    }

    /* Hide the 2 layout buttons before the map (grid and list) on mobile view */
    .listing-switch-view .layout-btn:not(.half-map-btn),
    .listing-switch-view .views-title {
        display: none !important;
    }

    /* 5. Hide empty articles */
    .bt-content-wrap>article,
    .bt-content-wrap article:empty {
        margin: 0 !important;
        padding: 0 !important;
        display: none !important;
    }

    .bt-content-wrap>article p:empty {
        display: none !important;
    }

    /* 6. Single row for property count (left) and map button (right where circled) */
    .listing-wrap .listing-tools-wrap,
    .listing-tools-wrap {
        padding: 0 !important;
        margin-top: 4px !important;
        margin-bottom: 6px !important;
    }

    .listing-wrap .listing-tools-wrap .d-flex,
    .listing-tools-wrap .d-flex,
    .listing-tools-wrap>.d-flex {
        display: flex !important;
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .listing-wrap .listings-count,
    .listings-count,
    .listing-tools-wrap .flex-grow-1 {
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        line-height: 26px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    /* Mobile map button on the right */
    .hd-mobile-map-btn-wrap {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    .hd-mobile-map-btn-wrap .listing-switch-view {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hd-mobile-map-btn-wrap .half-map-btn {
        width: 26px !important;
        height: 26px !important;
        line-height: 24px !important;
        font-size: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border-radius: 5px !important;
        border: 1px solid #cbd5e1 !important;
        background: #f8fafc !important;
        color: #00457c !important;
        text-decoration: none !important;
    }

    .hd-mobile-map-btn-wrap .half-map-btn:hover,
    .hd-mobile-map-btn-wrap .half-map-btn.active {
        background: #00457c !important;
        color: #ffffff !important;
        border-color: #00457c !important;
    }

    /* 7. Compact listing grid view gap */
    .listing-wrap .listing-view.gy-4,
    .listing-view.gy-4 {
        --bs-gutter-y: 12px !important;
    }

    .listing-wrap .listing-view.gx-4,
    .listing-view.gx-4 {
        --bs-gutter-x: 10px !important;
    }

    .listing-wrap .listing-view.gy-4>*,
    .listing-view.gy-4>* {
        margin-top: 8px !important;
    }

    /* Inner search bar on mobile (properties search): removed gap so drawer sits directly under search bar */
    .hd-inner-search-bar .hd-home-search .hd-advanced-search-drawer,
    .hd-inner-search-bar .hd-search-wrapper .hd-advanced-search-drawer,
    .hd-inner-search-bar .hd-advanced-search-drawer,
    .hd-inner-search-bar #hd-advanced-search-drawer {
        top: calc(100% + 4px) !important;
        bottom: auto !important;
    }
}

@media (min-width: 768px) {
    .hd-mobile-map-btn-wrap {
        display: none !important;
    }
}

/* =========================================================
   DYNAMIC CATEGORY SEARCH DRAWER (Residential vs Plot)
========================================================= */
.hd-advanced-fields-row[data-category="plot"] .hd-field-residential {
    display: none !important;
}

.hd-advanced-fields-row[data-category="plot"] .hd-field-plot {
    display: block !important;
}

.hd-advanced-fields-row[data-category="residential"] .hd-field-plot {
    display: none !important;
}

.hd-advanced-fields-row[data-category="residential"] .hd-field-residential {
    display: block !important;
}

/* Downward dropdowns on properties search page for all drawer fields including sub_type and plot-area-unit */
.hd-inner-search-bar select[name="sub_type[]"]~.dropdown-menu,
.hd-inner-search-bar select[name="plot-area-unit"]~.dropdown-menu,
.hd-inner-search-bar select[name="areas[]"]~.dropdown-menu,
.hd-inner-search-bar select[name="typography[]"]~.dropdown-menu,
.hd-inner-search-bar select[name="max-price"]~.dropdown-menu,
.hd-inner-search-bar select[name="status[]"]~.dropdown-menu {
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16), 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    z-index: 100100 !important;
}

/* Single line layout for search drawer on Desktop (>= 768px) */
@media (min-width: 768px) {
    .hd-home-search {
        max-width: 900px !important;
    }

    .hd-advanced-drawer-card {
        padding: 14px 12px !important;
    }

    .hd-advanced-fields-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    .hd-advanced-fields-row>[class*="col-"]:not(.hd-col-actions) {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .hd-advanced-fields-row[data-category="residential"] .hd-field-plot,
    .hd-advanced-fields-row[data-category="plot"] .hd-field-residential {
        display: none !important;
    }

    .hd-advanced-fields-row[data-category="residential"] .hd-field-residential,
    .hd-advanced-fields-row[data-category="plot"] .hd-field-plot,
    .hd-advanced-fields-row .hd-col-areas,
    .hd-advanced-fields-row .hd-col-budget {
        display: block !important;
    }

    .hd-advanced-fields-row>.hd-col-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 0 0 2px !important;
        padding: 0 !important;
        align-items: center !important;
    }

    .hd-drawer-actions-wrap {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .hd-advanced-fields-row .form-group {
        margin: 0 !important;
    }

    .hd-advanced-drawer-inner .form-control:not(.bootstrap-select),
    .hd-advanced-drawer-inner input.form-control,
    .hd-advanced-drawer-inner .bootstrap-select>.dropdown-toggle,
    .hd-budget-combobox-wrap .hd-budget-input,
    .hd-btn-drawer-search,
    .hd-btn-drawer-clear {
        height: 38px !important;
        line-height: 36px !important;
    }

    .hd-btn-drawer-search,
    .hd-btn-drawer-clear {
        width: 38px !important;
        min-width: 38px !important;
        border-radius: 6px !important;
    }

    .hd-advanced-drawer-inner .form-control:not(.bootstrap-select),
    .hd-advanced-drawer-inner input.form-control,
    .hd-advanced-drawer-inner .bootstrap-select>.dropdown-toggle .filter-option {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 13px !important;
    }

    .hd-advanced-drawer-inner .bootstrap-select,
    .hd-advanced-drawer-inner .bootstrap-select.form-control,
    .hd-advanced-drawer-inner div.bootstrap-select {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        height: auto !important;
        border-radius: 0 !important;
    }

    /* Proportionate widths: give RERA Possession more space and trim unused space in Status */
    .hd-advanced-fields-row>.hd-col-status {
        flex: 0.85 1 0 !important;
    }

    .hd-advanced-fields-row>.hd-col-possession {
        flex: 1.25 1 0 !important;
    }

    /* Clean RERA Possession date picker with sleek calendar icon and anti-overlap padding */
    .hd-advanced-drawer-inner input.hd-possession-date-picker,
    .hd-advanced-drawer-inner input[name="rera-possession"] {
        padding-left: 8px !important;
        padding-right: 28px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 8px center !important;
        background-size: 14px 14px !important;
        font-size: 12.5px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        cursor: pointer !important;
    }

    .hd-advanced-drawer-inner input.hd-possession-date-picker::placeholder,
    .hd-advanced-drawer-inner input[name="rera-possession"]::placeholder {
        font-size: 12.5px !important;
        color: #64748b !important;
        opacity: 0.9 !important;
    }
}

/* Action buttons styling */
.hd-btn-drawer-search {
    background: #D9B34B !important;
    border: 1px solid #D9B34B !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(217, 179, 75, 0.35) !important;
}

.hd-btn-drawer-search:hover {
    background: #C49E38 !important;
    border-color: #C49E38 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(217, 179, 75, 0.45) !important;
    transform: translateY(-1px);
}

.hd-btn-drawer-search:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(217, 179, 75, 0.3) !important;
}

.hd-btn-drawer-clear {
    background: #ffffff !important;
    border: 1.5px solid #dce0e0 !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.hd-btn-drawer-clear:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px);
}

.hd-btn-drawer-clear:active {
    background: #f1f5f9 !important;
    transform: translateY(0);
}

.hd-btn-drawer-search svg,
.hd-btn-drawer-clear svg {
    display: block !important;
    margin: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 767px) {
    .hd-col-actions {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-top: 6px !important;
        margin-bottom: 2px !important;
        padding: 0 !important;
    }

    .hd-drawer-actions-wrap {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .hd-btn-drawer-search,
    .hd-btn-drawer-clear {
        height: 38px !important;
        width: 44px !important;
        min-width: 44px !important;
        border-radius: 8px !important;
    }
}

/* Keyword input clear button */
.hd-keyword-input-wrap {
    position: relative !important;
}

.hd-search-input {
    padding-right: 32px !important;
}

.hd-keyword-clear-btn {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #e2e8f0 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    z-index: 6 !important;
}

.hd-keyword-clear-btn:hover {
    background: #cbd5e1 !important;
    color: #0f172a !important;
}

.hd-keyword-clear-btn.is-visible {
    display: inline-flex !important;
}

@media (max-width: 767px) {
    .hd-keyword-clear-btn {
        right: 8px !important;
        width: 18px !important;
        height: 18px !important;
    }
}

/* Typography Dropdown Layout: Actions Box (order 1), Search Box (order 2), Inner Options (order 3) */
.bootstrap-select:not(.show):not(.open):has(select[name="typography[]"])>.dropdown-menu:not(.show),
.bootstrap-select.hd-select-typography:not(.show):not(.open)>.dropdown-menu:not(.show) {
    display: none !important;
}

.bootstrap-select.show:has(select[name="typography[]"])>.dropdown-menu,
.bootstrap-select.open:has(select[name="typography[]"])>.dropdown-menu,
.bootstrap-select:has(select[name="typography[]"])>.dropdown-menu.show,
.bootstrap-select:not(.show):not(.open):has(select[name="typography[]"])>.dropdown-menu:not(.show),
.bootstrap-select.hd-select-typography:not(.show):not(.open)>.dropdown-menu:not(.show) {
    display: none !important;
}

.bootstrap-select.show:has(select[name="typography[]"])>.dropdown-menu,
.bootstrap-select.open:has(select[name="typography[]"])>.dropdown-menu,
.bootstrap-select:has(select[name="typography[]"])>.dropdown-menu.show,
.bootstrap-select.hd-select-typography.show>.dropdown-menu,
.bootstrap-select.hd-select-typography.open>.dropdown-menu,
.bootstrap-select.hd-select-typography>.dropdown-menu.show {
    display: flex !important;
    flex-direction: column !important;
    min-width: 220px !important;
    padding-top: 0 !important;
    overflow: hidden !important;
}

.bootstrap-select.hd-select-typography .popover-header,
.bootstrap-select.hd-select-typography .popover-title,
.bootstrap-select.hd-select-typography .hd-dropdown-header,
.bootstrap-select:has(select[name="typography[]"]) .popover-header,
.bootstrap-select:has(select[name="typography[]"]) .popover-title,
.bootstrap-select:has(select[name="typography[]"]) .hd-dropdown-header {
    order: 0 !important;
    flex-shrink: 0 !important;
}

.bootstrap-select.hd-select-typography .bs-actionsbox,
.bootstrap-select:has(select[name="typography[]"]) .bs-actionsbox {
    order: 1 !important;
    flex-shrink: 0 !important;
    padding: 6px 10px 4px 10px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    position: static !important;
}

.bootstrap-select.hd-select-typography .bs-searchbox,
.bootstrap-select:has(select[name="typography[]"]) .bs-searchbox {
    order: 2 !important;
    flex-shrink: 0 !important;
    position: static !important;
}

.bootstrap-select.hd-select-typography .inner,
.bootstrap-select:has(select[name="typography[]"]) .inner {
    order: 3 !important;
    flex: 0 0 152px !important;
    height: 152px !important;
    min-height: 152px !important;
    max-height: 152px !important;
    overflow-y: auto !important;
}

.bootstrap-select.hd-select-typography .bs-searchbox input,
.bootstrap-select.hd-select-typography .bs-searchbox .form-control,
.bootstrap-select:has(select[name="typography[]"]) .bs-searchbox input,
.bootstrap-select:has(select[name="typography[]"]) .bs-searchbox .form-control {
    height: 32px !important;
    line-height: 32px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    border: 1px solid #dce0e6 !important;
    padding: 0 10px 0 28px !important;
    background-color: #f8fafc !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 8px center !important;
    color: #1a202c !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.bootstrap-select.hd-select-typography .bs-searchbox input:focus,
.bootstrap-select.hd-select-typography .bs-searchbox .form-control:focus,
.bootstrap-select:has(select[name="typography[]"]) .bs-searchbox input:focus,
.bootstrap-select:has(select[name="typography[]"]) .bs-searchbox .form-control:focus {
    border-color: #004274 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(0, 66, 116, 0.1) !important;
}

@media (max-width: 767px) {

    .bootstrap-select.hd-select-typography .bs-searchbox input,
    .bootstrap-select.hd-select-typography .bs-searchbox .form-control,
    .bootstrap-select:has(select[name="typography[]"]) .bs-searchbox input,
    .bootstrap-select:has(select[name="typography[]"]) .bs-searchbox .form-control {
        font-size: 16px !important;
        height: 36px !important;
        line-height: 36px !important;
    }
}

/* Editable Budget Combobox */
.hd-budget-combobox-wrap {
    position: relative !important;
    width: 100% !important;
}

.hd-budget-combobox-wrap .hd-budget-input {
    width: 100% !important;
    padding-right: 32px !important;
    background-color: #ffffff !important;
    border: 1px solid #dce0e6 !important;
    color: #222222 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    height: 42px !important;
    line-height: 40px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.hd-budget-combobox-wrap .hd-budget-input:focus {
    border-color: #004274 !important;
    box-shadow: 0 0 0 2px rgba(0, 66, 116, 0.12) !important;
    outline: none !important;
}

.hd-budget-combobox-wrap .hd-budget-toggle-btn {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 34px !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #64748b !important;
    padding: 0 !important;
    z-index: 2 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.hd-budget-combobox-wrap .hd-budget-toggle-btn:hover {
    color: #004274 !important;
}

.hd-budget-combobox-wrap.is-open .hd-budget-toggle-btn {
    transform: rotate(180deg) !important;
    color: #004274 !important;
}

.hd-budget-dropdown-menu {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    width: 220px !important;
    min-width: 220px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    z-index: 100090 !important;
    display: none !important;
    box-sizing: border-box !important;
}

.hd-budget-combobox-wrap.is-open .hd-budget-dropdown-menu {
    display: block !important;
}

.hd-budget-inner {
    order: 3 !important;
    flex: 0 0 152px !important;
    height: 152px !important;
    min-height: 152px !important;
    max-height: 152px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.hd-budget-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hd-type-dropdown-menu {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
}

.hd-type-inner {
    max-height: 220px !important;
    overflow-y: auto !important;
    padding: 6px !important;
}

body.home .hd-home-search .hd-budget-dropdown-menu {
    top: auto !important;
    bottom: calc(100% + 4px) !important;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.14), 0 -2px 6px rgba(0, 0, 0, 0.04) !important;
}

.hd-inner-search-bar .hd-budget-dropdown-menu,
body:not(.home) .hd-budget-dropdown-menu {
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16), 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

.hd-budget-item {
    padding: 0 16px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    user-select: none !important;
}

.hd-budget-item:hover {
    background-color: rgba(0, 174, 255, 0.1) !important;
    color: #004274 !important;
}

.hd-budget-item.is-selected {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    font-weight: 600 !important;
}

.hd-col-budget.has-budget-open,
.hd-col-budget:has(.hd-budget-combobox-wrap.is-open) {
    position: relative !important;
    z-index: 100095 !important;
}

.hd-budget-combobox-wrap.is-open {
    position: relative !important;
    z-index: 100096 !important;
}

.hd-budget-combobox-wrap.is-open .hd-budget-dropdown-menu {
    display: block !important;
    z-index: 100100 !important;
}

@media (max-width: 767px) {

    /* On mobile, open budget dropdown UPWARD cleanly with full elevated z-index so nothing overlaps it */
    body.home .hd-home-search .hd-budget-dropdown-menu,
    .hd-home-search .hd-budget-dropdown-menu,
    .hd-advanced-drawer-inner .hd-budget-dropdown-menu,
    .hd-advanced-search-drawer .hd-budget-dropdown-menu {
        top: auto !important;
        bottom: calc(100% + 4px) !important;
        left: auto !important;
        
        right: 0 !important;
        width: 220px !important;
        min-width: 180px !important;
        max-width: calc(100vw - 32px) !important;
        box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.16), 0 -2px 6px rgba(0, 0, 0, 0.05) !important;
        z-index: 100100 !important;
    }

    .hd-budget-combobox-wrap .hd-budget-input {
        height: 38px !important;
        line-height: 36px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
    }

    .hd-budget-item {
        font-size: 14px !important;
        padding: 0 14px !important;
    }
}

/* ==========================================================================
   BOOTSTRAP-SELECT MENUS SHOW / HIDE & FLEX COLUMN LAYOUT
   ========================================================================== */
/* Hidden when closed: target .dropdown-menu when it lacks .show and .open */
.bootstrap-select>.dropdown-menu:not(.show):not(.open),
.bootstrap-select select~.dropdown-menu:not(.show):not(.open) {
    display: none !important;
}

/* Open bootstrap-select menus: clean flex column whether .show is on .dropdown-menu (BS4/5) or .bootstrap-select (BS3) */
.bootstrap-select>.dropdown-menu.show,
.bootstrap-select>.dropdown-menu.open,
.bootstrap-select.show>.dropdown-menu,
.bootstrap-select.open>.dropdown-menu,
.bootstrap-select.show select~.dropdown-menu,
.bootstrap-select.open select~.dropdown-menu {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.bootstrap-select>.dropdown-menu {
    padding: 0 !important;
    overflow: hidden !important;
}

/* Uniform Header for ALL dropdowns: 40px fixed */
.bootstrap-select .popover-header,
.bootstrap-select .popover-title,
.bootstrap-select .hd-dropdown-header,
.bootstrap-select .hd-areas-header,
.hd-budget-dropdown-menu .hd-dropdown-header,
.hd-type-dropdown-menu .hd-dropdown-header {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 36px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    position: relative !important;
    top: auto !important;
    z-index: 105 !important;
    box-sizing: border-box !important;
    user-select: none !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    order: 0 !important;
}

.bootstrap-select .popover-header .hd-header-title,
.bootstrap-select .popover-title .hd-header-title,
.bootstrap-select .hd-dropdown-header .hd-header-title,
.bootstrap-select .hd-areas-header .hd-header-title,
.hd-budget-dropdown-menu .hd-header-title,
.hd-type-dropdown-menu .hd-header-title {
    display: inline-block !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    line-height: 40px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.bootstrap-select .popover-header .close,
.bootstrap-select .popover-title .close,
.bootstrap-select .hd-dropdown-header .close,
.bootstrap-select .hd-areas-header .close,
.hd-budget-dropdown-menu .close,
.hd-type-dropdown-menu .close,
.hd-dropdown-close-btn,
.hd-areas-close-btn,
.hd-budget-close-btn,
.hd-type-close-btn {
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #64748b !important;
    padding: 0 4px !important;
    margin: 0 !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
    box-shadow: none !important;
    outline: none !important;
    transition: opacity 0.15s ease, color 0.15s ease !important;
    z-index: 10 !important;
}

.bootstrap-select .popover-header .close:hover,
.bootstrap-select .popover-title .close:hover,
.bootstrap-select .hd-dropdown-header .close:hover,
.bootstrap-select .hd-areas-header .close:hover,
.hd-budget-dropdown-menu .close:hover,
.hd-type-dropdown-menu .close:hover,
.hd-dropdown-close-btn:hover,
.hd-areas-close-btn:hover,
.hd-budget-close-btn:hover,
.hd-type-close-btn:hover {
    opacity: 1 !important;
    color: #0f172a !important;
}

/* Actions box (Select All / Deselect All): 40px fixed */
.hd-advanced-drawer-inner .bootstrap-select .bs-actionsbox,
.hd-advanced-search-drawer .bootstrap-select .bs-actionsbox,
.hd-inner-search-bar .bootstrap-select .bs-actionsbox,
.bootstrap-select .bs-actionsbox {
    order: 1 !important;
    flex-shrink: 0 !important;
    position: static !important;
    top: auto !important;
    z-index: 104 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
}

.hd-advanced-drawer-inner .bootstrap-select .bs-actionsbox .btn-group,
.hd-advanced-search-drawer .bootstrap-select .bs-actionsbox .btn-group,
.hd-inner-search-bar .bootstrap-select .bs-actionsbox .btn-group,
.bootstrap-select .bs-actionsbox .btn-group {
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
    height: 100% !important;
    align-items: center !important;
}

.hd-advanced-drawer-inner .bootstrap-select .bs-actionsbox .btn,
.hd-advanced-search-drawer .bootstrap-select .bs-actionsbox .btn,
.hd-inner-search-bar .bootstrap-select .bs-actionsbox .btn,
.bootstrap-select .bs-actionsbox .btn {
    flex: 1 1 auto !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    border-radius: 4px !important;
    height: 28px !important;
    line-height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Search box: 40px fixed with flex layout for search input + deselect button */
.bootstrap-select .bs-searchbox {
    order: 2 !important;
    flex-shrink: 0 !important;
    position: static !important;
    top: auto !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 4px 10px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.bootstrap-select .bs-searchbox input.form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: 32px !important;
    min-height: 32px !important;
    line-height: 30px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    border-radius: 4px !important;
    border: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
}

/* Options Container: Exactly 152px (4 options * 38px), remaining scrollable across ALL dropdowns */
.hd-advanced-drawer-inner .bootstrap-select .inner,
.hd-advanced-search-drawer .bootstrap-select .inner,
.hd-inner-search-bar .bootstrap-select .inner,
.bootstrap-select .inner,
.bootstrap-select .inner.show,
.bootstrap-select div.inner,
.hd-budget-inner,
.hd-type-inner {
    order: 3 !important;
    flex: 0 0 152px !important;
    height: 152px !important;
    min-height: 152px !important;
    max-height: 152px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    visibility: visible !important;
}

/* Reset inner ul so options don't scroll inside a double nested scroll container */
.bootstrap-select .inner>ul.dropdown-menu.inner,
.bootstrap-select .inner ul,
/* Slim, clean scrollbars across all dropdown lists */
.inner::-webkit-scrollbar,
.hd-budget-inner::-webkit-scrollbar,
.hd-type-inner::-webkit-scrollbar {
    width: 5px !important;
}

.inner::-webkit-scrollbar-track,
.hd-budget-inner::-webkit-scrollbar-track,
.hd-type-inner::-webkit-scrollbar-track {
    background: #f8fafc !important;
}

.inner::-webkit-scrollbar-thumb,
.hd-budget-inner::-webkit-scrollbar-thumb,
.hd-type-inner::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px !important;
}

.inner::-webkit-scrollbar-thumb:hover,
.hd-budget-inner::-webkit-scrollbar-thumb:hover,
.hd-type-inner::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

.bootstrap-select ul.dropdown-menu.inner,
.hd-budget-list {
    position: static !important;
    float: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    list-style: none !important;
}

/* Each Option: Exactly 38px fixed height across ALL dropdowns */
.bootstrap-select .dropdown-menu li,
.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-item,
.hd-budget-item {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 38px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.hd-type-item {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 38px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

/* Hide Select All / Deselect All buttons in all drawer dropdowns */
.hd-advanced-search-drawer .bootstrap-select .bs-actionsbox,
.hd-advanced-drawer-inner .bootstrap-select .bs-actionsbox {
    display: none !important;
}

/* =========================================================
   ADVANCED DRAWER: visible dropdown chevron on selectpickers
   (All Areas, Typography, Status, Type, Unit)
   Higher specificity than the earlier rules that hid ::after.
========================================================= */
body .hd-advanced-search-drawer .hd-advanced-drawer-inner .advanced-search-module .bootstrap-select>button.dropdown-toggle::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    width: 10px !important;
    height: 10px !important;
    margin: -5px 0 0 0 !important;
    border: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 10px 10px !important;
    pointer-events: none !important;
    transition: transform 0.2s ease !important;
}

body .hd-advanced-search-drawer .hd-advanced-drawer-inner .advanced-search-module .bootstrap-select.show>button.dropdown-toggle::after,
body .hd-advanced-search-drawer .hd-advanced-drawer-inner .advanced-search-module .bootstrap-select.open>button.dropdown-toggle::after {
    transform: rotate(180deg) !important;
}

/* Keep selected text clear of the chevron */
body .hd-advanced-search-drawer .hd-advanced-drawer-inner .advanced-search-module .bootstrap-select>button.dropdown-toggle {
    position: relative !important;
    padding-right: 26px !important;
}

/* =========================================================
   Dropdown search box row: [search input] [deselect-all icon]
========================================================= */
body .hd-advanced-drawer-inner .bootstrap-select .bs-searchbox,
body .hd-advanced-search-drawer .bootstrap-select .bs-searchbox,
body .bootstrap-select .bs-searchbox {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

body .hd-advanced-drawer-inner .bootstrap-select .bs-searchbox input.form-control,
body .hd-advanced-search-drawer .bootstrap-select .bs-searchbox input.form-control,
body .bootstrap-select .bs-searchbox input.form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}

.bootstrap-select .bs-searchbox .hd-ss-deselect-btn,
.hd-ss-deselect-btn,
.hd-ss-clear-btn {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid #dce0e6 !important;
    border-radius: 4px !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.bootstrap-select .bs-searchbox .hd-ss-deselect-btn:hover,
.hd-ss-deselect-btn:hover,
.hd-ss-clear-btn:hover {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
}

.bootstrap-select .bs-searchbox .hd-ss-deselect-btn svg,
.hd-ss-deselect-btn svg,
.hd-ss-clear-btn svg {
    pointer-events: none !important;
    display: block !important;
}