/* Add custom CSS styles below */ /* لفصل الأزرار */ .s-add-product-button-main { display: flex; /* يجعل الأزرار بجانب بعض */ justify-content: space-between; /* يضيف مسافة بين الأزرار */ gap: 10px; /* إضافة مسافة بين الأزرار */ } /* تخصيص زر "إضافة للسلة" */ .s-add-product-button-main .s-add-product-button-with-quick-buy button { flex: 1; /* يجعل الزر يأخذ مساحة متساوية */ padding: 10px 20px; /* تحسين مظهر الزر */ border-radius: 5px; /* جعل الحواف مدورة */ font-size: 16px; /* تكبير النص */ font-weight: bold; /* جعله بارزاً */ } /* تخصيص زر "اشتري الآن" */ .s-add-product-button-main .s-add-product-button-mini-checkout div { flex: 1; /* يجعل الزر يأخذ مساحة متساوية */ display: flex; justify-content: center; /* توسيط النص داخل الزر */ align-items: center; /* توسيط النص عمودياً */ padding: 10px 60px; border-radius: 5px; /* background-color: #00b894; لون الخلفية */ /* color: #fff; لون النص */ font-size: 16px; font-weight: bold; cursor: pointer; text-decoration: none; /* إزالة التسطير تحت النص */ transition: all 0.3s ease; /* إضافة حركة سلسة عند التفاعل */ white-space: nowrap; /* يضمن أن النص يبقى في سطر واحد */ overflow: hidden; /* يخفي أي نص زائد خارج حدود الزر */ text-overflow: ellipsis; /* إذا كان النص طويلاً جداً، يظهر ثلاث نقاط */ } .s-add-product-button-main .s-add-product-button-mini-checkout div:hover { background-color: #019874; /* لون عند التمرير بالفأرة */ }