/* =========================================================
   LOGIN CONTAINER
   مسؤول عن توسيط نافذة Login في الصفحة
========================================================= */

.login-container {
    position: absolute;              /* يغطي مساحة الصفحة */
    inset: 0;                        /* أعلى/يمين/أسفل/يسار = 0 */

    display: flex;                   /* لتوسيط الصندوق */
    align-items: center;             /* توسيط رأسي */
    justify-content: center;         /* توسيط أفقي */

    z-index: 99990;                  /* فوق باقي الصفحة */
}


/* =========================================================
   LOGIN BOX
   الصندوق الأبيض مثل الصورة
========================================================= */

.login-box {
    position: relative;              /* مرجع للعناصر الداخلية */

    width: 500px;                    /* عرض الصندوق */
    height: 330px;                   /* ارتفاع الصندوق - أقل من السابق */

    display: flex;                   /* يسار + يمين */

    background: #ffffff;             /* خلفية بيضاء */

    border-radius: 8px;              /* تدوير الزوايا */

    box-shadow:
        0 0 25px rgba(0,0,0,.35);   /* ظل الصندوق */

    box-sizing: border-box;           /* الحدود ضمن الحجم */

    overflow: hidden;                 /* عدم خروج العناصر */
}


/* =========================================================
   الجزء الأيسر
========================================================= */

.loginleft {
    position: relative;              /* مرجع للعناصر الداخلية */

    width: 65%;                      /* 65% من الصندوق */
    height: 100%;                    /* كامل الارتفاع */

    padding:
        25px 20px 20px 25px;        /* أعلى - يمين - أسفل - يسار */

    box-sizing: border-box;           /* Padding داخل الحجم */
}


/* =========================================================
   العنوان
========================================================= */

.login-container h1 {
    display: flex;                   /* Sunexe + Version بجوار بعض */

    align-items: baseline;           /* محاذاة النصين */

    margin:
        0 0 12px 0;                 /* مسافة أسفل العنوان */

    padding: 0;

    font-size: 20px;                 /* حجم Sunexe */

    font-weight: bold;               /* خط عريض */

    color: #000000;                  /* أسود */
}


/* =========================================================
   VERSION
========================================================= */

.login-container .version {
    margin-left: 5px;                /* مسافة بعد Sunexe */

    font-size: 12px;                 /* حجم الإصدار */

    font-weight: bold;               /* مثل الصورة */

    color: #999999;                  /* رمادي */
}


/* =========================================================
   USERNAME + PASSWORD
========================================================= */

.login-container input[type="text"],
.login-container input[type="password"] {
    display: block;

    width: 100%;                     /* ملء الجزء الأيسر */

    height: 34px;                    /* ارتفاع الحقل */

    margin:
        0 0 10px 0;                 /* 10px بين الحقول */

    padding:
        0 10px;                     /* مسافة داخلية يمين ويسار */

    box-sizing: border-box;

    background: #ffffff;

    border:
        1px solid #cccccc;

    border-radius: 8px;

    font-family:
        Tahoma,
        Arial;

    font-size: 11px;

    color: #333333;

    outline: none;
}


/* =========================================================
   INPUT FOCUS
========================================================= */

.login-container input[type="text"]:focus,
.login-container input[type="password"]:focus {
    border:
        2px solid #222222;           /* مثل تحديد Username في الصورة */
}


/* =========================================================
   BUTTON GROUP
========================================================= */

.button-group {
    width: 100%;                     /* نفس عرض الحقول */

    display: flex;                   /* Login + Cancel */

    gap: 10px;                       /* المسافة بين الزرين */

    margin:
        0 0 15px 0;                 /* مسافة بعد الأزرار */
}


/* =========================================================
   LOGIN + CANCEL
========================================================= */

.modern-button {
    flex: 1;                         /* الزران متساويان */

    height: 28px;                    /* ارتفاع الزر */

    padding: 0;

    box-sizing: border-box;

    border: none;

    border-radius: 8px;

    background:
        #e0e0e0;

    font-family:
        Tahoma,
        Arial;

    font-size: 11px;

    color: #000000;

    -webkit-text-fill-color:
        #000000;

    -webkit-appearance: none;

    appearance: none;

    cursor: pointer;

    transition:
        background-color .25s ease;
}


/* =========================================================
   BUTTON HOVER
========================================================= */

.modern-button:hover {
    background:
        #abbacf;
}


/* =========================================================
   FORGET PASSWORD
========================================================= */

.login-container .forgot-password {
    margin:
        0 0 18px 0;                  /* مسافة قبل شعار Protection */

    padding: 0;

    font-size: 12px;

    color: #333333;

    text-decoration: underline;

    cursor: pointer;
}


/* =========================================================
   شعار Protection
   Image19 الموجود عندك
========================================================= */

.login-container .bigImage {
    display: block;

    width: 170px;                     /* عرض شعار Protection */

    height: 55px;                     /* مساحة الشعار */

    object-fit: contain;              /* بدون تشويه */

    object-position: left center;     /* يبدأ من اليسار */

    margin: 0;                        /* بدون مسافات إضافية */
}


/* =========================================================
   الجزء الأيمن
========================================================= */

.loginright {
    width: 50%;                       /* الجزء الخاص بالمكعب */

    height: 100%;

    display: flex;

         /* المكعب في الأعلى */

    justify-content: center;          /* توسيطه في الجزء الأيمن */

    padding:
        20px 20px 0 0;

    box-sizing: border-box;
}


/* =========================================================
   RUBIK CUBE
========================================================= */

.rubik-image {
    display: block;

    width: 180px;                     /* حجم المكعب */

    height: auto;                     /* الحفاظ على النسبة */

    max-width: 80%;

    object-fit: contain;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.login-container .copyright {
    position: absolute;               /* تثبيت النص داخل الصندوق */

    left: 5px;                       /* نفس بداية العناصر */

    bottom: 10px;                     /* المسافة من الأسفل */

    width: auto;

    margin: 0;

    padding: 0;

    font-size: 10px;

    color: #aaaaaa;

    white-space: nowrap;
}