/**
 * Filtered Properties V5 - COMPLETE CSS
 * Version: 5.2 - March 2026
 * Standalone: fpv5- prefix
 * 
 * DESIGN:
 * - Overlay cards (588px wide Figma, 2-col grid)
 * - 600px map, dark rounded property markers
 * - Dual-handle range sliders for Price & Lot Size
 * - Active filter tags row
 * - Unified badge style (white bg, outline pill)
 * 
 * CHANGELOG v5.2:
 * - Community cards: hover/tap shows dark overlay + "View Community" button (centered)
 * - Only the "View Community" button is clickable (overlay bg is non-clickable)
 * - Hover on another card removes overlay from previous card
 * - Mobile: tap to toggle overlay (no hover on touch devices)
 * 
 * CHANGELOG v5.1:
 * - Mobile badges now stack vertically (column) aligned right
 */

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes fpv5FadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fpv5Pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes fpv5SlideIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ============================================================
   SECTION
   ============================================================ */
section.fpv5-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.fpv5-section *, section.fpv5-section *::before, section.fpv5-section *::after { box-sizing: border-box !important; }

/* ============================================================
   HEADER
   ============================================================ */
.fpv5-header-wrap {
    max-width: 1200px !important; width: 100% !important; margin: 0 auto !important;
    padding: 80px 0 30px 0 !important;
}
@media (max-width: 1300px) { .fpv5-header-wrap { padding: 80px 50px 30px 50px !important; } }
.fpv5-header { max-width: 600px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.fpv5-title { color: #2A2A2A !important; font-size: 36px !important; font-family: 'Sofia Pro', 'Afacad Flux', sans-serif !important; font-weight: 400 !important; line-height: 1.2 !important; margin: 0 !important; }
.fpv5-subtitle { color: #666 !important; font-size: 18px !important; font-weight: 300 !important; line-height: 1.5 !important; margin: 0 !important; }

/* ============================================================
   MAP - 600px height (Figma)
   ============================================================ */
.fpv5-map-container { max-width: 1200px !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; }
@media (max-width: 1300px) { .fpv5-map-container { padding: 0 50px !important; max-width: 100% !important; } }
.fpv5-map-inner { width: 100% !important; height: 600px !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; }
.fpv5-leaflet-map { width: 100% !important; height: 100% !important; pointer-events: auto !important; }

/* Map controls */
.fpv5-map-toggle { position: absolute !important; top: 14px !important; left: 9px !important; display: flex !important; z-index: 1000 !important; }
.fpv5-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; }
.fpv5-map-toggle-btn:hover { background: white !important; color: #565656 !important; }
.fpv5-map-toggle-btn:first-child { width: 64px !important; border-radius: 2px 30px 30px 2px !important; }
.fpv5-map-toggle-btn:last-child { width: 96px !important; border-radius: 30px 2px 2px 30px !important; }
.fpv5-map-toggle-btn.active { font-weight: 500 !important; color: black !important; background: white !important; }
.fpv5-map-toggle-btn.active:hover { background: white !important; color: black !important; }
.fpv5-map-fullscreen { position: absolute !important; top: 14px !important; right: 10px !important; width: 40px !important; height: 40px !important; background: white !important; border: 1px solid #d5d5d5 !important; border-radius: 4px !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; }
.fpv5-map-zoom { position: absolute !important; bottom: 66px !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; }
.fpv5-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; }
.fpv5-zoom-btn:hover { background: #f5f5f5 !important; }
.fpv5-zoom-sep { height: 1px !important; background: #e0e0e0 !important; }
.fpv5-map-key-btn { position: absolute !important; bottom: 10px !important; left: 12px !important; width: 96px !important; height: 44px !important; background: #FFF !important; border: 1px solid #2A2A2A !important; border-radius: 50px !important; font-size: 16px !important; font-family: 'Afacad Flux', sans-serif !important; color: #2A2A2A !important; cursor: pointer !important; z-index: 1000 !important; }
.fpv5-map-key-btn:hover { background: #F5F3F0 !important; }

/* Fullscreen */
.fpv5-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; }

/* ============================================================
   MAP MARKERS - DARK ROUNDED (Figma spec)
   ============================================================ */
.fpv5-city-marker { background: transparent !important; }
.fpv5-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; }
.fpv5-cluster-dot:hover { transform: scale(1.1) !important; }

.fpv5-prop-marker { background: transparent !important; }

/* Pin wrapper: stacks house circle + location dot vertically */
.fpv5-prop-pin { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0px !important; cursor: pointer !important; transition: transform 0.2s ease !important; }
.fpv5-prop-pin:hover { transform: scale(1.1) !important; }
.fpv5-prop-pin.selected { transform: scale(1.25) !important; animation: fpv5Pulse 1s ease infinite !important; }

/* House icon circle */
.fpv5-prop-dot { width: 30px !important; height: 30px !important; background: #2A2A2A !important; border: 2px solid #666 !important; border-radius: 15px !important; box-shadow: 3px 5px 6px 2px rgba(0,0,0,0.40) !important; display: flex !important; justify-content: center !important; align-items: center !important; padding: 7px !important; transition: all 0.2s ease !important; }
.fpv5-prop-dot svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }
.fpv5-prop-pin.selected .fpv5-prop-dot { background: #5A4F42 !important; border-color: #fff !important; box-shadow: 0 0 0 4px rgba(90,79,66,0.3), 3px 5px 6px 2px rgba(0,0,0,0.40) !important; }

/* Location dot (8px, below house circle) */
.fpv5-loc-dot { width: 8px !important; height: 8px !important; display: block !important; margin-top: -1px !important; flex-shrink: 0 !important; }

/* Popup */
.fpv5-popup .leaflet-popup-content-wrapper { border-radius: 8px !important; padding: 0 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important; }
.fpv5-popup .leaflet-popup-content { margin: 12px 16px !important; font-family: 'Afacad Flux', sans-serif !important; line-height: 1.4 !important; }
.fpv5-popup-name { font-size: 14px !important; font-weight: 500 !important; color: #2A2A2A !important; }
.fpv5-popup-price { font-size: 13px !important; color: #6A8375 !important; margin-top: 4px !important; }

/* ============================================================
   KEY MODAL
   ============================================================ */
.fpv5-key-modal { position: absolute !important; bottom: 64px !important; left: 12px !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; }
.fpv5-key-modal.show { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; pointer-events: auto !important; }
.fpv5-key-content { padding: 24px !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }
.fpv5-key-content h4 { margin: 0 0 4px 0 !important; font-size: 18px !important; font-weight: 500 !important; color: #2A2A2A !important; }
.fpv5-key-item { display: flex !important; align-items: center !important; gap: 14px !important; margin-bottom: 14px !important; }
.fpv5-key-item:last-of-type { margin-bottom: 0 !important; }
.fpv5-key-dot { border-radius: 50% !important; flex-shrink: 0 !important; }
.fpv5-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; }
.fpv5-key-dot.prop { width: 24px !important; height: 24px !important; background: #2A2A2A !important; border: 2px solid #666 !important; border-radius: 15px !important; box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important; }
.fpv5-key-dot.sel { width: 24px !important; height: 24px !important; background: #5A4F42 !important; border: 2px solid white !important; box-shadow: 0 0 0 3px rgba(90,79,66,0.3), 0 2px 6px rgba(0,0,0,0.25) !important; }
.fpv5-key-content span { font-size: 15px !important; color: #2A2A2A !important; }
.fpv5-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; }
.fpv5-key-close:hover { background: #F5F3F0 !important; }

/* ============================================================
   FULLSCREEN PREVIEW (lower right)
   ============================================================ */
.fpv5-fs-preview { position: absolute !important; bottom: 20px !important; right: 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; }
.fpv5-fs-preview.show { opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; pointer-events: auto !important; animation: fpv5SlideIn 0.3s ease !important; }
.fpv5-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; }
.fpv5-fs-img { width: 100% !important; height: 140px !important; overflow: hidden !important; background: #f5f3f0 !important; }
.fpv5-fs-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.fpv5-fs-body { padding: 16px !important; }
.fpv5-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; }
.fpv5-fs-badge span { font-size: 12px !important; color: #2A2A2A !important; }
.fpv5-fs-name { font-size: 16px !important; font-weight: 500 !important; color: #2A2A2A !important; margin: 0 0 4px !important; }
.fpv5-fs-addr { font-size: 13px !important; color: #666 !important; margin: 0 0 12px !important; }
.fpv5-fs-specs { display: flex !important; justify-content: space-between !important; padding-top: 12px !important; border-top: 1px solid #E8E5DF !important; margin-bottom: 12px !important; }
.fpv5-fs-spec { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; }
.fpv5-fs-spec-lbl { font-size: 9px !important; color: #666 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
.fpv5-fs-spec-val { font-size: 14px !important; color: #2A2A2A !important; font-weight: 500 !important; }
.fpv5-fs-btn { display: block !important; width: 100% !important; padding: 12px !important; background: #5A4F42 !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; }
.fpv5-fs-btn:hover { background: #928572 !important; color: #FFF !important; text-decoration: none !important; }

/* ============================================================
   FILTERS ROW
   ============================================================ */
.fpv5-filters-row { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 20px !important; max-width: 1200px !important; width: 100% !important; margin: 30px auto !important; padding: 0 !important; }
@media (max-width: 1300px) { .fpv5-filters-row { padding: 0 50px !important; max-width: 100% !important; } }
.fpv5-filters-left { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; flex: 1 !important; }
.fpv5-search-right { flex-shrink: 0 !important; }
.fpv5-search-wrap { display: flex !important; align-items: center !important; width: 320px !important; padding: 6px 6px 6px 20px !important; background: #FFF !important; border-radius: 50px !important; border: 1px solid #CCC8C0 !important; }
.fpv5-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; }
.fpv5-search-input::placeholder { color: #A3A3A3 !important; }
.fpv5-search-btn { width: 40px !important; height: 40px !important; min-width: 40px !important; background: #5A4F42 !important; border: none !important; border-radius: 32px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: background 0.3s !important; }
.fpv5-search-btn:hover { background: #928572 !important; }

/* Filter pills */
.fpv5-fw { position: relative !important; display: inline-block !important; }
button.fpv5-pill, .fpv5-pill { padding: 7px 12px 7px 16px !important; background: white !important; border-radius: 50px !important; border: none !important; outline: 1px #2A2A2A solid !important; outline-offset: -1px !important; display: flex !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; transition: all 0.3s ease !important; white-space: nowrap !important; min-height: 32px !important; line-height: 1 !important; }
.fpv5-pill:hover, .fpv5-pill.active { background: #5A4F42 !important; outline-color: #5A4F42 !important; }
.fpv5-pill:hover .fpv5-pill-lbl, .fpv5-pill.active .fpv5-pill-lbl { color: #FFF !important; }
.fpv5-pill:hover .fpv5-pill-arrow::after, .fpv5-pill.active .fpv5-pill-arrow::after { border-top-color: #FFF !important; }
.fpv5-pill-lbl { color: #2A2A2A !important; font-size: 14px !important; font-family: 'Afacad Flux', sans-serif !important; font-weight: 400 !important; transition: color 0.3s !important; }
.fpv5-pill-arrow { width: 14px !important; height: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.fpv5-pill-arrow::after { content: '' !important; border-left: 3px solid transparent !important; border-right: 3px solid transparent !important; border-top: 3px solid #2A2A2A !important; transition: border-top-color 0.3s !important; }

/* ============================================================
   DROPDOWNS
   ============================================================ */
.fpv5-dd { position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; background: #FFF !important; border-radius: 5px !important; border: 1px solid #E8E5DF !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; padding: 15px !important; min-width: 165px !important; z-index: 99999 !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(-10px) !important; transition: all 0.2s ease !important; }
.fpv5-dd.show { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
.fpv5-dd-inner { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.fpv5-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; }
.fpv5-dd-opt:hover span { font-weight: 500 !important; }
.fpv5-chk { width: 12px !important; height: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.fpv5-chk-mark { width: 10px !important; height: 7px !important; background: #5A4F42 !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; }
.fpv5-dd-opt.selected .fpv5-chk-mark { opacity: 1 !important; }
.fpv5-dd-opt span { color: #5A4F42 !important; font-size: 14px !important; font-family: 'Afacad Flux', sans-serif !important; font-weight: 400 !important; }
.fpv5-dd-div { width: 100% !important; height: 1px !important; background: #E8E5DF !important; margin: 2px 0 !important; }

/* Beds/Baths */
.fpv5-dd-bb { min-width: 340px !important; }
.fpv5-bb-container { display: flex !important; flex-direction: column !important; gap: 20px !important; }
.fpv5-bb-group { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.fpv5-bb-group label { color: #5A4F42 !important; font-size: 14px !important; }
.fpv5-bb-grid { display: flex !important; gap: 5px !important; }
.fpv5-bb-opt { min-width: 55px !important; padding: 10px 16px !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; }
.fpv5-bb-opt:hover { border-color: #5A4F42 !important; color: #5A4F42 !important; }
.fpv5-bb-opt.active { background: #5A4F42 !important; border-color: #5A4F42 !important; color: #FFF !important; }

/* ============================================================
   RANGE SLIDERS (Price & Lot Size)
   ============================================================ */
.fpv5-dd-price, .fpv5-dd-lotsize { min-width: 340px !important; }
.fpv5-range-wrap { padding: 5px 0 !important; }
.fpv5-range-labels { display: flex !important; justify-content: space-between !important; margin-bottom: 16px !important; }
.fpv5-range-labels span { font-size: 14px !important; color: #666 !important; font-family: 'Afacad Flux', sans-serif !important; }
.fpv5-range-track { position: relative !important; height: 4px !important; background: #E8E5DF !important; border-radius: 100px !important; margin: 20px 0 !important; cursor: pointer !important; }
.fpv5-range-fill { position: absolute !important; top: 0 !important; height: 4px !important; background: #5A4F42 !important; border-radius: 100px !important; pointer-events: none !important; }
.fpv5-range-thumb { position: absolute !important; top: 50% !important; width: 20px !important; height: 20px !important; background: #FFF !important; border: 2px solid #5A4F42 !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; }
.fpv5-range-thumb:hover, .fpv5-range-thumb.dragging { box-shadow: 0 0 0 6px rgba(90,79,66,0.15) !important; cursor: grabbing !important; }
.fpv5-thumb-tooltip { position: absolute !important; bottom: calc(100% + 8px) !important; left: 50% !important; transform: translateX(-50%) !important; background: #5A4F42 !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; }
.fpv5-range-thumb:hover .fpv5-thumb-tooltip,
.fpv5-range-thumb.dragging .fpv5-thumb-tooltip { opacity: 1 !important; }
.fpv5-range-bounds { display: flex !important; justify-content: space-between !important; margin-top: 8px !important; }
.fpv5-range-bounds span { font-size: 13px !important; color: #999 !important; font-family: 'Afacad Flux', sans-serif !important; }

/* ============================================================
   ACTIVE FILTER TAGS
   ============================================================ */
.fpv5-active-tags { display: none; flex-wrap: wrap !important; gap: 8px !important; max-width: 1200px !important; width: 100% !important; margin: -10px auto 20px auto !important; padding: 0 !important; }
@media (max-width: 1300px) { .fpv5-active-tags { padding: 0 50px !important; max-width: 100% !important; } }
.fpv5-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: #5A4F42 !important; cursor: pointer !important; transition: all 0.2s !important; white-space: nowrap !important; }
.fpv5-tag:hover { background: #E8E5DF !important; }

/* ============================================================
   PROPERTIES GRID - 2 columns, overlay cards
   ============================================================ */
.fpv5-props-wrap { max-width: 1200px !important; width: 100% !important; margin: 0 auto !important; padding: 0 0 80px 0 !important; overflow: hidden !important; }
@media (max-width: 1300px) { .fpv5-props-wrap { padding: 0 50px 80px 50px !important; max-width: 100% !important; } }
.fpv5-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; width: 100% !important; }
.fpv5-no-results { grid-column: 1 / -1 !important; padding: 60px 20px !important; text-align: center !important; }
.fpv5-no-results p { color: #666 !important; font-size: 18px !important; }

/* ============================================================
   OVERLAY CARD
   ============================================================ */
.fpv5-card { display: flex !important; flex-direction: column !important; overflow: hidden !important; transition: transform 0.3s, box-shadow 0.3s !important; }
.fpv5-card:hover { transform: translateY(-2px) !important; }
.fpv5-card.highlighted { box-shadow: 0 0 0 3px #5A4F42, 0 8px 30px rgba(0,0,0,0.15) !important; }
.fpv5-card-link { display: flex !important; flex-direction: column !important; text-decoration: none !important; color: inherit !important; width: 100% !important; height: 100% !important; }
.fpv5-card-bg { width: 100% !important; height: 320px !important; background-size: cover !important; background-position: center !important; position: relative !important; }
.fpv5-card-no-img { background: #3a3a3a !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.fpv5-card-overlay { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 28px !important; }
.fpv5-grad-normal { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.70) 100%) !important; }
.fpv5-grad-coming { background: linear-gradient(to bottom, rgba(120,113,108,0.30) 0%, rgba(0,0,0,0.65) 100%) !important; }

/* Badges - top right, unified white pills */
.fpv5-card-top { display: flex !important; justify-content: flex-end !important; align-items: flex-start !important; }
.fpv5-card-badges { display: flex !important; gap: 5px !important; flex-wrap: wrap !important; justify-content: flex-end !important; }
.fpv5-card-badge { padding: 5px 14px !important; background: #FFFFFF !important; border-radius: 50px !important; border: 1px solid rgba(204,200,192,0.8) !important; font-size: 14px !important; font-family: 'Afacad Flux', sans-serif !important; font-weight: 400 !important; color: #2A2A2A !important; white-space: nowrap !important; text-transform: capitalize !important; }
.fpv5-card-badge-alt { background: rgba(255,255,255,0.50) !important; }

/* Coming soon center icon */
.fpv5-card-center-icon { display: flex !important; align-items: center !important; justify-content: center !important; flex: 1 !important; }
.fpv5-card-center-icon .material-symbols-outlined { font-size: 28px !important; color: #FFF !important; }

/* Bottom info */
.fpv5-card-bottom { display: flex !important; justify-content: space-between !important; align-items: flex-end !important; gap: 30px !important; }
.fpv5-card-info-left { display: flex !important; flex-direction: column !important; gap: 5px !important; max-width: 320px !important; }
.fpv5-card-name { color: #FFF !important; font-size: 18px !important; font-family: 'Afacad Flux', sans-serif !important; font-weight: 400 !important; text-transform: capitalize !important; line-height: 1.3 !important; }
.fpv5-card-price { color: #FFF !important; font-size: 18px !important; font-family: 'Afacad Flux', sans-serif !important; font-weight: 400 !important; text-transform: capitalize !important; }
.fpv5-card-info-right { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 5px !important; }
.fpv5-card-spec { color: #FFF !important; font-size: 16px !important; font-family: 'Afacad Flux', sans-serif !important; font-weight: 300 !important; text-transform: capitalize !important; text-align: right !important; white-space: nowrap !important; }

/* Beds/Baths inline on desktop */
.fpv5-spec-bb { display: flex !important; gap: 16px !important; justify-content: flex-end !important; }
.fpv5-spec-bb span { white-space: nowrap !important; }

/* ============================================================
   COMMUNITY CARD HOVER OVERLAY (v5.2)
   - Dark semi-transparent overlay (#0000004D = rgba(0,0,0,0.30))
   - Centered "View Community" button
   - Overlay itself is pointer-events: none, button is clickable
   - Transition: opacity for smooth fade in/out
   ============================================================ */
.fpv5-community-hover-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.30) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
    z-index: 5 !important;
}
/* Active state: shown on hover (desktop) or tap (mobile) */
.fpv5-card.fpv5-community-active .fpv5-community-hover-overlay {
    opacity: 1 !important;
    pointer-events: auto !important; /* allow btn clicks */
}
/* The "View Community" button itself */
.fpv5-view-community-btn {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 25px !important;
    background: #FFFFFF !important;
    border-radius: 50px !important;
    border: 0.5px solid #2A2A2A !important;
    font-size: 18px !important;
    font-family: 'Afacad Flux', sans-serif !important;
    font-weight: 400 !important;
    color: #2A2A2A !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    /* Only the button itself captures pointer events */
    pointer-events: auto !important;
    position: relative !important;
    z-index: 6 !important;
}
.fpv5-view-community-btn:hover {
    background: #5A4F42 !important;
    color: #FFFFFF !important;
    border-color: #5A4F42 !important;
    text-decoration: none !important;
}
/* The clickable wrapper area BEHIND the button is not clickable */
.fpv5-community-hover-overlay-bg {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important; /* non-clickable background */
    z-index: 5 !important;
}

/* Desktop: show overlay on card hover */
@media (hover: hover) and (pointer: fine) {
    .fpv5-card.fpv5-is-community:hover .fpv5-community-hover-overlay {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    /* When hovering a different community card, deactivate previously tapped one */
    .fpv5-card.fpv5-is-community:hover ~ .fpv5-card.fpv5-community-active .fpv5-community-hover-overlay,
    .fpv5-card.fpv5-is-community:hover + .fpv5-card.fpv5-community-active .fpv5-community-hover-overlay {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ============================================================
   PAGINATION
   ============================================================ */
.fpv5-pagination { display: flex !important; justify-content: center !important; align-items: center !important; gap: 10px !important; margin-top: 60px !important; }
.fpv5-pag-prev, .fpv5-pag-next { width: 40px !important; height: 40px !important; background: #FFF !important; border: 1px solid #CCC8C0 !important; display: flex !important; justify-content: center !important; align-items: center !important; cursor: pointer !important; color: #5A4F42 !important; font-size: 18px !important; }
.fpv5-pag-prev:hover:not(:disabled), .fpv5-pag-next:hover:not(:disabled) { border-color: #5A4F42 !important; }
.fpv5-pag-prev:disabled, .fpv5-pag-next:disabled { opacity: 0.3 !important; cursor: not-allowed !important; }
.fpv5-pag-nums { display: flex !important; gap: 10px !important; }
.fpv5-pnum { width: 40px !important; height: 40px !important; background: #FFF !important; border: 1px solid #CCC8C0 !important; display: flex !important; justify-content: center !important; align-items: center !important; cursor: pointer !important; color: #5A4F42 !important; font-size: 18px !important; font-family: 'Afacad Flux', sans-serif !important; }
.fpv5-pnum:hover { border-color: #5A4F42 !important; }
.fpv5-pnum.active { background: #5A4F42 !important; border-color: #5A4F42 !important; color: #FFF !important; }
.fpv5-ellip { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; color: #766C61; font-size: 14px; }

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

/* ============================================================
   TABLET (1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .fpv5-header-wrap, .fpv5-map-container, .fpv5-filters-row, .fpv5-props-wrap, .fpv5-active-tags { padding-left: 40px !important; padding-right: 40px !important; }
    .fpv5-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
    .fpv5-filters-row { flex-wrap: wrap !important; }
    .fpv5-search-right { width: 100% !important; margin-top: 10px !important; }
    .fpv5-search-wrap { width: 100% !important; max-width: 400px !important; }
    .fpv5-card-bg { height: 280px !important; }
}

/* ============================================================
   MOBILE (767px)
   ============================================================ */
@media (max-width: 767px) {
    .fpv5-header-wrap { padding: 40px 16px 20px 16px !important; }
    .fpv5-title { font-size: 28px !important; }
    .fpv5-subtitle { font-size: 16px !important; }
    
    /* Map: full width with padding, 400px height */
    .fpv5-map-container { padding: 0 16px !important; margin-bottom: 30px !important; }
    .fpv5-map-inner { height: 400px !important; max-width: none !important; width: 100% !important; margin: 0 !important; }
    
    /* Search + Filters column: search on top, filters below, left aligned */
    .fpv5-filters-row { padding: 0 16px !important; margin: 0 auto !important; flex-direction: column-reverse !important; align-items: flex-start !important; gap: 30px !important; }
    .fpv5-search-right { width: 100% !important; max-width: none !important; margin: 0 !important; order: 2 !important; }
    .fpv5-search-wrap { max-width: none !important; width: 100% !important; margin: 0 !important; }
    
    /* Filter pills: 3 per row, auto-width, left aligned */
    .fpv5-filters-left { 
        display: grid !important; 
        grid-template-columns: repeat(3, auto) !important; 
        gap: 10px !important; 
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        justify-content: start !important;
        order: 1 !important;
    }
    .fpv5-fw { position: static !important; width: auto !important; }
    .fpv5-pill { padding: 10px 16px !important; min-height: 40px !important; width: auto !important; justify-content: center !important; }
    .fpv5-pill-lbl { font-size: 15px !important; }
    
    /* Active tags + Cards wrapper */
    .fpv5-active-tags { padding: 0 16px !important; margin: 20px auto 0 auto !important; max-width: none !important; }
    .fpv5-props-wrap { padding: 0 16px 40px 16px !important; margin-top: 50px !important; }
    
    /* Cards: full width within padding, 350px height */
    .fpv5-grid { grid-template-columns: 1fr !important; gap: 24px !important; max-width: none !important; margin: 0 !important; }
    .fpv5-card-bg { height: 350px !important; }
    .fpv5-card-overlay { padding: 14px 14px 20px 14px !important; }
    
    /* ============================================================
       MOBILE BADGES: Stacked vertically, aligned right
       v5.1 FIX - was horizontal, now column + right-aligned
       ============================================================ */
    .fpv5-card-badges {
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 5px !important;
    }
    
    /* Bottom info: SIDE BY SIDE on mobile (matching Figma) */
    .fpv5-card-bottom { flex-direction: row !important; align-items: flex-end !important; justify-content: space-between !important; gap: 10px !important; }
    .fpv5-card-info-left { max-width: 55% !important; }
    .fpv5-card-info-right { align-items: flex-end !important; }
    .fpv5-card-name { font-size: 16px !important; }
    .fpv5-card-price { font-size: 16px !important; }
    .fpv5-card-spec { text-align: right !important; white-space: nowrap !important; font-size: 14px !important; }
    /* Beds/Baths: stacked vertically on mobile, aligned right */
    .fpv5-spec-bb { flex-direction: column !important; gap: 5px !important; align-items: flex-end !important; justify-content: flex-end !important; }
    
    /* Mobile community overlay: same styles apply via JS toggle */
    .fpv5-view-community-btn {
        font-size: 16px !important;
        padding: 10px 22px !important;
    }
    
    /* Bottom sheet dropdowns */
    .fpv5-dd { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !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; }
    .fpv5-dd.show { transform: translateY(0) !important; visibility: visible !important; }
    .fpv5-dd-opt { padding: 12px 0 !important; }
    .fpv5-dd-opt span { font-size: 16px !important; }
    .fpv5-bb-grid { flex-wrap: wrap !important; gap: 8px !important; }
    .fpv5-bb-opt { flex: 1 1 auto !important; padding: 12px 14px !important; font-size: 16px !important; }
    
    .fpv5-pagination { margin-top: 30px !important; gap: 8px !important; }
    .fpv5-pnum, .fpv5-pag-prev, .fpv5-pag-next { width: 36px !important; height: 36px !important; font-size: 14px !important; }
    
    .fpv5-fs-preview { width: calc(100% - 32px) !important; max-width: 320px !important; bottom: 70px !important; right: 16px !important; }
    .fpv5-key-modal { left: 12px !important; right: 12px !important; bottom: 70px !important; width: auto !important; min-width: auto !important; }
}

/* ============================================================
   SMALL MOBILE (480px)
   ============================================================ */
@media (max-width: 480px) {
    .fpv5-header-wrap { padding: 30px 12px 16px 12px !important; }
    .fpv5-map-container, .fpv5-filters-row, .fpv5-props-wrap, .fpv5-active-tags { padding-left: 12px !important; padding-right: 12px !important; }
    .fpv5-title { font-size: 24px !important; }
    .fpv5-subtitle { font-size: 14px !important; }
    .fpv5-map-inner { height: 350px !important; }
    .fpv5-card-bg { height: 350px !important; }
    .fpv5-card-overlay { padding: 16px !important; }
    .fpv5-card-name { font-size: 16px !important; }
    .fpv5-card-price { font-size: 16px !important; }
    .fpv5-card-spec { font-size: 14px !important; }
    .fpv5-card-badge { font-size: 12px !important; padding: 4px 10px !important; }
    .fpv5-pill { padding: 6px 8px !important; min-height: 34px !important; }
    .fpv5-pill-lbl { font-size: 12px !important; }
    .fpv5-filters-left { gap: 6px !important; }
}

/* ============================================================
   375px / 320px
   ============================================================ */
@media (max-width: 375px) {
    .fpv5-header-wrap { padding: 24px 10px 12px 10px !important; }
    .fpv5-map-container, .fpv5-filters-row, .fpv5-props-wrap, .fpv5-active-tags { padding-left: 10px !important; padding-right: 10px !important; }
    .fpv5-title { font-size: 22px !important; }
    .fpv5-card-bg { height: 280px !important; }
}
@media (max-width: 320px) {
    .fpv5-header-wrap { padding: 20px 8px 10px 8px !important; }
    .fpv5-map-container, .fpv5-filters-row, .fpv5-props-wrap, .fpv5-active-tags { padding-left: 8px !important; padding-right: 8px !important; }
    .fpv5-title { font-size: 20px !important; }
    .fpv5-card-bg { height: 260px !important; }
    .fpv5-pnum, .fpv5-pag-prev, .fpv5-pag-next { width: 32px !important; height: 32px !important; font-size: 12px !important; }
}