/*=====================================
  النمط العام والاحتواء (Container & Wrapper)
=====================================*/

/* الهيكل الخارجي: خلفية الصفحة */
.content-loginTwo {
    /* لون الخلفية الأساسي للشاشات الصغيرة والمتوسطة (أزرق داكن) */
    background-color: #0A4A7A;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* الإطار الرئيسي لتسجيل الدخول */
    .content-loginTwo .con-login {
        /* تم تفعيل الـ box-shadow والـ overflow لإنشاء شكل الإطار */
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        border-radius: 12px; /* زيادة حواف مدورة لتحسين الشكل */
        overflow: hidden;
        max-width: 90vw;
        width: 90%;
    }

    /* العمود الأيمن (خلفية الفورم) */
    .content-loginTwo .col-lg-6.col-xl-5.b-text {
        background-color: #ffffff;
        padding: 0;
    }

    /* المحتوى داخل العمود الأيمن */
    .content-loginTwo .my-content {
        /* إلغاء الخلفية البيضاء من هنا لضمان استخدام خلفية العمود */
        /* background-color: #fff !important; */
        padding: 3rem; /* تعديل الـ padding ليكون متناسقاً */
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
.my-content {
    background-color: #fff !important;
}
    /*=====================================
  تنسيق عناصر الفورم (Form Elements)
=====================================*/

    /* حقول الإدخال */
    .content-loginTwo .cont-input input {
        background-color: #f7f7f7 !important; /* خلفية فاتحة بسيطة */
        border: 1px solid #e0e0e0 !important;
        color: #333 !important; /* لون نص داكن واضح */
        border-radius: 8px !important;
        box-shadow: none !important; /* إلغاء الظل الداخلي لتحسين الشكل */
        padding-right: 45px !important; /* مسافة للأيقونة */
        padding-left: 15px; /* مسافة داخلية لليسار */
        height: 55px; /* تحديد ارتفاع ثابت لتحسين الشكل */
    }

    /* أيقونات حقول الإدخال */
    .content-loginTwo .cont-input i {
        color: #0A4A7A; /* لون الأيقونة */
        left: 15px; /* تعديل من 'left' إلى 'right' لتناسب اللغة العربية */
        right: auto;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }

    /* زر الدخول (btn-primary0) */
    .content-loginTwo .btn-primary0 {
        background-color: #0A4A7A !important;
        border: 1px solid #0A4A7A !important;
        color: #ffffff !important;
        border-radius: 50px !important; /* شكل دائري كامل للأزرار */
        box-shadow: 0 6px 12px rgba(10, 74, 122, 0.4);
        transition: all 0.3s ease;
        font-size: 1.1rem;
        height: 50px;
        display: flex; /* لمركزة الأيقونة والنص */
        align-items: center;
        justify-content: center;
    }

        .content-loginTwo .btn-primary0:hover {
            background-color: #0D5D92 !important;
            border-color: #0D5D92 !important;
            box-shadow: 0 8px 16px rgba(10, 74, 122, 0.6);
        }

        .content-loginTwo .btn-primary0 i {
            margin-left: 10px; /* مسافة بين الأيقونة والنص */
        }

    /*=====================================
  تنسيق الروابط والنصوص
=====================================*/

    /* النص في "تذكرني" و "نسيت كلمة المرور" */
    .content-loginTwo .text-white,
    .content-loginTwo .custom-check label {
        color: #666 !important; /* استخدام لون رمادي داكن ليتناسب مع الخلفية البيضاء */
    }

        .content-loginTwo .text-white a {
            color: #0A4A7A !important; /* لون أزرق للروابط داخلها */
        }

    /* الروابط السفلية (الدعم الفني، عن الشركة) */
    .content-loginTwo .links {
        margin-top: 30px;
        text-align: center;
        display: flex;
        justify-content: space-around;
        padding-top: 15px;
        border-top: 1px solid #eee;
    }

        .content-loginTwo .links a {
            color: #0A4A7A !important;
            font-weight: 500;
            transition: color 0.2s;
            font-size: 0.9rem;
        }

            .content-loginTwo .links a:hover {
                color: #0D5D92 !important;
            }

    /* حقوق الملكية على الصورة (العمود الأيسر) */
    .content-loginTwo .copyright small,
    .content-loginTwo .copyright a {
        color: #ffffff !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* إضافة ظل بسيط للنص لظهوره فوق الصورة */
    }

    /*=====================================
  تصحيح خلفية الصورة (العمود الأيسر)
=====================================*/

    /* تأكد من أن الـ background-img هو الخلفية وليس العنصر (bg-img) نفسه */
    .content-loginTwo .bg-img {
        background-size: cover;
        background-position: center;
        height: 100%; /* تأكد من ملء الارتفاع */
        min-height: 400px; /* ارتفاع أدنى في حال عدم وجود صورة أو في الشاشات الصغيرة */
        border-radius: 0 12px 12px 0; /* حواف مدورة للجهة اليسرى */
    }
        /* يجب أن نضع الصورة التي في HTML كخلفية لـ div إذا كانت غير ظاهرة */
        /* بما أنك تستخدم <img>، يجب التأكد من أن الارتفاع مطبق */
        .content-loginTwo .bg-img img {
            height: 70%;
            width: 80%;
            object-fit: cover; /* لملء المساحة دون تشويه */
            border-radius: 0 12px 12px 0;
        }

/*=====================================
  الخلفية المقسمة (الشاشات الكبيرة فما فوق)
=====================================*/
@media (min-width: 992px) {
    .content-loginTwo {
        /* تطبيق التدرج المقسم: أبيض (للفورم) 50% على اليمين، أزرق 50% على اليسار */
        background: linear-gradient(to left, #ffffff 50%, #0A4A7A 50%) !important;
    }

        .content-loginTwo .con-login {
            max-width: 1000px; /* تحديد عرض مناسب للحاوية */
            width: 80%;
            height: 60vh;
            min-height: 550px;
        }
}