.elementor-16 .elementor-element.elementor-element-bccdd41{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-16 .elementor-element.elementor-element-047477d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-16 .elementor-element.elementor-element-609d958 .elementor-heading-title{color:#EE35FF;}.elementor-16 .elementor-element.elementor-element-902a1e1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-16 .elementor-element.elementor-element-495c0bd .elementor-heading-title{color:#EE35FF;}.elementor-16 .elementor-element.elementor-element-59964d9{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-16 .elementor-element.elementor-element-37b847b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-16 .elementor-element.elementor-element-2bbf6e0 > .elementor-widget-container{padding:0px 0px 0px 0px;}body.elementor-page-16:not(.elementor-motion-effects-element-type-background), body.elementor-page-16 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #000000 0%, #000000 100%);}@media(max-width:767px){.elementor-16 .elementor-element.elementor-element-59964d9{--min-height:0px;}}@media(min-width:768px){.elementor-16 .elementor-element.elementor-element-047477d{--width:50%;}.elementor-16 .elementor-element.elementor-element-902a1e1{--width:50%;}.elementor-16 .elementor-element.elementor-element-37b847b{--width:50%;}}/* Start custom CSS for container, class: .elementor-element-bccdd41 *//* --- الكود الأول: إخفاء العناوين الوردية عند الدخول --- */

/* يخفي أي عنوان H2 (مثل Se connecter) عندما يكون الزبون داخل الحساب */
body.logged-in .woocommerce-account h2 {
    display: none !important;
}

/* يخفي الكلاسات الخاصة بك إذا كانت منفصلة */
body.logged-in .Se-connecter-class, 
body.logged-in .Sinscrire-class {
    display: none !important;
}

/* يخفي القسم العلوي بالكامل إذا كان في حاوية منفصلة (اختياري لضمان النظافة) */
body.logged-in .elementor-widget-heading {
    display: none !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-2bbf6e0 *//* --- الجزء الخاص بتنظيف العناوين --- */
body.logged-in .Se-connecter-class, 
body.logged-in .Sinscrire-class,
body.logged-in h2 {
    display: none !important;
}

/* --- الجزء الخاص بتنسيق الأزرار (تحت بعض + أنيميشن) --- */
.woocommerce-account .woocommerce {
    display: flex !important;
    gap: 60px !important; /* زيادة المسافة بين الأزرار والمحتوى */
    align-items: flex-start !important;
}

.woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 250px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.woocommerce-MyAccount-navigation ul li {
    background: #111 !important; 
    border: 1px solid #222 !important;
    border-radius: 10px !important;
    transition: all 0.3s ease-in-out !important;
}

.woocommerce-MyAccount-navigation ul li a {
    padding: 15px 20px !important;
    display: block !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* حالة الزر النشط (Dashboard) - جعلناه مثل البقية */
.woocommerce-MyAccount-navigation ul li.is-active {
    background: #111 !important;
    border-color: #222 !important;
}

/* تأثير التحويم (Hover) والضغط - التوهج البنفسجي */
.woocommerce-MyAccount-navigation ul li:hover,
.woocommerce-MyAccount-navigation ul li.is-active:hover {
    background: #6200ea !important;
    border-color: #6200ea !important;
    transform: translateX(10px) !important;
    box-shadow: 0 0 20px rgba(98, 0, 234, 0.5) !important;
}

/* --- الجزء الخاص بإصلاح الكتابة والمسافات (الجهة اليمنى) --- */
.woocommerce-MyAccount-content {
    flex: 1 !important;
    padding: 10px 40px !important; /* ابتعاد النص عن الحافة */
    color: #ffffff !important; /* الكتابة بيضاء ناصعة */
    background: transparent !important;
    border: none !important;
}

.woocommerce-MyAccount-content p, 
.woocommerce-MyAccount-content span {
    color: #ffffff !important; /* تأكيد اللون الأبيض للفقرات */
    font-size: 16px !important;
}

.woocommerce-MyAccount-content a {
    color: #6200ea !important; /* روابط النصوص بالبنفسجي */
    font-weight: bold !important;
    text-decoration: none !important;
}

.woocommerce-MyAccount-content a:hover {
    text-decoration: underline !important;
}/* 1. استهداف الزر النشط (الداشبورد) بكل حالاته الممكنة */
.woocommerce-MyAccount-navigation ul li.is-active,
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active {
    background-color: #111 !important; /* إجبار اللون الأسود */
    background: #111 !important;
    color: white !important;
    border: 1px solid #222 !important;
    box-shadow: none !important;
}

/* 2. التأكد من إزالة أي خلفية بيضاء تظهر في الرابط نفسه */
.woocommerce-MyAccount-navigation ul li.is-active a {
    background: transparent !important;
}/* 3. الآن نجعل التوهج البنفسجي يعمل "فقط" عند وضع الماوس */
.woocommerce-MyAccount-navigation ul li.is-active:hover,
.woocommerce-MyAccount-navigation ul li.is-active:hover a {
    background-color: #6200ea !important;
    border-color: #6200ea !important;
    color: white !important;
}
/* =========================================
   إصلاح مشاكل الهاتف (تجاوب الشاشات الصغيرة)
   ========================================= */
@media only screen and (max-width: 768px) {


    /* 2. جعل القائمة تأخذ عرض الشاشة بالكامل */
    .woocommerce-MyAccount-navigation {
        width: 100% !important;
        margin-bottom: 20px !important;
    }


    /* 4. جعل صندوق المحتوى (الدخول) يأخذ العرض المناسب */
    .woocommerce-MyAccount-content {
        width: 100% !important;
        padding: 10px !important; /* هوامش داخلية صغيرة حتى لا يلتصق بالحواف */
    }
}
/* =========================================
   إصلاح صفحة الدخول والتسجيل في الهاتف
   ========================================= */
@media only screen and (max-width: 768px) {
/* =========================================
   إصلاح شامل لصفحة الدخول والتسجيل للهاتف
   ========================================= */
@media only screen and (max-width: 768px) {

    /* 1. تحويل الحاوية الرئيسية لنظام عمودي */
    .woocommerce-account .woocommerce,
    .u-columns.col2-set, 
    .u-columns.col2-set.addresses {
        display: block !important; /* تغيير من flex إلى block لضمان النزول تحت بعض */
        width: 100% !important;
    }

/* =========================================
   تنسيق صفحة الحساب لتطابق الاحترافية في الهاتف
   ========================================= */
@media only screen and (max-width: 768px) {

    /* 1. إلغاء نظام الصفوف وتحويله لنظام عمودي نظيف */
    .woocommerce-account .woocommerce {
        display: block !important; /* تغيير من flex لضمان الترتيب */
        padding: 10px !important;
    }

    /* 2. جعل "Login" و "Register" بعرض كامل ومنفصلين */
    .woocommerce-account .woocommerce .u-column1, 
    .woocommerce-account .woocommerce .u-column2,
    .woocommerce-account .woocommerce .col-1, 
    .woocommerce-account .woocommerce .col-2 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        display: block !important;
        margin-bottom: 50px !important; /* مسافة واضحة بين الصندوقين */
        padding: 0 !important;
    }

    /* 3. تنسيق العناوين لتظهر بوضوح فوق الصناديق */
    .woocommerce-account h2 {
        text-align: center !important;
        margin-bottom: 20px !important;
        font-size: 22px !important;
    }

    /* 4. تحسين شكل الصناديق لتصبح مريحة للعين مثل المثال */
    .woocommerce form.login, 
    .woocommerce form.register {
        border-radius: 12px !important;
        padding: 25px 15px !important;
        margin: 0 auto !important;
        width: 100% !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important; /* ظل خفيف للتميز */
    }
}
/* 1. تنسيق نسخة الكمبيوتر (الـ PC) */
@media only screen and (min-width: 769px) {
    .woocommerce-account .woocommerce {
        display: flex !important;
        justify-content: center !important; /* توسيط الصناديق في منتصف الشاشة */
        gap: 100px !important; /* مباعدة كبيرة لمنع الالتصاق */
        align-items: flex-start !important;
        max-width: 1200px;
        margin: 0 auto !important;
    }

    .woocommerce-account .woocommerce .u-column1, 
    .woocommerce-account .woocommerce .u-column2 {
        flex: 0 1 450px !important; /* تحديد عرض ثابت ومريح لكل صندوق */
    }
}

/* 2. تنسيق نسخة الهاتف (Mobile) */
@media only screen and (max-width: 768px) {
    .woocommerce-account .woocommerce {
        display: flex !important;
        flex-direction: column !important; /* إجبار العناصر لتكون تحت بعضها */
        align-items: center !important;
        gap: 40px !important; /* مسافة عمودية بين الدخول والتسجيل */
    }

    .woocommerce-account .woocommerce .u-column1, 
    .woocommerce-account .woocommerce .u-column2,
    .u-columns.col2-set {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    .woocommerce form.login, 
    .woocommerce form.register {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 20px !important;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-59964d9 *//* 1. تنسيق الحاوية والتحكم في مكانها (كما طلبت تماماً) */
.elementor-16 .elementor-element.elementor-element-59964d9 .u-columns.col2-set {
    display: flex !important;
    gap: 200px !important; /* الحفاظ على التباعد */
    justify-content: center !important; 
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;


/* 2. تنسيق صندوق اليسار (Login) - عرض ثابت */
.elementor-16 .elementor-element.elementor-element-59964d9 .u-column1 {
    flex: 0 1 550px !important; /* عرض صندوق اليسار */
    min-width: 350px !important;
    background: #111111 !important; 
    padding: 45px !important; 
    border-radius: 25px !important;
    border: 1px solid #333 !important;
}

/* 3. تنسيق صندوق اليمين (Register) - زيادة العرض من هنا */
.elementor-16 .elementor-element.elementor-element-59964d9 .u-column2 {
    flex: 0 1 750px !important; /* جعلته 750px ليكون أعرض من اليسار */
    min-width: 350px !important;
    background: #111111 !important; 
    padding: 45px !important; 
    border-radius: 25px !important;
    border: 1px solid #333 !important;
}

/* 4. سنترة العناوين وتكبيرها */
.elementor-16 .elementor-element.elementor-element-59964d9 h2 {
    color: white !important;
    text-align: center !important;
    font-size: 28px !important;
    margin-bottom: 30px !important;
}
/* مباعدة لوحة التحكم عن الأطراف بعد دخول الزبون */
.woocommerce-account .woocommerce {
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px;
}
/* 1. الألوان الأساسية والخلفيات (عام) */
.woocommerce-account, .woocommerce-account .woocommerce {
    color: #ffffff !important;
}

.woocommerce form.login, .woocommerce form.register {
    background: #111 !important; /* لون داكن فخم */
    border: 1px solid #222 !important;
    border-radius: 15px !important;
    padding: 30px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

/* 2. تنسيق الأزرار (البنفسجي المتوهج) */
.woocommerce button.button {
    background-color: #6200ea !important; /* البنفسجي الخاص بك */
    color: white !important;
    border-radius: 10px !important;
    padding: 12px 25px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
}

.woocommerce button.button:hover {
    background-color: #7c4dff !important;
    box-shadow: 0 0 20px rgba(98, 0, 234, 0.6) !important;
    transform: translateY(-2px) !important;
}

/* 3. تنسيق نسخة الكمبيوتر (PC) - منع الالتصاق */
@media only screen and (min-width: 769px) {
    .u-columns.col2-set {
        display: flex !important;
        justify-content: center !important;
        gap: 80px !important; /* مباعدة احترافية بين الصندوقين */
        margin-top: 50px !important;
    }
    .u-column1, .u-column2 {
        flex: 0 1 420px !important;
    }
}

/* 4. تنسيق نسخة الهاتف (Mobile) - ترتيب عمودي */
@media only screen and (max-width: 768px) {
    .u-columns.col2-set {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }
    .u-column1, .u-column2 {
        width: 100% !important;
    }
    .woocommerce-account h2 {
        font-size: 24px !important;
        text-align: center !important;
        color: #6200ea !important;
    }
}

/* 5. جمالية القائمة الجانبية (بعد تسجيل الدخول) */
.woocommerce-MyAccount-navigation ul li {
    background: #111 !important;
    border: 1px solid #222 !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    transition: all 0.3s ease-in-out !important;
}

.woocommerce-MyAccount-navigation ul li:hover {
    background: #6200ea !important;
    transform: translateX(10px) !important; /* تأثير الحركة الذي وضعته سابقاً */
}

.woocommerce-MyAccount-navigation ul li a {
    color: #fff !important;
    padding: 15px !important;
    display: block !important;
    text-decoration: none !important;
}
/* 1. تنسيق الصناديق العام (الألوان والجمالية) */
.woocommerce form.login, .woocommerce form.register {
    background: #111 !important;
    border: 1px solid #222 !important;
    border-radius: 15px !important;
    padding: 30px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    margin-left: auto !important; /* لضمان التوسيط */
    margin-right: auto !important; /* لضمان التوسيط */
}

/* 2. تلوين الأزرار (البنفسجي) */
.woocommerce button.button {
    background-color: #6200ea !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 12px 30px !important;
    font-weight: bold !important;
    width: 100% !important; /* زر بعرض كامل داخل الصندوق */
}

/* 3. حل مشكلة "الانسحاب لليمين" في الهاتف */
@media only screen and (max-width: 768px) {
    .woocommerce-account .woocommerce, 
    .u-columns.col2-set {
        display: block !important; /* إلغاء الـ flex المسبب للمشاكل */
        width: 100% !important;
        padding: 0 15px !important; /* مساحة بسيطة عن حواف الهاتف */
        margin: 0 !important;
    }

    .u-column1, .u-column2, .col-1, .col-2 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important; /* إلغاء أي انحياز قديم */
        padding: 0 !important;
        margin-bottom: 30px !important; /* مسافة بين الصندوقين */
    }

    .woocommerce form.login, .woocommerce form.register {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* 4. تنسيق الكمبيوتر (PC) - متباعدين ومتوسطين */
@media only screen and (min-width: 769px) {
    .u-columns.col2-set {
        display: flex !important;
        justify-content: center !important; /* التوسيط الأفقي */
        gap: 60px !important;
        margin: 50px auto !important;
        max-width: 1100px !important;
    }

    .u-column1, .u-column2 {
        flex: 0 1 400px !important; /* عرض ثابت للصناديق */
    }
}/* End custom CSS */