/* =============================================== */
/* == تنسيقات الأيقونات داخل الحقول - الحل النهائي == */
/* =============================================== */

/* 1. الحاوية الأساسية: هي التي ستظهر كإطار للحقل */
.input-with-icon {
    display: flex !important;
    align-items: center !important;
    border: 2px solid #ddd !important; /* الإطار الخارجي */
    border-radius: 8px !important;
    background-color: #fff !important;
    height: 50px !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin-bottom: 15px;
}

/* 2. الأيقونة: ستكون الآن محبوسة داخل الإطار */
.field-icon {
    width: 44px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #3f51b5 !important;
    flex-shrink: 0 !important;
    /* إزالة أي تموضع مطلق قديم */
    position: static !important;
}

/* 3. الحقل الحقيقي: ننزع منه الإطار ليتداخل مع الحاوية */
.input-with-icon input {
    flex: 1 !important;
    border: none !important; /* حذف إطار الحقل الداخلي */
    outline: none !important;
    height: 100% !important;
    background: transparent !important;
    padding: 0 10px !important;
    font-size: 1rem !important;
}

/* 4. دعم اتجاه اللغة (RTL) - مهم جداً */
/* في نظام Flex، الوضع الافتراضي (row) يضع العناصر من اليمين لليسار في RTL */
/* لذا الأيقونة (العنصر الأول في HTML) ستظهر تلقائياً على اليمين دون الحاجة لعكس الاتجاه */
html[dir="rtl"] .input-with-icon {
    flex-direction: row !important;
}

/* 5. تأثير عند الضغط (Focus) */
.input-with-icon:focus-within {
    border-color: #3f51b5 !important;
    box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.1) !important;
}

/* =============================================== */
/* == حاوية كلمة المرور - نفس المنطق == */
/* =============================================== */

/* 1. الحاوية الأساسية لكلمة المرور */
.password-wrapper.modern-password {
    display: flex !important;
    align-items: center !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    height: 50px !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin-bottom: 15px;
}

/* 2. أيقونة القفل */
.password-wrapper.modern-password .field-icon {
    width: 44px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #3f51b5 !important;
    flex-shrink: 0 !important;
    position: static !important;
}

/* 3. حقل كلمة المرور */
.password-wrapper.modern-password input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    height: 100% !important;
    background: transparent !important;
    padding: 0 10px !important;
    font-size: 1rem !important;
}

/* 4. زر إظهار/إخفاء كلمة المرور المطور */
.password-wrapper.modern-password .toggle-password {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: #757575 !important;
    transition: all 0.3s ease !important;
    position: static !important;
    outline: none !important;
    flex-shrink: 0 !important;
    line-height: 0 !important;
}

/* إزالة أي أيقونات إضافية قد تأتي من التنسيقات العامة للنماذج */
.password-wrapper.modern-password .toggle-password::before,
.password-wrapper .toggle-password::before {
    content: none !important;
}

.password-wrapper.modern-password .toggle-password:hover {
    color: #3f51b5 !important;
    background-color: rgba(63, 81, 181, 0.05) !important;
}

/* حالة العين عند تفعيل "إظهار كلمة المرور" */
.password-wrapper.modern-password .toggle-password.is-visible {
    color: #ff5722 !important; /* لون برتقالي محمر للتنبيه */
}

/* تنسيق الخط المائل الأنيق */
.password-wrapper.modern-password .toggle-password.is-visible svg .slash-line {
    stroke: #d32f2f !important; /* لون أحمر غامق للخط المائل */
    stroke-width: 2.5px !important;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.2));
}

/* 5. دعم RTL لكلمة المرور */
html[dir="rtl"] .password-wrapper.modern-password {
    flex-direction: row !important;
}

/* 6. تأثير Focus لكلمة المرور */
.password-wrapper.modern-password:focus-within {
    border-color: #3f51b5 !important;
    box-shadow: 0 0 0 3px rgba(63, 89, 181, 0.1) !important;
}

/* توحيد مقاسات الـ SVG داخل الحقول لضمان المحاذاة */
.input-with-icon svg, 
.password-wrapper svg {
    display: inline-block !important;
    margin: auto !important; /* التوسيط التلقائي داخل Flex */
    width: 20px !important; /* توحيد العرض */
    height: 20px !important; /* توحيد الارتفاع */
    flex-shrink: 0 !important;
    pointer-events: none;
}

/* =============================================== */
/* == تنسيقات إضافية للحقول الخاصة == */
/* =============================================== */

/* حقول تاريخ الميلاد والجنس */
.birthdate-label-wrapper,
.gender-label-wrapper {
    display: flex !important;
    align-items: center !important;
    border: none !important;
    background-color: transparent !important;
    height: auto !important;
    width: auto !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    gap: 8px !important;
    flex-direction: row !important; /* الترتيب الطبيعي حسب اتجاه اللغة (يسار في الإنجليزية ويمين في العربية) */
}

.birthdate-label,
.gender-label {
    flex: none !important;
    font-weight: 600 !important;
    color: #555 !important;
}

/* تصغير حجم حاوية الأيقونة لتناسب النص */
.birthdate-label-wrapper .field-icon,
.gender-label-wrapper .field-icon {
    width: auto !important;
    height: auto !important;
}