/* ==========================================================================
   Custom Registration & Login Styles (Final Version - 14.0)
   ========================================================================== */

:root {
    --crf-main-color: #C22335;
    --crf-hover-color: #a81e2d;
    --crf-secondary-color: #6c757d;
    --crf-secondary-hover-color: #5a6268;
    --crf-light-gray: #f4f4f5;
    --crf-dark-text: #333;
    --crf-border-color: #ddd;
    --crf-success-color: #15803d;
    --crf-shadow-light: 0 4px 12px rgba(0,0,0,0.05); /* ظل خفيف */
    --crf-shadow-medium: 0 8px 25px rgba(0,0,0,0.1); /* ظل متوسط */
}

/* --- الهيكل العام للفورمات --- */
#crf-container {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    max-width: 500px;
    margin: 20px auto;
}

#crf-container h4 {
    font-size: 22px;
    text-align: center;
    color: var(--crf-dark-text);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 25px;
}

#crf-container hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 25px 0;
}

/* --- الحقول والنصوص --- */
.crf-field {
    margin-bottom: 22px;
}

#crf-container .crf-field label {
    display: block;
    font-weight: 600;
    color: var(--crf-dark-text);
    font-size: 15px;
    
    /* هذا الكود الجديد سيتغلب على تصميم القالب */
    margin-bottom: 5px !important;      /* للتحكم بالمسافة السفلية */
    margin-block-end: 5px !important;   /* للتحكم بالمسافة السفلية ويتغلب على القالب */
}
.crf-asterisk {
    color: red;
    margin-right: 5px;
    font-weight: bold;
}

#crf-container input[type="text"],
#crf-container input[type="password"],
#crf-container input[type="tel"],
#crf-container select,
/* إضافة حقول التكست أريا من صفحة البروموشن */
#crf-container textarea { 
    width: 100%;
    padding: 12px;
    border: 1px solid var(--crf-border-color);
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}

#crf-container input:focus,
#crf-container select:focus,
#crf-container textarea:focus { /* إضافة تكست أريا للفحص */
    outline: none;
    border-color: var(--crf-main-color);
    box-shadow: 0 0 0 2px rgba(194, 35, 53, 0.2);
}

/* --- حقل الهاتف --- */
.crf-phone-container {
    display: flex;
    border: 1px solid var(--crf-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.crf-phone-container:focus-within {
    border-color: var(--crf-main-color);
    box-shadow: 0 0 0 2px rgba(194, 35, 53, 0.2);
}

.crf-phone-prefix {
    padding: 12px;
    background-color: var(--crf-main-color);
    color: #ffffff;
}

#crf_phone_number_only,
#crf_login_phone_only {
    border: none !important;
    box-shadow: none !important;
    padding: 12px;
    direction: ltr;
    flex-grow: 1;
}

.crf-phone-validation-message {
    margin-top: 5px;
    font-weight: bold;
}

/* --- حقل رفع الملف --- */
.crf-file-upload-wrapper {
    position: relative;
    border: 2px dashed var(--crf-border-color);
    padding: 25px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    background-color: var(--crf-light-gray);
}

.crf-file-upload-wrapper:hover {
    border-color: var(--crf-main-color);
}

.crf-file-upload-wrapper input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.crf-file-input-label span {
    font-size: 28px;
    color: #555;
}

.crf-file-name {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    color: var(--crf-main-color);
    font-size: 14px;
}

/* --- الأزرار --- */
#crf-container button {
    width: 100%;
    background-color: var(--crf-main-color); /* لون الخلفية الافتراضي لجميع أزرار الحاوية */
    color: #ffffff;
    border: none;
    padding: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
}

/* التعديل الجديد: لضمان أن أزرار التبديل تكون شفافة تماماً */
#crf-container .crf-login-toggle-buttons .crf-toggle-btn {
    background-color: transparent !important; /* هذا مهم جداً ليتغلب على القاعدة العامة */
}

#crf-container button:hover {
    background-color: var(--crf-hover-color);
}

#crf-container button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

#crf-submit-step1-btn,
#crf-submit-step2-btn,
#crf-submit-login-step1-btn,
#crf-submit-login-step2-btn {
    margin-top: 10px;
}

/* --- قسم إعادة الإرسال والـ OTP --- */
.crf-resend-container {
    margin-top: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

#crf-resend-otp-btn,
#crf-login-resend-otp-btn {
    width: auto;
    background-color: var(--crf-secondary-color);
}

#crf-resend-otp-btn:hover,
#crf-login-resend-otp-btn:hover {
    background-color: var(--crf-secondary-hover-color);
}

.crf-otp-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

#crf-paste-otp-btn,
#crf-paste-login-otp-btn,
.crf-otp-input-group input {
    height: 50px;
    box-sizing: border-box;
}

#crf-paste-otp-btn,
#crf-paste-login-otp-btn {
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    flex-shrink: 0;
    border: 1px solid var(--crf-border-color);
    background-color: var(--crf-light-gray);
    color: #555;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

#crf-paste-otp-btn:hover,
#crf-paste-login-otp-btn:hover {
    background-color: #e2e8f0;
}

.crf-otp-input-group input {
    flex: 1;
    min-width: 0;
    padding: 0 15px !important;
    text-align: center;
    letter-spacing: 8px;
    font-size: 24px !important;
}

/* --- رسائل الحالة والإشعارات --- */
#crf-success-message,
.crf-success-message {
    text-align: center;
    border: 2px solid var(--crf-success-color);
    color: var(--crf-success-color);
    background-color: #f0fdf4;
    padding: 20px;
    border-radius: 8px;
}

.crf-logged-in-notice {
    text-align: center;
    border: 2px solid var(--crf-main-color);
    background-color: #fef2f2;
    color: var(--crf-dark-text);
    padding: 30px;
    border-radius: 12px;
    max-width: 500px;
    margin: 40px auto;
}

.crf-logged-in-notice h4 {
    margin-top: 0;
    font-size: 22px;
    color: var(--crf-main-color);
    margin-bottom: 15px;
}

.crf-logged-in-notice p {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.6;
}

.crf-logged-in-notice a {
    color: var(--crf-main-color);
    font-weight: bold;
    text-decoration: underline;
}

.crf-login-link {
    display: block;
    margin-top: 10px;
    color: var(--crf-main-color);
    text-decoration: underline;
    font-weight: bold;
}

.crf-login-link:hover {
    color: var(--crf-hover-color);
}

/* --- تنسيقات خاصة بفورم تسجيل الدخول --- */
.crf-login-container .crf-register-prompt {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.crf-login-container .crf-register-prompt p {
    margin-bottom: 15px;
    color: var(--crf-dark-text);
}

.crf-login-container .crf-button-secondary {
    display: inline-block;
    width: 100%;
    padding: 12px;
    background-color: transparent;
    border: 1px solid var(--crf-main-color);
    color: var(--crf-main-color);
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    transition: background-color 0.3s, color 0.3s;
}

.crf-login-container .crf-button-secondary:hover {
    background-color: var(--crf-main-color);
    color: #ffffff;
}

/* --- نص قبل الأزرار --- */
.crf-login-toggle-prompt {
    text-align: center;
    font-size: 16px;
    color: var(--crf-dark-text);
    margin-bottom: 15px;
    font-weight: 600;
}

/* --- أزرار التبديل بين طرق تسجيل الدخول (مع تأثير السويتش) --- */
.crf-login-toggle-buttons {
    display: flex;
    position: relative; /* مهم للسلايدر */
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 300px; /* جعل الحجم أصغر */
    height: 40px; /* ارتفاع الأزرار */
    margin: 0 auto 30px auto;
    background-color: #f4f4f5; /* خلفية خفيفة للمفتاح - ستظهر تحت السلايدر وفي الجزء غير النشط */
    border: 2px solid var(--crf-main-color); /* حدود حمراء للمفتاح */
    border-radius: 25px; /* حواف مستديرة للمفتاح */
    overflow: hidden; /* مهم لقص السلايدر إذا خرج عن الحدود */
}

.crf-login-toggle-buttons .crf-toggle-btn {
    flex: 1;
    padding: 0; /* إزالة البادينج الافتراضي */
    height: 100%;
    border: none;
    background-color: transparent; /* الأزرار نفسها شفافة */
    font-weight: 700;
    font-size: 14px; /* حجم الخط أصغر */
    cursor: pointer;
    z-index: 2; /* لجعل الأزرار فوق السلايدر */
    transition: color 0.3s ease; /* للانتقال السلس للون النص */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* لون النص للأزرار غير النشطة (أسود/رمادي داكن) */
.crf-login-toggle-buttons .crf-toggle-btn:not(.active) {
    color: var(--crf-dark-text) !important; /* نص غير نشط أسود/رمادي داكن */
}

/* لون النص للزر النشط (أبيض) */
.crf-login-toggle-buttons .crf-toggle-btn.active {
    color: #fff; /* نص نشط أبيض */
}

/* السلايدر المتحرك (الزر الأحمر الذي ينزلق) */
.crf-toggle-slider {
    position: absolute;
    top: 2px; /* لتطابق عرض الحدود من الأعلى */
    bottom: 2px; /* لتطابق عرض الحدود من الأسفل */
    left: 2px; /* ليكون داخل الحدود من اليسار */
    width: calc(50% - 2px); /* يشغل نصف عرض الحاوية ناقص عرض الحدود (2px من اليسار و 2px من اليمين) */
    background-color: var(--crf-main-color); /* لون السلايدر أحمر */
    border-radius: 23px; /* حواف مستديرة للسلايدر أقل بـ 2px من حواف الحاوية */
    transition: transform 0.3s ease; /* للانتقال السلس */
    z-index: 1; /* ليكون تحت الأزرار */
}

/* حركة السلايدر عند تفعيل الزر الأيمن */
.crf-login-toggle-buttons .crf-toggle-btn[data-target="traditional-login-form"].active ~ .crf-toggle-slider {
    transform: translateX(0); /* تم التعديل: تحريك السلايدر إلى اليسار (الموضع الأصلي) ليتناسب مع الاتجاه RTL */
}
/* حركة السلايدر عند تفعيل الزر الأيسر (الواتساب) - هذا هو الوضع الافتراضي أو عند العودة */
.crf-login-toggle-buttons .crf-toggle-btn[data-target="otp-login-form"].active ~ .crf-toggle-slider {
    transform: translateX(100%); /* تم التعديل: تحريك السلايدر إلى اليمين ليتناسب مع الاتجاه RTL */
}

/* ==========================================================================
   تنسيقات نهائية ومضمونة لصفحة حسابي (سطح المكتب والموبايل)
   ========================================================================== */

/* 1. إخفاء العناصر غير المرغوب فيها من القائمة */
.woocommerce-MyAccount-navigation-link--dashboard,
.woocommerce-MyAccount-navigation-link--downloads {
    display: none !important;
}

/* 2. تصميم القائمة المنسدلة للموبايل (مخفية بشكل افتراضي) */
.crf-mobile-account-nav {
    display: none;
    margin-bottom: 25px;
}
.crf-mobile-account-nav label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}
.crf-mobile-account-nav select {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--crf-border-color);
    border-radius: 8px;
    font-size: 16px;
}

/* 3. تصميم نسخة سطح المكتب */
.woocommerce-account .woocommerce {
    display: flex;
    gap: 30px;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 250px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background-color: #f9fafb;
    padding: 8px;
    align-self: flex-start;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 12px 15px; text-decoration: none; color: #374151; border-radius: 8px; font-weight: 600; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li:not(.is-active) a:hover { background-color: #e5e7eb; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active > a { background-color: var(--crf-main-color); color: #ffffff; }
.woocommerce-account .woocommerce-MyAccount-content { flex: 1; }

/* 4. الكود القوي لفرض التصميم الطولي على الموبايل */
@media (max-width: 768px) {
    /* الخطوة الأهم: إجبار الحاوية الرئيسية على الترتيب الطولي */
    body.woocommerce-account .woocommerce {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* إخفاء القائمة الجانبية العادية */
    body.woocommerce-account .woocommerce-MyAccount-navigation {
        display: none !important;
    }

    /* إظهار القائمة المنسدلة للموبايل */
    body.woocommerce-account .crf-mobile-account-nav {
        display: block !important;
        width: 100%;
    }
    
    /* جعل المحتوى يأخذ العرض الكامل ويظهر أسفل القائمة */
    body.woocommerce-account .woocommerce-MyAccount-content {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}

/* ==========================================================================
   الحل النهائي لمشكلة مسافة النجمة الحمراء
   ========================================================================== */

#crf-container .crf-field label .crf-asterisk {
    /* إعادة تعيين كل الخصائص التي قد تسبب مسافة عمودية */
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
    float: none !important;

    /* الحفاظ على التنسيق المطلوب للنجمة */
    color: red;
    font-weight: bold;
    margin-right: 5px; /* يمكنك تعديل هذه المسافة الأفقية الصغيرة إذا أردت */
}

/* Frontend Promotional Page Styles */
#crf-frontend-admin-page {
    background-color: #ffffff;
    padding: 30px; /* زيادة البادينج لتحسين المظهر */
    border-radius: 16px; /* زيادة استدارة الحواف */
    box-shadow: var(--crf-shadow-medium); /* ظل أكثر بروزاً */
    max-width: 700px;
    margin: 40px auto; /* زيادة الهامش لتحسين التباعد */
    font-family: sans-serif; /* التأكد من خط نظيف */
    color: var(--crf-dark-text);
}

#crf-frontend-admin-page h1 {
    font-size: 28px;
    text-align: center;
    color: var(--crf-main-color);
    margin-bottom: 30px;
    font-weight: 700;
}

#crf-frontend-admin-page p.description {
    font-size: 14px;
    color: var(--crf-secondary-color);
    margin-top: -10px;
    margin-bottom: 20px;
    line-height: 1.5;
}

#crf-frontend-admin-page .crf-field {
    margin-bottom: 25px; /* مسافة أكبر بين الحقول */
}

#crf-frontend-admin-page .crf-field label {
    font-size: 15px;
    margin-bottom: 8px;
    color: var(--crf-dark-text);
    font-weight: 600;
}

#crf-frontend-admin-page input[type="text"],
#crf-frontend-admin-page textarea,
#crf-frontend-admin-page select {
    padding: 14px 15px; /* بادينج أكبر للحقول */
    border: 1px solid #e0e0e0; /* حدود أفتح */
    border-radius: 10px; /* حواف أكثر استدارة */
    font-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#crf-frontend-admin-page input:focus,
#crf-frontend-admin-page textarea:focus,
#crf-frontend-admin-page select:focus {
    border-color: var(--crf-main-color);
    box-shadow: 0 0 0 3px rgba(194, 35, 53, 0.15); /* ظل تركيز محسن */
}

/* General button style for the frontend admin page forms/sections */
#crf-frontend-admin-page button { /* This rule currently applies width: 100% */
    display: block; /* لضمان أن الزر يأخذ السطر كاملاً */
    width: 100%; /* هذا هو المشكلة التي يجب حلها لزر البحث */
    padding: 15px; /* بادينج أكبر للزر */
    background-color: var(--crf-main-color);
    color: #fff;
    border: none;
    border-radius: 10px; /* حواف أكثر استدارة */
    font-size: 18px; /* خط أكبر */
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    margin-top: 30px; /* مسافة أكبر فوق الزر */
    box-shadow: var(--crf-shadow-light);
}

#crf-frontend-admin-page button:hover {
    background-color: var(--crf-hover-color);
    box-shadow: var(--crf-shadow-medium);
}

/* NEW: Specific style for the search button on this page (User Review Page) */
#crf-frontend-admin-page .crf-search-button {
    width: auto; /* Override to auto width for the search button */
    padding: 10px 18px; /* Adjust padding for a smaller search button */
    font-size: 16px; /* Adjust font size */
    box-shadow: var(--crf-shadow-light); /* Apply a specific shadow */
    margin-top: 0; /* Remove top margin if it's interfering with alignment */
}

/* Also refine the search input and container for better alignment */
#crf-frontend-admin-page .crf-search-box {
    display: flex; /* Use flexbox for horizontal alignment */
    gap: 15px; /* Space between search input and button */
    align-items: center; /* Vertically align them */
    margin-bottom: 30px; /* Add some margin below the search box */
}

#crf-frontend-admin-page #crf-live-search-input {
    flex-grow: 1; /* Allow input to grow and take available space */
    /* Ensure no max-width interfering, if any from previous rules */
    max-width: none;
    padding: 12px 15px; /* Ensure consistent padding */
    border-radius: 10px; /* Consistent border-radius */
}


/* تنسيقات خاصة بقائمة نتائج البحث عن المنتجات */
#crf-frontend-admin-page #crf-search-results { /* استخدام id="crf-search-results" */
    background-color: #fff;
    border: 1px solid #eee;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: var(--crf-shadow-light);
    margin-top: 8px;
    padding: 0;
    list-style: none;
    z-index: 10; /* للتأكد من أنها تظهر فوق العناصر الأخرى */
    position: absolute; /* مهم لتظهر النتائج بشكل صحيح */
    width: calc(100% - 30px); /* عرض النتائج مطابق للعرض الكلي للحاوية مع البادينج */
    left: 15px; /* يتماشى مع بادينج الحاوية الأم */
    right: 15px; /* يتماشى مع بادينج الحاوية الأم */
}

#crf-frontend-admin-page #crf-search-results li {
    padding: 12px 15px;
    border-bottom: 1px solid #f8f8f8;
    cursor: pointer;
    font-size: 15px;
    color: var(--crf-dark-text);
    transition: background-color 0.2s ease;
}

#crf-frontend-admin-page #crf-search-results li:last-child {
    border-bottom: none;
}

#crf-frontend-admin-page #crf-search-results li:hover {
    background-color: #f0f0f0;
}

#crf-frontend-admin-page #selected_product_display {
    margin-top: 10px;
    font-size: 14px;
    color: var(--crf-success-color);
    font-weight: 600;
}

/* رسائل الحالة */
#crf-promo-message-status {
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 8px;
    font-size: 15px;
    text-align: center;
    font-weight: 600;
}

#crf-promo-message-status.notice-success {
    background-color: #d4edda;
    color: #155724;
    border-color: #badbcc;
}

#crf-promo-message-status.notice-error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

/* تحسين الاستجابة للموبايل */
@media (max-width: 600px) {
    #crf-frontend-admin-page {
        padding: 20px; /* تقليل البادينج على الموبايل */
        margin: 20px auto;
    }

    #crf-frontend-admin-page h1 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    #crf-frontend-admin-page button {
        font-size: 16px;
        padding: 12px;
    }

    #crf-frontend-admin-page .crf-search-box {
        flex-direction: column; /* جعل حقل البحث والزر يظهران فوق بعضهما على الموبايل */
        align-items: stretch; /* لجعلهم يأخذون العرض الكامل */
    }

    #crf-frontend-admin-page .crf-search-button {
        width: 100%; /* جعل الزر يأخذ العرض الكامل على الموبايل */
    }
}



/* --- Field-level Error Styles --- */

.crf-field-error {
    color: #C22335; /* لون أحمر مطابق للون الرئيسي */
    font-size: 14px;
    font-weight: 600;
    margin-top: 6px;
    display: none; /* يتم إظهاره عبر الجافاسكريبت */
}

/* تحديد الحقول التي بها خطأ */
#crf-container input.crf-input-error,
#crf-container select.crf-input-error {
    border-color: #C22335 !important;
    box-shadow: 0 0 0 2px rgba(194, 35, 53, 0.2) !important;
}

/* تحديد حاوية الهاتف التي بها خطأ */
.crf-phone-container.crf-input-error {
    border-color: #C22335 !important;
    box-shadow: 0 0 0 2px rgba(194, 35, 53, 0.2) !important;
}

/* تحديد حقل رفع الملف الذي به خطأ */
.crf-file-upload-wrapper.crf-input-error {
    border-color: #C22335 !important;
    border-style: dashed;
}