/* --------------------------------------------------------------------------
   Marker "overlap selection" — click a multi-listing marker to see the
   matching properties as a list right next to it (desktop popover) or in a
   bottom sheet (mobile). Ported from the legacy map implementation +
   assets/css/home-map-redesign.css (the home page's original map), adapted
   for the redesign map screen's own card markup (.property-card.card-sm).
   -------------------------------------------------------------------------- */

body.home-overlap-open {
    overflow: hidden;
}

.map-search-redesign .home-overlap-layer {
    position: absolute;
    inset: 0;
    z-index: 1800;
    pointer-events: none;
}

.map-search-redesign .home-overlap-close {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #cbd7f2;
    border-radius: 999px;
    background: #fff;
    color: #0f2447;
    font-size: 17px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
    pointer-events: auto;
    cursor: pointer;
}

.map-search-redesign .home-overlap-pager {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #cbd7f2;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #0f2447;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    pointer-events: auto;
}

.map-search-redesign .home-overlap-pager button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: #0b4aa2;
    color: #fff;
    cursor: pointer;
}

.map-search-redesign .home-overlap-pager button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Desktop: marker-side speech-bubble popover
   -------------------------------------------------------------------------- */
.map-search-redesign .home-overlap-popover {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: visible;
    isolation: isolate;
    border: 1px solid #bfd0eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.24);
    pointer-events: auto;
}

.map-search-redesign .home-overlap-popover::before,
.map-search-redesign .home-overlap-popover::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 0;
}

.map-search-redesign .home-overlap-popover.is-anchor-left::before {
    left: -15px;
    top: calc(var(--home-overlap-tail-y, 48px) - 13px);
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 15px solid #bfd0eb;
}

.map-search-redesign .home-overlap-popover.is-anchor-left::after {
    left: -13px;
    top: calc(var(--home-overlap-tail-y, 48px) - 12px);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 14px solid #fff;
}

.map-search-redesign .home-overlap-popover.is-anchor-right::before {
    right: -15px;
    top: calc(var(--home-overlap-tail-y, 48px) - 13px);
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 15px solid #bfd0eb;
}

.map-search-redesign .home-overlap-popover.is-anchor-right::after {
    right: -13px;
    top: calc(var(--home-overlap-tail-y, 48px) - 12px);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 14px solid #fff;
}

.map-search-redesign .home-overlap-popover__head,
.map-search-redesign .home-overlap-popover__list,
.map-search-redesign .home-overlap-popover .home-overlap-pager {
    position: relative;
    z-index: 1;
    background: #fff;
}

.map-search-redesign .home-overlap-popover__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 48px;
    min-height: 48px;
    padding: 0 10px 0 14px;
    border-bottom: 1px solid #e5ebf7;
    border-radius: 13px 13px 0 0;
    color: #061633;
    font-size: 14px;
    font-weight: 900;
}

.map-search-redesign .home-overlap-close.is-popover {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    font-size: 16px;
}

.map-search-redesign .home-overlap-close.is-popover:hover,
.map-search-redesign .home-overlap-close.is-popover:focus-visible {
    background: #edf3fc;
}

.map-search-redesign .home-overlap-popover__list {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px;
    overflow-y: auto;
    border-radius: 0 0 13px 13px;
}

.map-search-redesign .home-overlap-pager.is-popover {
    align-self: center;
    flex: 0 0 auto;
    margin: 0 0 10px;
    box-shadow: none;
}

@media (max-width: 760px) {
    .map-search-redesign .home-overlap-popover {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Mobile: bottom sheet
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .map-search-redesign .home-overlap-layer.is-mobile {
        position: fixed;
        top: calc(var(--hn-mobile-header, 54px) + var(--hn-mobile-search, 58px));
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 4550;
        display: flex;
        align-items: flex-end;
        padding: 0;
        background: transparent;
        pointer-events: auto;
        box-sizing: border-box;
    }

    .map-search-redesign .home-overlap-sheet {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        max-height: min(58svh, calc(100dvh - var(--hn-mobile-header, 54px) - var(--hn-mobile-search, 58px) - 16px));
        overflow: hidden;
        border-radius: 24px 24px 0 0;
        background: #fff;
        box-shadow: 0 -24px 48px rgba(15, 23, 42, 0.24);
        transition: max-height 180ms ease;
    }

    .map-search-redesign .home-overlap-sheet.is-expanded {
        max-height: calc(100dvh - var(--hn-mobile-header, 54px) - var(--hn-mobile-search, 58px) - 12px);
    }

    .map-search-redesign .home-overlap-sheet__handle {
        display: block;
        width: 44px;
        height: 5px;
        margin: 9px auto 1px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: #cbd5e1;
        cursor: pointer;
    }

    .map-search-redesign .home-overlap-sheet__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 18px 12px;
        border-bottom: 1px solid #e5ebf7;
        color: #061633;
        font-size: 17px;
        font-weight: 900;
    }

    .map-search-redesign .home-overlap-sheet__actions {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .map-search-redesign .home-overlap-map-zoom {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 32px;
        min-width: 34px;
        padding: 0 10px;
        border: 1px solid #c7d4ec;
        border-radius: 9px;
        background: #f8fbff;
        color: #0b4aa2;
        font-size: 12px;
        font-weight: 900;
        cursor: pointer;
    }

    .map-search-redesign .home-overlap-map-zoom:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .map-search-redesign .home-overlap-sheet__head .home-overlap-close {
        width: 34px;
        height: 34px;
        box-shadow: none;
    }

    .map-search-redesign .home-overlap-list {
        display: block;
        flex: 1 1 auto;
        max-height: calc(56svh - 154px);
        padding: 14px 18px;
        overflow-y: auto;
        transition: max-height 180ms ease;
    }

    .map-search-redesign .home-overlap-sheet.is-expanded .home-overlap-list {
        max-height: calc(82svh - 154px);
    }

    .map-search-redesign .home-overlap-layer.is-mobile .home-overlap-pager {
        display: flex;
        justify-content: center;
        width: calc(100% - 36px);
        margin: 0 18px 18px;
        box-shadow: none;
    }
}

/* --------------------------------------------------------------------------
   Property list rows inside the overlap layer
   -------------------------------------------------------------------------- */
.map-search-redesign .home-overlap-property-list {
    display: flex !important;
    flex-direction: column !important;
    align-content: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.map-search-redesign .home-overlap-popover .home-overlap-property-list .property-card {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 120px !important;
    height: 120px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid #c4d0e6 !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: none !important;
}

@media (max-width: 760px) {
    .map-search-redesign .home-overlap-list .home-overlap-property-list .property-card {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 116px !important;
        height: 116px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid #c4d0e6 !important;
        border-radius: 9px !important;
        background: #fff !important;
        box-shadow: none !important;
    }
}