/* ============================================================================
   حرص | CSS خفيف وفاتح — ثيم رائد (سلة)  —  نسخة LIGHT
   ----------------------------------------------------------------------------
   الفلسفة: خلفيات فاتحة نظيفة + الأخضر للعناصر المهمة فقط + كود خفيف وسريع.
   الهوية: أخضر حرص #004F42  +  ليموني #C9F26B
   اللصق في: سلة ← تصميم المتجر ← CSS مخصّص  (يحل محل الكود القديم بالكامل)
   ============================================================================ */

/* ---- 1) الألوان (مصدر واحد) ---- */
:root {
  --hars-green:      #004F42;
  --hars-green-dark: #033A31;
  --hars-lime:       #C9F26B;
  --hars-lime-dark:  #B4E053;
  --hars-ink:        #1B2B27;   /* نص أساسي غامق */
  --hars-muted:      #5A7169;   /* نص ثانوي */
  --hars-bg:         #FaFbF9;   /* خلفية فاتحة جداً */
  --hars-line:       #E6EbE6;
  --hars-radius:     14px;

  --s-color-primary: var(--hars-green);
  --color-primary:   var(--hars-green);
}

/* ---- 2) خلفية عامة فاتحة ---- */
body { background: var(--hars-bg); color: var(--hars-ink); }

/* ---- 3) الأزرار (أخضر للعناصر المهمة) ---- */
.btn--primary,
.s-button-primary,
salla-add-product-button::part(button),
button.btn-add-to-cart {
  background: var(--hars-green);
  border-color: var(--hars-green);
  color: #fff;
  border-radius: var(--hars-radius);
  font-weight: 700;
  transition: background .2s ease;
}
.btn--primary:hover,
.s-button-primary:hover,
salla-add-product-button::part(button):hover { background: var(--hars-green-dark); }

/* زر ليموني للحث (كلاس hars-cta) */
.hars-cta { background: var(--hars-lime); color: #00241E; border:none; border-radius:999px; font-weight:800; }
.hars-cta:hover { background: var(--hars-lime-dark); }

/* ---- 4) الروابط ---- */
a { color: var(--hars-green); }
a:hover { color: var(--hars-green-dark); }

/* ---- 5) بطاقات المنتجات (فاتحة ونظيفة) ---- */
.s-product-card-entry {
  background: #fff;
  border: 1px solid var(--hars-line);
  border-radius: var(--hars-radius);
  box-shadow: 0 2px 10px rgba(6,35,29,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.s-product-card-entry:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(6,35,29,.12);
}
.s-product-card-content-title a { color: var(--hars-ink); font-weight: 600; }
.s-product-card-content-title a:hover { color: var(--hars-green); }

/* ---- 6) الأسعار (واضحة) ---- */
.s-product-card-sale-price { display:flex; align-items:baseline; gap:8px; }
.s-product-card-sale-price h4,
.s-product-card-sale-price .price {
  color: var(--hars-green); font-weight: 800; font-size: 19px;
}
.s-product-card-sale-price span,
.s-product-card-price-before, del {
  color: #9AA8A0; text-decoration: line-through; font-size: 14px; font-weight: 500;
}
.s-product-card-price { color: var(--hars-green); font-weight: 800; font-size: 19px; }

/* ---- 7) شارة الخصم (ليموني) ---- */
.s-product-card-promotion-title,
.product-badge, .discount-badge {
  background: var(--hars-lime); color: #00241E;
  border-radius: 999px; font-weight: 800;
}

/* ---- 8) الهيدر (فاتح مع حد خفيف) ---- */
.s-header, .main-header { background:#fff; border-bottom:1px solid var(--hars-line); }
.s-cart-count, .cart-count { background: var(--hars-green); color:#fff; }
.main-menu a:hover { color: var(--hars-green); }

/* ---- 9) الأقسام (خلفيات فاتحة بدل الأخضر) ---- */
.s-block-image-text,
.s-block-testimonials,
.s-block-newsletter {
  background: #fff;
  border: 1px solid var(--hars-line);
  border-radius: var(--hars-radius);
}
.s-block-image-text .title,
.s-block-testimonials .title { color: var(--hars-green); font-weight: 800; }
.s-block-image-text p { color: var(--hars-muted); }

/* عناوين الأقسام العامة */
.s-block-title, h2.section-title { color: var(--hars-ink); font-weight: 800; }

/* ---- 10) نجوم التقييم ---- */
.rating .filled, [class*="star"].filled { color: #E8B93E; }

/* ---- 11) السلايدر ---- */
.swiper-pagination-bullet-active { background: var(--hars-lime); }

/* ---- 12) شريط المميزات (نص واضح) ---- */
.s-block-features .title,
.s-block-features p { color: var(--hars-ink); font-weight: 600; }
.s-block-features .icon, .s-block-features svg { color: var(--hars-green); }

/* ---- 13) النماذج ---- */
input:focus, textarea:focus, select:focus, .s-input:focus {
  border-color: var(--hars-green);
  box-shadow: 0 0 0 3px rgba(0,79,66,.12);
  outline: none;
}

/* ---- 14) الفوتر (الأخضر هنا مناسب — تباين مع الصفحة الفاتحة) ---- */
.s-footer, footer.store-footer {
  background: var(--hars-green-dark);
  color: #E6EFE9;
}
.s-footer a, footer.store-footer a { color: #C4D8CF; }
.s-footer a:hover, footer.store-footer a:hover { color: var(--hars-lime); }
.s-footer h3, .s-footer h4, .s-footer .s-footer-title { color: #fff; font-weight: 800; }

/* ---- 15) لمسات ---- */
::selection { background: var(--hars-lime); color: #00241E; }
.whatsapp-btn, .floating-contact { background: var(--hars-green); color:#fff; }

/* ---- 16) صفحة السلة (نصوص واضحة) ---- */
.s-cart-item-name, [class*="cart"] .product-name { color: var(--hars-ink); font-weight: 700; }
[class*="cart"] .price, [class*="cart"] .total { color: var(--hars-green); font-weight: 800; }