@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;600;700&display=swap');
/* التنسيق الأساسي وضمان التوسيط */
.salla-custom-header {
    text-align: center;
    margin: 40px auto; /* التوسيط الأفقي */
    direction: rtl;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center; /* توسيط العناصر داخلياً */
    width: 100%;
}

/* تنسيق العنوان الرئيسي */
.salla-custom-header h2 {
    font-size: 28px !important;
    color: #3d3d3d;
    margin: 0 0 10px 0 !important;
    font-weight: bold;
}

/* تنسيق الوصف (تم إزالة border-bottom لإخفاء النقط الزرقاء) */
.sub-title-wrap {
    display: inline-block;
    padding-bottom: 0; 
    margin-bottom: 15px;
    border: none !important; /* إزالة أي إطار أو نقط نهائياً */
}

.sub-title-wrap p {
    font-size: 16px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* الفاصل والوردة (SVG) */
.salla-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.s-line {
    flex: 0 1 80px;
    height: 1.5px;
    background: linear-gradient(to right, transparent, #333, transparent);
}

.s-flower {
    width: 55px;
    height: 25px;
    color: #333;
    flex-shrink: 0;
}

/* التجاوب مع الجوال */
@media (max-width: 480px) {
    .salla-custom-header h2 {
        font-size: 22px !important;
    }
    .s-line {
        flex: 0 1 40px;
    }
}

/* تغيير خلفية شريط التنقل الرئيسي */
#mainnav.main-nav-container {
    background-color: #3C2B31 !important;
}

/* في حال وجود عناصر داخلية بلف خلفية بيضاء موروثة */
#mainnav .inner.bg-inherit {
    background-color: #3C2B31 !important;
}
/* تحريك الهيدر الرئيسي للأعلى بمارجن سالب */
#mainnav.main-nav-container {
    margin-top: -50px !important; /* يمكنك زيادة أو تقليل الرقم حسب الحاجة */
    position: relative;
    z-index: 999;
}
@media (min-width: 992px) {
    #mainnav.main-nav-container {
        margin-top: -40px !important;
    }
}
/* تغيير لون نصوص القائمة الرئيسية إلى الأبيض */
.main-menu, 
.main-menu li a, 
.main-menu li span {
    color: #ffffff !important;
}

/* لضمان تغيير اللون حتى عند الوقوف بالماوس (Hover) */
.main-menu li a:hover {
    color: #ffffff !important;
    opacity: 0.8; /* اختياري: ليعطي إيحاء بالتفاعل */
}

/* 1. جعل حاوية الهيدر الأساسية بعرض كامل الشاشة */
.container.mx-auto.max-w-\[1400px\].flex.justify-between,
header.store-header .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 15px !important; /* البادينج المطلوب من اليمين */
    padding-left: 15px !important;  /* يفضل إضافة بادينج لليسار أيضاً للتوازن */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. التأكد من أن القسم المحيط يمتد بالكامل */
header.store-header, 
#mainnav.main-nav-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* 3. ضبط توزيع العناصر بالداخل لتملأ المساحة الجديدة */
.flex.justify-between {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.relative.container {
    max-width: 100% !important;
    width: 100% !important;
   margin-top: -40px !important;
  /* هيتطبق فقط على الشاشات اللي أصغر من 768 بكسل (الموبايل) */

}

@media (max-width: 767px) {
    .relative.container {
        margin-top: 3px !important; /* تقدري تغيري الـ 20 بكسل حسب المسافة اللي محتاجاها */
    }
}
section.s-block--enhanced-banner:first-of-type .enhanced-banner-content {
    inset: auto 0 10% 0 !important;
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    transform: none !important;
    margin: 0 auto !important;
    z-index: 10 !important;
}

section.s-block--enhanced-banner:first-of-type h3 {
    background-color: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
    font-family: 'El Messiri', sans-serif !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    width: fit-content !important;
    margin: 0 auto 15px auto !important;
    display: inline-block !important;
    font-size: 28px !important;
}

section.s-block--enhanced-banner:first-of-type .enhanced-banner-content a {
    background-color: transparent !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    font-family: 'El Messiri', sans-serif !important;
    padding: 8px 35px !important;
    border-radius: 5px !important;
    display: inline-block !important;
    width: fit-content !important;
    font-size: 18px !important;
    text-decoration: none !important;
  margin-top: -50px!important;
}

/* --- ثانياً: تنسيق سكشن "أقسامنا" --- */
.salla-custom-header {
    margin-top: -15px !important; /* لرفع السكشن لفوق وتقليل المسافة */
    margin-bottom: 30px !important;
}

.salla-custom-header h2 {
    color: #3B2C31 !important;
    font-family: 'El Messiri', sans-serif !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

.salla-custom-header .sub-title-wrap p {
    color: #3B2C31 !important;
    font-family: 'El Messiri', sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
}

/* الزخارف الجانبية لسكشن الأقسام */
.salla-custom-header .s-line {
    background-color: #3B2C31 !important;
}

/* --- ثالثاً: تعديلات الموبايل (Responsive) --- */
@media (max-width: 767px) {
    /* البانر في الموبايل */
    section.s-block--enhanced-banner:first-of-type h3 {
        font-size: 18px !important;
        padding: 8px 15px !important;
    }
    
    section.s-block--enhanced-banner:first-of-type .enhanced-banner-content a {
        font-size: 15px !important;
        padding: 6px 25px !important;
    }

    /* سكشن الأقسام في الموبايل */
    .salla-custom-header {
        margin-top: -10px !important;
    }

    .salla-custom-header h2 {
        font-size: 30px !important;
    }

    .salla-custom-header .sub-title-wrap p {
        font-size: 18px !important;
    }
    
    /* المارجن للكونتينر اللي طلبتيه */
    section.s-block--enhanced-banner:first-of-type .relative.container {
        margin-top: 20px !important;
    }
}



/* 1. تنسيق الأقسام: تكبير الخط وتغيير لون الأيقونة */
.main-title-cat {
    font-size: 18px !important;
}

.sicon-arrow-left {
    color: #3B2C31 !important;
    font-size: 1.1rem !important;
}

/* 2. جعل قسم الأقسام بعرض الشاشة الكامل (Full Width) */
section.main-links-tasawq-cats .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* 3. رفع السكشن للأعلى لتقليل المسافة البيضاء */
section.main-links-tasawq-cats {
    margin-top: -40px !important;
    padding-top: 0 !important;
}




/* تخصيص الكود لسكشن البانر المحدد فقط لمنع التأثير على باقي الموقع */
section.s-block--enhanced-banner {
    margin-bottom: 20px !important;
}

/* إزاحة المحتوى للداخل وتنسيق الحاوية */
section.s-block--enhanced-banner .enhanced-banner-content {
    padding-right: 60px !important;
}

/* تنسيق العنوان الرئيسي بالبكسل */
section.s-block--enhanced-banner .enhanced-banner-content h3 {
    font-size: 42px !important;
    line-height: 48px !important;
    margin-bottom: 8px !important;
    color: #ffffff !important;
    font-weight: bold !important;
}

/* تنسيق النص الثاني (الوصف) ليظهر على سطرين */
section.s-block--enhanced-banner .enhanced-banner-content p {
    font-size: 22px !important;
    line-height: 30px !important; /* مسافة بين السطرين ليكون مريح للعين */
    margin-bottom: 25px !important;
    color: #ffffff !important;
    max-width: 400px !important; /* هذا السطر هو الذي يجبر النص على النزول لسطر جديد */
    display: block !important;
}

/* تنسيق الزر ليكون مستطيل تماماً (مثل الـ UI) */
section.s-block--enhanced-banner .enhanced-banner-content a {
    background-color: #3B2C31 !important;
    color: #ffffff !important;
    padding: 12px 45px !important;
    border-radius: 4px !important;
    font-size: 18px !important;
    display: inline-block !important;
    width: fit-content !important;
}

/* إعدادات الموبايل */
@media (max-width: 768px) {
    section.s-block--enhanced-banner .enhanced-banner-content {
        padding-right: 25px !important;
    }

    section.s-block--enhanced-banner .enhanced-banner-content h3 {
        font-size: 24px !important;
        line-height: 28px !important;
    }

    section.s-block--enhanced-banner .enhanced-banner-content p {
        font-size: 16px !important;
        line-height: 22px !important;
        max-width: 250px !important; /* تقليل العرض في الموبايل ليظل على سطرين */
    }
}





/* 1. تعديل مكان المحتوى ليكون في النص ومن الأسفل */
div.p_w_d_design-content {
    top: auto !important; /* إلغاء التوسيط الرأسي الافتراضي */
    bottom: 10% !important; /* تحريكه للجزء السفلي (يمكنك تغيير النسبة لضبط الارتفاع) */
    transform: translateX(-50%) !important; /* الحفاظ على التوسيط الأفقي فقط */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

/* 2. تنسيق العنوان الرئيسي */
div.p_w_d_design-content h3 {
    font-size: 30px !important;
    line-height: 42px !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-align: center !important;
    margin-bottom: 15px !important;
}

/* 3. تنسيق الزر (جرب الآن) */
div.p_w_d_design-content a {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    padding: 10px 25px !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    display: flex !important; /* لتنسيق السهم بجانب النص */
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
    text-decoration: none !important;
}

/* 4. تغيير لون السهم للأبيض */
div.p_w_d_design-content a i.sicon-arrow-left,
div.p_w_d_design-content a i.sicon-arrow-left:before {
    color: #ffffff !important;
    font-size: 14px !important;
}

/* 5. ضبط التنسيق للموبايل */
@media (max-width: 768px) {
    div.p_w_d_design-content {
        bottom: 5% !important; /* رفع بسيط في الموبايل ليكون واضحاً */
    }
    
    div.p_w_d_design-content h3 {
        font-size: 24px !important;
        line-height: 32px !important;
    }
}




/* تخصيص الكود لهذا السكشن الكبير فقط (wide-placeholder) لمنع التأثير على باقي الموقع */
section.s-block--enhanced-banner.wide-placeholder .enhanced-banner-content {
    /* الحفاظ على التنسيق الحالي مع التأكد من حصر التعديلات */
}

/* 1. تصغير الكلام الأول (الهيدنج) وتحسين الـ line-height */
section.s-block--enhanced-banner.wide-placeholder .enhanced-banner-content h3 {
    font-size: 32px !important; /* تصغير الحجم من 42px إلى 32px */
    line-height: 1.3 !important; /* مسافة بين السطور متناسقة (ليست كبيرة ولا صغيرة) */
    margin-bottom: 12px !important;
    color: #ffffff !important;
    font-weight: bold !important;
}

/* 2. تكبير الكلام الثاني (الوصف) "سيكا" */
section.s-block--enhanced-banner.wide-placeholder .enhanced-banner-content p {
    font-size: 20px !important; /* تكبير بسيط ليكون أوضح */
    line-height: 1.5 !important;
    color: #ffffff !important;
    margin-bottom: 20px !important;
}

/* 3. الحفاظ على شكل الزرار */
section.s-block--enhanced-banner.wide-placeholder .enhanced-banner-content a {
    /* إذا كنتِ تريدين الزرار المفرغ أو الملون كما في السكشن السابق */
}

/* إعدادات الموبايل لضمان التناسق */
@media (max-width: 768px) {
    section.s-block--enhanced-banner.wide-placeholder .enhanced-banner-content h3 {
        font-size: 27px !important;
        line-height: 35px !important;
    }

    section.s-block--enhanced-banner.wide-placeholder .enhanced-banner-content p {
        font-size: 20px !important;
    }
}


/* تغيير لون خلفية الفوتر بالكامل */
footer.store-footer {
    background-color: #3B2C31 !important;
}

/* التأكيد على الحاوية الداخلية للفوتر الموضحة في الصورة */
div.store-footer__inner {
    background-color: #3B2C31 !important;
}

/* في حال وجود أي طبقات شفافة فوق الخلفية نضمن توحيد اللون */
footer.store-footer::before, 
footer.store-footer::after {
    background-color: #3B2C31 !important;
}

footer.store-footer, 
footer.store-footer a, 
footer.store-footer p, 
footer.store-footer h4 {
    color: #ffffff !important;
}