/* ===========================================
   🛠 متغيرات الثيم
   =========================================== */
:root {
  --bg-start-dark: #1a1a1a;
  --bg-end-dark:   #121212;
  --bg-start-light: #f5f5f5;
  --bg-end-light:   #ffffff;

  --card-bg:       #ffffff;
  --text-dark:     #000000;
  --text-light:    #f0f0f0;
  --accent:        #000000;

  --font-main: 'Helvetica Neue', sans-serif;
  --transition: 0.3s ease;
}

/* ===========================================
   🌓 الثيم الداكن/الفاتح
   =========================================== */
body.dark-mode {
  background: linear-gradient(to bottom, var(--bg-start-dark), var(--bg-end-dark)) !important;
  color: var(--text-light) !important;
}
body.light-mode {
  background: linear-gradient(to bottom, var(--bg-start-light), var(--bg-end-light)) !important;
  color: var(--text-dark) !important;
}

/* ===========================================
   🌑 خلفية المتجر الأساسية
   =========================================== */
body.woocommerce-page,
#main-content,
body.woocommerce-page .woocommerce {
  font-family: var(--font-main) !important;
  transition: background var(--transition), color var(--transition);
}

/* شبكة المنتجات - الحاوية */
.shop-content,
.woocommerce ul.products {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ===========================================
   🧩 بطاقات المنتجات
   =========================================== */
body.woocommerce-page ul.products li.product {
  background: var(--card-bg) !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  position: relative !important;
  text-align: center !important;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
body.woocommerce-page ul.products li.product:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  border: 2px solid var(--accent) !important;
}

/* ===========================================
   🏷 عنوان المنتج — حركة واحدة فقط
   =========================================== */
/* إبطال hover على H2 */
body.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title:hover {
  transform: none !important;
}
/* إعداد H2 و A */
body.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title {
  display: inline-block !important;
  margin-bottom: 10px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  overflow: visible !important;
  position: static !important;
}
body.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title a {
  display: inline-block !important;
  background: var(--card-bg) !important;
  color: var(--text-dark) !important;
  padding: 8px 16px !important;
  border: 2px solid var(--accent) !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
  transition: transform var(--transition) !important;
}
body.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title a:hover {
  transform: scale(1.05) !important;
}
body.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title a::before {
  content: none !important;
}

/* ===========================================
   🧲 تأثير الشيمر (للأسعار والأزرار فقط)
   =========================================== */
body.woocommerce-page ul.products li.product span.price,
body.woocommerce-page ul.products li.product .button.add_to_cart_button {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
body.woocommerce-page ul.products li.product span.price::before,
body.woocommerce-page ul.products li.product .button.add_to_cart_button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left var(--transition);
  z-index: -1;
}

/* ===========================================
   💰 السعر (اللون الأحمر هنا)
   =========================================== */
body.woocommerce-page ul.products li.product span.price {
  display: inline-block !important;
  background: var(--card-bg) !important;
  color: red !important; /* هنا جعلنا السعر باللون الأحمر */
  padding: 6px 14px !important;
  border: 2px solid var(--accent) !important;
  border-radius: 4px !important;
  margin-bottom: 15px !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
  transition: transform var(--transition);
}
body.woocommerce-page ul.products li.product span.price:hover {
  transform: scale(1.05) !important;
}
body.woocommerce-page ul.products li.product span.price:hover::before {
  left: 100%;
}

/* ===========================================
   🛒 زر أضف إلى السلة
   =========================================== */
body.woocommerce-page ul.products li.product .button.add_to_cart_button {
  display: inline-block !important;
  background: var(--card-bg) !important;
  color: var(--text-dark) !important;
  padding: 8px 16px !important;
  border: 2px solid var(--accent) !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: transform var(--transition);
}
body.woocommerce-page ul.products li.product .button.add_to_cart_button:hover {
  transform: scale(1.05) !important;
}
body.woocommerce-page ul.products li.product .button.add_to_cart_button:hover::before {
  left: 100%;
}

/* ===========================================
   🔧 إضافات تحسين بسيطة وروابط
   =========================================== */
a {
  color: var(--text-light);
  text-decoration: none;
  transition: color var(--transition);
}
body.light-mode a {
  color: var(--text-dark);
}
a:hover {
  text-decoration: underline;
}

/* ===========================================
   🔘 مفتاح التبديل (HTML: <input id="theme-toggle" type="checkbox">)
   =========================================== */
#theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 0;
  height: 0;
  opacity: 0;
  z-index: 1000;
}
#theme-toggle + label {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 24px;
  background: var(--card-bg);
  border: 2px solid var(--accent);
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
#theme-toggle + label::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 1px;
  background: var(--accent);
  border-radius: 50%;
  transition: transform var(--transition);
}
#theme-toggle:checked + label::after {
  transform: translateX(24px);
}

/* ===========================================
   ⚙️ افتراضي: نطبق الداكن
   =========================================== */
body {
  background: linear-gradient(to bottom, var(--bg-start-dark), var(--bg-end-dark)) !important;
}