/*
 * Restyles IDX Broker's listing-card markup (.idx-listing-card, .IDX-resultsCell,
 * etc.) to match the site's own card/typography conventions instead of IDX
 * Broker's generic default look. Enqueued only on the idx-wrapper page, which
 * is what gets captured and reused across every wrapped page under
 * homes.legacyrealty951.com (IDX Broker's own branded-subdomain feature,
 * switched over from the legacyrealty951.idxbroker.com default - not behind
 * Cloudflare's bot-challenge the way that domain was, so it's directly
 * fetchable for verification going forward instead of needing screenshots).
 *
 * !important throughout, same reason as every other IDX-injected element in
 * this file (search bar, details page buttons, etc.): IDX Broker's own
 * vendor stylesheet loads alongside this content (whether rendered through
 * our own wrapper page or a captured copy of it on their subdomain) and
 * wins ties on any property this didn't already force, which is almost
 * certainly why this block - already written to the right classes - wasn't
 * visibly taking effect.
 */

/* ---- Results header row ("62 Listings" + Hide Map) ---- */
.idx-results__header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid rgba(165, 144, 85, 0.25) !important;
}

.idx-results-total__heading {
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--primary-text, #000) !important;
    margin: 0 !important;
}

/* "Featured Results" / "Search Results" are real section headings (same
   role as "About this property" / "Property Details" on the details
   page), not a small meta label like the count line above - matched to
   that same treatment (title font, size, weight) instead of being
   styled as a bold uppercase tag. */
.idx-results__category--title {
    font-family: var(--font-family-title, inherit) !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--primary-text, #000) !important;
    margin: 32px 0 16px !important;
}

@media (min-width: 1024px) {
    .idx-results__category--title {
        font-size: 28px !important;
    }
}

/* Outline/secondary variant of the same pill-button language used for
   the primary Contact/Save CTAs on the details page (#IDX-detailsHeaderActions
   .IDX-btn below) - same radius/padding/font-size/weight/letter-spacing as
   that family's smaller ("Slides Actions") size, just transparent instead
   of solid-filled since these are toggles, not calls to action. */
#idx-results-map-toggle,
#idx-mobile-map-toggle,
.idx-results-refinement__toggle {
    background: transparent !important;
    border: 1px solid var(--primary, #a59055) !important;
    color: var(--primary, #a59055) !important;
    border-radius: 16px !important;
    padding: 10px 18px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 11px !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#idx-results-map-toggle:hover,
#idx-mobile-map-toggle:hover {
    background: var(--primary, #a59055) !important;
    color: #fff !important;
}

/* "New Search" / "Modify Search" / "Save Search" - originally sat in their
   own block above the listing-count row, wrapping to a second line and
   pushing "166 Listings" down. There's also a second, clearly
   mobile-labeled copy of these same actions at the very bottom of the
   page (#idx-results-mobile-control / .idx-results__mobile-menu), which
   means this top copy is the desktop-facing one, not something meant to
   be hidden on desktop - idx-listings.js (legacyMergeResultsToolbar)
   moves these two groups plus the map-toggle button into
   #idx-results-header at runtime, into the .legacy-idx-results-actions
   wrapper below, so they render on the same line as the listing count
   instead of CSS trying to reflow non-adjacent siblings onto one row. */
.legacy-idx-results-actions {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 10px !important;
}

/* Narrow viewports: this results page is desktop-facing anyway (the
   genuinely mobile toolbar is the separate #idx-results-mobile-control
   section at the bottom of the page), but wrapping back on here rather
   than overflowing horizontally is the safer fallback if it's ever seen
   at a narrow width. */
@media (max-width: 700px) {
    .legacy-idx-results-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* Still need to be flex individually - each is a plain div wrapping 1-2
   links that would otherwise stack vertically inside the wrapper above. */
.IDX-topAction,
.IDX-top-action__group--no-refinement {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 10px !important;
}

.IDX-newSearch,
.IDX-modifySearch {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    line-height: normal !important;
    background: transparent !important;
    border: 1px solid var(--primary, #a59055) !important;
    border-radius: 16px !important;
    color: var(--primary, #a59055) !important;
    padding: 10px 18px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.IDX-newSearch:hover,
.IDX-modifySearch:hover {
    background: var(--primary, #a59055) !important;
    color: #fff !important;
}

#IDX-saveSearch {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    line-height: normal !important;
    background: var(--primary-text, #000) !important;
    border: 1px solid var(--primary-text, #000) !important;
    border-radius: 16px !important;
    color: #fff !important;
    padding: 10px 18px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#IDX-saveSearch:hover {
    background: var(--primary, #a59055) !important;
    border-color: var(--primary, #a59055) !important;
    color: #fff !important;
}

/* ---- Listing grid ---- */
#idx-results-category-active,
#idx-results-category-featured {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    /* Explicit - otherwise IDX Broker's own vendor CSS (sized for its
       taller default card) can still set grid-auto-rows/min-height on
       this grid, leaving a block of empty space below our shorter,
       absolutely-positioned-content card before the next row starts. */
    grid-auto-rows: max-content !important;
    align-items: start !important;
    gap: 6px !important;
    padding: 0 !important;
    list-style: none;
}

.idx-results__listing {
    height: auto !important;
    /* The actual source of the "gap" - confirmed via DevTools box model,
       not a guess: IDX Broker's own vendor CSS puts a padding-bottom
       percentage (an aspect-ratio placeholder, presumably sized for
       their own default card as a loading-skeleton reservation) directly
       on THIS wrapper, not on the card itself. height:auto doesn't
       cancel padding - it's a separate box-model property - so the
       wrapper kept rendering ~215px taller than its actual content
       (our absolutely-positioned, much shorter card) regardless of any
       height override. */
    padding: 0 !important;
}

/* Sibling of the card article inside .idx-results__listing, for MLS
   co-broker/courtesy attribution text - empty for this account's own
   listings, but IDX Broker's vendor CSS still reserves real height for
   it (looked like a placeholder sized for text that's never there),
   which is what was producing the near-full-card gap between rows in
   the map/list view. Collapses when empty; stays compact if it isn't. */
.idx-listing-card__courtesy {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: #888 !important;
}

.idx-listing-card__courtesy:empty {
    display: none !important;
    margin: 0 !important;
}

/* ---- Card ----
   Text-on-photo treatment matching the homepage Featured Properties cards
   (.lfp-card in this same file) rather than a separate white content
   block below the photo - both so the two spots read as one consistent
   design, and because a shorter card (no extra height for that block)
   means more listings fit on screen per the explicit request. Unlike
   .lfp-card (markup we fully control via legacy-featured-properties.php),
   this is IDX Broker's own injected markup - .idx-listing-card__content
   comes AFTER the photo link in the DOM, so it's pulled on top with
   position:absolute instead of the flex "order" trick the old (stacked)
   version used. */
.idx-listing-card {
    position: relative !important;
    display: block !important;
    height: 0 !important;
    padding-bottom: 75% !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #f2efe9 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.idx-listing-card:hover,
.idx-listing-card.idx-listing-card--active {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
    transform: translateY(-2px);
}

.idx-listing-card__link {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background: #f2efe9 !important;
}

.idx-listing-card__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.idx-listing-card__image-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.6)) !important;
    opacity: 1 !important;
}

/* Floating action row (favorite / virtual tour / reduced badge) at the top */
.idx-listing-card__actions {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;
}

.idx-listing-card__actions > * {
    pointer-events: auto;
}

.idx-listing-card__actions .idx-listing-card__action,
.idx-listing-card__actions a {
    color: #fff !important;
}

.IDX-badge--success {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    background: var(--primary, #a59055) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px !important;
    border-radius: 16px !important;
}

/* ---- Card content - overlaid directly on the photo, bottom-aligned ---- */
.idx-listing-card__content {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 14px !important;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

.idx-listing-card__status {
    margin-bottom: 4px !important;
}

.idx-listing-card__details--propStatus .idx-label {
    display: none !important;
}

.idx-listing-card__details--propStatus .idx-text {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff !important;
    opacity: 0.85;
}

.idx-listing-card__price {
    font-size: 18px !important;
    font-weight: 700;
    color: #fff !important;
    margin: 2px 0 6px !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    font-family: var(--font-family-title, inherit);
}

.idx-listing-card__details {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 11px !important;
    color: #fff !important;
    margin-bottom: 0 !important;
}

.idx-listing-card__details > div {
    white-space: nowrap;
}

.idx-listing-card__details .idx-text {
    font-weight: 600;
    color: #fff !important;
}

.idx-listing-card__details .idx-label {
    color: #fff !important;
    opacity: 0.75;
}

.idx-listing-card__address {
    display: none !important;
}

/* MLS logo would be unreadable against a photo at this size and isn't
   part of the homepage cards' design either - dropped from the overlay
   rather than squeezed in illegibly. */
.idx-listing-card__mls-logo {
    display: none !important;
}

/* ---- Pagination ---- */
.idx-results__pagination {
    margin-top: 32px !important;
}

.idx-pagination {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 !important;
    list-style: none;
}

.idx-pagination li a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 16px !important;
    color: var(--primary-text, #000) !important;
    font-size: 13px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.idx-pagination li a:hover {
    background: var(--primary, #a59055) !important;
    border-color: var(--primary, #a59055) !important;
    color: #fff !important;
}

.idx-pagination li.IDX-active a {
    background: var(--primary-text, #000) !important;
    border-color: var(--primary-text, #000) !important;
    color: #fff !important;
}

/* =========================================================
   Listing DETAILS page (single-property view)
   ========================================================= */

/* The theme's "Recent Posts" block is part of the generic single-post
   template and shows on every idx-wrapper page (search results, listing
   details, etc.) even though it has nothing to do with IDX content. */
.single-idx-wrapper .singlePost__recent {
    display: none;
}

/* The visible "listing-wrapper" H1 is just this WP page's internal post
   title (its literal post_name), printed by the normal single-post
   template - meaningless to a visitor and shouldn't show on real estate
   pages. Scoped to only the direct child of .singlePost__main so it
   doesn't also hide the .innerhero heading added below, which reuses the
   same .entry-title class as every other inner page on the site. */
.single-idx-wrapper .singlePost__main > .entry-title {
    display: none;
}

/* Same post-title-echo as above, but content-post.php has a second branch
   (when is_custom_field_banner() + the banner title layout option select
   fallback to it) that prints a plain <h3 class="no-margin"> instead of the
   <h1 class="entry-title"> caught by the rule above - which this page's
   banner setup actually triggers, so "Properties" was rendering a second
   time in plain black text directly under the hero, on top of the real
   white heading already inside .innerhero. */
.single-idx-wrapper .singlePost__main > h3.no-margin {
    display: none;
}

/* No custom .innerhero handling needed anymore - it's no longer part of
   the wrapper page's post content at all. It's now rendered by the site's
   own "aios-inner-pages-banner" widget area (the same mechanism every
   other inner page already uses, wired up in header.php + the
   aios-initial-setup plugin), enabled for the idx-wrapper post type via
   the aios-metaboxes-banner-post-types option and reading the same default
   banner image (attachment 196) every other page already falls back to.
   Renders in the exact same DOM position as on every other page - outside
   and before the padded .inner-page-container - so none of the width
   breakout or margin-top offset hacks this used to need are necessary. */

/* Hiding .singlePost__recent alone isn't enough: the theme caps
   .singlePost__main to a fixed max-width (via --post-main-max-width,
   up to 838px at wide screens) specifically to leave room for that
   sidebar column, so removing the sidebar's content still leaves a gap
   unless this is reset too. */
.single-idx-wrapper .singlePost {
    --post-main-max-width: 100%;
    --post-section-gap: 0px;
}

.single-idx-wrapper .singlePost__main {
    max-width: 100% !important;
    /* The theme sets this to display:inline-flex (checked directly in
       single.min.css), which sizes the element to fit its content rather
       than filling the full page width like a normal block/flex
       container - meaning its actual width was unstable/unpredictable at
       the exact moment IDX Broker's own script measures its container to
       size the photo carousel, which lines up with the carousel producing
       wild fallback widths even with zero custom interference from us.
       Everything nested inside (including the two-column layout below)
       was also being laid out against that same unstable parent width. */
    display: flex !important;
    width: 100%;
}

/* No max-width or overflow constraint on #IDX-main anymore, by request -
   IDX Broker's own layout (including whatever breakpoint logic decides its
   column arrangement) may key off actual viewport width rather than its
   container's width, so artificially capping/clipping it here could easily
   be why the column layout was coming out squeezed/wrong instead of
   matching their unstyled page, which has no such constraint at all. */

/* =========================================================
   Visual language ported from the old iHomeFinder "equinox" details-page
   template (still present, unused, at
   aios-custom-ihomefinder/templates/details-page/equinox/ - the plugin
   itself is deactivated since the IDX Broker migration, but its SCSS was
   read directly to match colors/type/spacing exactly). It reuses the same
   --primary/--primary-text theme variables already used everywhere else in
   this file, so no new palette is introduced.
   ========================================================= */

/* ---- Header: status badge, address, price, featured icons, actions ---- */
#IDX-detailsHeader {
    padding: 24px 0;
}

#IDX-detailsHeader .IDX-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

/* Status badge - JS-built (legacyBuildEquinoxStyleDetailsHeader in
   idx-listings.js), since IDX Broker's own markup has no dedicated status
   element on this page at all, only a plain field value buried in the
   Basic Information panel. */
.legacy-idx-status {
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    width: max-content;
    max-width: 100%;
    background: var(--primary-text, #000);
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 300;
    line-height: 2.083;
    letter-spacing: 2.04px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

#IDX-detailsAddressStreet {
    font-size: 34px;
    font-weight: 400;
    color: var(--primary-text, #000);
    line-height: 1.058;
    font-family: var(--font-family-title, inherit);
}

/* IDX Broker crams city/state/zip AND beds/baths AND price into one plain
   text line here - the beds/baths/price parts are hidden since they're
   rebuilt properly below (as .legacy-idx-featured / .legacy-idx-price),
   leaving only the city/state/zip portion as the small uppercase label the
   old design shows under the address heading. */
#IDX-detailsAddressRegion {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.428;
    letter-spacing: 1.96px;
    text-transform: uppercase;
    color: var(--primary-text, #000);
    margin-top: 10px;
}

#IDX-detailsAddressRegion .IDX-detailsAddress__divider,
#IDX-detailsAddressRegion .IDX-detailsAddress__divider ~ span {
    display: none;
}

/* Big price heading - JS-built, styled identically to the address heading
   (same as the old design, where address/price/openhouse share one style). */
.legacy-idx-price {
    margin-top: 16px;
}

.legacy-idx-price strong {
    display: block;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.058;
    color: var(--primary-text, #000);
    font-family: var(--font-family-title, inherit);
}

/* Bed/bath/sqft/year-built/garage icon row - JS-built. */
.legacy-idx-featured {
    margin-top: 16px;
}

.legacy-idx-featured ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.legacy-idx-featured li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-text, #000);
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1.96px;
    text-transform: uppercase;
}

.legacy-idx-featured svg {
    display: block;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}

@media (min-width: 1024px) {
    .legacy-idx-featured ul {
        grid-template-columns: repeat(3, minmax(0, 231px));
        gap: 8px 24px;
    }

    .legacy-idx-featured li {
        font-size: 16px;
    }
}

/* Contact/Save action buttons - matches the old template's button look:
   solid dark pill by default, gold fill on hover. IDX Broker's own
   stylesheet (injected client-side alongside their widget content, so it
   loads after this file) ships its own default look for every .IDX-btn -
   !important here forces ours to actually win instead of quietly losing
   individual properties to theirs. */
#IDX-detailsHeaderActions .IDX-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto !important;
    background: var(--primary-text, #000) !important;
    border: 1px solid var(--primary-text, #000) !important;
    border-radius: 16px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 1.68px;
    padding: 12px 22px !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#IDX-detailsHeaderActions .IDX-btn:hover,
#IDX-detailsHeaderActions .IDX-saveProperty.IDX-btn__remove {
    background: var(--primary, #a59055) !important;
    border-color: var(--primary, #a59055) !important;
    color: #fff !important;
}

/* ---- Photo gallery ---- */
#IDX-primaryPhoto {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #eee;
    margin-bottom: 8px;
    min-width: 0;
}

/* Same min-width:auto issue as the grid containment above, one level
   closer to the source - pure containment, not touching the carousel's
   own sizing/behavior. */
#IDX-primaryPhoto .swiper-container {
    min-width: 0;
    overflow: hidden;
}

#IDX-primaryPhotoStatic img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    display: block;
}

/* Pulled up to overlay the bottom-right corner of the photo (matching the
   old design's floating "See All Photos" pill) via negative margin, since
   this is a real DOM sibling of #IDX-primaryPhoto rather than a child - it
   can't be position:absolute against it without restructuring the DOM. */
/* Used to be pulled up with a negative margin to overlay the bottom of the
   photo, back when the gallery was hidden and #IDX-primaryPhoto had a
   fixed, known height. Now that the real carousel is running (fixed at its
   actual source - see the aios-swiper-11 dequeue in inc/enqueue.php) its
   height is dynamic/content-driven again, so that overlay trick was
   landing on top of unrelated content below it. Left in normal flow now. */
#IDX-detailsSlidesActions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin: 16px 0 24px;
}

#IDX-detailsSlidesActions .IDX-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto !important;
    background: var(--primary-text, #000) !important;
    border: 1px solid var(--primary-text, #000) !important;
    border-radius: 16px !important;
    color: #fff !important;
    padding: 10px 18px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#IDX-detailsSlidesActions .IDX-btn:hover {
    background: var(--primary, #a59055) !important;
    border-color: var(--primary, #a59055) !important;
    color: #fff !important;
}

#IDX-detailsCourtesy {
    font-size: 12px;
    color: #888;
    padding: 6px 0;
}

/* Left entirely alone now - IDX Broker's own unstyled page runs this
   carousel with no problems, and every attempt to influence it from our
   side (CSS width overrides, JS destroy+reinit in both loop:true and
   loop:false modes) made it worse, not better. Trusting their default
   behavior completely: no custom sizing, no JS interference. */

/* No custom column layout here anymore, by request - #IDX-detailsPageContainer
   is left completely alone, using IDX Broker's own default layout exactly
   as it appears on their unstyled page (confirmed directly against it).
   The min-width:0 grid containment this used to need was working around
   the photo carousel's width bug, which is now fixed at its actual source
   (see the aios-swiper-11 dequeue in inc/enqueue.php) rather than patched
   around here. */

/* ---- Description ("About this property") ---- */
/* No heading element exists in IDX Broker's markup here at all - added via
   ::before rather than JS injection since it's static text, not derived
   from a field value. */
#IDX-detailsDescription {
    margin-bottom: 40px;
}

#IDX-detailsDescription::before {
    content: 'About this property';
    display: block;
    font-family: var(--font-family-title, inherit);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--primary-text, #000);
    margin-bottom: 8px;
}

#IDX-detailsDescription .IDX-clamp__target {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.714;
    color: var(--primary-text, #000);
}

#IDX-detailsDescriptionActions .IDX-btn {
    display: inline !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    color: var(--primary, #a59055) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: none;
}

@media (min-width: 1024px) {
    #IDX-detailsDescription::before {
        font-size: 28px;
    }
}

/* ---- Property Details accordion ---- */
/* This panel duplicates exactly what's now shown in the status badge /
   price / featured-icons row built by idx-listings.js, so it's hidden
   rather than restyled to avoid showing the same bed/bath/price/status
   data twice. */
#IDX-detailsBasicInfo {
    display: none;
}

/* No heading exists above these panels in IDX Broker's markup either -
   same ::before approach as the description above. */
#IDX-fieldsWrapper::before {
    content: 'Property Details';
    display: block;
    font-family: var(--font-family-title, inherit);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--primary-text, #000);
    margin-bottom: 8px;
}

@media (min-width: 1024px) {
    #IDX-fieldsWrapper::before {
        font-size: 28px;
    }
}

#IDX-fieldsWrapper .IDX-fieldContainer {
    margin-bottom: 0;
}

.IDX-panel-heading {
    padding: 0;
}

.IDX-panel-title a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e4e4e4;
    padding: 16px 12px;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1.96px;
    text-transform: uppercase;
    color: var(--primary-text, #000);
    text-decoration: none;
    cursor: pointer;
}

/* The plus/minus toggle icon SVGs below are the old template's own icons
   (as data URIs, ported verbatim), swapped based on the aria-expanded
   state IDX Broker's own collapse-toggle JS already maintains. */
.IDX-panel-title .IDX-icon-arrow-up {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: transparent url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQuNjY2OTkgMTRIMjMuMzMzNyIgc3Ryb2tlPSIjMzYyMzFDIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTQgMjRMMTQgNS4zMzMzMyIgc3Ryb2tlPSIjMzYyMzFDIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K") no-repeat center;
}

.IDX-panel-title a[aria-expanded="true"] .IDX-icon-arrow-up {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAyOCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQuNjY2NzUgMTQuMzEwM0gyMy4zMzM0IiBzdHJva2U9IiMzNjIzMUMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
}

.IDX-panel-body {
    padding: 8px 0;
}

/* One label/value row per field, matching the old accordion's fixed-width
   label column + flexible value column (rather than the wrapping grid this
   used before) - a flex row like this can't blow out horizontally the way
   a CSS grid track can, since the value column simply wraps within
   whatever space is left after the fixed label width. */
.IDX-field {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid #e4e4e4;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.714;
}

.IDX-field:last-child {
    border-bottom: none;
}

.IDX-field .IDX-label {
    flex-shrink: 0;
    width: 140px;
    font-weight: 400;
    color: var(--primary-text, #000);
}

.IDX-field .IDX-text {
    flex-grow: 1;
    min-width: 0;
    max-width: 300px;
    font-weight: 300;
    color: var(--primary-text, #000);
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .IDX-field .IDX-label {
        width: 184px;
    }
}

/* ---- Similar Listings ----
   Entirely separate component from .idx-listing-card (different class
   family - .IDX-similar-listings--*), rendered client-side via JS after
   page load, so never covered by any of the results-grid work. First pass
   gave it a plain white "content below photo" card - by request, this is
   now matched to .idx-listing-card's actual current design instead: text
   overlaid directly on the photo behind a dark gradient, bottom-anchored,
   white text (see .idx-listing-card/.idx-listing-card__content above for
   the pattern this mirrors). The markup shape differs (no separate
   status field, bed/bath/sqft/acre is one pre-joined text string rather
   than label/value pairs, and there's a dedicated "View Details" button
   .idx-listing-card doesn't have), so it's not a 1:1 class-for-class
   reuse, but every value below (sizes, colors, weights) is pulled
   directly from .idx-listing-card's own rules for a consistent look. */
#IDX-similar-listings-title {
    font-family: var(--font-family-title, inherit) !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    color: var(--primary-text, #000) !important;
    margin: 40px 0 20px !important;
}

@media (min-width: 1024px) {
    #IDX-similar-listings-title {
        font-size: 28px !important;
    }
}

#IDX-similar-listings-result {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 20px !important;
}

.IDX-similar-listings--item {
    position: relative !important;
    display: block !important;
    height: 0 !important;
    padding-bottom: 75% !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #f2efe9 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.IDX-similar-listings--item:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
    transform: translateY(-2px);
}

.IDX-similar-listings--item-MLSLogo {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 3 !important;
    max-width: 56px !important;
    height: auto !important;
    opacity: 0.85;
}

/* The <a> and its child <img> share this exact same class name - the
   element-type selectors (a.../ img...) scope each rule to just one or
   the other without needing separate class names. */
a.IDX-similar-listings--item-image {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    background: #f2efe9 !important;
}

img.IDX-similar-listings--item-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Dark gradient - .idx-listing-card gets this from a real sibling
   .idx-listing-card__image-overlay span; this markup has no equivalent
   element, so it's generated on the photo link itself instead. */
a.IDX-similar-listings--item-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.6));
}

.IDX-similar-listings--info {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column;
    padding: 14px !important;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

.IDX-similar-listings--details {
    display: flex !important;
    flex-direction: column;
}

.IDX-similar-listings--price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 6px !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    font-family: var(--font-family-title, inherit);
}

.IDX-similar-listings--bed-bath-sqft-acre {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin-bottom: 4px !important;
}

.IDX-similar-listings--address {
    font-size: 11px !important;
    color: #fff !important;
    opacity: 0.85;
}

.IDX-similar-listings--address-street {
    font-weight: 600 !important;
    color: #fff !important;
}

.IDX-similar-listings--redirect {
    margin-top: 10px;
}

.IDX-similar-listings--redirect .IDX-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    background: transparent !important;
    border: 1px solid #fff !important;
    border-radius: 16px !important;
    color: #fff !important;
    padding: 6px 14px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.IDX-similar-listings--redirect .IDX-btn:hover {
    background: var(--primary, #a59055) !important;
    border-color: var(--primary, #a59055) !important;
    color: #fff !important;
}

/* ---- Contact card ---- */
/* The old design used a separate contact-agent info block plus a modal
   popup form; IDX Broker keeps a real inline form in the sticky sidebar
   instead, which is a reasonable difference to keep rather than "fix" -
   only the button/radius language below is updated to match everything
   else on this page. */
#IDX-detailsContact {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 22px;
    margin-bottom: 20px;
}

#IDX-listingHeader {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 14px;
}

#IDX-listingHeader .IDX-pageHeader__listingID {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #888;
    text-transform: none;
    letter-spacing: normal;
}

#IDX-detailscontactContainer .IDX-control-label {
    font-size: 12px;
    font-weight: 600;
    color: #444;
}

#IDX-detailscontactContainer .IDX-input,
#IDX-detailscontactContainer textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 9px 10px;
    font-size: 13px;
    margin-bottom: 10px;
}

#IDX-submitBtn {
    background: var(--primary-text, #000);
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 16px 20px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.68px;
    font-size: 14px;
    width: 100%;
}

#IDX-submitBtn:hover {
    background: var(--primary, #a59055);
}

/* ---- Mortgage calculator trigger ---- */
/* IDX Broker's own bank-rate/mortgage-calculator dialog (#IDX-BankRateTool-
   Dialog, wired up by their inline script already loaded on this page) is
   fully functional but has no visible trigger button anywhere in their
   markup - the old design had a dedicated "Mortgage Calculator" button, so
   one is added via JS (legacyBuildEquinoxStyleDetailsHeader in
   idx-listings.js) linking to the exact anchor their own script listens
   for clicks on (href="#IDX-bankRate"). */
.legacy-idx-mortgage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: 1px solid var(--primary-text, #000);
    border-radius: 16px;
    color: var(--primary-text, #000);
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.68px;
    padding: 14px 20px;
    margin-top: 14px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.legacy-idx-mortgage-btn:hover {
    background: var(--primary, #a59055);
    border-color: var(--primary, #a59055);
    color: #fff;
}

/* ---- Share ---- */
/* ShareThis's own script inline-styles its individual network buttons
   (colored circles per network), which isn't practical to override cleanly
   - restyling is scoped to the surrounding wrapper/label to match the old
   design's "Share" box rather than fighting each network icon's own JS-set
   styles. */
#IDX-detailsShareThis {
    background: #f3f2f9;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    margin: 24px 0;
}

#IDX-detailsShareThis::before {
    content: 'Share';
    display: block;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.68px;
    text-transform: uppercase;
    color: var(--primary-text, #000);
    margin-bottom: 10px;
}

/* ---- Disclaimer ---- */
#IDX-detailsDisclaimer {
    color: #7d7d7d;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    margin-top: 8px;
}

.IDX-mlsSelectorRulesCourtesy img {
    display: block;
    height: auto;
    max-width: 200px;
}

/* ---- Prev/Next/Back navigation ---- */
/* Old design placed this at the bottom of the page; IDX Broker's own
   equivalent nav sits at the top instead (#IDX-detailsTopNav) - restyled in
   place rather than relocated via JS. */
#IDX-detailsTopNav,
#IDX-detailsTopNav #IDX-searchControls,
#IDX-detailsTopNav .IDX-inline-buttons {
    background: none !important;
    width: auto !important;
}

#IDX-detailsTopNav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid #e4e4e4;
}

/* IDX Broker's own stylesheet (injected client-side with their widget
   content, so it loads after this file and can win ties on properties we
   don't explicitly reset) styles every .IDX-btn as a solid full-width dark
   block by default. Explicitly resetting background/border/width/display
   with !important here, since setting only color/typography (as this rule
   used to) left their solid block styling showing through underneath. */
#IDX-detailsTopNav .IDX-btn__link {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    width: auto !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary-text, #000) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

#IDX-detailsTopNav .IDX-btn__link:hover {
    color: var(--primary, #a59055) !important;
}

/* ---- Audio description player ---- */
/* IDX Broker's built-in "Audio Description of Property" accessibility
   widget (#audioStreamPlayer, English/Español text-to-speech buttons for
   the listing description). Hidden by request - reads as an unexplained,
   unstyled UI element rather than an obviously useful feature, and this
   site doesn't otherwise offer per-listing audio anywhere else. */
#audioStreamPlayer {
    display: none !important;
}

/* ---- Similar listings ---- */
#IDX-detailsSimilar {
    margin-top: 28px;
}

#IDX-similar-listings-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 14px;
}

.IDX-similar-listings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.IDX-similar-listings--item {
    position: relative;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.IDX-similar-listings--item:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    transform: translateY(-3px);
}

.IDX-similar-listings--item-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.IDX-similar-listings--item-MLSLogo {
    position: absolute;
    top: 8px;
    right: 8px;
    max-width: 48px;
    opacity: 0.75;
    z-index: 2;
}

.IDX-similar-listings--info {
    padding: 12px 14px 16px;
}

.IDX-similar-listings--price {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}

.IDX-similar-listings--bed-bath-sqft-acre {
    font-size: 12px;
    color: #888;
    margin: 2px 0 6px;
}

.IDX-similar-listings--address {
    font-size: 12px;
    color: #555;
    line-height: 1.4;
}

.IDX-similar-listings--redirect {
    margin-top: 10px;
}

.IDX-similar-listings--redirect .IDX-btn {
    display: inline-block !important;
    width: auto !important;
    background: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--primary, #a59055) !important;
    border: 1px solid var(--primary, #a59055) !important;
    border-radius: 3px !important;
    padding: 6px 12px !important;
}

.IDX-similar-listings--redirect .IDX-btn:hover {
    background: var(--primary, #a59055) !important;
    color: #fff !important;
}

/* =========================================================
   Homepage "Featured Properties" slider (legacy_featured_properties
   shortcode, rendered inside the "Home: Properties" widget area), wrapped
   in a Splide carousel (core Splide already shipped site-wide by the
   aios-slider plugin - initialized in idx-listings.js). Card style
   (.lfp-*) is ported from the old Optima Express-era homepage plugin -
   dark gradient overlay with price/address/beds-baths in white text
   directly on the photo, plus a dark MLS-info footer bar - kept
   deliberately different from the lighter .idx-listing-card style used on
   the search-results/listing-details pages, per explicit preference for
   this spot to keep its previous look.
   ========================================================= */
.legacy-featured-slider {
    position: relative;
    padding: 0 44px;
}

.legacy-featured-slider .splide__track {
    overflow: hidden;
}

/* Fixed, explicit height set at every level of Splide's own flex chain
   (track/list/slide all use height:100% or flex-stretch internally to
   propagate a height downward) rather than relying on that percentage
   chain resolving the way we want on its own - if it resolves against
   anything less than intended anywhere in there, flexbox's default
   flex-shrink:1 will happily compress .lfp-card-image below the size its
   aspect-ratio wants, which is what produced the squashed, barely-visible
   photos. A fixed pixel height removes that ambiguity entirely. */
.legacy-featured-slider .splide__track,
.legacy-featured-slider .splide__list,
.legacy-featured-slider .splide__slide {
    height: 300px;
}

.legacy-featured-slider .splide__slide .lfp-card {
    height: 100%;
}

.lfp-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.lfp-card:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    transform: translateY(-2px);
}

.lfp-card-image {
    position: relative;
    width: 100%;
    /* flex:1 (fills whatever's left after the footer's natural height)
       instead of aspect-ratio - with a fixed-height card there's no need
       for aspect-ratio to derive a height, and min-height:0 is required
       here since flex items default to min-height:auto (their content
       size), which would otherwise still fight this against shrinking. */
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    background-size: cover;
    background-position: center;
    background-color: #f2efe9;
}

.lfp-card-overlay {
    /* Was position:absolute + inset:0 - a flex item's flex-computed
       height (.lfp-card-image's flex:1 1 auto above) doesn't reliably
       count as a "definite" height for an absolutely-positioned child's
       inset to resolve against, so this was silently shrink-wrapping to
       its own content instead of actually filling the photo - both text
       blocks ending up stacked near the top with dead space below rather
       than spread across the full height via justify-content:space-between,
       which needs the box to actually BE full height to have anything to
       distribute. Filling it via flex sizing instead of position/inset
       doesn't have that ambiguity. */
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55));
    padding: 14px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

.lfp-card-address {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

.lfp-card-address strong {
    display: block;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    margin-bottom: 2px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.lfp-card-price {
    font-size: 22px;
    font-weight: 600;
    /* Explicit, not inherited - nothing in this component set line-height
       anywhere below .lfp-card-address, so this and .lfp-card-features li
       were both inheriting whatever line-height cascaded down from the
       page itself, which is genuinely different on a homepage template
       vs a regular inner page in this theme - same text, same font-size,
       but a taller rendered line box on one page than the other, which is
       what the confirmed 74px vs 106px difference actually was (nowrap
       alone didn't fix it because it was never about wrapping). */
    line-height: 1.2;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
}

.lfp-card-features {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    /* !important required - the parent theme's defaults.min.css has
       "#content ul{margin:0 0 32px;line-height:1.7}" (specificity 1,0,1:
       one ID + one element), which beats this plain class selector
       outright and was winning for ALL FOUR margin sides (not just
       adding a stray bottom margin) - actual margin-top was really 0,
       not the 8px this rule asked for, and margin-bottom was really
       32px, not 0. Only applies inside #content (the inner-page article
       wrapper), which is exactly why the homepage version - rendered
       from a widget, never inside #content - never had this problem;
       found via DevTools computed-style rule tracing. */
    margin: 8px 0 0 !important;
    list-style: none;
    padding: 0;
}

.lfp-card-features li {
    font-size: 11px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.lfp-card-features li span {
    display: block;
}

.lfp-card-features li span:first-child {
    font-weight: 400;
    opacity: 0.85;
}

.lfp-card-footer {
    background: #222;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 12px 14px;
    transition: background-color 0.2s ease;
    /* Some subtypes ("MLS# SW26171075 - Single Family Residence") are long
       enough to wrap onto a second line, which grew the footer's own
       height and - since .lfp-card-image only fills whatever's left via
       flex:1 - unevenly ate into different cards' photo areas depending
       on their MLS text length. Forced to a single line (truncated
       instead of wrapped) so every card's footer takes exactly the same
       height regardless of content. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.lfp-card:hover .lfp-card-footer {
    background: var(--primary, #a59055);
}

.legacy-featured-slider .splide__arrow {
    background: #fff;
    border: 1px solid rgba(165, 144, 85, 0.35);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: 1;
}

.legacy-featured-slider .splide__arrow svg {
    fill: var(--primary, #a59055);
}

.legacy-featured-slider .splide__arrow:hover {
    background: var(--primary, #a59055);
}

.legacy-featured-slider .splide__arrow:hover svg {
    fill: #fff;
}

.legacy-featured-slider .splide__arrow--prev {
    left: -4px;
}

.legacy-featured-slider .splide__arrow--next {
    right: -4px;
}

.legacy-featured-slider .splide__arrow:disabled {
    opacity: 0.35;
}

@media (max-width: 600px) {
    .legacy-featured-slider {
        padding: 0 36px;
    }
}

/* =========================================================
   Full-page listings grid (legacy_property_grid shortcode) - the
   [optima_express_featured]/[optima_express_toppicks] replacement for
   pages that used to list every active (or sold) listing, rather than a
   curated homepage handful. Reuses the exact same .lfp-card markup/style
   as the homepage slider above, just laid out in a responsive grid
   instead of a Splide track, so the two spots read as the same design
   language rather than two different card styles on the same site. */
/* Breaks out of the theme's standard page wrapper (#inner-page-wrapper
   .inner-page-container .site-container, capped at max-width:1440px with
   up to 85px of side padding - global.min.css/innerpage.min.css) to match
   the homepage's Featured Properties section instead, which isn't nested
   in that wrapper at all (.ftproperties, only 24px side padding, capped
   at 1920px only on very wide screens - homepage.min.css). Same 4-column
   grid on both, but dividing a much narrower total width inside the
   normal page wrapper was making these cards noticeably smaller than the
   homepage ones despite identical column math. */
.legacy-property-grid {
    width: 100vw;
    max-width: 1920px;
    margin-left: 50%;
    margin-top: 24px;
    margin-bottom: 48px;
    transform: translateX(-50%);
    /* A bit more than the homepage section's own 24px - 100vw (used for
       the breakout above) measures the full viewport including the
       scrollbar track, so it overshoots the actual visible content width
       by however wide the scrollbar is (~15-17px on a typical desktop
       browser), reading as a touch wider than the homepage section even
       with the padding value technically matching. */
    padding: 0 40px;
    box-sizing: border-box;
}

.legacy-property-grid .lpg-count {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--primary-text, #000);
    margin-bottom: 20px;
}

.lpg-grid {
    display: grid;
    /* Fixed column count (matching the homepage slider's perPage:4),
       not auto-fill/minmax - auto-fill packs in as many 280px-minimum
       columns as fit the container, which on a normal desktop width
       meant significantly more than 4 (much narrower) columns here than
       on the homepage, even though both sit in a similarly wide
       container - that's why these cards read as noticeably smaller
       than the homepage ones despite using the exact same component. */
    grid-template-columns: repeat(4, 1fr);
    /* Explicit - default (stretch) makes every .lpg-grid-item match the
       tallest row content, but .lfp-card inside has its own fixed height,
       so a stretched wrapper just leaves dead space below the card
       instead of the card itself growing - confirmed via DevTools
       (clicking the gap selected .lpg-grid-item, not anything inside the
       card). Exact same root cause as the earlier
       #idx-results-category-active grid fix on the results page. */
    align-items: start;
    gap: 24px;
}

@media (max-width: 1024px) {
    .lpg-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .lpg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* .lfp-card-image relies on a fixed-height ancestor to give it something
   to fill (flex:1 1 auto + min-height:0, same as the slider's
   height-propagation chain) - a grid item has no equivalent chain of its
   own, so the height is set directly on the card here instead. A square
   aspect-ratio was tried here to guarantee even card heights across a
   row, but made the photo area tall enough that the lower portion often
   showed empty driveway/ground/sky, reading as too much dead space - back
   to the original fixed height, which still gives even row heights (every
   card gets the same fixed height regardless of content) on every page
   that uses this shortcode (Properties, Sold Properties, Canyon Lake and
   every community page - they all share this one rule), just shorter. */
/* Explicit height on the wrapper itself too, not just the card inside it -
   same "set it at every level of the chain, don't rely on it resolving
   on its own" approach the homepage slider already uses successfully
   (see .legacy-featured-slider .splide__track/__list/__slide above). */
.lpg-grid-item {
    height: 300px;
    overflow: hidden;
}

.lpg-grid-item .lfp-card {
    height: 100%;
}

.lpg-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--alternative-text, #9c9c9c);
    font-size: 15px;
}

@media (max-width: 600px) {
    .lpg-grid {
        grid-template-columns: 1fr;
    }
}

/* Neighborhood map (Leaflet, initialized in idx-listings.js) - Leaflet
   requires an explicit pixel height on its container or the map renders
   with zero height, so this can't just be left to flow with content. */
.lpg-map {
    height: 420px;
    border-radius: 4px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.lpg-map .leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
}

.lpg-map .leaflet-popup-content {
    margin: 0;
    width: 200px !important;
}

.lpg-map-popup {
    display: block;
    text-decoration: none;
    color: var(--primary-text, #000);
    font-family: 'Montserrat', sans-serif;
}

.lpg-map-popup img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.lpg-map-popup-price {
    display: block;
    padding: 8px 10px 0;
    font-weight: 600;
    font-size: 14px;
}

.lpg-map-popup-address {
    display: block;
    padding: 2px 10px 10px;
    font-size: 12px;
    color: var(--alternative-text, #9c9c9c);
}

/* =========================================================
   Homepage quicksearch (Home: Search widget) - IDX Broker's own
   "IMPress Omnibar" widget ([idx-omnibar-extra] shortcode, styles="0" so
   none of their default CSS loads), restyled here to match this site
   instead of fighting a hand-built redirect to reach their results page.
   Sits inside the existing .quicksearch section (gold/tan background,
   defined in the parent theme's homepage.css) exactly like the old
   custom form did.

   Values below are copied exactly from the OLD custom form's own CSS
   (.quicksearch #formsearch .quicksearch__field button/select, and the
   site's global .primary-button.invert-button recipe it used for the
   Search button) rather than approximated - underline-style transparent
   fields with a bottom border, not filled white boxes, and the same
   white/dark-text button that darkens on hover.

   The child theme's own homepage.css (aios-mobile-first-homepage-child-css)
   loads AFTER this stylesheet on the homepage and has bare element
   selectors like "button{background:transparent;border:none}" and
   "button{width:45px;height:45px}" scoped to other homepage sections -
   at equal specificity, later wins, so those were silently overriding
   this form's actual <button>/<input> elements. !important on the
   properties that matter forces this scoped styling to actually win,
   same fix as the earlier #IDX-detailsTopNav/.IDX-btn cascade issue. */
.idx-omnibar-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 24px 10px;
}

.idx-omnibar-form .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.idx-omnibar-input,
.idx-omnibar-min-price,
.idx-omnibar-price,
.idx-omnibar-bed,
.idx-omnibar-bath {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    padding: 12px 10px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: solid 1px #9c9c9c !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--secondary-text, #fff) !important;
    font-family: inherit;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    box-sizing: border-box;
}

.idx-omnibar-input::placeholder,
.idx-omnibar-min-price::placeholder,
.idx-omnibar-price::placeholder,
.idx-omnibar-bed::placeholder,
.idx-omnibar-bath::placeholder {
    color: var(--secondary-text, #fff);
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* flex-sizing for the location field lives on .idx-omnibar-form >
   div.awesomplete further below instead of directly on this input - once
   IDX Broker's JS wraps it in that div, this input is no longer a direct
   flex child of .idx-omnibar-form itself. */

.idx-omnibar-extra {
    flex: 1 1 110px;
    min-width: 90px;
}

.idx-omnibar-extra .screen-reader-text {
    display: none;
}

.idx-omnibar-extra label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--secondary-text, #fff);
    opacity: 0.7;
}

.idx-omnibar-extra-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto !important;
    height: 48px !important;
    min-height: 48px;
    padding: 10px !important;
    margin: 0 !important;
    border: solid 1px var(--secondary, #fff) !important;
    border-radius: 0 !important;
    background-color: var(--secondary, #fff) !important;
    color: var(--primary-text, #000) !important;
    font-weight: 500;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.17em;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.idx-omnibar-extra-button:hover {
    border-color: var(--primary-hover, #474747) !important;
    background-color: var(--primary-hover, #474747) !important;
    color: var(--secondary-text, #fff) !important;
}

.idx-omnibar-extra-button span {
    white-space: nowrap;
}

.idx-omnibar-extra-button i {
    color: inherit;
}

@media (max-width: 767px) {
    .idx-omnibar-form {
        flex-direction: column;
        align-items: stretch;
    }

    .idx-omnibar-extra-button {
        width: 100% !important;
    }
}

/* The location field is wrapped by IDX Broker's own JS in a div.awesomplete
   (the "Awesomplete" autocomplete library their omnibar script uses) once
   it initializes - with styles="0" we get none of the CSS that normally
   makes its suggestion list float over the page, so it was rendering in
   normal document flow instead, pushing the rest of the page down as
   suggestions appeared, and losing to whatever z-index the rest of the
   page has once a value was picked. Recreated the essential positioning
   rules from IDX Broker's own idx-omnibar.min.css (colors/spacing
   restyled to match the site instead of their default look). */
.idx-omnibar-form > div.awesomplete {
    position: relative;
    display: block;
    flex: 2 1 240px;
}

div.awesomplete > ul {
    position: absolute !important;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1000 !important;
    min-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    background: #fff !important;
    opacity: 1 !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    max-height: 260px;
    overflow-y: auto;
}

div.awesomplete > ul:empty,
div.awesomplete > ul[hidden] {
    display: none;
}

div.awesomplete > ul > li {
    padding: 8px 12px;
    color: var(--primary-text, #000);
    font-size: 13px;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

/* A solid var(--primary) gold highlight here is the exact same gold as
   the .quicksearch section's own background right above this dropdown -
   the highlighted row was blending into the page behind it, reading as
   a hole/transparency in the dropdown rather than a highlighted row.
   Using a soft tint of it instead keeps a highlight clearly visible
   against both the dropdown's white background and dark text. */
div.awesomplete > ul > li:hover,
div.awesomplete > ul > li[aria-selected="true"] {
    background: rgba(165, 144, 85, 0.15) !important;
    color: var(--primary-text, #000) !important;
}

div.awesomplete mark {
    background: none;
    font-weight: 700;
    color: inherit;
}

/* Awesomplete's own JS adds a class="visually-hidden" <span
   role="status" aria-live="assertive"> next to the input purely to
   announce the selected value to screen readers - it's meant to be
   invisible to sighted users, but that invisibility comes from IDX
   Broker's own CSS rule for this exact class (".visually-hidden{
   position:absolute;clip:rect(0,0,0,0)}"), which we lost along with
   everything else when disabling their stylesheet. Without it the span
   was rendering as plain visible text sitting right under the field,
   duplicating the location value in the location field's own space and
   making it visually taller than every other field next to it. */
.idx-omnibar-form .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}