/*
 * "Available Properties" — [optima_express_featured] / [optima_express_quick_search].
 *
 * Everything here is scoped under .mxb-pml-featured or .mxb-pml-quick-search, so
 * no other page on the site is affected.
 *
 * DELIBERATELY MINIMAL, and it shrank on purpose. The production page's entire
 * look is produced by the ACTIVE THEME's css/custom-page/property-list.css off the
 * class names the template now emits. The theme owns:
 *
 *   - the title underline           .title-wrap:after
 *   - title / filter / row rhythm   .title-wrap, .ip-property-search-title,
 *                                   .ip-property-filter-buttons, .group-row
 *   - the dark background band      .ip-property-listing-group:before
 *   - staggered row offsets         .group-row.upper/.lower .listings-entries
 *   - card width and 5px gaps       .listings-entry
 *   - the card height               .ip-property-det-canvas canvas (ratio spacer)
 *   - the card hover                .ip-property-listings-photo:before overlay,
 *                                   :hover img scale(1.2), .listing-det lift to
 *                                   30px, .listings-feat reveal — all 0.3s
 *   - one centred card per row      its own <=991px media query
 *   - pager and disclaimer          ul.ip-property-pagination, .ihf-disclaimer-section
 *
 * and the theme's AOS instance owns the rows' fade-left / fade-right entrance.
 * That is exactly how the Areas cards get their behaviour (area-results.php loads
 * no hover or motion CSS at all), so nothing here may re-declare, override or
 * suppress any of it. What this file carries is only the production quick-search
 * strip (which the theme never styled, because iHomefinder shipped a web
 * component), the pager's inert items, and focus-visible affordances the theme
 * omits.
 */

/* ----------------------------------------------------- quick-search band ---- */

/*
 * The production "Quick Search - For More Available Listings" strip, as the
 * retired iHomefinder widget drew it inside the theme's band (measured on the
 * live page at 1920px and 1366px): one centred 1130px row on a 12-column grid —
 * Location 3, Property Type / Min. Price / Max. Price 2 each, Min. Bedrooms /
 * Min. Bathrooms / Search 1 each — with 10px gutters; 11px Roboto labels 8px
 * above 35px controls; #ced4da borders with a 4px radius; a gray "$" cell on
 * both prices; removable "× Condo" tokens. Below 808px it stacks, full width.
 *
 * Two kinds of rule:
 *   - THEME FALLBACKS, wrapped in :where() so they carry no specificity. The
 *     theme's property-list.css paints the band, the heading and the centring
 *     wrapper off the same class names and wins whenever it loads, in either
 *     stylesheet order; these only keep the strip correct when it does not.
 *   - THE ROW, scoped to .mxb-premier-mls.mxb-pml-quick-search, which outranks
 *     the connector's base search-bar primitives in premier-mls.css without
 *     touching the /ny/ search page that shares them.
 */

:where(.mxb-pml-quick-search.ip-property-det-search-main-form) {
    padding: 15px 0;
    background: #f0f0f0;
}

/*
 * The theme's `.ip-property-det-search-main-form:first-child { margin-bottom:
 * 90px }` never fires on production: its own results view puts a hidden <form>
 * ahead of the strip. The connector's strip IS the first child of its band, so
 * cancel it and keep production's rhythm — the title block's own padding is
 * the only space below the band.
 */
.mxb-premier-mls.mxb-pml-quick-search.ip-property-det-search-main-form:first-child {
    margin-bottom: 0;
}

:where(.mxb-pml-quick-search .ip-property-det-search-form-title) span {
    display: block;
    margin: 15px 0 5px;
    color: #626262;
    font-size: 23px;
    font-weight: 400;
    letter-spacing: 0.3em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

:where(.mxb-pml-quick-search .ip-property-det-search-form) {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
}

/* The agent pages hide that class outright: agent-details.css says
   `.title-wrap.ip-property-search-title, .ip-property-det-search-form { display:
   none !important }`, written when the only search bar in that tab was
   iHomefinder's own element and this class could not appear there. The
   connector's strip does use it — that is how it inherits the theme's look
   everywhere else — so on an agent page the bar vanished and left its band
   empty. Assert the strip's own layout: still scoped to the component root, and
   !important because that is the only thing another !important yields to.
   Specificity 0,3,0 beats the theme's 0,1,0, and the declaration is the same
   `display: flex` the rule above already sets, so nothing else moves. */
.mxb-premier-mls.mxb-pml-quick-search .ip-property-det-search-form {
    display: flex !important;
}

.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-search {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 1130px;
    /* The one !important in this file: the theme's `#content … form
       { margin: 1.12em 0 }` rule carries an ID, which no class selector can
       outrank, and it pushed the row 16px down on /available-properties/. */
    margin: 0 auto !important;
    padding: 0 0 8px;
    background: transparent;
    color: #333333;
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    line-height: 1;
    box-sizing: border-box;
}

/* Column widths: n/12 of the row, less its share of the 10px gutters. */
.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-field {
    flex: 0 1 calc(16.6667% - 8.3333px);
    width: auto;
    min-width: 0;
}

.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-location {
    flex-basis: calc(25% - 7.5px);
}

.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-small,
.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-submit {
    flex: 0 1 calc(8.3333% - 9.1667px);
}

/* Field captions. `>` keeps them off the checkbox rows inside the dropdown. */
.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-field > label,
.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-multiselect-label {
    display: block;
    /* A 19px caption block, text set as low in it as production's. */
    margin: 0 0 2px;
    overflow: hidden;
    color: #333333;
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The widget drew its select-style boxes (Location, Property Type, Bedrooms,
   Bathrooms) 38px tall and its price groups and button 35px. */
.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-field input:not([type="checkbox"]),
.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-field select {
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #ffffff;
    color: #495057;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    box-shadow: none;
    box-sizing: border-box;
}

.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-field input::placeholder {
    color: #6c757d;
    opacity: 1;
}

/* Compact selects with the widget's double chevron instead of the browser's. */
.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-field select {
    padding: 0 24px 0 12px;
    line-height: 36px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath fill='%23888888' d='M4 0l4 5H0zm0 12L0 7h8z'/%3E%3C/svg%3E");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 8px 12px;
    cursor: pointer;
}

/* Prices: a gray "$" cell joined to the input. */
.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-money-input {
    display: flex;
    width: 100%;
    height: 35px;
}

.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-money-input span {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    border: 1px solid #ced4da;
    border-right: 0;
    border-radius: 4px 0 0 4px;
    background: #e9ecef;
    color: #495057;
    font-size: 14px;
    box-sizing: border-box;
}

.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-field .mxb-pml-money-input input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 35px;
    border-radius: 0 4px 4px 0;
}

/* Property Type: removable tokens in a select-like box. More tokens than fit
   wrap to a second line and the box grows DOWNWARD (the row is top-aligned),
   so it never shifts or covers the neighbouring fields. */
.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-multiselect-toggle {
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 5px 24px 0 4px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #ffffff;
    color: #495057;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    text-align: left;
    box-shadow: none;
    cursor: pointer;
    box-sizing: border-box;
}

.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-multiselect-toggle::after {
    top: 13px;
    right: 8px;
    width: 8px;
    height: 12px;
    margin: 0;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath fill='%23888888' d='M4 0l4 5H0zm0 12L0 7h8z'/%3E%3C/svg%3E") no-repeat center / 8px 12px;
}

.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-multiselect-chips {
    gap: 0;
}

/* An inline box, not flex: a flex container would trim the space between the
   "×" and the label, which production shows. */
.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-multiselect-chip {
    display: inline-block;
    vertical-align: top;
    height: 26px;
    min-height: 0;
    margin: 0 2px 2px 0;
    padding: 0 5px 0 0;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background: #ffffff;
    color: #000000;
    font-size: 14px;
    line-height: 24px;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
}

.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-multiselect-placeholder {
    margin: 0 0 2px;
    padding-left: 8px;
    color: #6c757d;
    line-height: 26px;
}

.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-multiselect-menu {
    top: calc(100% + 2px);
    z-index: 30;
    min-width: 100%;
    width: max-content;
    max-width: 280px;
    padding: 4px 0;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-multiselect-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    color: #212529;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-multiselect-option:hover {
    background: #f1f3f5;
}

/*
 * NO-JAVASCRIPT FALLBACK. premier-mls-search.js adds .is-ready once it has taken
 * the widget over. Until then — and for good, if the script is blocked or fails
 * — the checkboxes are the live control (the server names them and leaves the
 * hidden csv disabled), so the menu is shown as an ordinary list rather than a
 * dropdown behind a button that cannot open.
 */
.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-multiselect:not(.is-ready) .mxb-pml-multiselect-menu {
    display: block;
    position: static;
    width: 100%;
    max-width: none;
    max-height: none;
    margin-top: 2px;
    box-shadow: none;
}

.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-multiselect:not(.is-ready) .mxb-pml-multiselect-toggle {
    cursor: default;
}

.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-multiselect:not(.is-ready) .mxb-pml-multiselect-toggle::after {
    display: none;
}

/* Search: a compact gray button on the controls' baseline (label 11px + 8px). */
.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-submit {
    min-width: 0;
    height: 35px;
    margin: 19px 0 0;
    padding: 6px 12px;
    border: 1px solid #767676;
    border-radius: 4px;
    background: #767676;
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
}

.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-submit:hover,
.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-submit:focus-visible {
    border-color: #5f5f5f;
    background: #5f5f5f;
}

.mxb-premier-mls.mxb-pml-quick-search input:focus-visible,
.mxb-premier-mls.mxb-pml-quick-search select:focus-visible,
.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-multiselect-toggle:focus-visible,
.mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-submit:focus-visible {
    outline: 2px solid #f78000;
    outline-offset: 2px;
}

/* Tablet: two even rows (Location takes two columns) instead of a squeezed line. */
@media (min-width: 808px) and (max-width: 1099px) {
    .mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-search {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px 10px;
        max-width: 760px;
    }

    .mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-location {
        grid-column: span 2;
    }

    .mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-submit {
        width: 100%;
    }
}

/* Phone: one full-width column, as production stacks it. */
@media (max-width: 807px) {
    .mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-search {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        max-width: none;
        padding-bottom: 0;
    }

    .mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-field,
    .mxb-premier-mls.mxb-pml-quick-search .mxb-pml-base-submit {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* style="vertical": the same fields, stacked in a narrow column at any width. */
.mxb-premier-mls.mxb-pml-quick-search-vertical .mxb-pml-base-search {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    max-width: 420px;
}

.mxb-premier-mls.mxb-pml-quick-search-vertical .mxb-pml-base-field,
.mxb-premier-mls.mxb-pml-quick-search-vertical .mxb-pml-base-submit {
    flex: 0 0 auto;
    width: 100%;
}

/* ------------------------------------------------------------ empty state ---- */

.mxb-pml-featured .mxb-pml-empty {
    margin: 60px 0;
    color: #595959;
    font-size: 16px;
    text-align: center;
}

/* --------------------------------------------------------------- pager ------ */

/* The theme styles ul.ip-property-pagination / li.page-num; only strip the list
   bullets our markup would otherwise inherit from the content area. */
.mxb-pml-featured .mxb-pml-search-pagination {
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

/* A disabled arrow is an href="#" link (the theme's pager script needs a link in
   every item — see partials/pagination.php), so it must not act like one. */
.mxb-pml-featured .mxb-pml-search-pagination .is-disabled span,
.mxb-pml-featured .mxb-pml-search-pagination .is-disabled a {
    opacity: 0.45;
}

.mxb-pml-featured .mxb-pml-search-pagination .is-disabled a {
    pointer-events: none;
    cursor: default;
}

/* ------------------------------------------------------- accessibility ------ */

/* Keyboard users must get the same affordance mouse users get from hover. The
   theme provides no focus styling, so this is additive, not an override. */
.mxb-pml-featured .listings-entry a:focus-visible {
    outline: 3px solid #f78000;
    outline-offset: -3px;
}

.mxb-pml-featured .ip-property-filter-buttons a:focus-visible,
.mxb-pml-featured .mxb-pml-search-pagination a:focus-visible {
    outline: 2px solid #f78000;
    outline-offset: 2px;
}

/* Keyboard focus reveals the same detail lift and feature fade that the theme
   reveals on hover, so tabbing through the grid is not a silent experience. */
.mxb-pml-featured .listings-entry:focus-within .ip-property-listing-det {
    bottom: 30px;
}

.mxb-pml-featured .listings-entry:focus-within .ip-property-listings-feat {
    opacity: 1;
}

/* ------------------------------------------------------------ responsive ---- */

/* The theme already stacks to one centred card per row at <=991px. Only guard
   against horizontal overflow on small screens. */
@media only screen and (max-width: 767px) {
    .mxb-pml-featured .ip-property-det-search-listings {
        overflow-x: hidden;
    }
}