/* 1. إعدادات الهوية الأساسية والخط */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600;800&display=swap');

:root {
    --mashriq-navy: #0f2554;
    --mashriq-peach: #d98a6f;
    --mashriq-gold: #ffd700;
}

/* 2. الخلفية الكحلية والنمط للمتجر بالكامل */
html body, #app, .s-app-layout {
    background-color: var(--mashriq-navy) !important;
    background-image: url('https://cdn.salla.sa/pZpAz/image_4dae26.png') !important;
    background-repeat: repeat !important;
    background-size: 150px !important;
    background-attachment: fixed !important;
    font-family: 'Cairo', sans-serif !important;
}

/* 3. توحيد لون الخطوط في المتجر للون النحاسي */
h1, h2, h3, h4, p, span, a, .breadcrumb-item a, .s-breadcrumb__link {
    color: var(--mashriq-peach) !important;
    opacity: 1 !important;
}

/* 4. الإصلاح الجذري للأزرار (إظهار النص المخفي باللون الكحلي) */
/* يستهدف: إضافة للسلة، إتمام الطلب، شراء الآن، وأي زر أساسي */
.s-button-element.s-button-primary, 
.s-cart-summary__submit, 
.cart-summary__submit,
.btn-checkout,
button[type="submit"].s-button-element,
.s-product-card-content-subtotal .s-button-element {
    /* خلفية الزر نحاسية */
    background-color: var(--mashriq-peach) !important;
    /* فرض لون الكتابة للكحلي لظهور النص المخفي */
    color: var(--mashriq-navy) !important;
    fill: var(--mashriq-navy) !important; /* للأيقونات */
    -webkit-text-fill-color: var(--mashriq-navy) !important; /* لمتصفحات الجوال */
    
    font-weight: 800 !important;
    border: none !important;
    opacity: 1 !important;
    text-shadow: none !important;
    
    /* التوهج الخارجي المطلوب */
    box-shadow: 0 0 15px rgba(217, 138, 111, 0.7), 0 0 30px rgba(255, 215, 0, 0.4) !important;
    transition: 0.3s all ease !important;
}

/* زيادة التوهج عند تمرير الماوس */
.s-button-element.s-button-primary:hover, .cart-summary__submit:hover {
    box-shadow: 0 0 20px var(--mashriq-peach), 0 0 40px var(--mashriq-gold) !important;
    transform: translateY(-2px);
}

/* 5. إصلاح أزرار الكمية (+ و -) والقيمة بداخلها */
.s-quantity-input__button {
    background-color: var(--mashriq-navy) !important;
    color: var(--mashriq-peach) !important;
    border: 1px solid var(--mashriq-peach) !important;
    opacity: 1 !important;
}

.s-quantity-input__input {
    color: var(--mashriq-navy) !important; /* الرقم باللون الكحلي لبروزه */
    background-color: #ffffff !important; /* خلفية بيضاء للرقم */
    font-weight: bold !important;
}

/* 6. تنظيف الأقسام والبطاقات من اللون الأبيض */
.s-block, .s-feature-card, .s-product-card-entry, .s-category-card {
    background-color: var(--mashriq-navy) !important;
    border: 1px solid rgba(217, 138, 111, 0.2) !important;
    border-radius: 15px !important;
}

/* 7. تمييز عناوين الأقسام (بكجات وعروض مشرق) */
.s-block__title h2 {
    border: 2px solid var(--mashriq-peach) !important;
    padding: 10px 30px !important;
    border-radius: 50px !important;
    background-color: var(--mashriq-navy) !important;
    display: inline-block !important;
}

Mahmoud Alneder
11:19 م
/* 1. استيراد الخط وضبط ألوان الهوية الأساسية */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600;800&display=swap');

:root {
--mashriq-navy: #0f2554;
--mashriq-peach: #d98a6f;
--mashriq-gold: #ffd700;
}

/* 2. الخلفية الكحلية والنمط الموحد للمتجر */
html, body, #app, .s-app-layout, .s-app-layout__content, .main-content {
background-color: var(--mashriq-navy) !important;
background-image: url('https://cdn.salla.sa/pZpAz/image_4dae26.png') !important;
background-repeat: repeat !important;
background-size: 150px !important;
background-attachment: fixed !important;
font-family: 'Cairo', sans-serif !important;
}

/* 3. توحيد لون الخطوط في المتجر للون النحاسي (Peach) */
h1, h2, h3, h4, p, span, a, .s-breadcrumb__link, .breadcrumb-item a {
color: var(--mashriq-peach) !important;
opacity: 1 !important;
}

/* 4. إصلاح الأزرار وإظهار النصوص الأصلية (إضافة، إتمام الطلب) */
/* نركز هنا على تلوين النص الأصلي باللون الكحلي ليكون واضحاً فوق الزر النحاسي */
.s-button-element.s-button-primary,
.cart-summary__submit,
.s-cart-summary__submit,
button[type="submit"],
.s-product-card-content-subtotal .s-button-element {
background-color: var(--mashriq-peach) !important; /* خلفية الزر نحاسية */
color: var(--mashriq-navy) !important; /* لون النص كحلي واضح جداً */
fill: var(--mashriq-navy) !important; /* للأيقونات بداخل الزر */
font-weight: 800 !important;
border: none !important;
opacity: 1 !important;
text-shadow: none !important;

/* التوهج الخارجي المطلوب */
box-shadow: 0 0 15px rgba(217, 138, 111, 0.6), 0 0 25px rgba(255, 215, 0, 0.4) !important;
transition: 0.3s all ease-in-out !important;
}

/* تأثير التوهج عند الضغط أو مرور الماوس */
.s-button-element.s-button-primary:hover, .cart-summary__submit:hover {
box-shadow: 0 0 20px rgba(217, 138, 111, 0.9), 0 0 35px var(--mashriq-gold) !important;
transform: translateY(-2px);
}

/* 5. إصلاح أزرار الكمية (+ و -) */
.s-quantity-input__button {
background-color: var(--mashriq-navy) !important;
color: var(--mashriq-peach) !important;
border: 1px solid var(--mashriq-peach) !important;
}

.s-quantity-input__input {
color: var(--mashriq-navy) !important; /* لون الرقم بداخل المربع */
background-color: #ffffff !important;
border-top: 1px solid var(--mashriq-peach) !important;
border-bottom: 1px solid var(--mashriq-peach) !important;
}

/* 6. تنظيف خلفيات الأقسام والبطاقات وتحويلها للكحلي */
.s-block, .s-feature-card, .s-product-card-entry, .s-category-card {
background-color: var(--mashriq-navy) !important;
border: 1px solid rgba(217, 138, 111, 0.2) !important;
}

/* 7. تمييز عناوين الأقسام (بكجات وعروض مشرق) */
.s-block__title h2 {
border: 2px solid var(--mashriq-peach) !important;
padding: 8px 25px !important;
border-radius: 50px !important;
background-color: var(--mashriq-navy) !important;
}