:root {
    /* الألوان الافتراضية للهوية البصرية */
    --primary-color: #8c734b;
    --primary-hover: #7f6340;
    --accent-color: #ffc107;
    /* ألوان الخلفيات والنصوص في الهيدر والأزرار */
    --header-bg: #8c734b;
    --header-text: #ffffff;
    --btn-primary-bg: #8c734b;
    --btn-text-color: #ffffff;
}

/*
    مقياس rem موحّد على 16px في كل العروض.
    كان الجذر 14px على الموبايل و16px على الديسكتوب، وهو ما جعل كل الأحجام
    المكتوبة بالـ rem (وكل أحجام هذا المشروع بالـ rem) تنكمش 12.5% على الهاتف
    تحديداً — حيث تشتدّ الحاجة للقراءة لا العكس. وكانت الصفحات الثلاث التي
    تستخدم Layout = null لا تُحمّل هذا الملف أصلاً فتعمل على 16px، فينتج عن ذلك
    مقياسان مختلفان لنفس الفئة بين الصفحة الرئيسية وبقية الصفحات.
    التكبير التفصيلي للموبايل يكمله wwwroot/css/mobile-typography.css.
*/
html {
    font-size: 16px;
    position: relative;
    min-height: 100%;
}

/* هامش سفلي مخصص للهواتف لضمان عدم تغطية المحتوى بواسطة شريط التنقل السفلي */
@media (max-width: 767.98px) {
    body {
        padding-bottom: 60px;
    }
}

/* ========================================================
   تخصيص الهيدر وشريط الملاحة (Dynamic Header)
   ======================================================== */
.navbar-brainskill,
.custom-header {
    background-color: var(--header-bg) !important;
    color: var(--header-text) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .navbar-brainskill .nav-link,
    .navbar-brainskill .navbar-brand,
    .custom-header .nav-link,
    .custom-header .navbar-brand {
        color: var(--header-text) !important;
    }

        .navbar-brainskill .nav-link:hover,
        .custom-header .nav-link:hover {
            opacity: 0.85;
        }

    /* الأزرار الشفافة داخل الهيدر */
    .navbar-brainskill .btn-outline-light {
        color: var(--header-text) !important;
        border-color: var(--header-text) !important;
    }

        .navbar-brainskill .btn-outline-light:hover {
            background-color: var(--header-text) !important;
            color: var(--primary-color) !important;
        }

/* زر الإعدادات المدوّر في الهيدر */
.btn-settings-header {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: var(--primary-color) !important;
    border: none;
}

    .btn-settings-header:hover {
        background-color: #ffffff !important;
    }

/* زر إضافة عقار / الزر المميز */
.btn-accent-header {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #000000 !important;
}

/* ========================================================
   تخصيص الأزرار والتركيز (Dynamic Buttons & Focus)
   ======================================================== */
.btn-primary {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
    color: var(--btn-text-color) !important;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--primary-hover) !important;
        border-color: var(--primary-hover) !important;
        color: var(--btn-text-color) !important;
    }

/* تخصيص التركيز (Focus) بحلقة اللون الديناميكي */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #ffffff, 0 0 0 0.25rem var(--primary-color);
    border-color: var(--primary-color);
}

/* ========================================================
   حقول الإدخال والـ Placeholders
   ======================================================== */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
}

/* ========================================================
   تنسيق وصور المعرض والسلايد الرئيسي
   ======================================================== */

/* فرض أبعاد صارمة وموحدة على حاوية الصورة الرئيسية والصورة بداخلها */
.hero-map-wrapper {
    height: 480px !important;
    max-height: 480px !important;
    width: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
    background-color: #f8f9fa;
}

    /* جعل الصورة ملء الحاوية تماماً دون أي زيادة أو خروج */
    .hero-map-wrapper img,
    .hero-map-img,
    .property-main-image,
    .property-card-img,
    .swiper-slide img {
        width: 100% !important;
        height: 100% !important;
        max-height: 480px !important;
        object-fit: cover !important;
    }

/* تثبيت أبعاد المعرض المصغر */
.property-thumb-card {
    height: 120px !important;
    overflow: hidden !important;
}

    .property-thumb-card img {
        width: 100% !important;
        height: 120px !important;
        object-fit: cover !important;
    }