/* ==================================================================
   PILBE MODERN SEARCH — Stylesheet
   All selectors namespaced .pilbe-search__*
   Version: 2.0.0

   Tokens: consumed from assets/css/pilbe-tokens.css (enqueued globally).
   NEVER redefine --pilbe-* custom properties in this file.
   ================================================================== */

/* ── Legacy aliases — map old names to canonical tokens ─────────── */
:root {
    --pilbe-filter-h: 64px;
}

/* ── Reset / Base ───────────────────────────────────────────────── */
.pilbe-modern-search {
    font-family: var(--pilbe-font);
    color: var(--pilbe-text-primary);
    background: var(--pilbe-bg-page);
}

.pilbe-modern-search *,
.pilbe-modern-search *::before,
.pilbe-modern-search *::after {
    box-sizing: border-box;
}

/* ==================================================================
   1. LAYOUT — 50/50 Split
   ================================================================== */

/* §1 OLD grid layout deleted — canonical layout is at end of file (§30 area) */


/* Cards panel — left side, scrollable */
.pilbe-search__cards-panel {
    flex: 0 0 55%;
    width: 55%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 24px 40px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--pilbe-border-strong) transparent;
}

.pilbe-search__cards-panel::-webkit-scrollbar {
    width: 6px;
}
.pilbe-search__cards-panel::-webkit-scrollbar-track {
    background: transparent;
}
.pilbe-search__cards-panel::-webkit-scrollbar-thumb {
    background: var(--pilbe-border-strong);
    border-radius: 3px;
}

/* Map panel — right side, sticky, full viewport height */
.pilbe-search__map-panel {
    flex: 0 0 45%;
    width: 45%;
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.pilbe-search__map-panel #houzez-properties-map,
.pilbe-search__map-panel .pilbe-search__map-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


/* ==================================================================
   2. FILTER BAR � DELETED (rebuilt in �30)
   ================================================================== */

/* ==================================================================
   3. PROPERTY CARDS — DELETED (rebuilt in §32, Phase 3)
   ================================================================== */

/* ==================================================================
   4. MAP MARKERS — Price Pills
   ================================================================== */

.pilbe-price-pill {
    position: absolute;
    background: var(--pilbe-bg-surface);
    color: var(--pilbe-text-primary);
    border: 1.5px solid var(--pilbe-border-default);
    border-radius: var(--pilbe-radius-pill);
    padding: 5px 12px;
    font-family: var(--pilbe-font);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transform: translate(-50%, -100%);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    box-shadow: var(--pilbe-shadow-md);
    z-index: 1;
    user-select: none;
}

/* Animated entrance */
.pilbe-price-pill.pilbe-pill-enter {
    animation: pilbePillDrop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--pill-delay, 0ms);
}

@keyframes pilbePillDrop {
    0% {
        opacity: 0;
        transform: translate(-50%, -150%) scale(0.6);
        box-shadow: var(--pilbe-shadow-sm);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -100%) scale(1);
        box-shadow: var(--pilbe-shadow-md);
    }
}

.pilbe-price-pill::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--pilbe-bg-surface);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.08));
}

.pilbe-price-pill:hover,
.pilbe-price-pill.is-active {
    background: var(--pilbe-brand-500);
    color: var(--pilbe-text-inverse);
    border-color: var(--pilbe-brand-500);
    transform: translate(-50%, -100%) scale(1.08);
    box-shadow: var(--pilbe-shadow-lg);
    /* Boost above neighbouring pills (z:1), clusters (z:5),
       and any popover-adjacent stacking. */
    z-index: 50;
}

.pilbe-price-pill:hover::after,
.pilbe-price-pill.is-active::after {
    border-top-color: var(--pilbe-brand-500);
}

/* Cluster pill — design system v1 §6.4
   Reuses .pilbe-price-pill base; modifier overrides palette + scale. */
.pilbe-marker-pill--cluster {
    background: var(--pilbe-brand-50);
    color: var(--pilbe-brand-700);
    border-color: var(--pilbe-brand-50);
    transform: translate(-50%, -100%) scale(1.1);
    z-index: 5;
}

.pilbe-marker-pill--cluster::after {
    border-top-color: var(--pilbe-brand-50);
}

.pilbe-marker-pill--cluster:hover {
    background: var(--pilbe-brand-700);
    color: var(--pilbe-text-inverse);
    border-color: var(--pilbe-brand-700);
    transform: translate(-50%, -100%) scale(1.18);
}

.pilbe-marker-pill--cluster:hover::after {
    border-top-color: var(--pilbe-brand-700);
}

/* ==================================================================
   5. MAP CONTROLS & INFO WINDOW
   (Old .pilbe-search__map-controls replaced by .pilbe-map-toolbar)
   ================================================================== */

/* Legacy map controls — hidden, replaced by toolbar */
.pilbe-search__map-controls {
    display: none;
}

/* Map message toast */
.pilbe-search__map-message {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pilbe-text-muted);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.pilbe-search__map-message.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ==================================================================
   6. SKELETON LOADING
   ================================================================== */

@keyframes pilbeShimmer {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.pilbe-search__skeleton-card {
    background: var(--pilbe-bg-surface);
    border-radius: var(--pilbe-radius-lg);
    overflow: hidden;
    box-shadow: var(--pilbe-shadow-xs);
}

.pilbe-search__skeleton-image {
    aspect-ratio: 16 / 10;
    background: linear-gradient(90deg, var(--pilbe-neutral-200) 25%, var(--pilbe-neutral-300) 50%, var(--pilbe-neutral-200) 75%);
    background-size: 200px 100%;
    animation: pilbeShimmer 1.5s infinite;
}

.pilbe-search__skeleton-body {
    padding: 16px;
}

.pilbe-search__skeleton-line {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--pilbe-neutral-200) 25%, var(--pilbe-neutral-300) 50%, var(--pilbe-neutral-200) 75%);
    background-size: 200px 100%;
    animation: pilbeShimmer 1.5s infinite;
    margin-bottom: 10px;
}

.pilbe-search__skeleton-line--short { width: 50%; }
.pilbe-search__skeleton-line--medium { width: 75%; }
.pilbe-search__skeleton-line--meta { width: 30%; }
.pilbe-search__skeleton-line--price {
    height: 22px;
    width: 40%;
    margin-bottom: 14px;
}

/* Phase 5c — map area loading state.
   While AJAX is in-flight, dim the marker layer and count pill so the
   stale view reads as "updating" rather than "current". */
.pilbe-search__map-panel .pilbe-price-pill,
.pilbe-search__map-panel .pilbe-map-count-badge {
    transition: opacity 200ms ease-out;
}

.pilbe-search__map-panel.is-loading .pilbe-price-pill {
    opacity: 0.5;
    pointer-events: none;
}

/* Phase 5d — exempt the count badge from .is-loading dim. The badge text
   swaps to "Updating…" while in-flight (and on error rolls back via the
   _prevCountHtml snapshot), so it must stay full-strength to communicate
   state. Only the marker layer + price pills should dim. */
.pilbe-search__map-panel.is-loading .pilbe-map-count-badge {
    opacity: 1;
}

/* ==================================================================
   7. PAGINATION
   ==================================================================
   Server emits via houzez_ajax_pagination():
     <div class="pagination-wrap houzez_ajax_pagination">
       <nav><ul class="pagination justify-content-center">
         <li class="page-item"><a class="page-link" ...> | <span class="page-link current">N</span>
   The .pilbe-search__cards-panel scope keeps this from leaking into
   parent dashboards or other Bootstrap pagination instances. */

.pilbe-search__cards-panel .pagination-wrap.houzez_ajax_pagination {
    margin-top: 32px;
    padding-bottom: 20px;
}

.pilbe-search__cards-panel .pagination-wrap.houzez_ajax_pagination .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pilbe-search__cards-panel .pagination-wrap.houzez_ajax_pagination .page-item {
    margin: 0;
}

.pilbe-search__cards-panel .pagination-wrap.houzez_ajax_pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--pilbe-radius-md);
    border: 1px solid var(--pilbe-border-default);
    background: var(--pilbe-bg-surface);
    color: var(--pilbe-text-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: border-color var(--pilbe-duration-base) var(--pilbe-ease-standard),
                color var(--pilbe-duration-base) var(--pilbe-ease-standard),
                background var(--pilbe-duration-base) var(--pilbe-ease-standard);
}

.pilbe-search__cards-panel .pagination-wrap.houzez_ajax_pagination a.page-link:hover {
    border-color: var(--pilbe-brand-500);
    color: var(--pilbe-brand-500);
    background: var(--pilbe-bg-surface);
}

.pilbe-search__cards-panel .pagination-wrap.houzez_ajax_pagination a.page-link:focus-visible {
    outline: 2px solid var(--pilbe-brand-500);
    outline-offset: 2px;
}

.pilbe-search__cards-panel .pagination-wrap.houzez_ajax_pagination .page-item.active .page-link,
.pilbe-search__cards-panel .pagination-wrap.houzez_ajax_pagination span.page-link.current {
    background: var(--pilbe-brand-500);
    border-color: var(--pilbe-brand-500);
    color: var(--pilbe-text-inverse);
    cursor: default;
}

.pilbe-search__cards-panel .pagination-wrap.houzez_ajax_pagination .page-item.disabled .page-link {
    opacity: 0.4;
    pointer-events: none;
}

.pilbe-search__cards-panel .pagination-wrap.houzez_ajax_pagination .houzez-icon {
    font-size: 14px;
    line-height: 1;
}

/* ==================================================================
   8. MOBILE TOGGLE BAR
   ================================================================== */

.pilbe-search__mobile-toggle {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--pilbe-bg-surface);
    border-top: 1px solid var(--pilbe-border-default);
    padding: 8px 16px;
    gap: 8px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
}

.pilbe-search__mobile-toggle-btn {
    flex: 1;
    height: 44px;
    border: 1px solid var(--pilbe-border-default);
    border-radius: var(--pilbe-radius-md);
    background: var(--pilbe-bg-surface);
    font-family: var(--pilbe-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--pilbe-text-muted);
    cursor: pointer;
    transition: all var(--pilbe-duration-base) var(--pilbe-ease-standard);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pilbe-search__mobile-toggle-btn.is-active {
    background: var(--pilbe-brand-500);
    color: var(--pilbe-text-inverse);
    border-color: var(--pilbe-brand-500);
}

/* ==================================================================
   9. RESPONSIVE BREAKPOINTS
   ================================================================== */

/* Card-grid responsive rules live in §32 (single source of truth). */

/* Stacked layout: map hidden, list/map toggle */
@media (max-width: 1199px) {
    .pilbe-search__wrapper {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 100vh;
    }

    .pilbe-search__cards-panel {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible;
        height: auto;
        padding-bottom: 80px; /* space for bottom List/Map toggle */
    }

    .pilbe-search__map-panel {
        display: none;
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
        overflow: hidden;
    }

    .pilbe-search__map-panel.is-visible {
        display: block !important;
        height: calc(100vh - 184px); /* nav + Row1 + Row2 + toggle bar */
        min-height: 420px;
    }

    .pilbe-search__cards-panel.is-hidden {
        display: none !important;
    }

    .pilbe-search__mobile-toggle {
        display: flex;
    }

    /* Filter bar: scrollable */
    .pilbe-search__filter-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pilbe-search__filter-bar::-webkit-scrollbar {
        display: none;
    }
}

/* Mobile: single column cards */
@media (max-width: 767px) {
    .pilbe-search__cards-panel {
        padding: 16px 12px 80px; /* tighter horizontal margin to widen cards */
    }

    .pilbe-search__filter-bar {
        padding: 0 16px;
        height: 56px;
        gap: 8px;
    }

    :root {
        --pilbe-filter-h: 56px;
    }

    .pilbe-search__card-price {
        font-size: 18px;
    }

    .pilbe-search__card-body {
        padding: 14px;
    }

    .pilbe-search__card-features {
        gap: 10px;
    }
}

/* Small phones: even tighter horizontal padding */
@media (max-width: 480px) {
    .pilbe-search__cards-panel {
        padding: 16px 8px 80px;
    }
}

/* ==================================================================
   10. REDUCED MOTION
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
    .pilbe-search__card {
        transition: none;
    }

    .pilbe-search__card:hover {
        transform: none;
    }

    .pilbe-search__card:hover .pilbe-search__card-image img {
        transform: none;
    }

    .pilbe-price-pill:hover,
    .pilbe-price-pill.is-active {
        transform: translate(-50%, -100%);
    }

    .pilbe-search__skeleton-image,
    .pilbe-search__skeleton-line {
        animation: none;
        background: var(--pilbe-neutral-100);
    }

    .pilbe-gallery-prev,
    .pilbe-gallery-next {
        transition: none;
    }
}

/* ==================================================================
   11. NO RESULTS STATE  (Phase 5b)

   Branded SVG illustration + CTAs. SVG renders at ~96px — a deliberate
   deviation from §6.9's 48px illustration default, justified by §4.2's
   guidance that prominent empty states warrant larger visual weight.
   ================================================================== */

.pilbe-search__no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pilbe-search__no-results-icon {
    margin-bottom: 16px;
    line-height: 0; /* prevent extra inline-block spacing under the SVG */
}

.pilbe-search__no-results-icon svg {
    display: block;
    width: 96px;
    height: 96px;
}

/* Phase 5d — error-variant icon. Drops to 48px per design system §6.9
   (illustration default). The empty-state's 96px is the deliberate
   §4.2 deviation; error doesn't carry that prominence. */
.pilbe-search__no-results--error .pilbe-search__no-results-icon svg {
    width: 48px;
    height: 48px;
}

.pilbe-search__no-results h3 {
    font-size: 20px; /* skill §6.9 — empty-state heading */
    font-weight: 700;
    color: var(--pilbe-text-primary);
    margin: 0 0 8px;
}

.pilbe-search__no-results p {
    font-size: 14px;
    color: var(--pilbe-text-muted);
    margin: 0;
    max-width: 400px;
}

.pilbe-search__no-results-hint {
    margin-top: 12px !important;
    font-size: 13px !important;
    color: var(--pilbe-brand-700) !important;
    font-weight: 500;
}

.pilbe-search__no-results-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: var(--pilbe-space-6, 24px);
    flex-wrap: wrap;
    justify-content: center;
}

.pilbe-search__no-results-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 22px;
    border-radius: 8px;
    font-family: var(--pilbe-font);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 150ms var(--pilbe-ease-standard, ease),
                color 150ms var(--pilbe-ease-standard, ease),
                box-shadow 150ms var(--pilbe-ease-standard, ease),
                transform 150ms var(--pilbe-ease-standard, ease);
    cursor: pointer;
}

.pilbe-search__no-results-cta--primary {
    background: var(--pilbe-brand-500);
    color: #fff;
    box-shadow: var(--pilbe-shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
}

.pilbe-search__no-results-cta--primary:hover,
.pilbe-search__no-results-cta--primary:focus {
    background: var(--pilbe-brand-700);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--pilbe-shadow-md, 0 4px 12px rgba(0,0,0,0.08));
    text-decoration: none;
}

.pilbe-search__no-results-cta--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 173, 222, 0.24);
}

.pilbe-search__no-results-cta--secondary {
    background: transparent;
    color: var(--pilbe-text-muted);
    height: auto;
    padding: 0 4px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.pilbe-search__no-results-cta--secondary:hover,
.pilbe-search__no-results-cta--secondary:focus {
    color: var(--pilbe-brand-700);
    text-decoration: underline;
}


/* ==================================================================
   12. FILTER FORM � DELETED (rebuilt in �30)
   ================================================================== */


/* ─────────────────────────────────────────────────────────────
   13. Container escape — override Bootstrap's .container constraint
   so our 55/45 grid can go full-bleed. Only applies when our
   body class is present, so other Houzez pages are unaffected.
   ───────────────────────────────────────────────────────────── */
body.pilbe-modern-search .container,
body.pilbe-modern-search main .container,
body.pilbe-modern-search #wrapper .container,
body.pilbe-modern-search .site-content .container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.pilbe-modern-search .row,
body.pilbe-modern-search main .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.pilbe-modern-search #wrapper,
body.pilbe-modern-search .site-content,
body.pilbe-modern-search main {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ==================================================================
   14. MODERN CARD BODY — DELETED (rebuilt in §32, Phase 3)
   ================================================================== */

/* ==================================================================
   15. CARD IMAGE GALLERY — Carousel arrows, dots, counter
   ================================================================== */

.pilbe-card-gallery {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--pilbe-neutral-200);
}

.pilbe-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
    display: block;
}

.pilbe-search__card:hover .pilbe-gallery-img { transform: scale(1.04); }

/* Navigation Arrows */
.pilbe-gallery-prev,
.pilbe-gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--pilbe-neutral-900);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.15s ease, background 0.15s ease;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    line-height: 1;
    padding: 0;
}

.pilbe-gallery-prev { left: 8px; }
.pilbe-gallery-next { right: 8px; }

.pilbe-card-gallery:hover .pilbe-gallery-prev,
.pilbe-card-gallery:hover .pilbe-gallery-next {
    opacity: 1;
}

.pilbe-gallery-prev:hover,
.pilbe-gallery-next:hover {
    background: var(--pilbe-bg-surface);
    transform: translateY(-50%) scale(1.1);
}

/* Always show arrows on mobile */
@media (max-width: 767px) {
    .pilbe-gallery-prev,
    .pilbe-gallery-next {
        opacity: 0.85;
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}

/* Dot indicators */
.pilbe-gallery-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    align-items: center;
    z-index: 5;
}

.pilbe-gallery-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
}

.pilbe-gallery-dots span.active {
    background: var(--pilbe-bg-surface);
    width: 8px;
    height: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.pilbe-gallery-dots-more {
    width: auto !important;
    height: auto !important;
    background: none !important;
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    font-weight: 700;
}

/* Image counter */
.pilbe-gallery-counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--pilbe-text-inverse);
    font-size: 11px;
    font-weight: 600;
    z-index: 5;
    /* backdrop-filter removed — was shifting badge colours over satellite imagery */
}

/* §§ 16–17 retired in 6i — iframe-based inline detail panel removed.
   Map-panel layout is handled by the desktop §32 / mobile §9 blocks. */


/* ==================================================================
   21. ENHANCED MAP UI — Glassmorphism Toolbar
   ================================================================== */

.pilbe-map-toolbar {
    position: absolute;
    bottom: 24px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.pilbe-map-toolbar-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--pilbe-neutral-600);
    position: relative;
    padding: 0;
}

.pilbe-map-toolbar-btn:hover {
    background: rgba(108, 43, 217, 0.08);
    color: var(--pilbe-brand-500);
    transform: scale(1.05);
}

.pilbe-map-toolbar-btn:active {
    transform: scale(0.95);
}

.pilbe-map-toolbar-btn.is-active {
    color: var(--pilbe-brand-500);
    background: rgba(108, 43, 217, 0.1);
}

.pilbe-map-toolbar-btn.is-loading {
    animation: pilbeSpinPulse 1s ease infinite;
}

@keyframes pilbeSpinPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Toolbar tooltips */
.pilbe-map-toolbar-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--pilbe-neutral-800);
    color: var(--pilbe-text-inverse);
    font-size: 11px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    font-family: var(--pilbe-font, 'Lato', sans-serif);
}

.pilbe-map-toolbar-btn:hover[data-tooltip]::after {
    opacity: 1;
}

.pilbe-map-toolbar-divider {
    width: 24px;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 4px auto;
}

/* ==================================================================
   22. ENHANCED MAP UI — Map Type Switcher
   ================================================================== */

.pilbe-map-type-switcher {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    display: flex;
    gap: 2px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.pilbe-map-type-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: none;
    border-radius: 9px;
    background: transparent;
    font-family: var(--pilbe-font, 'Lato', sans-serif);
    font-size: 12px;
    font-weight: 600;
    color: var(--pilbe-neutral-500);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.pilbe-map-type-btn:hover {
    color: var(--pilbe-neutral-700);
    background: rgba(0, 0, 0, 0.04);
}

.pilbe-map-type-btn.is-active {
    background: var(--pilbe-brand-500);
    color: var(--pilbe-text-inverse);
    box-shadow: 0 2px 8px rgba(108, 43, 217, 0.3);
}

.pilbe-map-type-btn.is-active:hover {
    background: var(--pilbe-brand-600);
    color: var(--pilbe-text-inverse);
}

.pilbe-map-type-btn svg {
    flex-shrink: 0;
}

/* ==================================================================
   23. ENHANCED MAP UI — Property Count Badge
   ================================================================== */

.pilbe-map-count-badge {
    position: absolute;
    top: 72px;
    left: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-family: var(--pilbe-font, 'Lato', sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--pilbe-neutral-600);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pilbe-map-count-badge.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pilbe-map-count-badge svg {
    color: var(--pilbe-brand-500);
    flex-shrink: 0;
}

.pilbe-map-count-badge strong {
    font-weight: 800;
    color: var(--pilbe-neutral-800);
    font-variant-numeric: tabular-nums;
}

/* ==================================================================
   24. ENHANCED MAP UI — Search This Area Button
   ================================================================== */

.pilbe-search-area-btn {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: none;
    border-radius: 50px;
    background: var(--pilbe-gradient);
    color: var(--pilbe-text-inverse);
    font-family: var(--pilbe-font, 'Lato', sans-serif);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(93, 64, 221, 0.35), 0 2px 8px rgba(63, 101, 243, 0.2);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.pilbe-search-area-btn.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    animation: pilbeSearchPulse 2s ease 1s 1;
}

.pilbe-search-area-btn:hover {
    transform: translateX(-50%) translateY(-2px) scale(1.03);
    background: var(--pilbe-gradient-hover);
    box-shadow: 0 10px 30px rgba(93, 64, 221, 0.45), 0 3px 12px rgba(63, 101, 243, 0.25);
}

.pilbe-search-area-btn:active {
    transform: translateX(-50%) translateY(0) scale(0.97);
}

@keyframes pilbeSearchPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(108, 43, 217, 0.35), 0 2px 8px rgba(0, 0, 0, 0.1); }
    50% { box-shadow: 0 4px 28px rgba(108, 43, 217, 0.55), 0 2px 12px rgba(0, 0, 0, 0.15), 0 0 0 6px rgba(108, 43, 217, 0.1); }
}

/* ==================================================================
   25. ENHANCED MAP UI — Rich Info Window
   ================================================================== */

.pilbe-rich-info {
    position: absolute;
    transform: translate(-50%, -100%);
    z-index: 20;
    pointer-events: auto;
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.15));
    opacity: 0;
    transition: opacity 0.25s ease;
    margin-top: -12px;
}

.pilbe-rich-info.is-open {
    opacity: 1;
}

.pilbe-rich-info-card {
    width: 300px;
    background: var(--pilbe-bg-surface);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Close button */
.pilbe-rich-info-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    /* backdrop-filter removed — was shifting badge colours over satellite imagery */
    border: none;
    color: var(--pilbe-text-inverse);
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 2;
    padding: 0;
}

.pilbe-rich-info-close:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

/* Image */
.pilbe-rich-info-img {
    position: relative;
    width: 100%;
    height: 170px;
    overflow: hidden;
    background: var(--pilbe-neutral-200);
}

.pilbe-rich-info-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Hover-scale only applies to the single-image popover. Carousel slides
   stay static so swipe/scroll-snap reads correctly without movement. */
.pilbe-rich-info-card:hover .pilbe-rich-info-img:not(.pilbe-rich-info-img--carousel) img {
    transform: scale(1.04);
}

/* Phase 7c2 Gap 1: vanilla scroll-snap carousel. The track holds N
   100%-wide slides; CSS scroll-snap-stop:always locks each as a snap
   point. JS only drives prev/next/dot interactions and active-dot
   state; touch swipe + native scrollbar fall through to the browser. */
.pilbe-rich-info-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pilbe-rich-info-track::-webkit-scrollbar {
    display: none;
}

.pilbe-rich-info-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.pilbe-rich-info-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pilbe-rich-info-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--pilbe-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: background 0.15s ease, transform 0.15s ease;
    z-index: 2;
    padding: 0;
    opacity: 0;
}

.pilbe-rich-info-img--carousel:hover .pilbe-rich-info-nav,
.pilbe-rich-info-nav:focus-visible {
    opacity: 1;
}

.pilbe-rich-info-nav:hover {
    background: var(--pilbe-bg-surface);
    transform: translateY(-50%) scale(1.05);
}

.pilbe-rich-info-nav--prev { left: 8px; }
.pilbe-rich-info-nav--next { right: 8px; }

.pilbe-rich-info-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 2;
    padding: 4px 8px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.32);
}

.pilbe-rich-info-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.55);
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.pilbe-rich-info-dot.is-active {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.3);
}

.pilbe-rich-info-status {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 3px 10px;
    border-radius: 6px;
    background: var(--pilbe-brand-500);
    color: var(--pilbe-text-inverse);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Body */
.pilbe-rich-info-body {
    padding: 14px 16px 16px;
}

.pilbe-rich-info-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--pilbe-neutral-800);
    margin-bottom: 4px;
    line-height: 1.2;
}

.pilbe-rich-info-title {
    margin-bottom: 6px;
}

.pilbe-rich-info-title a {
    font-size: 13px;
    font-weight: 600;
    color: var(--pilbe-neutral-700);
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pilbe-rich-info-title a:hover {
    color: var(--pilbe-brand-500);
}

.pilbe-rich-info-address {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--pilbe-neutral-500);
    margin-bottom: 10px;
    line-height: 1.3;
    /* Truncation happens on the inner .pilbe-rich-info-address-text span
       (Phase 7c2 followup: the legacy .info-window-address-info wrapper
       has been stripped at popover render time). min-width: 0 here lets
       that span shrink past its intrinsic width so ellipsis kicks in. */
    min-width: 0;
}

.pilbe-rich-info-address svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.pilbe-rich-info-address .houzez-icon {
    flex-shrink: 0;
    opacity: 0.6;
    font-size: 12px;
    margin-right: 2px;
}

/* Phase 7c2 followup: address text gets its own flex item so the row
   truncates with ellipsis instead of overflowing the popover width. */
.pilbe-rich-info-address-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pilbe-rich-info-specs {
    font-size: 12px;
    color: var(--pilbe-neutral-500);
    margin-bottom: 12px;
    line-height: 1.4;
}

/* CTA button */
.pilbe-rich-info-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 16px;
    border-radius: 10px;
    background: var(--pilbe-brand-500);
    color: var(--pilbe-text-inverse);
    font-family: var(--pilbe-font, 'Lato', sans-serif);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center;
}

.pilbe-rich-info-cta:hover {
    background: var(--pilbe-brand-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 43, 217, 0.3);
    color: var(--pilbe-text-inverse);
    text-decoration: none;
}

/* Pointer arrow — attached to the OUTER wrapper (not the card) because
   .pilbe-rich-info-card has overflow:hidden which would clip a ::after.
   The parent .pilbe-rich-info has filter:drop-shadow, so the tail
   inherits the popover's shadow for free.

   Phase 7c2 Gap 4: when the popover is clamped to the map-panel edge at
   narrow viewports, the JS sets --pilbe-rich-info-arrow-x to the inverse
   of the clamp shift. The tail follows that offset so it keeps pointing
   at the marker even when the body has been pushed inward. */
.pilbe-rich-info::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: calc(50% + var(--pilbe-rich-info-arrow-x, 0px));
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 8px solid var(--pilbe-bg-surface);
}

/* Flip-below modifier (Polish R1-D): when there isn't enough room above
   the marker, the JS swaps to translate(-50%, 0) and applies this class.
   Tail flips to the top edge and points up. */
.pilbe-rich-info.is-flip-below {
    transform: translate(-50%, 0);
    margin-top: 12px;
}
.pilbe-rich-info.is-flip-below::after {
    bottom: auto;
    top: -8px;
    left: calc(50% + var(--pilbe-rich-info-arrow-x, 0px));
    border-top: none;
    border-bottom: 8px solid var(--pilbe-bg-surface);
}

/* ==================================================================
   26. ENHANCED MAP UI — Geolocation Marker
   ================================================================== */

.pilbe-geo-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
}

.pilbe-geo-marker-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3B82F6 /* geo-marker-blue: functional, not brand */;
    border: 3px solid var(--pilbe-bg-surface);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
    position: relative;
    z-index: 2;
}

.pilbe-geo-marker-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.2);
    z-index: 1;
    animation: pilbeGeoPulse 2s ease-out infinite;
}

@keyframes pilbeGeoPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

/* ==================================================================
   27. ENHANCED MAP UI — Fullscreen Mode
   ================================================================== */

.pilbe-search__map-panel.is-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    border-radius: 0;
}

.pilbe-search__map-panel.is-fullscreen .pilbe-search__map-container {
    border-radius: 0;
}

/* ==================================================================
   28. ENHANCED MAP UI — Responsive Adjustments
   ================================================================== */

@media (max-width: 1199px) {
    .pilbe-map-type-switcher {
        top: 12px;
        right: 12px;
    }

    .pilbe-map-type-btn {
        padding: 6px 10px;
        font-size: 11px;
    }

    /* Hide text labels on mobile, keep icons */
    .pilbe-map-type-btn span {
        display: none;
    }

    .pilbe-map-count-badge {
        top: 64px;
        left: 12px;
        padding: 6px 12px;
        font-size: 12px;
    }

    .pilbe-map-toolbar {
        bottom: 16px;
        right: 12px;
    }

    .pilbe-map-toolbar-btn {
        width: 36px;
        height: 36px;
    }

    .pilbe-map-toolbar-btn[data-tooltip]::after {
        display: none;
    }

    .pilbe-search-area-btn {
        top: 50px;
        padding: 8px 18px;
        font-size: 12px;
    }

    .pilbe-rich-info-card {
        width: 260px;
    }

    .pilbe-rich-info-img {
        height: 140px;
    }
}

@media (max-width: 767px) {
    .pilbe-map-type-switcher {
        top: 10px;
        right: 10px;
        padding: 3px;
        border-radius: 10px;
    }

    .pilbe-map-count-badge {
        top: 58px;
        left: 10px;
        padding: 5px 10px;
        font-size: 11px;
        border-radius: 10px;
    }

    .pilbe-rich-info-card {
        width: 240px;
    }

    .pilbe-rich-info-img {
        height: 120px;
    }

    .pilbe-rich-info-body {
        padding: 10px 12px 14px;
    }
}

/* ==================================================================
   29. ENHANCED MAP UI — Reduced Motion
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
    .pilbe-price-pill.pilbe-pill-enter {
        animation: none;
    }

    .pilbe-geo-marker-pulse {
        animation: none;
    }

    .pilbe-search-area-btn.is-visible {
        animation: none;
    }

    .pilbe-rich-info {
        transition: none;
    }

    .pilbe-map-toolbar-btn {
        transition: none;
    }

    .pilbe-map-type-btn {
        transition: none;
    }
}

/* ==================================================================
   30. FILTER BAR REBUILD (Phase 2) - pilbe-consumer-ui-SKILL 3.8
   ================================================================== */

/* -- ROW 1: Primary bar (sticky, 56px) -- */
.pilbe-search__row1 {
    display: flex;
    align-items: center;
    gap: var(--pilbe-space-4);
    height: 56px;
    padding: 0 var(--pilbe-space-5);
    background: var(--pilbe-bg-surface);
    border-bottom: 1px solid var(--pilbe-border-default);
    position: sticky;
    top: 0;
    z-index: 50;
    flex-shrink: 0;
}

.pilbe-search__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.pilbe-search__logo img {
    height: 40px;
    width: 40px;
    border-radius: var(--pilbe-radius-sm);
}

/* Transaction type dropdown */
.pilbe-search__txn-dropdown { position: relative; flex-shrink: 0; }
.pilbe-search__txn-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--pilbe-space-2);
    height: 40px;
    padding: 0 var(--pilbe-space-4);
    border: 1px solid var(--pilbe-border-default);
    border-radius: var(--pilbe-radius-md);
    background: var(--pilbe-bg-surface);
    box-shadow: var(--pilbe-shadow-xs);
    font-family: var(--pilbe-font);
    font-size: var(--pilbe-text-sm);
    font-weight: 700;
    color: var(--pilbe-text-primary);
    cursor: pointer;
    transition: border-color var(--pilbe-duration-fast) var(--pilbe-ease-standard),
                box-shadow var(--pilbe-duration-fast) var(--pilbe-ease-standard);
}
.pilbe-search__txn-btn:hover {
    border-color: var(--pilbe-border-strong);
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.08);
}
.pilbe-search__txn-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Dropdown menus (shared) */
.pilbe-search__txn-menu,
.pilbe-search__radius-menu,
.pilbe-search__sort-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 160px;
    background: var(--pilbe-bg-surface);
    border: 1px solid var(--pilbe-border-default);
    border-radius: var(--pilbe-radius-md);
    box-shadow: var(--pilbe-shadow-lg);
    list-style: none;
    margin: 0;
    padding: var(--pilbe-space-1) 0;
    z-index: var(--pilbe-z-dropdown);
}
.pilbe-search__txn-menu[hidden],
.pilbe-search__radius-menu[hidden],
.pilbe-search__sort-menu[hidden] { display: none; }

.pilbe-search__txn-menu li,
.pilbe-search__radius-menu li,
.pilbe-search__sort-menu li {
    padding: var(--pilbe-space-2) var(--pilbe-space-4);
    font-size: var(--pilbe-text-sm);
    color: var(--pilbe-text-primary);
    cursor: pointer;
    transition: background var(--pilbe-duration-fast) var(--pilbe-ease-standard);
}
.pilbe-search__txn-menu li:hover,
.pilbe-search__radius-menu li:hover,
.pilbe-search__sort-menu li:hover {
    background: var(--pilbe-bg-page);
}
.pilbe-search__txn-menu li[aria-selected="true"],
.pilbe-search__radius-menu li[aria-selected="true"],
.pilbe-search__sort-menu li[aria-selected="true"] {
    color: var(--pilbe-brand-500);
    font-weight: 700;
}

/* Search input (pill-shaped) */
.pilbe-search__input-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
}
.pilbe-search__input-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--pilbe-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 120ms ease, background-color 120ms ease;
}
.pilbe-search__input-icon:hover {
    color: var(--pilbe-text-primary);
    background: var(--pilbe-bg-subtle);
}
.pilbe-search__input-icon svg {
    pointer-events: none; /* clicks land on the button, not the SVG */
}
.pilbe-search__input {
    width: 100%;
    height: 44px;
    padding: 0 var(--pilbe-space-4) 0 var(--pilbe-space-10);
    border: 1px solid var(--pilbe-border-default);
    border-radius: var(--pilbe-radius-pill);
    background: var(--pilbe-bg-page);
    font-family: var(--pilbe-font);
    font-size: var(--pilbe-text-sm);
    color: var(--pilbe-text-primary);
    outline: none;
    transition: border-color var(--pilbe-duration-fast) var(--pilbe-ease-standard),
                box-shadow var(--pilbe-duration-fast) var(--pilbe-ease-standard);
}
.pilbe-search__input:focus {
    border-color: var(--pilbe-brand-500);
    background: var(--pilbe-bg-surface);
    box-shadow: 0 0 0 3px rgba(37, 173, 222, 0.24);
}
.pilbe-search__input::placeholder { color: var(--pilbe-text-muted); }

/* Radius dropdown */
.pilbe-search__radius-dropdown { position: relative; flex-shrink: 0; }
.pilbe-search__radius-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--pilbe-space-2);
    height: 40px;
    padding: 0 var(--pilbe-space-4);
    border: 1px solid var(--pilbe-border-default);
    border-radius: var(--pilbe-radius-md);
    background: var(--pilbe-bg-surface);
    box-shadow: var(--pilbe-shadow-xs);
    font-family: var(--pilbe-font);
    font-size: var(--pilbe-text-sm);
    font-weight: 700;
    color: var(--pilbe-text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--pilbe-duration-fast) var(--pilbe-ease-standard),
                box-shadow var(--pilbe-duration-fast) var(--pilbe-ease-standard);
}
.pilbe-search__radius-btn:hover {
    border-color: var(--pilbe-border-strong);
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.08);
}
.pilbe-search__radius-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* View toggle (segmented pill) */
.pilbe-search__view-toggle {
    display: flex;
    height: 40px;
    border: 1px solid var(--pilbe-border-default);
    border-radius: var(--pilbe-radius-md);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: var(--pilbe-shadow-xs);
}
.pilbe-search__view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    border: none;
    background: var(--pilbe-bg-surface);
    color: var(--pilbe-text-secondary);
    cursor: pointer;
    transition: background var(--pilbe-duration-fast) var(--pilbe-ease-standard),
                color var(--pilbe-duration-fast) var(--pilbe-ease-standard);
}
.pilbe-search__view-btn:hover { background: var(--pilbe-bg-page); color: var(--pilbe-text-primary); }
.pilbe-search__view-btn.is-active {
    background: var(--pilbe-brand-500);
    color: var(--pilbe-text-inverse);
}
.pilbe-search__view-btn svg { width: 18px; height: 18px; }

/* Saved link */
.pilbe-search__saved-link {
    display: inline-flex;
    align-items: center;
    gap: var(--pilbe-space-2);
    height: 40px;
    padding: 0 var(--pilbe-space-3);
    color: var(--pilbe-text-secondary);
    font-size: var(--pilbe-text-sm);
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
    transition: color var(--pilbe-duration-fast) var(--pilbe-ease-standard);
}
.pilbe-search__saved-link:hover { color: var(--pilbe-brand-500); }
.pilbe-search__saved-link svg { width: 18px; height: 18px; flex-shrink: 0; }

/* -- ROW 2: Secondary bar -- */
.pilbe-search__row2 {
    display: flex;
    align-items: center;
    gap: var(--pilbe-space-4);
    height: 48px;
    padding: 0 var(--pilbe-space-5);
    background: var(--pilbe-bg-subtle);
    border-bottom: 1px solid var(--pilbe-border-default);
    flex-shrink: 0;
}
.pilbe-search__row2-spacer { flex: 1; }

.pilbe-search__filters-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--pilbe-space-2);
    height: 36px;
    padding: 0 var(--pilbe-space-4);
    border: 1px solid var(--pilbe-border-default);
    border-radius: var(--pilbe-radius-md);
    background: var(--pilbe-bg-surface);
    box-shadow: var(--pilbe-shadow-xs);
    font-family: var(--pilbe-font);
    font-size: var(--pilbe-text-sm);
    font-weight: 700;
    color: var(--pilbe-text-primary);
    cursor: pointer;
    transition: border-color var(--pilbe-duration-fast) var(--pilbe-ease-standard),
                box-shadow var(--pilbe-duration-fast) var(--pilbe-ease-standard);
}
.pilbe-search__filters-btn:hover {
    border-color: var(--pilbe-border-strong);
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.08);
}
.pilbe-search__filters-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.pilbe-search__saved-homes {
    display: inline-flex;
    align-items: center;
    gap: var(--pilbe-space-2);
    color: var(--pilbe-text-secondary);
    font-size: var(--pilbe-text-sm);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--pilbe-duration-fast) var(--pilbe-ease-standard);
}
.pilbe-search__saved-homes:hover { color: var(--pilbe-brand-500); }
.pilbe-search__saved-homes svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Save search button (Phase 7c1) — link styling matching Saved Homes
   sibling. Disabled state dims, swaps cursor, and exposes a delayed
   tooltip via data-tooltip; aria-disabled drives keyboard semantics
   instead of `disabled` so the click handler can still intercept and
   short-circuit (mirroring how aria-disabled works for non-form
   buttons in WAI-ARIA APG). */
.pilbe-search__save-search-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--pilbe-space-2);
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pilbe-text-secondary);
    font-family: var(--pilbe-font);
    font-size: var(--pilbe-text-sm);
    font-weight: 700;
    cursor: pointer;
    position: relative;
    transition: color var(--pilbe-duration-fast) var(--pilbe-ease-standard);
}
.pilbe-search__save-search-btn:hover { color: var(--pilbe-brand-500); }
.pilbe-search__save-search-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.pilbe-search__save-search-btn.is-disabled,
.pilbe-search__save-search-btn[aria-disabled="true"] {
    color: var(--pilbe-text-muted, #98A2B3);
    cursor: not-allowed;
}
.pilbe-search__save-search-btn.is-disabled:hover,
.pilbe-search__save-search-btn[aria-disabled="true"]:hover {
    color: var(--pilbe-text-muted, #98A2B3);
}
/* Tooltip — only when disabled (set filters to save) */
.pilbe-search__save-search-btn[aria-disabled="true"]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1A1D26;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--pilbe-duration-fast) var(--pilbe-ease-standard) 200ms;
    z-index: 50;
}
.pilbe-search__save-search-btn[aria-disabled="true"]:hover::after,
.pilbe-search__save-search-btn[aria-disabled="true"]:focus-visible::after {
    opacity: 1;
}

.pilbe-search__results-count {
    font-size: var(--pilbe-text-base);
    color: var(--pilbe-text-secondary);
    font-weight: 500;
}
.pilbe-search__results-count strong {
    color: var(--pilbe-text-primary);
    font-weight: 700;
    font-size: var(--pilbe-text-base);
}

.pilbe-search__sort-prefix {
    color: var(--pilbe-text-secondary);
    font-weight: 500;
    margin-right: 2px;
}

/* Filters-button count badge (Phase 7b1) */
.pilbe-search__filters-btn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pilbe-brand-500);
    font-weight: 700;
    font-size: var(--pilbe-text-sm);
    margin-left: 2px;
}
.pilbe-search__filters-btn-badge[hidden] { display: none; }

/* Active filter chips row (Phase 7b1)
   Sits between row2 and the cards/map content; renders as a flex-wrap
   row of pill-shaped buttons each ending in an X. Hidden when no
   filters are active so the layout collapses with no visual seam. */
.pilbe-search__active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pilbe-space-2);
    padding: var(--pilbe-space-3) var(--pilbe-space-5);
    background: var(--pilbe-bg-surface);
    border-bottom: 1px solid var(--pilbe-border-default);
    flex-shrink: 0;
}
.pilbe-search__active-filters[hidden] { display: none; }

.pilbe-search__active-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--pilbe-border-default);
    border-radius: 999px;
    background: var(--pilbe-bg-subtle);
    color: var(--pilbe-text-primary);
    font-family: var(--pilbe-font);
    font-size: var(--pilbe-text-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--pilbe-duration-fast) var(--pilbe-ease-standard),
                background var(--pilbe-duration-fast) var(--pilbe-ease-standard),
                color var(--pilbe-duration-fast) var(--pilbe-ease-standard);
}
.pilbe-search__active-filter:hover {
    border-color: var(--pilbe-brand-500);
    color: var(--pilbe-brand-500);
    background: var(--pilbe-bg-surface);
}
.pilbe-search__active-filter:focus-visible {
    outline: 2px solid var(--pilbe-brand-500);
    outline-offset: 2px;
}
.pilbe-search__active-filter-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(16, 24, 40, 0.06);
    color: var(--pilbe-text-secondary);
    flex-shrink: 0;
    transition: background var(--pilbe-duration-fast) var(--pilbe-ease-standard),
                color var(--pilbe-duration-fast) var(--pilbe-ease-standard);
}
.pilbe-search__active-filter:hover .pilbe-search__active-filter-x {
    background: rgba(64, 100, 242, 0.12);
    color: var(--pilbe-brand-500);
}

.pilbe-search__active-filters-clear {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border: none;
    background: transparent;
    color: var(--pilbe-text-secondary);
    font-family: var(--pilbe-font);
    font-size: var(--pilbe-text-sm);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color var(--pilbe-duration-fast) var(--pilbe-ease-standard);
}
.pilbe-search__active-filters-clear:hover {
    color: var(--pilbe-brand-500);
}
.pilbe-search__active-filters-clear:focus-visible {
    outline: 2px solid var(--pilbe-brand-500);
    outline-offset: 2px;
    border-radius: var(--pilbe-radius-sm);
}

@media (max-width: 767px) {
    .pilbe-search__active-filters {
        padding: var(--pilbe-space-2) var(--pilbe-space-3);
        gap: 6px;
    }
}

/* Sort dropdown */
.pilbe-search__sort-dropdown { position: relative; flex-shrink: 0; }
.pilbe-search__sort-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--pilbe-space-2);
    height: 36px;
    padding: 0 var(--pilbe-space-3);
    border: none;
    background: transparent;
    font-family: var(--pilbe-font);
    font-size: var(--pilbe-text-sm);
    font-weight: 700;
    color: var(--pilbe-text-primary);
    cursor: pointer;
    transition: color var(--pilbe-duration-fast) var(--pilbe-ease-standard);
}
.pilbe-search__sort-btn:hover { color: var(--pilbe-brand-500); }
.pilbe-search__sort-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* -- Mobile responsive polish for Rows 1 & 2 -- */
@media (max-width: 767px) {
    .pilbe-search__row1 {
        gap: var(--pilbe-space-2);
        padding: 0 var(--pilbe-space-3);
    }
    .pilbe-search__radius-dropdown,
    .pilbe-search__view-toggle {
        display: none;
    }
    .pilbe-search__saved-link span {
        display: none;
    }
    .pilbe-search__saved-link {
        width: 40px;
        padding: 0;
        justify-content: center;
    }

    .pilbe-search__row2 {
        gap: var(--pilbe-space-3);
        padding: 0 var(--pilbe-space-3);
    }
    .pilbe-search__saved-homes,
    .pilbe-search__results-count {
        display: none;
    }
}

/* -- Mobile map-mode: full-bleed map, hide secondary chrome, single
      centred "Show list" pill replaces the dual toggle. Activated by
      body.pilbe-map-mode, toggled by pilbe-search-map.js bindMobileToggle. -- */
@media (max-width: 1199px) {
    body.pilbe-map-mode .pilbe-search__row2 {
        display: none;
    }

    body.pilbe-map-mode .pilbe-search__map-panel.is-visible {
        height: calc(100vh - 128px);
    }

    body.pilbe-map-mode .pilbe-search__quick-pills {
        top: 12px;
        left: 12px;
        right: 12px;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    body.pilbe-map-mode .pilbe-search__quick-pills::-webkit-scrollbar {
        display: none;
    }
    body.pilbe-map-mode .pilbe-search__pill {
        flex-shrink: 0;
    }

    body.pilbe-map-mode .pilbe-search__mobile-toggle {
        background: transparent;
        border-top: none;
        box-shadow: none;
        padding: 16px;
        justify-content: center;
        pointer-events: none;
    }
    body.pilbe-map-mode .pilbe-search__mobile-toggle-btn.is-active {
        display: none;
    }
    body.pilbe-map-mode .pilbe-search__mobile-toggle-btn:not(.is-active) {
        flex: 0 0 auto;
        min-width: 148px;
        padding: 0 28px;
        height: 48px;
        background: var(--pilbe-gradient);
        color: #fff;
        border: none;
        border-radius: 999px;
        font-weight: 700;
        box-shadow: 0 10px 28px rgba(93, 64, 221, 0.35),
                    0 2px 8px rgba(63, 101, 243, 0.18);
        pointer-events: auto;
        transition: transform 150ms var(--pilbe-ease-standard),
                    background 150ms var(--pilbe-ease-standard),
                    box-shadow 150ms var(--pilbe-ease-standard);
    }
    body.pilbe-map-mode .pilbe-search__mobile-toggle-btn:not(.is-active):hover {
        transform: translateY(-2px);
        background: var(--pilbe-gradient-hover);
        box-shadow: 0 14px 32px rgba(93, 64, 221, 0.45),
                    0 3px 12px rgba(63, 101, 243, 0.24);
    }

    /* Hide the count badge in map mode — it was clashing with the quick
       pills / search-area button and count is implicit from pin density */
    body.pilbe-map-mode .pilbe-map-count-badge {
        display: none;
    }

    /* Reposition Search this area below the pills so it doesn't overlap */
    body.pilbe-map-mode .pilbe-search-area-btn {
        top: 76px;
    }

    /* Hide map-type switcher on mobile — pills span the top row so the
       switcher would be covered anyway, and home.co.uk-style mobile
       doesn't offer a map-type toggle */
    .pilbe-map-type-switcher {
        display: none;
    }
}

/* -- Quick pills (floating above map) -- */
.pilbe-search__quick-pills {
    position: absolute;
    top: var(--pilbe-space-4);
    left: var(--pilbe-space-4);
    display: flex;
    gap: var(--pilbe-space-2);
    z-index: 10;
}
.pilbe-search__pill {
    display: flex;
    align-items: center;
    gap: var(--pilbe-space-1);
    padding: var(--pilbe-space-1) var(--pilbe-space-3);
    border: none;
    border-radius: var(--pilbe-radius-pill);
    background: var(--pilbe-bg-surface);
    box-shadow: var(--pilbe-shadow-md);
    font-family: var(--pilbe-font);
    font-size: var(--pilbe-text-xs);
    font-weight: 600;
    color: var(--pilbe-text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: box-shadow var(--pilbe-duration-fast) var(--pilbe-ease-standard);
}
.pilbe-search__pill:hover { box-shadow: var(--pilbe-shadow-lg); }
.pilbe-search__pill--icon {
    padding: var(--pilbe-space-1) var(--pilbe-space-2);
}

/* Hide Houzez theme search bar on modern search pages */
body.pilbe-modern-search .advanced-search,
body.pilbe-modern-search .advanced-search-nav,
body.pilbe-modern-search .desktop-search-nav,
body.pilbe-modern-search .houzez-search-form-js,
body.pilbe-modern-search .search-area-wrapper,
body.pilbe-modern-search .houzez-search-form-wrapper,
body.pilbe-modern-search .search-wrap,
body.pilbe-modern-search .advance-search-wrapper,
body.pilbe-modern-search .search-area,
body.pilbe-modern-search .header-search-wrap,
body.pilbe-modern-search .houzez-main-search,
body.pilbe-modern-search .search_area,
body.pilbe-modern-search .search-form-wrapper,
body.pilbe-modern-search .elementor-search-form {
    display: none !important;
}

/* Desktop 55/45 layout — scoped to ≥1200px so mobile overrides
   in the @media (max-width: 1199px) block above are not shadowed
   by source-order cascade. */
@media (min-width: 1200px) {
    .pilbe-search__wrapper {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 72px);
        width: 100%;
        overflow: hidden;
    }

    .pilbe-search__content {
        display: flex !important;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        width: 100%;
    }

    .pilbe-search__cards-panel {
        flex: 0 0 55% !important;
        width: 55% !important;
        max-width: 55% !important;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px 24px 40px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .pilbe-search__map-panel {
        flex: 0 0 45%;
        width: 45%;
        position: relative;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
}

/* ==================================================================
   31. FILTER DRAWER (Phase 2c) - pilbe-consumer-ui-SKILL 4.2
   ================================================================== */

/* Backdrop */
.pilbe-search__drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.24);
    z-index: 9998;
    opacity: 0;
    transition: opacity var(--pilbe-duration-base) var(--pilbe-ease-standard);
}
.pilbe-search__drawer-backdrop[hidden] { display: none; }
.pilbe-search__drawer-backdrop.is-visible { opacity: 1; }

/* Drawer panel */
.pilbe-search__drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 360px;
    max-width: 90vw;
    background: var(--pilbe-bg-surface);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 300ms var(--pilbe-ease-standard);
    box-shadow: var(--pilbe-shadow-xl);
}
.pilbe-search__drawer[hidden] { display: none; }
.pilbe-search__drawer.is-open {
    display: flex;
    transform: translateX(0);
}

/* Drawer header */
.pilbe-search__drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    border-bottom: 1px solid var(--pilbe-border-strong);
    flex-shrink: 0;
}
.pilbe-search__drawer-header h2 {
    font-family: var(--pilbe-font);
    font-size: 20px;
    font-weight: 700;
    color: var(--pilbe-text-primary);
    margin: 0;
}
.pilbe-search__drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--pilbe-text-muted);
    border-radius: 50%;
    cursor: pointer;
    transition: background 150ms var(--pilbe-ease-standard);
}
.pilbe-search__drawer-close:hover {
    background: var(--pilbe-neutral-100);
    color: var(--pilbe-text-primary);
}
.pilbe-search__drawer-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 173, 222, 0.24);
}

/* Drawer body (scrollable) */
.pilbe-search__drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 28px;
    max-height: calc(100vh - 88px);
    scrollbar-width: thin;
    scrollbar-color: var(--pilbe-neutral-300) transparent;
}
.pilbe-search__drawer-body::-webkit-scrollbar { width: 6px; }
.pilbe-search__drawer-body::-webkit-scrollbar-track { background: transparent; }
.pilbe-search__drawer-body::-webkit-scrollbar-thumb {
    background: var(--pilbe-neutral-300);
    border-radius: 4px;
}

/* ==================================================================
   31a. DRAWER INTERIOR CONTROLS (Phase 2c polish)
   Spec: pilbe-consumer-ui-SKILL §3.3, §3.4, §3.10, §4.2
   ================================================================== */

/* --- Section dividers (fieldsets) --- */
.pilbe-search__filter-section {
    border: none;
    border-bottom: 1.5px solid var(--pilbe-border-strong);
    padding: 32px 0;
    margin: 0;
}
.pilbe-search__filter-section:first-child { padding-top: 0; }
.pilbe-search__filter-section:last-child { border-bottom: none; }
.pilbe-search__filter-section legend {
    font-family: var(--pilbe-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--pilbe-text-primary);
    margin-bottom: 16px;
    padding: 0;
    float: none;
    width: 100%;
}

/* --- Chip rows (beds, baths, tenure, added to site) --- */
.pilbe-search__chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pilbe-search__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--pilbe-border-default);
    border-radius: 999px;
    background: #fff;
    font-family: var(--pilbe-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--pilbe-text-primary);
    cursor: pointer;
    transition: all 150ms var(--pilbe-ease-standard);
    user-select: none;
}
.pilbe-search__chip:hover {
    border-color: var(--pilbe-brand-500);
    background: var(--pilbe-brand-50);
    color: var(--pilbe-brand-700);
}
.pilbe-search__chip.is-active {
    background: var(--pilbe-brand-500);
    border-color: var(--pilbe-brand-500);
    color: #fff;
    box-shadow: 0 0 0 2px var(--pilbe-brand-200);
}
.pilbe-search__chip.is-active:hover {
    background: var(--pilbe-brand-600);
    border-color: var(--pilbe-brand-600);
    color: #fff;
}
.pilbe-search__chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 173, 222, 0.24);
}

/* --- Checkbox grid (property type, style, features) --- */
.pilbe-search__checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}
.pilbe-search__checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 8px;
    margin: 0 -8px;
    border-radius: 6px;
    font-family: var(--pilbe-font);
    font-size: 14px;
    font-weight: 400;
    color: var(--pilbe-text-primary);
    cursor: pointer;
    transition: background 150ms var(--pilbe-ease-standard);
}
.pilbe-search__checkbox:hover {
    background: var(--pilbe-neutral-50);
}
.pilbe-search__checkbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
    border: 1px solid var(--pilbe-border-strong);
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    flex-shrink: 0;
    background: #fff;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 150ms var(--pilbe-ease-standard);
}
.pilbe-search__checkbox input[type="checkbox"]:checked {
    background-color: var(--pilbe-brand-500);
    border-color: var(--pilbe-brand-500);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
    background-size: 14px;
    box-shadow: 0 0 0 2px rgba(37, 173, 222, 0.12);
}
.pilbe-search__checkbox input[type="checkbox"]:hover {
    border-color: var(--pilbe-brand-300);
}
.pilbe-search__checkbox input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 173, 222, 0.24);
}

/* --- Price inputs (with £ prefix, no native spinners, no labels) --- */
.pilbe-search__price-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pilbe-search__price-input-label {
    flex: 1 1 0;
    position: relative;
    display: block;
}
.pilbe-search__price-input-label::before {
    content: '£';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pilbe-text-secondary);
    font-family: var(--pilbe-font);
    font-size: 14px;
    font-weight: 400;
    pointer-events: none;
    z-index: 1;
}
.pilbe-search__price-input-label input[type="number"] {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 28px;
    border: 1px solid var(--pilbe-border-default);
    border-radius: 8px;
    font-family: var(--pilbe-font);
    font-size: 14px;
    color: var(--pilbe-text-primary);
    background: #fff;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
    transition: border-color 150ms var(--pilbe-ease-standard),
                box-shadow 150ms var(--pilbe-ease-standard);
}
.pilbe-search__price-input-label input[type="number"]::-webkit-inner-spin-button,
.pilbe-search__price-input-label input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pilbe-search__price-input-label input[type="number"]::placeholder {
    color: var(--pilbe-text-muted);
}
.pilbe-search__price-input-label input[type="number"]:focus {
    border-color: var(--pilbe-brand-500);
    box-shadow: 0 0 0 3px rgba(37, 173, 222, 0.24);
}

/* --- Toggle switch (virtual tour) --- */
.pilbe-search__toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-family: var(--pilbe-font);
    font-size: 14px;
    font-weight: 400;
    color: var(--pilbe-text-primary);
    user-select: none;
}
.pilbe-search__toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.pilbe-search__toggle-track {
    position: relative;
    width: 48px;
    height: 28px;
    background: var(--pilbe-neutral-300);
    border-radius: 999px;
    flex-shrink: 0;
    transition: background 200ms var(--pilbe-ease-standard);
}
.pilbe-search__toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    transition: transform 200ms var(--pilbe-ease-standard);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.pilbe-search__toggle input:checked + .pilbe-search__toggle-track {
    background: var(--pilbe-brand-500);
}
.pilbe-search__toggle input:checked + .pilbe-search__toggle-track::after {
    transform: translateX(20px);
}
.pilbe-search__toggle input:focus-visible + .pilbe-search__toggle-track {
    box-shadow: 0 0 0 3px rgba(37, 173, 222, 0.24);
}

/* --- Drawer footer --- */
.pilbe-search__drawer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    border-top: 1px solid var(--pilbe-border-strong);
    flex-shrink: 0;
    background: var(--pilbe-bg-surface);
}
.pilbe-search__drawer-reset {
    height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-family: var(--pilbe-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--pilbe-text-secondary);
    cursor: pointer;
    transition: background 150ms var(--pilbe-ease-standard),
                color 150ms var(--pilbe-ease-standard);
}
.pilbe-search__drawer-reset:hover {
    color: var(--pilbe-text-primary);
    background: var(--pilbe-bg-subtle);
}
.pilbe-search__drawer-reset:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 173, 222, 0.24);
    border-radius: 8px;
}
.pilbe-search__drawer-apply {
    height: 48px;
    padding: 0 28px;
    border: none;
    border-radius: 8px;
    background: var(--pilbe-gradient);
    font-family: var(--pilbe-font);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    box-shadow: var(--pilbe-shadow-sm);
    transition: background 150ms var(--pilbe-ease-standard),
                transform 150ms var(--pilbe-ease-standard),
                box-shadow 150ms var(--pilbe-ease-standard);
}
.pilbe-search__drawer-apply:hover {
    background: var(--pilbe-gradient-hover);
    transform: translateY(-1px);
    box-shadow: var(--pilbe-shadow-md);
}
.pilbe-search__drawer-apply:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 173, 222, 0.24);
}

/* Admin bar offset for drawer */
body.admin-bar .pilbe-search__drawer,
body.admin-bar .pilbe-search__drawer-backdrop {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar .pilbe-search__drawer,
    body.admin-bar .pilbe-search__drawer-backdrop {
        top: 46px;
    }
}

/* Ensure drawer backdrop covers full viewport above all content */
.pilbe-search__drawer-backdrop.is-visible { display: block !important; }
.pilbe-search__drawer.is-open { display: flex !important; }



/* ==================================================================
   Hide mobile-only app banner on search page (Elementor element 513e022b)
   Already has .elementor-hidden-desktop but we reinforce for safety.
   ================================================================== */
.pilbe-modern-search .elementor-element-513e022b {
    display: none !important;
}

/* ==================================================================
   32. PROPERTY CARDS (Phase 3) — pilbe-consumer-ui-SKILL §4.2
   Standard card anatomy. Featured card variant lives in Phase 3c.
   Badge logic rebuild lives in Phase 3d.
   ================================================================== */

/* Card grid — single source of truth. Owns all four breakpoints.
   Wrapper/panel responsive rules stay in §9. Detail-open state
   overrides in §17 keep working via higher specificity (0,2,0 > 0,1,0). */
.pilbe-search__card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 1399px) {
    .pilbe-search__card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .pilbe-search__card-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Card container */
.pilbe-search__card {
    background: var(--pilbe-bg-surface);
    border: 1px solid var(--pilbe-border-default);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--pilbe-shadow-sm);
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    display: flex;
    flex-direction: column;
    position: relative;
}
.pilbe-search__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--pilbe-shadow-lg);
}
.pilbe-search__card.is-highlighted {
    border-color: var(--pilbe-brand-500);
    box-shadow: 0 0 0 3px rgba(37, 173, 222, 0.45), var(--pilbe-shadow-lg);
    transform: translateY(-2px);
}

/* Content link wrapper (image gallery sits OUTSIDE this link so gallery
   arrows / dots / heart remain clickable without navigating). */
.pilbe-search__card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}
.pilbe-search__card-link:hover,
.pilbe-search__card-link:focus {
    color: inherit;
    text-decoration: none;
}

/* Heart favourite — top-left, 32px circle */
.pilbe-search__card-fav {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    border: 0;
    padding: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--pilbe-text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: transform 120ms ease, background-color 120ms ease, color 120ms ease;
    z-index: 3;
}
.pilbe-search__card-fav:hover {
    background: var(--pilbe-bg-surface);
    transform: scale(1.08);
    color: var(--pilbe-danger-500);
}
.pilbe-search__card-fav.is-active,
.pilbe-search__card-fav.is-saved {
    color: var(--pilbe-danger-500);
}
.pilbe-search__card-fav.is-active svg,
.pilbe-search__card-fav.is-saved svg {
    fill: var(--pilbe-danger-500);
}
/* Phase 6g — pending pulse during AJAX flight (200-400ms typical). */
.pilbe-search__card-fav.is-pending {
    opacity: 0.7;
    animation: pilbeFavPulse 800ms ease-in-out infinite;
}
@keyframes pilbeFavPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
    .pilbe-search__card-fav.is-pending { animation: none; }
}

/* Priority badge — top-right of image. One per card, set by
   pilbe_get_card_badge() in Agreed > Reduced > New priority order. */
.pilbe-search__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    z-index: 3;
}
.pilbe-search__badge--agreed  { background: var(--pilbe-neutral-100); color: var(--pilbe-neutral-700); }
.pilbe-search__badge--reduced { background: var(--pilbe-warning-50);  color: var(--pilbe-warning-700); }
.pilbe-search__badge--new     { background: var(--pilbe-success-50);  color: var(--pilbe-success-700); }

/* Agreed visual dampening — image fades back to colour on hover.
   Suppressed on the wide Featured Card variant: the Featured slot is the
   single hero of the page, dampening it would undermine the marketing
   value of paid placement. The Sold STC / Under Offer / Let Agreed
   priority badge top-right still renders on featured cards — text
   communicates state without the visual quiet-down. */
.pilbe-search__card--agreed:not(.pilbe-search__card--featured) .pilbe-card-gallery {
    opacity: 0.75;
    filter: grayscale(0.1);
    transition: opacity 200ms ease, filter 200ms ease;
}
.pilbe-search__card--agreed:not(.pilbe-search__card--featured):hover .pilbe-card-gallery {
    opacity: 1;
    filter: grayscale(0);
}

/* Property-type badge — bottom-left of image, glass effect */
.pilbe-search__card-type {
    position: absolute;
    bottom: 12px;
    left: 12px;
    height: 20px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--pilbe-text-inverse);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    z-index: 2;
}

/* Card body */
.pilbe-search__card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* Price row — price left, agent logo right */
.pilbe-search__card-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
}
.pilbe-search__card-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--pilbe-text-primary);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.pilbe-search__card-price .price-prefix {
    font-size: 13px;
    font-weight: 400;
    color: var(--pilbe-text-secondary);
    letter-spacing: 0;
    text-transform: none;
}
.pilbe-search__card-price .price-postfix {
    font-size: 13px;
    font-weight: 400;
    color: var(--pilbe-text-secondary);
    letter-spacing: 0;
}
.pilbe-search__card-price .item-price-text {
    font-size: 13px;
    font-weight: 400;
    color: var(--pilbe-text-secondary);
}

/* Agent logo on price row — 40×40 square */
.pilbe-search__card-agent-logo {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: contain;
    background: var(--pilbe-bg-surface);
    border: 1px solid var(--pilbe-border-default);
    flex-shrink: 0;
}

/* Address line — pin icon prefix */
.pilbe-search__card-address {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 400;
    color: var(--pilbe-text-secondary);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pilbe-search__card-address svg {
    color: var(--pilbe-text-muted);
    flex-shrink: 0;
}
.pilbe-search__card-address span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Specs row — bed / bath / sqft / year */
.pilbe-search__card-specs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 400;
    color: var(--pilbe-text-secondary);
}
.pilbe-search__card-specs li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.pilbe-search__card-specs svg {
    color: var(--pilbe-text-muted);
    flex-shrink: 0;
}

/* Description excerpt — 2-line clamp (optional, only when content exists) */
.pilbe-search__card-excerpt {
    font-size: 14px;
    font-weight: 400;
    color: var(--pilbe-text-secondary);
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer — "Listed X ago" with top divider */
.pilbe-search__card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--pilbe-text-muted);
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--pilbe-border-default);
}

/* Suppress parent-Houzez status/label ribbons that can leak through */
body.pilbe-modern-search .pilbe-search__card .property-label,
body.pilbe-modern-search .pilbe-search__card .property-status-badge,
body.pilbe-modern-search .pilbe-search__card .labels-wrap {
    display: none !important;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .pilbe-search__card { transition: none; }
    .pilbe-search__card:hover { transform: none; }
}

/* ─── Featured card variant (Phase 3c) ───────────────────────────────────
   Renders as the first item in results when a fave_featured listing
   exists. Spans full grid width, 60/40 image/content split on desktop
   and tablet, stacks on mobile. Skill §4.2. */
.pilbe-search__card--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 60% 40%;
    height: 340px;
}

/* Image side fills full card height instead of fixed aspect ratio */
.pilbe-search__card--featured .pilbe-card-gallery {
    aspect-ratio: auto;
    height: 100%;
    border-radius: 12px 0 0 12px;
}

/* Content side — wider padding for the bigger card */
.pilbe-search__card--featured .pilbe-search__card-link {
    padding: 24px;
    overflow: hidden;
}
.pilbe-search__card--featured .pilbe-search__card-body {
    padding: 0;
    height: 100%;
}

/* "★ Featured" badge — top-left of image, brand-500 (NOT gradient) */
.pilbe-search__featured-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--pilbe-brand-500);
    color: var(--pilbe-text-inverse);
    font-size: 12px;
    font-weight: 700;
    line-height: 28px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 4;
}
.pilbe-search__featured-badge svg {
    flex-shrink: 0;
}

/* Heart button shifted right on featured card so the ★ Featured badge
   doesn't sit underneath it (heart's default left:12px collides with
   the featured badge at the same coordinate). */
.pilbe-search__card--featured .pilbe-search__card-fav {
    left: auto;
    right: 12px;
}

/* 4-line description clamp on the featured card */
.pilbe-search__card--featured .pilbe-search__card-excerpt {
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

/* Tablet — keep 60/40 split but shorter height */
@media (max-width: 1199px) and (min-width: 768px) {
    .pilbe-search__card--featured {
        height: 280px;
    }
}

/* Mobile — stack image on top, content below */
@media (max-width: 767px) {
    .pilbe-search__card--featured {
        grid-template-columns: 1fr;
        height: auto;
    }
    .pilbe-search__card--featured .pilbe-card-gallery {
        aspect-ratio: 16 / 10;
        border-radius: 12px 12px 0 0;
        height: auto;
    }
}