/* =====================================================
   1. الشريط الإعلاني - ثابت أعلى الشاشة
   ===================================================== */

salla-advertisement {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 46px !important;
    z-index: 999999 !important;
}

.s-advertisement {
    width: 100% !important;
    height: 46px !important;
}


/* =====================================================
   2. صفحة المنتج
   زر اشتري الآن = أحمر + أبيض
   ===================================================== */

body:has(salla-quick-buy)
salla-quick-buy
.s-button-element {

    background: #c90000 !important;
    background-color: #c90000 !important;
    color: #ffffff !important;
    border-color: #c90000 !important;
}


body:has(salla-quick-buy)
salla-quick-buy
.s-button-text {

    color: #ffffff !important;
}



/* =====================================================
   3. Hover - إضافة إلى السلة في صفحة المنتج
   يبقى أخضر ثابت
   ===================================================== */

salla-add-product-button .s-button-element:hover {

    background: #008000 !important;
    background-color: #008000 !important;
    border-color: #008000 !important;
    color: #ffffff !important;
}



/* =====================================================
   4. Hover - اشتري الآن
   ===================================================== */

body:has(salla-quick-buy)
salla-quick-buy
.s-button-element:hover {

    background: #a80000 !important;
    background-color: #a80000 !important;
    color: #ffffff !important;
    border-color: #a80000 !important;
}



/* =====================================================
   5. تثبيت لون النص والأيقونات أبيض
   ===================================================== */

body:has(salla-quick-buy)
salla-add-product-button
.s-button-element *,

body:has(salla-quick-buy)
salla-quick-buy
.s-button-element * {

    color: #ffffff !important;
}



/* =====================================================
   6. ترك مساحة للشريط الإعلاني
   ===================================================== */

body {

    padding-top: 46px !important;

}



/* =====================================================
   7. زر أضف إلى السلة
   أخضر من البداية وليس أبيض
   ===================================================== */


salla-add-product-button .s-button-element,
salla-add-product-button .s-button-element.s-button-primary,
salla-add-product-button button {

    background: #008000 !important;
    background-color: #008000 !important;
    border-color: #008000 !important;
    color: #ffffff !important;
    opacity: 1 !important;

}



/* =====================================================
   8. منع رجوع اللون الأبيض عند Hover
   ===================================================== */


salla-add-product-button .s-button-element:hover,
salla-add-product-button .s-button-element:focus,
salla-add-product-button .s-button-element:active,
salla-add-product-button button:hover,
salla-add-product-button button:focus,
salla-add-product-button button:active {

    background: #008000 !important;
    background-color: #008000 !important;
    border-color: #008000 !important;
    color: #ffffff !important;

}



/* =====================================================
   9. تثبيت لون الكتابة والأيقونات داخل زر السلة
   ===================================================== */


salla-add-product-button .s-button-element *,
salla-add-product-button .s-button-element:hover *,
salla-add-product-button .s-button-element:focus *,
salla-add-product-button .s-button-element:active *,
salla-add-product-button button * {

    color: #ffffff !important;

}



/* =====================================================
   10. إزالة أي شفافية أو تأثير يجعل الزر أبيض
   ===================================================== */


salla-add-product-button,
salla-add-product-button .s-button-wrapper {

    opacity: 1 !important;

}


salla-add-product-button .s-button-element {

    box-shadow: none !important;
    transition: 0.2s ease !important;

}


/* =====================================================
   11. تأثير بسيط عند المرور بدون تغيير اللون
   ===================================================== */


salla-add-product-button .s-button-element:hover {

    transform: translateY(-1px) !important;

}