/**************************************************************
 *
 * CSS مخصص لمتجر "مخازن تك" (makhazintech.sa)
 * الغرض: إصلاحات تخطيط الجوال، تطبيق وضع ليلي، وتخصيص شاشة التحميل.
 * الإصدار: 2.9 (إصلاح وتصحيح لون وتعبئة القلب)
 *
 * جدول المحتويات:
 * 1.0 إصلاحات التخطيط (Layout Fixes)
 * 1.1 تداخل الهيدر في الجوال
 *
 * 2.0 تصميم الوضع الليلي (Dark Mode Theme)
 * 2.1 - 2.12 ... (إعدادات الوضع الليلي)
 * 2.13 مكون: أزرار كرت المنتج (السلة والمفضلة) - ليلي
 *
 * 3.0 تخصيص شاشة التحميل (Loader)
 * 3.1 - 3.3 ... (إعدادات اللودر)
 *
 * 4.0 تخصيصات كرت المنتج
 * 4.1 تعديل شارة "نفذت الكمية" (لون باهت)
 * 4.2 تعديل أزرار "السلة" و "المفضلة" - نهاري (ديناميكي)
 *
 **************************************************************/


/* ======================================= */
/* 3.0 تخصيص شاشة التحميل (Loader)
/* (تم نقله للأعلى لسهولة الوصول)
/* ======================================= */

/* --- 3.1 إعدادات اللودر الأساسية --- */
.loader-init {
  /* تحديد الألوان الثابتة للخلفية */
  background-color: #ffffff !important; /* لون الخلفية الافتراضي (أبيض للوضع النهاري) */
  position: fixed !important; /* التأكد من بقاء الخصائص الأساسية */
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100vw !important; height: 100vh !important;
  z-index: 9999999 !important;  
  display: flex !important; /* يستخدم لتوسيط العنصر الوهمي لاحقاً */
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: none !important; /* إزالة أي تأثير ضبابي */
  
  /* إزالة خصائص الخلفية والأنيميشن من العنصر الرئيسي */
  background-image: none !important;
  animation: none !important;
}

/* لون الخلفية للوضع الليلي */
html[data-theme="dark"] .loader-init {
  background-color: #000000 !important; /* أسود صريح للوضع الليلي */
}

/* --- 3.2 إخفاء الدائرة الافتراضية --- */
.loader-init::after {
  content: none !important;  
  display: none !important;  
}

/* --- 3.3 إضافة الشعار وتطبيق الوميض عليه باستخدام ::before --- */
.loader-init::before {
  content: ''; /* ضروري لظهور العنصر الوهمي */
  display: block;
  
  /* !!! === استبدل الرابط التالي برابط شعار متجرك الفعلي === !!! */
  background-image: url('https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/bRQOKX/5cJKp9PAi4tSENIcSmhpFTX5S63llaFV0bk7JHZJ.png');  
  
  background-repeat: no-repeat;
  background-position: center center;
  
  /* --- تعديل حجم الشعار حسب الحاجة --- */
  background-size: 120px auto; /* يمكنك تجربة قيم مثل 100px, 150px, etc. */
  
  /* تحديد أبعاد العنصر الوهمي ليطابق حجم الشعار أو أكبر قليلاً */
  width: 150px; /* يجب أن يكون كافياً لاحتواء الشعار */
  height: 150px; /* يجب أن يكون كافياً لاحتواء الشعار */

  /* --- تطبيق الأنيميشن (الوميض/النبض) --- */
  animation: subtlePulse 2s infinite ease-in-out;  
}

/* --- (اختياري) جعل الشعار أبيض في الوضع الليلي --- */
/*
html[data-theme="dark"] .loader-init::before {
  filter: brightness(0) invert(1);  
}
*/

/* --- تعريف أنيميشن الوميض/النبض الخفيف --- */
@keyframes subtlePulse {
  0%, 100% {
    opacity: 0.7;  
  }
  50% {
    opacity: 1;  
  }
}


/* ======================================= */
/* 1.0 إصلاحات التخطيط (Layout Fixes)
/* ======================================= */

@media (max-width: 768px) {
  .static-banners {
    padding-top: 90px !important;
  }
}


/* ======================================= */
/* 2.0 تصميم الوضع الليلي (Dark Mode Theme)
/* ======================================= */

html[data-theme="dark"] {
  --bg-primary: #000000 !important;
  --bg-secondary: #111111 !important;  
  --color-primary: #FFFFFF !important;  
  --heading-color: #FFFFFF !important;
  --description-color: #AAAAAA !important;  
}

/* 2.2 الهيدر */
html[data-theme="dark"] a[aria-label="Store Home Page"] img {
  filter: brightness(0) invert(1) !important;
}

/* 2.3 شريط التنقل السفلي */
html[data-theme="dark"] .mobile-nav-bottom a,
html[data-theme="dark"] .mobile-nav-bottom button {
  color: #FFFFFF !important;
}

/* 2.4 كروت المنتجات */
html[data-theme="dark"] .s-product-card,
html[data-theme="dark"] main .s-product-card,
html[data-theme="dark"] .s-block .s-product-card,
html[data-theme="dark"] .s-slider .s-product-card,
html[data-theme="dark"] .product-card {
  background-color: var(--bg-secondary, #111111) !important;
  border-color: transparent !important;
}

/* 2.5 خطوط تزيين العناوين */
html[data-theme="dark"] .s-block-heading .title-line,
html[data-theme="dark"] .brands-heading-divider,
html[data-theme="dark"] .main-links-style-2-heading-divider,
html[data-theme="dark"] .enhanced-products-slider-heading-divider,
html[data-theme="dark"] .store-features-style-1-heading-divider {
  background-color: #FFFFFF !important;
}
html[data-theme="dark"] .s-block-heading .title-line::before,
html[data-theme="dark"] .brands-heading-divider::before,
html[data-theme="dark"] .main-links-style-2-heading-divider::before,
html[data-theme="dark"] .enhanced-products-slider-heading-divider::before,
html[data-theme="dark"] .store-features-style-1-heading-divider::before {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

/* 2.6 زر "نفذت الكمية" (الزر المعطل) */
html[data-theme="dark"] body .s-product-card .product-item__action[disabled],
html[data-theme="dark"] body .s-product-card .btn--sold-out {
  border-color: #FFFFFF !important;
  background-color: transparent !important;
  color: #FFFFFF !important;
}
html[data-theme="dark"] body .s-product-card .product-item__action[disabled] *,
html[data-theme="dark"] body .s-product-card .btn--sold-out * {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* 2.7 أسهم ونقاط السلايدر */
html[data-theme="dark"] .swiper-button-next,
html[data-theme="dark"] .swiper-button-prev,
html[data-theme="dark"] [class*="-swiper-actions-center-next"],
html[data-theme="dark"] [class*="-swiper-actions-center-prev"] {
  color: #FFFFFF !important;
}
html[data-theme="dark"] .swiper-pagination-bullet-active,
html[data-theme="dark"] .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .swiper-pagination-bullet {
  background-color: #888888 !important;  
  border-color: #888888 !important;
  opacity: 0.7 !important;
}

/* 2.8 الروابط العامة */
html[data-theme="dark"] .text-primary,
html[data-theme="dark"] .text-primary * {
   color: #FFFFFF !important;
}

/* 2.9 أيقونة توثيق الماركات */
.brands-single-media-check-icon {
  color: #3b82f6 !important;
}

/* 2.10 أيقونة "منصة الأعمال" */
html[data-theme="dark"] a[aria-label="Business certificate - SBC"] img {
  filter: brightness(0) invert(1) !important;
}

/* 2.11 أيقونات "تجربة تسوق آمنة" */
html[data-theme="dark"] .store-features-style-1-content-single-icon-box {
  background-color: transparent !important;
  border: 2px solid #FFFFFF !important;  
}

/* 2.12 نصوص التذييل (Footer) */
html[data-theme="dark"] footer p,
html[data-theme="dark"] .copyright-text,
html[data-theme="dark"] footer .text-gray-400 {
  color: var(--description-color, #AAAAAA) !important;
}
html[data-theme="dark"] footer h2 {
   color: #FFFFFF !important;
}


/*
 * 2.13 مكون: أزرار كرت المنتج (السلة والمفضلة) - [ الوضع الليلي ]
 * (هذا الكود يستهدف الوضع الليلي فقط)
 */
 
/* زر إضافة للسلة - الوضع الليلي */
html[data-theme="dark"] button.product-card-actions-add-to-cart {
  color: #FFFFFF !important;           /* النص والأيقونة بالداخل (أبيض) */
  border-color: #FFFFFF !important;  /* إطار أبيض */
}
html[data-theme="dark"] button.product-card-actions-add-to-cart svg {
  stroke: #FFFFFF !important;
}
/* عند التمرير: يمتلئ الزر */
html[data-theme="dark"] button.product-card-actions-add-to-cart:hover {
  background-color: #FFFFFF !important; /* خلفية بيضاء */
  color: #000000 !important;           /* نص أسود */
  border-color: #FFFFFF !important;
}
html[data-theme="dark"] button.product-card-actions-add-to-cart:hover svg {
  stroke: #000000 !important;
}

/* زر المفضلة (القلب) - الوضع الليلي */
html[data-theme="dark"] button.product-card-actions-wishlist {
  background-color: transparent !important; /* خلفية شفافة */
  border: 1px solid transparent !important; /* إطار شفاف في الحالة العادية */
  color: rgba(220, 38, 38, 0.4) !important; /* لون القلب أحمر باهت (شفافية 40%) */
}
/* تأثير التحويم والتفعيل للقلب (يصبح أحمر زاهي) - مشترك */
html[data-theme="dark"] button.product-card-actions-wishlist:hover,
html[data-theme="dark"] button.product-card-actions-wishlist.active,
html[data-theme="dark"] button.product-card-actions-wishlist[data-s-wishlist-added="true"] {
  color: #DC2626 !important; /* لون القلب أحمر زاهي (نفس لون "نفذت الكمية" الأصلي) */
  border-color: transparent !important; /* لا يوجد إطار */
  background-color: transparent !important;
}
/* التأكد من أن الـ SVG يستجيب للـ color (هذه هي نقطة التصحيح) */
html[data-theme="dark"] button.product-card-actions-wishlist svg {
  fill: currentColor !important; /* استخدم color الأب لتلوين القلب */
  stroke: transparent !important; /* تأكد من عدم وجود ستروك */
}


/* ======================================= */
/* 4.0 تخصيصات كرت المنتج
/* ======================================= */

/*
 * 4.1 تعديل شارة "نفذت الكمية" (لون باهت)
 */
.product-card-content-media-promotional-title {
  background-color: #999999 !important; /* درجة رمادي باهتة */
  color: #FFFFFF !important;
  border: none !important;  
  padding: 4px 8px !important; 
  border-radius: 4px !important; 
  font-weight: bold !important; 
}

/*
 * 4.2 تعديل أزرار "السلة" و "المفضلة" - [ أساسي + نهاري + ديناميكي ]
 * (هذا الكود هو الأساس، ويطبق على الوضع النهاري)
 */

/* زر إضافة للسلة - الوضع النهاري */
button.product-card-actions-add-to-cart {
  background-color: transparent !important; /* شفاف */
  border: 1px solid #000000 !important;  /* إطار أسود (لون اسم المنتج) */
  color: #000000 !important;           /* النص والأيقونة بالداخل (أسود) */
  
  font-weight: bold !important; /* 1. جعل الخط عريضاً */
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; /* 2. تفاعل ديناميكي */
}
button.product-card-actions-add-to-cart svg {
  stroke: #000000 !important;
  transition: stroke 0.25s ease; /* 2. تفاعل ديناميكي للأيقونة */
}
/* عند التمرير: يمتلئ الزر */
button.product-card-actions-add-to-cart:hover {
  background-color: #000000 !important; /* خلفية سوداء */
  color: #FFFFFF !important;           /* نص أبيض */
  border-color: #000000 !important;
}
button.product-card-actions-add-to-cart:hover svg {
  stroke: #FFFFFF !important;
}


/* زر المفضلة (القلب) - الوضع النهاري */
button.product-card-actions-wishlist {
  background-color: transparent !important; /* خلفية شفافة */
  border: 1px solid transparent !important; /* إطار شفاف في الحالة العادية */
  color: rgba(220, 38, 38, 0.2) !important; /* لون القلب أحمر باهت جداً (شفافية 20%) */
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; /* تفاعل ديناميكي */
}
/* التأكد من أن الـ SVG يستجيب للـ color */
button.product-card-actions-wishlist svg {
  fill: currentColor !important; /* استخدم color الأب لتلوين القلب */
  stroke: transparent !important; /* تأكد من عدم وجود ستروك */
  transition: fill 0.25s ease; /* تفاعل ديناميكي */
}
/* تأثير التحويم والتفعيل للقلب (يصبح أحمر زاهي) */
button.product-card-actions-wishlist:hover,
button.product-card-actions-wishlist.active,
button.product-card-actions-wishlist[data-s-wishlist-added="true"] {
  color: #DC2626 !important; /* لون القلب أحمر زاهي */
  border-color: transparent !important; /* لا يوجد إطار */
  background-color: transparent !important;
}

/* ================== نهاية الكود ================== */