/**
 * Filtered Properties V6 - COMPLETE CSS
 * Version: 6.8 - August 2026 (was 6.7)
 * Prefix: fpv6_ for FILTER UI; fhv5_ for OVERLAY CARD render (shared); fpv6-hcard for SPLIT CARD
 *
 * CHANGELOG v6.8 — FILTER MODAL (Figma Group 4292). Naka-DULO ang buong block para
 * panalo sa source order; walang binura sa mga lumang rule ng .fpv6-filters-panel —
 * naka-scope na lang sila sa `.fpv6-filter-dropdown` (filter_ui="panel").
 *
 * CHANGELOG v6.7 (additive only — wala tayong binawasan):
 * - BUGFIX: laging nakikita ang "No exact matches" kahit may resulta. Ang v6.5 rule
 *   ay may `display: flex !important` — at ang isang !important na declaration sa
 *   stylesheet ay MAS MALAKAS KAYSA SA INLINE STYLE. Kaya walang epekto ang
 *   `noRes.style.display = "none"` ng render(). Naka-state class na ngayon
 *   (`.fpv6-is-empty` sa section) imbes na inline style ang labanan.
 * - Kasamang inayos ang dalawa pang tahimik na bersyon ng parehong bug: ang
 *   `.fpv6-grid { display: grid !important }` at `.fpv6-pagination { display: flex
 *   !important }` ay kinakain din ang `style.display = "none"` ng render(), kaya
 *   lalabas pa rin ang pagination kahit zero ang resulta.
 *
 * CHANGELOG v6.6 (additive only — wala tayong binawasan):
 * - MOBILE / TIGHT LAYOUT (bagong Figma mobile frame). Buong block ay nasa DULO ng
 *   file para panalo sa source order at madaling basahin — walang binura sa mga
 *   lumang media query.
 *     row 1   [ search ................ ] [ filters icon ]
 *     row 2   [ All ][ Cupertino ][ Buena Park ] →  (swipe, walang arrows)
 *     tapos   MAP
 *     tapos   CARDS
 * - MAP SA TAAS kapag naka-stack ang layout (≤1100). Ang cards-side ang UNA sa DOM,
 *   kaya kapag naging column ang flex, nahuhulog ang mapa sa PINAKAILALIM — pagkatapos
 *   ng lahat ng 12 cards. Doon siya nagtatago. Inaayos ng `order` nang hindi ginagalaw
 *   ang DOM (mahalaga: ang desktop order ay cards-kaliwa/map-kanan, at iyon ang
 *   tamang reading order para sa SEO at screen readers).
 * - FILTERS = ICON LANG sa mobile; naka-hide ang salitang "Filters" (hindi binura).
 *
 * CHANGELOG v6.5 (additive only — wala tayong binawasan):
 * - EMPTY STATE = bagong Figma (Frame 91779): "No exact matches" 20/500 + subline
 *   16/400, gap 5px, LEFT-aligned sa itaas ng cards column (hindi na center).
 *   Ang lumang linya ay naka-hide lang (.fpv6-no-results-legacy), hindi binura.
 * - MODAL CITY PILL selected = #6A8375 + white, tugma na sa rail pills.
 *
 * CHANGELOG v6.4 (additive only — wala tayong binawasan):
 * - MAP POPUP = exact Figma Group 4250: 250x205, image 250x150 flush, body padding
 *   10px 15px, name 14/500, city 12/400 #666666, "from" 12/400, price 14/500.
 *   Square corners (walang radius sa Figma). Dati 300 wide na may 16/14px type.
 * - `.fpv6-popup-below` — binabaligtad ang popup papunta sa IBABA ng marker.
 *   Nagse-set si Leaflet ng INLINE na `bottom` sa `.leaflet-popup` mula sa
 *   `_updatePosition()`, kaya kailangan ng `bottom: auto !important` bago gumana
 *   ang `top`. Naka-hide din ang tip container.
 *
 * CHANGELOG v6.3 (additive only — wala tayong binawasan):
 * - CONTAINER FIX (ito ang tunay na dahilan ng lahat): max-width 1440 + padding 0 50px
 *   = 1340 na CONTENT, tugma sa Figma (cards sa left 50, map hanggang 1390). Dati
 *   max-width 1340 + padding 50 = 1240 lang ang content, kaya 550 lang ang mapa imbes
 *   na 650, at kulang ang espasyo ng filter bar kaya siya nag-o-overflow.
 * - ISANG LINE ANG FILTER BAR: flex-wrap nowrap + min-width 0 sa .fpv6-filter-left.
 *   Kung walang min-width:0, ang default na min-width:auto ng flex item ay pinipilit
 *   ang buong lapad ng pills — kaya hindi nagsi-scroll ang rail at lumalagpas sa page.
 * - CITY ARROW: Figma shadow 1px 3px 4px rgba(0,0,0,0.20) + bagong disabled state
 *   (dim, hindi clickable) para sa dulong-kanan.
 *
 * CHANGELOG v6.2 (additive only — wala tayong binawasan):
 * - FIGMA SIZING: cards side 660 | gap 30 | map 650x840. Card 660x200 (image 330 +
 *   content 330), body padding 10px 15px, inner width 300 (kaya 300px ang divider).
 * - TOKENS CORRECTED sa Figma dev-mode values: Light-Text #666666 (dati #928A80),
 *   --300 #E8E5DF ang lines/pills, --400 #CCC8C0 ang map marker outline.
 * - CITY PILLS: radius 8px, padding 8px 15px, outline 1px #E8E5DF; SELECTED =
 *   #6A8375 background + white text. Pareho ang Filters button.
 * - CITY RAIL: isang horizontal row (.fpv6-city-rail) + arrows (.fpv6-city-arrow),
 *   nakatago ang scrollbar, draggable (cursor grab/grabbing), touch = native scroll.
 *   Ang lumang wrapping .fpv6-city-pills (display:contents) ay NANDITO PA RIN —
 *   ginagamit kapag city_nav="viewall".
 *
 * CHANGELOG v6.1 (additive only — wala tayong binawasan):
 * - SPLIT CARD (bagong Figma): larawan sa kaliwa 320x192, puting content sa kanan 320x192.
 *   Isang card kada row. Naka-scope sa .fpv6-layout-split, kaya buo pa rin ang v6.0
 *   overlay card (card_layout="overlay" -> .fpv6-layout-overlay).
 * - SECTION EXPAND: .fpv6-main-layout.fpv6-map-expanded — naka-hide ang cards side,
 *   100% width ang mapa, nasa loob PA RIN ng section (hindi na 100vw/100vh fixed).
 *   Ang lumang viewport fullscreen (.fpv6-map-inner.fullscreen) ay NANDITO PA RIN.
 * - MAP GESTURE GUARD: .fpv6-map-hint + touch-action overrides.
 * - PROGRESSIVE IMAGE REVEAL: shimmer skeleton -> fade-in.
 * - POPUP CARD: bagong vertical mini-card (image sa taas, address + price sa ilalim).
 * - DESIGN TOKENS naka-CSS-variable na sa taas — isang lugar lang ang palitan kung
 *   iba pala ang exact Light-Text / line colors sa Figma.
 */

/* ============================================================
   v6.1: DESIGN TOKENS (palitan dito kung iba ang Figma values)
   ============================================================ */
.fpv6-section {
    --fpv6-dark: #2A2A2A;        /* Dark-Text */
    --fpv6-light: #666666;       /* Light-Text  (v6.2: Figma dev-mode value) */
    --fpv6-line: #E8E5DF;        /* --300 — card divider, pills, hairlines */
    --fpv6-line-strong: #CCC8C0; /* --400 — map marker outline, footer rules */
    --fpv6-line-soft: #E8E5DF;   /* alias, iniwan para sa v6.1 na rules */
    --fpv6-primary: #5A4F42;     /* Primary (pagination active, CTAs) */
    --fpv6-accent: #6A8375;      /* --100 — active city pill, city cluster */
    --fpv6-spec-sep: #D9D9D9;    /* spec row separators */
    --fpv6-card-w: 330px;        /* v6.2: image half = content half (Figma) */
    --fpv6-card-h: 200px;        /* v6.2: Figma card height */
}

@keyframes fpv6FadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fpv6Pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes fpv6SlideIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fpv6MapSpin { to { transform: rotate(360deg); } }
@keyframes fpv6CardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fpv6Shimmer { to { background-position: -200% 0; } }

section.fpv6-section {
    display: flex !important; flex-direction: column !important;
    width: 100% !important; max-width: 100% !important;
    margin: 0 !important; padding: 0 !important;
    background: #FFFFFF !important;
    font-family: 'Afacad Flux', 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    box-sizing: border-box !important;
}
section.fpv6-section *, section.fpv6-section *::before, section.fpv6-section *::after { box-sizing: border-box !important; }

/* ============================================================
   V6: FILTER BAR (Top — no header, locations on first line)
   ============================================================ */
.fpv6-filter-bar {
    max-width: 1440px !important; width: 100% !important; margin: 0 auto !important;
    padding: 30px 50px 20px 50px !important;
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    gap: 20px !important; flex-wrap: nowrap !important;
}
/* v6.3: min-width:0 ang susi. Default ng flex item ay min-width:auto, kaya hindi
   siya lumiliit sa ilalim ng content niya — 'yon ang dahilan kung bakit lumalagpas
   ang pills sa page at hindi nagsi-scroll ang rail. */
.fpv6-filter-left { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: nowrap !important; flex: 1 1 auto !important; min-width: 0 !important; }
.fpv6-filter-left > .fpv6-fw { flex: 0 0 auto !important; }

.fpv6-filters-btn {
    padding: 8px 15px !important; background: #FFF !important; border-radius: 8px !important;
    border: none !important; outline: 1px solid #E8E5DF !important; outline-offset: -1px !important;
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    cursor: pointer !important; font-size: 16px !important; font-family: 'Afacad Flux', sans-serif !important;
    color: #2A2A2A !important; white-space: nowrap !important; transition: all 0.2s !important;
    position: relative !important;
}
.fpv6-filters-btn:hover { background: #2A2A2A !important; color: #FFF !important; outline-color: #2A2A2A !important; }
.fpv6-filters-btn svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }
.fpv6-filters-count {
    position: absolute !important; top: -6px !important; right: -6px !important;
    min-width: 18px !important; height: 18px !important; padding: 0 4px !important;
    background: #2A2A2A !important; color: #FFF !important; border-radius: 50% !important;
    display: none; align-items: center !important; justify-content: center !important;
    font-size: 11px !important; font-family: 'Afacad Flux', sans-serif !important; font-weight: 600 !important;
    line-height: 1 !important; border: 2px solid #FFF !important; box-sizing: border-box !important;
}

.fpv6-filter-divider { width: 1px !important; height: 37px !important; background: #E8E5DF !important; flex-shrink: 0 !important; }

/* City pills — v6.1 wrapping mode (city_nav="viewall"); NANDITO PA RIN */
.fpv6-city-pills { display: contents !important; }
.fpv6-city-pill {
    padding: 8px 15px !important; background: #FFF !important; border-radius: 8px !important;
    border: none !important; outline: 1px solid #E8E5DF !important; outline-offset: -1px !important;
    font-size: 16px !important; font-family: 'Afacad Flux', sans-serif !important; font-weight: 400 !important;
    color: #2A2A2A !important; cursor: pointer !important; white-space: nowrap !important;
    transition: all 0.2s !important; text-transform: capitalize !important;
}
.fpv6-city-pill:hover { background: #F5F3F0 !important; color: #2A2A2A !important; outline-color: #CCC8C0 !important; }
/* v6.2: SELECTED = #6A8375 (Figma var --100) + white text, walang outline */
.fpv6-city-pill.active,
.fpv6-city-pill.active:hover { background: #6A8375 !important; color: #FFFFFF !important; outline-color: #6A8375 !important; }

/* ============================================================
   v6.2: CITY RAIL — isang horizontal row, draggable, may arrows.
   Nakatago ang scrollbar; ang touch ay native scroll (may momentum).
   ============================================================ */
.fpv6-city-nav { display: flex !important; align-items: center !important; gap: 10px !important; flex: 1 1 auto !important; min-width: 0 !important; }
.fpv6-city-rail {
    display: flex !important; align-items: center !important; gap: 10px !important;
    flex: 1 1 auto !important; min-width: 0 !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 2px 0 !important; cursor: grab;
}
.fpv6-city-rail::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.fpv6-city-rail.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; -webkit-user-select: none; }
.fpv6-city-rail .fpv6-city-pill { flex: 0 0 auto !important; }
.fpv6-city-arrow {
    width: 37px !important; height: 37px !important; flex: 0 0 auto !important;
    padding: 0 !important; background: #FFF !important; border: none !important;
    outline: 1px solid #E8E5DF !important; outline-offset: -1px !important; border-radius: 18.5px !important;
    box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.20) !important;  /* v6.3: exact Figma shadow */
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important; color: #2A2A2A !important; transition: all 0.2s !important;
}
.fpv6-city-arrow:hover { background: #2A2A2A !important; color: #FFF !important; outline-color: #2A2A2A !important; }
.fpv6-city-arrow[hidden] { display: none !important; }
.fpv6-city-arrow svg { width: 8px !important; height: 13px !important; display: block !important; }
/* v6.3: sagad na sa kanan — hindi nagta-tago, nagdi-dim lang at hindi na clickable */
.fpv6-city-arrow:disabled,
.fpv6-city-arrow.is-disabled,
.fpv6-city-arrow.is-disabled:hover {
    color: #CCC8C0 !important; background: #FFF !important; outline-color: #E8E5DF !important;
    box-shadow: none !important; cursor: default !important; pointer-events: none !important;
}

.fpv6-view-all-pill {
    padding: 8px 15px !important; background: #FFF !important; border-radius: 8px !important;
    border: none !important; outline: 1px solid #E8E5DF !important; outline-offset: -1px !important;
    font-size: 16px !important; font-family: 'Afacad Flux', sans-serif !important; font-weight: 400 !important;
    color: #2A2A2A !important; cursor: pointer !important; white-space: nowrap !important;
    transition: all 0.2s !important; display: inline-flex !important; align-items: center !important; gap: 8px !important;
}
.fpv6-view-all-pill:hover { background: #F5F3F0 !important; color: #2A2A2A !important; outline-color: #CCC8C0 !important; }
.fpv6-view-all-pill.active, .fpv6-view-all-pill.active:hover { background: #6A8375 !important; color: #FFFFFF !important; outline-color: #6A8375 !important; }
.fpv6-view-all-pill svg { width: 16px !important; height: 16px !important; }

.fpv6-search-right { flex: 0 0 auto !important; }
.fpv6-search-wrap {
    display: flex !important; align-items: center !important; width: 300px !important; height: 37px !important;
    padding: 0 20px !important; background: #FFF !important; gap: 10px !important;
    border-radius: 50px !important; outline: 1px solid #E8E5DF !important; outline-offset: -1px !important;
    box-sizing: border-box !important;
}
.fpv6-search-input {
    flex: 1 !important; border: none !important; outline: none !important; background: transparent !important;
    font-size: 16px !important; font-family: 'Afacad Flux', sans-serif !important; font-weight: 300 !important;
    color: #2A2A2A !important; min-width: 0 !important;
}
.fpv6-search-input::placeholder { color: #666666 !important; }
.fpv6-search-btn {
    width: 16px !important; height: 16px !important; min-width: 16px !important;
    background: transparent !important; border: none !important; padding: 0 !important;
    cursor: pointer !important; display: inline-flex !important; align-items: center !important;
    justify-content: center !important; flex-shrink: 0 !important; color: #A3A3A3 !important;
    transition: transform 0.15s ease !important;
}
.fpv6-search-btn:hover { transform: scale(1.15) !important; background: transparent !important; color: #A3A3A3 !important; }

/* FILTERS PANEL */
.fpv6-filters-panel {
    position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important;
    background: #FFF !important; border-radius: 12px !important;
    border: 1px solid #E8E5DF !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
    padding: 20px !important; min-width: 680px !important; z-index: 99999 !important;
    opacity: 0 !important; visibility: hidden !important; transform: translateY(-10px) !important;
    transition: all 0.2s ease !important;
}
.fpv6-filters-panel.show { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
.fpv6-filters-panel-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }
.fpv6-filter-group { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.fpv6-filter-group-label { font-size: 14px !important; font-weight: 500 !important; color: #2A2A2A !important; text-transform: capitalize !important; }

.fpv6-dd-opt { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-direction: row-reverse !important; gap: 10px !important; cursor: pointer !important; padding: 5px 0 !important; }
.fpv6-dd-opt:hover span { font-weight: 500 !important; }
.fpv6-chk { width: 12px !important; height: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.fpv6-chk-mark { width: 10px !important; height: 7px !important; background: #2A2A2A !important; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important; opacity: 0 !important; transition: opacity 0.2s !important; }
.fpv6-dd-opt.selected .fpv6-chk-mark { opacity: 1 !important; }
.fpv6-dd-opt span { color: #2A2A2A !important; font-size: 14px !important; font-family: 'Afacad Flux', sans-serif !important; font-weight: 400 !important; }
.fpv6-dd-div { width: 100% !important; height: 1px !important; background: #E8E5DF !important; margin: 2px 0 !important; }

.fpv6-bb-grid { display: flex !important; gap: 5px !important; }
.fpv6-bb-opt { min-width: 45px !important; padding: 8px 12px !important; background: #FFF !important; border-radius: 3px !important; border: 1px solid #CCC8C0 !important; cursor: pointer !important; color: #928A80 !important; font-size: 14px !important; font-family: 'Afacad Flux', sans-serif !important; transition: all 0.2s !important; text-align: center !important; }
.fpv6-bb-opt:hover { border-color: #2A2A2A !important; color: #2A2A2A !important; }
.fpv6-bb-opt.active { background: #2A2A2A !important; border-color: #2A2A2A !important; color: #FFF !important; }

.fpv6-range-wrap { padding: 5px 0 !important; }
.fpv6-range-labels { display: flex !important; justify-content: space-between !important; margin-bottom: 16px !important; }
.fpv6-range-labels span { font-size: 14px !important; color: #666 !important; font-family: 'Afacad Flux', sans-serif !important; }
.fpv6-range-track { position: relative !important; height: 4px !important; background: #E8E5DF !important; border-radius: 100px !important; margin: 20px 0 !important; cursor: pointer !important; }
.fpv6-range-fill { position: absolute !important; top: 0 !important; height: 4px !important; background: #2A2A2A !important; border-radius: 100px !important; pointer-events: none !important; }
.fpv6-range-thumb { position: absolute !important; top: 50% !important; width: 20px !important; height: 20px !important; background: #FFF !important; border: 2px solid #2A2A2A !important; border-radius: 50% !important; transform: translate(-50%, -50%) !important; cursor: grab !important; z-index: 2 !important; transition: box-shadow 0.2s !important; touch-action: none !important; }
.fpv6-range-thumb:hover, .fpv6-range-thumb.dragging { box-shadow: 0 0 0 6px rgba(42,42,42,0.15) !important; cursor: grabbing !important; }
.fpv6-thumb-tooltip { position: absolute !important; bottom: calc(100% + 8px) !important; left: 50% !important; transform: translateX(-50%) !important; background: #2A2A2A !important; color: #FFF !important; font-size: 14px !important; font-family: 'Afacad Flux', sans-serif !important; padding: 4px 10px !important; border-radius: 3px !important; white-space: nowrap !important; pointer-events: none !important; opacity: 0 !important; transition: opacity 0.2s !important; }
.fpv6-range-thumb:hover .fpv6-thumb-tooltip, .fpv6-range-thumb.dragging .fpv6-thumb-tooltip { opacity: 1 !important; }
.fpv6-range-bounds { display: flex !important; justify-content: space-between !important; margin-top: 8px !important; }
.fpv6-range-bounds span { font-size: 13px !important; color: #999 !important; font-family: 'Afacad Flux', sans-serif !important; }

/* MAIN LAYOUT */
.fpv6-main-layout {
    max-width: 1440px !important; width: 100% !important; margin: 0 auto !important;
    padding: 0 50px 80px 50px !important;
    display: flex !important; gap: 30px !important; align-items: flex-start !important;
}
.fpv6-cards-side { width: 660px !important; flex-shrink: 0 !important; }
/* 1340 content - 660 cards - 30 gap = 650 map (eksakto sa Figma) */
.fpv6-map-side { flex: 1 1 auto !important; min-width: 0 !important; position: sticky !important; top: 20px !important; }

.fpv6-active-tags { display: none; flex-wrap: wrap !important; gap: 8px !important; max-width: 1440px !important; width: 100% !important; margin: 0 auto 10px auto !important; padding: 0 50px !important; }
.fpv6-tag { display: inline-flex !important; align-items: center !important; padding: 6px 14px !important; background: #F5F3F0 !important; border: none !important; border-radius: 50px !important; font-size: 13px !important; font-family: 'Afacad Flux', sans-serif !important; color: #2A2A2A !important; cursor: pointer !important; transition: all 0.2s !important; white-space: nowrap !important; }
.fpv6-tag:hover { background: #E8E5DF !important; }
.fpv6-results-count {
    max-width: 1440px !important; width: 100% !important; margin: 0 auto !important; padding: 0 50px 16px 50px !important;
    color: #2A2A2A !important; font-family: 'Afacad Flux', sans-serif !important; font-size: 16px !important;
    font-style: normal !important; font-weight: 500 !important; line-height: normal !important;
}

/* MAP */
.fpv6-map-inner {
    width: 100% !important; height: 840px !important; position: relative !important;
    overflow: hidden !important; border-radius: 8px !important;
    background: #F5F3F0 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}
.fpv6-leaflet-map { width: 100% !important; height: 100% !important; pointer-events: auto !important; }
/* v6.0 viewport fullscreen — NANDITO PA RIN, ginagamit kapag expand_mode="viewport" */
.fpv6-map-inner.fullscreen { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 999999 !important; border-radius: 0 !important; }

/* ============================================================
   v6.1: SECTION EXPAND (default). Naka-hide ang cards, buong section
   width ang mapa, nasa loob PA RIN ng page — hindi 100vw/100vh.
   ============================================================ */
.fpv6-main-layout.fpv6-map-expanded .fpv6-cards-side { display: none !important; }
.fpv6-main-layout.fpv6-map-expanded .fpv6-map-side { flex: 1 1 100% !important; width: 100% !important; position: relative !important; top: 0 !important; }
.fpv6-main-layout.fpv6-map-expanded .fpv6-map-inner { height: 840px !important; }
@media (max-width: 1100px) { .fpv6-main-layout.fpv6-map-expanded .fpv6-map-inner { height: 70vh !important; min-height: 460px !important; } }

.fpv6-map-toggle { position: absolute !important; top: 14px !important; left: 9px !important; display: flex !important; z-index: 1000 !important; }
.fpv6-map-toggle-btn { height: 40px !important; background: white !important; border: none !important; font-size: 18px !important; font-family: 'Afacad Flux', sans-serif !important; cursor: pointer !important; box-shadow: 0 1px 4px -1px rgba(0,0,0,0.3) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #565656 !important; font-weight: 400 !important; transition: all 0.2s ease !important; }
.fpv6-map-toggle-btn:first-child { width: 64px !important; border-radius: 2px 30px 30px 2px !important; }
.fpv6-map-toggle-btn:last-child { width: 96px !important; border-radius: 30px 2px 2px 30px !important; }
.fpv6-map-toggle-btn.active { font-weight: 500 !important; color: black !important; background: white !important; }

.fpv6-map-fullscreen { position: absolute !important; top: 14px !important; right: 10px !important; width: 36px !important; height: 36px !important; background: white !important; border: 1px solid #d5d5d5 !important; border-radius: 50% !important; font-size: 16px !important; cursor: pointer !important; box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important; z-index: 1000 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #78716C !important; }
.fpv6-map-zoom { position: absolute !important; top: 58px !important; right: 10px !important; display: flex !important; flex-direction: column !important; background: white !important; border-radius: 20px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important; z-index: 1000 !important; overflow: hidden !important; }
.fpv6-zoom-btn { width: 36px !important; height: 40px !important; border: none !important; background: white !important; font-size: 20px !important; cursor: pointer !important; color: #78716C !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.fpv6-zoom-btn:hover { background: #f5f5f5 !important; }
.fpv6-zoom-sep { height: 1px !important; background: #e0e0e0 !important; }
.fpv6-map-key-btn { position: absolute !important; bottom: 14px !important; right: 10px !important; width: 56px !important; height: 56px !important; background: rgba(120,113,108,0.3) !important; border: none !important; border-radius: 35px !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; cursor: pointer !important; z-index: 1000 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.fpv6-map-key-btn:hover { background: rgba(120,113,108,0.4) !important; }
.fpv6-map-key-btn svg { width: 28px !important; height: 28px !important; }
.fpv6-map-key-btn .fpv6-key-icon.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal !important; font-style: normal !important;
    font-size: 26px !important; line-height: 1 !important; letter-spacing: normal !important;
    text-transform: none !important; display: inline-block !important; white-space: nowrap !important;
    word-wrap: normal !important; direction: ltr !important;
    -webkit-font-feature-settings: 'liga' !important; -webkit-font-smoothing: antialiased !important;
    color: #2A2A2A !important;
}

/* ============================================================
   v6.1: MAP GESTURE GUARD — hint overlay + touch-action override.
   BAKIT KAILANGAN ANG touch-action: nakatakda sa `touch-action:none` ang
   .leaflet-container sa leaflet.css. Kinakain niyan ang one-finger page scroll
   sa BROWSER level — hindi na umaabot sa JS, kaya hindi sapat ang
   map.dragging.disable() mag-isa. `pan-y` ang nagbabalik ng vertical page scroll;
   ang JS ang nagta-toggle papuntang `none` kapag dalawang daliri na.
   ============================================================ */
.fpv6-section .fpv6-map-hint {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(42,42,42,0.55); color: #FFFFFF;
    font-family: 'Afacad Flux', sans-serif; font-size: 16px; font-weight: 400;
    text-align: center; padding: 20px; box-sizing: border-box;
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
    pointer-events: none;  /* hinding-hindi hinaharangan ang map controls */
    z-index: 640;          /* sa ibabaw ng Leaflet marker pane (600), sa ilalim ng popup (700) */
}
.fpv6-section .fpv6-map-hint.show { opacity: 1; visibility: visible; }
.fpv6-section .fpv6-map-hint span { max-width: 320px; line-height: 1.4; }
.fpv6-main-layout.fpv6-map-expanded .fpv6-map-hint,
.fpv6-section .fpv6-map-inner.fullscreen .fpv6-map-hint { display: none !important; }
.fpv6-section .fpv6-leaflet-map.fpv6-gesture-guard { touch-action: pan-y !important; }
.fpv6-section .fpv6-leaflet-map.fpv6-gesture-engaged { touch-action: none !important; }
@media (max-width: 767px) { .fpv6-section .fpv6-map-hint { font-size: 14px; } }

/* MAP MARKERS */
.fpv6-city-marker { background: transparent !important; }
.fpv6-cluster-dot { width: 40px !important; height: 40px !important; background: #6A8375 !important; border: 3px solid white !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: white !important; font-size: 14px !important; font-weight: 500 !important; font-family: 'Afacad Flux', sans-serif !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; cursor: pointer !important; transition: transform 0.2s !important; }
.fpv6-cluster-dot:hover { transform: scale(1.1) !important; }

.fpv6-prop-marker { background: transparent !important; }
.fpv6-price-marker {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    padding: 3px 10px !important; background: #FFFFFF !important;
    border-radius: 50px !important; outline: 1px solid #CCC8C0 !important; outline-offset: -1px !important;
    font-size: 14px !important; font-weight: 500 !important; font-family: 'Afacad Flux', sans-serif !important;
    color: #2A2A2A !important; white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; cursor: pointer !important;
    transition: all 0.2s ease !important; text-transform: capitalize !important;
}
.fpv6-price-marker:hover { transform: scale(1.1) !important; z-index: 1000 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important; }
/* V6: Selected color is #2A2A2A */
.fpv6-price-marker.selected {
    background: #2A2A2A !important; color: #FFFFFF !important;
    outline-color: #2A2A2A !important; z-index: 1000 !important;
    transform: scale(1.15) !important;
    box-shadow: 0 0 0 4px rgba(42,42,42,0.25), 0 4px 16px rgba(0,0,0,0.3) !important;
}
/* v6.1: hover-from-card state — same dark pill, mas mahina ang ring para may pagkakaiba */
.fpv6-price-marker.hovered {
    background: #2A2A2A !important; color: #FFFFFF !important;
    outline-color: #2A2A2A !important; z-index: 999 !important;
    transform: scale(1.12) !important;
    box-shadow: 0 0 0 3px rgba(42,42,42,0.18), 0 4px 14px rgba(0,0,0,0.28) !important;
}

/* ============================================================
   v6.1: MAP POPUP — bagong Figma. Larawan sa taas, address + price sa ilalim.
   ============================================================ */
.fpv6-popup .leaflet-popup-content-wrapper { padding: 0 !important; border-radius: 0 !important; overflow: hidden !important; box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important; background: #FFF !important; }
.fpv6-popup .leaflet-popup-content { margin: 0 !important; width: 250px !important; line-height: 1.35 !important; border-radius: 0 !important; overflow: hidden !important; }
.fpv6-popup .leaflet-popup-tip { background: #FFF !important; box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important; }
.fpv6-pop-card { display: block !important; width: 250px !important; text-decoration: none !important; color: inherit !important; background: #FFF !important; }
.fpv6-pop-card:hover { text-decoration: none !important; }
.fpv6-pop-img { display: block !important; width: 250px !important; height: 150px !important; object-fit: cover !important; }
.fpv6-pop-img-ph { background: #EDEAE5 !important; height: 150px !important; }
.fpv6-pop-body { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 10px 15px !important; background: #FFFFFF !important; }
.fpv6-pop-left { flex: 1 1 0 !important; min-width: 0 !important; }
.fpv6-pop-name { color: var(--fpv6-dark, #2A2A2A) !important; font-size: 14px !important; font-weight: 500 !important; text-transform: capitalize !important; line-height: 1.3 !important; }
.fpv6-pop-city { color: var(--fpv6-light, #666666) !important; font-size: 12px !important; font-weight: 400 !important; text-transform: capitalize !important; line-height: 1.3 !important; }
.fpv6-pop-right { display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; text-align: right !important; flex-shrink: 0 !important; }
.fpv6-pop-plabel { color: var(--fpv6-dark, #2A2A2A) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.3 !important; }
.fpv6-pop-plabel:empty { display: none !important; }
.fpv6-pop-price { color: var(--fpv6-dark, #2A2A2A) !important; font-size: 14px !important; font-weight: 500 !important; text-transform: capitalize !important; white-space: nowrap !important; line-height: 1.3 !important; }

/* ============================================================
   v6.4: POPUP SA IBABA NG MARKER (Figma).
   Palaging SA TAAS inilalagay ni Leaflet ang popup: nagse-set ang
   L.Popup._updatePosition() ng INLINE na `bottom` sa `.leaflet-popup`.
   Kaya kailangan munang patayin ang `bottom` bago tumalab ang `top` —
   walang CSS na tatalab kung `bottom` lang ang lalabanan.
   Ang transform ng container ang nagdadala sa anchor point ng marker,
   kaya ang `top: 20px` ay 20px pababa mula sa gitna ng price pill
   (12px ang kalahati ng pill = ~8px na puwang).
   ============================================================ */
.fpv6-section .fpv6-popup.fpv6-popup-below,
.leaflet-popup.fpv6-popup.fpv6-popup-below { bottom: auto !important; top: 20px !important; }
.fpv6-popup.fpv6-popup-below .leaflet-popup-tip-container { display: none !important; }
/* walang close button sa Figma — popup_close="true" para ibalik */
.fpv6-popup .leaflet-popup-close-button { color: #2A2A2A !important; }

/* v6.0 popup card (overlay layout) — NANDITO PA RIN */
.fpv6-popup-card { width: 300px !important; height: 256px !important; border-radius: 0 !important; margin: 0 !important; }
.fpv6-popup-card .fhv5-card-link { height: 100%; }
.fpv6-popup-card .fhv5-card-img { height: 100%; }
.fpv6-popup-card .fhv5-card-content { padding: 14px; }

/* KEY MODAL */
.fpv6-key-modal { position: absolute !important; bottom: 80px !important; right: 10px !important; background: #FFF !important; border-radius: 16px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important; padding: 0 !important; min-width: 220px !important; max-width: calc(100% - 24px) !important; z-index: 1001 !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(10px) !important; transition: all 0.25s ease !important; pointer-events: none !important; }
.fpv6-key-modal.show { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; pointer-events: auto !important; }
.fpv6-key-content { padding: 24px !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }
.fpv6-key-content h4 { margin: 0 0 4px 0 !important; font-size: 18px !important; font-weight: 500 !important; color: #2A2A2A !important; }
.fpv6-key-item { display: flex !important; align-items: center !important; gap: 14px !important; margin-bottom: 14px !important; }
.fpv6-key-item:last-of-type { margin-bottom: 0 !important; }
.fpv6-key-dot { border-radius: 50% !important; flex-shrink: 0 !important; }
.fpv6-key-dot.city { width: 24px !important; height: 24px !important; background: #6A8375 !important; border: 3px solid white !important; box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important; }
.fpv6-key-dot.prop { width: auto !important; height: 24px !important; background: #FFFFFF !important; border: 1px solid #CCC8C0 !important; border-radius: 50px !important; box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important; padding: 0 8px !important; display: inline-flex !important; align-items: center !important; font-size: 12px !important; font-weight: 500 !important; color: #2A2A2A !important; }
.fpv6-key-dot.sel { width: auto !important; height: 24px !important; background: #2A2A2A !important; border: 1px solid #2A2A2A !important; border-radius: 50px !important; box-shadow: 0 0 0 3px rgba(42,42,42,0.25), 0 2px 6px rgba(0,0,0,0.25) !important; padding: 0 8px !important; display: inline-flex !important; align-items: center !important; font-size: 12px !important; font-weight: 500 !important; color: #FFF !important; }
.fpv6-key-content span { font-size: 15px !important; color: #2A2A2A !important; }
.fpv6-key-close { margin-top: 16px !important; padding: 12px 20px !important; background: #FFF !important; border: 1px solid #E8E5DF !important; border-radius: 8px !important; font-size: 14px !important; color: #2A2A2A !important; cursor: pointer !important; width: 100% !important; text-align: center !important; }
.fpv6-key-close:hover { background: #F5F3F0 !important; }

/* FULLSCREEN PREVIEW (viewport mode) */
.fpv6-fs-preview { position: absolute !important; bottom: 20px !important; left: 20px !important; width: 320px !important; background: #FFF !important; border-radius: 12px !important; box-shadow: 0 8px 40px rgba(0,0,0,0.25) !important; z-index: 1000001 !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(20px) scale(0.95) !important; transition: all 0.3s ease !important; overflow: hidden !important; pointer-events: none !important; }
.fpv6-fs-preview.show { opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; pointer-events: auto !important; animation: fpv6SlideIn 0.3s ease !important; }
.fpv6-fs-close { position: absolute !important; top: 10px !important; right: 10px !important; width: 28px !important; height: 28px !important; background: rgba(0,0,0,0.6) !important; border: none !important; border-radius: 50% !important; color: #FFF !important; font-size: 14px !important; cursor: pointer !important; z-index: 10 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.fpv6-fs-img { width: 100% !important; height: 140px !important; overflow: hidden !important; background: #f5f3f0 !important; }
.fpv6-fs-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.fpv6-fs-body { padding: 16px !important; }
.fpv6-fs-badge { display: inline-flex !important; padding: 5px 14px !important; border-radius: 50px !important; background: #FFF !important; border: 1px solid #CCC8C0 !important; margin-bottom: 10px !important; }
.fpv6-fs-badge span { font-size: 12px !important; color: #2A2A2A !important; }
.fpv6-fs-name { font-size: 16px !important; font-weight: 500 !important; color: #2A2A2A !important; margin: 0 0 4px !important; }
.fpv6-fs-addr { font-size: 13px !important; color: #666 !important; margin: 0 0 12px !important; }
.fpv6-fs-specs { display: flex !important; justify-content: space-between !important; padding-top: 12px !important; border-top: 1px solid #E8E5DF !important; margin-bottom: 12px !important; }
.fpv6-fs-spec { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; }
.fpv6-fs-spec-lbl { font-size: 9px !important; color: #666 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
.fpv6-fs-spec-val { font-size: 14px !important; color: #2A2A2A !important; font-weight: 500 !important; }
.fpv6-fs-btn { display: block !important; width: 100% !important; padding: 12px !important; background: #2A2A2A !important; border: none !important; border-radius: 50px !important; color: #FFF !important; font-size: 14px !important; font-weight: 500 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; }
.fpv6-fs-btn:hover { background: #5A4F42 !important; color: #FFF !important; text-decoration: none !important; }

/* PROPERTIES GRID */
.fpv6-grid { display: grid !important; grid-template-columns: repeat(2, 320px) !important; gap: 20px !important; width: 100% !important; }
/* v6.2: split layout = isang card kada row (660px = image 330 + content 330), gap 30 */
.fpv6-layout-split .fpv6-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
.fpv6-no-results { grid-column: 1 / -1 !important; padding: 60px 20px !important; text-align: center !important; }
.fpv6-no-results p { color: #666 !important; font-size: 18px !important; }

/* ============================================================
   v6.5: EMPTY STATE (Figma Frame 91779) — left aligned sa itaas ng
   cards column, hindi naka-center. Gap 5px sa pagitan ng dalawang linya.

   v6.7 BUGFIX — WALANG `display` DITO.
   Ang v6.5 ay may `display: flex !important` sa rule na ito. Ang isang
   !important na declaration sa stylesheet ay MAS MALAKAS KAYSA SA INLINE
   STYLE (ito lang ang pagkakataon na natatalo ang inline style), kaya
   walang epekto ang `noRes.style.display = "none"` ng render() at LAGING
   nakikita ang "No exact matches" kahit may resulta.
   Ngayon, ang state class na `.fpv6-is-empty` sa section ang nagko-kontrol
   ng visibility — hindi na nakikipag-away sa inline style.
   ============================================================ */
.fpv6-section .fpv6-no-results {
    padding: 4px 0 40px 0 !important; text-align: left !important;
}
.fpv6-section.fpv6-is-empty .fpv6-no-results {
    display: flex !important; flex-direction: column !important;
    justify-content: flex-start !important; align-items: flex-start !important; gap: 5px !important;
}
/* Parehong bug, tahimik lang: kinakain din ng `!important` sa .fpv6-grid at
   .fpv6-pagination ang `style.display = "none"` ng render(), kaya lumalabas pa
   rin ang pagination kahit zero ang resulta. Ang state class ang lumulutas. */
.fpv6-section.fpv6-is-empty .fpv6-grid { display: none !important; }
.fpv6-section.fpv6-is-empty .fpv6-pagination { display: none !important; }
.fpv6-section .fpv6-no-results-title {
    align-self: stretch !important; color: var(--fpv6-dark, #2A2A2A) !important;
    font-family: 'Afacad Flux', sans-serif !important; font-size: 20px !important;
    font-weight: 500 !important; line-height: 1.3 !important; word-wrap: break-word !important;
}
.fpv6-section .fpv6-no-results-sub {
    align-self: stretch !important; color: var(--fpv6-dark, #2A2A2A) !important;
    font-family: 'Afacad Flux', sans-serif !important; font-size: 16px !important;
    font-weight: 400 !important; line-height: 1.4 !important; word-wrap: break-word !important;
}
/* lumang linya, iniwan sa markup pero hindi na ipinapakita */
.fpv6-section .fpv6-no-results-legacy { display: none !important; }

/* ============================================================
   v6.1: SPLIT CARD (bagong Figma)
     [ image 320x192 ][ white content 320x192 ]
   ============================================================ */
.fpv6-hcard {
    display: block !important; width: 100% !important; max-width: 660px !important;
    height: var(--fpv6-card-h) !important; background: #FFFFFF !important;
    border: 0 !important; overflow: hidden !important; position: relative !important;
    transition: box-shadow .2s ease, transform .2s ease !important;
}
.fpv6-hcard:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.10) !important; }
.fpv6-hcard.highlighted { box-shadow: 0 0 0 2px #2A2A2A !important; z-index: 2 !important; }
.fpv6-hcard-link {
    display: flex !important; align-items: stretch !important; height: 100% !important;
    text-decoration: none !important; color: inherit !important;
}
.fpv6-hcard-link:hover, .fpv6-hcard-link:focus { text-decoration: none !important; color: inherit !important; }
.fpv6-hcard-media { width: var(--fpv6-card-w) !important; height: 100% !important; flex-shrink: 0 !important; overflow: hidden !important; background: #EDEAE5 !important; }
.fpv6-hcard-img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
.fpv6-hcard-ph { background: #EDEAE5 !important; }

.fpv6-hcard-body {
    width: var(--fpv6-card-w) !important; flex: 1 1 auto !important; min-width: 0 !important;
    padding: 10px 15px !important; background: #FFFFFF !important;
    display: flex !important; flex-direction: column !important; justify-content: space-between !important;
}
.fpv6-hcard-top { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.fpv6-hcard-titlerow { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
.fpv6-hcard-idcol { min-width: 0 !important; }
.fpv6-hcard-name {
    color: var(--fpv6-dark) !important; font-family: 'Afacad Flux', sans-serif !important;
    font-size: 16px !important; font-weight: 500 !important; text-transform: capitalize !important;
    line-height: 1.25 !important; overflow: hidden !important; display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
}
.fpv6-hcard-city { color: var(--fpv6-light) !important; font-size: 14px !important; font-weight: 400 !important; text-transform: capitalize !important; line-height: 1.3 !important; }
.fpv6-hcard-pricecol { display: flex !important; flex-direction: column !important; align-items: flex-end !important; flex-shrink: 0 !important; text-align: right !important; }
.fpv6-hcard-plabel { color: var(--fpv6-dark) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.2 !important; }
.fpv6-hcard-plabel:empty { display: none !important; }
.fpv6-hcard-price { color: var(--fpv6-dark) !important; font-size: 16px !important; font-weight: 500 !important; text-transform: capitalize !important; white-space: nowrap !important; line-height: 1.25 !important; }
.fpv6-hcard-divider { width: 100% !important; height: 1px !important; background: var(--fpv6-line) !important; }

.fpv6-hcard-specs { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; }
.fpv6-hspec { display: inline-flex !important; align-items: center !important; gap: 5px !important; color: var(--fpv6-light) !important; font-size: 14px !important; font-weight: 400 !important; font-family: 'Afacad Flux', sans-serif !important; white-space: nowrap !important; }
.fpv6-hspec-icon { width: 16px !important; height: 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.fpv6-hspec-icon svg { width: 14px !important; height: 14px !important; display: block !important; }
.fpv6-hspec-val { color: var(--fpv6-light) !important; }
.fpv6-hspec-lbl { color: var(--fpv6-light) !important; }
.fpv6-hspec-sep { width: 1px !important; height: 19px !important; background: var(--fpv6-spec-sep) !important; flex-shrink: 0 !important; }

.fpv6-hcard-badges { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 5px !important; }
.fpv6-hbadge {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    padding: 5px 8px !important; background: #FFFFFF !important; border-radius: 5px !important;
    outline: 1px solid var(--fpv6-line) !important; outline-offset: -1px !important;
    color: var(--fpv6-dark) !important; font-family: 'Afacad Flux', sans-serif !important;
    font-size: 14px !important; font-weight: 400 !important; line-height: 1.1 !important;
    text-transform: capitalize !important; white-space: nowrap !important;
}
.fpv6-hbadge strong { font-weight: 500 !important; }
.fpv6-hbadge-units, .fpv6-hbadge-kk { -webkit-backdrop-filter: blur(2.5px) !important; backdrop-filter: blur(2.5px) !important; }
.fpv6-hcard.fpv6-is-sold .fpv6-hcard-price { color: var(--fpv6-light) !important; }

/* PAGINATION */
.fpv6-pagination { display: flex !important; justify-content: center !important; align-items: center !important; gap: 20px !important; margin-top: 40px !important; }
.fpv6-pag-prev, .fpv6-pag-next { width: 24px !important; height: 24px !important; background: transparent !important; border: none !important; padding: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; cursor: pointer !important; }
.fpv6-pag-prev .material-symbols-outlined, .fpv6-pag-next .material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important; font-weight: normal !important; font-style: normal !important;
    font-size: 24px !important; line-height: 1 !important; letter-spacing: normal !important; text-transform: none !important;
    display: inline-block !important; white-space: nowrap !important; word-wrap: normal !important; direction: ltr !important;
    -webkit-font-feature-settings: 'liga' !important; -webkit-font-smoothing: antialiased !important; color: #2A2A2A !important;
}
.fpv6-pag-prev:disabled, .fpv6-pag-next:disabled { opacity: 0.3 !important; cursor: not-allowed !important; }
.fpv6-pag-nums { display: flex !important; align-items: center !important; gap: 8px !important; }
.fpv6-pnum {
    width: 35px !important; height: 35px !important; border-radius: 50% !important; border: none !important;
    background: #FFF !important; display: flex !important; justify-content: center !important; align-items: center !important;
    cursor: pointer !important; color: #2A2A2A !important; font-size: 16px !important; font-family: 'Afacad Flux', sans-serif !important;
    font-weight: 400 !important; text-transform: capitalize !important; flex-shrink: 0 !important;
}
.fpv6-pnum:hover { background: #F5F3F0 !important; }
.fpv6-pnum.active { background: #5A4F42 !important; color: #FFF !important; font-weight: 500 !important; }
.fpv6-ellip { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 35px !important; height: 35px !important; flex-shrink: 0 !important; }
.fpv6-ellip .material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important; font-weight: normal !important; font-style: normal !important;
    font-size: 20px !important; line-height: 1 !important; color: #2A2A2A !important;
    -webkit-font-feature-settings: 'liga' !important; -webkit-font-smoothing: antialiased !important;
}

.fpv6-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.4); z-index: 99998; }
.fpv6-backdrop.show { display: block !important; }

/* CARD OVERRIDES (v6.0 overlay card — buo pa rin) */
.fpv6-section .fpv6-props-wrap { overflow: visible !important; }
.fpv6-section .fhv5-card { border: 0 !important; height: 256px !important; }
.fpv6-section .fhv5-card.highlighted { box-shadow: 0 0 0 6px #2A2A2A !important; border-radius: 8px !important; z-index: 2 !important; }
.fpv6-section .fhv5-card .fhv5-hover-overlay { pointer-events: none !important; }
.fpv6-section .fhv5-card .fhv5-view-home-btn { pointer-events: auto !important; }
.fpv6-section .fhv5-kk-badge { position: relative !important; z-index: 10 !important; pointer-events: auto !important; }
.fpv6-section .fhv5-card-top { justify-content: space-between; align-items: flex-start; }
.fpv6-section .fhv5-units-left-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 5px 15px; border-radius: 50px; background: rgba(52,176,125,0.30); outline: 1px solid #34B07D; outline-offset: -1px; -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); color: #FFFFFF; font-family: 'Afacad Flux', sans-serif; font-size: 14px; font-weight: 400; text-transform: capitalize; word-wrap: break-word; line-height: normal; flex-shrink: 0; margin-bottom: 5px !important; }
.fpv6-section .fhv5-card.fhv5-hover-active .fhv5-kk-badge { background: rgba(253,186,116,0.30) !important; color: #FFFFFF !important; outline-color: rgba(253,186,116,0.40) !important; }
.fpv6-section .fhv5-kk-badge:hover, .fpv6-section .fhv5-card .fhv5-kk-badge.fhv5-kk-hovered, .fpv6-section .fhv5-card.fhv5-hover-active .fhv5-kk-badge:hover, .fpv6-section .fhv5-card.fhv5-hover-active .fhv5-kk-badge.fhv5-kk-hovered { background: #FDBA74 !important; color: #2A2A2A !important; outline-color: rgba(180,83,9,0.4) !important; }
.fpv6-section a.fhv5-kk-badge, .fpv6-section a.fhv5-kk-badge:hover { text-decoration: none !important; }

.fpv6-map-loading-state { position: absolute !important; inset: 0 !important; z-index: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 16px !important; background: #F5F3F0 !important; color: #2A2A2A !important; font-family: 'Afacad Flux', sans-serif !important; font-size: 16px !important; pointer-events: none !important; border-radius: 8px !important; }
.fpv6-map-loading-state.fpv6-hidden { display: none !important; }
.fpv6-map-spinner { width: 40px !important; height: 40px !important; border: 3px solid #E8E5DF !important; border-top-color: #2A2A2A !important; border-radius: 50% !important; animation: fpv6MapSpin 0.8s linear infinite !important; }
.fpv6-map-retry { color: #2A2A2A !important; text-decoration: underline !important; pointer-events: auto !important; cursor: pointer !important; }

.fpv6-section .fpv6-no-results p { margin: 0; }

/* ============================================================
   v6.1: PROGRESSIVE LOADING (visual lang — walang deferral).
   Eager pa rin ang images; itinatago lang sila (opacity 0) hanggang dumating,
   tapos fade-in. Shimmer skeleton via :has() — awtomatikong tumitigil paglabas
   ng image; sa browsers na walang :has(), walang shimmer lang, buo pa rin ang fade.
   ============================================================ */
.fpv6-section.fpv6-progressive .fpv6-hcard,
.fpv6-section.fpv6-progressive .fhv5-card { animation: fpv6CardIn .45s ease both; }
.fpv6-section.fpv6-progressive .fpv6-hcard-media:has(.fpv6-img-pending),
.fpv6-section.fpv6-progressive .fhv5-card-link:has(.fpv6-img-pending) {
    background: linear-gradient(100deg, #ececec 40%, #f7f7f7 50%, #ececec 60%);
    background-size: 200% 100%; animation: fpv6Shimmer 1.2s linear infinite;
}
.fpv6-section.fpv6-progressive .fpv6-img-pending { opacity: 0 !important; }
.fpv6-section.fpv6-progressive .fpv6-img-loaded { opacity: 1 !important; transition: opacity .35s ease !important; }
@media (prefers-reduced-motion: reduce) {
    .fpv6-section.fpv6-progressive .fpv6-hcard,
    .fpv6-section.fpv6-progressive .fhv5-card { animation: none; }
    .fpv6-section.fpv6-progressive .fpv6-hcard-media:has(.fpv6-img-pending),
    .fpv6-section.fpv6-progressive .fhv5-card-link:has(.fpv6-img-pending) { animation: none; background: #ececec; }
    .fpv6-section.fpv6-progressive .fpv6-img-pending { opacity: 1 !important; }
}

.fpv6-seo-index { max-width: 1440px; margin: 32px auto 0; padding: 24px 50px; box-sizing: border-box; font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif; }
.fpv6-seo-index__heading { font-family: 'Sofia Pro', 'Sofia Sans', sans-serif; font-size: 24px; font-weight: 400; margin: 0 0 8px; color: #2A2A2A; }
.fpv6-seo-index__count { color: #8a8175; font-size: 16px; font-weight: 300; }
.fpv6-seo-index__city { font-size: 16px; font-weight: 500; margin: 20px 0 8px; color: #2A2A2A; border-bottom: 1px solid #eee; padding-bottom: 6px; }
.fpv6-seo-index__list { list-style: none; margin: 0 0 12px; padding: 0; column-gap: 32px; column-count: 1; }
@media(min-width:640px){.fpv6-seo-index__list{column-count:2;}}
@media(min-width:1024px){.fpv6-seo-index__list{column-count:3;}}
.fpv6-seo-index__list li { break-inside: avoid; margin: 0 0 8px; }
.fpv6-seo-index__list a { color: #2A2A2A; text-decoration: none; font-size: 15px; line-height: 1.4; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.fpv6-seo-index__list a:hover, .fpv6-seo-index__list a:focus { color: #5A4F42; border-bottom-color: #5A4F42; }

/* RESPONSIVE */
@media (max-width: 1300px) {
    .fpv6-filter-bar, .fpv6-active-tags, .fpv6-results-count, .fpv6-main-layout { padding-left: 50px !important; padding-right: 50px !important; }
    .fpv6-cards-side { width: 600px !important; }
    .fpv6-search-wrap { width: 260px !important; }
    .fpv6-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .fpv6-layout-split .fpv6-grid { grid-template-columns: 1fr !important; }
    .fpv6-hcard-media { width: 50% !important; }
    .fpv6-hcard-body { width: 50% !important; }
}

@media (max-width: 1100px) {
    .fpv6-main-layout { flex-direction: column !important; }
    .fpv6-cards-side { width: 100% !important; }
    .fpv6-map-side { position: relative !important; top: 0 !important; }
    .fpv6-map-inner { height: 500px !important; }
    .fpv6-hcard { max-width: none !important; }
}

@media (max-width: 1024px) {
    .fpv6-filter-bar, .fpv6-active-tags, .fpv6-results-count, .fpv6-main-layout { padding-left: 40px !important; padding-right: 40px !important; }
    /* v6.3: dito na lang pwedeng bumaba sa pangalawang linya ang search */
    .fpv6-filter-bar { flex-wrap: wrap !important; align-items: flex-start !important; }
    .fpv6-filter-left { flex: 1 1 100% !important; }
    .fpv6-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
    .fpv6-layout-split .fpv6-grid { grid-template-columns: 1fr !important; }
    .fpv6-filter-bar { flex-wrap: wrap !important; }
    .fpv6-search-right { width: 100% !important; margin-top: 10px !important; }
    .fpv6-search-wrap { width: 100% !important; max-width: 400px !important; }
    .fpv6-filters-panel { min-width: 100% !important; }
    .fpv6-filters-panel-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 767px) {
    .fpv6-filter-bar { padding: 20px 16px 16px 16px !important; flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
    .fpv6-filter-left { flex: 1 1 auto !important; width: 100% !important; }
    .fpv6-search-right { width: 100% !important; }
    .fpv6-search-wrap { width: 100% !important; }
    .fpv6-seo-index { padding: 24px 16px !important; }
    .fpv6-search-right { width: 100% !important; max-width: none !important; margin: 0 !important; }
    .fpv6-search-wrap { max-width: none !important; width: 100% !important; }
    .fpv6-city-pills { flex-wrap: wrap !important; gap: 8px !important; }
    .fpv6-filters-panel { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; min-width: 100vw !important; border-radius: 16px 16px 0 0 !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important; padding: 24px 20px 32px !important; max-height: 70vh !important; overflow-y: auto !important; z-index: 99999 !important; transform: translateY(100%) !important; opacity: 1 !important; visibility: hidden !important; transition: transform 0.3s !important; }
    .fpv6-filters-panel.show { transform: translateY(0) !important; visibility: visible !important; }
    .fpv6-filters-panel-grid { grid-template-columns: 1fr !important; }
    .fpv6-active-tags { padding: 0 16px !important; margin: 12px auto 0 auto !important; }
    .fpv6-results-count { padding: 0 16px 12px 16px !important; }
    .fpv6-main-layout { padding: 16px 16px 40px 16px !important; }
    .fpv6-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .fpv6-map-inner { height: 400px !important; }
    .fpv6-pagination { margin-top: 24px !important; gap: 8px !important; }
    .fpv6-pnum, .fpv6-ellip { width: 32px !important; height: 32px !important; font-size: 14px !important; }
    .fpv6-pag-prev, .fpv6-pag-next { width: 22px !important; height: 22px !important; }
    .fpv6-pag-prev .material-symbols-outlined, .fpv6-pag-next .material-symbols-outlined { font-size: 22px !important; }
    .fpv6-fs-preview { width: calc(100% - 32px) !important; max-width: 320px !important; bottom: 70px !important; left: 16px !important; }
    .fpv6-key-modal { left: 10px !important; right: 10px !important; bottom: 80px !important; width: auto !important; min-width: auto !important; }
    /* v6.0 note: card keeps the same fixed height/overlay layout as desktop — height:auto
       here previously collapsed the card to zero height since its content is absolutely
       positioned over the image (no normal-flow content to establish a height) */

    /* v6.1: SPLIT CARD sa mobile — stack. Larawan sa taas, content sa ilalim.
       Auto height dito (safe: hindi absolute-positioned ang content ng split card,
       iba siya sa overlay card). */
    .fpv6-hcard { height: auto !important; max-width: none !important; }
    .fpv6-hcard-link { flex-direction: column !important; }
    .fpv6-hcard-media { width: 100% !important; height: 200px !important; }
    .fpv6-hcard-body { width: 100% !important; padding: 12px 14px 14px !important; gap: 10px !important; }
    .fpv6-hcard-top { gap: 8px !important; }
    .fpv6-hcard-name { font-size: 15px !important; }
    .fpv6-hcard-city, .fpv6-hspec, .fpv6-hbadge { font-size: 13px !important; }
    .fpv6-hcard-badges { margin-top: 10px !important; }
}

@media (max-width: 480px) {
    .fpv6-filter-bar, .fpv6-active-tags, .fpv6-results-count, .fpv6-main-layout { padding-left: 12px !important; padding-right: 12px !important; }
    .fpv6-city-pill, .fpv6-view-all-pill, .fpv6-filters-btn { font-size: 13px !important; padding: 6px 10px !important; }
    .fpv6-hbadge { font-size: 12px !important; padding: 4px 7px !important; }
}

/* ============================================================
   V6: "View All" CITIES FILTER MODAL
   ============================================================ */
.fpv6-cities-modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 2000000;
    align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
}
.fpv6-cities-modal-overlay.show { display: flex !important; }
.fpv6-cities-modal {
    width: 500px; max-width: 100%; max-height: 90vh; background: #FFF !important; border-radius: 10px !important;
    display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.fpv6-cities-modal-header {
    padding: 15px 20px !important; border-bottom: 1px solid #E8E5DF !important; display: flex !important;
    align-items: center !important; gap: 14px !important; flex-shrink: 0 !important;
}
.fpv6-cities-modal-close {
    width: 20px !important; height: 20px !important; background: transparent !important; border: none !important;
    padding: 0 !important; cursor: pointer !important; display: flex !important; align-items: center !important;
    justify-content: center !important; color: #2A2A2A !important; flex-shrink: 0 !important;
}
.fpv6-cities-modal-title { font-family: 'Afacad Flux', sans-serif !important; font-size: 18px !important; font-weight: 500 !important; color: #2A2A2A !important; }
.fpv6-cities-modal-body { padding: 20px !important; overflow-y: auto !important; flex: 1 !important; }
.fpv6-cities-modal-grid { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
.fpv6-modal-city-pill {
    padding: 12px 20px !important; background: #FFF !important; border-radius: 10px !important; border: none !important;
    outline: 1px solid #E8E5DF !important; outline-offset: -1px !important; cursor: pointer !important;
    color: #2A2A2A !important; font-family: 'Afacad Flux', sans-serif !important; font-size: 16px !important; font-weight: 400 !important;
    text-transform: capitalize !important; transition: all 0.15s ease !important;
}
.fpv6-modal-city-pill:hover { background: #2A2A2A !important; color: #FFF !important; outline-color: #2A2A2A !important; }
/* v6.5: pareho nang berde ng rail pills kapag napili */
.fpv6-modal-city-pill.selected,
.fpv6-modal-city-pill.selected:hover { background: #6A8375 !important; color: #FFFFFF !important; outline: 1px solid #6A8375 !important; outline-offset: -1px !important; }
.fpv6-cities-modal-footer {
    padding: 15px 20px !important; border-top: 1px solid #E8E5DF !important; display: flex !important;
    align-items: center !important; justify-content: space-between !important; flex-shrink: 0 !important;
}
.fpv6-cities-modal-clear {
    background: transparent !important; border: none !important; padding: 0 !important; cursor: pointer !important;
    color: #2A2A2A !important; font-family: 'Afacad Flux', sans-serif !important; font-size: 16px !important;
    font-weight: 400 !important; text-transform: capitalize !important;
}
.fpv6-cities-modal-clear:hover { text-decoration: underline !important; }
.fpv6-cities-modal-show {
    padding: 8px 20px !important; background: #5A4F42 !important; border: none !important; border-radius: 50px !important;
    color: #FFF !important; font-family: 'Afacad Flux', sans-serif !important; font-size: 16px !important;
    font-weight: 400 !important; text-transform: capitalize !important; cursor: pointer !important; transition: background 0.2s !important;
}
.fpv6-cities-modal-show:hover { background: #928572 !important; color: #FFFFFF !important; }

@media (max-width: 600px) {
    .fpv6-cities-modal { max-height: 85vh; }
    .fpv6-cities-modal-body { padding: 16px !important; }
}


/* ============================================================================
   v6.6 — MOBILE / TIGHT LAYOUT
   Naka-dulo ang block na ito nang sinasadya: panalo siya sa source order laban sa
   mga naunang media query, kaya hindi na kailangang galawin ang mga ito.

   Target (Figma mobile frame):
       row 1   [ search .................... ] [ filters icon ]
       row 2   [ All ][ Cupertino ][ Buena Park ] →   (swipe, walang arrows)
       tapos   MAP
       tapos   CARDS
   ============================================================================ */

/* ── MAP SA TAAS KAPAG NAKA-STACK ────────────────────────────────────────────
   Ang .fpv6-cards-side ang UNA sa DOM (tama iyon sa desktop: cards sa kaliwa,
   map sa kanan — at iyon din ang tamang reading order para sa SEO at screen
   readers). Pero kapag naging `flex-direction: column` sa ≤1100, sinusunod ng
   flex ang DOM order — kaya nahuhulog ang mapa sa PINAKAILALIM, pagkatapos ng
   lahat ng cards. Doon siya "nawawala."
   Ang `order` ang nagbabaligtad nito nang HINDI ginagalaw ang DOM.            */
@media (max-width: 1100px) {
    .fpv6-section .fpv6-main-layout { flex-direction: column !important; }
    .fpv6-section .fpv6-main-layout .fpv6-map-side {
        order: 1 !important; width: 100% !important;
        position: relative !important; top: 0 !important; min-width: 0 !important;
    }
    .fpv6-section .fpv6-main-layout .fpv6-cards-side { order: 2 !important; width: 100% !important; }
    .fpv6-section .fpv6-main-layout.fpv6-map-expanded .fpv6-map-side { order: 1 !important; }
}

@media (max-width: 767px) {
    /* `display: contents` — nawawala ang box ng .fpv6-filter-left pero nananatili
       ang mga anak niya, at nagiging DIRECT flex items sila ng .fpv6-filter-bar.
       Iyon ang nagpapahintulot na ma-order nang hiwalay ang Filters button at ang
       city rail kahit magkasama sila sa iisang wrapper. Ligtas ito sa filters
       panel: nasa loob siya ng .fpv6-fw na may sariling position:relative. */
    .fpv6-section .fpv6-filter-bar {
        flex-direction: row !important; flex-wrap: wrap !important;
        align-items: center !important; justify-content: flex-start !important;
        gap: 10px !important; padding: 16px 16px 12px 16px !important;
    }
    .fpv6-section .fpv6-filter-left { display: contents !important; }

    .fpv6-section .fpv6-search-right { order: 1 !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; margin: 0 !important; }
    .fpv6-section .fpv6-filter-left > .fpv6-fw { order: 2 !important; flex: 0 0 auto !important; }
    .fpv6-section .fpv6-filter-divider { order: 3 !important; display: none !important; }
    .fpv6-section .fpv6-city-nav { order: 4 !important; flex: 1 1 100% !important; width: 100% !important; }

    .fpv6-section .fpv6-search-wrap { width: 100% !important; max-width: none !important; height: 44px !important; padding: 0 18px !important; }
    .fpv6-section .fpv6-search-input { font-size: 16px !important; }  /* <16px = auto-zoom sa iOS Safari */

    /* FILTERS = ICON LANG. Naka-hide lang ang salita, hindi binura sa markup. */
    .fpv6-section .fpv6-filters-btn {
        width: 44px !important; height: 44px !important; padding: 0 !important;
        gap: 0 !important; justify-content: center !important; flex: 0 0 auto !important;
    }
    .fpv6-section .fpv6-filters-btn > span:not(.fpv6-filters-count) { display: none !important; }
    .fpv6-section .fpv6-filters-btn svg { width: 18px !important; height: 18px !important; }

    /* walang arrows sa touch — swipe na lang ang rail */
    .fpv6-section .fpv6-city-arrow { display: none !important; }
    .fpv6-section .fpv6-city-rail { gap: 8px !important; padding: 2px 0 !important; cursor: auto !important; }
    .fpv6-section .fpv6-city-pill { padding: 9px 16px !important; }

    .fpv6-section .fpv6-main-layout { gap: 20px !important; padding: 0 16px 40px 16px !important; }
    .fpv6-section .fpv6-map-inner { height: 460px !important; }
    .fpv6-section .fpv6-active-tags { margin-top: 0 !important; }
}


/* ============================================================================
   v6.8 — FILTER MODAL (Figma Group 4292)
   Naka-dulo ang block na ito nang sinasadya: panalo siya sa source order laban sa
   mga lumang .fpv6-filters-panel rule, kaya hindi na kailangang burahin ang mga iyon.
   Bumabalik ang lumang dropdown sa pamamagitan ng filter_ui="panel".

   Panel      342 wide (mobile) / 480 (desktop), radius 10, white
   Header     padding 15/20, border-bottom 1px #E8E5DF, X + "Filters" 18/500
   Body       scrollable, padding 20/21, separators 1px #E8E5DF
   Footer     padding 15/20, border-top, "Clear all" + "Show Homes"
   ============================================================================ */

/* ── BACKDROP ─────────────────────────────────────────────────────────────── */
.fpv6-section.fpv6-filter-modal .fpv6-backdrop {
    background: rgba(0, 0, 0, 0.80) !important;
    -webkit-backdrop-filter: blur(2.5px) !important; backdrop-filter: blur(2.5px) !important;
    z-index: 1000000 !important;
}

/* ── PANEL SHELL ──────────────────────────────────────────────────────────── */
.fpv6-section.fpv6-filter-modal .fpv6-filters-panel {
    position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
    transform: translate(-50%, -50%) scale(0.98) !important;
    width: min(480px, calc(100vw - 60px)) !important; min-width: 0 !important; max-width: none !important;
    max-height: min(750px, calc(100vh - 124px)) !important;
    padding: 0 !important; background: #FFFFFF !important;
    border: none !important; border-radius: 10px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28) !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
    z-index: 1000001 !important;
    opacity: 0 !important; visibility: hidden !important;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
}
.fpv6-section.fpv6-filter-modal .fpv6-filters-panel.show {
    opacity: 1 !important; visibility: visible !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* ── HEADER ───────────────────────────────────────────────────────────────── */
.fpv6-section .fpv6-fp-head {
    flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 15px 20px !important; background: #FFFFFF !important;
    border-bottom: 1px solid #E8E5DF !important;
    border-top-left-radius: 10px !important; border-top-right-radius: 10px !important;
}
.fpv6-section .fpv6-fp-close {
    width: 20px !important; height: 20px !important; padding: 0 !important; flex: 0 0 auto !important;
    background: transparent !important; border: none !important; cursor: pointer !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    color: var(--fpv6-dark, #2A2A2A) !important;
}
.fpv6-section .fpv6-fp-close:hover { opacity: .65 !important; }
.fpv6-section .fpv6-fp-title {
    color: var(--fpv6-dark, #2A2A2A) !important; font-family: 'Afacad Flux', sans-serif !important;
    font-size: 18px !important; font-weight: 500 !important; line-height: 1.2 !important;
}

/* ── SCROLLABLE BODY ──────────────────────────────────────────────────────── */
.fpv6-section .fpv6-fp-body {
    flex: 1 1 auto !important; min-height: 0 !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important;
    padding: 20px 21px !important;
}
.fpv6-section .fpv6-fp-body::-webkit-scrollbar { width: 6px; }
.fpv6-section .fpv6-fp-body::-webkit-scrollbar-thumb { background: #E8E5DF; border-radius: 3px; }

/* sunod-sunod na sections, hindi na 3-column grid */
.fpv6-section.fpv6-filter-modal .fpv6-filters-panel-grid {
    display: flex !important; flex-direction: column !important; gap: 20px !important;
}
.fpv6-section .fpv6-fp-sep { width: 100% !important; height: 0 !important; border-top: 1px solid #E8E5DF !important; }
.fpv6-section.fpv6-filter-dropdown .fpv6-fp-sep,
.fpv6-section.fpv6-filter-dropdown .fpv6-fp-head,
.fpv6-section.fpv6-filter-dropdown .fpv6-fp-foot { display: none !important; }
.fpv6-section.fpv6-filter-dropdown .fpv6-fp-body { padding: 0 !important; overflow: visible !important; }

.fpv6-section.fpv6-filter-modal .fpv6-filter-group { gap: 10px !important; }
.fpv6-section.fpv6-filter-modal .fpv6-filter-group-label {
    align-self: stretch !important; color: var(--fpv6-dark, #2A2A2A) !important;
    font-family: 'Afacad Flux', sans-serif !important; font-size: 18px !important;
    font-weight: 500 !important; text-transform: capitalize !important;
}

/* ── STAGE / LOT TYPE = PILLS ─────────────────────────────────────────────────
   Iisa lang ang markup ng dropdown at ng modal. Ang .fpv6-chk checkmark at ang
   .fpv6-dd-div separator ay naka-hide lang; hindi ginalaw ang JS, kaya gumagana
   pa rin ang setupPanelFilter() sa parehong .fpv6-dd-opt[data-value].
   ACTIVE = #FAF9F7 + outline #6A8375 — PANSININ: hindi solid green. Iba ito sa
   city pills sa filter bar, at sinadya iyon ng Figma.                          */
.fpv6-section.fpv6-filter-modal .fpv6-dd-inner {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important;
}
.fpv6-section.fpv6-filter-modal .fpv6-dd-div,
.fpv6-section.fpv6-filter-modal .fpv6-chk { display: none !important; }
.fpv6-section.fpv6-filter-modal .fpv6-dd-opt {
    display: inline-flex !important; flex-direction: row !important; align-items: center !important;
    justify-content: center !important; gap: 10px !important; flex: 0 0 auto !important;
    padding: 12px 20px !important; background: #FFFFFF !important;
    border-radius: 10px !important; outline: 1px solid #E8E5DF !important; outline-offset: -1px !important;
    cursor: pointer !important; transition: all .18s ease !important;
}
.fpv6-section.fpv6-filter-modal .fpv6-dd-opt span {
    color: var(--fpv6-dark, #2A2A2A) !important; font-family: 'Afacad Flux', sans-serif !important;
    font-size: 16px !important; font-weight: 400 !important; text-transform: capitalize !important;
    white-space: nowrap !important;
}
.fpv6-section.fpv6-filter-modal .fpv6-dd-opt:hover { outline-color: #CCC8C0 !important; }
.fpv6-section.fpv6-filter-modal .fpv6-dd-opt:hover span { font-weight: 400 !important; }
.fpv6-section.fpv6-filter-modal .fpv6-dd-opt.selected {
    background: #FAF9F7 !important; outline: 1px solid #6A8375 !important; outline-offset: -1px !important;
}

/* ── RANGE: HISTOGRAM + SLIDER + MIN/MAX BOXES ────────────────────────────── */
.fpv6-section.fpv6-filter-modal .fpv6-range-wrap { padding: 0 !important; width: 100% !important; }
.fpv6-section .fpv6-hist {
    display: flex !important; align-items: flex-end !important; justify-content: space-between !important;
    gap: 2px !important; height: 35px !important; width: 100% !important; margin-bottom: 4px !important;
}
.fpv6-section .fpv6-hist-bar {
    flex: 1 1 0 !important; min-width: 0 !important; max-width: 6.47px !important;
    background: #6A8375 !important;
    border-top-left-radius: 3px !important; border-top-right-radius: 3px !important;
    transition: opacity .15s ease !important;
}
/* labas sa napiling range — ito ang buong punto ng histogram sa ibabaw ng slider */
.fpv6-section .fpv6-hist-bar.is-out { opacity: .28 !important; }

.fpv6-section.fpv6-filter-modal .fpv6-range-track {
    height: 3px !important; background: #E8E5DF !important; border-radius: 100px !important;
    margin: 0 0 18px 0 !important;
}
.fpv6-section.fpv6-filter-modal .fpv6-range-fill { height: 3px !important; background: #6A8375 !important; }
.fpv6-section.fpv6-filter-modal .fpv6-range-thumb {
    width: 24px !important; height: 24px !important; background: #FFFFFF !important;
    border: 1px solid #E8E5DF !important; border-radius: 9999px !important;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.10) !important;
}
.fpv6-section.fpv6-filter-modal .fpv6-range-thumb:hover,
.fpv6-section.fpv6-filter-modal .fpv6-range-thumb.dragging { box-shadow: 2px 2px 10px rgba(0,0,0,0.10), 0 0 0 6px rgba(106,131,117,0.14) !important; }
/* wala ang mga ito sa Figma — naka-hide, hindi binura */
.fpv6-section.fpv6-filter-modal .fpv6-range-bounds { display: none !important; }
.fpv6-section.fpv6-filter-modal .fpv6-thumb-tooltip { display: none !important; }

.fpv6-section.fpv6-filter-modal .fpv6-range-labels {
    display: flex !important; justify-content: space-between !important; align-items: flex-start !important;
    width: 100% !important; margin: 0 !important; gap: 10px !important;
}
.fpv6-section .fpv6-rl-col { display: inline-flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; }
.fpv6-section .fpv6-rl-col.fpv6-rl-max { align-items: flex-end !important; }
.fpv6-section .fpv6-rl-cap {
    color: var(--fpv6-light, #666666) !important; font-family: 'Afacad Flux', sans-serif !important;
    font-size: 16px !important; font-weight: 400 !important;
}
.fpv6-section .fpv6-rl-box {
    display: inline-flex !important; align-items: center !important; gap: 10px !important;
    padding: 8px 15px !important; background: #FFFFFF !important;
    border-radius: 5px !important; outline: 1px solid #E8E5DF !important; outline-offset: -1px !important;
}
.fpv6-section.fpv6-filter-modal .fpv6-range-min-lbl,
.fpv6-section.fpv6-filter-modal .fpv6-range-max-lbl {
    color: var(--fpv6-dark, #2A2A2A) !important; font-family: 'Afacad Flux', sans-serif !important;
    font-size: 16px !important; font-weight: 500 !important; white-space: nowrap !important;
}

/* ── BEDS AND BATHS STEPPER ───────────────────────────────────────────────── */
.fpv6-section .fpv6-step-row {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    width: 100% !important; gap: 10px !important;
}
.fpv6-section .fpv6-step-lbl {
    color: var(--fpv6-dark, #2A2A2A) !important; font-family: 'Afacad Flux', sans-serif !important;
    font-size: 16px !important; font-weight: 400 !important; text-transform: capitalize !important;
}
.fpv6-section .fpv6-step { display: inline-flex !important; align-items: center !important; gap: 14px !important; }
.fpv6-section .fpv6-step-val {
    min-width: 34px !important; text-align: center !important;
    color: var(--fpv6-dark, #2A2A2A) !important; font-family: 'Afacad Flux', sans-serif !important;
    font-size: 16px !important; font-weight: 400 !important;
}
.fpv6-section .fpv6-step-btn {
    width: 26px !important; height: 26px !important; padding: 0 !important; flex: 0 0 auto !important;
    background: #FFFFFF !important; border: none !important;
    outline: 1px solid #E8E5DF !important; outline-offset: -1px !important; border-radius: 50% !important;
    color: var(--fpv6-dark, #2A2A2A) !important; font-size: 16px !important; line-height: 1 !important;
    cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
    transition: all .15s ease !important;
}
.fpv6-section .fpv6-step-btn:hover { background: #FAF9F7 !important; outline-color: #6A8375 !important; }
.fpv6-section .fpv6-step-btn:disabled,
.fpv6-section .fpv6-step-btn.is-disabled { color: #CCC8C0 !important; background: #FFFFFF !important; outline-color: #E8E5DF !important; cursor: default !important; pointer-events: none !important; }
/* lumang grid, nasa markup pa rin — naka-hide lang sa modal */
.fpv6-section.fpv6-filter-modal .fpv6-bb-legacy { display: none !important; }
.fpv6-section.fpv6-filter-dropdown .fpv6-step-row { display: none !important; }

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.fpv6-section .fpv6-fp-foot {
    flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 15px 20px !important; background: #FFFFFF !important;
    border-top: 1px solid #E8E5DF !important;
    border-bottom-left-radius: 10px !important; border-bottom-right-radius: 10px !important;
}
.fpv6-section .fpv6-fp-clear {
    background: transparent !important; border: none !important; padding: 0 !important; cursor: pointer !important;
    color: rgba(42, 42, 42, 0.40) !important; font-family: 'Afacad Flux', sans-serif !important;
    font-size: 16px !important; font-weight: 400 !important; text-transform: capitalize !important;
}
.fpv6-section .fpv6-fp-clear:hover { color: rgba(42, 42, 42, 0.70) !important; }
.fpv6-section .fpv6-fp-show {
    padding: 8px 20px !important; background: var(--fpv6-primary, #5A4F42) !important;
    border: none !important; border-radius: 10px !important; cursor: pointer !important;
    color: #FFFFFF !important; font-family: 'Afacad Flux', sans-serif !important;
    font-size: 16px !important; font-weight: 400 !important; text-transform: capitalize !important;
    transition: background .18s ease !important;
}
.fpv6-section .fpv6-fp-show:hover { background: #928572 !important; color: #FFFFFF !important; }

/* ── MOBILE: 342 wide, 30px margins, 62px mula sa taas (Figma) ─────────────── */
@media (max-width: 767px) {
    .fpv6-section.fpv6-filter-modal .fpv6-filters-panel {
        position: fixed !important; top: 50% !important; left: 50% !important; bottom: auto !important; right: auto !important;
        width: min(342px, calc(100vw - 60px)) !important;
        max-height: min(750px, calc(100vh - 124px)) !important;
        border-radius: 10px !important;
        transform: translate(-50%, -50%) scale(0.98) !important;
    }
    .fpv6-section.fpv6-filter-modal .fpv6-filters-panel.show { transform: translate(-50%, -50%) scale(1) !important; }
    .fpv6-section .fpv6-fp-body { padding: 20px 21px !important; }
    .fpv6-section.fpv6-filter-modal .fpv6-dd-opt { padding: 10px 16px !important; }
}