/* Toggle control, sits at the right end of the filter toolbar row (flex child
   of .listing-filter-wrapper, pinned right via margin-left:auto). Styled to
   match the neighbouring filter controls: same height/padding/font, same
   shadowed container and orange selected state. */
.content-body-view-toggle {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /* Guaranteed breathing room between the last filter control and the
       toggle: when the filter row is exactly full, margin-left:auto
       collapses to 0 and the toggle would touch the filters. Padding is
       inside the flex item, so the auto margin still right-pins the
       toggle while this padding keeps a minimum gap. */
    padding-left: 16px;
}

.content-body-view-toggle-group {
    display: flex;
    align-items: stretch;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
    border: none;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--white);
}

.content-body-view-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 15px 20px;
    border: none;
    background-color: transparent;
    color: var(--dark);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.content-body-view-toggle-btn + .content-body-view-toggle-btn {
    border-left: 1px solid #ddd;
}

.content-body-view-toggle-btn svg {
    fill: rgba(0, 0, 0, 0.6);
    width: 16px;
    height: 16px;
}

.content-body-view-toggle-btn:hover {
    color: var(--orange);
}

.content-body-view-toggle-btn:hover svg {
    fill: var(--orange);
}

/* Active segment mirrors the filter row's .selected state (orange text) */
.content-body-view-toggle-btn.is-active {
    background-color: transparent;
    color: var(--orange);
}

.content-body-view-toggle-btn.is-active svg {
    fill: var(--orange);
}

/* Map container (hidden by default; shown in map mode) */
.map-view {
    position: relative;
    height: 60vh;
    min-height: 420px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
    margin-bottom: 24px;
    background-color: #e8e8e8;
}

.map-view[hidden] {
    display: none;
}

.map-view__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* In map mode, hide the entire listing list (cards, adverts, category lists)
   + pagination, KEEPING only the toolbar row (Create Alert / sort / List-Map
   toggle) visible so the user can switch back. The map becomes the
   full-page presentation. */
.content__body.map-mode #listings_cn > *:not(.listing-filter-wrapper):not(.content-body-view-toggle),
.content__body.map-mode #recommended-business,
.content__body.map-mode .mt-5,
.content__body.map-mode .bottom-category-list,
.content__body.map-mode #listing-alerts {
    display: none !important;
}

.content__body.map-mode #map-view {
    display: block;
}

/* Overlay chip (top-left of the map): searched area + result count */
.map-view__label {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1000;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    max-width: calc(100% - 110px);
    background-color: rgba(255, 255, 255, 0.96);
    border-radius: 999px;
    padding: 7px 14px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
    font-size: 13px;
    color: rgba(0, 0, 0, 0.75);
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.map-view__label-area {
    font-weight: 700;
    color: var(--blue);
}

.map-view__label-count {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
}

.map-view__label-hidden {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
}

.map-view__label-loading {
    font-style: italic;
    color: rgba(0, 0, 0, 0.55);
}

.map-view__error {
    position: absolute;
    top: 54px;
    left: 12px;
    z-index: 1000;
    max-width: calc(100% - 24px);
    background-color: #fdecea;
    color: #b02a37;
    border: 1px solid #f5c2c7;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.map-view__hint {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.95);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    z-index: 500;
    white-space: nowrap;
    margin: 0;
}

/* Group list panel — businesses behind a grouped map marker, shown on
   the left of the map directly below the results count text. Stretches
   from below the label down to the bottom of the map so it uses the
   full available height; the body scrolls vertically, and every child
   wraps/shrinks to the panel width so no horizontal scrollbar can
   appear. */
.map-view__group-list {
    position: absolute;
    top: 54px;
    left: 12px;
    z-index: 1000;
    width: 300px;
    max-width: calc(100% - 24px);
    /* Fill from below the label to the bottom of the map container. */
    /* Fill from below the label (top: 54px) down to the very bottom of
       the map container so the panel uses the full available height. */
    max-height: calc(100% - 54px);
    overflow-y: auto;
    overflow-x: hidden;
    background-color: rgba(255, 255, 255, 0.97);
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.map-view__group-list[hidden] {
    display: none;
}

.map-view__group-list__head {
    position: sticky;
    top: 0;
    /* Keep the panel header above scrolling card content so listing
       images can never overlap/paint over the header text. */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background-color: #f4f6f8;
    border-bottom: 1px solid #e6e9ed;
    border-radius: 10px 10px 0 0;
}

.map-view__group-list__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--blue);
}

.map-view__group-list__close {
    border: 0;
    background: transparent;
    color: rgba(0, 0, 0, 0.55);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
}

.map-view__group-list__close:hover,
.map-view__group-list__close:focus {
    color: #b02a37;
}

.map-view__group-list__body {
    padding: 10px 12px;
    display: grid;
    /* No grid gap: the divider is a border-top on each entry after the
       first, with padding on both sides supplying the spacing. */
    gap: 0;
    /* Children must shrink to the panel width, never force it wider. */
    min-width: 0;
    max-width: 100%;
}

.map-view__group-entry {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    /* Room below the card content (the View listing button) so the
       divider between adjacent cards never touches the button. */
    padding-bottom: 12px;
}

/* Visible divider between listing cards in the group panel. Exactly one
   divider per gap: border-top on every entry after the first, spanning the
   card content width. Spacing sits on BOTH sides of the line (padding-bottom
   on the preceding card, padding-top on the following one) so the divider
   never touches the View listing button above or the next card's image/title
   below, and there is no leading or trailing divider. */
.map-view__group-entry + .map-view__group-entry {
    border-top: 1px solid #cbd5e1;
    padding-top: 12px;
}

/* Outranks the base .rb-map-popup { width: 280px } rule (which is defined
   LATER in this file at the same specificity) so group entries always fill
   the panel content box instead of forcing it wider — the root cause of the
   horizontal scrollbar in the preview panel. */
.map-view__group-entry.rb-map-popup {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Every card part wraps/shrinks to the panel width so long titles,
   prices and buttons never push a horizontal scrollbar into view. */
.map-view__group-entry .rb-map-popup__body {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.map-view__group-entry .rb-map-popup__title,
.map-view__group-entry .rb-map-popup__loc,
.map-view__group-entry .rb-map-popup__price {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.map-view__group-entry .rb-map-popup__media {
    height: 110px;
    max-width: 100%;
}

.map-view__group-entry .rb-map-popup__img {
    max-width: 100%;
}

.leaflet-container .map-view__group-entry .rb-map-popup__open {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
}

/* 'View listing' as a button-like action inside the group-list panel.
   The panel lives in #map-view (a sibling of the Leaflet container), so
   the .leaflet-container-scoped rules above never apply here; style the
   link directly. White on var(--blue) is ~6.3:1 (WCAG AA). */
.map-view__group-entry .rb-map-popup__open {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    background-color: var(--blue);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    padding: 8px 16px;
    border: 0;
    border-radius: 6px;
    margin-top: 4px;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
}

.map-view__group-entry .rb-map-popup__open:hover,
.map-view__group-entry .rb-map-popup__open:focus,
.map-view__group-entry .rb-map-popup__open:visited {
    background-color: #004a85;
    color: #fff;
}

/* Leaflet popup content — styled like a listing card */
.rb-map-popup {
    width: 280px;
    max-width: 280px;
    font-family: inherit;
}

.rb-map-popup__media {
    width: 100%;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #e8e8e8;
    margin-bottom: 10px;
}

.rb-map-popup__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rb-map-popup__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rb-map-popup__noimg {
    color: rgba(0, 0, 0, 0.45);
    font-size: 13px;
    text-align: center;
    padding: 0 12px;
}

.rb-map-popup__title {
    font-weight: 700;
    color: var(--blue);
    font-size: 15px;
    line-height: 1.3;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rb-map-popup__loc {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 4px;
}

.rb-map-popup__price {
    font-weight: 700;
    font-size: 14px;
    color: #111;
    margin-bottom: 10px;
}

/* Scoped under .leaflet-container so Leaflet's own `.leaflet-container a`
   rule (loaded after this stylesheet) can no longer override the button
   colour — previously teal (#0078A8) text on the blue background, which
   failed the 4.5:1 contrast requirement. White on var(--blue) is ~6.3:1. */
.leaflet-container .rb-map-popup__open {
    display: inline-block;
    background-color: var(--blue);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    padding: 8px 16px;
    border: 0;
    border-radius: 6px;
}

.leaflet-container .rb-map-popup__open:hover,
.leaflet-container .rb-map-popup__open:focus,
.leaflet-container .rb-map-popup__open:visited {
    background-color: #004a85;
    color: #fff;
}

/* Price pins — the listing price rendered directly on the pin */
.rb-price-pin,
.rb-price-pin.leaflet-div-icon {
    background: transparent;
    border: 0;
}

.rb-price-pin__label {
    position: relative;
    display: inline-block;
    transform: translate(-50%, -100%);
    background-color: #fff;
    color: #1c1c1c;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 999px;
    border: 2px solid #1c1c1c;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.rb-price-pin__label::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #1c1c1c;
    transition: border-top-color 0.15s ease;
}

.rb-price-pin:hover .rb-price-pin__label,
.rb-price-pin:focus .rb-price-pin__label {
    background-color: #1c1c1c;
    color: #fff;
}

.rb-price-pin:hover .rb-price-pin__label::after,
.rb-price-pin:focus .rb-price-pin__label::after {
    border-top-color: #1c1c1c;
}

/* Map clusters - count badges for dense pin groups (density-based
   clustering). Circular brand-blue badges, deliberately distinct from
   the white price pills so users can tell them apart at a glance. */
.rb-map-cluster,
.rb-map-cluster.leaflet-div-icon {
    background: transparent;
    border: 0;
}

.rb-map-cluster__count {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #004a85;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;
    border: 2.5px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.rb-map-cluster:hover .rb-map-cluster__count,
.rb-map-cluster:focus .rb-map-cluster__count {
    background-color: #062c4f;
    transform: scale(1.08);
}

.leaflet-container {
    font-family: inherit;
}

/* Mobile: map fills most of the viewport; controls stay tappable */
@media screen and (max-width: 767px) {
    .content-body-view-toggle {
        margin-left: 0;
        justify-content: flex-end;
    }

    /* Match the mobile filter controls (padding 14px 11px / font 14px) and
       keep the touch target >= 44px tall */
    .content-body-view-toggle-btn {
        padding: 14px 11px;
        font-size: 14px;
    }

    .map-view {
        height: calc(100vh - 160px);
        min-height: 400px;
    }

    .map-view__label {
        top: 10px;
        left: 10px;
        font-size: 12px;
        padding: 6px 12px;
        max-width: calc(100% - 20px);
    }

    .map-view__error {
        top: 52px;
        left: 10px;
        max-width: calc(100% - 20px);
    }

    .rb-price-pin__label {
        font-size: 13px;
        padding: 8px 11px;
    }

    .rb-map-popup {
        width: 240px;
        max-width: 240px;
    }

    .rb-map-popup__media {
        height: 120px;
    }

    .map-view__hint {
        bottom: 8px;
        font-size: 12px;
        padding: 4px 10px;
        max-width: 94vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Tablet gap (768-995px): between the mobile breakpoint (767px) and the
   width where the whole toolbar fits on one line (~996px), the toggle's
   min-content width (Create Alert ~217px + filter list ~549px + toggle
   ~198px = ~964px) exceeds the row, so margin-left:auto pushes it past the
   viewport edge where html{overflow-x:hidden} clips it — the toggle would
   be invisible. Instead wrap it onto its own full-width, right-aligned row
   (same pattern as the mobile block). The filter row itself can still be a
   few px wider than the container at exactly 768-797px; keep it scrollable
   with a hidden scrollbar (matches the mobile strip). */
.listing-filter-wrapper {
    gap: 16px;
}
@media screen and (max-width: 991px) {
    .listing-filter-wrapper {
        flex-wrap: wrap;
        align-items: flex-start;
        scrollbar-width: none;
    }

    .listing-filter-wrapper::-webkit-scrollbar {
        display: none;
    }

    .content-body-view-toggle {
        margin-left: 0;
        padding-left: 0;
    }

    .content__body__filter-option {
        flex-grow: 1;
        width: auto;
    }
}

/* BREAKPOINTS */

/* tpl4 glue (England page): tpl4 wraps the pagination block in .my-5
   (search/index.css hides .mt-5). Keep the toolbar row + map only. */
.content__body.map-mode .my-5 {
    display: none !important;
}