/* =========================================================
   Listing layout — default view shows a 2-column property grid
   with a slim filter / map sidebar. `?view=map` flips it so the
   map gets the lion's share and the property cards collapse to
   a single-column scrolling rail. CSS keys off the utility
   classes already on the markup so templates stay unchanged.

   Width + grid changes are transitioned so toggling between
   filter / map / drawn-region states animates smoothly instead
   of snapping.
   ========================================================= */
@media (min-width: 1024px) {
    body.property-listing-page .lg\:w-2\/3,
    body.property-listing-page .lg\:w-1\/3 {
        transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }
    body.property-listing-page #propertiesGrid {
        transition: grid-template-columns 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }
    body.property-listing-page .property-map {
        transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Default (filter) view — properties get more room, filter is slimmer. */
    body.property-listing-page .lg\:w-2\/3 { width: 72% !important; }
    body.property-listing-page .lg\:w-1\/3 { width: 28% !important; }
    body.property-listing-page #propertiesGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Map view — map is the centerpiece, cards collapse to a single rail. */
    body.view-map-active .lg\:w-2\/3 { width: 30% !important; }
    body.view-map-active .lg\:w-1\/3 { width: 70% !important; }
    body.view-map-active #propertiesGrid {
        grid-template-columns: 1fr !important;
    }
    body.view-map-active .property-map { height: 760px; }

    /* Map view + active polygon — the user has carved out a region and a
       query is running. We shrink the map to make the most of the width
       for the matching cards, expand the property rail back to a 2-col
       grid (so users see more results), and collapse the map height.
       This applies whether the user clicked the compact toggle or it
       happened automatically because they drew an area. */
    body.view-map-active.polygon-active .lg\:w-2\/3,
    body.view-map-active.map-compact      .lg\:w-2\/3 { width: 55% !important; }
    body.view-map-active.polygon-active .lg\:w-1\/3,
    body.view-map-active.map-compact      .lg\:w-1\/3 { width: 45% !important; }
    body.view-map-active.polygon-active #propertiesGrid,
    body.view-map-active.map-compact      #propertiesGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    body.view-map-active.polygon-active .property-map,
    body.view-map-active.map-compact      .property-map { height: 540px; }
}

/* Compact toggle button — pinned to the inside-right edge of the map
   frame so it sits between the map and the property rail. In RTL the
   map sits on the physical LEFT, so the toggle goes on the
   inset-inline-end (= physical right) side. The chevron rotates 180°
   when the user has the map compacted, doubling as a visual
   "expand" hint. */
.property-map-frame { position: relative; }
.map-compact-toggle {
    position: absolute;
    top: 50%;
    inset-inline-end: -16px;
    transform: translateY(-50%);
    width: 32px;
    height: 56px;
    border-radius: 999px;
    border: 1px solid var(--ds-line, #E5E7EB);
    background: #fff;
    color: var(--ds-brand, #00A693);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
    z-index: 1100;
    transition: background 0.2s ease, color 0.2s ease, transform 0.3s ease;
}
.map-compact-toggle:hover {
    background: var(--ds-brand, #00A693);
    color: #fff;
}
.map-compact-toggle i {
    transition: transform 0.3s ease;
    font-size: 13px;
}
body.map-compact .map-compact-toggle i,
body.polygon-active .map-compact-toggle i {
    transform: rotate(180deg);
}
/* Hide the toggle outside of map view so it doesn't float over the
   filter sidebar. */
body:not(.view-map-active) .map-compact-toggle { display: none; }

/* =========================================================
   Filter sidebar inputs — base utility classes set width:100%
   but inherited form resets, RTL text-align, and missing
   box-sizing made the متراژ / سال ساخت / طبقه paired inputs
   render at inconsistent widths and overlap their labels.
   Normalise here so every filter field looks the same.
   ========================================================= */
.property-filters .filter-section {
    margin-bottom: 1.25rem;
}
.property-filters .filter-section > .form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--ds-text-sm);
    font-weight: 700;
    color: var(--ds-ink, #0F172A);
    margin-bottom: 0.5rem;
}
.property-filters input[type="text"],
.property-filters input[type="number"],
.property-filters input[type="email"],
.property-filters input[type="tel"],
.property-filters select,
.property-filters textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--ds-line, #E5E7EB);
    border-radius: 10px;
    font-size: var(--ds-text-sm);
    font-family: var(--ds-font);
    color: var(--ds-ink, #0F172A);
    background: var(--ds-surface, #fff);
    direction: rtl;
    text-align: right;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.property-filters input::placeholder { color: var(--ds-muted, #94A3B8); }
.property-filters input:focus,
.property-filters select:focus,
.property-filters textarea:focus {
    outline: none;
    border-color: var(--ds-brand, #00A693);
    box-shadow: 0 0 0 3px rgba(0, 166, 147, 0.18);
}
.property-filters .filter-section .grid-cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.property-filters .filter-section .grid-cols-2 > div {
    min-width: 0;
}
.property-filters .filter-section .grid-cols-2 label.text-sm {
    font-size: var(--ds-text-xs);
    color: var(--ds-muted, #64748B);
    margin-bottom: 0.35rem;
    display: block;
}

/* =========================================================
   The previous template referenced Tailwind's arbitrary value
   class `h-[500px]`, which doesn't exist in our hand-rolled
   utilities.css and left the Leaflet container at 0 px tall.
   We give the map a real, brand-styled frame here.
   ========================================================= */
.property-map-frame {
    border-radius: var(--ds-radius-xl, 14px);
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08), 0 0 0 1px var(--ds-line, #E5E7EB);
    background: var(--ds-surface-2, #F1F5F9);
    margin: 8px;
}
.property-map {
    width: 100%;
    height: 620px;
    min-height: 540px;
    border-radius: var(--ds-radius-xl, 14px);
    overflow: hidden;
    background: linear-gradient(135deg, #E6F7F4 0%, #F1F5F9 100%);
    position: relative;
}
@media (max-width: 1024px) {
    .property-map { height: 540px; }
}
@media (max-width: 768px) {
    .property-map { height: 420px; min-height: 360px; }
    .property-map-frame { margin: 4px; border-radius: 10px; }
}
/* Leaflet attribution + zoom controls — match the brand chrome. */
.property-map .leaflet-control-zoom a {
    background: rgba(255, 255, 255, 0.95);
    color: var(--ds-brand, #00A693);
    border: 1px solid var(--ds-line, #E5E7EB);
}
.property-map .leaflet-control-zoom a:hover {
    background: var(--ds-brand, #00A693);
    color: #fff;
}
.property-map .leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    color: var(--ds-muted, #64748B);
}

/* Leaflet popup styles */
.leaflet-popup-close-button {
    left: 4px !important;
    right: unset !important;
}

/* Polygon drawing styles */
.leaflet-draw-section {
    margin-bottom: 5px;
}

.leaflet-draw-toolbar a {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.leaflet-draw-toolbar a:hover {
    background-color: #e9ecef;
}

/* Property listing custom styles */
.property-filters {
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
    height: calc(100vh - 100px);
    overflow-y: auto;
}

.property-card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    transition: all 0.3s ease;
    background: white;
    overflow: hidden;
}

.property-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.property-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.property-price {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: var(--ds-text-sm);
}

.property-type-badge {
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: var(--ds-text-xs);
    position: absolute;
    bottom: 15px;
    right: 15px;
}

.filter-section {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Tab styles with Tailwind */
.tab-button {
    transition: all 0.3s ease;
}

.tab-button.active {
    /* Brand-token themed instead of Tailwind blue. The active filters tab
       used inline hex (#00A693) — now goes through the design system. */
    border-bottom-color: var(--ds-brand, #00A693);
    color: var(--ds-brand, #00A693);
    background-color: var(--ds-brand-50, rgba(0,166,147,0.05));
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Ensure tabs appear above content */
.lg\:w-1\/3 {
    z-index: 10;
    position: relative;
}

/* Line clamp utility for property titles */
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.property-filters {
    background-color: transparent;
    border: none;
    height: auto;
    overflow-y: auto;
}

.property-features {
    font-size: var(--ds-text-sm);
    color: #6c757d;
}

.property-meta {
    display: flex;
    gap: 15px;
    font-size: var(--ds-text-sm);
    color: #6c757d;
    margin-top: 10px;
}

.property-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.loading-spinner {
    display: none;
    text-align: center;
    padding: 50px;
}

.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: #6c757d;
}

.map-container {
    height: calc(100vh - 180px);
    border-radius: 12px;
    overflow: hidden;
}

/* Remove old Bootstrap styles - using Tailwind instead */

.property-count {
    color: #667eea;
    font-weight: 600;
}

/* Map specific styles */
.custom-marker {
    border: none !important;
    background: transparent !important;
}

.leaflet-draw-tooltip {
    font-family: 'Vazir', sans-serif !important;
    direction: rtl;
}

.leaflet-popup-content {
    font-family: 'Vazir', sans-serif;
    direction: rtl;
    text-align: right;
    margin: 8px 12px !important;
}

.leaflet-popup-close-button {
    left: 4px !important;
    right: unset !important;
}

/* Polygon drawing styles */
.leaflet-draw-section {
    margin-bottom: 5px;
}

.leaflet-draw-toolbar a {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.leaflet-draw-toolbar a:hover {
    background-color: #e9ecef;
}

/* Map controls positioning for RTL */
.leaflet-control-container .leaflet-top.leaflet-left {
    left: auto;
    right: 10px;
}

.leaflet-control-container .leaflet-top.leaflet-right {
    right: auto;
    left: 10px;
}

/* Geographic cluster marker styles (Zillow-style) */
.geographic-cluster-marker {
    border: none !important;
    background: transparent !important;
    cursor: pointer;
}

.geographic-cluster-marker .zillow-cluster {
    transition: all 0.2s ease;
}

.geographic-cluster-marker:hover .zillow-cluster {
    transform: scale(1.1) !important;
}

/* Legacy cluster marker styles */
.cluster-marker {
    border: none !important;
    background: transparent !important;
    cursor: pointer;
}

.cluster-marker:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.property-marker {
    border: none !important;
    background: transparent !important;
    cursor: pointer;
}

.property-marker:hover {
    transform: scale(1.2);
    transition: transform 0.2s ease;
}

/* Cluster popup styling */
.cluster-popup {
    min-width: 250px;
    padding: 8px;
}

.cluster-popup .grid {
    display: grid;
}

.cluster-popup .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cluster-popup .gap-2 {
    gap: 0.5rem;
}

.cluster-popup .font-semibold {
    font-weight: 600;
}

.cluster-popup .text-gray-600 {
    color: #6b7280;
}

.cluster-popup .text-sm {
    font-size: var(--ds-text-sm);
}

.cluster-popup .text-xs {
    font-size: var(--ds-text-xs);
}

.cluster-popup .mb-1 {
    margin-bottom: 0.25rem;
}

.cluster-popup .mb-2 {
    margin-bottom: 0.5rem;
}

.cluster-popup .mb-3 {
    margin-bottom: 0.75rem;
}



/* Enhanced Form Styles */
.form-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    display: block;
}

/* Radio button enhancements */
input[type="radio"]:checked + span {
    color: #00A693;
    font-weight: 500;
}

input[type="radio"]:focus {
    box-shadow: 0 0 0 3px rgba(0, 166, 147, 0.1);
}

/* Room selection buttons */
.rooms-selector label {
    transition: all 0.2s ease;
}

.rooms-selector label:hover {
    border-color: #00A693 !important;
    background-color: rgba(0, 166, 147, 0.05);
}

.rooms-selector input[type="radio"]:checked + span {
    color: #00A693;
    font-weight: 600;
}

.rooms-selector label.selected {
    border-color: #00A693;
    background-color: rgba(0, 166, 147, 0.05);
    color: #00A693;
}

.rooms-selector input[type="radio"]:checked ~ label {
    border-color: #00A693;
    background-color: rgba(0, 166, 147, 0.05);
}

/* Features modal enhancements */
.feature-checkbox:checked + span {
    color: #00A693;
    font-weight: 500;
}

.feature-checkbox:checked ~ label {
    background-color: rgba(0, 166, 147, 0.05);
    border-color: #00A693;
}

/* Price Range Slider */
.price-range-container {
    padding: 1rem 0;
}

.range-slider {
    position: relative;
    margin: 2rem 0 1rem 0;
    height: 6px;
    background: #E5E7EB;
    border-radius: 3px;
}

.range-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: transparent;
    outline: none;
    position: absolute;
    top: 0;
    pointer-events: none;
}

.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00A693;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

.range-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00A693;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    pointer-events: auto;
    border: none;
}

.range-input::-moz-range-track {
    height: 6px;
    background: transparent;
    border: none;
}

.range-track {
    height: 6px;
    background: #E5E7EB;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.range-track::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #00A693;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.range-values {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    font-size: var(--ds-text-sm);
    color: #374151;
    font-weight: 500;
}

.range-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: var(--ds-text-xs);
    color: #9CA3AF;
    font-weight: 400;
}

/* Filter section improvements */
.filter-section {
    padding: 1rem 0;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 1rem;
}

.filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Better filter labels */
.form-label {
    font-size: var(--ds-text-base);
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

/* Sticky sidebar */
.sticky-sidebar {
    position: sticky;
    top: calc(var(--ds-navbar-h) + var(--ds-space-4));
    max-height: calc(100vh - var(--ds-navbar-h) - var(--ds-space-6));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #E5E7EB transparent;
}

.sticky-sidebar::-webkit-scrollbar {
    width: 4px;
}

.sticky-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sticky-sidebar::-webkit-scrollbar-thumb {
    background-color: #E5E7EB;
    border-radius: 2px;
}

.sticky-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #D1D5DB;
}

/* Price range buttons styling */
.price-range-option {
    transition: all 0.2s ease;
    border: 1px solid #E5E7EB;
    padding: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

.price-range-option:hover {
    border-color: #00A693;
    background-color: rgba(0, 166, 147, 0.02);
}

.price-range-option.selected {
    border-color: #00A693;
    background-color: rgba(0, 166, 147, 0.05);
    color: #00A693;
    font-weight: 500;
}

/* Enhanced Mobile Responsive Styles */
.quick-filter-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    background: white;
    color: #6B7280;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.quick-filter-btn:hover {
    border-color: #00A693;
    color: #00A693;
}

.quick-filter-btn.active {
    background: #00A693;
    border-color: #00A693;
    color: white;
}

.view-toggle-btn {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6B7280;
    flex: 1;
    text-align: center;
}

.view-toggle-btn.active {
    background: white;
    color: #00A693;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Mobile map overlay */
.mobile-map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 1000;
    display: none;
}

.mobile-map-overlay.active {
    display: block;
}

.mobile-map-header {
    background: white;
    border-bottom: 1px solid #E5E7EB;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Improved property cards for mobile */
@media (max-width: 768px) {
    .property-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .filter-section {
        padding: 0.75rem 0;
        margin-bottom: 0.75rem;
    }
    
    .form-label {
        font-size: var(--ds-text-sm);
        margin-bottom: 0.5rem;
    }
    
    .sticky-sidebar {
        position: static;
        max-height: none;
    }
    
    /* Mobile optimized radio buttons */
    input[type="radio"] {
        width: 1rem;
        height: 1rem;
    }
    
    /* Stack radio options vertically on mobile */
    .space-y-2 > * + * {
        margin-top: 0.5rem;
    }
    
    .property-card {
        display: flex;
        flex-direction: row;
        height: 140px;
        overflow: hidden;
    }
    
    .property-image {
        width: 140px;
        height: 140px;
        flex-shrink: 0;
    }
    
    .property-info {
        flex: 1;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .property-features {
        display: none; /* Hide on mobile for cleaner look */
    }
    
    .property-actions {
        padding-top: 0;
        border-top: none;
        margin-top: 0;
        gap: 0.5rem;
    }
    
    .btn-primary, .btn-secondary {
        padding: 0.5rem 0.8rem;
        font-size: var(--ds-text-sm);
    }
}

/* ==============================================
   MOBILE ZILLOW-STYLE LAYOUT
   ============================================== */

/* Mobile Layout Container */
.mobile-zillow-layout {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f5f5f5;
    z-index: 9999; /* Very high z-index to appear above everything */
    display: none; /* Hidden by default */
}

/* Show mobile layout on smaller screens */
@media (max-width: 1023px) {
    .mobile-zillow-layout {
        display: block !important;
    }
    
    /* Hide desktop layout on mobile */
    .property-listing-container > div:first-child {
        display: none !important;
    }
    
    /* Hide footer and navigation on mobile when mobile layout is active */
    body {
        overflow: hidden !important;
        /* Add bottom padding for mobile bottom navbar */
        padding-bottom: 80px !important;
    }
    
                    /* Hide specific page elements that might interfere */
                footer,
                .navbar,
                .navigation {
                    display: none !important;
                }
                
                /* Keep bottom navigation visible and properly positioned above everything */
                .bottom-nav,
                .bottom-navbar {
                    display: block !important;
                    position: fixed !important;
                    bottom: 0 !important;
                    left: 0 !important;
                    right: 0 !important;
                    z-index: 999999 !important; /* Highest z-index to stay above everything */
                    background: rgba(255, 255, 255, 0.98) !important;
                    backdrop-filter: blur(15px) !important;
                    -webkit-backdrop-filter: blur(15px) !important;
                    border-top: 1px solid rgba(0,0,0,0.15) !important;
                    height: 80px !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    pointer-events: auto !important;
                    transform: none !important;
                    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
                }
    
    /* Ensure mobile layout covers everything but leaves space for bottom navbar */
    .mobile-zillow-layout {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 80px !important; /* Leave space for bottom navbar */
        z-index: 99999 !important;
        width: 100vw !important;
        height: calc(100vh - 80px) !important; /* Subtract bottom navbar height */
        overflow: hidden !important;
    }
}

/* Full Screen Map Container */
.mobile-map-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: #f5f5f5;
    z-index: 1;
}

#mobileZillowMap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Floating Search Bar */
.floating-search-bar {
    position: absolute;
    top: 60px;
    left: 16px;
    right: 16px;
    z-index: 1000;
}

.search-input-container {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 0 16px;
    height: 50px;
}

.search-icon {
    color: #666;
    margin-left: 12px;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--ds-text-base);
    color: #333;
    font-family: 'Vazir', sans-serif;
    background: transparent;
}

.search-input::placeholder {
    color: #999;
}

.search-clear-btn {
    background: none;
    border: none;
    color: #666;
    font-size: var(--ds-text-lg);
    padding: 4px;
    cursor: pointer;
}

/* Floating Filter Chips */
.floating-filters {
    position: absolute;
    top: 125px;
    left: 16px;
    right: 16px;
    z-index: 1000;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 8px;
}

.floating-filters::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-family: 'Vazir', sans-serif;
}

.filter-chip:hover {
    background: #f5f5f5;
}

.filter-chip.active {
    background: #00A693;
    color: white;
    border-color: #00A693;
}

.filter-chip.filter-more {
    background: #007C7A;
    color: white;
    border-color: #007C7A;
}

.filter-chip i {
    margin-left: 6px;
}

/* Map to List Toggle */
.map-list-toggle {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.toggle-btn {
    background: #333;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 12px 24px;
    font-size: var(--ds-text-base);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    font-family: 'Vazir', sans-serif;
}

.toggle-btn:hover {
    background: #555;
}

.property-count {
    background: #00A693;
    color: white;
    border-radius: 12px;
    padding: 4px 8px;
    font-size: var(--ds-text-xs);
    font-weight: bold;
    min-width: 24px;
    text-align: center;
}

/* Property Counter Badge */
.property-counter-badge {
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    z-index: 999;
    font-family: 'Vazir', sans-serif;
}

/* Enhanced Bottom Sheet Styles */
.bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--ds-bottom-nav-h, 70px) + env(safe-area-inset-bottom, 0px));
    background: white;
    border-radius: 16px 16px 0 0;
    z-index: 99997; /* Above property bar and nav */
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    max-height: calc(85vh - var(--ds-bottom-nav-h, 70px));
    overflow: hidden;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    will-change: transform;
}

.bottom-sheet.active {
    transform: translateY(0);
}

.bottom-sheet.minimized {
    transform: translateY(calc(100% - 100px));
    /* z-index 998 (below bottom-navbar 999) so the nav stays reachable. */
    z-index: 998;
    bottom: calc(var(--ds-bottom-nav-h, 70px) + env(safe-area-inset-bottom, 0px)) !important;
}

.bottom-sheet.half-open {
    transform: translateY(30%);
}

.bottom-sheet.peek {
    transform: translateY(92%);
}

.bottom-sheet-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

.sheet-handle {
    width: 40px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 0 auto 16px;
    cursor: grab;
    transition: background 0.2s ease, width 0.2s ease, height 0.2s ease;
    position: relative;
    /* WCAG 2.5.8: expand hit area to ≥44 tall via transparent border;
       visible pip stays tiny, taps anywhere in the band register the drag. */
    background-clip: content-box;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    box-sizing: content-box;
}

.sheet-handle:hover {
    background: #00A693;
    width: 50px;
}

.sheet-handle:active {
    cursor: grabbing;
    background: #008f7d;
}

.bottom-sheet-header.dragging .sheet-handle {
    background: #00A693;
    width: 60px;
    height: 5px;
}

.bottom-sheet-header.dragging {
    background: rgba(0, 166, 147, 0.02);
}

/* Add smooth state transition indicators */
.bottom-sheet.minimized .sheet-search-container {
    opacity: 0.3;
    pointer-events: none;
}

.bottom-sheet.half-open .sheet-search-container {
    opacity: 0.8;
}

.bottom-sheet.active .sheet-search-container {
    opacity: 1;
}

.sheet-header-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sheet-search-container {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 12px 16px;
    gap: 12px;
}

.sheet-search-input {
    flex: 1;
    border: none;
    background: none;
    font-size: var(--ds-text-base);
    color: #333;
    font-family: 'Vazir', sans-serif;
    outline: none;
}

.sheet-search-input::placeholder {
    color: #999;
}

.search-icon {
    color: #00A693;
    font-size: var(--ds-text-base);
}

.search-clear-btn {
    background: none;
    border: none;
    color: #999;
    font-size: var(--ds-text-sm);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.search-clear-btn:hover {
    background: #f0f0f0;
    color: #666;
}

.sheet-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sheet-minimize-btn {
    background: #f5f5f5;
    border: none;
    border-radius: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    transition: all 0.2s ease;
}

.sheet-minimize-btn:hover {
    background: #e9ecef;
    color: #333;
}

.sheet-title {
    font-size: var(--ds-text-lg);
    font-weight: 600;
    color: #333;
    margin: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.clear-filters-btn {
    background: none;
    border: none;
    color: #00A693;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    cursor: pointer;
    font-family: 'Vazir', sans-serif;
}

.sheet-close-btn {
    background: #f5f5f5;
    border: none;
    border-radius: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
}

.sheet-content {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(85vh - 80px);
}

/* Property Cards in Sheet */
.property-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-property-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-property-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.mobile-card-image {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.mobile-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #00A693;
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: var(--ds-text-xs);
    font-weight: 600;
}

.mobile-card-content {
    padding: 16px;
}

.mobile-card-price {
    font-size: var(--ds-text-lg);
    font-weight: 700;
    color: #00A693;
    margin-bottom: 8px;
}

.mobile-card-title {
    font-size: var(--ds-text-base);
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
}

.mobile-card-location {
    font-size: var(--ds-text-sm);
    color: #666;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-card-details {
    display: flex;
    justify-content: space-between;
    font-size: var(--ds-text-sm);
    color: #666;
}

.card-detail-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Load More Button */
.load-more-container {
    padding: 20px;
    text-align: center;
}

.load-more-btn {
    background: #00A693;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: var(--ds-text-base);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    font-family: 'Vazir', sans-serif;
}

/* Filter Sheet Styles */
.filters-sheet {
    max-height: calc(90vh - 80px); /* Account for bottom navbar */
    bottom: 80px !important; /* Ensure it stays above bottom navbar */
}

/* Ensure all mobile filter elements stay above bottom navbar */
.main-tab-buttons,
.sheet-main-tabs,
.filter-actions {
    margin-bottom: 10px !important;
    position: relative !important;
    z-index: 99996 !important; /* Below bottom navbar but above other content */
}

.filter-group {
    margin-bottom: 24px;
}

.filter-label {
    display: block;
    font-size: var(--ds-text-base);
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.radio-option:hover {
    background: #f8f9fa;
    border-color: #00A693;
}

.radio-option input[type="radio"] {
    margin-left: 12px;
    accent-color: #00A693;
}

.radio-option span {
    font-size: var(--ds-text-sm);
    color: #333;
    font-weight: 500;
}

.radio-option input[type="radio"]:checked + span {
    color: #00A693;
    font-weight: 600;
}

/* Range Inputs */
.range-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
}

.range-separator {
    font-size: var(--ds-text-sm);
    color: #666;
    font-weight: 500;
}

.price-input,
.area-input {
    flex: 1;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: var(--ds-text-sm);
    text-align: center;
    font-family: 'Vazir', sans-serif;
}

.price-input:focus,
.area-input:focus {
    outline: none;
    border-color: #00A693;
    box-shadow: 0 0 0 2px rgba(0,166,147,0.1);
}

/* Room Selector */
.room-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.room-btn {
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Vazir', sans-serif;
}

.room-btn:hover {
    background: #f8f9fa;
    border-color: #00A693;
}

.room-btn.active {
    background: #00A693;
    color: white;
    border-color: #00A693;
}

/* Filter Select */
.filter-select {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: var(--ds-text-sm);
    color: #333;
    margin-bottom: 12px;
    font-family: 'Vazir', sans-serif;
}

.filter-select:focus {
    outline: none;
    border-color: #00A693;
    box-shadow: 0 0 0 2px rgba(0,166,147,0.1);
}

.filter-select:disabled {
    background: #f5f5f5;
    color: #999;
}

/* Apply Filters Button */
.filter-actions {
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    margin-top: 20px;
}

.apply-filters-btn {
    width: 100%;
    background: #00A693;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 16px;
    font-size: var(--ds-text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Vazir', sans-serif;
}

.apply-filters-btn:hover {
    background: #007C7A;
}

/* Sheet Backdrop */
.sheet-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.sheet-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* Safe area adjustments for devices with notches */
@supports (padding-top: env(safe-area-inset-top)) {
    .floating-search-bar {
        top: calc(60px + env(safe-area-inset-top));
    }
    
    .floating-filters {
        top: calc(125px + env(safe-area-inset-top));
    }
    
    .property-counter-badge {
        top: calc(200px + env(safe-area-inset-top));
    }
}

/* Touch optimizations */
.mobile-zillow-layout * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.search-input {
    -webkit-user-select: text;
    user-select: text;
}

/* Improved touch targets */
.filter-chip,
.toggle-btn,
.room-btn,
.radio-option {
    min-height: 44px;
    min-width: 44px;
}

/* Loading states */
.load-more-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.load-more-btn.loading {
    opacity: 0.7;
}

/* Smooth transitions for better UX */
.mobile-property-card,
.filter-chip,
.room-btn,
.radio-option {
    transform: translateZ(0); /* Enable hardware acceleration */
}

/* Custom scrollbar for sheet content */
.sheet-content::-webkit-scrollbar {
    width: 4px;
}

.sheet-content::-webkit-scrollbar-track {
    background: transparent;
}

.sheet-content::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 2px;
}

/* ==============================================
   NEW ZILLOW-STYLE COMPONENTS
   ============================================== */

/* Location Button */
.location-button {
    position: absolute;
    top: 130px;
    right: 16px;
    z-index: 1000;
}

.location-btn {
    width: 48px;
    height: 48px;
    background: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00A693;
    font-size: var(--ds-text-lg);
    transition: all 0.2s ease;
}

.location-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.location-btn:active {
    transform: scale(0.95);
}

.location-btn.loading {
    color: #ccc;
    cursor: not-allowed;
}

/* Swipe Indicator (replaces list button) */
.swipe-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(0,0,0,0.85);
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.swipe-indicator:hover {
    background: rgba(0,0,0,0.9);
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

.swipe-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.swipe-handle {
    width: 24px;
    height: 4px;
    background: white;
    border-radius: 2px;
    opacity: 0.8;
}

.swipe-arrows {
    display: flex;
    flex-direction: column;
    gap: -2px;
    animation: bounceUp 1.5s ease-in-out infinite;
}

.swipe-arrows i {
    font-size: var(--ds-text-xs);
    opacity: 0.7;
}

.property-count-text {
    font-family: 'Vazir', sans-serif;
    font-weight: 600;
}

@keyframes bounceUp {
    0%, 100% { 
        transform: translateY(0); 
        opacity: 0.7; 
    }
    50% { 
        transform: translateY(-3px); 
        opacity: 1; 
    }
}

/* Enhanced Bottom Property Bar - positioned above bottom navbar */
.bottom-property-bar {
    position: absolute;
    bottom: 90px; /* Above bottom navigation (80px height + 10px margin) */
    left: 0;
    right: 0;
    z-index: 99996; /* Above map, below bottom nav and sheets */
    background: white;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 16px 16px 0 0;
    padding: 16px 20px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.bottom-property-bar:hover {
    box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.property-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.property-count-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.property-search-icon {
    color: #00A693;
    font-size: var(--ds-text-lg);
}

.property-count-number {
    font-size: var(--ds-text-2xl);
    font-weight: 700;
    color: #00A693;
}

.property-count-text {
    font-size: var(--ds-text-base);
    color: #666;
    font-weight: 500;
}

.swipe-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #999;
}

.swipe-handle {
    width: 32px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    transition: background 0.2s ease;
}

.bottom-property-bar:hover .swipe-handle {
    background: #00A693;
}

.swipe-arrow {
    font-size: var(--ds-text-sm);
    animation: bounce 2s infinite;
}

.swipe-text {
    font-size: var(--ds-text-xs);
    font-weight: 500;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-4px);
    }
    60% {
        transform: translateY(-2px);
    }
}



.property-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    max-width: 100%;
}

.property-count-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.property-count-number {
    font-size: var(--ds-text-2xl);
    font-weight: 700;
    color: #00A693;
    font-family: 'Vazir', sans-serif;
}

.property-count-label {
    font-size: var(--ds-text-base);
    font-weight: 500;
    color: #333;
    font-family: 'Vazir', sans-serif;
}

.swipe-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.7;
}

.swipe-handle-small {
    width: 20px;
    height: 3px;
    background: #ccc;
    border-radius: 2px;
}

.swipe-arrow {
    font-size: var(--ds-text-xs);
    color: #666;
    animation: bounceUp 2s ease-in-out infinite;
}

/* Sheet Filters */
.sheet-filters {
    border-bottom: 1px solid #f0f0f0;
    background: white;
}

.filter-tabs {
    display: flex;
    padding: 0 20px;
    background: #f8f9fa;
}

.filter-tab {
    flex: 1;
    padding: 12px 16px;
    background: none;
    border: none;
    color: #666;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    font-family: 'Vazir', sans-serif;
}

.filter-tab.active {
    color: #00A693;
    border-bottom-color: #00A693;
    background: white;
}

.filter-content {
    display: none;
    padding: 16px 20px;
}

.filter-content.active {
    display: block;
}

/* Quick Filter Chips */
.quick-filter-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 16px;
    scrollbar-width: none;
}

.quick-filter-chips::-webkit-scrollbar {
    display: none;
}

.quick-chip {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    color: #666;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Vazir', sans-serif;
}

.quick-chip:hover {
    background: #f0f0f0;
    border-color: #00A693;
}

.quick-chip.active {
    background: #00A693;
    color: white;
    border-color: #00A693;
}

/* Price Filter */
.price-filter {
    margin-top: 8px;
}

.price-range-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.price-range-inputs input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: var(--ds-text-sm);
    text-align: center;
    font-family: 'Vazir', sans-serif;
}

.price-range-inputs span {
    color: #666;
    font-size: var(--ds-text-sm);
    font-weight: 500;
}

/* Advanced Filters */
.advanced-filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label {
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: #333;
}

.filter-select {
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: var(--ds-text-sm);
    color: #333;
    font-family: 'Vazir', sans-serif;
}

.range-inputs-small {
    display: flex;
    gap: 8px;
}

.area-input-small {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: var(--ds-text-sm);
    text-align: center;
    font-family: 'Vazir', sans-serif;
}

/* Room Chips */
.room-chips {
    display: flex;
    gap: 8px;
}

.room-chip {
    flex: 1;
    padding: 10px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Vazir', sans-serif;
    text-align: center;
}

.room-chip:hover {
    background: #f0f0f0;
    border-color: #00A693;
}

.room-chip.active {
    background: #00A693;
    color: white;
    border-color: #00A693;
}

/* Map Drawing Controls */
.map-drawing-controls {
    position: absolute;
    top: 190px;
    right: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.draw-btn {
    width: 48px;
    height: 48px;
    background: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: var(--ds-text-base);
    transition: all 0.2s ease;
}

.draw-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.draw-btn.active {
    background: #00A693;
    color: white;
}

/* Drawing indicator */
.drawing-indicator {
    position: absolute;
    top: 280px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,166,147,0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: var(--ds-text-xs);
    font-weight: 500;
    display: none;
    z-index: 999;
    font-family: 'Vazir', sans-serif;
}

.drawing-indicator.active {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Main Tabs: Filters + List */
.sheet-main-tabs {
    border-bottom: 1px solid #f0f0f0;
    background: white;
}

.main-tab-buttons {
    display: flex;
    background: #f8f9fa;
}

.main-tab {
    flex: 1;
    padding: 16px;
    background: none;
    border: none;
    color: #666;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    font-family: 'Vazir', sans-serif;
}

.main-tab.active {
    color: #00A693;
    border-bottom-color: #00A693;
    background: white;
}

.main-tab i {
    font-size: var(--ds-text-base);
}

.filter-count-badge {
    background: #00A693;
    color: white;
    font-size: var(--ds-text-xs);
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    animation: pulse 0.3s ease;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.main-tab-content {
    display: none;
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.main-tab-content.active {
    display: block;
}

/* Quick Filter Section */
.quick-filter-section {
    margin-bottom: 20px;
}

.all-filters-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* ==============================================
   ENHANCED PROPERTY CARDS WITH FAVORITES
   ============================================== */

/* Enhanced Mobile Property Card Styles */
.mobile-card-favorite {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 10 !important;
}

.mobile-card-favorite i {
    color: #ccc !important;
    font-size: var(--ds-text-base) !important;
    transition: all 0.2s ease !important;
}

.mobile-card-favorite:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: scale(1.1) !important;
}

.mobile-card-favorite.active i {
    color: #ff4757 !important;
}

.mobile-card-favorite:hover i {
    color: #ff4757 !important;
}

.mobile-card-images-count {
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: var(--ds-text-xs) !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.mobile-card-features {
    font-size: var(--ds-text-xs) !important;
    color: #888 !important;
    margin-bottom: 12px !important;
    padding: 6px 10px !important;
    background: #f8f9fa !important;
    border-radius: 6px !important;
    border-right: 3px solid #00A693 !important;
}

.mobile-card-description {
    font-size: var(--ds-text-sm) !important;
    color: #777 !important;
    line-height: 1.4 !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid #f0f0f0 !important;
}

/* Enhanced card details */
.card-detail-item i {
    color: #00A693 !important;
    font-size: var(--ds-text-xs) !important;
}

/* Toast Notifications.
   Hides via opacity/visibility, NOT translateX(100%), because 100 %
   on a 250 px-wide fixed element extends body.scrollWidth on mobile. */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 16px 20px;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    border-right: 4px solid #00A693;
    min-width: 250px;
    max-width: 400px;
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
    pointer-events: auto;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast-content i {
    font-size: var(--ds-text-lg);
}

.toast-success {
    border-right-color: #28a745;
}

.toast-success .toast-content i {
    color: #28a745;
}

.toast-warning {
    border-right-color: #ffc107;
}

.toast-warning .toast-content i {
    color: #ffc107;
}

.toast-error {
    border-right-color: #dc3545;
}

.toast-error .toast-content i {
    color: #dc3545;
}

.toast-info {
    border-right-color: #17a2b8;
}

.toast-info .toast-content i {
    color: #17a2b8;
}



/* Additional map and interaction styles */
/* Custom map styling for Google Maps look */
.leaflet-control-container .leaflet-top .leaflet-left {
    margin-top: 10px;
    margin-left: 10px;
}

.leaflet-control-container .leaflet-control {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    border: none;
}

.leaflet-control-zoom a {
    background-color: white;
    color: #666;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: none;
    border-radius: 8px;
    margin: 2px;
    transition: all 0.2s ease;
}

.leaflet-control-zoom a:hover {
    background-color: #f5f5f5;
    color: #333;
}

/* Custom drawing controls */
.custom-draw-controls {
    position: absolute;
    top: 10px;
    right: 150px; /* Position to left of zoom info */
    z-index: 1000;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    padding: 8px;
    display: flex;
    gap: 8px;
}

.draw-control-btn {
    background: white;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ds-text-sm);
    color: #666;
    transition: all 0.2s ease;
}

.draw-control-btn:hover {
    background-color: #f0f0f0;
    color: #333;
}

.draw-control-btn.active {
    background-color: #00A693;
    color: white;
}

.draw-control-btn i {
    font-size: var(--ds-text-base);
}

/* Smooth freehand path styling */
.freehand-path {
    stroke: #00A693;
    stroke-width: 3;
    fill: rgba(0, 166, 147, 0.15);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.2s ease;
}

.freehand-path:hover {
    stroke-width: 4;
    fill: rgba(0, 166, 147, 0.25);
}

/* Additional Google Maps style enhancements */
.leaflet-container {
    font-family: 'Vazir', 'Roboto', sans-serif;
    background-color: #f5f5f5;
}

/* Customize attribution */
.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    padding: 2px 5px;
    font-size: var(--ds-text-xs);
    color: #666;
}

/* Google Maps style popup */
.leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
    padding: 0;
}

.leaflet-popup-content {
    margin: 0;
    padding: 12px;
}

.leaflet-popup-tip {
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}

/* Enhanced marker clusters */
.geographic-cluster-marker {
    cursor: pointer;
}

.geographic-cluster-marker:hover {
    z-index: 1000;
}

/* Region cluster markers for provinces/cities */
.region-cluster-marker {
    cursor: pointer;
}

.region-cluster-marker:hover {
    z-index: 1001;
}

.region-cluster {
    transition: all 0.2s ease;
}

.region-popup {
    max-width: 250px;
}

.region-popup h6 {
    color: #374151;
    margin-bottom: 12px;
}

.region-popup .grid {
    margin-bottom: 12px;
}



/* Clean tile fade transition */
.leaflet-tile {
    transition: opacity 0.2s ease-in-out;
}

/* Improved drawing instructions */
#drawingInstructions {
    backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 166, 147, 0.2);
}

/* Property marker enhancements */
.property-marker {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    transition: all 0.2s ease;
}

.property-marker:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

/* Simple property dot styling - much better performance */
.property-dot-marker {
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    pointer-events: auto !important;
}

.property-dot {
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.property-dot:hover {
    transform: scale(1.3) !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4) !important;
}

/* Property popup preview styling */
.property-preview-popup .leaflet-popup-content-wrapper {
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.property-preview-popup .leaflet-popup-content {
    margin: 0;
    padding: 0;
}

.property-popup-preview {
    border: none;
    box-shadow: none;
}

/* Mobile responsive for popup */
@media (max-width: 768px) {
    .property-popup-preview {
        width: 240px !important;
    }
}
/* Map controls positioning for RTL */
.leaflet-control-container .leaflet-top.leaflet-left {
    left: auto;
    right: 10px;
}

.leaflet-control-container .leaflet-top.leaflet-right {
    right: auto;
    left: 10px;
}

/* Geographic cluster marker styles (Zillow-style) */
.geographic-cluster-marker {
    border: none !important;
    background: transparent !important;
    cursor: pointer;
}

.geographic-cluster-marker .zillow-cluster {
    transition: all 0.2s ease;
}

.geographic-cluster-marker:hover .zillow-cluster {
    transform: scale(1.1) !important;
}

/* Legacy cluster marker styles */
.cluster-marker {
    border: none !important;
    background: transparent !important;
    cursor: pointer;
}

.cluster-marker:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.property-marker {
    border: none !important;
    background: transparent !important;
    cursor: pointer;
}

.property-marker:hover {
    transform: scale(1.2);
    transition: transform 0.2s ease;
}

/* Cluster popup styling */
.cluster-popup {
    min-width: 250px;
    padding: 8px;
}

.cluster-popup .grid {
    display: grid;
}

.cluster-popup .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cluster-popup .gap-2 {
    gap: 0.5rem;
}

.cluster-popup .font-semibold {
    font-weight: 600;
}

.cluster-popup .text-gray-600 {
    color: #6b7280;
}

.cluster-popup .text-sm {
    font-size: var(--ds-text-sm);
}

.cluster-popup .text-xs {
    font-size: var(--ds-text-xs);
}

.cluster-popup .mb-1 {
    margin-bottom: 0.25rem;
}

.cluster-popup .mb-2 {
    margin-bottom: 0.5rem;
}

.cluster-popup .mb-3 {
    margin-bottom: 0.75rem;
}



/* Enhanced Form Styles */
.form-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    display: block;
}

/* Radio button enhancements */
input[type="radio"]:checked + span {
    color: #00A693;
    font-weight: 500;
}

input[type="radio"]:focus {
    box-shadow: 0 0 0 3px rgba(0, 166, 147, 0.1);
}

/* Room selection buttons */
.rooms-selector label {
    transition: all 0.2s ease;
}

.rooms-selector label:hover {
    border-color: #00A693 !important;
    background-color: rgba(0, 166, 147, 0.05);
}

.rooms-selector input[type="radio"]:checked + span {
    color: #00A693;
    font-weight: 600;
}

.rooms-selector label.selected {
    border-color: #00A693;
    background-color: rgba(0, 166, 147, 0.05);
    color: #00A693;
}

.rooms-selector input[type="radio"]:checked ~ label {
    border-color: #00A693;
    background-color: rgba(0, 166, 147, 0.05);
}

/* Features modal enhancements */
.feature-checkbox:checked + span {
    color: #00A693;
    font-weight: 500;
}

.feature-checkbox:checked ~ label {
    background-color: rgba(0, 166, 147, 0.05);
    border-color: #00A693;
}

/* Price Range Slider */
.price-range-container {
    padding: 1rem 0;
}

.range-slider {
    position: relative;
    margin: 2rem 0 1rem 0;
    height: 6px;
    background: #E5E7EB;
    border-radius: 3px;
}

.range-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: transparent;
    outline: none;
    position: absolute;
    top: 0;
    pointer-events: none;
}

.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00A693;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

.range-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00A693;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    pointer-events: auto;
    border: none;
}

.range-input::-moz-range-track {
    height: 6px;
    background: transparent;
    border: none;
}

.range-track {
    height: 6px;
    background: #E5E7EB;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.range-track::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #00A693;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Sticky sidebar */
.sticky-sidebar {
    position: sticky;
    top: calc(var(--ds-navbar-h) + var(--ds-space-4));
    max-height: calc(100vh - var(--ds-navbar-h) - var(--ds-space-6));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #E5E7EB transparent;
}

.sticky-sidebar::-webkit-scrollbar {
    width: 4px;
}

.sticky-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sticky-sidebar::-webkit-scrollbar-thumb {
    background-color: #E5E7EB;
    border-radius: 2px;
}

.sticky-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #D1D5DB;
}

/* Price range buttons styling */
.price-range-option {
    transition: all 0.2s ease;
    border: 1px solid #E5E7EB;
    padding: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

.price-range-option:hover {
    border-color: #00A693;
    background-color: rgba(0, 166, 147, 0.02);
}

.price-range-option.selected {
    border-color: #00A693;
    background-color: rgba(0, 166, 147, 0.05);
    color: #00A693;
    font-weight: 500;
}

.quick-filter-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    background: white;
    color: #6B7280;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.quick-filter-btn:hover {
    border-color: #00A693;
    color: #00A693;
}

.quick-filter-btn.active {
    background: #00A693;
    border-color: #00A693;
    color: white;
}

.view-toggle-btn {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6B7280;
    flex: 1;
    text-align: center;
}

.view-toggle-btn.active {
    background: white;
    color: #00A693;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Mobile map overlay */
.mobile-map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 1000;
    display: none;
}

.mobile-map-overlay.active {
    display: block;
}

.mobile-map-header {
    background: white;
    border-bottom: 1px solid #E5E7EB;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Improved property cards for mobile */
@media (max-width: 768px) {
    .property-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .filter-section {
        padding: 0.75rem 0;
        margin-bottom: 0.75rem;
    }
    
    .form-label {
        font-size: var(--ds-text-sm);
        margin-bottom: 0.5rem;
    }
    
    .sticky-sidebar {
        position: static;
        max-height: none;
    }
    
    /* Mobile optimized radio buttons */
    input[type="radio"] {
        width: 1rem;
        height: 1rem;
    }
    
    /* Stack radio options vertically on mobile */
    .space-y-2 > * + * {
        margin-top: 0.5rem;
    }
    
    .property-card {
        display: flex;
        flex-direction: row;
        height: 140px;
        overflow: hidden;
    }
    
    .property-image {
        width: 140px;
        height: 140px;
        flex-shrink: 0;
    }
    
    .property-info {
        flex: 1;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .property-features {
        display: none; /* Hide on mobile for cleaner look */
    }
    
    .property-actions {
        padding-top: 0;
        border-top: none;
        margin-top: 0;
        gap: 0.5rem;
    }
    
    .btn-primary, .btn-secondary {
        padding: 0.5rem 0.8rem;
        font-size: var(--ds-text-sm);
    }
}

/* ==============================================
   MOBILE ZILLOW-STYLE LAYOUT
   ============================================== */

/* Mobile Layout Container */
.mobile-zillow-layout {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f5f5f5;
    z-index: 9999; /* Very high z-index to appear above everything */
    display: none; /* Hidden by default */
}

/* Show mobile layout on smaller screens */
@media (max-width: 1023px) {
    .mobile-zillow-layout {
        display: block !important;
    }
    
    /* Hide desktop layout on mobile */
    .property-listing-container > div:first-child {
        display: none !important;
    }
    
    /* Hide footer and navigation on mobile when mobile layout is active */
    body {
        overflow: hidden !important;
        /* Add bottom padding for mobile bottom navbar */
        padding-bottom: 80px !important;
    }
    
                    /* Hide specific page elements that might interfere */
                footer,
                .navbar,
                .navigation {
                    display: none !important;
                }
                
                /* Keep bottom navigation visible and properly positioned above everything */
                .bottom-nav,
                .bottom-navbar {
                    display: block !important;
                    position: fixed !important;
                    bottom: 0 !important;
                    left: 0 !important;
                    right: 0 !important;
                    z-index: 999999 !important; /* Highest z-index to stay above everything */
                    background: rgba(255, 255, 255, 0.98) !important;
                    backdrop-filter: blur(15px) !important;
                    -webkit-backdrop-filter: blur(15px) !important;
                    border-top: 1px solid rgba(0,0,0,0.15) !important;
                    height: 80px !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    pointer-events: auto !important;
                    transform: none !important;
                    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
                }
    
    /* Ensure mobile layout covers everything but leaves space for bottom navbar */
    .mobile-zillow-layout {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 80px !important; /* Leave space for bottom navbar */
        z-index: 99999 !important;
        width: 100vw !important;
        height: calc(100vh - 80px) !important; /* Subtract bottom navbar height */
        overflow: hidden !important;
    }
}

/* Full Screen Map Container */
.mobile-map-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: #f5f5f5;
    z-index: 1;
}

#mobileZillowMap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Floating Search Bar */
.floating-search-bar {
    position: absolute;
    top: 60px;
    left: 16px;
    right: 16px;
    z-index: 1000;
    max-width: 600px;
    margin: 0 auto;
}

.search-input-container {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 0 16px;
    height: 50px;
    min-height: 44px; /* Minimum touch target */
    width: 100%;
}

.search-icon {
    color: #666;
    margin-left: 12px;
    font-size: var(--ds-text-base);
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--ds-text-base);
    color: #333;
    font-family: 'Vazir', sans-serif;
    background: transparent;
    padding: 12px 8px;
    min-width: 0; /* Allow input to shrink */
}

.search-input::placeholder {
    color: #999;
}

.search-clear-btn {
    background: none;
    border: none;
    color: #666;
    font-size: var(--ds-text-lg);
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Floating Filter Chips */
.floating-filters {
    position: absolute;
    top: 125px;
    left: 16px;
    right: 16px;
    z-index: 1000;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 8px;
}

.floating-filters::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-family: 'Vazir', sans-serif;
}

.filter-chip:hover {
    background: #f5f5f5;
}

.filter-chip.active {
    background: #00A693;
    color: white;
    border-color: #00A693;
}

.filter-chip.filter-more {
    background: #007C7A;
    color: white;
    border-color: #007C7A;
}

.filter-chip i {
    margin-left: 6px;
}

/* Map to List Toggle */
.map-list-toggle {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.toggle-btn {
    background: #333;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 12px 24px;
    font-size: var(--ds-text-base);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    font-family: 'Vazir', sans-serif;
}

.toggle-btn:hover {
    background: #555;
}

.property-count {
    background: #00A693;
    color: white;
    border-radius: 12px;
    padding: 4px 8px;
    font-size: var(--ds-text-xs);
    font-weight: bold;
    min-width: 24px;
    text-align: center;
}

/* Property Counter Badge */
.property-counter-badge {
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    z-index: 999;
    font-family: 'Vazir', sans-serif;
}

/* Enhanced Bottom Sheet Styles */
.bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--ds-bottom-nav-h, 70px) + env(safe-area-inset-bottom, 0px));
    background: white;
    border-radius: 16px 16px 0 0;
    z-index: 99997; /* Above property bar and nav */
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    max-height: calc(85vh - var(--ds-bottom-nav-h, 70px));
    overflow: hidden;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    will-change: transform;
}

.bottom-sheet.active {
    transform: translateY(0);
}

.bottom-sheet.minimized {
    transform: translateY(calc(100% - 100px));
    /* z-index 998 (below bottom-navbar 999) so the nav stays reachable. */
    z-index: 998;
    bottom: calc(var(--ds-bottom-nav-h, 70px) + env(safe-area-inset-bottom, 0px)) !important;
}

.bottom-sheet.half-open {
    transform: translateY(30%);
}

.bottom-sheet.peek {
    transform: translateY(92%);
}

.bottom-sheet-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

.sheet-handle {
    width: 40px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 0 auto 16px;
    cursor: grab;
    transition: background 0.2s ease, width 0.2s ease, height 0.2s ease;
    position: relative;
    /* WCAG 2.5.8: expand hit area to ≥44 tall via transparent border;
       visible pip stays tiny, taps anywhere in the band register the drag. */
    background-clip: content-box;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    box-sizing: content-box;
}

.sheet-handle:hover {
    background: #00A693;
    width: 50px;
}

.sheet-handle:active {
    cursor: grabbing;
    background: #008f7d;
}

.bottom-sheet-header.dragging .sheet-handle {
    background: #00A693;
    width: 60px;
    height: 5px;
}

.bottom-sheet-header.dragging {
    background: rgba(0, 166, 147, 0.02);
}

/* Add smooth state transition indicators */
.bottom-sheet.minimized .sheet-search-container {
    opacity: 0.3;
    pointer-events: none;
}

.bottom-sheet.half-open .sheet-search-container {
    opacity: 0.8;
}

.bottom-sheet.active .sheet-search-container {
    opacity: 1;
}

.sheet-header-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sheet-search-container {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 12px 16px;
    gap: 12px;
}

.sheet-search-input {
    flex: 1;
    border: none;
    background: none;
    font-size: var(--ds-text-base);
    color: #333;
    font-family: 'Vazir', sans-serif;
    outline: none;
}

.sheet-search-input::placeholder {
    color: #999;
}

.search-icon {
    color: #00A693;
    font-size: var(--ds-text-base);
}

.search-clear-btn {
    background: none;
    border: none;
    color: #999;
    font-size: var(--ds-text-sm);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.search-clear-btn:hover {
    background: #f0f0f0;
    color: #666;
}

.sheet-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sheet-minimize-btn {
    background: #f5f5f5;
    border: none;
    border-radius: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    transition: all 0.2s ease;
}

.sheet-minimize-btn:hover {
    background: #e9ecef;
    color: #333;
}

.sheet-title {
    font-size: var(--ds-text-lg);
    font-weight: 600;
    color: #333;
    margin: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.clear-filters-btn {
    background: none;
    border: none;
    color: #00A693;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    cursor: pointer;
    font-family: 'Vazir', sans-serif;
}

.sheet-close-btn {
    background: #f5f5f5;
    border: none;
    border-radius: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
}

.sheet-content {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(85vh - 80px);
}

/* Property Cards in Sheet */
.property-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-property-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-property-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.mobile-card-image {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.mobile-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #00A693;
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: var(--ds-text-xs);
    font-weight: 600;
}

.mobile-card-content {
    padding: 16px;
}

.mobile-card-price {
    font-size: var(--ds-text-lg);
    font-weight: 700;
    color: #00A693;
    margin-bottom: 8px;
}

.mobile-card-title {
    font-size: var(--ds-text-base);
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
}

.mobile-card-location {
    font-size: var(--ds-text-sm);
    color: #666;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-card-details {
    display: flex;
    justify-content: space-between;
    font-size: var(--ds-text-sm);
    color: #666;
}

.card-detail-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Load More Button */
.load-more-container {
    padding: 20px;
    text-align: center;
}

.load-more-btn {
    background: #00A693;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: var(--ds-text-base);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    font-family: 'Vazir', sans-serif;
}

/* Filter Sheet Styles */
.filters-sheet {
    max-height: calc(90vh - 80px); /* Account for bottom navbar */
    bottom: 80px !important; /* Ensure it stays above bottom navbar */
}

/* Ensure all mobile filter elements stay above bottom navbar */
.main-tab-buttons,
.sheet-main-tabs,
.filter-actions {
    margin-bottom: 10px !important;
    position: relative !important;
    z-index: 99996 !important; /* Below bottom navbar but above other content */
}

.filter-group {
    margin-bottom: 24px;
}

.filter-label {
    display: block;
    font-size: var(--ds-text-base);
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.radio-option:hover {
    background: #f8f9fa;
    border-color: #00A693;
}

.radio-option input[type="radio"] {
    margin-left: 12px;
    accent-color: #00A693;
}

.radio-option span {
    font-size: var(--ds-text-sm);
    color: #333;
    font-weight: 500;
}

.radio-option input[type="radio"]:checked + span {
    color: #00A693;
    font-weight: 600;
}

/* Range Inputs */
.range-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
}

.range-separator {
    font-size: var(--ds-text-sm);
    color: #666;
    font-weight: 500;
}

.price-input,
.area-input {
    flex: 1;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: var(--ds-text-sm);
    text-align: center;
    font-family: 'Vazir', sans-serif;
}

.price-input:focus,
.area-input:focus {
    outline: none;
    border-color: #00A693;
    box-shadow: 0 0 0 2px rgba(0,166,147,0.1);
}

/* Room Selector */
.room-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.room-btn {
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Vazir', sans-serif;
}

.room-btn:hover {
    background: #f8f9fa;
    border-color: #00A693;
}

.room-btn.active {
    background: #00A693;
    color: white;
    border-color: #00A693;
}

/* Filter Select */
.filter-select {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: var(--ds-text-sm);
    color: #333;
    margin-bottom: 12px;
    font-family: 'Vazir', sans-serif;
}

.filter-select:focus {
    outline: none;
    border-color: #00A693;
    box-shadow: 0 0 0 2px rgba(0,166,147,0.1);
}

.filter-select:disabled {
    background: #f5f5f5;
    color: #999;
}

/* Apply Filters Button */
.filter-actions {
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    margin-top: 20px;
}

.apply-filters-btn {
    width: 100%;
    background: #00A693;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 16px;
    font-size: var(--ds-text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Vazir', sans-serif;
}

.apply-filters-btn:hover {
    background: #007C7A;
}

/* Sheet Backdrop */
.sheet-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.sheet-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* Safe area adjustments for devices with notches */
@supports (padding-top: env(safe-area-inset-top)) {
    .floating-search-bar {
        top: calc(60px + env(safe-area-inset-top));
    }
    
    .floating-filters {
        top: calc(125px + env(safe-area-inset-top));
    }
    
    .property-counter-badge {
        top: calc(200px + env(safe-area-inset-top));
    }
}

/* Touch optimizations */
.mobile-zillow-layout * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.search-input {
    -webkit-user-select: text;
    user-select: text;
}

/* Improved touch targets */
.filter-chip,
.toggle-btn,
.room-btn,
.radio-option {
    min-height: 44px;
    min-width: 44px;
}

/* Loading states */
.load-more-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.load-more-btn.loading {
    opacity: 0.7;
}

/* Smooth transitions for better UX */
.mobile-property-card,
.filter-chip,
.room-btn,
.radio-option {
    transform: translateZ(0); /* Enable hardware acceleration */
}

/* Custom scrollbar for sheet content */
.sheet-content::-webkit-scrollbar {
    width: 4px;
}

.sheet-content::-webkit-scrollbar-track {
    background: transparent;
}

.sheet-content::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 2px;
}

/* ==============================================
   NEW ZILLOW-STYLE COMPONENTS
   ============================================== */

/* Location Button */
.location-button {
    position: absolute;
    top: 130px;
    right: 16px;
    z-index: 1000;
}

.location-btn {
    width: 48px;
    height: 48px;
    background: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00A693;
    font-size: var(--ds-text-lg);
    transition: all 0.2s ease;
}

.location-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.location-btn:active {
    transform: scale(0.95);
}

.location-btn.loading {
    color: #ccc;
    cursor: not-allowed;
}

/* Swipe Indicator (replaces list button) */
.swipe-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(0,0,0,0.85);
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.swipe-indicator:hover {
    background: rgba(0,0,0,0.9);
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

.swipe-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.swipe-handle {
    width: 24px;
    height: 4px;
    background: white;
    border-radius: 2px;
    opacity: 0.8;
}

.swipe-arrows {
    display: flex;
    flex-direction: column;
    gap: -2px;
    animation: bounceUp 1.5s ease-in-out infinite;
}

.swipe-arrows i {
    font-size: var(--ds-text-xs);
    opacity: 0.7;
}

.property-count-text {
    font-family: 'Vazir', sans-serif;
    font-weight: 600;
}

@keyframes bounceUp {
    0%, 100% { 
        transform: translateY(0); 
        opacity: 0.7; 
    }
    50% { 
        transform: translateY(-3px); 
        opacity: 1; 
    }
}

/* Enhanced Bottom Property Bar - positioned above bottom navbar */
.bottom-property-bar {
    position: absolute;
    bottom: 90px; /* Above bottom navigation (80px height + 10px margin) */
    left: 0;
    right: 0;
    z-index: 99996; /* Above map, below bottom nav and sheets */
    background: white;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 16px 16px 0 0;
    padding: 16px 20px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.bottom-property-bar:hover {
    box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.property-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.property-count-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.property-search-icon {
    color: #00A693;
    font-size: var(--ds-text-lg);
}

.property-count-number {
    font-size: var(--ds-text-2xl);
    font-weight: 700;
    color: #00A693;
}

.property-count-text {
    font-size: var(--ds-text-base);
    color: #666;
    font-weight: 500;
}

.swipe-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #999;
}

.swipe-handle {
    width: 32px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    transition: background 0.2s ease;
}

.bottom-property-bar:hover .swipe-handle {
    background: #00A693;
}

.swipe-arrow {
    font-size: var(--ds-text-sm);
    animation: bounce 2s infinite;
}

.swipe-text {
    font-size: var(--ds-text-xs);
    font-weight: 500;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-4px);
    }
    60% {
        transform: translateY(-2px);
    }
}



.property-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    max-width: 100%;
}

.property-count-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.property-count-number {
    font-size: var(--ds-text-2xl);
    font-weight: 700;
    color: #00A693;
    font-family: 'Vazir', sans-serif;
}

.property-count-label {
    font-size: var(--ds-text-base);
    font-weight: 500;
    color: #333;
    font-family: 'Vazir', sans-serif;
}

.swipe-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.7;
}

.swipe-handle-small {
    width: 20px;
    height: 3px;
    background: #ccc;
    border-radius: 2px;
}

.swipe-arrow {
    font-size: var(--ds-text-xs);
    color: #666;
    animation: bounceUp 2s ease-in-out infinite;
}

/* Sheet Filters */
.sheet-filters {
    border-bottom: 1px solid #f0f0f0;
    background: white;
}

.filter-tabs {
    display: flex;
    padding: 0 20px;
    background: #f8f9fa;
}

.filter-tab {
    flex: 1;
    padding: 12px 16px;
    background: none;
    border: none;
    color: #666;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    font-family: 'Vazir', sans-serif;
}

.filter-tab.active {
    color: #00A693;
    border-bottom-color: #00A693;
    background: white;
}

.filter-content {
    display: none;
    padding: 16px 20px;
}

.filter-content.active {
    display: block;
}

/* Quick Filter Chips */
.quick-filter-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 16px;
    scrollbar-width: none;
}

.quick-filter-chips::-webkit-scrollbar {
    display: none;
}

.quick-chip {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    color: #666;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Vazir', sans-serif;
}

.quick-chip:hover {
    background: #f0f0f0;
    border-color: #00A693;
}

.quick-chip.active {
    background: #00A693;
    color: white;
    border-color: #00A693;
}

/* Price Filter */
.price-filter {
    margin-top: 8px;
}

.price-range-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.price-range-inputs input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: var(--ds-text-sm);
    text-align: center;
    font-family: 'Vazir', sans-serif;
}

.price-range-inputs span {
    color: #666;
    font-size: var(--ds-text-sm);
    font-weight: 500;
}

/* Advanced Filters */
.advanced-filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label {
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: #333;
}

.filter-select {
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: var(--ds-text-sm);
    color: #333;
    font-family: 'Vazir', sans-serif;
}

.range-inputs-small {
    display: flex;
    gap: 8px;
}

.area-input-small {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: var(--ds-text-sm);
    text-align: center;
    font-family: 'Vazir', sans-serif;
}

/* Room Chips */
.room-chips {
    display: flex;
    gap: 8px;
}

.room-chip {
    flex: 1;
    padding: 10px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: var(--ds-text-sm);
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Vazir', sans-serif;
    text-align: center;
}

.room-chip:hover {
    background: #f0f0f0;
    border-color: #00A693;
}

.room-chip.active {
    background: #00A693;
    color: white;
    border-color: #00A693;
}

/* Map Drawing Controls */
.map-drawing-controls {
    position: absolute;
    top: 190px;
    right: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.draw-btn {
    width: 48px;
    height: 48px;
    background: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: var(--ds-text-base);
    transition: all 0.2s ease;
}

.draw-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.draw-btn.active {
    background: #00A693;
    color: white;
}

/* Drawing indicator */
.drawing-indicator {
    position: absolute;
    top: 280px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,166,147,0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: var(--ds-text-xs);
    font-weight: 500;
    display: none;
    z-index: 999;
    font-family: 'Vazir', sans-serif;
}

.drawing-indicator.active {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Main Tabs: Filters + List */
.sheet-main-tabs {
    border-bottom: 1px solid #f0f0f0;
    background: white;
}

.main-tab-buttons {
    display: flex;
    background: #f8f9fa;
}

.main-tab {
    flex: 1;
    padding: 16px;
    background: none;
    border: none;
    color: #666;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    font-family: 'Vazir', sans-serif;
}

.main-tab.active {
    color: #00A693;
    border-bottom-color: #00A693;
    background: white;
}

.main-tab i {
    font-size: var(--ds-text-base);
}

.filter-count-badge {
    background: #00A693;
    color: white;
    font-size: var(--ds-text-xs);
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    animation: pulse 0.3s ease;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.main-tab-content {
    display: none;
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.main-tab-content.active {
    display: block;
}

/* Quick Filter Section */
.quick-filter-section {
    margin-bottom: 20px;
}

.all-filters-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* ==============================================
   ENHANCED PROPERTY CARDS WITH FAVORITES
   ============================================== */

/* Enhanced Mobile Property Card Styles */
.mobile-card-favorite {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 10 !important;
}

.mobile-card-favorite i {
    color: #ccc !important;
    font-size: var(--ds-text-base) !important;
    transition: all 0.2s ease !important;
}

.mobile-card-favorite:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: scale(1.1) !important;
}

.mobile-card-favorite.active i {
    color: #ff4757 !important;
}

.mobile-card-favorite:hover i {
    color: #ff4757 !important;
}

.mobile-card-images-count {
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: var(--ds-text-xs) !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.mobile-card-features {
    font-size: var(--ds-text-xs) !important;
    color: #888 !important;
    margin-bottom: 12px !important;
    padding: 6px 10px !important;
    background: #f8f9fa !important;
    border-radius: 6px !important;
    border-right: 3px solid #00A693 !important;
}

.mobile-card-description {
    font-size: var(--ds-text-sm) !important;
    color: #777 !important;
    line-height: 1.4 !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid #f0f0f0 !important;
}

/* Enhanced card details */
.card-detail-item i {
    color: #00A693 !important;
    font-size: var(--ds-text-xs) !important;
}

/* Toast Notifications.
   Hides via opacity/visibility, NOT translateX(100%), because 100 %
   on a 250 px-wide fixed element extends body.scrollWidth on mobile. */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 16px 20px;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    border-right: 4px solid #00A693;
    min-width: 250px;
    max-width: 400px;
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
    pointer-events: auto;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast-content i {
    font-size: var(--ds-text-lg);
}

.toast-success {
    border-right-color: #28a745;
}

.toast-success .toast-content i {
    color: #28a745;
}

.toast-warning {
    border-right-color: #ffc107;
}

.toast-warning .toast-content i {
    color: #ffc107;
}

.toast-error {
    border-right-color: #dc3545;
}

.toast-error .toast-content i {
    color: #dc3545;
}

.toast-info {
    border-right-color: #17a2b8;
}

.toast-info .toast-content i {
    color: #17a2b8;
}
/* ===========================================================
   Features modal — narrow-phone breathing room.
   At 360px, the default w-11/12 + p-5 box was crowding the
   feature grid. Halve the outer margin + soften the padding.
   =========================================================== */
@media (max-width: 380px) {
  #featuresModal > .relative {
    width: calc(100% - 24px);
    margin-inline: 12px;
    padding: 16px;
    top: 12px;
  }
  #featuresModal #allFeaturesContainer {
    grid-template-columns: 1fr;
  }
  #featuresModal #allFeaturesContainer label {
    padding: 10px;
  }
}

/* Save-search prompt — fades in once on a result set with ≥10 items
   for authenticated users (Divar pattern). */
.save-search-prompt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 0 0 12px;
  background: var(--ds-brand-50);
  color: var(--ds-brand-800);
  border: 1px solid var(--ds-brand-100);
  border-radius: var(--ds-radius-pill);
  font: 600 var(--ds-text-sm) var(--ds-font);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 240ms var(--ds-ease), transform 240ms var(--ds-ease);
}
.save-search-prompt.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.save-search-prompt:hover {
  background: var(--ds-brand-100);
}

/* =============================================================
   Desktop properties-list cards (plist-card)
   Used by renderProperties() in property-list.js — shares the
   same visual language as melk-card but tighter for the 3-up grid.
   ============================================================= */
.plist-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg, 14px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms var(--ds-ease), box-shadow 200ms var(--ds-ease), border-color 200ms var(--ds-ease);
}
.plist-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ds-shadow-lg);
  border-color: var(--ds-brand);
  text-decoration: none;
  color: inherit;
}

.plist-card__image {
  position: relative;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--ds-surface-3);
}
.plist-card__image::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 35%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.25));
  pointer-events: none;
}

.plist-card__ribbon {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  font: 700 var(--ds-text-xs) var(--ds-font);
  letter-spacing: 0.02em;
  z-index: 1;
}
.plist-card__ribbon--sell { background: var(--ds-brand); }
.plist-card__ribbon--rent { background: var(--ds-rent, #3B82F6); }

.plist-card__type {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 500 var(--ds-text-xs) var(--ds-font);
  z-index: 1;
}

.plist-card__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plist-card__price {
  font: 800 var(--ds-text-lg) var(--ds-font);
  color: var(--ds-ink);
  /* Long rent prices ("ودیعه x، اجاره y/ماه") shouldn't break the
     grid — clip cleanly with ellipsis when they exceed one line. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plist-card__title {
  font: 600 var(--ds-text-base) var(--ds-font);
  color: var(--ds-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  min-height: 2.6em;
}

.plist-card__loc {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ds-muted, #64748B);
  font: 500 var(--ds-text-sm) var(--ds-font);
}
.plist-card__loc i { color: var(--ds-brand); font-size: 0.85em; }
.plist-card__loc span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plist-card__feats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--ds-line);
  border-bottom: 1px solid var(--ds-line);
  color: var(--ds-ink-2, #334155);
  font: 500 var(--ds-text-sm) var(--ds-font);
}
.plist-card__feats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.plist-card__feats i { color: var(--ds-brand); font-size: 0.85em; }

.plist-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 500 var(--ds-text-sm) var(--ds-font);
  color: var(--ds-muted);
}
.plist-card__photos {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Photo-count chip overlaid on the image (Divar pattern). Always visible
   so the user can tell from the listing page how rich the gallery is. */
.plist-card__photo-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 500 var(--ds-text-xs) var(--ds-font);
  padding: 3px 8px;
  border-radius: var(--ds-radius-pill, 999px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  z-index: 5;
}
.plist-card__photo-chip i { font-size: 0.8em; }

/* Trust row — owner-vs-agency badge + relative time + property code.
   Sits between the feature row and the CTA. The badge color encodes
   poster type so users can spot direct-owner vs agency at a glance
   (Divar/Idealista pattern). */
.plist-card__trust {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font: 500 0.7rem var(--ds-font);
  color: var(--ds-muted, #64748B);
  margin: -2px 0 -4px;
}
.plist-card__poster {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--ds-radius-pill, 999px);
  font-weight: 600;
  white-space: nowrap;
}
.plist-card__poster i { font-size: 0.7em; }
.plist-card__poster--owner {
  background: rgba(0, 166, 147, 0.1);
  color: var(--ds-brand, #00A693);
}
.plist-card__poster--agency {
  background: rgba(99, 102, 241, 0.1);
  color: #6366F1;
}
.plist-card__poster--builder {
  background: rgba(245, 158, 11, 0.1);
  color: #D97706;
}
.plist-card__time {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.plist-card__time::before {
  content: '';
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.4;
  margin-left: 8px;
}
.plist-card__code {
  margin-right: auto;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--ds-muted-2, #94A3B8);
}

.plist-card__cta {
  color: var(--ds-brand);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 160ms var(--ds-ease);
}
.plist-card__cta i { font-size: 0.8em; transition: transform 200ms var(--ds-ease); }
.plist-card:hover .plist-card__cta { color: var(--ds-brand-700, #007B6E); }
.plist-card:hover .plist-card__cta i { transform: translateX(-3px); }

@media (max-width: 768px) {
  .plist-card__image { height: 180px; }
  .plist-card__feats { font-size: var(--ds-text-xs); }
}

/* ─────────────────────────────────────────────────────────────
   Active filter chips strip — Divar/Idealista/Zillow pattern
   Sits above the property grid; each chip removable on click.
   ───────────────────────────────────────────────────────────── */
.active-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 1rem 0;
  padding: 0.5rem 0;
}
.active-filter-chips[hidden] { display: none; }

.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem 0.3rem 0.7rem;
  background: #fff;
  border: 1px solid var(--ds-line, #E5E7EB);
  border-radius: 999px;
  font: 600 0.78rem var(--ds-font);
  color: var(--ds-ink, #0F172A);
  cursor: pointer;
  transition: background 160ms var(--ds-ease), border-color 160ms var(--ds-ease), transform 120ms var(--ds-ease);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.active-filter-chip:hover {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.4);
  transform: translateY(-1px);
}
.active-filter-chip:hover .active-filter-chip__remove { color: #ef4444; }
.active-filter-chip:active { transform: translateY(0); }

.active-filter-chip__label {
  color: var(--ds-muted, #64748B);
  font-weight: 500;
  font-size: 0.7rem;
}
.active-filter-chip__value {
  color: var(--ds-brand, #00A693);
  font-weight: 700;
}
.active-filter-chip__remove {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  font-size: 0.65rem;
  color: var(--ds-muted-2, #94A3B8);
  margin-right: 0.15rem;
  transition: background 160ms var(--ds-ease), color 160ms var(--ds-ease);
}

.active-filter-chip--clear {
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}
.active-filter-chip--clear:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: #ef4444;
}
.active-filter-chip--clear i { font-size: 0.75rem; }