/* =============================================================================
   Explore All Properties (/Home/PropertyMap) - page-scoped, everything under .pm-page.
   Banner values are copied from the other redesigned public pages
   (home-counties.css .pbc-head, our-team.css .tm-hero/.tm-intro) so this page
   reads as part of the same set. No font-family: the site font is inherited.
   Pin colours: sale #1271c4, rent #c2410c (white text passes 4.5:1 on both, and
   the pair stays distinct for red-green colour blindness).
   ============================================================================= */
.pm-page {
    --pm-sale: #1271c4;
    --pm-rent: #c2410c;
    --pm-navy: #244565;
    --pm-teal: #30caa0;
    --pm-heading: #333333;
    --pm-ink: #1f2a37;
    --pm-text: #707070;
    --pm-muted: #5b6676;
    --pm-line: #e3e8ee;
    --pm-surface: #fff;
    --pm-bg: #F5F6F7;
    --pm-bar-h: 64px; /* real height set by property-map.js */
    background: var(--pm-bg);
    font-size: 14px;
    color: var(--pm-ink);
}

.pm-page *, .pm-page *::before, .pm-page *::after { box-sizing: border-box; }
.pm-page [hidden] { display: none !important; }

.pm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Page head (values from .pbc-head / .tm-hero) ---------- */
.pm-head {
    position: relative;
    padding: 40px 24px 10px; /* banner top as .pbc-head; tighter bottom so the filters sit close */
    text-align: center;
}

.pm-page .pm-head h1 {
    position: relative;
    font-size: clamp(1.7rem, 3.4vw, 2.15rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
    padding-bottom: 14px;
    color: var(--pm-heading);
    text-wrap: balance;
    text-transform: capitalize;
}

    .pm-page .pm-head h1::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: var(--pm-teal);
        border-radius: 2px;
    }

/* ---------- Filter row (sticky) ---------- */
.pm-bar {
    position: sticky;
    top: 0;
    z-index: 900; /* under the site header (1000) and its drawer */
    background: var(--pm-bg);
    border-bottom: 1px solid transparent;
    transition: border-color .15s, box-shadow .15s;
}

.pm-bar.is-stuck { border-bottom-color: var(--pm-line); box-shadow: 0 4px 12px rgba(16, 24, 40, .06); }

/* Toolbar: tabs on the left (in line with the map's left edge and zoom
   controls), legend on the right. */
.pm-bar-in {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px 16px;
    padding-top: 6px;
    padding-bottom: 12px;
}

.pm-bar-in .pm-pills { grid-column: 1; }
.pm-bar-in .pm-legend { grid-column: 2; justify-self: end; }

.pm-pills, .pm-fsbar {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--pm-line);
    border-radius: 999px;
    background: var(--pm-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.pm-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--pm-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

.pm-pill:hover { color: var(--pm-ink); background: #f0f3f6; }
.pm-pill.is-on, .pm-pill.is-on:hover { background: var(--pm-navy); color: #fff; }
.pm-pill:focus-visible { outline: 2px solid var(--pm-sale); outline-offset: 2px; }

.pm-pill-n { font-weight: 500; opacity: .85; }
.pm-pill-n:empty { display: none; }


/* screen-reader-only live count */
.pm-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pm-page .pm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--pm-muted);
}

.pm-legend li { display: inline-flex; align-items: center; gap: 8px; margin: 0; }

.pm-swatch {
    display: inline-block;
    width: 22px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .2);
}

.pm-swatch--sale { background: var(--pm-sale); }
.pm-swatch--rent { background: var(--pm-rent); }
.pm-swatch--both { background: linear-gradient(90deg, var(--pm-sale) 50%, var(--pm-rent) 50%); }

/* ---------- Map ---------- */
.pm-body { padding-bottom: 56px; }

.pm-mapwrap {
    position: relative;
    height: max(600px, calc(100vh - var(--pm-bar-h) - 24px));
    height: max(600px, calc(100dvh - var(--pm-bar-h) - 24px));
    overflow: hidden;
    border: 1px solid var(--pm-line);
    border-radius: 12px;
    background: #e8ecef;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 10px 30px rgba(16, 24, 40, .08);
    isolation: isolate; /* keeps Leaflet's z-indexes inside the map */
}

.pm-map { position: absolute; inset: 0; }

.pm-page .leaflet-container { font: inherit; font-size: 14px; background: #e8ecef; }
.pm-page .leaflet-tile-pane { filter: saturate(.8) brightness(1.03); }
.pm-page .leaflet-control-attribution { font-size: 14px; line-height: 1.4; background: rgba(255, 255, 255, .85); }

/* Leaflet bar controls: zoom, reset, full screen */
.pm-page .leaflet-bar { border: 0; border-radius: 10px; box-shadow: 0 1px 4px rgba(16, 24, 40, .2), 0 0 0 1px rgba(16, 24, 40, .08); overflow: hidden; }
.pm-page .leaflet-bar a, .pm-page .leaflet-bar button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--pm-line);
    background: var(--pm-surface);
    color: var(--pm-ink);
    font: 600 18px/1 inherit;
    text-decoration: none;
    cursor: pointer;
}

.pm-page .leaflet-bar a:last-child, .pm-page .leaflet-bar button:last-child { border-bottom: 0; }
.pm-page .leaflet-bar a:hover, .pm-page .leaflet-bar button:hover { background: #f0f3f6; color: var(--pm-ink); }
.pm-page .leaflet-bar a:focus-visible, .pm-page .leaflet-bar button:focus-visible { outline: 2px solid var(--pm-sale); outline-offset: -2px; }
.pm-page .leaflet-touch .leaflet-bar a { width: 36px; height: 36px; line-height: 36px; }
.pm-page .leaflet-control-zoom-in, .pm-page .leaflet-control-zoom-out { font-size: 20px !important; }

/* ---------- Tooltip ----------
   The EZ Design System tooltip (data-ez-tip; ez-design-system.css 13b), ported
   because Public does not load the Admin design system. Same values with the
   design-system tokens inlined; the site font is inherited. The bubble is
   appended to <body> (or the full-screen element), so these rules are not
   scoped under .pm-page. z-index sits above the full-screen fallback. */
.ez-tip {
    position: fixed;
    z-index: 2147483601;
    max-width: 260px;
    padding: 6px 10px;
    background: #fff;
    color: #101828;
    border: 1px solid #c9d4e0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
    white-space: normal;
}

.ez-tip[hidden] { display: none; }

.ez-tip i {
    position: absolute;
    bottom: -6px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    background: #fff;
    border: solid #c9d4e0;
    border-width: 0 1px 1px 0;
    border-radius: 0;
    transform: rotate(45deg);
}

.ez-tip.below i { bottom: auto; top: -6px; border-width: 1px 0 0 1px; }

/* ---------- Price-tag markers ---------- */
/* The marker element is 0x0 at the property's point; the tag sits above it with
   its pointer tip exactly on the point. */
.pm-tagicon { width: 0 !important; height: 0 !important; }

.pm-tag {
    position: absolute;
    left: 0;
    bottom: 7px;
    padding: 4px 9px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--pm-sale);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 3px 8px rgba(16, 24, 40, .22);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    white-space: nowrap;
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    transition: transform .12s ease, box-shadow .12s ease;
    cursor: pointer;
}

/* pointer: white outline + coloured fill */
.pm-tag::before, .pm-tag::after {
    content: '';
    position: absolute;
    left: 50%;
    border-style: solid;
    border-color: transparent;
    transform: translateX(-50%);
}

.pm-tag::before { top: 100%; border-width: 8px 7px 0; border-top-color: #fff; }
.pm-tag::after { top: calc(100% - 1px); border-width: 6px 5px 0; border-top-color: var(--pm-tag-fill, var(--pm-sale)); }

.pm-tag--sale { --pm-tag-fill: var(--pm-sale); }
.pm-tag--rent { --pm-tag-fill: var(--pm-rent); background: var(--pm-rent); }
.pm-tag--both { --pm-tag-fill: var(--pm-rent); background: linear-gradient(90deg, var(--pm-sale) 50%, var(--pm-rent) 50%); }

.leaflet-marker-icon:hover .pm-tag, .pm-tag.is-active { transform: translateX(-50%) scale(1.12); box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 6px 16px rgba(16, 24, 40, .3); }
.pm-page .leaflet-marker-icon:focus { outline: none; }
.pm-page .leaflet-marker-icon:focus-visible .pm-tag { box-shadow: 0 0 0 3px var(--pm-navy), 0 3px 8px rgba(16, 24, 40, .22); }

/* ---------- Clusters ---------- */
.pm-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--pm-navy);
    box-shadow: 0 0 0 4px rgba(36, 69, 101, .22), 0 2px 8px rgba(16, 24, 40, .3);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    transition: transform .12s ease;
}

.leaflet-marker-icon:hover .pm-cluster { transform: scale(1.08); }
.pm-cluster--md { font-size: 15px; }
.pm-cluster--lg { font-size: 16px; }

/* ---------- "Ctrl + scroll to zoom" hint ---------- */
/* Hidden by opacity (not [hidden]) so it can fade; never takes clicks. */
.pm-hint {
    position: absolute;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 24, 40, .22);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
    pointer-events: none;
}

.pm-hint.is-on { opacity: 1; visibility: visible; transition: opacity .2s ease; }

.pm-hint span {
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(31, 42, 55, .88);
    box-shadow: 0 4px 16px rgba(16, 24, 40, .25);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

/* ---------- Loading / empty / error ---------- */
.pm-state {
    position: absolute;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
}

.pm-state.is-loading { background: rgba(245, 246, 247, .72); pointer-events: auto; }

.pm-state.is-loading::before {
    /* skeleton shimmer behind the spinner */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 70%);
    background-size: 220% 100%;
    animation: pm-shimmer 1.4s linear infinite;
}

.pm-state-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 340px;
    padding: 20px 24px;
    border: 1px solid var(--pm-line);
    border-radius: 12px;
    background: var(--pm-surface);
    box-shadow: 0 8px 28px rgba(16, 24, 40, .14);
    text-align: center;
    pointer-events: auto;
}

.pm-state-msg { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pm-ink); }
.pm-state:not(.is-loading) .pm-spinner { display: none; }

.pm-spinner {
    width: 26px;
    height: 26px;
    border: 3px solid #d6dde5;
    border-top-color: var(--pm-navy);
    border-radius: 50%;
    animation: pm-spin .8s linear infinite;
}

@keyframes pm-spin { to { transform: rotate(360deg); } }
@keyframes pm-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.pm-retry {
    min-height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--pm-navy);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

.pm-retry:hover { background: #1c3752; }
.pm-retry:focus-visible { outline: 2px solid var(--pm-sale); outline-offset: 2px; }

/* ---------- Preview card ---------- */
.pm-page .pm-card {
    position: absolute;
    z-index: 1200;
    width: 300px;
    border: 1px solid var(--pm-line);
    border-radius: 12px;
    background: var(--pm-surface);
    box-shadow: 0 10px 32px rgba(16, 24, 40, .24);
    color: var(--pm-ink);
}

/* arrow towards the pin (desktop); --pm-arrow-y set by property-map.js */
.pm-card::before {
    content: '';
    position: absolute;
    top: var(--pm-arrow-y, 50%);
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background: var(--pm-surface);
    border: 1px solid var(--pm-line);
    transform: rotate(45deg);
}

.pm-card.is-right::before { left: -8px; border-top: 0; border-right: 0; }
.pm-card.is-left::before { right: -8px; border-bottom: 0; border-left: 0; }

.pm-page .pm-card-link {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
}

.pm-page .pm-card-link:hover, .pm-page .pm-card-link:focus { color: inherit; text-decoration: none; }
.pm-page .pm-card-link:focus-visible { outline: 3px solid var(--pm-sale); outline-offset: 2px; }

.pm-card-img { display: block; aspect-ratio: 16 / 10; background: #e8ecef; }
.pm-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pm-card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.pm-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.pm-badge {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: #fff;
}

.pm-badge--sale { background: var(--pm-sale); }
.pm-badge--rent { background: var(--pm-rent); }

.pm-price { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--pm-ink); }
.pm-price small { font-size: 14px; font-weight: 500; color: var(--pm-muted); }
.pm-specs { font-size: 14px; color: var(--pm-ink); }
.pm-addr { font-size: 14px; color: var(--pm-muted); }

.pm-more {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--pm-line);
    font-size: 14px;
    font-weight: 700;
    color: var(--pm-sale);
}

.pm-card-link:hover .pm-more { text-decoration: underline; }

.pm-card-x {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 4px rgba(16, 24, 40, .25);
    color: var(--pm-ink);
    cursor: pointer;
}

.pm-card-x:hover { background: #fff; }
.pm-card-x:focus-visible { outline: 2px solid var(--pm-sale); outline-offset: 2px; }
.pm-card-grip { display: none; }

/* ---------- Full screen ---------- */
.pm-fsbar { display: none; }

.pm-mapwrap.is-fs {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.pm-mapwrap:fullscreen { height: 100%; }
.pm-mapwrap:-webkit-full-screen { height: 100%; }

/* fallback where the Fullscreen API is missing (iOS Safari) */
.pm-mapwrap.is-fs-fallback {
    position: fixed;
    inset: 0;
    z-index: 2147483600; /* above the site's drawer (2147483001) */
    height: 100%;
}

.pm-mapwrap.is-fs .pm-fsbar {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 1150;
    display: inline-flex;
    transform: translateX(-50%);
    box-shadow: 0 4px 16px rgba(16, 24, 40, .2);
}


/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .pm-mapwrap { height: max(560px, calc(100dvh - var(--pm-bar-h) - 24px)); }
}

@media (max-width: 640px) {
    .pm-head { padding: 32px 20px 8px; }
    .pm-wrap { padding: 0 12px; }
    /* one column: full-width tabs, legend underneath */
    .pm-bar-in { grid-template-columns: 1fr; gap: 8px 12px; padding-top: 6px; padding-bottom: 10px; }
    .pm-bar-in .pm-pills, .pm-bar-in .pm-legend { grid-column: 1; }
    .pm-bar-in .pm-legend { justify-self: start; }
    .pm-pills { display: flex; width: 100%; }
    .pm-pill { flex: 1 1 auto; justify-content: center; min-height: 40px; padding: 0 8px; }
    .pm-body { padding-bottom: 24px; }

    .pm-mapwrap {
        height: max(480px, calc(100vh - var(--pm-bar-h) - 12px));
        height: max(480px, calc(100dvh - var(--pm-bar-h) - 12px));
        border-radius: 12px;
    }

    .pm-mapwrap.is-fs .pm-fsbar { left: 10px; right: 10px; display: flex; transform: none; }
    .pm-mapwrap.is-fs .pm-fsbar .pm-pill { flex: 1 1 auto; justify-content: center; padding: 0 6px; }
    .pm-mapwrap.is-fs .leaflet-top { top: 62px; }

    /* bottom sheet */
    .pm-page .pm-card {
        left: 0 !important;
        right: 0;
        top: auto !important;
        bottom: 0;
        width: auto;
        border-width: 1px 0 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 28px rgba(16, 24, 40, .22);
        touch-action: pan-x;
        transition: transform .2s ease;
    }

    .pm-card::before { display: none; }

    .pm-card-grip {
        display: block;
        width: 40px;
        height: 4px;
        margin: 8px auto 0;
        border-radius: 2px;
        background: #cfd6de;
    }

    .pm-page .pm-card-link { display: flex; gap: 12px; padding: 10px 14px 14px; border-radius: 0; }
    .pm-card-img { flex: 0 0 128px; align-self: flex-start; border-radius: 8px; overflow: hidden; }
    .pm-card-body { min-width: 0; padding: 0 30px 0 0; gap: 2px; }
    .pm-price { font-size: 18px; }
    .pm-addr { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .pm-more { margin-top: 6px; padding-top: 6px; }
    .pm-card-x { top: 14px; right: 10px; }

    /* keep the OSM attribution visible above an open sheet */
    .pm-mapwrap.has-sheet .leaflet-bottom { bottom: var(--pm-sheet-h, 0px); }
}

@media (prefers-reduced-motion: reduce) {
    .pm-hint, .pm-hint.is-on { transition: none; }
    .pm-spinner { animation-duration: 2.4s; }
    .pm-state.is-loading::before { animation: none; }
    .pm-tag, .pm-cluster, .pm-pill, .pm-page .pm-card { transition: none; }
}