/* ==================================================
   ENJOY / Selia Theme - Clean & Final
   Light + Dark Mode | Gold Icons + Light Purple Buy Now
   ================================================== */

:root {
  --enjoy-gold: #d4af37;
  --enjoy-gold-dark: #b89428;
  --enjoy-navy: #07113d;
  --enjoy-white: #ffffff;
  --enjoy-light-bg: #f7f7f7;
  --enjoy-purple: #c77dff;       /* موف فاتح لزر اشتري الآن */
  --enjoy-purple-dark: #9c179b;  /* موف غامق للـ hover */
}

/* ==================================================
   1) Product Card Icons (سلة - عين - قلب)
   ================================================== */
.s-product-card-entry button,
.s-product-card-entry .s-button-element,
.s-product-card-entry salla-button,
.s-product-card-entry salla-add-product-button,
.product-card button,
.product-card .s-button-element,
.product-entry button,
.product-entry .s-button-element {
  color: var(--enjoy-gold) !important;
  border-color: var(--enjoy-gold) !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: all 0.25s ease !important;
}

.s-product-card-entry [class*="sicon"]::before,
.product-card [class*="sicon"]::before,
.product-entry [class*="sicon"]::before {
  color: var(--enjoy-gold) !important;
  -webkit-text-fill-color: var(--enjoy-gold) !important;
  opacity: 1 !important;
}

.s-product-card-entry svg,
.s-product-card-entry svg *,
.product-card svg,
.product-card svg *,
.product-entry svg,
.product-entry svg * {
  color: var(--enjoy-gold) !important;
  fill: var(--enjoy-gold) !important;
  stroke: var(--enjoy-gold) !important;
  opacity: 1 !important;
}

.s-product-card-entry i,
.s-product-card-entry span[class*="icon"],
.product-card i,
.product-card span[class*="icon"],
.product-entry i,
.product-entry span[class*="icon"] {
  color: var(--enjoy-gold) !important;
  -webkit-text-fill-color: var(--enjoy-gold) !important;
  opacity: 1 !important;
}

/* Hover على دوائر الأيقونات */
.s-product-card-entry button:hover,
.s-product-card-entry .s-button-element:hover,
.product-card button:hover,
.product-card .s-button-element:hover,
.product-entry button:hover,
.product-entry .s-button-element:hover {
  background: var(--enjoy-gold) !important;
  border-color: var(--enjoy-gold) !important;
  color: var(--enjoy-navy) !important;
  transform: translateY(-3px) !important;
}

.s-product-card-entry button:hover [class*="sicon"]::before,
.product-card button:hover [class*="sicon"]::before,
.product-entry button:hover [class*="sicon"]::before {
  color: var(--enjoy-navy) !important;
  -webkit-text-fill-color: var(--enjoy-navy) !important;
}

.s-product-card-entry button:hover svg,
.s-product-card-entry button:hover svg *,
.product-card button:hover svg,
.product-card button:hover svg *,
.product-entry button:hover svg,
.product-entry button:hover svg * {
  color: var(--enjoy-navy) !important;
  fill: var(--enjoy-navy) !important;
  stroke: var(--enjoy-navy) !important;
}

/* ==================================================
   2) Header Main Menu
   ================================================== */
.main-menu li a,
.s-main-menu li a,
header nav li a,
.store-header li a,
.navbar-menu li a,
.header-menu li a,
.categories-menu li a {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.8 !important;
  transition: all 0.25s ease !important;
}

.main-menu li a:hover,
.s-main-menu li a:hover,
header nav li a:hover,
.store-header li a:hover,
.navbar-menu li a:hover {
  color: var(--enjoy-gold) !important;
}

.main-menu li a:hover i,
.main-menu li a:hover svg,
.s-main-menu li a:hover i,
.s-main-menu li a:hover svg,
header nav li a:hover i,
header nav li a:hover svg,
.store-header li a:hover i,
.store-header li a:hover svg,
.navbar-menu li a:hover i,
.navbar-menu li a:hover svg {
  color: var(--enjoy-gold) !important;
  fill: var(--enjoy-gold) !important;
  stroke: var(--enjoy-gold) !important;
}

/* ==================================================
   3) Dropdown Menu
   ================================================== */
/* ==================================================
   3) Dropdown Menu
   ================================================== */

/* غيّر هذا المتغير في الأعلى لو أردت درجة موف مختلفة */
:root {
  --enjoy-purple-menu: #a855f7; /* موف */
}

.main-menu li ul li a:hover,
.s-main-menu li ul li a:hover,
header nav li ul li a:hover,
.store-header li ul li a:hover,
.navbar-menu li ul li a:hover,
.sub-menu li a:hover,
.dropdown-menu li a:hover {
  background: var(--enjoy-purple-menu) !important; /* بدل الذهبي */
  color: var(--enjoy-white) !important;            /* النص أبيض */
  padding-right: 18px !important;
}

/* ==================================================
   5) Product Page - Wishlist & Share Icons
   ================================================== */
.product-entry .s-product-actions button,
.product-entry .product-actions button,
.single-product .product-actions button,
.s-product-page .product-actions button,
.product-form button.icon-btn,
button.btn--wishlist,
button.btn--share {
  color: var(--enjoy-gold) !important;
  border-color: var(--enjoy-gold) !important;
  background: transparent !important;
}

.product-entry .product-actions button svg *,
.single-product .product-actions button svg *,
.s-product-page .product-actions button svg *,
button.btn--wishlist svg *,
button.btn--share svg * {
  color: var(--enjoy-gold) !important;
  fill: var(--enjoy-gold) !important;
  stroke: var(--enjoy-gold) !important;
}

.product-entry .product-actions button:hover,
.single-product .product-actions button:hover,
.s-product-page .product-actions button:hover,
button.btn--wishlist:hover,
button.btn--share:hover {
  background: var(--enjoy-gold) !important;
  border-color: var(--enjoy-gold) !important;
}

.product-entry .product-actions button:hover svg *,
button.btn--wishlist:hover svg *,
button.btn--share:hover svg * {
  color: var(--enjoy-navy) !important;
  fill: var(--enjoy-navy) !important;
  stroke: var(--enjoy-navy) !important;
}

/* ==================================================
   6) Quantity Buttons (+ / -)
   ================================================== */
.product-entry .quantity button,
.product-entry .qty button,
.single-product .quantity button,
.single-product .qty button,
.s-product-page .quantity button,
.s-product-page .qty button {
  color: var(--enjoy-gold) !important;
  border: 1px solid var(--enjoy-gold) !important;
  background: transparent !important;
}

.product-entry .quantity button svg *,
.product-entry .qty button svg *,
.single-product .quantity button svg *,
.s-product-page .quantity button svg * {
  color: var(--enjoy-gold) !important;
  fill: var(--enjoy-gold) !important;
  stroke: var(--enjoy-gold) !important;
}

/* ==================================================
   7) Add to Cart Button
   ================================================== */
.product-entry .btn--add-to-cart,
.product-entry .add-to-cart,
.single-product .btn--add-to-cart,
.single-product .add-to-cart,
.s-product-page .btn--add-to-cart,
.s-product-page .add-to-cart,
button[name="add"],
button.add_to_cart_btn {
  background: var(--enjoy-navy) !important;
  color: var(--enjoy-white) !important;
  border: 1px solid var(--enjoy-navy) !important;
}

.product-entry .btn--add-to-cart svg *,
.single-product .btn--add-to-cart svg *,
.s-product-page .btn--add-to-cart svg *,
button[name="add"] svg *,
button.add_to_cart_btn svg * {
  color: var(--enjoy-white) !important;
  fill: var(--enjoy-white) !important;
  stroke: var(--enjoy-white) !important;
}

/* ==================================================
   8) ⭐ Buy Now Button - Light Purple ⭐
   زر اشتري الآن - موف فاتح (أقوى استهداف)
   ================================================== */
.product-entry .btn--buy-now,
.product-entry .buy-now,
.product-entry button.buy-now,
.single-product .btn--buy-now,
.single-product .buy-now,
.s-product-page .btn--buy-now,
.s-product-page .buy-now,
.s-product-page button.buy-now,
.product-form .buy-now,
.product-form button.buy-now,
.product-form .s-button-element.s-button-outline,
.product-form .s-button-outline,
.product-form salla-button[fill="outline"],
.product-form salla-button[fill="outline"]::part(button),
salla-button[fill="outline"]::part(button),
button[name="buy_now"],
button.buy-now-btn,
a.buy-now,
.btn-buy-now,
[data-action="buy-now"] {
  background: var(--enjoy-purple) !important;
  background-color: var(--enjoy-purple) !important;
  color: var(--enjoy-white) !important;
  border: 1px solid var(--enjoy-purple) !important;
  font-weight: 700 !important;
  transition: all 0.25s ease !important;
  opacity: 1 !important;
  box-shadow: 0 4px 12px rgba(199, 125, 255, 0.25) !important;
}

/* أيقونة ونص زر اشتري الآن */
.product-entry .btn--buy-now i,
.product-entry .btn--buy-now svg,
.product-entry .btn--buy-now svg *,
.product-entry .buy-now i,
.product-entry .buy-now svg,
.product-entry .buy-now svg *,
.single-product .btn--buy-now svg *,
.single-product .buy-now svg *,
.s-product-page .btn--buy-now svg *,
.s-product-page .buy-now svg *,
.s-product-page .buy-now i,
.s-product-page .buy-now i::before,
.product-form .buy-now i,
.product-form .buy-now i::before,
.product-form .buy-now svg *,
.product-form .s-button-outline i,
.product-form .s-button-outline i::before,
.product-form .s-button-outline svg,
.product-form .s-button-outline svg *,
.product-form salla-button[fill="outline"]::part(icon),
salla-button[fill="outline"]::part(icon),
salla-button[fill="outline"]::part(label),
button[name="buy_now"] i,
button[name="buy_now"] svg,
button[name="buy_now"] svg *,
button.buy-now-btn i,
button.buy-now-btn svg,
button.buy-now-btn svg * {
  color: var(--enjoy-white) !important;
  fill: var(--enjoy-white) !important;
  stroke: var(--enjoy-white) !important;
  -webkit-text-fill-color: var(--enjoy-white) !important;
  opacity: 1 !important;
}

.product-form .s-button-outline .s-button-text,
.product-form salla-button[fill="outline"]::part(label) {
  color: var(--enjoy-white) !important;
}

/* Hover - يصبح موف غامق مع توهج */
.product-entry .btn--buy-now:hover,
.product-entry .buy-now:hover,
.single-product .btn--buy-now:hover,
.single-product .buy-now:hover,
.s-product-page .btn--buy-now:hover,
.s-product-page .buy-now:hover,
.product-form .buy-now:hover,
.product-form .s-button-outline:hover,
.product-form salla-button[fill="outline"]:hover::part(button),
button[name="buy_now"]:hover,
button.buy-now-btn:hover {
  background: var(--enjoy-purple-dark) !important;
  background-color: var(--enjoy-purple-dark) !important;
  border-color: var(--enjoy-purple-dark) !important;
  color: var(--enjoy-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(156, 23, 155, 0.45) !important;
}

/* ==================================================
   9) Dark Mode Adjustments
   ================================================== */
html.dark .product-entry .btn--add-to-cart,
html.dark .single-product .btn--add-to-cart,
html.dark .s-product-page .btn--add-to-cart,
body.dark .product-entry .btn--add-to-cart,
[data-theme="dark"] .product-entry .btn--add-to-cart,
[data-theme="dark"] .s-product-page .btn--add-to-cart {
  background: var(--enjoy-navy) !important;
  color: var(--enjoy-white) !important;
  border-color: var(--enjoy-white) !important;
}

/* زر اشتري الآن في الوضع الليلي - يفضل موف فاتح */
html.dark .product-entry .btn--buy-now,
html.dark .product-entry .buy-now,
html.dark .single-product .btn--buy-now,
html.dark .s-product-page .btn--buy-now,
html.dark .s-product-page .buy-now,
html.dark .product-form .buy-now,
html.dark .product-form .s-button-outline,
body.dark .product-entry .buy-now,
body.dark .s-product-page .buy-now,
body.dark .product-form .s-button-outline,
[data-theme="dark"] .product-entry .buy-now,
[data-theme="dark"] .s-product-page .buy-now,
[data-theme="dark"] .product-form .s-button-outline,
[data-theme="dark"] button.buy-now-btn,
[data-theme="dark"] button[name="buy_now"] {
  background: var(--enjoy-purple) !important;
  background-color: var(--enjoy-purple) !important;
  color: var(--enjoy-white) !important;
  border: 1px solid var(--enjoy-purple) !important;
  opacity: 1 !important;
  box-shadow: 0 4px 14px rgba(199, 125, 255, 0.35) !important;
}

/* أيقونات صفحة المنتج في الدارك مود */
html.dark .product-single button svg *,
html.dark .product-page button svg *,
html.dark .product-entry button svg *,
html.dark .product__details button svg *,
html.dark .product-form button svg *,
html.dark .s-product-page button svg *,
body.dark .product-entry button svg *,
[data-theme="dark"] .product-entry button svg *,
[data-theme="dark"] .s-product-page button svg * {
  color: var(--enjoy-gold) !important;
  stroke: var(--enjoy-gold) !important;
  fill: none !important;
  opacity: 1 !important;
}

html.dark .product-single button i,
html.dark .product-page button i,
html.dark .product-entry button i,
html.dark .product-form button i,
html.dark .s-product-page button i,
body.dark .s-product-page button i,
[data-theme="dark"] .s-product-page button i {
  color: var(--enjoy-gold) !important;
  -webkit-text-fill-color: var(--enjoy-gold) !important;
  opacity: 1 !important;
}

/* استثناء: أيقونات زر اشتري الآن دائماً بيضاء حتى في الدارك */
html.dark .buy-now i,
html.dark .buy-now i::before,
html.dark .buy-now svg *,
html.dark .btn--buy-now svg *,
html.dark button.buy-now-btn svg *,
body.dark .buy-now svg *,
[data-theme="dark"] .buy-now svg *,
[data-theme="dark"] .btn--buy-now svg * {
  color: var(--enjoy-white) !important;
  -webkit-text-fill-color: var(--enjoy-white) !important;
  fill: var(--enjoy-white) !important;
  stroke: var(--enjoy-white) !important;
  opacity: 1 !important;
}

/* ==================================================
   10) Fix Hidden Icons (سلة - عين - قلب)
   ================================================== */
.sicon-shopping-bag::before,
.sicon-cart::before,
.sicon-cart2::before,
.sicon-bag::before,
.sicon-add::before,
.sicon-add-cart::before,
.sicon-eye::before,
.sicon-eye2::before,
.sicon-view::before,
.sicon-heart::before,
.sicon-heart2::before,
.sicon-favorite::before {
  color: var(--enjoy-gold) !important;
  -webkit-text-fill-color: var(--enjoy-gold) !important;
  opacity: 1 !important;
}

/* ==================================================
   Global Smooth Transitions
   ================================================== */
button, 
a {
  transition: all 0.25s ease !important;
  /* تصغير حجم بطاقات المنتجات في صفحة التصنيفات - سلة */
@media (min-width: 768px) {
  .products-grid,
  .product-list {
    gap: 16px !important;
  }

  .products-grid .product-entry,
  .product-list .product-entry,
  .products-grid .product-card,
  .product-list .product-card {
    transform: scale(0.88);
    transform-origin: top center;
    margin-bottom: -40px;
  }
}

/* للموبايل */
@media (max-width: 767px) {
  .products-grid .product-entry,
  .product-list .product-entry,
  .products-grid .product-card,
  .product-list .product-card {
    transform: scale(0.94);
    transform-origin: top center;
    margin-bottom: -20px;
  }
}
}