/* ═══════════════════════════════════════════════════════════════
   غريبة ستور — كود CSS مخصص لثيم رائد على منصة سلة
   الألوان: بنفسجي + بيج
   الصق هذا الكود كاملاً في: المظهر ← تصميم المتجر ← CSS
═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   ١. تحميل خط Tajawal
══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&family=Amiri:wght@700&display=swap');

/* ══════════════════════════════════════════════════
   ٢. متغيرات الألوان — غيّر هنا فقط إذا أردت
══════════════════════════════════════════════════ */
:root {
  --g-purple:       #3B2068;
  --g-purple-dark:  #2A1A50;
  --g-purple-light: #5B3FA0;
  --g-beige:        #C9B8A0;
  --g-beige-light:  #F7F3EE;
  --g-beige-mid:    #EDE6DC;
}

/* ══════════════════════════════════════════════════
   ٣. الخط العام للمتجر
══════════════════════════════════════════════════ */
body,
body *:not(i):not([class*="sicon"]):not([class*="icon"]) {
  font-family: 'Tajawal', sans-serif !important;
}

/* ══════════════════════════════════════════════════
   ٤. الهيدر (شريط التنقل العلوي)
══════════════════════════════════════════════════ */
header,
.header,
#header,
[class*="header"],
salla-navbar,
.s-header {
  background-color: var(--g-purple) !important;
  border-bottom: none !important;
}

/* روابط الهيدر */
header a,
header nav a,
.header a,
header li a,
salla-navbar a,
[class*="header"] a {
  color: rgba(247, 243, 238, 0.8) !important;
  font-family: 'Tajawal', sans-serif !important;
}

header a:hover,
.header a:hover,
header nav a:hover {
  color: var(--g-beige) !important;
}

/* شعار المتجر */
header .logo img,
.header__logo img,
header [class*="logo"] img,
salla-navbar [class*="logo"] img {
  filter: brightness(0) invert(1) !important;
}

/* أيقونات الهيدر (البحث، السلة، الحساب) */
header [class*="icon"],
header [class*="sicon"],
header svg,
.header [class*="icon"] {
  color: var(--g-beige) !important;
  fill: var(--g-beige) !important;
}

/* ══════════════════════════════════════════════════
   ٥. الخلفية العامة للصفحة
══════════════════════════════════════════════════ */
body,
main,
.main-content,
#main {
  background-color: var(--g-beige-light) !important;
}

/* ══════════════════════════════════════════════════
   ٦. العناوين والنصوص
══════════════════════════════════════════════════ */
h1, h2, h3, h4,
.section-title,
.title,
[class*="section-head"] h2,
[class*="section-head"] h3 {
  color: var(--g-purple-dark) !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════
   ٧. بطاقات المنتجات
══════════════════════════════════════════════════ */
.product-item,
.product-card,
.s-product-card,
[class*="product-item"],
[class*="product-card"],
salla-product-card {
  background-color: #FFFFFF !important;
  border: 0.5px solid var(--g-beige-mid) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.product-item:hover,
.product-card:hover,
salla-product-card:hover {
  border-color: var(--g-purple-light) !important;
  box-shadow: 0 4px 16px rgba(59, 32, 104, 0.1) !important;
}

/* اسم المنتج */
.product-item [class*="name"],
.product-card [class*="name"],
.product-item [class*="title"],
salla-product-card [class*="name"],
salla-product-card [class*="title"] {
  color: var(--g-purple-dark) !important;
  font-weight: 700 !important;
}

/* سعر المنتج */
.product-item [class*="price"],
.product-card [class*="price"],
salla-product-card [class*="price"],
[class*="product"] [class*="price"] {
  color: var(--g-purple-light) !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════
   ٨. زر "إضافة للسلة"
══════════════════════════════════════════════════ */
[class*="add-to-cart"],
[class*="add_to_cart"],
[class*="btn-cart"],
[class*="cart-btn"],
salla-add-product-button button,
salla-add-product-button,
button[class*="add"],
.product-item button,
.product-card button {
  background-color: var(--g-purple) !important;
  color: var(--g-beige) !important;
  border-color: var(--g-purple) !important;
  border-radius: 8px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
  transition: opacity 0.2s !important;
}

[class*="add-to-cart"]:hover,
salla-add-product-button button:hover,
.product-item button:hover {
  opacity: 0.88 !important;
  background-color: var(--g-purple) !important;
}

/* ══════════════════════════════════════════════════
   ٩. الأزرار العامة
══════════════════════════════════════════════════ */
.btn,
.btn-primary,
.s-btn,
button[class*="primary"],
[class*="btn-primary"],
[class*="button-primary"] {
  background-color: var(--g-purple) !important;
  color: var(--g-beige) !important;
  border-color: var(--g-purple) !important;
  border-radius: 8px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════
   ١٠. صفحة تفاصيل المنتج
══════════════════════════════════════════════════ */
.product-page [class*="price"],
[class*="product-details"] [class*="price"],
.product__price,
salla-price {
  color: var(--g-purple-light) !important;
  font-weight: 700 !important;
  font-size: 1.4em !important;
}

/* ══════════════════════════════════════════════════
   ١١. شريط الثقة / المميزات (إن وُجد)
══════════════════════════════════════════════════ */
[class*="features"],
[class*="trust-bar"],
[class*="benefits"] {
  background-color: var(--g-beige-mid) !important;
  border-top: 1px solid #DDD5C8 !important;
  border-bottom: 1px solid #DDD5C8 !important;
}

[class*="features"] [class*="icon"],
[class*="benefits"] [class*="icon"] {
  color: var(--g-purple-light) !important;
}

/* ══════════════════════════════════════════════════
   ١٢. الفوتر
══════════════════════════════════════════════════ */
footer,
.footer,
#footer,
salla-footer,
[class*="footer"] {
  background-color: var(--g-purple-dark) !important;
  color: var(--g-beige) !important;
}

footer a,
.footer a,
salla-footer a,
[class*="footer"] a {
  color: rgba(201, 184, 160, 0.75) !important;
  transition: color 0.2s !important;
}

footer a:hover,
.footer a:hover {
  color: var(--g-beige) !important;
}

footer h1, footer h2, footer h3, footer h4,
footer p, footer span,
.footer h1, .footer h2, .footer h3,
.footer p, .footer span,
[class*="footer"] p,
[class*="footer"] span {
  color: var(--g-beige) !important;
}

/* ══════════════════════════════════════════════════
   ١٣. شريط البحث
══════════════════════════════════════════════════ */
input[type="search"],
input[type="text"],
.search-input,
[class*="search"] input {
  border-color: rgba(59, 32, 104, 0.2) !important;
  border-radius: 8px !important;
}

input[type="search"]:focus,
[class*="search"] input:focus {
  border-color: var(--g-purple) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59, 32, 104, 0.1) !important;
}

/* ══════════════════════════════════════════════════
   ١٤. رابط اللون الأخضر القديم — استبدل كل أخضر
══════════════════════════════════════════════════ */
/* هذا يستهدف أي عنصر يحمل اللون الأخضر القديم */
[style*="#4e7a27"],
[style*="4e7a27"] {
  color: var(--g-purple) !important;
  background-color: var(--g-purple) !important;
  border-color: var(--g-purple) !important;
}

/* ══════════════════════════════════════════════════
   ١٥. قسم البنر الرئيسي
══════════════════════════════════════════════════ */
[class*="slider"],
[class*="banner"],
[class*="hero"],
salla-slider,
salla-banner {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════
   ١٦. التصنيفات / القائمة المنسدلة
══════════════════════════════════════════════════ */
[class*="dropdown"],
[class*="sub-menu"],
[class*="mega-menu"] {
  background-color: var(--g-purple-dark) !important;
  border-top: 2px solid var(--g-beige) !important;
}

[class*="dropdown"] a,
[class*="sub-menu"] a,
[class*="mega-menu"] a {
  color: var(--g-beige-light) !important;
}

[class*="dropdown"] a:hover,
[class*="sub-menu"] a:hover {
  background-color: var(--g-purple) !important;
  color: var(--g-beige) !important;
}

/* ══════════════════════════════════════════════════
   ١٧. الـ Badges / التسميات
══════════════════════════════════════════════════ */
[class*="badge"],
[class*="label"],
[class*="tag"] {
  background-color: var(--g-purple) !important;
  color: var(--g-beige) !important;
  border-radius: 20px !important;
}

/* ══════════════════════════════════════════════════
   ١٨. التمرير / scrollbar (اختياري)
══════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--g-beige-light); }
::-webkit-scrollbar-thumb {
  background: var(--g-purple);
  border-radius: 3px;
}