/* V2 live search overrides. Loaded after the broad DS preview stylesheet. */
.bp-search-page-v2,
.bp-search-page-v2 * {
    box-sizing: border-box;
}

.bp-search-page-v2 {
    /* margin: 0; */
    color: #161616;
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.bp-search-page-v2 a {
    color: inherit;
}

.bp-search-page-v2 button,
.bp-search-page-v2 input,
.bp-search-page-v2 select,
.bp-search-page-v2 textarea {
    font: inherit;
}

/* The Bootstrap grid/visibility/dropdown shim that used to live here moved to
 * `compat/bootstrap-compat.css`, scoped to `.bp-v2` so EVERY v2 page gets it
 * instead of only this one. The modal rules that used to live here were a
 * duplicate of `components/modal.css` at equal specificity (winner decided by
 * <link> order) and are deleted -- modal.css owns modal styling. */

.bp-search-page-v2 .sidenav-overlay {
    position: fixed;
    z-index: 1090;
    inset: 0;
    display: none;
    background: rgba(22, 22, 22, 0.32);
}

.bp-search-page-v2 .sidenav-overlay.active {
    display: block;
}

.bp-search-page-v2 .sidenav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1100;
    width: min(320px, 86vw);
    padding: 24px;
    background: #ffffff;
    box-shadow: 16px 0 40px rgba(22, 22, 22, 0.18);
    transform: translateX(-100%);
    transition: transform 160ms ease;
}

.bp-search-page-v2 .sidenav.open {
    transform: translateX(0);
}

.bp-search-page-v2 .menu-items-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-search-page-v2 .menu-items-list a {
    display: block;
    padding: 8px 0;
    color: #161616;
    font-weight: 700;
    text-decoration: none;
}

.bp-search-page-v2 .sidenav-header {
    margin-bottom: 12px;
}

.bp-search-page-v2 .sidenav-header img {
    display: block;
    width: 226px;
    max-width: 100%;
    height: auto;
}

.bp-search-page-v2 #loading-notification,
.bp-search-page-v2 .notification {
    display: none;
}

.bp-search-page-v2 .twitter-typeahead {
    display: block !important;
    width: 100%;
}

.bp-search-page-v2 .twitter-typeahead .tt-hint {
    color: #9da0aa;
}

.bp-search-page-v2 .tt-dropdown-menu {
    position: absolute;
    top: calc(100% + 9px) !important;
    left: -13px !important;
    z-index: 1200;
    width: calc(100% + 26px);
    min-width: 220px;
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 6px 0;
    border: 1px solid #d6d0ca;
    border-radius: 0 0 6px 6px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(22, 22, 22, 0.16);
}

.bp-search-page-v2 .tt-suggestion {
    padding: 10px 14px;
    color: #161616;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
}

.bp-search-page-v2 .tt-suggestion.tt-cursor,
.bp-search-page-v2 .tt-suggestion:hover {
    background: #fff0eb;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-input-wrap .twitter-typeahead {
    /* Left edge aligns with the caption; trailing room for the geolocate pin. */
    display: flex !important;
    align-items: center;
    min-height: 22px;
    padding-left: 0;
    padding-right: 26px;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-input-wrap .twitter-typeahead .bp-search-filter-input {
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 20px !important;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-input-wrap .twitter-typeahead .tt-hint,
.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-input-wrap .twitter-typeahead .tt-query {
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    line-height: 20px !important;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-input-wrap .twitter-typeahead .tt-hint {
    width: calc(100% - 26px) !important;
    top: 50% !important;
    transform: translateY(-50%);
    font: 700 14px/20px var(--bp-font-body) !important;
}

.bp-search-page-v2 {
    padding-top: 0;
    background: #f3eeec !important;
}

/* Legacy .btn-orange buttons (css-global used to paint them #f18918) — token orange
   inside the redesign scope so the page has exactly one orange. */
.bp-search-page-v2 .btn-orange {
    background-color: var(--bp-color-orange);
    border-color: var(--bp-color-orange);
    color: #ffffff;
}

.bp-search-page-v2 .btn-orange:hover,
.bp-search-page-v2 .btn-orange:focus {
    background-color: #ffffff;
    border-color: var(--bp-color-orange);
    color: var(--bp-color-orange);
}

.bp-search-page-v2 {
    /* design-v3 "Zoeken v2" / "Plaats v2": every band is one centred frame with
       a 40px inset -- header, filter bar, results header and the map/list row.
       1920 instead of the design file's 1440, per Steven on BPCOM-1575: at 1440
       the page used about half of a wide monitor. On a 2560 screen 1920 is the
       6/8 he pointed at; below 1920 the frame simply fills the viewport. The
       map/list split is fractional, so both columns grow with the frame. */
    --bp-search-width: 1920px;
    /* Was 40px, so the search chrome sat 60px inboard of its own footer and
       of every other page. One inset for the whole site. */
    --bp-search-inset: var(--bp-content-inset);
}

.bp-search-page-v2 .bp-search-v2-navbar-shell {
    width: 100%;
}

.bp-search-page-v2 .bp-site-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(240px, 1fr);
    grid-template-areas: "left logo right";
    align-items: center;
    /* Zoeken v2 / Plaats v2 carry the same 80px bar as every other page. */
    min-height: var(--bp-menu-height);
    max-width: var(--bp-search-width);
    margin: 0 auto;
    padding: 0 var(--bp-search-inset);
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Landing-page beige, clean — no borders (BPCOM-1295). */
.bp-search-page-v2 .bp-search-v2-navbar-shell {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 0;
    background: var(--bp-color-lighter-1);
}

.bp-search-page-v2 .bp-site-nav-toggle {
    grid-area: left;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    /* Matches .bp-site-nav-toggle: the trigger is the same control on every
       page, so it is the same size on every page. */
    gap: 10px;
    border: 0;
    background: transparent;
    color: var(--bp-color-black);
}

.bp-search-page-v2 .bp-site-nav-toggle i {
    font-size: 22px;
}

.bp-search-page-v2 .bp-site-nav-toggle span {
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    background: transparent;
}

.bp-search-page-v2 .bp-site-header-logo {
    grid-area: logo;
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    transform: none;
}


.bp-search-page-v2 .bp-site-header-actions {
    grid-area: right;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

/* The favourites group (heart, count, compare launcher) and its dropdown are
   styled once, in components/header.css and components/favorites-compare.css,
   for every page (BPCOM-1803). The search pages drew their own beige circle
   with a 10px corner badge here. */

.bp-search-page-v2 .bp-site-header-auth {
    color: #161616;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.bp-search-page-v2 .bp-site-header-auth:hover,
.bp-search-page-v2 .bp-site-header-auth:focus {
    color: #ff622c;
    text-decoration: none;
}

.bp-search-page-v2 .bp-site-header-menu {
    right: 0;
    left: auto;
    min-width: 220px;
    padding: 8px 0;
    border: 1px solid #dde5e9;
    border-radius: 3px;
    box-shadow: 0 12px 28px rgba(22, 22, 22, 0.12);
}

.bp-search-page-v2 .bp-site-header-menu a {
    display: block;
    padding: 10px 16px;
    color: #161616;
    font-size: 14px;
    text-decoration: none;
}

.bp-search-page-v2 .bp-site-header-menu a:hover,
.bp-search-page-v2 .bp-site-header-menu a:focus {
    background: #fff0eb;
    color: #161616;
    text-decoration: none;
}

.bp-search-page-v2 .bp-search-v2-filter-shell {
    position: sticky;
    /* Directly under the sticky header (.bp-search-v2-navbar-shell, 80px). The
       old 58px was the previous header height: the bar slid 22px up under the
       header as soon as the page scrolled. The map panel's sticky top (176px)
       is already this 80px plus the 76px bar plus a 20px gap. */
    top: var(--bp-menu-height);
    z-index: 30;
    float: none;
    width: 100%;
    padding: 12px var(--bp-search-inset);
    border-bottom: 0;
    background: var(--bp-color-lighter-1);
    box-sizing: border-box;
}

.bp-search-page-v2 #id_page_data {
    padding: 0;
    background: #f3eeec !important;
}

/*
 * The htmx loading skeleton. htmx's own convention only fades it (opacity 0),
 * so its legacy hidden-xs skeleton rows still reserved 1520px of layout on
 * phones - the user saw a screenful and a half of nothing above the results.
 * Take it out of layout entirely unless a request is actually in flight.
 */
.estate-results-hx-indicator.htmx-indicator {
    display: none;
}

.htmx-request .estate-results-hx-indicator.htmx-indicator,
.estate-results-hx-indicator.htmx-indicator.htmx-request {
    display: block;
}

/* Title row: page h1 + result count above the map (left), sort above the
   list (right). White — the content zone starts here (BPCOM-1295). */
.bp-search-page-v2 .bp-search-v2-titlebar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px var(--bp-content-inset) 12px;
    background: #ffffff;
    box-sizing: border-box;
    /* The sort control is a ~235px nowrap block. On a phone, title + sort do
       not fit side by side, and without wrapping the row pushed the whole
       document 40px past the viewport. Wrap only engages when needed, so
       desktop keeps the single row. */
    flex-wrap: wrap;
}

.bp-search-page-v2 .bp-search-v2-titlebar-left,
.bp-search-page-v2 .bp-search-v2-titlebar-right {
    min-width: 0;
    max-width: 100%;
}

/*
 * Mobile filter entry. Desktop keeps the full filter shell; this row exists
 * only below 1025px, where that shell is display:none and phones previously
 * had no filters, no save-alert and no favourites at all.
 */
.bp-search-page-v2 .bp-search-mobile-actions {
    display: none;
}

@media (max-width: 1024px) {
    .bp-search-page-v2 .bp-search-mobile-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 0 var(--bp-content-inset) 12px;
        background: #ffffff;
        box-sizing: border-box;
    }

    .bp-search-page-v2 .bp-search-mobile-actions .bp-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        height: 40px;
        min-width: 0;
        padding: 0 12px;
        border-radius: 4px;
        font-size: 14px;
        white-space: nowrap;
        text-decoration: none;
    }
}

.bp-search-page-v2 .bp-search-v2-title {
    margin: 0;
    color: #161616;
    font-family: var(--bp-font-heading);
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
}

.bp-search-page-v2 .bp-search-v2-title span {
    font: inherit;
}

.bp-search-page-v2 .bp-search-v2-count {
    margin: 4px 0 0;
    color: #6f6b66;
    font-family: var(--bp-font-body);
    font-size: 14px;
    line-height: 1.2;
}

.bp-search-page-v2 .bp-search-v2-titlebar .bp-search-filter-sort {
    position: relative;
}

.bp-search-page-v2 .bp-search-v2-titlebar .bp-search-filter-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
}

.bp-search-page-v2 .bp-search-v2-titlebar .bp-search-filter-control [data-filter-label] {
    font-weight: 700;
}

.bp-search-page-v2 .bp-search-v2-sort-prefix {
    color: #6f6b66;
}

.bp-search-page-v2 .bp-search-v2-titlebar .bp-search-filter-panel {
    left: auto;
    right: 0;
}

@media (min-width: 1200px) {
    .bp-search-page-v2 .bp-search-filter-bar,
    .bp-search-page-v2 .bp-search-v2-titlebar,
    .bp-search-page-v2 #id_page_data .search-page,
    .bp-search-page-v2 .bp-search-v2-below {
        max-width: var(--bp-search-width);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .bp-search-page-v2 .bp-search-filter-bar,
    .bp-search-page-v2 .bp-search-v2-titlebar,
    .bp-search-page-v2 #id_page_data .search-page {
        padding-left: var(--bp-search-inset);
        padding-right: var(--bp-search-inset);
    }
}

@media (max-width: 1199px) {
    .bp-search-page-v2 .bp-site-header {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: var(--bp-menu-height);
        padding: 0 var(--bp-content-inset);
        grid-template-columns: none;
        grid-template-areas: none;
    }

    .bp-search-page-v2 .bp-site-nav-toggle {
        order: 0;
        flex: 0 0 auto;
    }

    .bp-search-page-v2 .bp-site-header-logo {
        order: 1;
        justify-self: start;
    }

    /* Only the heart stays in the bar, for guests as well (BPCOM-1803); the
       CTA and the auth links are in the drawer. Three classes: the search
       stylesheet hides the actions below 1024 with two. */
    .bp-search-page-v2 .bp-site-header .bp-site-header-actions {
        display: flex;
        order: 2;
        margin-left: auto;
    }

    .bp-search-page-v2 .bp-site-header-dropdown,
    .bp-search-page-v2 .bp-site-header-auth,
    .bp-search-page-v2 .bp-site-header .favorites-compare-link {
        display: none;
    }

}

/* "MAP + LIST SPLIT": grid 1.02fr / 1fr with a 24px gap, aligned to the top so
   the map can stick while the list scrolls the page. */
.bp-search-page-v2 .search-page {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    gap: 24px;
    align-items: start;
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 56px;
    background: #ffffff;
}

.bp-search-page-v2 .search-page > .col-12.col-lg-7,
.bp-search-page-v2 #list-view-search {
    min-height: 0;
}

.bp-search-page-v2 .search-page > .col-12.col-lg-7 {
    grid-column: 1;
    width: auto;
    max-width: none;
    padding: 0;
}

.bp-search-page-v2 #list-view-search {
    grid-column: 2;
    width: auto;
    max-width: none;
    padding: 0;
    border-left: 0;
}

.bp-search-page-v2 .map-view,
.bp-search-page-v2 #search-results-map,
.bp-search-page-v2 #map-outer {
    height: 100%;
}

.bp-search-page-v2 #search-results-map {
    position: relative;
}

.bp-search-page-v2 #bploading-spinner,
.bp-search-page-v2 .loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: none;
    transform: translate(-50%, -50%);
    color: var(--bp-color-orange);
}

.bp-search-page-v2 .map-view {
    margin: 0;
    overflow: visible !important;
}

.bp-search-page-v2 #map-outer {
    padding: 0;
    border: 0;
    background: #eef1f4;
    overflow: hidden;
}

.bp-search-page-v2 #map-canvas {
    width: 100%;
    height: 100% !important;
    overflow: hidden;
}

.bp-search-page-v2 .list-view-wrapper,
.bp-search-page-v2 .list-view-inner {
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
}

/*
 * No padding on the right: the result column's right edge IS the page frame,
 * the same edge the sort control above it and the header above that sit on.
 * A 16px padding there ended the cards at 1369 while everything else on the
 * page ended at 1385. The left padding stays -- it is the gutter to the map.
 */
.bp-search-page-v2 .bp-search-v2-results-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 16px 0 16px 16px;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

.bp-search-page-v2 .bp-search-v2-card-grid {
    display: grid;
    gap: 16px;
    align-content: start;
    min-height: 100%;
    padding: 0;
}

.bp-search-page-v2 #estateoffer-list > .bp-breadcrumbs {
    margin-bottom: 0;
}

.bp-search-page-v2 #estateListHx .hx-data-target {
    display: grid;
    gap: 16px;
}

.bp-search-page-v2 #estateListHx {
    min-height: 100%;
}

/*
 * Desktop single-scroll map/list (>=1200px).
 *
 * The default rules above give the list an inner overflow box AND the page a
 * second scroll for the below-sections -> two stacked scroll regions, made
 * worse by overscroll-behavior:contain (the list felt like a dead-end).
 *
 * Here we collapse it to ONE smooth page scroll: the row grows to the list's
 * natural height, the map column is sticky (pins while you scroll the
 * listings), and the list scrolls in normal page flow. When the list ends the
 * map releases and the below-sections come up. Lazy-load still works because
 * it uses an IntersectionObserver against the viewport, not the inner box.
 * Mobile (<1200px) keeps its existing toggle/fullscreen map behaviour.
 */
@media (min-width: 1200px) {
    .bp-search-page-v2 .search-page {
        align-items: start;
    }

    .bp-search-page-v2 {
        --bp-search-titlebar-height: 77px;
    }

    .bp-search-page-v2 .bp-search-v2-titlebar {
        position: sticky;
        top: calc(var(--bp-menu-height) + 76px);
        z-index: 20;
        flex-wrap: nowrap;
        height: var(--bp-search-titlebar-height);
    }

    .bp-search-page-v2 .bp-search-v2-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bp-search-page-v2 .search-page > .col-12.col-lg-7 {
        position: sticky;
        top: calc(var(--bp-menu-height) + 76px + var(--bp-search-titlebar-height));
        height: calc(100vh - var(--bp-menu-height) - 76px - var(--bp-search-titlebar-height) - 24px);
        min-height: 320px;
        align-self: start;
    }

    .bp-search-page-v2 #list-view-search {
        height: auto;
        min-height: calc(100vh - 124px);
    }

    .bp-search-page-v2 .list-view-wrapper,
    .bp-search-page-v2 .list-view-inner {
        height: auto;
        min-height: 0;
    }

    .bp-search-page-v2 .bp-search-v2-results-scroll {
        height: auto;
        overflow: visible;
        overscroll-behavior: auto;
    }

    .bp-search-page-v2 .bp-search-v2-card-grid,
    .bp-search-page-v2 #estateListHx {
        min-height: 0;
    }
}

.bp-search-page-v2 .bp-search-filter-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.bp-search-page-v2 .bp-search-filter-location {
    flex: 0 1 300px;
    min-width: 240px;
}

.bp-search-page-v2 .bp-search-filter-transaction {
    flex: 0 0 108px;
}

.bp-search-page-v2 .bp-search-filter-field:not(.bp-search-filter-location):not(.bp-search-filter-transaction):not(.bp-search-filter-more-trigger):not(.bp-search-filter-sort) {
    flex: 0 0 132px;
}

.bp-search-page-v2 .bp-search-filter-field[data-filter-menu="area"] {
    flex-basis: 116px;
}

.bp-search-page-v2 .bp-search-filter-field[data-filter-menu="price"] {
    flex-basis: 96px;
}

.bp-search-page-v2 .bp-search-filter-more-trigger {
    flex: 0 0 116px;
}

.bp-search-page-v2 .bp-search-filter-sort {
    flex: 0 0 104px;
}

.bp-search-page-v2 .bp-search-filter-bar > .field-bounds,
.bp-search-page-v2 .bp-search-filter-bar > .field-llz,
.bp-search-page-v2 .bp-search-filter-bar > .field-filtered_markers,
.bp-search-page-v2 .bp-search-filter-bar > .field-p,
.bp-search-page-v2 .bp-search-filter-bar > .field-broker_name {
    display: none;
}

.bp-search-page-v2 .bp-search-filter-field,
.bp-search-page-v2 .bp-search-v2-modal-form .bp-search-filter-field {
    position: relative;
    display: block;
    min-width: 0;
}

.bp-search-page-v2 .bp-search-filter-field > label:not(.bp-sr-only) {
    display: none;
}

.bp-search-page-v2 .bp-search-filter-input,
.bp-search-page-v2 .bp-search-filter-control {
    width: 100%;
    height: 47px;
    min-width: 0;
    padding: 0 16px;
    border: 1px solid #d6d0ca;
    border-radius: 4px;
    background: #fff;
    color: #161616;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 47px;
    box-sizing: border-box;
}

.bp-search-page-v2 .bp-search-filter-input::placeholder {
    color: #8b8782;
}

.bp-search-page-v2 .bp-search-filter-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    text-align: left;
    white-space: nowrap;
}

.bp-search-page-v2 .bp-search-filter-control span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-search-page-v2 .bp-search-filter-control i {
    flex: 0 0 auto;
    color: #161616;
    font-size: 12px;
}

.bp-search-page-v2 .bp-search-filter-sort {
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: normal;
}

.bp-search-page-v2 .bp-search-filter-input-wrap {
    position: relative;
}

.bp-search-page-v2 .bp-search-filter-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 47px;
    border: 0;
    background: transparent;
    color: var(--bp-color-orange);
}

.bp-search-page-v2 .bp-search-filter-menu.is-open .bp-search-filter-control,
.bp-search-page-v2 .bp-search-filter-control:focus,
.bp-search-page-v2 .bp-search-filter-input:focus {
    border-color: var(--bp-color-orange);
    outline: 0;
    box-shadow: 0 0 0 2px rgba(255, 98, 44, 0.16);
}

.bp-search-page-v2 .bp-search-filter-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1050;
    display: none;
    min-width: 280px;
    padding: 14px;
    border: 1px solid #d6d0ca;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(22, 22, 22, 0.14);
}

.bp-search-page-v2 .bp-search-filter-menu.is-open .bp-search-filter-panel {
    display: block;
}

.bp-search-page-v2 .bp-search-filter-panel-range,
.bp-search-page-v2 .bp-search-filter-panel-price {
    min-width: 340px;
}

.bp-search-page-v2 .bp-search-filter-panel-sort {
    min-width: 250px;
    padding: 8px;
}

.bp-search-page-v2 .bp-search-filter-options,
.bp-search-page-v2 .bp-search-filter-radio-grid {
    display: grid;
    gap: 8px;
}

.bp-search-page-v2 .bp-search-filter-radio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
}

.bp-search-page-v2 .bp-search-filter-options label,
.bp-search-page-v2 .bp-search-filter-radio-grid label,
.bp-search-page-v2 .bp-search-filter-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #161616;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-transform: none;
}

.bp-search-page-v2 .bp-search-filter-options input,
.bp-search-page-v2 .bp-search-filter-radio-grid input,
.bp-search-page-v2 .bp-search-filter-check input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--bp-color-orange);
}

.bp-search-page-v2 .bp-search-filter-menu-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: -14px -14px 12px;
    border-bottom: 1px solid #e6e0db;
}

.bp-search-page-v2 .bp-search-filter-menu-actions button {
    height: 42px;
    border: 0;
    border-right: 1px solid #e6e0db;
    background: #fff;
    color: #161616;
    font-size: 14px;
    font-weight: 500;
}

.bp-search-page-v2 .bp-search-filter-menu-actions button:last-child {
    border-right: 0;
}

.bp-search-page-v2 .bp-search-filter-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.bp-search-page-v2 .bp-search-filter-native-multiple,
.bp-search-page-v2 .bp-search-filter-panel .bootstrap-select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.bp-search-page-v2 .bp-search-filter-submit,
.bp-search-page-v2 .bp-search-filter-reset {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 47px !important;
    min-width: 0 !important;
    padding: 0 16px !important;
    border-radius: 4px;
    line-height: 47px;
    white-space: nowrap;
}

.bp-search-page-v2 .bp-search-filter-save {
    display: inline-flex;
    flex: 0 0 47px;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    min-height: 47px;
    padding: 0;
    border: 1px solid #d6d0ca;
    border-radius: 4px;
    background: #ffffff;
    margin-top: 0;
    color: #161616;
    font-size: 0;
    font-weight: 500;
    text-decoration: none;
}

.bp-search-page-v2 .bp-search-filter-save i {
    font-size: 14px;
}

/*
 * BPCOM-1575 - Steven asked for three controls in the bar: favourites, save
 * alert and reset. The favourites heart carries its count; both it and the
 * reset are hidden until they have something to say.
 */
.bp-search-page-v2 .bp-search-filter-favorites {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 47px;
    min-height: 47px;
    padding: 0 12px;
    border: 1px solid #d6d0ca;
    border-radius: 4px;
    background: #ffffff;
    color: #161616;
    font-weight: 500;
    text-decoration: none;
}

.bp-search-page-v2 .bp-search-filter-favorites i {
    font-size: 14px;
}

.bp-search-page-v2 .bp-search-filter-favorites:hover,
.bp-search-page-v2 .bp-search-filter-favorites:focus {
    border-color: #ff622c;
    background: #fff0eb;
    color: #161616;
}

.bp-search-page-v2 .bp-search-filter-favorites-count {
    font-size: 14px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* The reset only belongs in the bar while a filter is actually set. */
.bp-search-filter-reset.is-hidden {
    display: none !important;
}

.bp-search-page-v2 .bp-search-filter-save:hover,
.bp-search-page-v2 .bp-search-filter-save:focus {
    border-color: #ff622c;
    background: #fff0eb;
    color: #161616;
    text-decoration: none;
}

.bp-search-page-v2 .bp-search-filter-bar--labels {
    gap: 8px;
    /* The map column of the .search-page grid below: 1.02fr | 24px | 1fr. */
    --bp-search-map-column: calc((100% - 24px) * 1.02 / 2.02);
}

/*
 * BPCOM-1804: no width in the bar follows its content any more. Picking a
 * type or a range used to widen that field and squeeze the location by up to
 * 115px. The location has a fixed width, the map's, so it lines up with the
 * map and the other filters with the list beside it (from about 1875px wide).
 * Narrower, the list column is too narrow for four readable filters, so the
 * location gives up width first (to 240px, 160px below 1180px). The four filters share the rest
 * equally; a long value ends in an ellipsis and its title shows it in full.
 * (Replaces the content-driven widths of BPCOM-1295.) Seven classes: the
 * `!important` field widths in search-page.css carry six.
 */
.bp-search-page-v2 .bp-search-filter-bar.bp-search-filter-bar--labels .bp-search-filter-field.bp-search-filter-menu:not(.bp-search-filter-sort):not(.bp-search-filter-location) {
    flex: 1 1 0 !important;
    min-width: 0;
}

/* Match the inner edges of the header and map/list frame on wide screens. */
.bp-search-page-v2 .bp-search-filter-bar {
    max-width: calc(var(--bp-search-width) - 2 * var(--bp-search-inset));
}

/* 900px is what the rest of the row needs: four filters of about 175px, the
   112px Filters field, the 42px bell, the gaps and the 24px to the list. */
.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-location {
    flex: 0 0 min(var(--bp-search-map-column), calc(100% - 900px)) !important;
    min-width: 240px;
    /* With the bar's 6px gap (search-page.css): the 24px between map and list. */
    margin-right: 18px;
}

/* Fixed, wide enough for "Filters (2)": a count must not move the bar. */
.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-more-trigger {
    flex: 0 0 112px !important;
    min-width: 0;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    height: 52px;
    min-height: 52px;
    padding: 8px 12px 6px;
    border: 1px solid #d6d0ca;
    border-radius: 6px;
    background: #ffffff;
    box-sizing: border-box;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-field > .bp-search-filter-caption {
    position: static;
    display: block !important;
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    color: #8f929a;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    transform: none;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-input,
.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-control {
    height: auto;
    min-height: 0;
    /* !important: search-page.css pins `padding: 0 16px !important` on the
       base control, which broke the caption/value left alignment. */
    padding: 0 !important;
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-input {
    /* Caption and value share the same left edge — the geolocate pin moved to
       the trailing side, so no leading indent (but keep room for the pin). */
    padding-left: 0 !important;
    padding-right: 26px !important;
    text-decoration: none;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-input::placeholder {
    color: #9da0aa;
    font-weight: 700;
    text-decoration: none;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-input-wrap {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-height: 22px;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-icon {
    /* Geolocate pin sits on the trailing side (like the chevrons), so the
       input text left-aligns with the caption. */
    top: 50%;
    right: 0;
    left: auto;
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    color: var(--bp-color-orange);
    line-height: 18px !important;
    transform: translateY(-50%);
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-control {
    justify-content: flex-start;
    gap: 8px;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-control span {
    flex: 0 1 auto;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-control i {
    color: #161616;
    font-size: 12px;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-control i:last-child {
    margin-left: auto;
}

/* "Filters" is a field like its neighbours (BPCOM-1804): the grey caption,
   the value, the icon on the right where the others have their chevron. */

/* Desktop (labels) filter bar applies via the dropdown panels + Filters modal,
   so the explicit Zoeken submit is hidden here (matches staging). */
.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-submit {
    display: none !important;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-save,
.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-reset {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border: 0;
    background: transparent;
    color: #161616;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-save i,
.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-reset i {
    font-size: 18px;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-action-label {
    display: none;
}

/* Steven's reset action is a circular arrow with a visible label. */
.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-reset {
    display: inline-flex;
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 8px !important;
    font-size: 14px;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-reset .bp-search-filter-action-label {
    display: inline;
}

/*
 * BPCOM-1804: the white field box is the control. Nothing inside it lights up
 * on focus: no orange ring round the location or the min/max fields, no ring
 * round an open menu's value. Keyboard focus on a menu still shows, on the box.
 */
.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-input:focus,
.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-control:focus,
.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-menu.is-open .bp-search-filter-control {
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-field:has(.bp-search-filter-control:focus-visible) {
    border-color: var(--bp-color-black);
}

/* Typed text at the weight of normal input text, not the bold of the values. */
.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-location .bp-search-filter-input,
.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-location .bp-search-filter-input::placeholder {
    font-weight: 500;
}

/* typeahead 0.9.3 draws its suggestion in a second input under the typed
   text. The two never line up to the pixel, which doubled the letters and made
   them look bold. The suggestions stay in the list below the field. */
.bp-search-page-v2 .bp-search-filter-bar--labels .twitter-typeahead .tt-hint {
    visibility: hidden;
}

/* A refused range (max below min): the design-system orange marks it, the
   text stays black so it reads at 13px (orange on white is 3:1). */
.bp-search-page-v2 .bp-search-filter-error {
    margin: 10px 0 0;
    padding-left: 8px;
    border-left: 3px solid var(--bp-color-orange);
    color: var(--bp-color-black);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-field.is-invalid,
.bp-search-page-v2 .bp-search-v2-modal-form .bp-search-filter-field.is-invalid .bp-search-filter-control {
    border-color: var(--bp-color-orange);
}


.bp-search-page-v2 .bp-search-v2-modal-form {
    display: grid;
    gap: 12px;
}

.bp-search-page-v2 #search-form-modal .modal-dialog {
    width: min(760px, calc(100vw - 32px));
    margin-top: 48px;
}

.bp-search-page-v2 #search-form-modal .modal-content {
    border: 0;
    border-radius: 4px;
    box-shadow: 0 18px 48px rgba(22, 22, 22, 0.22);
}

.bp-search-page-v2 #search-form-modal .modal-header {
    padding: 24px 64px;
    border-bottom: 1px solid #dde5e9;
}

.bp-search-page-v2 #search-form-modal .modal-title {
    color: #ff622c;
    font-family: "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 130%;
    text-align: left;
}

.bp-search-page-v2 #search-form-modal .modal-header .close {
    margin-top: -10px;
    color: #ff622c;
    font-size: 36px;
    font-weight: 400;
    opacity: 0.28;
}

.bp-search-page-v2 #search-form-modal .modal-body {
    height: auto;
    padding: 32px 64px 40px;
    margin-top: 0;
}

.bp-search-page-v2 #search-form-modal .modal-body > .col-xs-12 {
    float: none;
    width: min(544px, 100%);
    margin-right: auto;
    margin-left: auto;
    padding: 0;
}

.bp-search-page-v2 .bp-search-v2-modal-form .bp-search-filter-input,
.bp-search-page-v2 .bp-search-v2-modal-form .bp-search-filter-control {
    height: 52px;
    padding: 0 24px;
    border-color: #e2ddd6;
    border-radius: 3px;
    font-size: 17px;
    font-weight: 400;
    line-height: 52px;
}

.bp-search-page-v2 .bp-search-v2-modal-form .bp-search-filter-icon {
    height: 52px;
}

.bp-search-page-v2 .bp-search-v2-modal-form .bp-search-filter-panel {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    box-shadow: none;
}

.bp-search-page-v2 .bp-search-v2-modal-actions {
    display: grid;
    gap: 8px;
    margin-top: 4px;
    width: 100%;
}

.bp-search-page-v2 .bp-search-result-card.bp-listing-card {
    display: grid !important;
    grid-template-columns: minmax(190px, 42%) minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 220px !important;
    height: 220px !important;
    border-color: #e0d8d2;
    border-radius: 4px;
}

/* Package sizes follow the shared result-card component. */
.bp-search-page-v2 .bp-search-result-card--platinum.bp-listing-card {
    min-height: 290px !important;
    height: 290px !important;
    border-color: var(--bp-color-orange);
}
.bp-search-page-v2 .bp-search-result-card--gold.bp-listing-card {
    min-height: 240px !important;
    height: 240px !important;
    border-color: rgba(255, 95, 42, 0.34);
}
.bp-search-page-v2 .bp-search-result-card--silver.bp-listing-card {
    min-height: 190px !important;
    height: 190px !important;
}
.bp-search-page-v2 .bp-search-result-card--basic.bp-listing-card {
    min-height: 180px !important;
    height: 180px !important;
}

.bp-search-page-v2 .bp-search-result-card.bp-listing-card .bp-search-result-media,
.bp-search-page-v2 .bp-search-result-card.bp-listing-card .bp-listing-card-media,
.bp-search-page-v2 .bp-search-result-card.bp-listing-card .bp-search-v2-swiper,
.bp-search-page-v2 .bp-search-result-card.bp-listing-card .bp-search-v2-swiper .swiper-wrapper,
.bp-search-page-v2 .bp-search-result-card.bp-listing-card .bp-search-v2-swiper .swiper-slide,
.bp-search-page-v2 .bp-search-result-card.bp-listing-card .bp-search-v2-swiper,
.bp-search-page-v2 .bp-search-result-card.bp-listing-card .bp-search-v2-swiper .swiper-wrapper,
.bp-search-page-v2 .bp-search-result-card.bp-listing-card .bp-search-v2-swiper .swiper-slide {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
}

.bp-search-page-v2 .bp-search-result-card.bp-listing-card .bp-search-result-media,
.bp-search-page-v2 .bp-search-result-card.bp-listing-card .bp-listing-card-media {
    border-radius: 4px 0 0 4px;
}

.bp-search-page-v2 .bp-search-result-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bp-search-page-v2 .bp-search-result-body {
    display: grid;
    grid-template-rows: auto auto auto auto 1fr;
    align-content: start;
    gap: 6px;
    min-width: 0;
    min-height: 0 !important;
    height: 100% !important;
    padding: 16px 18px;
    overflow: hidden;
}

.bp-search-page-v2 .bp-search-result-body h3 {
    display: -webkit-box;
    margin: 2px 0 4px;
    overflow: hidden;
    color: #161616;
    font-size: 18px;
    line-height: 1.22;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.bp-search-page-v2 .bp-search-result-kicker,
.bp-search-page-v2 .bp-search-result-price,
.bp-search-page-v2 .bp-search-result-area,
.bp-search-page-v2 .bp-search-result-footer span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-search-page-v2 .bp-search-result-price,
.bp-search-page-v2 .bp-search-result-area,
.bp-search-page-v2 .bp-search-result-footer span {
    white-space: nowrap;
}

.bp-search-page-v2 .bp-search-result-footer {
    align-self: end;
    min-width: 0;
    margin-top: 4px;
}

.bp-search-page-v2 .bp-search-result-footer img {
    max-width: 84px;
    max-height: 32px;
}

/*
 * The below band reads --bp-search-inset like the rest of the search chrome.
 * It used to hardcode 100px above 1200px wide, to match a footer that sat at
 * 100px. The footer now sits on the frame at 40px, so the SEO sections below
 * the results were the only part of the page still inset 100 -- a 60px step
 * under the map, the cards and the filter bar.
 */
.bp-search-page-v2 .bp-search-v2-below {
    display: grid;
    gap: 28px;
    padding: 40px var(--bp-search-inset) 64px;
    background: #ffffff;
}

.bp-search-page-v2 .bp-search-v2-page-below {
    clear: both;
    width: 100%;
}

.bp-search-page-v2 .bp-search-below-section {
    /* No self-centering — sections fill the band so their left edge matches
       the footer columns. */
    display: grid;
    gap: 18px;
    width: 100%;
    max-width: none;
    margin: 0;
}

.bp-search-page-v2 .bp-search-below-heading {
    display: grid;
    gap: 4px;
}

.bp-search-page-v2 .bp-search-below-heading p,
.bp-search-page-v2 .bp-search-below-heading h2,
.bp-search-page-v2 .bp-search-nearby-card-header strong,
.bp-search-page-v2 .bp-search-related-group h3,
.bp-search-page-v2 .bp-search-seo-content-card h3,
.bp-search-page-v2 .bp-search-footer h2,
.bp-search-page-v2 .bp-search-footer h3,
.bp-search-page-v2 .bp-search-footer p {
    margin: 0;
}

.bp-search-page-v2 .bp-search-below-heading p {
    color: #ff622c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.bp-search-page-v2 .bp-search-below-heading h2 {
    color: #161616;
    font-size: 24px;
    line-height: 1.18;
}

.bp-search-page-v2 .bp-search-nearby-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.bp-search-page-v2 .bp-search-nearby--geo .bp-search-nearby-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bp-search-page-v2 .bp-search-nearby-card,
.bp-search-page-v2 .bp-search-related-group,
.bp-search-page-v2 .bp-search-seo-content-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid #dde5e9;
    border-radius: 4px;
    background: #ffffff;
}

.bp-search-page-v2 .bp-search-nearby--geo .bp-search-nearby-card {
    align-content: start;
}

.bp-search-page-v2 .bp-search-nearby-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #161616;
    text-decoration: none;
}

.bp-search-page-v2 .bp-search-nearby-card-header:hover,
.bp-search-page-v2 .bp-search-nearby-card-header:focus {
    color: #ff622c;
    text-decoration: none;
}

.bp-search-page-v2 .bp-search-nearby-card-header span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.bp-search-page-v2 .bp-search-nearby-card-header small,
.bp-search-page-v2 .bp-search-nearby-listing small {
    color: #6f6f6f;
    font-size: 12px;
}

.bp-search-page-v2 .bp-search-nearby-list {
    display: grid;
    gap: 10px;
}

.bp-search-page-v2 .bp-search-nearby-listing {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 64px;
    color: #161616;
    text-decoration: none;
}

.bp-search-page-v2 .bp-search-nearby-listing:hover,
.bp-search-page-v2 .bp-search-nearby-listing:focus {
    color: #ff622c;
    text-decoration: none;
}

.bp-search-page-v2 .bp-search-nearby-listing img {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    object-fit: cover;
}

.bp-search-page-v2 .bp-search-nearby-listing span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.bp-search-page-v2 .bp-search-nearby-listing strong,
.bp-search-page-v2 .bp-search-nearby-listing small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-search-page-v2 .bp-search-nearby--geo .bp-search-nearby-listing {
    align-items: start;
}

.bp-search-page-v2 .bp-search-nearby--geo .bp-search-nearby-listing small {
    display: -webkit-box;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.bp-search-page-v2 .bp-search-nearby-listing .bp-search-nearby-price {
    color: var(--bp-color-black);
    font-weight: var(--bp-weight-bold);
}

.bp-search-page-v2 .bp-search-related-grid,
.bp-search-page-v2 .bp-search-seo-content-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.bp-search-page-v2 .bp-search-seo-content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bp-search-page-v2 .bp-search-related--geo .bp-search-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A short column (5 landing pages) next to a long one (28 business parks)
   keeps its title and links together at the top of the stretched card instead
   of spreading them over its height. */
.bp-search-page-v2 .bp-search-related-group {
    align-content: start;
}

.bp-search-page-v2 .bp-search-related-group div {
    display: grid;
    gap: 8px;
    align-content: start;
}

.bp-search-page-v2 .bp-search-related-group a,
.bp-search-page-v2 .bp-search-footer a {
    color: inherit;
    text-decoration: none;
}

.bp-search-page-v2 .bp-search-related-group a:hover,
.bp-search-page-v2 .bp-search-related-group a:focus,
.bp-search-page-v2 .bp-search-footer a:hover,
.bp-search-page-v2 .bp-search-footer a:focus {
    color: #ff622c;
    text-decoration: none;
}

.bp-search-page-v2 .bp-search-seo-content-card p {
    margin: 0;
    color: #6f6f6f;
}

/* Page-managed rich text inside the SEO panel (geo seo_content/description). */
.bp-search-page-v2 .bp-search-seo-content-richtext {
    width: 100%;
    max-width: none;
    margin-bottom: 24px;
    color: #444444;
    line-height: 1.6;
}

.bp-search-page-v2 .bp-geo-count .bp-search-seo-content-richtext,
.bp-search-page-v2 .bp-search-seo-intro .bp-search-seo-content-richtext {
    margin-bottom: 0;
}

.bp-search-page-v2 .bp-search-seo-content-richtext h2,
.bp-search-page-v2 .bp-search-seo-content-richtext h3 {
    margin: 20px 0 8px;
    color: #161616;
}

.bp-search-page-v2 .bp-search-seo-content-richtext a {
    color: #ff622c;
}

/* Flat links section — no card chrome, it flows into the page like the
   canonical site footer that follows it. */
.bp-search-page-v2 .bp-search-secondary-footer {
    display: grid;
    gap: 28px;
    padding: 40px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #161616;
}

.bp-search-page-v2 .bp-search-secondary-footer .bp-search-footer-brand {
    display: grid;
    gap: 8px;
}

.bp-search-page-v2 .bp-search-secondary-footer .bp-search-footer-brand p,
.bp-search-page-v2 .bp-search-secondary-footer .bp-search-footer-bottom {
    color: #6b7588;
}

.bp-search-page-v2 .bp-search-footer-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px;
}

.bp-search-page-v2 .bp-search-footer-group {
    display: grid;
    align-content: start;
    gap: 8px;
}

.bp-search-page-v2 .bp-search-footer-group h3 {
    color: #161616;
    font-size: 14px;
}

.bp-search-page-v2 .bp-search-footer-group a {
    color: #3a3a3c;
    font-size: 12px;
}

.bp-search-page-v2 .bp-search-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid #e2ddd6;
    font-size: 12px;
}

.bp-search-page-v2 .bp-search-footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.bp-search-page-v2 #search-v2-below-sections > .bp-footer {
    width: 100%;
}


.bp-search-page-v2 .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 24px 0;
    padding: 0 36px;
    list-style: none;
}

.bp-search-page-v2 .pagination > li {
    list-style: none;
}

.bp-search-page-v2 .pagination > li > a,
.bp-search-page-v2 .pagination > li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--bp-color-medium);
    border-radius: var(--bp-radius-sm);
    background: #ffffff;
    color: var(--bp-color-black);
    font-size: var(--bp-text-xs);
    font-weight: var(--bp-weight-medium);
    text-decoration: none;
}

.bp-search-page-v2 .pagination > li > a:hover,
.bp-search-page-v2 .pagination > li > a:focus {
    border-color: var(--bp-color-orange);
    color: var(--bp-color-orange);
}

.bp-search-page-v2 .pagination > li.active > span {
    border-color: var(--bp-color-orange);
    background: var(--bp-color-orange);
    color: #ffffff;
}

@media (max-width: 1280px) {
    .bp-search-page-v2 .bp-search-filter-bar {
        gap: 5px;
    }

    .bp-search-page-v2 .bp-search-filter-location {
        flex-basis: 240px;
        min-width: 220px;
    }

    .bp-search-page-v2 .bp-search-filter-field:not(.bp-search-filter-location):not(.bp-search-filter-transaction):not(.bp-search-filter-more-trigger):not(.bp-search-filter-sort) {
        flex-basis: 124px;
    }

    .bp-search-page-v2 .bp-search-filter-field[data-filter-menu="area"],
    .bp-search-page-v2 .bp-search-filter-more-trigger {
        flex-basis: 108px;
    }

    .bp-search-page-v2 .bp-search-filter-field[data-filter-menu="price"] {
        flex-basis: 90px;
    }

    .bp-search-page-v2 .bp-search-filter-transaction,
    .bp-search-page-v2 .bp-search-filter-sort {
        flex-basis: 98px;
    }
}

@media (max-width: 1180px) {
    .bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-location {
        min-width: 160px !important;
    }

    .bp-search-page-v2 .bp-search-filter-bar--labels .bp-search-filter-field:not(.bp-search-filter-location):not(.bp-search-filter-sort):not(.bp-search-filter-more-trigger) {
        min-width: 96px;
    }

    .bp-search-page-v2 .bp-search-nearby--geo .bp-search-nearby-grid,
    .bp-search-page-v2 .bp-search-related--geo .bp-search-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bp-search-page-v2 .bp-search-related-grid,
    .bp-search-page-v2 .bp-search-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) {
    .bp-search-page-v2 .search-page {
        display: block;
        height: auto;
        min-height: 0;
        padding: 0;
    }

    .bp-search-page-v2 .search-page > .col-12.col-lg-7,
    .bp-search-page-v2 #list-view-search {
        max-width: 100%;
        height: auto;
        padding: 0;
    }

    .bp-search-page-v2 .bp-search-v2-results-scroll {
        height: auto;
        border-radius: 0;
    }

    /*
     * Below 1200 the map column is gone and the result list is the page, so it
     * sits on the frame like the title, the header and the footer. The id
     * covers both list shells: the search page's .bp-search-v2-results-scroll
     * and the geo pages' .bp-fixed-page-height, which carried no inset at all
     * and ran its cards to both screen edges.
     */
    .bp-search-page-v2 #search-results-list {
        padding: 16px var(--bp-search-inset);
    }
}

@media (max-width: 1024px) {
    .bp-search-page-v2 #mobile-pagination-wrapper .pagination {
        padding-left: var(--bp-search-inset);
        padding-right: var(--bp-search-inset);
    }

    .bp-search-page-v2 .bp-search-v2-filter-shell {
        display: none !important;
    }

    .bp-search-page-v2 #search-form-modal .modal-header,
    .bp-search-page-v2 #search-form-modal .modal-body {
        padding-right: 24px;
        padding-left: 24px;
    }
}

@media (max-width: 760px) {
    /* Production hides the region description and the FAQ on phones (hidden-xs). */
    .bp-search-page-v2 .bp-geo-description {
        display: none;
    }

    .bp-search-page-v2 .bp-search-nearby-grid,
    .bp-search-page-v2 .bp-search-related-grid,
    .bp-search-page-v2 .bp-search-seo-content-grid,
    .bp-search-page-v2 .bp-search-footer-grid {
        grid-template-columns: 1fr;
    }

    .bp-search-page-v2 .bp-search-nearby--geo .bp-search-nearby-grid,
    .bp-search-page-v2 .bp-search-related--geo .bp-search-related-grid {
        grid-template-columns: 1fr;
    }

    .bp-search-page-v2 .bp-search-v2-below {
        padding: 24px var(--bp-search-inset) 48px;
    }

    .bp-search-page-v2 .bp-search-footer {
        padding: 28px 20px;
    }
}

/* ==========================================================================
 * Search page: conform the map + result cards to the Figma-derived design
 * (design-assets zip: "Zoeken"/"Plaats" v2).
 *
 * Deltas measured against the design before writing this block:
 *   card radius        4px            -> 10px
 *   card image         flush to edge   -> inset, all four corners rounded
 *   card title/price   18px            -> 24px / 22px
 *   result tag         16px, static    -> 12px pill overlaid on the image
 *   map                square corners  -> 12px radius
 *   "Zoek als ik de kaart verschuif"
 *                      unstyled inline -> white pill floating inside the map
 *
 * Appended last so it wins over the earlier rules in this file without
 * needing !important, except where the rules above already use it.
 * ========================================================================== */

.bp-search-page-v2 .bp-search-result-card.bp-listing-card {
    border-radius: 10px;
    padding: 8px;
    gap: 16px;
    grid-template-columns: minmax(190px, 40%) minmax(0, 1fr) !important;
}

.bp-search-page-v2 .bp-search-result-card--platinum.bp-listing-card {
    grid-template-columns: 55% minmax(0, 1fr) !important;
}

.bp-search-page-v2 .bp-search-result-card--platinum .bp-search-result-area,
.bp-search-page-v2 .bp-search-result-card--platinum .bp-search-result-price {
    white-space: normal;
}

.bp-search-page-v2 .bp-search-result-card--gold.bp-listing-card {
    grid-template-columns: 40% minmax(0, 1fr) !important;
}

.bp-search-page-v2 .bp-search-result-card--silver.bp-listing-card {
    grid-template-columns: 30% minmax(0, 1fr) !important;
}

.bp-search-page-v2 .bp-search-result-card--basic.bp-listing-card {
    grid-template-columns: 26% minmax(0, 1fr) !important;
}

/* Image sits inside the card's padding, rounded on every corner. */
.bp-search-page-v2 .bp-search-result-card.bp-listing-card .bp-search-result-media,
.bp-search-page-v2 .bp-search-result-card.bp-listing-card .bp-listing-card-media {
    border-radius: 8px;
}

/* Tag: small pill over the image, not a full-size line of text. */
.bp-search-page-v2 .bp-search-result-card .bp-listing-card-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    pointer-events: none;
}

.bp-search-page-v2 .bp-search-result-card .bp-listing-card-overlay .bp-tag {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

/*
 * Body typography, per Steven on BPCOM-1575: the address is the only large
 * line. Under it come the city, then the surface with the type, then the price
 * in a smaller font than it used to have.
 */
.bp-search-page-v2 .bp-search-result-card .bp-search-result-body h3 {
    margin: 2px 0 2px;
    font-size: 24px;
    line-height: 1.15;
}

.bp-search-page-v2 .bp-search-result-card .bp-search-result-city {
    margin-bottom: 8px;
    color: #5c5651;
    font-size: 15px;
    line-height: 1.3;
}

.bp-search-page-v2 .bp-search-result-card .bp-search-result-area {
    font-size: 15px;
    line-height: 1.3;
}

.bp-search-page-v2 .bp-search-result-card .bp-search-result-body .bp-listing-card-price {
    margin-top: 2px;
    font-size: 16px;
    font-weight: 600;
}

/* "mappanel": 6px radius, clipped, with the move-the-map control inside it. */
.bp-search-page-v2 #map-outer,
.bp-search-page-v2 #map-canvas {
    border-radius: 6px;
}

.bp-search-page-v2 #map-outer {
    position: relative;
}

/* Marker card: the design-system map reveal card (map_reveal_card.html) over
   the bottom of the map, 20px from its edges, as on /_ds/pages/search/.
   maps.js show_ad_snippet fills #ad-snippet and sets .show-ad-snippet on
   #search-results-map; close_ad_snippet removes it. */
.bp-search-page-v2 #ad-snippet {
    display: none;
}

.bp-search-page-v2 #search-results-map.show-ad-snippet #ad-snippet {
    position: absolute;
    right: 20px;
    bottom: 20px;
    left: 20px;
    z-index: 5;
    display: block;
}

@media (min-width: 1025px) {
    .bp-search-page-v2 #ad-snippet .bp-search-map-card {
        height: 140px;
        min-height: 0;
    }

    .bp-search-page-v2 #ad-snippet .bp-search-map-card-image {
        min-height: 0;
    }

    .bp-search-page-v2 #ad-snippet .bp-search-map-card-body {
        gap: 4px;
        padding: 14px 16px;
    }

    .bp-search-page-v2 #ad-snippet .bp-search-map-card-link h3 {
        overflow: hidden;
        font-size: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .bp-search-page-v2 #ad-snippet .bp-search-map-card-logo {
        position: absolute;
        right: 16px;
        bottom: 14px;
        max-width: 80px;
        max-height: 32px;
    }
}

/* A hovered map marker highlights its list card (maps.js highlight_result),
   the counterpart of the list card hover that shows its marker on the map. */
.bp-search-page-v2 .bp-search-result-card.bp-listing-card.is-map-hover {
    border-color: var(--bp-color-orange);
    box-shadow: 0 0 0 1px var(--bp-color-orange);
}

.bp-search-page-v2 .bp-search-result-card.bp-listing-card.is-map-hover .bp-listing-card-media img {
    transform: scale(1.04);
}

.bp-search-page-v2 #floating-panel {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 32px);
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--bp-color-white);
    box-shadow: 0 6px 18px rgba(22, 22, 22, 0.14);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.bp-search-page-v2 #floating-panel input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--bp-color-orange);
    flex: none;
}

.bp-search-page-v2 #floating-panel br {
    display: none;
}

@media (max-width: 1024px) {
    .bp-search-page-v2 #floating-panel {
        top: 12px;
        left: 12px;
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* ==========================================================================
 * Phones: stack the result card. The two-column layout leaves the text column
 * 83px on /zoeken/ (titles render as "Gronin / genh...", prices truncate).
 * Photo on top, full-width body below. Last in the file on purpose: the
 * two-column rules above are !important, and at equal specificity the later
 * declaration wins.
 * ========================================================================== */
@media (max-width: 600px) {
    .bp-search-page-v2 .bp-search-result-card.bp-listing-card,
    .bp-search-page-v2 .bp-search-result-card--platinum.bp-listing-card,
    .bp-search-page-v2 .bp-search-result-card--gold.bp-listing-card,
    .bp-search-page-v2 .bp-search-result-card--premium.bp-listing-card,
    .bp-search-page-v2 .bp-search-result-card--silver.bp-listing-card,
    .bp-search-page-v2 .bp-search-result-card--basic.bp-listing-card {
        grid-template-columns: minmax(0, 1fr) !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .bp-search-page-v2 .bp-search-result-card.bp-listing-card .bp-search-result-media,
    .bp-search-page-v2 .bp-search-result-card.bp-listing-card .bp-listing-card-media {
        /* !important: the desktop rules pin the media to height:100% with
           !important, which resolves to auto (58px of alt text) once the card
           row is auto. Same-weight later declaration wins. */
        height: 190px !important;
        min-height: 190px !important;
    }

    .bp-search-page-v2 .bp-search-result-card--platinum.bp-listing-card .bp-search-result-media,
    .bp-search-page-v2 .bp-search-result-card--platinum.bp-listing-card .bp-listing-card-media {
        height: 225px !important;
        min-height: 225px !important;
    }

    .bp-search-page-v2 .bp-search-result-card--gold.bp-listing-card .bp-search-result-media,
    .bp-search-page-v2 .bp-search-result-card--gold.bp-listing-card .bp-listing-card-media {
        height: 180px !important;
        min-height: 180px !important;
    }

    .bp-search-page-v2 .bp-search-result-card--silver.bp-listing-card .bp-search-result-media,
    .bp-search-page-v2 .bp-search-result-card--silver.bp-listing-card .bp-listing-card-media,
    .bp-search-page-v2 .bp-search-result-card--basic.bp-listing-card .bp-search-result-media,
    .bp-search-page-v2 .bp-search-result-card--basic.bp-listing-card .bp-listing-card-media {
        height: 135px !important;
        min-height: 135px !important;
    }

    .bp-search-page-v2 .bp-search-result-card .bp-search-result-body h3 {
        font-size: 20px;
    }
}

/*
 * The footer follows the page frame.
 *
 * The search pages deliberately use a wider frame than the rest of the site
 * (--bp-search-width 1920 against --bp-page-width 1440, per the 6/8 rule
 * above). The footer is a shared component on the 1440 box, so above 1440 the
 * footer and the page it sits under drifted apart. Header, content and footer
 * now share one frame on every page - it is the frame's width that differs
 * between page types, not the alignment within a page.
 */
.bp-search-page-v2 .bp-footer-inner {
    max-width: var(--bp-search-width);
    padding-right: var(--bp-search-inset);
    padding-left: var(--bp-search-inset);
}

/*
 * Mobile view bar (design-v3 Zoeken "MOBILE VIEW BAR"): fixed to the bottom
 * below 1025px, two buttons - save the search, and the Kaart/Lijst toggle
 * bp.search.map_css drives. The panel is the legacy .mobile-footer-panel
 * markup the base still renders; its legacy stylesheet is not loaded on v2
 * pages, so it rendered as two lines of text above the footer.
 */
.bp-search-page-v2 .mobile-footer-panel {
    display: none;
}

@media (max-width: 1024px) {
    body.bp-search-page-v2 {
        padding-bottom: 64px;
    }

    .bp-search-page-v2 .mobile-footer-panel {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 90;
        display: block;
        height: 64px;
        background: #ffffff;
        border-top: 1px solid var(--bp-color-medium);
    }

    .bp-search-page-v2 .mobile-footer-panel > .row.text-center {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .bp-search-page-v2 .mobile-footer-panel > .row.text-center > .footer-button:only-child {
        grid-column: 1 / -1;
    }

    .bp-search-page-v2 .mobile-footer-panel .footer-button {
        width: auto;
        height: 100%;
        padding: 0;
        float: none;
    }

    .bp-search-page-v2 .mobile-footer-panel .footer-button.save-search-mobile {
        border-right: 1px solid var(--bp-color-medium);
    }

    .bp-search-page-v2 .mobile-footer-panel .footer-button a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 100%;
        height: 100%;
        color: var(--bp-color-black);
        font-family: var(--bp-font-body);
        font-size: 13px;
        font-weight: var(--bp-weight-medium);
        line-height: 1;
        text-decoration: none;
    }

    .bp-search-page-v2 .mobile-footer-panel .footer-button i {
        font-size: 20px;
        line-height: 1;
    }
}

/*
 * Phone map view. bp.search.map_css toggles body.show-map from the bar's
 * Kaart/Lijst button; below 1025px the map column is otherwise collapsed
 * (auto height, the map fills 100% of nothing). With the class on, the map
 * column covers the screen between the header and the view bar, the way the
 * legacy page-specific stylesheet (not loaded on v2) did it.
 */
@media (max-width: 1024px) {
    body.bp-search-page-v2.show-map {
        overflow: hidden;
    }

    .bp-search-page-v2.show-map .search-page > .col-12.col-lg-7 {
        position: fixed;
        top: var(--bp-menu-height);
        right: 0;
        bottom: 64px;
        left: 0;
        z-index: 80;
        height: auto;
        max-width: none;
        background: #ffffff;
    }

    .bp-search-page-v2.show-map .search-page > .col-12.col-lg-7 .map-view,
    .bp-search-page-v2.show-map #search-results-map,
    .bp-search-page-v2.show-map #map-outer {
        height: 100%;
    }
}