/* =========================================================
           CSS Variables
           ========================================================= */
        :root {
            --primary: #3b82f6;
            --primary-dark: #1d4ed8;
            --secondary: #0f172a;
            --accent: #f97316;
            --bg-body: #f8fafc;
            --bg-card: #ffffff;
            --text-main: #334155;
            --text-muted: #64748b;
            --radius-xl: 24px;
            --shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.08);
            --shadow-hover: 0 25px 50px -12px rgba(59, 130, 246, 0.2);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        body {
            background-color: var(--bg-body);
            font-family: 'Cairo', sans-serif;
            color: var(--text-main);
            margin: 0;
            overflow-x: hidden;
        }

        /* ... [HERO CSS REMAINED UNCHANGED] ... */
        .hero { min-height: 85vh; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 6rem; background-color: #0f172a; }
        .hero-video-wrapper { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; }
        .hero-video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 0.1s ease-out; }
        .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.6) 60%, rgba(15, 23, 42, 0.95) 100%); z-index: 2; }
        .hero-particles { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px); background-size: 40px 40px; z-index: 3; opacity: 0.3; animation: particleMove 60s linear infinite; }
        @keyframes particleMove { 0% { background-position: 0 0; } 100% { background-position: 100px 100px; } }
        .hero-content { position: relative; z-index: 10; text-align: center; max-width: 950px; padding: 0 20px; margin-top: -3rem; }
        .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 30px; font-size: 0.95rem; color: #fff; margin-bottom: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.2); animation: fadeInDown 1s ease-out; }
        .pulse-dot { width: 8px; height: 8px; background-color: #4ade80; border-radius: 50%; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); animation: pulse-green 2s infinite; }
        @keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
        .hero-title { font-size: clamp(2.8rem, 5.5vw, 5rem); font-weight: 900; line-height: 1.15; margin-bottom: 1.5rem; color: white; text-shadow: 0 10px 30px rgba(0,0,0,0.5); }
        .typing-text { color: #60a5fa; position: relative; display: inline-block; }
        .typing-cursor::after { content: '|'; animation: blink 1s step-start infinite; color: #f97316; }
        @keyframes blink { 50% { opacity: 0; } }
        .hero-subtitle { font-size: 1.25rem; color: rgba(226, 232, 240, 0.9); max-width: 650px; margin: 0 auto 3rem; line-height: 1.7; }
        .hero-quick-actions { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-bottom: 3rem; animation: fadeInUp 1s ease-out 0.5s backwards; }
        .quick-chip { padding: 12px 24px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; color: white; text-decoration: none; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; }
        .quick-chip:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
        .quick-chip i { color: #fbbf24; }
        .scroll-indicator { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 10; animation: bounce 2s infinite; }
        .scroll-indicator a { display: flex; flex-direction: column; align-items: center; color: white; text-decoration: none; font-size: 0.85rem; gap: 0.5rem; opacity: 0.8; transition: opacity 0.3s; }
        .scroll-indicator a:hover { opacity: 1; }
        .scroll-indicator i { font-size: 1.5rem; }
        @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-15px); } 60% { transform: translateX(-50%) translateY(-7px); } }
        @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        @media (max-width: 768px) { .hero-title { font-size: 2.5rem; } .hero-quick-actions { display: none; } }

        /* --- Filter Bar Styling --- */
        .filters-section { background: white; padding: 2rem; border-radius: 25px; box-shadow: var(--shadow-soft); margin-top: -6rem; margin-bottom: 3rem; position: relative; z-index: 10; border: 1px solid rgba(0,0,0,0.05); max-width: 1250px; margin-left: auto; margin-right: auto; }
        .filters-header { margin-bottom: 1.5rem; font-weight: 700; color: var(--secondary); display: flex; align-items: center; gap: 10px; }
        .filters-header i { color: var(--primary); }
        .listing-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; align-items: end; }
        .filter-group { position: relative; }
        .filter-label { display: block; margin-bottom: 0.6rem; font-size: 0.9rem; font-weight: 700; color: var(--text-muted); }
        .input-wrapper { position: relative; width: 100%; }
        .input-icon { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); color: var(--primary); font-size: 1.1rem; pointer-events: none; z-index: 2; }
        .form-control, .form-select { width: 100%; height: 52px; padding-right: 55px !important; padding-left: 15px; border: 2px solid #e2e8f0; border-radius: 16px; background-color: #f8fafc; font-size: 0.95rem; color: var(--text-main); font-weight: 500; transition: all 0.3s ease; appearance: none; }
        .form-select { padding-left: 40px !important; }
        .form-control:focus, .form-select:focus { border-color: var(--primary); background-color: white; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); outline: none; }
        /* سهم القائمة المنسدلة - تمت إزالته لمنع التكرار */
        .btn-search { height: 52px; background: var(--primary); color: white; border: none; border-radius: 16px; font-weight: 800; font-size: 1rem; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.4); }
        .btn-search:hover { background: var(--primary-dark); transform: translateY(-2px); }
        .btn-reset { height: 52px; background: #fee2e2; color: #ef4444; border: none; border-radius: 16px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
        .btn-reset:hover { background: #ef4444; color: white; }
        
        /* For You Button in Filters */
        .btn-for-you {
            height: 52px;
            background: #fffbeb;
            color: #78350f;
            border: 1px solid #fcd34d;
            border-radius: 16px;
            font-weight: 800;
            font-size: 0.95rem;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 0 16px;
            grid-column: span 1;
        }
        .btn-for-you:hover {
            background: #fef3c7;
            border-color: #d97706;
        }

        /* --- Property Grid & Card Styling --- */
        .listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2.5rem; margin-bottom: 5rem; padding: 0 1rem; max-width: 1400px; margin-left: auto; margin-right: auto; transition: opacity 0.3s ease; }
        
        /* Pagination */
        .pagination-container { display: flex; justify-content: center; margin-top: 3rem; }
        .page-link { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; margin: 0 4px; background: white; color: var(--text-main); text-decoration: none; font-weight: 700; border: 1px solid #e2e8f0; transition: var(--transition); }
        .page-link.active, .page-link:hover { background: var(--primary); color: white; border-color: var(--primary); }
        
        @media (max-width: 768px) { .listing-grid { grid-template-columns: 1fr; } }

        /* Toast Notifications */
        .toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); padding: 16px 24px; border-radius: 10px; background-color: #ffffff; color: #111827; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16); z-index: 100000; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); opacity: 0; min-width: 280px; text-align: center; font-weight: 500; font-family: 'Cairo', sans-serif; }
        .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
        .toast-success { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: #ffffff; }
        .toast-error { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #ffffff; }

        /* ========================
           NEW: Loading & Animations
           ======================== */
        #properties-wrapper { position: relative; min-height: 200px; }
        
        #loading-overlay {
            position: absolute; inset: 0; background: rgba(255,255,255,0.7); 
            display: none; align-items: center; justify-content: center; z-index: 50;
            backdrop-filter: blur(2px); border-radius: var(--radius-xl);
            padding-top: 100px; align-items: flex-start; /* لظهور المؤشر في الأعلى عند القوائم الطويلة */
        }
        
        .spinner {
            width: 50px; height: 50px; border: 5px solid #e2e8f0; 
            border-top-color: var(--primary); border-radius: 50%; 
            animation: spin 1s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        
        /* Fade In Animation for AJAX items */
        .fade-in { animation: fadeInUp 0.5s ease-out; }