/* Custom Colors - DProperty Green Theme */
:root {
    --primary-color: #006A50;
    --primary-dark: #157a47;
    --primary-light: #2db86a;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --info-color: #17a2b8;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
}

/* General Styles */
body {
    padding-top: 76px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    font-size: 14px;
}

/* Transparent Navbar Styles */
#mainNavbar {
    background: #ffffff !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /*transition: all 0.3s ease;*/
    padding: 0.4rem 0;
}

#navbarNav>ul>li>a {
    color: #333333 !important;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 8px 20px;
    margin: 0 5px;
    border-radius: 8px;
}

#navbarNav>ul>li>a:hover {
    color: var(--primary-color) !important;
    background-color: rgba(0, 106, 80, 0.05);
    border: none;
}

#navbarNav>ul>li:hover {
    border: none;
}

#navbarNav>ul>li>a.active {
    color: var(--primary-color) !important;
    background-color: rgba(0, 106, 80, 0.1);
    border: none;
}

#mainNavbar.bg-primary {
    background: #ffffff !important;
    backdrop-filter: none;
}

.headerLogo {
    height: 40px;
}

#mobileNavToggle .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280,0,0,0.7%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Optional: Make the button border and background white or transparent */
#mobileNavToggle {
    border-color: rgba(0, 0, 0, 0.1);
    background-color: transparent;
}

/* Hero Carousel Styles */
.hero-carousel-section {
    position: relative;
    margin-top: 0;
}

@media (min-width: 992px) {
    .hero-carousel-section {
        margin-top: -14px;
    }
}

.hero-slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 45vh;
    position: relative;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(29, 33, 43, 0.38) 0%, rgba(16, 20, 23, 0.8) 100%);
    z-index: 1;
}

.hero-content {
    position: absolute;
    z-index: 2;
    color: white;
    bottom: 16%;
    padding: 0 30px;
    text-align: left;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    opacity: 0.9;
}

/* Animation for carousel content */
.animate-slide-up {
    animation: slideUp 1s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

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

.carousel-item.active .animate-slide-up {
    animation: slideUp 1s ease-out;
}

/* Compact Search Section Styles */
.search-section-wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 10;
}

/* Mid-desktop guard: shorter hero windows could let the vertically-centered
   search box extend above the hero and overlap the fixed nav. Anchor to the
   bottom of the hero in that range so the top edge always stays inside. */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero-slide {
        min-height: 60vh;
    }
    .search-section-wrapper {
        top: auto;
        bottom: 30px;
        transform: none;
    }
}

.search-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}

.search-tabs-outer {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 11;
}

.search-tabs {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.4);
    padding: 6px;
    border-radius: 16px 16px 0 0;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: none;
}

.search-tab {
    padding: 8px 30px;
    border: none;
    font-weight: 700;
    font-size: 0.9rem;
    color: #444;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px 12px 0 0;
    text-transform: uppercase;
    background-color: transparent;
    cursor: pointer;
    letter-spacing: 0.5px;
}

.search-tab.active {
    background-color: white;
    color: var(--primary-color);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.08);
}

/* Premium Search Tabs */
.search-tabs-outer {
    margin-bottom: -1px;
    display: flex;
    justify-content: center;
}

.search-tabs {
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
}

.search-tab {
    padding: 14px 30px;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 0.9rem;
    color: #555;
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 12px 12px 0 0;
}

.search-tab.active {
    background: white;
    color: var(--primary-color);
}

.search-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.5);
    color: #111;
}

/* Compact Search Box */
.search-box {
    background: white;
    padding: 0;
    border-radius: 0 24px 24px 24px;
    border: none;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.18) !important;
    overflow: visible;
    /* Allow dropdowns to overflow */
}

.compact-search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto;
    align-items: center;
}

.search-card {
    padding: 12px 18px;
    border-right: 1px solid #f2f2f2;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 75px;
    position: relative;
}

.search-card:first-child {
    border-radius: 0 0 0 24px;
}

.search-card:hover {
    background-color: #fbfbfb;
}

.search-card .card-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    pointer-events: none;
}

.search-card .card-value {
    font-size: 1rem;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.search-card .card-sub-label {
    display: none !important;
}

/* Action Button Container */
.search-action-box {
    padding: 12px 18px;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 0 24px 24px 0;
}

.btn-search-compact {
    background-color: var(--primary-color);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 15px 30px rgba(0, 106, 80, 0.25);
}

.btn-search-compact:hover {
    background-color: var(--primary-dark);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 18px 35px rgba(0, 106, 80, 0.35);
}

/* Select2 Custom Handling for Cards */
select.select2-property-type,
select.select2-location {
    opacity: 0 !important;
    position: absolute !important;
    z-index: -1 !important;
    height: 54px !important;
}

.search-card .search-field {
    width: 100%;
    margin-top: -2px;
}

.search-card .select2-container--default .select2-selection--single,
.filter-card .select2-container--default .select2-selection--single {
    border: 2px solid #006A50 !important;
    /* Force Premium Green Border */
    background: #ffffff !important;
    padding: 12px 18px !important;
    height: 54px !important;
    display: flex !important;
    align-items: center;
    border-radius: 8px !important;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 106, 80, 0.1) !important;
}

.search-card .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #555 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

.search-card .select2-container--default .select2-selection--single .select2-selection__rendered,
.filter-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    padding: 0 !important;
    line-height: normal !important;
    white-space: normal !important;
}

.search-card .select2-container--default .select2-selection--single .select2-selection__arrow,
.filter-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 54px !important;
    top: 0 !important;
    right: 12px !important;
}

.search-card .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #777 transparent transparent transparent !important;
    border-width: 6px 5px 0 5px !important;
}

.search-card .select2-container--default.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent #777 transparent !important;
    border-width: 0 5px 6px 5px !important;
}

/* Dropdown List Styling - Green Header Style */
.select2-container--default .select2-results__option {
    padding: 12px 20px;
    font-size: 0.95rem;
    color: #555;
}

.select2-container--default .select2-results__option--selectable {
    background-color: white;
}

/* Scoped Dropdown List Styling - Green Header Style */
.premium-search-dropdown .select2-results__options>li:first-child,
.premium-search-dropdown .select2-results__options>.select2-results__option--selectable:first-child,
.premium-search-dropdown .select2-results__options>.select2-results__option:first-child,
.premium-search-dropdown .select2-results__option:first-child {
    background-color: #006A50 !important;
    color: white !important;
    font-weight: 700 !important;
    padding: 14px 20px !important;
    border-radius: 0;
}

.premium-search-dropdown.select2-container--default .select2-results__option--highlighted[aria-selected],
.premium-search-dropdown.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #f0f7f5 !important;
    color: #006A50 !important;
}

/* Ensure the first item (Header) stays green even when hovered/highlighted */
.premium-search-dropdown .select2-results__options>li:first-child.select2-results__option--highlighted,
.premium-search-dropdown .select2-results__options>.select2-results__option:first-child.select2-results__option--highlighted,
.premium-search-dropdown .select2-results__option:first-child.select2-results__option--highlighted {
    background-color: #005a44 !important;
    color: white !important;
}

.select2-dropdown {
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden;
    z-index: 99999 !important;
}

.btn-selection-action {
    background: transparent;
    border: none;
    padding: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #666;
    transition: all 0.2s ease;
}

.btn-selection-action:hover {
    color: var(--primary-color);
    background: #f8f9fa;
}

.action-divider {
    width: 1px;
    height: 24px;
    background-color: #eee;
}

.type-item {
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.type-item:hover {
    background-color: #f8f9fa;
}

.type-item .check-icon {
    display: none;
    color: var(--primary-color);
    font-size: 0.9rem;
}

.type-item.selected {
    color: var(--primary-color);
    font-weight: 600;
}

.type-item.selected .check-icon {
    display: block;
}

.type-item.parent {
    font-weight: 600;
    color: #333;
}

.type-item.child {
    padding-left: 35px;
    color: #666;
}

/* Multi-select Pills for Select2 */
.search-card .select2-container--default .select2-selection--multiple {
    border: 2px solid #006A50 !important;
    background: #ffffff !important;
    padding: 8px 12px !important;
    min-height: 54px !important;
    display: flex !important;
    align-items: center;
    border-radius: 8px !important;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 106, 80, 0.1) !important;
}

.search-card .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 5px;
    padding: 0 !important;
}

.search-card .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #006A50 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    margin: 0 !important;
    font-size: 0.75rem !important;
}

.search-card .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
    margin-right: 5px !important;
}

.search-card .select2-container--default .select2-selection--single::after {
    display: none !important;
}

/* Premium Select2 Dropdown Overrides */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.select2-dropdown {
    border-radius: 0 0 16px 16px !important;
    border: 1px solid #006A50 !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15) !important;
    margin-top: 0px !important;
    overflow: hidden !important;
    animation: select2PopIn 0.2s ease-out;
    z-index: 999999 !important;
    border-bottom: 4px solid #006A50 !important;
}

.premium-search-dropdown {
    min-width: 300px !important;
}

/* Constrain the property-type / location dropdown so a long list scrolls
   instead of pushing the dropdown off-screen. Tuned to ~6 rows. */
.premium-search-dropdown .select2-results__options {
    max-height: 260px !important;
    overflow-y: auto !important;
}

/* Mobile Responsiveness for Premium Search */
@media (max-width: 991px) {
    /* MOBILE LAYOUT REWRITE.
       Previously the search box was absolutely-positioned over the hero and
       we kept growing the hero's min-height to "contain" it. That approach
       broke on every device because the search box height depends on the
       viewport width (2-col vs 1-col grid), so it never reliably fit any
       given hero height. The fix: on mobile we put the search box into
       NORMAL document flow. Hero becomes a short banner, search box flows
       below it, Featured Properties flows below the search box. Nothing
       overlaps anything because nothing is absolutely positioned. */

    .hero-carousel-section {
        overflow: visible;
        padding-bottom: 0;
    }

    .hero-slide {
        /* Hero fills the viewport on every phone so the carousel image is
           the dominant top-of-page visual. Combined with the search wrapper's
           -402px pull below, this lands the search tabs partway down the
           hero — same proportional effect on a 568px iPhone SE as on a
           932px iPhone 14 Pro Max. svh ducks iOS Safari's URL-bar resize
           jank; vh is the fallback for older Safari. */
        min-height: 100vh;
        min-height: 100svh;
    }

    /* Drop the hero's dark overlay z-index on mobile so the hero image
       reads cleanly under the search content. The overlay still paints but
       no longer creates its own stacking context. */
    .hero-overlay {
        z-index: auto !important;
    }

    /* Bootstrap's carousel dots (.carousel-indicators) sit absolute-bottom
       of the carousel and were colliding with the Search button on phones.
       They're not useful on a mobile-touch slider anyway. */
    .carousel-indicators {
        display: none !important;
    }

    .search-box {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    }

    .search-section-wrapper {
        position: static !important;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        transform: none;
        padding: 0 12px;
        /* The search content lives ON TOP of the hero — the wrapper is
           pulled up 402px from its natural position (right after the hero)
           so the FOR RENT / FOR SELL tabs land partway down the hero image.
           Same value cascades to the 850px and 576px breakpoints below, so
           "search overlaps hero" looks identical on every phone size while
           still being in normal document flow (no Featured-Properties
           collisions possible). */
        margin-top: -402px;
        margin-bottom: 24px;
        z-index: 5;
    }

    .search-container {
        padding: 0;
    }

    .search-box {
        border-radius: 0 0 16px 16px;
    }

    .compact-search-grid {
        display: flex !important;
        flex-direction: column !important;
    }

    .search-card {
        padding: 10px 14px !important;
        border-right: none !important;
        border-bottom: 1px solid #eee !important;
        width: 100% !important;
        min-height: auto !important;
    }

    .search-card:last-child {
        border-bottom: none !important;
    }

    .search-card .card-label {
        font-size: 0.62rem !important;
        margin-bottom: 2px;
    }

    .search-card .card-sub-label {
        font-size: 0.65rem !important;
        margin-top: 2px;
    }

    .search-action-box {
        padding: 12px !important;
        width: 100% !important;
        background: white !important;
        border-radius: 0 0 24px 24px !important;
        justify-content: center !important;
    }

    .btn-search-compact {
        width: 100% !important;
        height: 44px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        font-size: 0.95rem !important;
    }

    .search-tabs-outer {
        justify-content: center !important;
        display: flex !important;
    }

    .search-tabs {
        display: flex !important;
        background: rgba(255, 255, 255, 0.98) !important;
        margin-top: 8px !important;
        border-radius: 10px 10px 0 0 !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05) !important;
        z-index: 10 !important;
        position: relative !important;
        width: fit-content !important;
    }

    .search-tab {
        padding: 7px 16px !important;
        font-size: 0.75rem !important;
        text-align: center !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px !important;
    }

    .premium-search-dropdown {
        min-width: 100% !important;
        width: 100% !important;
        border-radius: 12px !important;
        z-index: 999999 !important;
        display: block !important;
        background: white !important;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3) !important;
    }

    .select2-container--open .select2-dropdown {
        z-index: 999999 !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }

    /* Custom Dropdowns Responsive Fix */
    .dropdown-content-custom {
        width: calc(100% + 48px) !important;
        left: -24px !important;
        border-radius: 0 0 16px 16px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
        top: 100% !important;
    }

    .dropdown-toggle-custom {
        font-size: 0.9rem !important;
    }

    .dropdown-toggle-custom.picker-toggle {
        height: 42px !important;
        padding: 8px 12px !important;
    }

    .card-value {
        font-size: 0.9rem !important;
    }
}

.select2-search--dropdown {
    display: none !important;
}

@keyframes select2PopIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }

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

.select2-results__options {
    max-height: 400px !important;
    overflow-y: auto !important;
}

.select2-results__option {
    padding: 12px 20px !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
    color: #444 !important;
    display: flex !important;
    align-items: center !important;
}

.type-item {
    font-size: 13px !important;
}

.select2-results__option[aria-selected="true"] {
    background-color: #f0f7f5 !important;
    color: var(--primary-color) !important;
    font-weight: 600 !important;
}

.select2-results__group {
    padding: 10px 20px !important;
    background-color: #fafafa !important;
    font-weight: 700 !important;
    color: #888 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px !important;
}

.select2-results__option--disabled {
    opacity: 0.6 !important;
    cursor: default !important;
}

/* Custom Dropdowns */
.custom-dropdown {
    position: relative;
    width: 100%;
}

.dropdown-toggle-custom {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    line-height: 1.2;
    justify-content: space-between;
}

.dropdown-toggle-custom.picker-toggle {
    border: 2px solid #006A50 !important;
    background: #ffffff !important;
    padding: 12px 18px !important;
    height: 54px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 106, 80, 0.1) !important;
    width: 100%;
}

.dropdown-toggle-custom.picker-toggle .toggle-text {
    flex-grow: 1;
    text-align: left;
    color: #555;
    font-weight: 500;
}

.dropdown-toggle-custom.picker-toggle i {
    color: #777;
}

.dropdown-content-custom {
    position: absolute;
    top: calc(100% + 15px);
    left: -20px;
    width: 340px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: none;
    overflow: hidden;
    animation: slideInDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: 5px;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

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

.custom-dropdown.active .dropdown-content-custom {
    display: block;
}

.dropdown-header-custom {
    /* background-color: var(--primary-color); */
    color: white;
    padding: 2px 8px;
    font-weight: 700;
    font-size: 1rem;
}

.dropdown-body-custom {
    padding: 12px 12px;
    font-size: 12px;
}

.dropdown-footer-custom {
    padding: 13px 17px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Bed Options */
.bed-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bed-btn {
    width: 45px;
    height: 45px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #444;
}

.bed-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: #f0f7f5;
}

.bed-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(0, 106, 80, 0.2);
}

/* Range Inputs (Area/Price) */
.range-container {
    display: flex;
    gap: 15px;
}

.range-field {
    flex: 1;
}

.range-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-with-prefix {
    display: flex;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    background: #fcfcfc;
    transition: all 0.2s ease;
}

.input-with-prefix:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 106, 80, 0.1);
}

.prefix {
    background: #f5f5f5;
    padding: 10px 12px;
    font-size: 0.75rem;
    color: #888;
    border-right: 1px solid #e0e0e0;
    font-weight: 700;
}

.input-with-prefix input {
    border: none;
    padding: 10px 12px;
    width: 100%;
    font-size: 0.95rem;
    outline: none;
    background: transparent;
    color: #111;
    font-weight: 600;
}

/* Dropdown Footer Buttons */
.btn-clear-dropdown {
    background: #f5f5f5;
    color: #666;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-clear-dropdown:hover {
    background: #e0e0e0;
    color: #333;
}

.btn-apply-dropdown {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 22px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-apply-dropdown:hover {
    background: var(--primary-dark);
    box-shadow: 0 4px 10px rgba(0, 106, 80, 0.2);
}

/* Mobile & Tablet Adjustments */
@media (max-width: 1250px) {
    .compact-search-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .search-card:nth-child(3) {
        border-right: none;
    }

    .search-card:nth-child(n+4) {
        border-top: 1px solid #f2f2f2;
    }

    .search-action-box {
        grid-column: span 3;
        border-radius: 0 0 24px 24px;
        justify-content: center;
    }

    .btn-search-compact {
        width: 100%;
        max-width: 400px;
        height: 60px;
        font-size: 1.2rem;
    }
}

@media (max-width: 850px) {
    /* Search box now flows in document order on mobile (set in the 991px
       block above), so we only need overflow guards for dropdowns to escape
       the search box visually — no positioning or min-height hacks. */
    .hero-carousel-section,
    #heroCarousel,
    .carousel-inner,
    .carousel-item,
    .search-container,
    .search-box {
        overflow: visible !important;
    }

    .compact-search-grid {
        grid-template-columns: 1fr 1fr;
    }

    .search-card {
        border-right: 1px solid #f2f2f2;
        min-height: 64px;
        padding: 8px 14px;
    }

    .search-card:nth-child(even) {
        border-right: none;
    }

    .search-action-box {
        grid-column: span 2;
    }
}

@media (max-width: 576px) {
    /* No positioning/height hacks here — the search box is in normal flow
       (see the 991px block). Only fine-tunes for very small phones live below. */

    .compact-search-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Short / narrow phones (iPhone 6/7/8/SE2/SE3 territory at 375×667).
   The -402px pull from the 991px block lands the search wrapper too close
   to the navbar on these compact viewports, so dial it back to -328px.
   Matched by viewport size (not user-agent), so any phone in this region
   gets the same treatment. */
@media (max-width: 414px) and (max-height: 700px) {
    .search-section-wrapper {
        margin-top: -328px;
    }
}

@media (max-width: 576px) {

    .search-tabs-outer {
        margin-left: 12px;
    }

    .search-tab {
        padding: 6px 14px;
        font-size: 0.72rem;
    }

    .search-card {
        padding: 8px 12px;
        min-height: 56px;
        border-right: none;
    }

    .search-card .card-value,
    .search-card .select2-container--default .select2-selection--single .select2-selection__rendered,
    .dropdown-toggle-custom {
        font-size: 0.85rem !important;
    }

    .search-card .card-label {
        font-size: 0.58rem !important;
        margin-bottom: 1px;
    }

    .search-card .card-sub-label {
        font-size: 0.62rem !important;
        margin-top: 1px;
    }

    .search-action-box {
        grid-column: span 1;
        padding: 10px 12px;
    }

    .btn-search-compact {
        width: 100%;
        height: 42px;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    .btn-search-compact::after {
        content: ' SEARCH';
        margin-left: 6px;
        font-weight: 700;
        font-size: 0.82rem;
    }

    /* Prevent dropdown overflow on mobile */
    .dropdown-content-custom {
        width: 300px;
        left: -10px;
    }

    /* Shift even-indexed dropdowns to align right */
    .search-card:nth-child(even) .dropdown-content-custom {
        left: auto;
        right: -10px;
    }
}

/* Scrollbar Styling */
.select2-results__options::-webkit-scrollbar {
    width: 6px;
}

.select2-results__options::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

.hero-illustration {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Service Card Styles */
.service-card {
    background: white;
    border-radius: 15px;
    padding: 13px 13px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: none;
    height: 100%;
    text-align: center;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.service-image {
    text-align: center;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 10px;
    max-height: 150px;
}

.service-image img {
    transition: transform 0.3s ease;
    width: 100%;
    object-fit: cover;
}

.service-card:hover .service-image img {
    transform: scale(1.05);
}

.service-title {
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.service-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
}

/* Social Media Cards */
.social-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.social-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.social-header {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.95rem;
}

.social-content {
    position: relative;
}

.social-preview {
    position: relative;
    overflow: hidden;
}

.social-preview img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.social-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.social-card:hover .social-overlay {
    opacity: 1;
}

.social-info h6 {
    font-size: 1rem;
}

.social-stats .badge {
    font-size: 0.75rem;
}

/* Testimonial Carousel Styles */
.testimonial-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    margin: 15px 0;
}

.testimonial-text {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto;
}

.testimonial-author img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 3px solid #f8f9fa;
}

.testimonial-author h6 {
    color: #333;
    font-size: 1rem;
}

.testimonial-author p {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary-color) !important;
}

/* Carousel Controls */
#reviewsCarousel .carousel-control-prev,
#reviewsCarousel .carousel-control-next {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
}

#reviewsCarousel .carousel-control-prev {
    left: -20px;
}

#reviewsCarousel .carousel-control-next {
    right: -20px;
}

#reviewsCarousel .carousel-indicators {
    bottom: -40px;
}

#reviewsCarousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-color);
    opacity: 0.5;
    border: none;
}

#reviewsCarousel .carousel-indicators button.active {
    opacity: 1;
}

/* Mobile Navigation Styles */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    transition: right 0.3s ease;
}

.mobile-nav-overlay.active {
    right: 0;
}

.mobile-nav-content {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    max-width: 300px;
    height: 100vh;
    background: #ffffff;
    padding: 0;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #eeeeee;
}

.mobile-nav-close {
    background: #eeeeee;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #333333;
    cursor: pointer;
    transition: background 0.3s ease;
}

.mobile-nav-close:hover {
    background: #dddddd;
}

.mobile-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-menu li {
    border-bottom: 1px solid #f0f0f0;
}

.mobile-nav-menu>li>a {
    color: #333333;
}

.mobile-nav-link {
    display: block;
    padding: 15px 20px;
    color: #333333;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
    background: rgba(0, 106, 80, 0.05);
    color: var(--primary-color);
    padding-left: 25px;
}

/* Responsive Design */
@media (max-width: 991.98px) {
    .navbar-collapse {
        display: none !important;
    }

    body {
        padding-top: 60px;
    }

    /* .hero-carousel-section {
        margin-top: -60px;
    } */
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-slide {
        min-height: 50vh;
    }

    .mobile-nav-content {
        width: 60%;
    }

    .service-card {
        padding: 15px;
    }

    .testimonial-card {
        padding: 20px 15px;
    }

    #reviewsCarousel .carousel-control-prev,
    #reviewsCarousel .carousel-control-next {
        display: none;
    }
}

@media (max-width: 576px) {
    .mobile-nav-content {
        width: 55%;
    }

    .hero-carousel-section {
        margin-top: -1px;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .service-title {
        font-size: 1.1rem;
    }

    .testimonial-text {
        font-size: 0.95rem;
    }
}

/* Section Spacing */
section {
    padding: py-5;
    scroll-margin-top: 70px;
}

/* Update existing styles to use new green color */
.bg-primary {
    background-color: var(--primary-color) !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    padding: 8px 20px;
    font-size: 0.95rem;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    padding: 8px 20px;
    font-size: 0.95rem;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Typography Improvements */
.h2 {
    font-size: 2rem;
}

.lead {
    font-size: 1.1rem;
}

/* Card Improvements */
.card {
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* Back to Top Button */
#backToTop {
    width: 45px;
    height: 45px;
    border: none;
    /*box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);*/
    transition: all 0.3s ease;
}

#backToTop:hover {
    transform: translateY(-2px);
    /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);*/
}

/* Accessibility Improvements */
.btn:focus,
.nav-link:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Performance Optimizations */
* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

.footerBackground {
    background: var(--primary-color);
    color: white;
}

/* ========== Footer Premium Styles ========== */
.footer-heading {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 16px !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
}

.footer-links li a {
    font-size: 0.9rem;
    transition: all 0.3s ease;
    opacity: 0.85;
}

.footer-links li a:hover {
    opacity: 1;
    padding-left: 5px;
}

.footer-links li a i {
    font-size: 0.65rem;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.footer-links li a:hover i {
    opacity: 1;
}

.footer-contact-list li {
    font-size: 0.9rem;
    opacity: 0.9;
}

.footer-contact-icon {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.footer-neighborhoods-list {
    max-height: 200px;
    overflow-y: auto;
    padding-right: 5px;
}

.footer-neighborhoods-list::-webkit-scrollbar {
    width: 3px;
}

.footer-neighborhoods-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.footer-neighborhoods-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.footer-legal-link {
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

.footer-legal-link:hover {
    opacity: 1;
}

.footer-social-icons .btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.footer-social-icons .btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* Mobile Footer Responsive */
@media (max-width: 767.98px) {
    .footerBackground {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .footer-heading {
        font-size: 0.8rem;
        margin-bottom: 12px !important;
    }

    .footer-links li {
        margin-bottom: 6px !important;
    }

    .footer-links li a {
        font-size: 0.82rem;
    }

    .footer-contact-list li {
        font-size: 0.82rem;
        margin-bottom: 8px !important;
    }

    .footer-neighborhoods-list {
        max-height: 160px;
    }

    .footer-social-icons {
        margin-top: 10px !important;
    }

    .footer-social-icons .btn {
        width: 30px;
        height: 30px;
    }
}

/* Service Page Hero */
.service-page-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #fff;
    padding: 40px 0 30px;
    margin-top: -10px;
}

.service-page-hero h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.service-page-hero .breadcrumb {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.service-page-hero .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.7);
}

.service-page-hero .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.9);
}

.service-page-hero .breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}

/* Content Cards for Facebook/YouTube */
.content-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.content-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.content-header {
    padding: 15px 20px;
    font-weight: 600;
}

.content-body {
    padding: 20px;
}

.video-thumbnail {
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.play-button {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.video-thumbnail:hover .play-button {
    opacity: 1;
}

.content-meta {
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
    margin-top: 15px;
}

.content-actions .badge {
    font-size: 0.8rem;
}

/* Property Card Styles */
.property-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: none;
}

.property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

.property-image {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.property-card:hover .property-image img {
    transform: scale(1.05);
}

.property-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.property-title {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
    color: #333;
    min-height: 50px;
}

.property-location {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 15px;
}

.property-features {
    color: #555;
    font-size: 0.9rem;
}

.property-features .feature {
    display: flex;
    align-items: center;
}

.property-features .feature i {
    margin-right: 5px;
    color: var(--primary-color);
}

.property-actions .btn-success {
    background-color: var(--primary-color);
    border-color: #25d366;
}

.property-actions .btn-success:hover {
    background-color: var(--primary-color);
    border-color: #1fba58;
}

.property-actions .btn-light {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.property-actions .btn {
    font-size: 0.9rem;
    padding: 8px 12px;
}


#servicesCarousel {
    position: relative;
    padding: 0 60px;
}

@media (max-width: 991.98px) {
    #servicesCarousel {
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    #servicesCarousel {
        padding: 0 30px;
    }

    .services-control-prev,
    .services-control-next {
        width: 35px;
        height: 35px;
    }

    .services-control-icon {
        font-size: 0.9rem;
    }

    /* Show only 1 service per slide on mobile */
    #servicesCarousel .carousel-item .col-lg-4:nth-child(n + 2) {
        display: none;
    }
}

@media (max-width: 576px) {
    #servicesCarousel {
        padding: 0 20px;
    }
}

/* Ensure equal height for service cards in carousel */
/* Ensure equal height for service cards in carousel */
#servicesCarousel .service-card {
    height: 100%;
    min-height: 400px;
}

#servicesCarousel .service-description {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ========== Scroll Progress Back-to-Top ========== */
.scroll-progress-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 1000;
    width: 56px;
    height: 56px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 4px 14px rgba(0, 106, 80, 0.25));
}

.scroll-progress-btn.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-ring-bg {
    fill: rgba(255, 255, 255, 0.95);
    stroke: #e0e0e0;
    stroke-width: 2.5;
}

.progress-ring-fill {
    fill: none;
    stroke: var(--primary-color, #006A50);
    stroke-width: 4.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.12s ease-out;
    filter: drop-shadow(0 0 4px rgba(0, 106, 80, 0.35));
}

.scroll-arrow {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary-color, #006A50) 0%, var(--primary-light, #2db86a) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    z-index: 1;
    transition: transform 0.25s ease;
}

.scroll-progress-btn:hover .scroll-arrow {
    transform: scale(1.12);
}

.scroll-progress-btn:hover {
    filter: drop-shadow(0 6px 20px rgba(0, 106, 80, 0.4));
}

@media (max-width: 991px) {
    .scroll-progress-btn {
        bottom: 82px;
        right: 16px;
        width: 48px;
        height: 48px;
    }

    .scroll-arrow {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }
}

/* ========== Contact Section Premium Styles ========== */
.section-header-global .header-line {
    width: 60px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 3px;
    margin-top: 15px;
}

.contact-card-premium {
    background: #F9F7F5;
    /* Light cream/gray from ref image */
    padding: 30px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
    transition: all 0.3s ease;
}

.contact-card-premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.contact-icon-box {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.contact-icon-box i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.contact-info-box h5 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: #222;
}

.contact-info-box p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0;
    line-height: 1.5;
}

.contact-map-container {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.inquiry-form-card {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.inquiry-form-card .form-control {
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #eee;
    background: #fcfcfc;
}

.inquiry-form-card .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 106, 80, 0.1);
    background: #fff;
}

.inquiry-form-card .btn-primary {
    padding: 14px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 106, 80, 0.2);
}

/* Mobile Adjustments for Contact */
@media (max-width: 991px) {
    .contact-card-premium {
        padding: 20px;
    }

    .inquiry-form-card {
        padding: 30px 20px;
    }
}

/* Picker Style Dropdown (Houzez style) */
.picker-style {
    width: 100% !important;
    min-width: 280px;
    border-radius: 4px !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #ddd !important;
    top: calc(100% + 5px) !important;
    left: 0 !important;
    padding: 0 !important;
}

.picker-actions {
    display: flex;
    border-bottom: 1px solid #eee;
    background: #fff;
}

.btn-picker-action {
    flex: 1;
    background: white;
    border: none;
    padding: 12px 10px;
    font-size: 0.9rem;
    color: #555;
    font-weight: 500;
    transition: all 0.2s;
    border-right: 1px solid #eee;
}

.btn-picker-action:last-child {
    border-right: none;
}

.btn-picker-action:hover {
    background: #f8f9fa;
    color: var(--primary-color);
}

.scrollable-list {
    max-height: 240px;
    overflow-y: auto;
    padding: 5px 0 !important;
}

.type-item {
    padding: 10px 20px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #444;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.type-item:first-child,
.type-item[data-value=""],
.type-item[data-value="any"] {
    background-color: #006A50 !important;
    color: white !important;
    font-weight: 700 !important;
    border-radius: 4px 4px 0 0;
    margin-bottom: 2px;
}

.type-item.selected:not(:first-child) {
    background: #e6f2ee;
    color: var(--primary-color);
    font-weight: 600;
}

.type-item.child {
    padding-left: 35px;
}

.property-type-list {
    display: flex;
    flex-direction: column;
}

/* Specific Toggle Style for Picker */
.picker-toggle {
    border: 2px solid #006A50 !important;
    background: white;
    padding: 12px 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    color: #555;
    min-height: 50px;
    box-shadow: 0 4px 15px rgba(0, 106, 80, 0.05);
}

.search-field .form-select {
    border: 2px solid #006A50 !important;
    border-radius: 8px !important;
    height: 50px;
}

.picker-toggle i {
    font-size: 0.8rem;
    color: #999;
}

.picker-toggle .toggle-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
}

@media (max-width: 991px) {
    .picker-style {
        position: absolute;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* Modern Section Header */
.section-header-modern {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    padding: 12px 0;
    border-bottom: none;
}

.section-header-modern h2 {
    margin: 0 0 10px 0;
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--primary-color, #006A50);
    text-align: center;
}

.view-all-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 28px;
    border-radius: 50px;
    background: #f1f1f1;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.view-all-btn:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 106, 80, 0.25);
}

@media (max-width: 768px) {
    .section-header-modern {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 8px 0;
        gap: 15px;
    }

    .section-header-modern h2 {
        font-size: 1.35rem;
        /* Balanced size for mobile same-line layout */
        margin: 0;
        text-align: left;
        line-height: 1.2;
    }

    .view-all-btn {
        position: static;
        transform: none;
        margin-top: 0;
        padding: 6px 14px;
        font-size: 0.75rem;
        flex-shrink: 0;
    }
}