/* The search Filters popup (the "More" button) on agents' websites, realty85.com's Buy page and the agent search pages (Jacob, 18 Oct 2026:
   "Clean up the more menu, its black and looks like shit and doesnt fit with the rest of the site design"). The site's
   own look: white, Montserrat, #121217 text, #6C6C89 labels, #D1D1DB pill borders, #E61E2B for the chosen option.
   Scoped to .r85-filters; !important where the markup carries inline widths. Its own file so the agent search pages
   (Agent Property Search, Deal Finder: the CRM layout, which has no realty85.css) share it (Jacob, 18 Oct 2026). */
.r85-filters .modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(18, 18, 23, 0.18);
    background-color: #fff;
    color: #121217;
    font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.r85-filters .modal-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #EBEBEF;
}

.r85-filters .modal-header h5,
.r85-filters .modal-header .h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #121217;
}

.r85-filters .modal-header .close {
    padding: 0;
    border: none;
    background: none;
    color: #6C6C89;
    font-size: 26px;
    line-height: 1;
    opacity: 1;
}

.r85-filters #link_HideFilter {
    color: #6C6C89;
    font-size: 1.25em !important;
    line-height: 1;
}

.r85-filters .modal-body {
    padding: 4px 24px 16px;
}

.r85-filters .modal-body > br,
.r85-filters .modal-body > div[id^="panel_"] > br {
    display: none;
}

.r85-filters .modal-body > div[id^="panel_"] {
    padding: 16px 0;
    border-bottom: 1px solid #EBEBEF;
}

.r85-filters .color-r85-darkblue {
    display: block;
    margin-bottom: 10px;
    color: #121217 !important;
    font-size: 15px;
    font-weight: 600;
}

.r85-filters label.fw-bold,
.r85-filters #panel_Garage > span:not(:first-child) {
    color: #6C6C89 !important;
    display: block;
    margin-bottom: 6px;
    color: #6C6C89;
    font-size: 13px;
    font-weight: 500 !important;
}

.r85-filters .row {
    --bs-gutter-x: 12px;
    row-gap: 8px;
}

.r85-filters .modal-body div[style*="width:190px"] {
    width: 100% !important;
}

.r85-filters .modal-body select,
.r85-filters .modal-body input[type="text"] {
    width: 100% !important;
    height: 40px;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 1px solid #D1D1DB !important;
    border-radius: 24px !important;
    background-color: #fff !important;
    color: #121217;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400 !important;
    box-shadow: none !important;
    outline: none;
}

.r85-filters .modal-body select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 36px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.25 0.75L4 4.25L0.75 0.75' stroke='%238A8AA3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
}

.r85-filters .modal-body input[type="text"]::placeholder {
    color: #A9A9BC;
}

.r85-filters .modal-body select:focus,
.r85-filters .modal-body input[type="text"]:focus {
    border-color: #121217 !important;
}

/* The price boxes take a typed amount under the list. */
.r85-filters div.data-filter-min-price,
.r85-filters div.data-filter-max-price {
    display: block;
    height: auto;
    padding: 0;
}

/* Each page's own styles stack the list and the box with absolute positions: in flow here, one under the other. */
.r85-filters select.data-filter-min-price,
.r85-filters select.data-filter-max-price,
.r85-filters input.data-filter-min-price,
.r85-filters input.data-filter-max-price {
    position: static !important;
}

.r85-filters .modal-body input.data-filter-min-price,
.r85-filters .modal-body input.data-filter-max-price {
    margin-top: 8px !important;
}

.r85-filters #filter_minGarages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.r85-filters #filter_minGarages .btn {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 7px 14px;
    border: 1px solid #D1D1DB !important;
    border-radius: 24px !important;
    background-color: #fff;
    color: #121217;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none !important;
}

.r85-filters #filter_minGarages .btn:hover {
    background-color: #F7F7F8;
}

.r85-filters #filter_minGarages .btn.active {
    border-color: #E61E2B !important;
    background-color: #E61E2B;
    color: #fff;
}

.r85-filters .input-group {
    flex-wrap: nowrap;
    align-items: center;
    padding: 4px 0;
}

.r85-filters .input-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0 10px 0 0;
    accent-color: #E61E2B;
    cursor: pointer;
}

.r85-filters .input-group label {
    margin: 0;
    color: #121217;
    font-size: 14px;
    cursor: pointer;
}

.r85-filters .modal-body > .row:last-child {
    padding-top: 16px;
}

.r85-filters #btn_DrawBoundary,
.r85-filters .modal-body .btnShare {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border: 1px solid #D1D1DB;
    border-radius: 24px;
    background-color: #fff;
    color: #121217;
    font-size: 14px;
    font-weight: 500;
}

.r85-filters #btn_DrawBoundary:hover,
.r85-filters .modal-body .btnShare:hover {
    border-color: #D1D1DB;
    background-color: #F7F7F8;
    color: #121217;
}

.r85-filters .modal-footer {
    padding: 12px 24px;
    border-top: 1px solid #EBEBEF;
}

.r85-filters #btn_FilterProperties {
    height: 44px;
    padding: 0 32px;
    border: none;
    border-radius: 24px;
    background-color: #E61E2B;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .r85-filters .modal-header {
        padding: 14px 16px;
    }

    .r85-filters .modal-body {
        padding: 0 16px 12px;
    }

    .r85-filters .modal-footer {
        padding: 12px 16px;
    }

    .r85-filters .modal-body select,
    .r85-filters .modal-body input[type="text"] {
        padding-left: 12px !important;
        font-size: 13px;
    }

    .r85-filters .modal-body select {
        padding-right: 28px !important;
        background-position: right 12px center !important;
    }

    .r85-filters #btn_FilterProperties {
        width: 100%;
    }
}

/* The agent search pages' toolbar (Agent Property Search, Deal Finder; Jacob, 18 Oct 2026: "Make them match"). These
   pages sit in the CRM's dark Bootstrap theme, and the toolbar's buttons and lists were the browser's own grey
   controls. They now look like the CRM's fields: #212529 with a #495057 border, 6px corners, #DEE2E6 text. */
.r85-agent-toolbar .filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.r85-agent-toolbar .filter-wrapper > button,
.r85-agent-toolbar #multiSelectDropdownHomeType,
.r85-agent-toolbar .select-wrapper select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #495057;
    border-radius: 6px;
    background-color: #212529;
    color: #DEE2E6;
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
}

.r85-agent-toolbar .filter-wrapper > button:hover,
.r85-agent-toolbar #multiSelectDropdownHomeType:hover,
.r85-agent-toolbar .select-wrapper select:hover {
    border-color: #6C757D;
    background-color: #2B3035;
}

.r85-agent-toolbar .filter-wrapper > button:focus-visible,
.r85-agent-toolbar #multiSelectDropdownHomeType:focus-visible,
.r85-agent-toolbar .select-wrapper select:focus-visible {
    outline: 2px solid #E61E2B;
    outline-offset: 1px;
}

/* Lists draw their own caret, so the page's separate caret beside them is hidden. */
.r85-agent-toolbar .select-wrapper select {
    -webkit-appearance: none;
    appearance: none;
    justify-content: flex-start;
    min-width: 110px;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.25 0.75L4 4.25L0.75 0.75' stroke='%23ADB5BD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.r85-agent-toolbar .select-wrapper > .select-caret {
    display: none;
}

.r85-agent-toolbar .select-wrapper select option {
    background-color: #212529;
    color: #DEE2E6;
}

.r85-agent-toolbar .filter-wrapper .form-control {
    height: 38px;
}