/*
=========================================================
الملف      : auth_shared.css
القسم      : المصادقة — مشترك

المسؤوليات:
✓ تصميم نافذة المصادقة (modal) بالكامل
✓ التبويبات والنماذج وحقول الإدخال

ممنوع:
✗ تصميم أقسام خارج نافذة المصادقة

أي تعديل بصري على نافذة المصادقة يتم من داخل هذا الملف فقط.
=========================================================
*/
/* =================================================================================================
   ☰ توثيق احترافي — Professional Documentation
   =================================================================================================
   اسم الملف     : نافذة-الدخول.css
   وظيفة الملف   : تصميم نافذة تسجيل الدخول والتسجيل واستعادة كلمة المرور (Modal).
   الأقسام داخله :
   - .auth-modal / .auth-backdrop — الغلاف والخلفية
   - .auth-card — البطاقة المركزية
   - .auth-tabs / .auth-form — التبويبات والنماذج
   - .input-group — حقول الإدخال
   - .form-message — رسائل النجاح/الخطأ
   - قسم التحسينات Polished + خطوات الاستعادة
   - OTP ومؤشر قوة كلمة المرور
   تاريخ التوثيق : 2026-06-05 (الخامس من يونيو 2026)
   ملاحظة        : لم يُحذف أو يُختصر أي سطر من الكود الأصلي — أُضيفت الشروحات فقط.
   ================================================================================================= */


/* auth_modal.css — نافذة تسجيل الدخول والتسجيل
 * .auth-modal     → الطبقة الخارجية (backdrop)
 * .auth-card      → البطاقة الداخلية
 * .auth-tabs      → تبويبات Login/Signup
 * .auth-form      → النموذج النشط
 * .input-group    → حقل إدخال مع label
 * .form-message   → رسائل النجاح/الخطأ
 * .forgot-link    → رابط نسيت الباسورد
 */

/* =================================================================================================
   AUTH MODAL — الطبقة الخارجية للنافذة  |  غلاف النافذة المنبثقة
   - يغطي الشاشة بالكامل (fixed + inset:0) ويتوسّط محتواه.
   - مخفي افتراضياً (display:none) ويظهر عبر الكلاس .show.
   - z-index مرتفع جداً (9999) ليعلو فوق كل عناصر الصفحة.
================================================================================================= */
      .auth-modal {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 9999;
      }

/* STATE: إظهار النافذة (تتحول إلى flex عند إضافة .show) */
      .auth-modal.show {
        display: flex;
      }

/* =================================================================================================
   BACKDROP — الخلفية المعتمة  |  طبقة التعتيم خلف البطاقة
   - تعتيم أسود شبه شفاف مع ضبابية (blur) لإبراز البطاقة.
   - النقر عليها يُستخدم عادةً لإغلاق النافذة.
================================================================================================= */
      .auth-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.72);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
      }

/* =================================================================================================
   AUTH CARD — بطاقة المصادقة  |  الصندوق المركزي للنموذج
   - البطاقة الزجاجية الداكنة التي تحتوي النماذج (دخول/تسجيل/استعادة).
   - عرض مرن مع حد أقصى، وقابلة للتمرير عند طول المحتوى.
   - حدود وظلال متوهجة تمنحها مظهراً احترافياً.
================================================================================================= */
      .auth-card {
        position: relative;
        width: min(94%, 560px);
        max-height: 90vh;
        overflow-y: auto;
        background: linear-gradient(
          180deg,
          rgba(10, 20, 35, 0.96),
          rgba(4, 10, 20, 0.98)
        );
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 28px;
        padding: 32px 28px 26px;
        z-index: 2;
        box-shadow:
          0 20px 60px rgba(0, 0, 0, 0.35),
          0 0 30px rgba(53, 217, 255, 0.08);
      }

/* CLASS: زر الإغلاق (×) الدائري أعلى البطاقة */
      .auth-close {
        position: absolute;
        top: 16px;
        inset-inline-end: 16px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.04);
        color: white;
        font-size: 20px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.3s;
      }

      .auth-close:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(53, 217, 255, 0.3);
      }

      .auth-close:focus-visible,
      .auth-tab:focus-visible,
      .auth-submit:focus-visible,
      .forgot-link:focus-visible,
      .auth-link-btn:focus-visible {
        outline: 2px solid var(--cyan);
        outline-offset: 2px;
      }

/* CLASS: عنوان رأس النموذج (مثل: Welcome Back) */
      .auth-header {
        padding-top: 12px;
      }

      .auth-header h2 {
        font-size: 30px;
        margin-bottom: 8px;
      }

/* CLASS: نص توضيحي أسفل عنوان الرأس */
      .auth-header p {
        color: rgba(255, 255, 255, 0.68);
        line-height: 1.7;
        margin-bottom: 22px;
      }

/* =================================================================================================
   AUTH TABS — تبويبات التبديل  |  تبديل بين تسجيل الدخول والتسجيل
   - شبكة عمودين متساويين لزرّي Login و Signup.
================================================================================================= */
      .auth-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 24px;
      }

/* CLASS: زر تبويب واحد (الحالة العادية) */
      .auth-tab {
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.04);
        color: white;
        font-weight: 700;
        cursor: pointer;
        transition: 0.3s;
      }

/* STATE: التبويب النشط (تدرّج سماوي + توهج) */
      .auth-tab.active {
        background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
        color: #00131e;
        box-shadow: 0 0 16px rgba(53, 217, 255, 0.24);
      }

/* CLASS: نموذج مخفي افتراضياً (display:none) */
      .auth-form {
        display: none;
      }

/* STATE: النموذج النشط الظاهر (display:block) */
      .auth-form.active {
        display: block;
      }

/* =================================================================================================
   FORM ROW — صف حقول مزدوج  |  وضع حقلين جنباً إلى جنب
   - شبكة عمودين لعرض حقلين في سطر واحد (مثل الاسم الأول/الأخير).
================================================================================================= */
      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }

/* =================================================================================================
   INPUT GROUP — مجموعة حقل إدخال  |  حقل مع تسمية (label)
   - الحاوية الأساسية لكل حقل إدخال مع مسافة سفلية ومحاذاة نص.
================================================================================================= */
      .input-group {
        margin-bottom: 16px;
        text-align: left;
      }

/* CLASS: تسمية الحقل (label) فوق المُدخل */
      .input-group label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.84);
      }

/* =================================================================================================
   INPUT FIELDS — حقول الإدخال والقوائم  |  تنسيق input و select
   - حقول داكنة بحواف دائرية وحدود خفيفة بدون إطار تركيز افتراضي.
================================================================================================= */
      .input-group input,
      .input-group select {
        width: 100%;
        padding: 14px 16px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        background: rgba(255, 255, 255, 0.04);
        color: white;
        outline: none;
        /* 16px minimum — iOS Safari auto-zooms the viewport on focus for any
           input under 16px, which then fails to un-zoom reliably; this was
           15px, which triggers that on every login/signup field on iPhone. */
        font-size: 16px;
      }

/* CLASS: لون النص الإرشادي (placeholder) داخل الحقل */
      .input-group input::placeholder {
        color: rgba(255, 255, 255, 0.38);
      }

/* STATE: مظهر الحقل عند التركيز (حدود سماوية + هالة) */
      .input-group input:focus,
      .input-group select:focus {
        border-color: rgba(53, 217, 255, 0.4);
        box-shadow: 0 0 0 3px rgba(53, 217, 255, 0.08);
      }

/* CLASS: تنسيق خيارات القائمة المنسدلة (خلفية داكنة) */
      .input-group select option {
        background: #0b1622;
        color: white;
      }

/* CLASS: زر الإرسال الرئيسي بعرض كامل */
      .auth-submit {
        width: 100%;
        margin-top: 8px;
      }

/* =================================================================================================
   FORM MESSAGE — رسائل النموذج  |  رسائل النجاح والخطأ
   - منطقة تظهر فيها رسائل التحقق أسفل النموذج.
   - لها حالتان: error (خطأ) و success (نجاح).
================================================================================================= */
      .form-message {
        margin-top: 14px;
        font-size: 14px;
        min-height: 20px;
      }

/* STATE: لون رسالة الخطأ */
      .form-message.error {
        color: var(--danger);
      }

/* STATE: لون رسالة النجاح */
      .form-message.success {
        color: var(--success);
      }

/* CLASS: ملاحظة توضيحية لشاشة رمز التحقق (OTP) */
      .otp-note {
        margin-bottom: 16px;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.7;
        font-size: 14px;
      }


/* =================================================================================================
   POLISHED DESIGN — تحسينات الاستعادة  |  تحسينات تصميم المصادقة واستعادة كلمة المرور
   - إعادة ضبط أبعاد وألوان البطاقة ووضع reset-mode.
   - تحسين الحقول، روابط نسيت الباسورد، خطوات الاستعادة،
   - وخانات OTP ومؤشر قوة كلمة المرور.
================================================================================================= */
      /* Polished auth / password reset design */
      .auth-card {
        width: min(94%, 620px);
        border-color: rgba(53, 217, 255, 0.16);
        background:
          radial-gradient(
            circle at 50% 0%,
            rgba(0, 255, 240, 0.1),
            transparent 34%
          ),
          linear-gradient(
            180deg,
            rgba(10, 20, 35, 0.97),
            rgba(4, 10, 20, 0.985)
          );
      }

/* STATE: وضع استعادة كلمة المرور (عرض أوسع للبطاقة) */
      .auth-card.reset-mode {
        width: min(94%, 700px);
      }

      .input-group input,
      .input-group select {
        background: rgba(13, 24, 39, 0.92) !important;
        color: #f5fbff !important;
        border-color: rgba(148, 185, 210, 0.16);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015);
      }

/* FIX: تصحيح ألوان التعبئة التلقائية في متصفح Chrome */
      .input-group input:-webkit-autofill,
      .input-group input:-webkit-autofill:hover,
      .input-group input:-webkit-autofill:focus {
        -webkit-text-fill-color: #f5fbff !important;
        caret-color: #f5fbff;
        box-shadow: 0 0 0 1000px #0d1827 inset !important;
        border: 1px solid rgba(53, 217, 255, 0.34) !important;
        transition: background-color 9999s ease-in-out 0s;
      }

/* =================================================================================================
   LINK BUTTONS — أزرار الروابط النصية  |  روابط مثل: نسيت كلمة المرور
   - أزرار بمظهر رابط (بلا خلفية) بلون سماوي فاتح.
================================================================================================= */
      .forgot-link,
      .auth-link-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0;
        background: transparent;
        color: #9befff;
        cursor: pointer;
        font-weight: 800;
        margin: -4px 0 12px;
        padding: 6px 2px;
        text-decoration: none;
      }

/* STATE: تمرير المؤشر على الروابط (توهج نصي) */
      .forgot-link:hover,
      .auth-link-btn:hover {
        color: #fff;
        text-shadow: 0 0 12px rgba(0, 255, 240, 0.45);
      }

/* CLASS: رأس شاشة الاستعادة (أيقونة + عنوان موسّط) */
      .reset-hero {
        text-align: center;
        margin-bottom: 22px;
      }

/* CLASS: الأيقونة الدائرية المتوهجة أعلى شاشة الاستعادة */
      .reset-icon {
        width: 108px;
        height: 108px;
        margin: 0 auto 18px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 48px;
        color: #53eaff;
        background: radial-gradient(
          circle,
          rgba(0, 255, 240, 0.18),
          rgba(53, 217, 255, 0.035) 62%,
          transparent 70%
        );
        border: 1px solid rgba(53, 217, 255, 0.18);
        box-shadow:
          0 0 42px rgba(0, 255, 240, 0.15),
          inset 0 0 22px rgba(0, 255, 240, 0.08);
      }

/* =================================================================================================
   RESET STEPS — مؤشر مراحل الاستعادة  |  خطوات 1 / 2 / 3
   - صف من الدوائر والخطوط يوضّح مرحلة المستخدم الحالية.
================================================================================================= */
      .reset-steps {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        margin: 2px auto 24px;
        max-width: 420px;
      }

/* CLASS: دائرة رقم المرحلة (الحالة العادية) */
      .reset-step {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.6);
        font-weight: 900;
      }

/* STATE: المرحلة النشطة/المكتملة (متوهجة) */
      .reset-step.active,
      .reset-step.done {
        background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
        color: #00131e;
        box-shadow: 0 0 18px rgba(0, 255, 240, 0.35);
      }

/* CLASS: الخط الواصل بين المراحل */
      .reset-line {
        height: 3px;
        flex: 1;
        background: rgba(255, 255, 255, 0.1);
      }

/* STATE: الخط المكتمل (متوهج) */
      .reset-line.active {
        background: linear-gradient(90deg, var(--cyan), var(--cyan-2));
        box-shadow: 0 0 12px rgba(0, 255, 240, 0.24);
      }

/* =================================================================================================
   OTP BOXES — خانات رمز التحقق  |  صف خانات الكود (6 خانات)
   - شبكة 6 أعمدة، خانة لكل رقم، باتجاه ltr.
================================================================================================= */
      .otp-boxes {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
        direction: ltr;
      }

/* CLASS: خانة رقم واحدة (نص موسّط كبير) */
      .otp-boxes input {
        text-align: center;
        font-size: 24px;
        font-weight: 900;
        padding: 14px 4px;
        letter-spacing: 0;
      }

/* =================================================================================================
   PASSWORD STRENGTH — مؤشر القوة  |  شريط قوة كلمة المرور
   - 6 شرائح تتلوّن تدريجياً حسب data-level.
================================================================================================= */
      .password-strength {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 7px;
        margin: 10px 0 4px;
      }

/* CLASS: شريحة واحدة من المؤشر (افتراضي رمادي) */
      .password-strength span {
        height: 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
      }

/* LEVELS: تلوين الشرائح حسب مستوى القوة (1=خانتان، 2=أربع، 3=الكل) */
      .password-strength[data-level="1"] span:nth-child(-n + 2),
      .password-strength[data-level="2"] span:nth-child(-n + 4),
      .password-strength[data-level="3"] span:nth-child(-n + 6) {
        background: linear-gradient(90deg, #35d9ff, #00fff0);
        box-shadow: 0 0 10px rgba(0, 255, 240, 0.24);
      }

/* CLASS: تذييل نموذج الاستعادة (روابط موسّطة) */
      .reset-footer {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        color: rgba(255, 255, 255, 0.7);
        margin-top: 14px;
      }

/* STATE: الأزرار في وضع التعطيل */
      .auth-submit[disabled],
      .auth-link-btn[disabled] {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
      }