/* Add custom CSS styles below */ 
/* لون الخلفية عادي وحوver: وردي (أو اللون الأساسي بتاعك) */
.salla-button--add-to-cart,
button.add-to-cart,
.add-to-cart-btn,
.product-form__submit,
.btn--add-to-cart,
button[type="submit"][name="add"] {
  background-color: #ff69b4 !important; /* وردي - غيّره إذا لونك مختلف */
  color: #ffffff !important; /* لون النص الأبيض مثلاً، أو اللي موجود عندك */
  transition: background-color 0.2s ease, transform 0.1s ease;
}

/* عند الضغط فقط: خلفية صفراء، والنص يبقى زي ما هو (ما نتغيرش لونه) */
.salla-button--add-to-cart:active,
button.add-to-cart:active,
.add-to-cart-btn:active,
.product-form__submit:active,
.btn--add-to-cart:active,
button[type="submit"][name="add"]:active {
  background-color: #ffc107 !important; /* أصفر */
  color: inherit !important; /* يحافظ على لون النص الأصلي (وردي أو أبيض حسب التصميم) */
  transform: scale(0.97); /* تأثير ضغط خفيف */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important; /* ظل خفيف اختياري */
}

/* إذا كان زر السلة في الهيدر أو أيقونة السلة */
.header__cart:active,
.salla-header__cart:active,
.cart-icon:active,
.cart-count:active {
  background-color: #ffc107 !important;
  color: inherit !important; /* النص/الأيقونة تبقى زي ما هي */
}