/* ---- Montserrat (self-hosted, same subsets production's theme build serves) ----
   The plugin bundles the four weights it uses so SRBE pages don't depend on the
   theme's dist build having the @font-face rules (the local/dev theme build lacks
   them; production's has them — there this is a harmless same-origin duplicate). */
@font-face { font-display: swap; font-family: Montserrat; font-style: normal; font-weight: 400; src: url(../fonts/montserrat-latin-400-normal.woff2) format("woff2"); }
@font-face { font-display: swap; font-family: Montserrat; font-style: normal; font-weight: 500; src: url(../fonts/montserrat-latin-500-normal.woff2) format("woff2"); }
@font-face { font-display: swap; font-family: Montserrat; font-style: normal; font-weight: 600; src: url(../fonts/montserrat-latin-600-normal.woff2) format("woff2"); }
@font-face { font-display: swap; font-family: Montserrat; font-style: normal; font-weight: 700; src: url(../fonts/montserrat-latin-700-normal.woff2) format("woff2"); }

/* Root search form — production parity (.abe-flex-form / vrpResultsSearchForm):
   ONE white bordered box holding Filters + fields + Search on a single row.
   Montserrat throughout, matching the theme's form typography. */
.srbe-search-form { position: relative; } /* anchors the absolutely-positioned filters panel */

/* Page heading — production's "Search Results" computes to Montserrat 700 28px
   #4a4a4a (an entry-title); the theme's default h1 is much larger. */
main.srbe-page h1 {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #4a4a4a;
    margin: 0 0 20px;
}

.srbe-search-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
    padding: 1.2rem;                /* production: .abe-jumbo form { padding: 1.2rem } */
    background-color: #fff;
    border: 1px solid #44444470;   /* production .abe-flex-form box border */
    border-radius: 2px;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-sizing: border-box;
}

/* Each field (Where/When/People/Pets) is its own bordered cell. Mobile: full width.
   min-width:0 lets the cell shrink below the intrinsic width of its <select> options
   (otherwise the longest option forces the box wider than the viewport). */
.srbe-search-container > div {
    display: flex;
    align-items: center;
    flex: 1 1 100%;
    min-width: 0;
    min-height: 2.6rem;             /* production field height */
    padding: 0 0.75rem;
    background-color: #fff;
    border: 1px solid #36424A;      /* production field border */
    border-radius: 2px;
    box-sizing: border-box;
}

/* Filters + Search pills sit inside the box. Order places Filters first / Search last
   on desktop; on mobile they drop below the stacked fields and share one row. */
.srbe-search-container .srbe-filters-toggle { order: 1; }
.srbe-search-container .srbe-search-submit  { order: 2; }
.srbe-search-container .srbe-filters-toggle,
.srbe-search-container .srbe-search-submit {
    flex: 1 1 46%;                  /* mobile: two equal pills sharing a row */
    justify-content: center;
    min-height: 2.6rem;
}

/* Doubled-up selector: the theme's input[type=submit] rule (0,1,1) out-specifies a
   lone class and shrinks the padding — production's Search pill is 144px wide. */
.srbe-search-submit,
.srbe-search-container .srbe-search-submit {
    min-width: 75px;               /* production .abe-jumbo .abe-button */
    padding: 8px 40px;
    background-color: #428227;
    color: #fff;
    border: 1px solid #428227;
    border-radius: 20px;            /* production .abe-button pill */
    font-family: inherit;
    font-weight: 500;
    font-size: 1rem;
    /* !important: a theme button rule forces uppercase; production shows title case. */
    text-transform: capitalize !important;
    cursor: pointer;
}
.srbe-search-submit:hover {
    background-color: #509E2F;
    border-color: #509E2F;
}

/* Inner controls are borderless — the cell provides the border */
.srbe-search-container .srbe-date-range,
.srbe-search-container #people-select,
.srbe-search-container #pets-select {
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: transparent;
    text-align: left;
    font-family: inherit;
    font-size: 16px;               /* production computed: 16px Montserrat */
    font-weight: 500;              /* production computed: 500 */
    color: #36424A;
}

/* Production select chevron (measured on skyrun.com): appearance:none + inline SVG
   arrow, fill #023459, right-positioned. Replaces the native browser arrow on the
   form's People/Pets selects and the toolbar's per-page/sort selects. */
.srbe-search-container #people-select,
.srbe-search-container #pets-select,
.srbe-filters-panel select,
.srbe-perpage,
.srbe-sort {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8' width='18'><path fill='%23023459' d='M0,0l6,8l6-8'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.15rem center;
    padding-right: 26px;
}

/* The "Where" cell hosts a select2 widget — let it fill the cell borderlessly
   so the cell's own border is the visible frame, and match the Montserrat text.
   NOTE: the cell keeps the SAME padding as the other cells (0 0.75rem) — the cells
   are flex-basis:0, so padding adds to the final width; unequal padding = unequal
   boxes (production has all four equal). The select2 selection is padding-free. */
.srbe-search-container .srbe-where-container .select2-container { width: 100% !important; }
.srbe-search-container .srbe-where-container .select2-selection {
    border: none !important;
    background: transparent !important;
    height: 100% !important;
    display: flex !important;
    align-items: center;
    padding: 0;
}
.srbe-search-container .srbe-where-container .select2-selection__rendered {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    font-weight: 500;              /* production computed: 500 */
    color: #444444;                /* production computed: rgb(68,68,68) */
    line-height: normal;
    padding: 0 26px 0 0 !important;
    /* Production paints its select chevron ON the rendered span (verified:
       background-position 100% 50% on .select2-selection__rendered). */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8' width='18'><path fill='%23023459' d='M0,0l6,8l6-8'/></svg>");
    background-repeat: no-repeat;
    background-position: 100% 50%;
    width: 100%;
}
/* Production hides select2's own grey arrow (the chevron above replaces it). */
.srbe-search-container .srbe-where-container .select2-selection__arrow { display: none; }

/* Tablet and up: everything on one row. Filters first, fields, Search last.
   Production (measured): Where/When/People/Pets are ALL EQUAL width (~218-221px
   at 1440 and 1920) — Where is NOT wider. flex: 1 1 0 divides space equally. */
@media (min-width: 768px) {
    .srbe-search-container > div { flex: 1 1 0; min-width: 110px; }
    .srbe-search-container .srbe-filters-toggle { order: -1; flex: 0 0 auto; }
    .srbe-search-container .srbe-search-submit  { order: 2;  flex: 0 0 auto; }
}

/* ---- Root search filters panel (show-filters="1") ---- */

/* Filters toggle — a green pill matching the Search button (production
   #abe-filters-activator), sits inside the box beside the fields/Search. Opens the
   collapsible panel (anchored to .srbe-search-form). Doubled selector: a theme
   button rule (0,1,1+) otherwise shrinks the font to 14px (production: 16px). */
.srbe-filters-toggle,
.srbe-search-form .srbe-filters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 14px;
    background-color: #428227;
    color: #fff;
    border: 1px solid #428227;
    border-radius: 20px;
    cursor: pointer;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 500;
    font-size: 1rem;
    text-transform: capitalize !important;
    white-space: nowrap;
}

.srbe-filters-toggle:hover {
    background-color: #509E2F;
    border-color: #509E2F;
}

/* filter1.svg icon (same asset production uses in #abe-filters-activator). */
.srbe-filters-toggle img {
    width: auto;
    height: 1.25em;
}

.srbe-filters-badge {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    background: #fff;
    color: #428227;
    border-radius: 9px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

/* Filters popup — production parity (.abe-filters-wrapper, all values measured on
   skyrun.com): a fixed, centered white panel. Mobile: pinned top 68px to bottom,
   scrollable. Desktop (>=1024px): centered at top 20%, max-width 900px, 75vh cap. */
.srbe-filters-panel {
    position: fixed;
    top: 68px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 auto;
    z-index: 99999;
    background: #fff;
    padding: 15px 15px 20px;
    border: 1px solid #444444;
    border-radius: 2px;
    overflow-x: hidden;
    overflow-y: scroll;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-sizing: border-box;
}
@media (min-width: 1024px) {
    .srbe-filters-panel {
        left: 10%;
        right: 10%;
        width: 90%;
        top: 20%;
        bottom: auto;
        height: auto;
        max-height: 75vh;
        max-width: 900px;
        overflow-y: scroll;
    }
}

.srbe-filters-panel[hidden] {
    display: none;
}

.srbe-filters-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.srbe-filters-header h3 {
    margin: 0;
}

/* Production .abe-filter-close: red round button, white x, darker red on hover. */
.srbe-filters-close {
    cursor: pointer;
    color: #fff;
    background: #bd0707;
    border: none;
    font-size: 14px;
    margin: 0 0 10px 0;
    padding: 4px 8px;
    border-radius: 20px;
    line-height: 1.4;
}
.srbe-filters-close:hover { background: #a40505; }
.srbe-filters-close i { color: #fff; }

/* Bedrooms + Bathrooms selects left, Clear Filters right (production fields-row). */
.srbe-filters-fields-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.srbe-filters-selects {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.srbe-filters-panel select {
    height: 2.6rem;
    min-width: 200px;
    padding: 0 26px 0 8px;
    border: 1px solid #a5bac5;      /* production .abe-filters-wrapper select */
    border-radius: 2px;
    background-color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: #36424A;
    cursor: pointer;
}

/* Production section title: 18px/600, dashed underline across the panel. */
.srbe-filter-title {
    display: block;
    margin-top: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #444444;
    border-bottom: 1px dashed #495c65;
}

/* Amenity/Type checkbox grids: 200px items that wrap (production .attr-item /
   .type-item; production's .type-checkboxes adds a 20px bottom margin). */
.srbe-amenities-checkboxes,
.srbe-type-checkboxes {
    display: flex;
    flex-wrap: wrap;
    margin-top: 6px;
}
.srbe-type-checkboxes { margin-bottom: 20px; }
.srbe-attr-item {
    display: flex;
    width: 200px;
    margin: 0 12px 2px 0;
    align-items: center;
}
.srbe-attr-item label {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    font-size: 16px;
    font-weight: 500;
    color: #444444;
    cursor: pointer;
}
.srbe-attr-item input { margin: 4px 0.25rem 0 0; flex: 0 0 auto; }

/* Green pill buttons (production .abe-button): Clear right-aligned, Apply full width. */
.srbe-clear-filters,
.srbe-apply-filters {
    background-color: #428227;
    border: 1px solid #428227;
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    padding: 8px 40px;
    text-transform: capitalize !important;
    white-space: nowrap;
}
.srbe-clear-filters:hover,
.srbe-apply-filters:hover {
    background-color: #509E2F;
    border-color: #509E2F;
}
.srbe-apply-filters {
    display: block;
    width: 100%;
    margin-top: 16px;
}

/* ---- Nightly price range (production's dual-thumb slider, css.css "Multi range
   slider" block, scoped to the panel) ---- */
.srbe-price-range-wrapper {
    font-weight: 700;
    padding: 10px 0;
}
.srbe-price-range-wrapper span { color: #002c2f; }
.srbe-price-range-wrapper p { font-size: 18px; margin-bottom: 8px; }
.srbe-price-range-wrapper .note { font-weight: 400; font-size: 12px; }

.srbe-filters-panel [slider] {
    position: relative;
    height: 14px;
    border-radius: 10px;
    text-align: left;
    margin: 15px 10px 10px;
}
.srbe-filters-panel [slider] > div {
    position: absolute;
    left: 13px;
    right: 15px;
    height: 16px;
    border: 1px solid #eee;
    border-radius: 6px;
}
.srbe-filters-panel [slider] > div > [inverse-left] {
    position: absolute;
    left: 0;
    height: 14px;
    border-radius: 10px;
    background-color: #fff;
    margin: 0 7px;
}
.srbe-filters-panel [slider] > div > [inverse-right] {
    position: absolute;
    right: 0;
    height: 14px;
    border-radius: 10px;
    background-color: #fff;
    margin: 0 7px;
}
.srbe-filters-panel [slider] > div > [range] {
    position: absolute;
    left: 0;
    height: 14px;
    border-radius: 14px;
    background-color: #428227;
}
.srbe-filters-panel [slider] > div > [thumb] {
    position: absolute;
    top: -7px;
    z-index: 2;
    height: 28px;
    width: 28px;
    text-align: left;
    margin-left: -11px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    background-color: #fff;
    border-radius: 50%;
    outline: none;
}
.srbe-filters-panel [slider] > input[type="range"] {
    position: absolute;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    z-index: 3;
    height: 14px;
    top: -2px;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}
.srbe-filters-panel [slider] > input[type="range"]::-moz-range-track {
    -moz-appearance: none;
    background: transparent;
    color: transparent;
}
.srbe-filters-panel [slider] > input[type="range"]:focus { outline: none; }
.srbe-filters-panel [slider] > input[type="range"]::-moz-range-thumb {
    pointer-events: all;
    width: 28px;
    height: 28px;
    border-radius: 0;
    border: 0 none;
    background: red;
}
.srbe-filters-panel [slider] > input[type="range"]::-webkit-slider-thumb {
    pointer-events: all;
    width: 28px;
    height: 28px;
    border-radius: 0;
    border: 0 none;
    background: red;
    -webkit-appearance: none;
}

/* ---- Widget header: title + optional "View All" link (carousels, FYR) ---- */
.srbe-widget-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    /* No flex-wrap: keep "View All" on the title's line, always at the right. With
       wrapping, a long title pushed the link to its own line where space-between
       left-aligned it — so the link's side varied by title length. The title text
       wraps within its own flex slot instead (min-width:0 lets it shrink to do so). */
}

.srbe-widget-title {
    margin: 0;
    min-width: 0;
}

.srbe-view-all {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: #006ba6;
    text-decoration: none;
    white-space: nowrap;
}

.srbe-view-all:hover {
    text-decoration: underline;
}

/* ---- Shared SRBE unit-card visuals (results, Find Your Rental, carousels) ----
   CardRenderer emits identical .srbe-card markup in all three contexts, fully
   independent of the theme's .abe-item/.unit-banner/etc. — SRBE no longer shares
   any selector with the theme's global css.css, so it can never collide with it
   again (the bug class behind the card-collapse/image-min-height issues we fixed
   earlier). Visual recipe ported from the theme's vrp_root_carousel_css, renamed. */

.srbe-cards .srbe-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Fill the grid cell — don't shrink to content. */
    width: 100%;
    max-width: 100%;
    /* Content height — the card is "photo + text" tall. We deliberately do NOT
       stretch to fill the Slick slide (the carousel track sets align-items:
       flex-start), which is what previously left the description clipped/empty. */
    height: auto;
    margin: 0;
    background-color: #fff;
    border: none;
    border-radius: 2px;
    box-shadow: 0 0 3px 3px #6d6d6d17;
    overflow: hidden;
}

/* Aspect ratio lives on the container; the image fills + crops to it so card
   heights stay consistent. min-height:0 keeps the image from being forced tall. */
.srbe-cards .srbe-card-media {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

.srbe-cards .srbe-card-media-link,
.srbe-cards .srbe-card-media-link a {
    display: block;
    width: 100%;
}

.srbe-cards .srbe-card-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 0;
    object-fit: cover;
}

/* ---- In-card photo gallery (results/FYR cards only — CardRenderer($unit, true)) ----
   Slides size from image natural dimensions (height:auto + aspect-ratio:3/2, same
   as carousel cards) — no height:100% chains through nested Swiper layers, which
   are fragile and collapse to 0 in certain nested-flex contexts. The outer
   .srbe-card-media { height: 230px; overflow: hidden } clips the gallery to the
   desired height, exactly as production's lightSlider did. */
.srbe-cards .srbe-card-gallery {
    width: 100%;
}

.srbe-cards .srbe-card-gallery .swiper-slide a {
    display: block;
    width: 100%;
}

/* Photo-gallery arrows — white chevrons over the photo (production parity), using
   a Font Awesome <i> (consistent with the carousel arrows). Persistent on every
   viewport since the gallery loops (no arrow is ever disabled).
   The !important flags are NOT gratuitous: the theme's css.css has an UNSCOPED rule
   at @media (max-width:1023px) — `.swiper-button-prev, .swiper-button-next { color:
   transparent !important; left/right: -35px !important }` plus `::after { content:
   none !important }` — written for its own FYR swiper but applied to ALL swiper
   buttons, which pushed ours off-card and made them invisible on mobile. These
   higher-specificity (.srbe-cards …, 0,3,x) !important rules reclaim them. */
.srbe-cards .srbe-card-gallery .swiper-button-prev,
.srbe-cards .srbe-card-gallery .swiper-button-next {
    width: 34px !important;
    height: 44px !important;
    margin-top: -22px;
    background: transparent !important;
}
.srbe-cards .srbe-card-gallery .swiper-button-prev:after,
.srbe-cards .srbe-card-gallery .swiper-button-next:after {
    content: none !important; /* suppress Swiper's own glyph (desktop); we use the <i> */
}
.srbe-cards .srbe-card-gallery .swiper-button-prev i,
.srbe-cards .srbe-card-gallery .swiper-button-next i {
    color: #fff !important;
    font-size: 26px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); /* legibility over any photo */
}
.srbe-cards .srbe-card-gallery .swiper-button-prev { left: 6px !important; }
.srbe-cards .srbe-card-gallery .swiper-button-next { right: 6px !important; }

/* Card banner — production .unit-banner, measured live on skyrun.com results:
   170x30 green strip at the photo's top-left with a 20px rounded bottom-right
   corner; 18px/1.6 on the div vertically centers the 12px span. */
.srbe-cards .srbe-card-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 30px;
    width: 170px;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: #428227;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.6;
    border-bottom-right-radius: 20px;
    text-align: center;
}
.srbe-cards .srbe-card-badge span {
    font-size: 12px;
}

/* Production .unit-banner.luxurycollection: black, white text (not gold). */
.srbe-cards .srbe-card-badge.srbe-badge-luxury {
    background-color: #000;
    color: #fff;
}

/* Favorite heart — top-right of the photo. Grey by default, red when saved/hovered.
   srbe-favorites.js toggles .is-fav from localStorage. */
/* Card heart — production values (measured on skyrun.com card hearts,
   .abe-image-container .abe-favorite): white 30px circle at top:5/right:10,
   heart green rgba(66,130,39,.73) -> BLUE #006BA6 when favorited. Production
   has no hover recolor on unfavorited hearts (just the 0.3s transition). */
.srbe-cards .srbe-card-fav {
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}
.srbe-cards .srbe-card-fav i {
    color: rgba(66, 130, 39, 0.73);   /* production: #428227ba */
    font-size: 1rem;
    margin-top: 2px;
}
.srbe-cards .srbe-card-fav.is-fav i {
    color: #006BA6;                    /* production .abe-favorite.active */
}

/* Content-height description that sits directly under the photo. (We don't use
   the theme's height:100% + space-between "fill" recipe: it depends on Slick
   stretching every slide to the tallest, which behaves inconsistently on the
   plain GeneratePress pages these widgets render on and left the text clipped.) */
.srbe-cards .srbe-card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.25rem;
    padding: 10px;
    font-family: "Montserrat", sans-serif;
    color: #36424A;
    background-color: #fff;
}

.srbe-cards .srbe-card-body h2 {
    margin: 0;
    min-height: 48px;
    font-size: 1.2rem;
    text-align: left;
}

.srbe-cards .srbe-card-body h2 a {
    color: #006ba6;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
}

.srbe-cards .srbe-card-meta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.srbe-cards .srbe-card-meta p {
    margin-bottom: 0.3rem;
    color: #006ba6;
    text-align: left;
}

.srbe-cards .srbe-card-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 10px;
    font-size: 13px;
    text-align: left;
    color: #36424A;
}

.srbe-cards .srbe-card-icons i {
    color: #36424A;
}

.srbe-cards .srbe-card-rating {
    min-height: 20px;
}

.srbe-cards .srbe-card-rating a {
    text-decoration: none;
}

/* Star rating overlay: grey backing stars, gold front stars clipped to the
   inline width% CardRenderer writes. */
.srbe-cards .srbe-stars,
.srbe-cards .srbe-stars-back,
.srbe-cards .srbe-stars-front {
    display: flex;
}

.srbe-cards .srbe-stars {
    height: 18px;
    font-size: 1em;
    justify-content: flex-start;
}

.srbe-cards .srbe-stars-back {
    position: relative;
    color: #DFE7EF;
}

.srbe-cards .srbe-stars-front {
    position: absolute;
    top: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffb200;
}

/* Results + Find Your Rental cards: fixed-height media area clips the image.
   Both single images and gallery slides use height:auto + aspect-ratio:3/2 (the
   base .srbe-card-media img rule) — the container's overflow:hidden clips to 230px.
   No height:100% chain needed; avoids fragility with nested Swiper flex contexts. */
.srbe-results-cards .srbe-card,
.srbe-fyr-cards .srbe-card {
    height: auto;
}

/* Results-card hover — production .abe-item:hover: a thin green outline all around
   plus a drop shadow. The transparent base border reserves the space so nothing
   shifts on hover; transition matches production's 0.4s. */
.srbe-results-cards .srbe-card {
    border: 1.5px solid transparent;
    border-radius: 2px;
    transition: all 0.4s;
}
.srbe-results-cards .srbe-card:hover {
    border: 1.5px solid #428227;
    box-shadow: 4px 6px 9px 4px rgb(0 0 0 / 15%);
}
.srbe-results-cards .srbe-card-media,
.srbe-fyr-cards .srbe-card-media {
    height: 230px;
    flex-shrink: 0;
}
.srbe-results-cards .srbe-card-body,
.srbe-fyr-cards .srbe-card-body {
    height: auto;
    justify-content: flex-start;
    gap: 0.35rem;
}

/* ---- Root search results + map ("search while moving") ---- */
/* Class/data-attr based so multiple result widgets can coexist on one page. */

/* White content surface (production parity). The /srbe/search/ route renders with a
   body.blog class, which triggers the theme's `.blog .site { background:#faf9f5 }`
   beige; production result pages are white. The template adds `srbe-results-page` to
   the body so we can restore a white content band without touching the header/footer. */
body.srbe-results-page .site-content { background-color: #fff; }

/* Results toolbar: count on the left, per-page / sort / map-toggle on the right.
   Production centers this as an ~85%-wide band (not full width); margin auto. */
.srbe-results-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 1rem auto 0.75rem;
}
@media (min-width: 992px) {
    .srbe-results-toolbar { width: 85%; }
    /* Production (measured): per-page and sort are exactly 258px each, and all four
       toolbar items (count / per-page / sort / favorites+map) spread across the 85%
       band with small even gaps. display:contents flattens the controls group so
       every item participates in the toolbar's space-between. */
    .srbe-perpage,
    .srbe-sort { width: 258px; }
    .srbe-results-controls { display: contents; }
}

.srbe-results-count {
    /* Production computed: Montserrat 400 16px #444444 (regular, not bold). */
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #444444;
}

.srbe-results-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.srbe-perpage,
.srbe-sort {
    padding: 0.45rem 0.6rem;
    border: 1px solid #36424A;
    border-radius: 2px;            /* production field-select-wrapper radius */
    /* background-color (NOT the shorthand): the shorthand would reset the
       background-image chevron applied by the shared select rule above. */
    background-color: #fff;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;               /* production computed: 16px */
    font-weight: 500;              /* production computed: 500 */
    color: #36424A;
    cursor: pointer;
}

/* Favorites filter — green outline pill (production .abe-favorite-show), fills when
   active. Doubled selector: theme button rules otherwise force weight/size. */
.srbe-favorites-toggle,
.srbe-results-toolbar .srbe-favorites-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    background: #fff;
    color: #509E2F;
    border: 1px solid #509E2F;
    border-radius: 1.5rem;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;              /* production computed: 400 (not bold) */
    font-size: 14.4px;             /* production computed: 14.4px */
    text-transform: capitalize !important; /* production shows "Favorites" title case */
    cursor: pointer;
}
.srbe-favorites-toggle i { color: #509E2F; }
.srbe-favorites-toggle.is-active { background: #509E2F; color: #fff; }
.srbe-favorites-toggle.is-active i { color: #fff; }

/* Mobile (strict parity): per-page and Sort become full-width stacked dropdowns;
   Favorites + MAP share the row below them. */
@media (max-width: 767px) {
    .srbe-results-controls { width: 100%; }
    .srbe-results-controls .srbe-perpage,
    .srbe-results-controls .srbe-sort { flex: 1 1 100%; }
}

/* Green toggle switch (production style) for showing/hiding the map. */
.srbe-map-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* Production computed: Montserrat 400 14px #444444 (regular). */
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #444444;
    cursor: pointer;
}
.srbe-map-toggle input {
    -webkit-appearance: none;
    appearance: none;
    width: 42px;
    height: 24px;
    border-radius: 12px;
    background: #ccc;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    margin: 0;
}
.srbe-map-toggle input:checked { background: #428227; }
.srbe-map-toggle input::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.2s;
}
.srbe-map-toggle input:checked::after { left: 20px; }

/* Map hidden: cards reclaim the full width (and go multi-column on desktop). */
.srbe-results.srbe-map-hidden .srbe-results-map { display: none; }

.srbe-results-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.srbe-results-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Google Maps needs an explicit height or it renders at 0px (invisible). */
.srbe-results-map {
    width: 100%;
    height: 400px;
    border-radius: 0.5rem;
    overflow: hidden;
    /* Mobile: map appears above the card list (production convention).
       DOM order keeps cards before map so desktop row layout is correct
       (cards left, map right) without needing order there. */
    order: -1;
}

.srbe-no-results {
    padding: 2rem 0;
    text-align: center;
    color: #6d6d6d;
}

.srbe-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
    margin: 1.5rem 0;
}

.srbe-pagination .srbe-page {
    padding: 0.4rem 0.7rem;
    border: 1px solid #d4d4d4;
    border-radius: 0.25rem;
    text-decoration: none;
    color: #36424A;
    line-height: 1;
}

.srbe-pagination .srbe-page.active {
    background-color: #006ba6;
    border-color: #006ba6;
    color: #fff;
}

.srbe-pagination .srbe-page.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Desktop: cards beside a sticky map. */
@media (min-width: 992px) {
    /* Production parity (measured on skyrun.com/breckenridge results at 1440 AND
       1920): the ENTIRE results page — form, toolbar, cards + map — lives in a
       1200px container centered in the viewport (.site-main = 1200px). */
    main.srbe-page {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
    .srbe-results-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
    }
    /* Equal columns: a self-scrolling card list beside a fixed-height map. */
    .srbe-results-cards {
        flex: 1 1 50%;
        min-width: 0;
        /* Two equal cards per row, matching the production results layout. */
        grid-template-columns: 1fr 1fr;
        align-items: start;
        max-height: 80vh;
        overflow-y: auto;
        padding-right: 0.5rem;
    }
    .srbe-results-map {
        flex: 1 1 50%;
        height: 80vh;
        position: sticky;
        top: 1rem;
        order: 0; /* reset — desktop row layout uses natural DOM order (cards left, map right) */
    }
    /* Map toggled off: cards take the full width in a 3-up grid, no scroll box. */
    .srbe-results.srbe-map-hidden .srbe-results-cards {
        flex-basis: 100%;
        grid-template-columns: 1fr 1fr 1fr;
        max-height: none;
        overflow: visible;
    }
}

/* ---- Find Your Rental widget ([srbe-find-your-rental]) ----
   A one-card-at-a-time Slick carousel stacked directly above the map. */

.srbe-fyr-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Outer wrap owns the arrow padding so the Slick container stays padding-free
   (exact slide-width math), mirroring .srbe-carousel-wrap for the other carousels. */
.srbe-fyr-carousel-wrap {
    position: relative;
    padding: 0 35px;
    min-width: 0;
}

/* Shared carousel arrows — the widget carousels (.srbe-carousel-wrap) and Find Your
   Rental (.srbe-fyr-carousel-wrap) use ONE rule so their arrows are always identical.
   The full reset (display/height/width/etc.) matters: without it the theme's default
   <button> styling leaks in and the arrows render differently between the two. */
.srbe-carousel-wrap button,
.srbe-fyr-carousel-wrap button {
    background-color: transparent !important;
    border: none !important;
    color: #36424A;
    cursor: pointer;
    display: inline-block;
    font-size: 40px;
    font-weight: 500;
    height: auto;
    letter-spacing: 0;
    line-height: 0;
    padding: 0.5rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    width: auto;
}
.srbe-carousel-wrap .slick-prev.slick-arrow,
.srbe-fyr-carousel-wrap .slick-prev.slick-arrow { position: absolute; left: 0; top: 40%; }
.srbe-carousel-wrap .slick-next.slick-arrow,
.srbe-fyr-carousel-wrap .slick-next.slick-arrow { position: absolute; right: 0; top: 40%; }

/* One card per view. Before Slick initializes (or if JS fails) the cards fall back
   to a plain vertical stack, so content is never lost. */
.srbe-fyr-cards { min-width: 0; }
.srbe-fyr-cards .slick-track { display: flex; align-items: flex-start; }
.srbe-fyr-cards .slick-slide { height: auto; }

.srbe-fyr-map-wrap {
    position: relative;
}

.srbe-fyr-map {
    width: 100%;
    height: 400px;
    border-radius: 0.5rem;
    overflow: hidden;
}

.srbe-moving-search {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    padding: 5px 10px;
    border-radius: 2px;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

@media all and (max-width: 768px) {
    .srbe-carousel-wrap button,
    .srbe-fyr-carousel-wrap button { font-size: 30px; padding: 0.25rem; }
}

/* Desktop (>= 992px): no carousel. srbe-fyr-carousel.js destroys Slick above this
   width, and the cards become a scrollable 2-column grid beside a sticky map — the
   original FYR desktop layout. (This breakpoint matches MOBILE_MAX=991 in the JS.) */
@media (min-width: 992px) {
    .srbe-fyr-layout {
        flex-direction: row;
        align-items: flex-start;
    }
    /* The carousel wrap becomes the left column; no arrow padding (Slick is off). */
    .srbe-fyr-carousel-wrap {
        flex: 1 1 60%;
        padding: 0;
    }
    .srbe-fyr-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        align-items: start;
        max-height: 80vh;
        overflow-y: auto;
        padding-right: 0.5rem;
    }
    .srbe-fyr-map-wrap {
        flex: 1 1 40%;
        position: sticky;
        top: 1rem;
    }
    .srbe-fyr-map {
        height: 80vh;
    }
}