/* --- V6: الحل النهائي المعتمد على وجود الأيقونة --- */

/* الخطوة 1: استهداف الزر الذي (لا يحتوي) على أيقونة وجعله الزر الأساسي (هذا هو زر "إضافة للسلة") */
/* :not(:has(i)) يعني: اختر الزر الذي لا يوجد بداخله أي عنصر <i> وهو الأيقونة */

#product-form .s-button-element:not(:has(i)) {
    background-color: #22c55e !important; /* اللون الأخضر الأساسي */
    border: 2px solid #22c55e !important;
    color: #ffffff !important; /* لون النص أبيض */
    order: 2 !important; /* للتأكيد على أنه الزر الثاني على اليسار */
}

/* تأثير المرور للزر الأساسي */
#product-form .s-button-element:not(:has(i)):hover {
    background-color: #1eac50 !important; /* درجة أغمق عند المرور */
    border-color: #1eac50 !important;
}


/* الخطوة 2: استهداف الزر الذي (يحتوي) على أيقونة وجعله الزر الثانوي (هذا هو زر "اشتري الآن") */
/* :has(i) يعني: اختر الزر الذي يوجد بداخله عنصر <i> وهو الأيقونة */

#product-form .s-button-element:has(i) {
    background-color: #ffffff !important; /* خلفية بيضاء */
    border: 2px solid #d1d5db !important; /* إطار رمادي فاتح */
    color: #4b5563 !important; /* نص رمادي داكن */
    order: 1 !important; /* للتأكيد على أنه الزر الأول على اليمين */
}

/* التأكد من لون الأيقونة داخل الزر الثانوي */
#product-form .s-button-element:has(i) .s-button-text,
#product-form .s-button-element:has(i) i {
    color: #4b5563 !important;
}

/* تأثير المرور للزر الثانوي */
#product-form .s-button-element:has(i):hover {
    background-color: #f9fafb !important;
    border-color: #9ca3af !important;
}

/* إعادة ترتيب الحاوية الرئيسية للأزرار إذا لزم الأمر */
#product-form salla-add-product-button .flex {
    flex-direction: row-reverse;
}