/* 1. الهيدر */
.store-header, [class*="header"], .top-navbar {
background: #002f51 !important;
}

/* 2. الفوتر */
footer, .main-footer, [class*="footer"] {
background: #002f51 !important;
}

/* 3. النصوص العادية فقط (بدون تخريب الأزرار) */
footer p,
footer a,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
footer li,
footer span {
color: #ffffff !important;
}

/* 4. زر سلة (سلة ستايل خاص) */
salla-add-product-button {
--s-button-text-color: #ffffff !important;
--s-button-bg: #002f51 !important;
--s-button-border-color: #002f51 !important;
}

/* 5. خلفية الموقع */
body, #app, .app-inner {
background-color: #ffffff !important;
}
/* 1. تلوين الهيدر والفوتر وتثبيت اللون الكحلي */
header, .store-header, .top-navbar, footer, .main-footer, .footer-main-fields {
background-color: #002f51 !important;
}

/* 2. الضربة القاضية للحواف البيضاوية (جرب هذا وبتدعي لي) */
salla-add-product-button {
--s-button-border-radius: 50px !important;
}

/* اختراق الزر من الداخل وتدوير الحواف */
salla-add-product-button >>> .s-button-btn,
salla-add-product-button >>> .s-button-primary,
salla-add-product-button >>> button {
border-radius: 50px !important; /* شكل بيضاوي كامل */
border: none !important;
overflow: hidden !important;
}

/* 3. تبييض الخط داخل الزر */
salla-add-product-button >>> .s-button-primary-text,
salla-add-product-button >>> span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
}

/* 4. تبييض أيقونات الهيدر (السلة والحساب) */
.store-header * {
color: #ffffff !important;
fill: #fffff !important;
}
/* 1. توحيد المقاس والخلفية لكل أيقونات الهيدر */
.store-header .header-btn, 
.store-header a[href*="cart"], 
.store-header salla-user-menu {
    width: 40px !important;
    height: 60px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    background-color: #0c3b5d !important; /* لون دائرة أفتح قليلاً ليبرز عن الهيدر */
    border-radius: 11% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important; /* إلغاء أي مسافات داخلية قديمة */
    margin-left: 8px !important;
    overflow: visible !important;
}

/* 2. ضبط أيقونة الحساب من الداخل (لأنها Web Component) */
salla-user-menu >>> .s-user-menu-trigger {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* 3. توحيد حجم الأيقونات (الصور/الرموز) داخل الدوائر */
.store-header i, 
.store-header svg,
salla-user-menu >>> svg {
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* 4. تصحيح وضع رقم التنبيه (السلة) ليكون فوق الدائرة */
[class*="cart-badge"], 
.s-cart-summary-count {
    top: -5px !important;
    right: -5px !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    font-size: 11px !important;
}