/*
=====================================================
تنسيقات CSS الأساسية والنيون (styles.css) - (النسخة النهائية والمصححة)
=====================================================
*/

/* 1. المتغيرات والألوان الرئيسية */
:root {
    --neon-color: #ffffff;      /* اللون الرئيسي: أبيض لامع للنيون والأزرار */
    --primary-color: #1c2630;   /* لون الخلفية الداكن جداً */
    --secondary-color: #2a3847; /* لون العناصر الأغمق قليلاً */
    --text-color: #f0f0f0;      /* لون النص الفاتح */
    --accent-color: #008cff;    /* لون ثانوي (أزرق) للعناوين والروابط */
    --error-color: #e74c3c;     /* لون السعر والأخطاء */
    --success-color: #2ecc71;   /* لون النجاح (زر الواتساب) */

    /* ألوان لوحة التفاصيل */
    --detail-box-bg: var(--secondary-color); /* الخلفية الداكنة المتناسقة */
    --detail-text-color: var(--text-color); /* نص أبيض */
    --detail-divider: #444;
    --font-family: 'Arial', sans-serif;
}

/* Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--primary-color);
    color: var(--text-color);
    line-height: 1.6;
    direction: rtl; 
    text-align: right;
    /* الإزاحة القياسية للشاشات الكبيرة */
    padding-top: 130px; 
}

h1, h2, h3 {
    color: var(--accent-color); /* العناوين باللون الأزرق */
    text-shadow: 0 0 5px rgba(0, 140, 255, 0.3); 
    margin-bottom: 10px;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--text-color);
}

/* 2. الـ Header والتنقل */
.main-header {
    background-color: var(--secondary-color);
    padding: 10px 0;
    border-bottom: 2px solid var(--neon-color);
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-left: 10px;
    border: 2px solid var(--neon-color);
    box-shadow: 0 0 8px var(--neon-color);
}

.logo-text {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--neon-color);
    text-shadow: 0 0 10px var(--neon-color);
}

.main-nav a {
    margin-right: 15px;
}

/* 🚨 تنسيق الأزرار الأبيض المضيء والدائري */
.neon-button-white {
    background: var(--secondary-color); 
    color: var(--neon-color); /* النص أبيض */
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 8px 15px;
    border-radius: 25px; /* شكل دائري */
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* إضاءة خفيفة */
}

.neon-button-white:hover {
    color: var(--primary-color);
    background: var(--neon-color);
    box-shadow: 0 0 10px var(--neon-color), 0 0 30px rgba(255, 255, 255, 0.8);
    border-color: var(--neon-color);
}

/* 3. تأثيرات النيون والحقول (Forms) */
.neon-glow {
    background-color: var(--secondary-color);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    padding: 20px;
    border-radius: 12px; 
    transition: all 0.3s;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-color);
    font-size: 0.9em;
}

.neon-input-white, .filters-sidebar input, .filters-sidebar select, .auth-form input, .auth-form textarea {
    background: var(--secondary-color);
    border: 1px solid #7f8c8d;
    color: var(--text-color);
    padding: 12px 15px;
    border-radius: 8px; 
    width: 100%;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.neon-input-white:focus, .filters-sidebar input:focus, .filters-sidebar select:focus, .auth-form input:focus, .auth-form textarea:focus {
    border-color: var(--neon-color);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    outline: none;
    background-color: #3f5268;
}

.centered-body {
    display: flex;
    justify-content: center;
    /* ❌ تم إلغاء align-items: center لأنها تسبب الفراغ الكبير */
    
    align-items: flex-start; /* ✅ 1. البدء من الأعلى */
    padding-top: 80px;       /* ✅ 2. تحديد مسافة ثابتة من رأس المتصفح */
    
    min-height: 100vh;
    background-color: #2a3847;
    box-sizing: border-box; /* لضمان حساب المسافات بشكل صحيح */
}
.main-content {
    flex-grow: 1;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
}

.btn-neon {
    /* التنسيق الأساسي */
    padding: 12px 35px;          /* تكبير العرض قليلاً ليكون مريحاً */
    font-size: 0.9em;            /* تكبير الخط قليلاً */
    font-weight: bold;           /* جعل الخط عريضاً */
    border-radius: 50px;         /* حواف دائرية ناعمة */
    border: 2px solid var(--success-color); /* إطار بنفس لون التوهج */
    
    /* الألوان والخلفية */
    background-color: transparent; /* خلفية شفافة (ستايل النيون المعتاد) */
    color: var(--success-color);   /* لون النص نفس لون التوهج */
    
    /* تأثير النيون الأساسي */
    box-shadow: 0 0 10px var(--success-color); 
    text-shadow: 0 0 5px var(--success-color); /* توهج للنص نفسه */

    /* خصائص أخرى */
    display: inline-block;
    cursor: pointer;             /* شكل اليد عند المرور */
    transition: all 0.3s ease-in-out; /* تنعيم الحركة */
    text-decoration: none;
}

/* تأثير عند مرور الماوس (Hover) */
.btn-neon:hover {
    background-color: var(--success-color); /* ملء الزر باللون */
    color: #fff;                            /* تحويل النص للأبيض */
    
    /* زيادة التوهج بشكل كبير */
    box-shadow: 0 0 20px var(--success-color),
                0 0 40px var(--success-color),
                0 0 60px var(--success-color);
    
    text-shadow: none; /* إزالة توهج النص لأنه أصبح أبيض */
    transform: scale(1.05); /* تكبير بسيط جداً */
}

.centered-page-content {
    max-width: 550px; 
    margin: 30px auto;
    padding: 20px;
}

.auth-form {
    display: grid;
    gap: 15px;
}

.btn-neon-auth {
    background-color: var(--accent-color); /* زر الدخول باللون الأزرق */
    color: var(--text-color);
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: bold;
    border: none;
    transition: background-color 0.3s, box-shadow 0.3s;
    cursor: pointer;
    font-size: 1.1em;
    margin-top: 10px;
}

.btn-neon-auth:hover {
    background-color: #0077d4;
    box-shadow: 0 0 10px var(--accent-color);
}

.message {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 6px;
    text-align: center;
}
.message.error { background-color: rgba(231, 76, 60, 0.2); border: 1px solid var(--error-color); color: var(--error-color); }
.message.success { background-color: rgba(46, 204, 113, 0.2); border: 1px solid var(--success-color); color: var(--success-color); }
.message.info { background-color: rgba(52, 152, 219, 0.2); border: 1px solid var(--accent-color); color: var(--accent-color); }

/* 4. شريط البحث (عكس الأيقونة) */
.search-bar-container {
    display: flex;
    flex-direction: row-reverse; /* عكس اتجاه العناصر لجعل الأيقونة على اليسار */
    max-width: 600px;
    margin: 0 auto;
    border: 2px solid var(--neon-color);
    border-radius: 30px; 
    overflow: hidden;
}

.search-section {
    padding: 40px 0;
    text-align: center;
}

.search-bar.neon-input-white {
    flex-grow: 1;
    border: none !important;
    border-radius: 30px 0 0 30px; 
}

.search-button {
    background-color: var(--neon-color);
    color: var(--primary-color);
    padding: 12px 20px;
    font-weight: bold;
    border: none;
    border-radius: 0 30px 30px 0; 
    order: -1; /* وضع الزر على اليسار */
}

/* 5. بطاقات العقارات (Listings) */
.listings-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.property-card {
    background-color: var(--secondary-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
}

/* تنسيق صور البطاقات (حجم موحد لمنع الاستطالة) */
.property-card img {
    width: 100%;
    height: 200px; 
    object-fit: cover; 
    display: block;
}

.card-content .price {
    font-size: 1.4em;
    color: var(--neon-color);
    font-weight: bold;
    margin-bottom: 10px;
}

.card-content .btn {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--text-color);
    padding: 10px 15px;
    border-radius: 25px; /* زر دائري */
    font-weight: bold;
    transition: background-color 0.3s;
    cursor: pointer;
    border: none;
}

.request-box {
    margin-top: 50px;
    text-align: center;
}

.request-text {
    font-size: 1.2em;
    margin-bottom: 15px;
    color: var(--text-color);
}

.btn-neon-large {
    padding: 15px 40px;
    font-size: 1.2em;
    border-radius: 30px; /* زر دائري */
    background-color: var(--success-color);
    color: var(--primary-color);
    font-weight: bold;
    display: inline-block;
    box-shadow: 0 0 10px var(--success-color);
    transition: all 0.3s;
}

.btn-neon-large:hover {
    background-color: #24a860;
    box-shadow: 0 0 15px var(--success-color);
}

/* 6. لوحة التفاصيل (property-details.html) */
.details-layout {
    display: grid;
    grid-template-columns: 1fr 2fr; /* التفاصيل (يمين) والصور (يسار) */
    gap: 30px;
    margin-top: 20px;
}

.details-info-frame {
    background-color: var(--detail-box-bg); 
    color: var(--detail-text-color); 
    border: none;
    padding: 25px;
    border-radius: 12px;
}

/* تصحيح ألوان النصوص والعناوين فوق الخلفية الداكنة */
.details-info-frame h3 {
    color: var(--accent-color); /* العناوين باللون الأزرق */
    text-shadow: none;
}
.details-info-frame .submission-desc {
    color: var(--detail-text-color);
}

.detail-price {
    font-size: 1.5em; /* تصغير حجم السعر */
    color: var(--neon-color); /* السعر باللون الأبيض/النيون */
    font-weight: normal;
}

.price-type-info {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 15px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--detail-divider);
}

.price-type-info .property-type {
    background: none;
    color: var(--text-color); 
    font-size: 1.2em;
    font-weight: normal;
    padding: 0;
}

/* 🚨 تنسيق المواصفات جنبًا إلى جنب */
.specs-list {
    display: flex; 
    justify-content: space-around;
    list-style: none;
    padding: 10px 0;
    margin-bottom: 15px;
    border-top: 1px solid var(--detail-divider);
    border-bottom: 1px solid var(--detail-divider);
}
.specs-list li {
    background: none;
    padding: 0;
    margin-bottom: 0;
    flex-direction: row;
    align-items: center;
    color: var(--text-color);
}
.specs-list li span {
    color: var(--text-color);
    font-weight: normal;
    margin-left: 5px;
}
.specs-list i {
    color: var(--neon-color);
    margin-left: 5px;
}

/* 🚨 تنسيق أزرار الإجراءات (دائري ومضيء) */
.action-buttons-group {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.action-buttons-group a, .action-buttons-group button {
    border-radius: 25px; /* دائري */
    padding: 12px 15px;
    font-size: 1em;
    flex-grow: 1;
    font-weight: bold;
    color: white;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* إضاءة */
}
.action-buttons-group .whatsapp-btn {
    background-color: var(--success-color);
    color: var(--primary-color);
}
.action-buttons-group .favorite-button {
    background-color: var(--error-color);
    color: var(--text-color);
}

.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: var(--text-color);
    border: none;
    padding: 15px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
}
.gallery-nav-btn:hover {
    background: rgba(0, 140, 255, 0.8);
    color: var(--primary-color);
}
.prev-btn { right: 10px; }
.next-btn { left: 10px; }


.main-image-container {
    position: relative;
    width: 100%;
    height: 450px; 
    overflow: hidden;
    border-radius: 8px; 
    background-color: var(--primary-color); 
}

/* استخدام 'contain' لعرض الصورة كاملة دون قص في المعرض */
.main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    display: block;
}

.thumbnail-image {
    width: 80px;
    height: 60px;
    object-fit: cover; 
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s;
}
.thumbnail-image.active {
    border-color: var(--neon-color);
    box-shadow: 0 0 5px var(--neon-color);
}

/* 7. لوحة تحكم الأدمن والطلبات */
.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.dashboard-card {
    text-align: center;
    padding: 30px;
}

.icon-large {
    font-size: 3em;
    color: var(--accent-color);
    margin-bottom: 15px;
}

.count-number {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--error-color);
}

.btn-full {
    display: block;
    width: 100%;
    margin-top: 20px;
}

.submission-card {
    background-color: #4a5d71; 
    border-color: rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}

.submission-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
    margin: 15px 0;
}

.submission-thumbnail {
    width: 80px;
    height: 60px;
    object-fit: cover;
    margin-left: 10px;
    border: 1px solid var(--neon-color);
}

.thumbnails-flex {
    display: flex;
    overflow-x: auto;
    padding: 10px 0;
}

.admin-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-neon-red {
    background-color: var(--error-color);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s;
    font-weight: bold;
}

.btn-neon-red:hover {
    background-color: #c0392b;
}

/* 8. معرض الصور المصغر لصفحة البائع */
.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    padding: 10px;
    min-height: 80px; 
    border: 1px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background-color: var(--secondary-color);
    overflow: auto;
}

.preview-image {
    width: 100px;
    height: 70px;
    object-fit: cover;
    border: 2px solid var(--neon-color);
    border-radius: 4px;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.existing-image-wrapper {
    position: relative;
    width: 100px;
    height: 70px;
}

.remove-image-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--error-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
}

/* 9. زر الإرسال الأخضر الكبير */
.btn-neon-large-green {
    padding: 15px 40px;
    font-size: 1.2em;
    border-radius: 30px; 
    background-color: var(--success-color); 
    color: var(--primary-color);
    font-weight: bold;
    display: block;
    width: 100%;
    margin-top: 20px;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 10px var(--success-color);
    transition: all 0.3s;
}

.btn-neon-large-green:hover {
    background-color: #24a860;
    box-shadow: 0 0 15px var(--success-color), 0 0 20px var(--success-color);
}

/* 10. الـ Footer */
.main-footer {
    background-color: var(--secondary-color);
    padding: 20px 0;
    border-top: 2px solid var(--neon-color);
    margin-top: 40px;
    text-align: center;
    color: #bdc3c7;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.social-links {
    margin: 15px 0 10px;
}

.social-links a {
    font-size: 1.5em;
    margin: 0 10px;
    color: var(--neon-color);
}

.contact-info {
    font-weight: bold;
    color: var(--neon-color);
    margin-bottom: 5px;
}

/* 11. استجابة التصميم (Media Queries) */
/* =========================================
   تحسينات الموبايل النهائية (Compact Header)
   ========================================= */
/* =========================================
   تحسينات الموبايل النهائية (Flexbox Flow)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. ضبط مسافة الجسم */
    body {
        padding-top: 150px !important; 
    }
    
    /* 2. حاوية الهيدر الرئيسية */
    .header-container {
        display: flex;
        flex-direction: column; /* العناصر فوق بعض (اللوجو فوق، والأزرار تحت) */
        align-items: center;
        padding: 5px 10px;
        gap: 5px;
    }
    
    /* 3. إصلاح اللوجو والجملة (في سطر واحد) */
    .logo-container {
        display: flex;
        flex-direction: row; /* ترتيب أفقي */
        align-items: center;
        justify-content: center;
        gap: 10px; /* مسافة بين اللوجو والكلام */
        width: 100%;
        margin-bottom: 5px;
    }
    
    .logo {
        width: 45px;
        height: 45px;
        margin: 0; /* إزالة أي هوامش قديمة */
    }
    
    .logo-text {
        font-size: 1.2rem;
        white-space: nowrap; /* منع النص من النزول لسطرين */
    }
    
    /* 4. تحويل الأزرار لنظام مرن (Flex Wrap) */
    .main-nav {
        display: flex;
        flex-wrap: wrap; /* يسمح للأزرار بالنزول للسطر التالي لو مفيش مكان */
        justify-content: center; /* توسيط الأزرار */
        gap: 8px; /* المسافة بين الأزرار */
        width: 100%;
        margin-top: 0;
    }

    /* تنسيق الزر ليكون مرناً */
    .nav-button {
        flex-grow: 1; /* ✅ الزر يتمدد ليملأ أي فراغ بجانبه */
        flex-basis: 30%; /* العرض المبدئي للزر (ثلث الشاشة تقريباً) */
        
        /* حدود العرض عشان الزرار ميكبرش أوي ولا يصغر أوي */
        min-width: 90px; 
        max-width: 48%; /* عشان يضمن إن زرارين بس يجوا جنب بعض لو الشاشة صغيرة */
        
        margin: 0;
        text-align: center;
        font-size: 0.8rem;
        padding: 8px 5px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    /* تحسينات عامة */
    .action-buttons-group { flex-direction: column; }
    .main-content-grid, .details-layout { grid-template-columns: 1fr; }
}
/* تنسيق حاوية التبويبات */
.auth-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    border-bottom: 2px solid #eee; /* خط فاصل خفيف */
}

/* 1. تعديل عرض الصندوق ليصبح أعرض */
.auth-frame {
    width: 95%;
    max-width: 700px; /* ⬅️ التغيير هنا: كان 400 وأصبح 700 */
    background: #2a3847(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    margin: 20px auto;
    position: relative;
    z-index: 1;
}

/* 2. تصميم شريط التنقل الجديد (الكبسولة الزرقاء المضيئة) */
.auth-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    
    /* ⬅️ الخلفية الزرقاء المتدرجة */
    background: linear-gradient(45deg, #00c6ff, #0072ff); 
    
    /* ⬅️ الحواف الدائرية والإضاءة */
    border-radius: 50px; 
    padding: 5px;
    box-shadow: 0 0 15px #00c6ff; 
    
    border: none; /* إزالة الخط القديم */
}

/* 3. تنسيق أزرار التبويب (الكلام الأبيض) */
.tab-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: transparent;
    
    /* ⬅️ لون النص أبيض شفاف قليلاً */
    color: rgba(255, 255, 255, 0.8); 
    
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.4s ease;
    border-radius: 40px; /* حواف دائرية للأزرار */
    outline: none;
}

.tab-btn:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* 4. الزر النشط (يصبح أبيض والكلام أزرق) */
.tab-btn.active {
    background-color: #fff; 
    color: #0072ff; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
    border-bottom: none; /* التأكد من إزالة الخط السفلي القديم */
}

/* زر المساعدة في الهيدر */
/* =========================================
   تصميم زر المساعدة العائم (Floating Help Button)
   ========================================= */
.floating-help-btn {
    position: fixed; /* تثبيت الزر في الشاشة */
    bottom: 30px;    /* المسافة من الأسفل */
    left: 30px;      /* المسافة من اليسار (مناسب للمواقع العربية) */
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #00c6ff, #0072ff); /* لون أزرق متدرج */
    border-radius: 50%; /* شكل دائري */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 28px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 114, 255, 0.4); /* ظل مبدئي */
    z-index: 999; /* لضمان ظهوره فوق كل العناصر */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* حركة ناعمة */
}

/* تأثير عند مرور الماوس */
.floating-help-btn:hover {
    transform: scale(1.1) rotate(15deg); /* تكبير ودوران بسيط */
    box-shadow: 0 0 25px rgba(0, 198, 255, 0.8), 
                0 0 50px rgba(0, 114, 255, 0.4); /* توهج نيون قوي */
    background: linear-gradient(135deg, #0072ff, #00c6ff); /* عكس الألوان */
}

/* تأثير النبض (Pulse Animation) لجذب الانتباه */
.floating-help-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(0, 198, 255, 0.6);
    animation: pulse-ring 2s infinite;
    z-index: -1;
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* تحسين الظهور في الموبايل */
@media (max-width: 768px) {
    .floating-help-btn {
        width: 50px;
        height: 50px;
        font-size: 22px;
        bottom: 20px;
        left: 20px;
    }
}

/* =========================================
   تنسيق النافذة المنبثقة (Responsive Modal)
   ========================================= */

/* الخلفية المعتمة */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* تعتيم أقوى للتركيز */
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px); /* تأثير ضبابي للخلفية */
    padding: 15px; /* مسافة أمان من حواف الشاشة للموبايل */
}

/* صندوق المحتوى */
.modal-content {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    width: 100%;
    max-width: 1100px; /* عرض أكبر للشاشات الكبيرة */
    
    /* ✅ أهم جزء للموبايل: منع النافذة من الخروج عن الشاشة */
    max-height: 90vh; /* أقصى ارتفاع 90% من الشاشة */
    overflow-y: auto; /* تفعيل السكرول لو المحتوى طويل */
    
    position: relative;
    animation: slideUp 0.4s ease;
    box-shadow: 0 0 30px rgba(0, 198, 255, 0.3); /* توهج خفيف */
}

/* زر الإغلاق */
.close-modal {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 35px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
    transition: 0.3s;
    z-index: 10;
}
.close-modal:hover { color: #ff4444; transform: rotate(90deg); }

.modal-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2rem;
    color: #333;
}

/* =========================================
   تنسيق المعرض (Grid System)
   ========================================= */

.gallery-container {
    display: grid;
    /* ✅ السحر هنا: ترتيب تلقائي حسب المساحة المتاحة */
    /* أقل عرض للكارت 240px، والباقي يتمدد */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
    gap: 25px;
    padding: 5px;
}

/* تصميم البطاقة */
.gallery-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column; /* ترتيب العناصر عمودياً داخل الكارت */
}

.gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 114, 255, 0.15);
    border-color: #00c6ff;
}

/* صندوق الصورة */
.image-box {
    position: relative;
    height: 180px; /* ارتفاع ثابت للصورة */
    width: 100%;
}

/* تنسيق الصورة داخل الكارت */
.image-box img {
    width: 100%;
    height: 100%;
    
    /* ✅ التغيير هنا: */
    object-fit: contain; /* يضمن ظهور الصورة بالكامل دون قص */
    
    /* (اختياري) إضافة مسافة صغيرة عشان الصورة متلزقش في الحواف */
    padding: 5px; 
    
    background-color: #f9f9f9; /* (اختياري) لون خلفية خفيف لو أبعاد الصورة مختلفة عن الإطار */
}

/* رقم الخطوة */
.step-number {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #0072ff, #00c6ff);
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border: 2px solid #fff;
}

/* النصوص */
.text-box {
    padding: 20px;
    text-align: center;
    flex-grow: 1; /* يضمن أن النصوص تأخذ المساحة المتبقية بالتساوي */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-box h3 {
    color: #0072ff;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.text-box p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* =========================================
   تحسينات خاصة للموبايل (Media Queries)
   ========================================= */
@media (max-width: 768px) {
    .modal-content {
        padding: 25px 15px; /* تقليل الحواف الداخلية */
        max-height: 85vh; /* تقليل الارتفاع قليلاً لسهولة اللمس */
    }

    .modal-title {
        font-size: 1.5rem; /* تصغير العنوان */
        margin-top: 20px;
    }

    .gallery-container {
        gap: 20px;
        /* في الموبايل، نجعل الكروت تأخذ العرض الكامل تقريباً */
        grid-template-columns: 1fr; 
    }

    .gallery-card {
        /* جعل الكارت بعرض الشاشة تقريباً لشكل أفضل */
        max-width: 400px; 
        margin: 0 auto; /* توسيط الكارت */
        width: 100%;
    }
    
    .image-box {
        height: 200px; /* زيادة ارتفاع الصورة قليلاً لتكون واضحة */
    }
}

/* حركة الظهور */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 1. تحسين كارت العقار ليكون تفاعلياً */
.property-card {
    background: #1c2630;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer; /* ✅ تحويل المؤشر ليد عند المرور على الكارت */
    display: flex;
    flex-direction: column; /* لضمان توزيع العناصر */
    position: relative;
    border: 1px solid #eee;
}

/* تأثير عند مرور الماوس على الكارت بالكامل */
.property-card:hover {
    transform: translateY(-10px); /* يرتفع للأعلى */
    box-shadow: 0 15px 30px rgba(0, 114, 255, 0.15); /* ظل أزرق خفيف */
    border-color: #00c6ff;
}

/* 2. تنسيق محتوى الكارت لضبط المسافات */
.card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    text-align: right; /* أو center حسب تفضيلك */
}

/* 3. تنسيق زر "عرض التفاصيل" الاحترافي الجديد */
.btn-details-pro {
    display: block; /* يسمح بالتحكم في العرض والهوامش */
    width: fit-content; /* العرض على قد الكلام */
    margin: 20px auto 10px auto; /* ✅ (أهم جزء) مسافة من فوق 20 ومن تحت 10، و auto يخليه في النص */
    padding: 10px 30px;
    
    /* خلفية متدرجة زرقاء */
    background: linear-gradient(45deg, #00c6ff, #0072ff);
    color: white;
    
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px; /* حواف دائرية */
    box-shadow: 0 4px 15px rgba(0, 114, 255, 0.3);
    transition: all 0.3s ease;
    text-align: center;
    z-index: 2; /* لضمان أنه فوق الكارت */
    position: relative;
}

/* تأثير الهوفر للزرار */
.btn-details-pro:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 114, 255, 0.5);
    background: linear-gradient(45deg, #0072ff, #00c6ff); /* عكس الألوان */
}

.admin-secret-box {
    background: #3a1616;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer; /* ✅ تحويل المؤشر ليد عند المرور على الكارت */
    display: flex;
    flex-direction: column; /* لضمان توزيع العناصر */
    position: relative;
    border: 1px solid #1c2630;
}

/* زر تطبيق الفلتر الاحترافي */
.btn-filter-submit {
    /* 1. التموضع والمسافات */
    display: block;           /* ضروري عشان نعرف نحطه في النص */
    margin: 25px auto;        /* 25px من فوق وتحت (عشان ميبقاش لازق)، و auto يمين ويسار (للتوسيط) */
    width: fit-content;       /* العرض على قد الكلام فقط */
    min-width: 200px;         /* عرض أدنى عشان يبقى شكله فخم */
    
    /* 2. الشكل واللون */
    padding: 12px 40px;
    background: linear-gradient(135deg, #00c6ff, #0072ff); /* تدرج أزرق عصري */
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    border: none;
    border-radius: 50px;      /* حواف دائرية بالكامل */
    cursor: pointer;
    
    /* 3. الإضاءة والظلال */
    box-shadow: 0 5px 15px rgba(0, 198, 255, 0.3); /* ظل نيون خفيف */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* حركة ناعمة */
}

/* تأثير عند مرور الماوس */
.btn-filter-submit:hover {
    transform: translateY(-3px); /* يرتفع قليلاً للأعلى */
    box-shadow: 0 10px 25px rgba(0, 198, 255, 0.5); /* الظل يقوى */
    background: linear-gradient(135deg, #0072ff, #00c6ff); /* عكس التدرج */
}

/* تأثير عند الضغط */
.btn-filter-submit:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 198, 255, 0.4);
}

/* تحسين للموبايل: الزر ياخد العرض كامل */
@media (max-width: 768px) {
    .btn-filter-submit {
        width: 100%; /* عرض كامل في الموبايل لسهولة الضغط */
        margin: 20px 0; /* مسافة من فوق وتحت فقط */
    }
}

.filter-container {
    background: var(--main-accent);
    border-radius: 15px;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}

.filter-header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: rgba(255,255,255,0.05);
}

.filter-header h3 { margin: 0; font-size: 1.1rem; color: var(--main-secondary); }
.filter-header .toggle-icon { transition: 0.3s; }

.filter-body {
    padding: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    animation: slideDown 0.3s ease;
}

/* تدوير السهم لما يفتح */
.filter-container.active .toggle-icon { transform: rotate(180deg); }

/* تحسين شكل الفلتر */
.filters-sidebar {
    background: rgba(255, 255, 255, 0.05); /* خلفية شفافة */
    padding: 20px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1); /* حدود خفيفة جداً بدل الأبيض الصريح */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    margin-bottom: 20px;
}

/* تحويل الفورم لشبكة (Grid) */
.filters-sidebar form {
    display: grid;
    grid-template-columns: 1fr 1fr; /* عمودين */
    gap: 15px; /* مسافة بين العناصر */
}

/* عناصر تاخد العرض كامل (زي البحث بالكلمة وزر التطبيق) */
.filters-sidebar .full-width {
    grid-column: span 2;
}

/* تحسين شكل حقول الإدخال */
.filters-sidebar input, .filters-sidebar select {
    background: rgba(0, 0, 0, 0.3) !important; /* خلفية الحقل غامقة */
    border: 1px solid #444 !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 10px !important;
    height: 45px; /* ارتفاع موحد */
}

/* تحسين العناوين (Labels) */
.filters-sidebar label {
    font-size: 0.9rem;
    color: #ccc; /* لون رمادي فاتح بدل الأبيض الفاقع */
    margin-bottom: 5px;
    display: block;
}

/* زر التطبيق */
.btn-filter-submit {
    width: 100%;
    grid-column: span 2;
    margin-top: 10px;
}

/* =========================================
   تنسيق فلتر البحث المتقدم (Accordion Style)
   ========================================= */

.filter-wrapper {
    margin-bottom: 30px;
}

.filter-container {
    background: var(--main-accent); /* لون الخلفية من المتغيرات */
    border-radius: 15px;
    overflow: hidden; /* عشان الحواف الدائرية تبان */
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

/* رأس الفلتر (الزرار) */
.filter-header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.3s;
}

.filter-header:hover {
    background: rgba(255, 255, 255, 0.1);
}

.filter-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--main-secondary);
}

.toggle-icon {
    color: var(--main-text);
    transition: transform 0.3s ease;
}

/* تدوير السهم عند الفتح */
.filter-container.active .toggle-icon {
    transform: rotate(180deg);
    color: var(--main-secondary);
}

/* جسم الفلتر */
.filter-body {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    animation: slideDown 0.3s ease-in-out;
}

/* تنسيق الفورم كشبكة (Grid) */
#filter-form {
    display: grid;
    grid-template-columns: 1fr 1fr; /* عمودين متساويين */
    gap: 15px; /* مسافة بين الخانات */
}

/* العناصر اللي تاخد العرض كامل */
.full-width, .full-width-btn {
    grid-column: span 2; /* يمتد على العمودين */
}

/* تنسيق الحقول */
.form-row label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #ccc;
}

.filter-body input, .filter-body select {
    width: 100%;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #444;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
}

.filter-body input:focus, .filter-body select:focus {
    border-color: var(--main-secondary);
    box-shadow: 0 0 8px rgba(0, 198, 255, 0.3);
}

/* تحسين حقل البحث (أيقونة داخلية) */
.input-icon-wrapper {
    position: relative;
}
.input-icon-wrapper i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}
.input-icon-wrapper input {
    padding-right: 40px; /* مساحة للأيقونة */
}

/* زر التطبيق */
.btn-filter-submit {
    margin-top: 10px;
    width: 100%; /* يأخذ العرض كامل */
}

/* =========================================
   تنسيق معرض الصور المكبر (Lightbox)
   ========================================= */
.lightbox-overlay {
    display: none; /* مخفي افتراضياً */
    position: fixed;
    z-index: 3000; /* أعلى طبقة في الموقع */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* خلفية سوداء معتمة */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    backdrop-filter: blur(5px);
}

/* حاوية الصورة */
.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border: 2px solid #333;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

/* عداد الصور */
.lightbox-counter {
    color: #fff;
    margin-top: 10px;
    font-size: 1.1rem;
    font-family: sans-serif;
}

/* أزرار التحكم (إغلاق - يمين - يسار) */
.close-lightbox {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 3001;
}
.close-lightbox:hover { color: var(--error-color); }

.lightbox-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    font-size: 2rem;
    padding: 20px;
    cursor: pointer;
    border-radius: 50%;
    transition: 0.3s;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-btn:hover {
    background: var(--main-secondary);
    box-shadow: 0 0 15px var(--main-secondary);
}

.prev-lightbox { right: 20px; } /* زر السابق يمين (عربي) */
.next-lightbox { left: 20px; }  /* زر التالي يسار */

/* تحسين للموبايل */
@media (max-width: 768px) {
    .lightbox-btn {
        padding: 10px;
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
        background: rgba(0,0,0,0.5);
    }
    .close-lightbox {
        top: 10px;
        right: 20px;
    }
}

/* تنسيق قسم العقارات المشابهة */
.similar-properties-section {
    padding-top: 30px;
    border-top: 1px solid var(--detail-divider);
}

/* تنسيق كارت العقار المشابه (نسخة مصغرة) */
.similar-properties-section .property-card {
    font-size: 0.9rem; /* تصغير الخط قليلاً */
}

.similar-properties-section .property-card img {
    height: 180px; /* تصغير الصورة قليلاً */
}

/* --- إعدادات الحاوية الرئيسية --- */
.seller-form-container {
    background: rgba(255, 255, 255, 0.05); /* خلفية شفافة داكنة */
    backdrop-filter: blur(15px); /* تأثير الزجاج الضبابي */
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    margin: 50px auto;
    font-family: 'Tajawal', sans-serif; /* تأكد من استدعاء الخط */
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* عنوان النموذج */
.seller-form-container h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #00f260, #0575e6); /* تدرج لوني للنص */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.seller-form-container p {
    text-align: center;
    color: #aaa;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

/* --- تنسيق الشبكة (Grid System) --- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* عمودين */
    gap: 20px; /* مسافة بين الحقول */
}

/* في الشاشات الصغيرة، اجعلها عمود واحد */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* --- مجموعات الإدخال --- */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

/* الحقول التي تأخذ العرض الكامل */
.full-width {
    grid-column: 1 / -1;
}

/* --- التسميات (Labels) --- */
.input-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ddd;
    transition: all 0.3s ease;
}

/* --- حقول الإدخال (Inputs) --- */
.neon-input-white {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 15px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

/* تأثير التركيز (Focus) على الحقول */
.neon-input-white:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #00f260; /* لون أخضر نيون */
    box-shadow: 0 0 10px rgba(0, 242, 96, 0.2);
    transform: translateY(-2px);
}

/* تنسيق القائمة المنسدلة */
select.neon-input-white {
    cursor: pointer;
    appearance: none; /* إخفاء السهم الافتراضي */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300f260%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: left 15px top 50%;
    background-size: 12px auto;
}
select.neon-input-white option {
    background-color: #333; /* لون خلفية الخيارات */
    color: #fff;
}

/* --- منطقة رفع الصور --- */
.file-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 242, 96, 0.1);
    border: 2px dashed rgba(0, 242, 96, 0.4);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #00f260;
    font-weight: bold;
}

.file-upload-label:hover {
    background: rgba(0, 242, 96, 0.2);
    border-color: #00f260;
    transform: scale(1.01);
}

.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

/* --- زر الإرسال --- */
.btn-neon-large-green {
    width: 100%;
    margin-top: 30px;
    padding: 15px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(45deg, #00f260, #0575e6);
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 242, 96, 0.4);
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.btn-neon-large-green:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 242, 96, 0.6);
    background: linear-gradient(45deg, #0575e6, #00f260); /* عكس التدرج عند التحويم */
}

.btn-neon-large-green:active {
    transform: translateY(1px);
}

/* --- رسائل الخطأ والملاحظات --- */
small {
    opacity: 0.8;
}

.message {
    padding: 10px;
    border-radius: 8px;
    transition: opacity 0.3s;
}

.message.success {
    background-color: rgba(0, 242, 96, 0.2);
    color: #00f260;
    border: 1px solid #00f260;
}

.message.error {
    background-color: rgba(255, 68, 68, 0.2);
    color: #ff4444;
    border: 1px solid #ff4444;
}
/* --- حاوية النموذج (نفس ستايل Glassmorphism) --- */
.auth-frame {
    background: rgba(255, 255, 255, 0.05); /* خلفية شفافة */
    backdrop-filter: blur(15px); /* تمويه الخلفية */
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    margin: 60px auto; /* توسيط عمودي */
    max-width: 500px; /* عرض مناسب لنموذج الحجز */
    width: 90%;
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    position: relative;
    overflow: hidden;
}

/* --- العناوين والنصوص --- */
.auth-frame h2 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #00f260, #0575e6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.auth-frame p {
    text-align: center;
    color: #aaa;
    margin-bottom: 30px;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* --- مجموعات الإدخال --- */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.input-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ddd;
    margin-right: 5px;
}

/* --- حقول الإدخال (نفس ستايل الحقول البيضاء) --- */
.neon-input-white {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 15px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    width: 100%; /* تأكد أن الحقل يملأ المساحة */
    box-sizing: border-box; /* لمنع الخروج عن الإطار */
}

/* تأثير النيون عند الضغط */
.neon-input-white:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #00f260;
    box-shadow: 0 0 10px rgba(0, 242, 96, 0.2);
    transform: translateY(-2px);
}

/* تنسيق خاص لمنطقة النص (Textarea) */
textarea.neon-input-white {
    resize: vertical; /* السماح بالتغيير الرأسي فقط */
    min-height: 100px;
}

/* --- زر الإرسال (نفس ستايل الزر السابق) --- */
.btn-neon-auth {
    width: 100%;
    padding: 15px;
    margin-top: 10px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(45deg, #00f260, #0575e6);
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 242, 96, 0.4);
    transition: all 0.3s ease;
}

.btn-neon-auth:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 242, 96, 0.6);
    background: linear-gradient(45deg, #0575e6, #00f260);
}

.btn-neon-auth:active {
    transform: translateY(1px);
}

/* --- رسائل الحالة --- */
.message {
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: none; /* مخفي افتراضياً */
}

.message.success {
    display: block;
    background: rgba(0, 242, 96, 0.1);
    color: #00f260;
    border: 1px solid #00f260;
}

.message.error {
    display: block;
    background: rgba(255, 68, 68, 0.1);
    color: #ff4444;
    border: 1px solid #ff4444;
}
/* --- حاوية القسم (لضبط المسافات الخارجية) --- */
.request-property-section {
    padding: 60px 20px;
    width: 100%;
    box-sizing: border-box;
}

/* --- الصندوق الزجاجي المضيء --- */
.request-box {
    background: rgba(255, 255, 255, 0.05); /* خلفية شفافة */
    backdrop-filter: blur(12px); /* تمويه الخلفية */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15); /* حدود رفيعة */
    border-radius: 25px; /* حواف دائرية ناعمة */
    padding: 50px 30px;
    text-align: center;
    max-width: 900px;
    margin: 0 auto; /* توسيط الصندوق */
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); /* ظل قوي للعمق */
    
    /* ترتيب العناصر داخله */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px; /* مسافة بين النص والزرار */
}

/* تأثير ضوء خافت خلف النص (لمسة جمالية) */
.request-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 242, 96, 0.15) 0%, rgba(0,0,0,0) 70%);
    z-index: 0;
    pointer-events: none;
}

/* --- النص التحفيزي --- */
.request-text {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    z-index: 1; /* عشان يظهر فوق الإضاءة الخلفية */
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    font-family: 'Tajawal', sans-serif;
}

/* --- الزرار الكبير (CTA Button) --- */
.btn-neon-large {
    display: inline-block;
    padding: 16px 50px;
    background: linear-gradient(90deg, #00f260, #0575e6);
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px; /* شكل كبسولة */
    box-shadow: 0 5px 20px rgba(0, 242, 96, 0.4); /* ظل نيون */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* حركة ناعمة */
    z-index: 1;
    border: 1px solid rgba(255,255,255,0.2);
}

/* تأثير التحويم على الزرار */
.btn-neon-large:hover {
    transform: translateY(-5px) scale(1.05); /* يرتفع ويكبر قليلاً */
    box-shadow: 0 10px 30px rgba(0, 242, 96, 0.6); /* الظل يقوى */
    background: linear-gradient(90deg, #0575e6, #00f260); /* عكس الألوان */
}

/* تأثير عند الضغط */
.btn-neon-large:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 242, 96, 0.3);
}

/* --- التجاوب مع الموبايل --- */
@media (max-width: 768px) {
    .request-text {
        font-size: 1.3rem; /* تصغير الخط قليلاً */
    }
    
    .btn-neon-large {
        width: 100%; /* الزرار يأخذ العرض بالكامل */
        padding: 15px;
        font-size: 1.1rem;
        box-sizing: border-box;
    }
    
    .request-box {
        padding: 30px 20px;
    }
}
/* --- حاوية القسم بالكامل --- */
.search-section {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    margin-bottom: 40px; /* مسافة تفصل البحث عن العقارات تحت */
    box-sizing: border-box;
}

/* --- الحاوية النسبية (عشان نثبت الزرار جواها) --- */
.search-bar-container {
    position: relative; /* مهم جداً عشان الزرار يتموضع بالنسبة ليه */
    width: 100%;
    max-width: 700px; /* عرض مثالي للشريط */
}

/* --- حقل الكتابة (Input) --- */
.search-bar {
    width: 100%;
    height: 60px; /* ارتفاع مريح */
    padding: 10px 30px 10px 140px; /* PADDING مهم: يمين للكتابة، وشمال عشان مكان الزرار */
    border-radius: 50px; /* شكل الكبسولة */
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08); /* زجاجي غامق قليلاً */
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    font-size: 1.1rem;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* تأثير عند الضغط للكتابة */
.search-bar:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #00f260; /* برواز أخضر نيون */
    box-shadow: 0 0 25px rgba(0, 242, 96, 0.15); /* توهج خفيف */
}

/* تنسيق النص التوضيحي (Placeholder) */
.search-bar::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.95rem;
}

/* --- زر البحث (المدمج) --- */
.search-button {
    position: absolute;
    left: 6px; /* تثبيت في أقصى اليسار */
    top: 6px;
    bottom: 6px; /* يمط نفسه لارتفاع الشريط ناقص الهوامش */
    padding: 0 30px;
    border-radius: 40px; /* كبسولة أصغر جوه الكبسولة الكبيرة */
    border: none;
    background: linear-gradient(90deg, #00f260, #0575e6);
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    gap: 8px; /* مسافة بين الأيقونة وكلمة ابحث */
    box-shadow: 0 4px 15px rgba(0, 242, 96, 0.3);
}

/* تأثير الهوفر على الزر */
.search-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 242, 96, 0.5);
    padding: 0 35px; /* حركة توسيع بسيطة */
}

/* تأثير الضغط */
.search-button:active {
    transform: scale(0.95);
}

/* --- التجاوب مع الموبايل --- */
@media (max-width: 480px) {
    .search-bar {
        font-size: 0.9rem;
        padding-left: 100px; /* تقليل المسافة للزرار */
    }

    .search-button {
        padding: 0 20px; /* تصغير الزرار */
        font-size: 0.9rem;
    }
    
    .search-button:hover {
        padding: 0 20px; /* إلغاء حركة التوسيع في الموبايل */
    }
}

/* --- 1. حاوية الهيدر الرئيسية (الثبات والزجاج) --- */
/* --- تعديل الهيدر ليكون عادياً (يتحرك مع الصفحة) --- */
.main-header {
    position: relative; /* التغيير الأساسي: يجعله جزءاً من تدفق الصفحة */
    width: 100%;
    z-index: 1000;
    
    /* نفس الستايل الزجاجي للحفاظ على الشكل */
    background: rgba(0, 0, 0, 0.7); /* خلفية سوداء شفافة */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    
    padding: 10px 0;
    margin-bottom: 20px; /* مسافة صغيرة تحته عشان ميبقاش لازق في الزراير */
}
/* --- 2. تنسيق المحتوى الداخلي --- */
.header-container {
    display: flex;
    justify-content: space-between; /* اللوجو يمين والروابط شمال */
    align-items: center;
    width: 95%; /* عرض مناسب */
    max-width: 1400px; /* أقصى عرض للشاشات الكبيرة */
    margin: 0 auto;
}

/* --- 3. اللوجو والنص --- */
.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0; /* يمنع اللوجو من الانكماش */
}

.logo {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    border: 2px solid rgba(0, 242, 96, 0.6); /* حدود خضراء نيون */
    object-fit: cover;
}

.logo-text {
    font-family: 'Tajawal', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    /* إخفاء النص في الموبايل لتوفير مساحة */
    white-space: nowrap;
}

/* --- 4. روابط التنقل (Navigation) --- */
.main-nav {
    display: flex;
    align-items: center;
    gap: 10px; /* مسافة بين الأزرار */
}

/* الحاويات الداخلية (guest/user) */
#guest-nav, #user-nav {
    display: flex; /* عشان الأزرار تيجي جنب بعض */
    align-items: center;
    gap: 10px;
}

/* --- 5. تصميم الأزرار (Neon White) --- */
.nav-button {
    text-decoration: none;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 50px;
    transition: all 0.3s ease;
    white-space: nowrap; /* يمنع النص من النزول سطر جديد */
    
    /* الستايل الافتراضي */
    color: #ddd;
    background: transparent;
    border: 1px solid transparent;
}

/* الكلاس الخاص بالنيون الأبيض */
.neon-button-white {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

/* تأثير الهوفر (عند مرور الماوس) */
.nav-button:hover, 
.neon-button-white:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

/* --- 6. تمييز زر "اعرض عقار" --- */
/* لجعله مميزاً عن باقي الأزرار */
a[href="seller-dashboard.html"] {
    background: linear-gradient(45deg, #00f260, #0575e6);
    color: #fff;
    border: none;
    box-shadow: 0 0 10px rgba(0, 242, 96, 0.3);
}

a[href="seller-dashboard.html"]:hover {
    box-shadow: 0 0 20px rgba(0, 242, 96, 0.6);
    background: linear-gradient(45deg, #0575e6, #00f260);
    color: #fff;
}

/* --- 7. التجاوب مع الموبايل (مهم جداً) --- */
@media (max-width: 992px) {
    .logo-text {
        display: none; /* إخفاء نص اللوجو في الشاشات المتوسطة */
    }
}

@media (max-width: 768px) {
    .header-container {
        width: 100%;
        padding: 0 10px;
        flex-direction: column; /* العناصر تحت بعض في الموبايل */
        gap: 10px;
    }

    .main-nav {
        width: 100%;
        overflow-x: auto; /* يسمح بالتمرير الأفقي لو الأزرار كتير */
        padding-bottom: 5px;
        justify-content: center; /* توسيط الأزرار */
    }

    /* تحسين شكل السكرول بار */
    .main-nav::-webkit-scrollbar {
        height: 0px;
        background: transparent;
    }

    .nav-button {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}

/* --- 1. إصلاح شريط البحث (المشكلة الكبيرة) --- */
.search-bar-container {
    position: relative;
    width: 100%;
    margin-top: 40px; /* مسافة كبيرة تفصله عن الزراير اللي فوق */
}

.search-bar {
    width: 100%;
    height: 55px;
    /* التريك هنا: بنسيب مسافة كبيرة شمال عشان الزرار، ويمين عشان الكلام */
    padding: 10px 20px 10px 130px !important; 
    border-radius: 50px;
    text-align: right; /* الكتابة تبدأ من اليمين */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    box-sizing: border-box; /* عشان الـ Padding ميبوظش العرض */
}

/* زرار البحث */
.search-button {
    position: absolute;
    left: 5px; /* لازق في الشمال */
    top: 5px;
    bottom: 5px;
    width: 110px; /* عرض ثابت للزرار */
    border-radius: 40px;
    background: linear-gradient(90deg, #00f260, #0575e6);
    border: none;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    z-index: 2; /* يظهر فوق الشريط */
}

/* --- 2. إصلاح شبكة الأزرار (إبعادها عن بعض) --- */
.buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* عمودين */
    gap: 15px; /* مسافة بين الزرار وأخوه */
    margin-bottom: 30px; /* مسافة تحت الشبكة كلها */
    padding: 0 10px;
}

.buttons-grid a {
    white-space: nowrap; /* يمنع الكلام ينزل سطرين */
    font-size: 0.9rem; /* تصغير الخط شوية للموبايل */
    padding: 12px 5px;
}

/* زر "حسابي" ياخد العرض كله ومسافة فوقه */
.full-width-btn {
    grid-column: span 2;
    margin-top: 5px;
}

/* --- 3. تظبيط اللوجو في الموبايل --- */
.logo-container {
    flex-direction: column; /* اللوجو فوق والنص تحته */
    gap: 10px;
    margin-bottom: 25px;
}

.logo-text {
    font-size: 1.2rem; /* تصغير الخط شوية */
}

/* --- 4. صندوق "لم تجد العقار" --- */
.request-box {
    margin-top: 50px; /* يبعد عن اللي فوقه */
    padding: 30px 20px;
}

.request-box .btn-neon-large {
    width: 100%; /* الزرار ياخد العرض كامل في الموبايل */
    padding: 15px 0;
    margin-top: 20px;
    display: block;
    text-align: center;
}

/* --- حاوية الكروت (الشبكة) --- */
/* تأكد أن الحاوية الأب (container) واخدة ديسبلاي grid أو flex */
#properties-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* تجاوب تلقائي */
    gap: 25px;
    padding: 20px 0;
}

/* --- تصميم كارت العقار (Glassmorphism) --- */
.property-card {
    background: rgba(255, 255, 255, 0.05); /* زجاجي غامق */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: hidden; /* عشان الصورة متخرجش بره الحواف */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%; /* عشان الكروت كلها تكون نفس الطول */
}

/* تأثير الهوفر على الكارت */
.property-card:hover {
    transform: translateY(-7px); /* يرتفع لفوق */
    box-shadow: 0 10px 25px rgba(0, 242, 96, 0.15); /* ظل نيون أخضر */
    border-color: rgba(0, 242, 96, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

/* --- صورة العقار --- */
.property-card img {
    width: 100%;
    height: 220px; /* ارتفاع ثابت للصورة */
    object-fit: cover; /* الصورة تملأ المساحة بدون مط */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.5s ease;
}

/* تكبير الصورة ببطء عند الهوفر */
.property-card:hover img {
    transform: scale(1.05);
}

/* --- محتوى الكارت --- */
.card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* يملأ المساحة المتبقية */
    text-align: right;
    color: #fff;
}

/* --- العنوان والتاج --- */
.card-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.5;
    display: flex;
    justify-content: space-between; /* العنوان يمين والتاج شمال */
    align-items: flex-start;
    gap: 10px;
}

/* --- السعر --- */
.price {
    font-size: 1.2rem;
    font-weight: 800;
    color: #00f260; /* أخضر نيون */
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(0, 242, 96, 0.2);
}

/* --- التفاصيل (غرف، حمام، مساحة) --- */
.card-content p i {
    color: #0575e6; /* لون الأيقونات أزرق */
    margin-left: 5px;
}

.card-content p {
    color: #bbb;
    font-size: 0.9rem;
    margin-bottom: 20px !important; /* مسافة قبل الزرار */
}

/* --- زر عرض التفاصيل --- */
.view-details-btn {
    margin-top: auto; /* يزق الزرار لآخر الكارت تحت */
    display: block;
    text-align: center;
    background: linear-gradient(90deg, #00f260, #0575e6);
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.view-details-btn:hover {
    box-shadow: 0 5px 20px rgba(0, 242, 96, 0.4);
    transform: scale(1.02);
}

/* --- بادج نوع العقار (للبيع / للإيجار) --- */
/* أنت محتاج تضيف كلاسات للـ spans اللي بتطلع من دالة getTypeTag */
.property-type {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 20px;
    color: #fff;
    white-space: nowrap;
}

.property-type.sale {
    background: rgba(12, 179, 40, 0.8); /* أحمر للبيع */
    border: 1px solid #20e95c;
}

.property-type.rent {
    background: rgba(255, 193, 7, 0.2); /* أصفر للإيجار */
    color: #ffc107;
    border: 1px solid #ffc107;
}

/* --- رسالة الخطأ أو عدم وجود عقارات --- */
.empty-message {
    text-align: center;
    color: #aaa;
    grid-column: 1 / -1; /* تأخذ العرض بالكامل */
    padding: 40px;
    font-size: 1.2rem;
}

/* --- إعدادات الفوتر الرئيسية --- */
.main-footer {
    width: 100%;
    background: rgba(0, 0, 0, 0.8); /* لون أسود غامق وشفاف قليلاً */
    backdrop-filter: blur(10px); /* تمويه الخلفية */
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* خط فاصل علوي */
    padding: 40px 20px;
    margin-top: auto; /* يزق الفوتر لأسفل الصفحة دائماً */
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* تأثير ضوء نيون خفيف في أعلى الفوتر */
.main-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00f260, transparent); /* خط نيون أخضر */
    opacity: 0.5;
}

/* --- محتوى الفوتر --- */
.footer-content {
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Tajawal', sans-serif;
}

/* --- أيقونات السوشيال ميديا --- */
.social-links {
    display: flex;
    justify-content: center;
    gap: 20px; /* مسافة بين الأيقونات */
    margin-bottom: 25px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* دائرة كاملة */
    background: rgba(255, 255, 255, 0.05); /* خلفية زجاجية */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.5rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* حركة نطاطة */
}

/* --- تأثيرات الهوفر (سحر الألوان) --- */

/* 1. فيسبوك (الأزرق) */
.social-links a[href*="facebook"]:hover {
    background: #1877F2;
    border-color: #1877F2;
    box-shadow: 0 0 20px rgba(24, 119, 242, 0.6);
    transform: translateY(-5px);
}

/* 2. انستجرام (التدرج) */
.social-links a[href*="instagram"]:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    border-color: #d6249f;
    box-shadow: 0 0 20px rgba(214, 36, 159, 0.6);
    transform: translateY(-5px);
}

/* 3. واتساب (الأخضر) */
.social-links a[href*="whatsapp"]:hover {
    background: #25D366;
    border-color: #25D366;
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.6);
    transform: translateY(-5px);
}

/* --- النصوص --- */
.contact-info {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    /* تدرج لوني للنص */
    background: linear-gradient(90deg, #fff, #00f260);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-content p:last-child {
    color: #888; /* لون رمادي للحقوق */
    font-size: 0.9rem;
    margin-top: 10px;
}

/* --- التجاوب مع الموبايل --- */
@media (max-width: 480px) {
    .social-links a {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
}

/* --- تعديل الهيدر ليكون ثابتاً في مكانه (لا يتحرك مع السكرول) --- */
.main-header {
    position: relative; /* هذا هو التغيير المهم: يجعل الهيدر جزءاً من الصفحة وليس الشاشة */
    width: 100%;
    z-index: 1000;
    
    /* نفس الستايل الزجاجي القديم عشان نحافظ على الشكل */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    
    padding: 10px 0;
}

/* --- تصفير الهوامش الافتراضية (Global Reset) --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* بيظبط المقاسات عشان متضربش */
}

body, html {
    width: 100%;
    overflow-x: hidden; /* لمنع السكرول العرضي الزائد */
    background-color: #1c2630; /* أو لون الخلفية بتاعك عشان لو في فراغ يبان لونه */
}

/* --- التأكد من الهيدر نفسه --- */
.main-header {
    margin-top: 0 !important; /* إجبار الهيدر يبدأ من الصفر */
    top: 0;
}

/* --- 1. حاوية الهيدر الرئيسية (الثبات والزجاج) --- */
.main-header {
    position: fixed; /* هذا ما يجعله ثابتاً لا يتحرك */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* يضمن ظهوره فوق أي محتوى آخر */
    
    /* الستايل الزجاجي */
    background: rgba(0, 0, 0, 0.7); /* خلفية سوداء شفافة */
    backdrop-filter: blur(15px); /* تمويه ما خلف الهيدر */
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    
    padding: 10px 0;
    transition: all 0.3s ease;
}

/* --- 2. تنسيق المحتوى الداخلي --- */
.header-container {
    display: flex;
    justify-content: space-between; /* اللوجو يمين والروابط شمال */
    align-items: center;
    width: 95%; /* عرض مناسب */
    max-width: 1400px; /* أقصى عرض للشاشات الكبيرة */
    margin: 0 auto;
}

/* --- 3. اللوجو والنص --- */
.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0; /* يمنع اللوجو من الانكماش */
}

.logo {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    border: 2px solid rgba(0, 242, 96, 0.6); /* حدود خضراء نيون */
    object-fit: cover;
}

.logo-text {
    font-family: 'Tajawal', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    /* إخفاء النص في الموبايل لتوفير مساحة */
    white-space: nowrap;
}

/* --- 4. روابط التنقل (Navigation) --- */
.main-nav {
    display: flex;
    align-items: center;
    gap: 10px; /* مسافة بين الأزرار */
}

/* الحاويات الداخلية (guest/user) */
#guest-nav, #user-nav {
    display: flex; /* عشان الأزرار تيجي جنب بعض */
    align-items: center;
    gap: 10px;
}

/* --- 5. تصميم الأزرار (Neon White) --- */
.nav-button {
    text-decoration: none;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 50px;
    transition: all 0.3s ease;
    white-space: nowrap; /* يمنع النص من النزول سطر جديد */
    
    /* الستايل الافتراضي */
    color: #ddd;
    background: transparent;
    border: 1px solid transparent;
}

/* الكلاس الخاص بالنيون الأبيض */
.neon-button-white {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

/* تأثير الهوفر (عند مرور الماوس) */
.nav-button:hover, 
.neon-button-white:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

/* --- 6. تمييز زر "اعرض عقار" --- */
/* لجعله مميزاً عن باقي الأزرار */
a[href="seller-dashboard.html"] {
    background: linear-gradient(45deg, #00f260, #0575e6);
    color: #fff;
    border: none;
    box-shadow: 0 0 10px rgba(0, 242, 96, 0.3);
}

a[href="seller-dashboard.html"]:hover {
    box-shadow: 0 0 20px rgba(0, 242, 96, 0.6);
    background: linear-gradient(45deg, #0575e6, #00f260);
    color: #fff;
}

/* --- 7. التجاوب مع الموبايل (مهم جداً) --- */
@media (max-width: 992px) {
    .logo-text {
        display: none; /* إخفاء نص اللوجو في الشاشات المتوسطة */
    }
}

@media (max-width: 768px) {
    .header-container {
        width: 100%;
        padding: 0 10px;
        flex-direction: column; /* العناصر تحت بعض في الموبايل */
        gap: 10px;
    }

    .main-nav {
        width: 100%;
        overflow-x: auto; /* يسمح بالتمرير الأفقي لو الأزرار كتير */
        padding-bottom: 5px;
        justify-content: center; /* توسيط الأزرار */
    }

    /* تحسين شكل السكرول بار */
    .main-nav::-webkit-scrollbar {
        height: 0px;
        background: transparent;
    }

    .nav-button {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}

/* =========================================
   تنسيق نافذة "قدم عرضك" (Offer Modal Style)
   ========================================= */

/* 1. تنسيق الزر المميز (Make Offer Button) */
.btn-offer {
    background: linear-gradient(135deg, #ff9800, #ff5722); /* تدرج برتقالي جذاب */
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: bold;
    border-radius: 50px; /* حواف دائرية */
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 87, 34, 0.4); /* توهج برتقالي */
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-offer:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 87, 34, 0.6);
    background: linear-gradient(135deg, #ff5722, #ff9800); /* عكس التدرج عند اللمس */
}

/* 2. تنسيق محتوى النافذة (Modal Content) */
.modal-content {
    background: var(--card-bg-color); /* استخدام لون خلفية الكروت الموحد */
    border: 1px solid var(--main-secondary); /* حدود بلون النيون الثانوي */
    box-shadow: 0 0 30px rgba(0, 198, 255, 0.2); /* ظل نيون خفيف */
    padding: 40px;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    position: relative;
    animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* حركة ناعمة */
    color: var(--text-main);
}

/* أيقونة العنوان */
.modal-content h3 i {
    color: #ff9800; /* لون الأيقونة برتقالي */
    font-size: 1.5rem;
    margin-bottom: 10px;
    display: block;
}

/* 3. تنسيق الحقول داخل النافذة */
#offer-form .input-group {
    margin-bottom: 20px;
    text-align: right;
}

#offer-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-main);
    font-size: 0.9rem;
}

/* =========================================
   🔥 إصلاح حقول نافذة العرض (Make Offer Inputs Fix)
   ========================================= */

/* 1. الحالة العادية (قبل الضغط) */
#offer-form input {
    background-color: rgba(255, 255, 255, 0.1) !important; /* خلفية رمادية شفافة واضحة */
    border: 1px solid rgba(255, 255, 255, 0.3) !important; /* حدود فاتحة */
    color: #ffffff !important; /* الكتابة باللون الأبيض */
    caret-color: #00c6ff; /* لون مؤشر الكتابة أزرق نيون */
    font-weight: bold;
}

/* 2. لون النص الإرشادي (Placeholder) */
#offer-form input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important; /* رمادي فاتح */
}

/* 3. عند الضغط (Focus) - الحل هنا */
#offer-form input:focus {
    background-color: rgba(255, 255, 255, 0.2) !important; /* تفتيح الخلفية قليلاً (ليس أبيض) */
    border-color: #ff9800 !important; /* حدود برتقالي (لون العرض) */
    color: #ffffff !important; /* النص يظل أبيض */
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.4) !important; /* توهج برتقالي */
}
/* 4. زر الإغلاق (X) */
.close-modal {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 2rem;
    color: #888;
    cursor: pointer;
    transition: 0.3s;
    line-height: 1;
}

.close-modal:hover {
    color: var(--error-color);
    transform: rotate(90deg);
}

/* 5. حركة الظهور */
@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* 6. زر الإرسال الكبير */
.btn-offer-submit {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #ff9800, #ff5722);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3);
    transition: 0.3s;
}

.btn-offer-submit:hover {
    box-shadow: 0 6px 20px rgba(255, 87, 34, 0.5);
    transform: translateY(-2px);
}

/* ==========================================================================
   7. صفحة التفاصيل (Cinema Mode - عرض كامل)
   ========================================================================== */

/* 1. توسيع الحاوية الرئيسية لتأخذ عرض الشاشة */
.property-detail-container {
    width: 98%;          /* عرض كامل تقريباً */
    max-width: 100%;     /* إلغاء الحد الأقصى القديم (1200px) */
    margin: 20px auto;
    padding: 0 15px;
}

/* 2. تقسيم الشاشة (التفاصيل يمين - الصورة يسار) */
.details-layout {
    display: grid;
    /* العمود الأول (التفاصيل): عرض ثابت 400px */
    /* العمود الثاني (الصورة): 1fr يعني ياخد كل المساحة الباقية */
    grid-template-columns: 400px 1fr; 
    gap: 30px;
    align-items: start; /* محاذاة للأعلى */
}

/* 3. تكبير برواز الصورة ليكون ضخماً وواضحاً */
.main-image-container {
    position: relative;
    width: 100%;
    height: 650px; /* 🔥 زيادة الارتفاع ليكون سينمائياً (كان 450px) */
    overflow: hidden;
    border-radius: 15px; 
    background-color: #000; /* خلفية سوداء لملء الفراغ لو الصورة أبعادها مختلفة */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid var(--main-secondary);
}

/* ضبط الصورة داخل البرواز */
.main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* تظهر كاملة بدون قص */
}

/* تنسيق كارت التفاصيل (الجانبي) */
.details-info-frame {
    background-color: var(--detail-box-bg); 
    color: var(--detail-text-color); 
    border: 1px solid var(--neon-white);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    height: fit-content; /* الطول على قد المحتوى */
    position: sticky; /* 💡 ميزة جديدة: يثبت مكانه وانت بتعمل سكرول */
    top: 100px;
}

/* =========================================
   تحسينات الموبايل والتابلت
   ========================================= */
@media (max-width: 1024px) {
    
    /* 1. جعل التخطيط عمود واحد */
    .details-layout {
        grid-template-columns: 1fr;
        display: flex;      /* تحويله لـ Flex لسهولة التحكم في الترتيب */
        flex-direction: column;
    }

    /* 2. ✅ ترتيب العناصر (التفاصيل أولاً) */
    .details-info-frame {
        order: 1; /* يظهر أولاً */
        position: static; /* إلغاء التثبيت الجانبي */
    }

    /* 3. ✅ ترتيب العناصر (الصور ثانياً) */
    .image-gallery-frame {
        order: 2; /* يظهر ثانياً (تحت التفاصيل) */
        margin-top: 20px;
    }

    /* ضبط ارتفاع الصورة في الموبايل */
    .main-image-container {
        height: 300px;
    }
}

/* =========================================
   تنسيق رسالة تثبيت الآيفون (iOS Prompt)
   ========================================= */
.ios-prompt {
    position: fixed;
    bottom: 20px; /* يظهر أسفل الشاشة */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    background: rgba(28, 38, 48, 0.95); /* لون داكن */
    border: 1px solid var(--secondary-color);
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    text-align: center;
    backdrop-filter: blur(5px);
    animation: slideUpIOS 0.5s ease-out;
}

.ios-prompt-content {
    position: relative;
    width: 100%;
}

.close-ios {
    position: absolute;
    top: -10px;
    left: 0;
    font-size: 20px;
    color: #aaa;
    cursor: pointer;
}

/* السهم اللي بيشاور لتحت */
.ios-arrow {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--secondary-color);
    margin-top: 10px;
    animation: bounceArrow 1.5s infinite;
}

@keyframes slideUpIOS {
    from { bottom: -100px; opacity: 0; }
    to { bottom: 20px; opacity: 1; }
}

@keyframes bounceArrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* =========================================
   تحسينات الموبايل النهائية (Mobile Layout Fixes)
   ========================================= */
@media (max-width: 768px) {

    /* 1. إصلاح منطقة السعر وزر العرض */
    .price-type-info {
        display: flex;
        flex-direction: row-reverse; /* عشان السعر يجي يمين والزرار شمال */
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .detail-price {
        font-size: 1.3rem; /* تصغير السعر سنة بسيطة */
        margin: 0;
        white-space: nowrap; /* منع نزول السعر لسطرين */
    }

    /* تنسيق زر "قدم عرضك" ليكون مضغوطاً وشيك */
    .btn-offer {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
        width: auto !important; /* على قد الكلام */
        min-width: 110px;
        height: 40px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 0 !important;
    }

    /* 2. إصلاح أيقونات المواصفات (غرف - حمامات) */
    .property-specs .specs-list {
        display: flex;
        justify-content: space-between;
        padding: 10px 5px;
        gap: 5px;
    }

    .specs-list li {
        font-size: 0.85rem; /* تصغير الخط عشان يسيع */
        display: flex;
        flex-direction: column; /* الأيقونة فوق والرقم تحت (أشيك في الموبايل) */
        align-items: center;
        gap: 5px;
    }

    .specs-list li i {
        font-size: 1.2rem;
        margin: 0;
        color: var(--main-secondary);
    }

    /* 3. تنظيم أزرار التواصل (واتساب - مشاركة - مفضلة) */
    .action-buttons-group {
        display: grid;
        grid-template-columns: 1fr 1fr; /* عمودين */
        gap: 10px;
        width: 100%;
        margin-top: 20px;
    }

    /* زر الواتساب ياخد العرض كله (لأنه الأهم) */
    .whatsapp-btn {
        grid-column: span 2; 
        width: 100%;
        justify-content: center;
    }

    /* زر المشاركة والمفضلة جنب بعض */
    .action-buttons-group button {
        width: 100%;
        justify-content: center;
        font-size: 0.9rem;
        padding: 10px;
    }
    
    /* إصلاح زر المفضلة (عشان الأيقونة تبقى في النص) */
    #favoriteBtn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* تحسينات عامة */
    .property-detail-container {
        padding: 0 10px;
    }
    
    .details-info-frame {
        padding: 20px 15px; /* تقليل الحواف الداخلية */
    }
}
/* =========================================
   إصلاح عرض الفريم في الموبايل (Full Width Frame)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. توسيع الحاوية الرئيسية للصفحة */
    .centered-page-content {
        width: 98% !important;      /* تجعل العرض 98% من الشاشة */
        max-width: 100% !important; /* إلغاء أي حد أقصى قديم */
        padding: 0 5px !important;  /* تقليل الهوامش الجانبية جداً */
        margin: 10px auto !important; /* توسيط */
    }

    /* 2. توسيع فريم التفاصيل (الصندوق الغامق) */
    .details-info-frame {
        width: 100% !important;
        margin: 0 !important;      /* إزالة الهوامش الخارجية */
        box-sizing: border-box;    /* لضمان حساب الحواف داخل العرض */
        padding: 20px 15px !important; /* ضبط الحشو الداخلي ليكون مريحاً */
    }

    /* 3. توسيع فريم الصورة أيضاً ليتناسق مع التفاصيل */
    .image-gallery-frame {
        width: 100% !important;
    }

    /* 4. التأكد من أن العنوان (التجمع الخامس) في المنتصف تماماً */
    .page-title {
        text-align: center;
        width: 100%;
        font-size: 1.8rem; /* تكبير العنوان قليلاً */
        margin-bottom: 15px;
    }
}

/* =========================================
   تخصيص الموبايل (تظبيط المسافة العلوية)
   ========================================= */
@media (max-width: 768px) {
    
    body {
        /* ✅ في الموبايل: المسافة تكون أقل (مثلاً 90px أو 100px) */
        /* جرب تغير الرقم ده لحد ما تلاقي الهيدر مظبوط فوق المحتوى بالظبط */
        padding-top: 190px !important; 
    }

    /* ... باقي أكواد الموبايل اللي عندك زي ما هي ... */
}

/* =========================================
   إصلاح صفحة تسجيل الدخول في الموبايل
   ========================================= */
@media (max-width: 768px) {
    
    /* استهداف صفحة الدخول فقط عبر الكلاس الخاص بها */
    .centered-body {
        padding-top: 0 !important;      /* إلغاء المسافة العلوية تماماً */
        align-items: center !important; /* إجبار التوسيط العمودي */
        justify-content: center !important; /* إجبار التوسيط الأفقي */
        min-height: 100vh;              /* التأكد من أخذ طول الشاشة كاملة */
    }

    /* تعديل بسيط لحواف الصندوق في الموبايل */
    .auth-frame {
        margin: 0 auto !important;
        width: 90% !important;
        transform: translateY(-20px); /* رفع الصندوق قليلاً للأعلى ليكون في مستوى العين */
    }
}





/* =========================================
   تخصيص الـ Padding للصفحات الخاصة (Dashboards & Request)
   ========================================= */
/* 2. في الموبايل (الضبط الدقيق) */
@media (max-width: 768px) {
    
    .custom-body {
        /* ✅ هنا التظبيطة اللي زي صفحة الدخول */
        
        /* مسافة عشان الهيدر (ضروري عشان مياكلش المحتوى) */
        padding-top: 100px !important; 
        
        /* توسيط المحتوى في نص الشاشة (عمودياً) */
        justify-content: center; 
        min-height: 100vh;
    }

    /* تعديل الصناديق (الفريمات) داخل هذه الصفحات */
    .custom-body .auth-frame, 
    .custom-body .centered-page-content {
        margin-top: 10px !important;    /* تقليل الهامش العلوي */
        margin-bottom: 30px !important; /* مسافة سفلية عشان الفوتر */
        width: 95% !important;          /* عرض مناسب */
    }
}

/* 2. في الموبايل (الضبط الدقيق) */
@media (max-width: 768px) {
    
    .custom-body1 {
        /* ✅ هنا التظبيطة اللي زي صفحة الدخول */
        
        /* مسافة عشان الهيدر (ضروري عشان مياكلش المحتوى) */
        padding-top: 120px !important; 
        
        /* توسيط المحتوى في نص الشاشة (عمودياً) */
        justify-content: center; 
        min-height: 100vh;
    }

    /* تعديل الصناديق (الفريمات) داخل هذه الصفحات */
    .custom-body1 .auth-frame, 
    .custom-body1 .centered-page-content {
        margin-top: 10px !important;    /* تقليل الهامش العلوي */
        margin-bottom: 10px !important; /* مسافة سفلية عشان الفوتر */
        width: 95% !important;          /* عرض مناسب */
    }
}

 .custom-body2 {
        /* ✅ هنا التظبيطة اللي زي صفحة الدخول */
        
        /* مسافة عشان الهيدر (ضروري عشان مياكلش المحتوى) */
        padding-top: 110px !important; 
        
        /* توسيط المحتوى في نص الشاشة (عمودياً) */
        justify-content: center; 
        min-height: 100vh;
    }

    /* تعديل الصناديق (الفريمات) داخل هذه الصفحات */
    .custom-body2 .auth-frame, 
    .custom-body2 .centered-page-content {
        margin-top: 10px !important;    /* تقليل الهامش العلوي */
        margin-bottom: 10px !important; /* مسافة سفلية عشان الفوتر */
        width: 95% !important;          /* عرض مناسب */
    }

    /* ==========================================================================
   4. نظام تسجيل الدخول وإنشاء الحساب (Modern Dark UI)
   ========================================================================== */

/* الصندوق الرئيسي */
.auth-frame {
    width: 95%;
    max-width: 500px; /* عرض مناسب للعين */
    background: rgba(42, 56, 71, 0.7); /* شفافية خفيفة لدمجها مع الخلفية */
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); /* ظل ناعم وقوي */
    margin: 50px auto;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1); /* حدود زجاجية */
    backdrop-filter: blur(10px); /* تأثير الزجاج */
}

/* شريط التنقل (Tabs) - التصميم الجديد */
.auth-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    background: transparent; /* إلغاء الخلفية القديمة */
    border-bottom: 2px solid rgba(255, 255, 255, 0.1); /* خط فاصل */
    padding-bottom: 0;
    box-shadow: none;
    border-radius: 0;
}

.tab-btn {
    flex: 1;
    padding: 15px;
    border: none;
    background: transparent;
    color: #888; /* لون رمادي للزر غير النشط */
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    outline: none;
}

/* الخط المتحرك تحت الزر النشط */
.tab-btn::after {
    content: '';
    position: absolute;
    bottom: -2px; /* على الخط الفاصل بالضبط */
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--main-secondary); /* لون النيون */
    transition: width 0.3s ease;
}

.tab-btn.active {
    color: #fff; /* لون أبيض للنشط */
    background: transparent; /* إلغاء الخلفية البيضاء القديمة */
    box-shadow: none;
    transform: none;
}

.tab-btn.active::after {
    width: 100%; /* الخط يملأ العرض */
}

/* حقول الإدخال (Inputs) */
.input-group { 
    margin-bottom: 20px; 
    text-align: right; 
}

.input-group label { 
    display: block; 
    margin-bottom: 8px; 
    font-weight: 600; 
    color: #ddd; 
    font-size: 0.9rem;
}

.neon-input-white {
    width: 100%;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    outline: none;
    background: rgba(0, 0, 0, 0.2); /* خلفية غامقة شفافة */
    color: #fff;
    transition: 0.3s;
    font-size: 1rem;
}

.neon-input-white:focus {
    border-color: var(--main-secondary);
    box-shadow: 0 0 15px rgba(0, 198, 255, 0.2);
    background: rgba(0, 0, 0, 0.4);
}

/* زر الدخول (Gradient Button) */
.btn-neon-auth {
    width: 100%;
    padding: 15px;
    background: linear-gradient(90deg, #00f260, #0575e6);
    color: white;
    border: none;
    border-radius: 10px; /* حواف ناعمة */
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(0, 114, 255, 0.3);
}

.btn-neon-auth:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 114, 255, 0.5);
}

/* رسائل الخطأ */
.message {
    text-align: center;
    margin-bottom: 20px;
    font-size: 0.9rem;
    padding: 10px;
    border-radius: 8px;
}


.sell-btn {
        font-size: 0.8rem;
        padding: 6px 12px;
        min-width: 110px;
        height: 40px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 0 !important;
}
.sell-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #ff9800, #ff5722);
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3);
    transition: 0.3s;
}
.sell-btn :hover{
    box-shadow: 0 6px 20px rgba(255, 87, 34, 0.5);
    transform: translateY(-2px);
}


/* =========================================
   تصميم حاسبة التوفير (Smart Savings Calculator)
   ========================================= */
.savings-box {
    background: rgba(40, 167, 69, 0.05); /* خلفية خضراء شفافة جداً */
    border: 1px solid #28a745; /* إطار أخضر */
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.savings-header {
    color: #28a745;
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.savings-comparison {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
    padding-bottom: 15px;
}

.saving-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.saving-row .label {
    font-size: 0.85rem;
    color: #aaa;
}

.saving-row .value {
    font-size: 1.1rem;
    font-weight: bold;
}

/* تنسيق السمسار (سلبي) */
.broker .value {
    color: #ff6b6b; /* أحمر */
    text-decoration: line-through; /* مشطوب عليه */
}

/* تنسيق عقارك (إيجابي) */
.aqarak .value {
    color: #2ecc71; /* أخضر فاقع */
    font-size: 1.2rem;
}

/* شريط التوفير النهائي */
.total-saved-banner {
    background: linear-gradient(135deg, #28a745, #218838);
    color: white;
    padding: 10px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
    animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
    70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

/* للموبايل */
@media (max-width: 768px) {
    .savings-comparison {
        flex-direction: row; /* خليهم جنب بعض برضو في الموبايل عشان المقارنة */
        gap: 10px;
    }
    .total-saved-banner {
        font-size: 1rem;
    }
}

/* =========================================
   تصميم حاسبة التوفير العصرية (Modern Savings)
   ========================================= */
.savings-box-modern {
    background: linear-gradient(145deg, #1e2a36, #16202a); /* خلفية متدرجة داكنة */
    border: 1px solid rgba(46, 204, 113, 0.3); /* حدود خضراء خفيفة */
    border-radius: 16px;
    overflow: hidden;
    margin: 25px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
}

/* العنوان */
.savings-header-modern {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
    padding: 12px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(46, 204, 113, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.savings-body {
    padding: 15px;
}

/* صفوف المقارنة */
.compare-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.compare-row:last-child {
    border-bottom: none;
}

.label-col {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #ccc;
}

.value-col {
    font-weight: bold;
    font-size: 1rem;
    font-family: sans-serif; /* للأرقام */
}

/* تنسيق الخسارة (السماسرة) */
.compare-row.bad .text { color: #e74c3c; } /* أحمر */
.compare-row.bad .value-col { 
    color: #e74c3c; 
    text-decoration: line-through; 
    opacity: 0.8;
}

/* تنسيق المكسب (عقارك) */
.compare-row.good .text { color: #2ecc71; } /* أخضر */
.compare-row.good .value-col { color: #2ecc71; font-size: 1.1rem; }

/* الفوتر (المبلغ الموفر) */
.savings-footer {
    background: linear-gradient(90deg, #27ae60, #2ecc71);
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    animation: pulseGlow 2s infinite;
}

.saved-label {
    font-size: 0.9rem;
    margin-bottom: 5px;
    opacity: 0.9;
}

.saved-value {
    font-size: 1.6rem;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 10px rgba(46, 204, 113, 0.5) inset; }
    50% { box-shadow: 0 0 25px rgba(46, 204, 113, 0.8) inset; }
    100% { box-shadow: 0 0 10px rgba(46, 204, 113, 0.5) inset; }
}

/* =========================================
   تصميم صندوق الأمان القانوني (Legal Trust Box)
   ========================================= */
.legal-trust-box {
    background: linear-gradient(135deg, #1c2630, #2c3e50); /* خلفية داكنة فخمة */
    border: 1px solid #00c6ff; /* حدود نيون زرقاء */
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 25px; /* مسافة تحته */
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 0 15px rgba(0, 198, 255, 0.15);
    animation: fadeIn 0.5s ease-in-out;
}

.legal-icon {
    font-size: 2.5rem;
    color: #00c6ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.legal-content h4 {
    color: #00c6ff;
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    font-weight: bold;
}

.legal-content p {
    color: #ddd;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

/* للموبايل */
@media (max-width: 768px) {
    .legal-trust-box {
        flex-direction: row; 
        padding: 15px;
        gap: 15px;
    }
    .legal-icon {
        font-size: 2rem;
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   تنسيق شارات الكروت (Card Badges)
   ========================================= */

/* الحاوية التي تمسك الشارات فوق الصورة */
.card-badges-container {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column; /* الشارات تحت بعضها */
    gap: 5px;
    z-index: 5; /* لتظهر فوق الصورة */
}

/* شكل الشارة الصغيرة */
.badge-card {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    width: fit-content;
}

/* ألوان الشارات */
.badge-legal-small {
    background: #28a745; /* أخضر للقانوني */
    border: 1px solid #218838;
}

.badge-featured-small {
    background: #ffc107; /* ذهبي للمميز */
    color: #000;
    border: 1px solid #e0a800;
}

.badge-legal {
    background: #28a745; /* أخضر للقانوني */
    border: 1px solid #218838;
}

.badge-featured {
    background: #ffc107; /* ذهبي للمميز */
    color: #000;
    border: 1px solid #e0a800;
}

/* =========================================
   تصميم الشارات الاحترافي (Premium Badges)
   ========================================= */

/* الحاوية التي تحمل الشارات فوق الصورة */
.badge-container {
    position: absolute;
    top: 12px;
    right: 12px; 
    display: flex;
    flex-direction: column; /* الشارات تظهر تحت بعض */
    gap: 6px;
    z-index: 20; /* لضمان ظهورها فوق الصورة */
}

/* التصميم الأساسي للشارة */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 50px; /* حواف دائرية بالكامل (كبسولة) */
    font-size: 0.8rem;
    font-weight: 800; /* خط عريض */
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* ظل قوي للوضوح */
    backdrop-filter: blur(4px); /* تأثير زجاجي خلفي */
    transition: transform 0.3s ease;
    cursor: default;
}

.badge:hover {
    transform: scale(1.05); /* تكبير بسيط عند اللمس */
}

/* 🌟 شارة "مميز" (ذهبي ملكي) */
.badge-featured, .badge-featured-small {
    background: linear-gradient(135deg, #FFD700, #FF8C00); /* تدرج ذهبي لبرتقالي */
    border: 1px solid rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* ظل للنص للقراءة */
}

/* 🛡️ شارة "قانوني" (أخضر زمردي - يوحي بالأمان) */
.badge-legal, .badge-legal-small {
    background: linear-gradient(135deg, #00b09b, #96c93d); /* تدرج أخضر منعش */
    border: 1px solid rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* تنسيق الأيقونة داخل الشارة */
.badge i, .badge-card i {
    font-size: 0.9rem;
    background: rgba(0,0,0,0.2); /* دائرة خلفية خفيفة للأيقونة */
    padding: 4px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   تعديل خاص للكروت الصغيرة (في صفحة جميع العقارات)
   ========================================================= */
.card-badges-container {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 5;
}

.badge-card {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    width: fit-content;
}

/* =========================================
   تنسيق شريط تثبيت التطبيق (Install Toast)
   ========================================= */
.install-toast {
    position: fixed;
    bottom: 20px; /* مسافة من الأسفل */
    left: 50%;
    transform: translateX(-50%); /* توسيط */
    width: 90%;
    max-width: 400px;
    background: rgba(28, 38, 48, 0.95); /* لون داكن */
    border: 1px solid var(--main-secondary); /* حدود نيون */
    border-radius: 12px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 10000; /* فوق كل حاجة */
    backdrop-filter: blur(5px);
    animation: slideUpToast 0.5s ease-out;
}

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

.install-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #fff;
}

.install-text {
    display: flex;
    flex-direction: column;
}

.app-name {
    font-weight: bold;
    font-size: 0.95rem;
    color: #fff;
}

.app-desc {
    font-size: 0.75rem;
    color: #ccc;
}

.install-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* زر التثبيت الصغير */
.btn-install-mini {
    background: var(--success-color);
    color: white;
    border: none;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.4);
}

/* زر الإغلاق (X) */
.btn-close-mini {
    background: transparent;
    border: none;
    color: #888;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 5px;
}

@keyframes slideUpToast {
    from { transform: translate(-50%, 100px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* =========================================
   تصميم صندوق "سجل الدخول" (Login Prompt)
   ========================================= */
.login-prompt-box {
    background: linear-gradient(145deg, rgba(28, 38, 48, 0.9), rgba(0, 0, 0, 0.8));
    border: 1px solid var(--main-secondary);
    border-radius: 15px;
    padding: 30px 20px;
    text-align: center;
    margin-top: 25px;
    box-shadow: 0 0 20px rgba(0, 198, 255, 0.1);
    position: relative;
    overflow: hidden;
}

/* تأثير لمعان خفيف */
.login-prompt-box::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(0,198,255,0.1) 0%, transparent 70%);
    animation: rotateGlow 10s linear infinite;
    z-index: 0;
}

.prompt-content {
    position: relative;
    z-index: 1;
}

.lock-icon {
    font-size: 3rem;
    color: var(--main-secondary);
    margin-bottom: 15px;
    text-shadow: 0 0 15px var(--main-secondary);
}

.prompt-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.prompt-text {
    color: #ccc;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.btn-login-prompt {
    display: inline-block;
    background: var(--main-secondary);
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 0 15px var(--main-secondary);
    transition: 0.3s;
}

.btn-login-prompt:hover {
    background: #131010;
    color: var(--main-primary);
    box-shadow: 0 0 25px #fff;
    transform: translateY(-3px);
}

@keyframes rotateGlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}