/* Add custom CSS styles below */ 
.product-single section.sticky-product-bar salla-add-product-button salla-button button.s-button-element {
  /* إضافة ظل للزر */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  /* تطبيق حركة التنفس */
  animation: breathe-shadow 2s ease-in-out infinite alternate;
}

@keyframes breathe-shadow {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  50% {
    transform: scale(1.02); /* يكبر قليلاً */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* يصبح الظل أغمق وأوسع */
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
}
.index custom-salla-product-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out; /* إضافة انتقال سلس للظل عند التفاعل */
}

/* يمكن إضافة تأثير للظل عند تمرير الماوس */
.index custom-salla-product-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.store-header div.header__main-end .sicon-search,
.store-header div.header__main-end salla-cart-summary .sicon-cart {
  color: #ff00ae;
}

/* أيقونة حساب العميل (user-circle) هي SVG، لذلك نعدّل خاصية fill على المسار الداخلي */
.store-header div.header__main-end salla-user-menu .s-user-menu-login-btn svg path {
  fill: #ff00ae;
}

.header__main-end.flex.items-center.justify-end.w-1\/3 {
  color: #ff00ae !important;
}

a.mburger.mburger--collapse.leading-none.flex.items-start.rtl\:ml-2\.5.ltr\:mr-2\.5 {
  color: #ff00ae !important;
}

div.sticky-product-bar__quantity.center-between.mb-5 {
  color: #ff00ae !important;
}

h2.total-price.font-bold.text-xl.inline-block.text-store-text-primary {
  color: #ff00ae !important;
}
/* لتغيير لون الأرقام وأزرار الزيادة والنقصان (+ و -) مباشرة */
.sticky-product-bar__quantity * {
  color: #ff00ae !important;
}

/* إنشاء تأثير الحركة (التنفس) مع الظل */
@keyframes pulse-animation {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(255, 102, 208, 0.4);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 8px 22px rgba(255, 102, 208, 0.7);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(255, 102, 208, 0.4);
  }
}

/* تطبيق تأثير التنفس والظل على زر السلة */
button.s-button-element.s-button-btn.s-button-outline {
  animation: pulse-animation 2s infinite ease-in-out !important;
  transition: all 0.3s ease !important;
}