/* ============================================
   Advanced Search Filters - Modern Redesign
   ============================================ */

/* ---- Always show city dropdown-button on all screen sizes ---- */
.new-search-properties .new-all-search .dropdown-button {
    display: block !important;
}

/* ---- Filter bar SmartSelects (Status / Project Type / Budget) ---- */
.advFiltr .ss-wrap {
    width: 100% !important;
}

.advFiltr .ss-trigger {
    background: #f8f8f8 !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 9px 12px !important;
    height: auto !important;
    min-height: 38px !important;
    box-shadow: none !important;
    transition: border-color 0.2s, background 0.2s !important;
}

.advFiltr .ss-trigger:hover {
    background: #fff8d6 !important;
    border-color: #f8d74a !important;
}

.advFiltr .ss-trigger .ss-ph {
    color: #888 !important;
    font-weight: 500 !important;
}

.advFiltr .ss-trigger .ss-tag {
    background: #f8d74a !important;
    color: #222 !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    padding: 2px 7px !important;
    font-weight: 600 !important;
}

.advFiltr .ss-trigger .ss-tag .ss-tag-remove {
    color: #555 !important;
}

.advFiltr .ss-trigger .ss-single-label {
    color: #333 !important;
    font-weight: 600 !important;
}

.advFiltr .ss-caret svg {
    stroke: #888 !important;
}

.advFiltr .ss-dropdown {
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.13) !important;
    border: 1.5px solid #eee !important;
    background: #fff !important;
    z-index: 99999 !important;
    min-width: 170px !important;
}

.advFiltr .ss-option {
    font-size: 13px !important;
    padding: 9px 14px !important;
    color: #444 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.advFiltr .ss-option:hover {
    background: #fffbe6 !important;
}

.advFiltr .ss-option.ss-selected {
    background: #fff8d6 !important;
    color: #222 !important;
    font-weight: 600 !important;
}

.advFiltr .ss-option.ss-selected::after {
    color: #f8d74a !important;
}

.advFiltr .ss-option input[type="checkbox"] {
    accent-color: #f8d74a !important;
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
}

/* ---- SmartSelect inside banner dropdown-button ---- */
.new-search-properties .dropdown-button .ss-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.new-search-properties .dropdown-button .ss-trigger {
    background: transparent !important;
    border: none !important;
    border-right: 2px solid #fff !important;
    border-radius: 0 !important;
    height: 40px !important;
    padding: 0 10px 0 28px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.new-search-properties .dropdown-button .ss-trigger:hover {
    background: rgba(0,0,0,0.3) !important;
}

.new-search-properties .dropdown-button .ss-trigger .ss-ph,
.new-search-properties .dropdown-button .ss-trigger .ss-tag,
.new-search-properties .dropdown-button .ss-trigger .ss-single-label {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.new-search-properties .dropdown-button .ss-caret svg {
    stroke: #fff !important;
}

.new-search-properties .dropdown-button .ss-dropdown {
    top: 42px !important;
    left: 0 !important;
    min-width: 160px !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
    border: 1px solid #eee !important;
    background: #fff !important;
    z-index: 99999 !important;
}

.new-search-properties .dropdown-button .ss-option {
    font-size: 13px !important;
    padding: 9px 14px !important;
    color: #333 !important;
}

.new-search-properties .dropdown-button .ss-option:hover,
.new-search-properties .dropdown-button .ss-option.ss-selected {
    background: #fff8d6 !important;
    color: #222 !important;
}

.new-search-properties .dropdown-button .ss-option.ss-selected::after {
    color: #f8d74a !important;
}

/* ---- Filter Bar Container ---- */
.click-show-option {
    background: rgba(255, 255, 255, 0.97) !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
    padding: 14px 12px 12px !important;
    margin-top: 0 !important;
    top: 40px !important;
    left: 0 !important;
    width: 100% !important;
    display: none;
    position: absolute !important;
    z-index: 9999 !important;
    border-top: 3px solid #f8d74a !important;
}

/* ---- Flex row for filters ---- */
.click-show-option .property-type-select {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
    width: 100% !important;
    float: none !important;
    position: static !important;
}

/* ---- Each filter column ---- */
.click-show-option .search-drop-list .property-type-select ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.click-show-option .search-drop-list .property-type-select ul li {
    float: none !important;
    flex: 1 1 140px !important;
    margin: 0 !important;
    width: auto !important;
    position: relative !important;
    min-width: 130px !important;
}

/* ---- Dropdown Trigger Buttons ---- */
.click-show-option .property-type-select button.dropdown-toggle,
.advFiltr button.pttype {
    background: #f8f8f8 !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 9px 14px !important;
    width: 100% !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: border-color 0.2s, background 0.2s !important;
    white-space: nowrap !important;
    float: none !important;
}

.click-show-option .property-type-select button.dropdown-toggle:hover,
.advFiltr button.pttype:hover {
    background: #fff8d6 !important;
    border-color: #f8d74a !important;
    color: #222 !important;
}

.click-show-option .property-type-select button.dropdown-toggle .fa-chevron-down,
.advFiltr button.pttype .fa-chevron-down {
    font-size: 11px !important;
    color: #999 !important;
    margin-left: 6px !important;
    transition: transform 0.2s !important;
}

/* ---- Dropdown Panel ---- */
ul.p_search_pera_data {
    background: #fff !important;
    border: 1.5px solid #e8e8e8 !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
    padding: 10px 8px !important;
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    min-width: 180px !important;
    width: auto !important;
    z-index: 10000 !important;
    height: auto !important;
    min-height: unset !important;
    overflow: visible !important;
    overflow-y: visible !important;
    border-style: solid !important;
    border-color: #e8e8e8 !important;
}

/* ---- Dropdown items ---- */
.click-show-option .search-drop-list .property-type-select ul li ul.p_search_pera_data li {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    flex: none !important;
    min-width: unset !important;
    border-radius: 6px !important;
    transition: background 0.15s !important;
}

.click-show-option .search-drop-list .property-type-select ul li ul.p_search_pera_data li:hover {
    background: #fffbe6 !important;
}

.click-show-option .search-drop-list .property-type-select ul li ul.p_search_pera_data li label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 10px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #444 !important;
    width: 100% !important;
    float: none !important;
    white-space: nowrap !important;
}

.click-show-option .search-drop-list .property-type-select ul li ul.p_search_pera_data li label input[type="checkbox"] {
    accent-color: #f8d74a;
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

/* ---- Budget dropdown special ---- */
ul.p_search_pera_data.buget_search_box {
    min-width: 230px !important;
    padding: 12px !important;
}

.max_budget {
    display: flex !important;
    align-items: center !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    background: #fafafa !important;
    padding: 0 10px !important;
    margin-bottom: 8px !important;
    transition: border-color 0.2s !important;
}

.max_budget:focus-within {
    border-color: #f8d74a !important;
    background: #fff !important;
}

.max_budget .icon {
    color: #888 !important;
    font-size: 13px !important;
    margin-right: 6px !important;
}

.budget_box {
    border: none !important;
    background: transparent !important;
    font-size: 13px !important;
    color: #333 !important;
    width: 100% !important;
    padding: 8px 0 !important;
    outline: none !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.budget_box::-webkit-inner-spin-button,
.budget_box::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
}

/* Budget quick-select labels */
ul.p_search_pera_data.buget_search_box li {
    width: 100% !important;
    float: none !important;
    flex: none !important;
    min-width: unset !important;
    border: none !important;
    padding: 0 !important;
}

ul.p_search_pera_data.buget_search_box li:hover {
    background: transparent !important;
}

.budget_lable {
    display: inline-flex !important;
    align-items: center !important;
}

.budget_lable label {
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
}

.budget_lable a {
    display: inline-block !important;
    background: #f4f4f4 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 5px !important;
    color: #555 !important;
    font-size: 12px !important;
    padding: 3px 8px !important;
    transition: background 0.15s, border-color 0.15s !important;
    white-space: nowrap !important;
}

.budget_lable a:hover {
    background: #f8d74a !important;
    border-color: #f8d74a !important;
    color: #333 !important;
}

.budget_lable + span {
    color: #aaa !important;
    font-size: 12px !important;
    margin: 0 4px !important;
}

ul.p_search_pera_data.buget_search_box .col-md-12 {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 3px 0 !important;
}

/* ---- Find Button ---- */
.advFiltr.suball-form {
    flex: 0 0 auto !important;
    min-width: unset !important;
    width: auto !important;
}

.advFiltr.suball-form .btn-group,
.advFiltr.suball-form .button-group {
    width: 100% !important;
}

input.clearall.clrbtn[type="submit"] {
    background: #f8d74a !important;
    border: none !important;
    border-radius: 8px !important;
    color: #222 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 9px 22px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.2s, transform 0.1s !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 2px 8px rgba(248,215,74,0.4) !important;
}

input.clearall.clrbtn[type="submit"]:hover {
    background: #e6c820 !important;
    transform: translateY(-1px) !important;
}

input.clearall.clrbtn[type="reset"] {
    background: #f0f0f0 !important;
    border: none !important;
    border-radius: 8px !important;
    color: #555 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 9px 16px !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

input.clearall.clrbtn[type="reset"]:hover {
    background: #e0e0e0 !important;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .click-show-option .search-drop-list .property-type-select ul li {
        flex: 1 1 120px !important;
    }
}

@media (max-width: 767px) {
    .click-show-option {
        border-radius: 0 0 10px 10px !important;
        padding: 10px 8px !important;
    }

    .click-show-option .search-drop-list .property-type-select ul {
        gap: 6px !important;
    }

    .click-show-option .search-drop-list .property-type-select ul li {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: unset !important;
    }

    .advFiltr.suball-form {
        flex: 1 1 100% !important;
    }

    input.clearall.clrbtn[type="submit"] {
        width: 100% !important;
        padding: 10px !important;
    }

    ul.p_search_pera_data {
        min-width: 150px !important;
    }

    ul.p_search_pera_data.buget_search_box {
        min-width: 200px !important;
    }
}

@media (max-width: 480px) {
    .click-show-option .search-drop-list .property-type-select ul li {
        flex: 1 1 100% !important;
    }
}

/* ============================================================
   FULL RESPONSIVE — Search Bar + Filters (Mobile First)
   ============================================================ */

/* --- Desktop: wider search box --- */
@media (min-width: 992px) {
    .new-search-properties .new-all-search {
        width: 70% !important;
    }
}

/* --- Tablet / Small desktop (768px – 991px) --- */
@media (max-width: 991px) {
    .new-search-properties .new-all-search {
        width: 90% !important;
    }
    .click-show-option .search-drop-list .property-type-select ul li {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: unset !important;
    }
    .advFiltr.suball-form,
    .advFiltr.resetall-form {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: unset !important;
    }
    .advFiltr.suball-form input.clearall.clrbtn,
    .advFiltr.resetall-form input.clearall.clrbtn {
        width: 100% !important;
    }
}

/* --- Mobile (max 767px) --- */
@media (max-width: 767px) {
    /* Search bar full width */
    .new-search-properties .new-all-search {
        width: 95% !important;
    }

    /* Search input + button row fix */
    .new-search-properties ul.token-input-list {
        left: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Search button stays inside */
    .new-search-properties .new-all-search button[type="text"] {
        right: 8px !important;
        top: 8px !important;
        font-size: 16px !important;
    }

    /* Filter bar: not absolute, flows naturally */
    .click-show-option {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin-top: 6px !important;
        border-radius: 10px !important;
        padding: 10px 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Each filter: full width */
    .click-show-option .search-drop-list .property-type-select ul li {
        flex: 1 1 100% !important;
        min-width: unset !important;
    }

    /* Both buttons full width */
    .advFiltr.suball-form,
    .advFiltr.resetall-form {
        flex: 1 1 100% !important;
        min-width: unset !important;
        width: 100% !important;
    }
    .advFiltr.suball-form input.clearall.clrbtn,
    .advFiltr.resetall-form input.clearall.clrbtn {
        width: 100% !important;
        text-align: center !important;
        padding: 11px !important;
        font-size: 14px !important;
    }

    /* SmartSelect dropdown — prevent right overflow on mobile */
    .advFiltr .ss-dropdown {
        left: 0 !important;
        right: auto !important;
        max-width: calc(100vw - 32px) !important;
    }

    /* Budget dropdown wider on mobile */
    ul.p_search_pera_data.buget_search_box {
        min-width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 32px) !important;
    }

    /* Gap tighter on small screens */
    .click-show-option .search-drop-list .property-type-select ul {
        gap: 6px !important;
    }
}

/* --- Very small phones (max 400px) --- */
@media (max-width: 400px) {
    .new-search-properties .new-all-search {
        width: 98% !important;
    }
    .advFiltr .ss-trigger {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
    .advFiltr.suball-form input.clearall.clrbtn,
    .advFiltr.resetall-form input.clearall.clrbtn {
        font-size: 13px !important;
        padding: 10px !important;
    }
}