/* ============================
   ALPHA GUARD - CSS المعدل مع إخفاء الإيميل
   ============================ */

/* --- متغيرات سلة الرسمية --- */
:root {
  --color-primary: #1A1A1A !important;
  --color-primary-dark: #000000 !important;
  --color-primary-light: #2A2A2A !important;
  --font-main: 'Cairo', 'Estedad', sans-serif !important;
  --bg-dark-main: #ffffff !important;   /* خلفية المتجر البيضاء */
  --bg-card-dark: #1E1E1E !important;   /* خلفية بطاقات المنتجات */
  --text-dark: #1A1A1A !important;      /* لون النصوص الأساسية (أسود داكن) */
  --text-light: #ffffff !important;     /* لون النصوص فوق الخلفيات الداكنة */
}

/* ==================================================== */
/* 🚨 إخفاء البريد الإلكتروني بالكامل من الهيدر والشريط العلوي */
/* ==================================================== */
a[href^="mailto:"],
header a[href^="mailto:"],
.site-header a[href^="mailto:"],
.s-header a[href^="mailto:"],
#mainnav a[href^="mailto:"],
[class*="header"] a[href*="outlook.com"],
[class*="header"] a[href*="@"],
.top-header-email,
.s-header-top-email {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --- الخلفية العامة للمتجر وتعديل لون النصوص للأسود --- */
body, 
#app, 
main, 
.main-content, 
.s-block,
.bg-white,
.bg-gray-50,
.bg-gray-100,
[class*="bg-white"] {
  background-color: var(--bg-dark-main) !important;
  color: var(--text-dark) !important;
}

/* --- الهيدر والقوائم (خلفية داكنة ونصوص بيضاء) --- */
header, .s-header, .site-header {
  background-color: #1A1A1A !important;
  border-bottom: 1px solid #2C2C2E !important;
}
#mainnav,
#mainnav.bg-white,
.main-nav-container {
  background-color: #1A1A1A !important;
}
#mainnav .inner,
.inner.bg-inherit {
  background-color: #1A1A1A !important;
}
header a, header .s-nav-link, [class*="header"] nav a {
  color: #ffffff !important;
}
header svg, header .icon, #mainnav svg {
  color: #C0C0C8 !important;
}

/* ==================================================== */
/* --- أزرار السلة والأزرار الأساسية (الحل الجذري للنص) --- */
/* ==================================================== */

/* 1. شكل الزر في الوضع الطبيعي (خلفية داكنة) */
.s-button-primary-outline,
button.s-button-btn,
.s-button-btn.s-button-solid,
salla-button[fill="solid"] {
  background-color: #1A1A1A !important;
  border-color: #333333 !important;
  color: #ffffff !important;
}

/* 2. إجبار النص الداخلي (span) على اللون الأبيض في الوضع الطبيعي */
.s-button-primary-outline *,
button.s-button-btn *,
.s-button-btn.s-button-solid span,
.s-button-btn.s-button-solid .s-button-text,
salla-button[fill="solid"] *,
salla-button[fill="solid"] span {
  color: #ffffff !important;
}

/* 3. شكل الزر عند التمرير (خلفية رمادية) */
.s-button-primary-outline:hover,
button.s-button-btn:hover,
.s-button-btn.s-button-solid:hover,
salla-button[fill="solid"]:hover {
  background-color: #C0C0C8 !important;
  border-color: #C0C0C8 !important;
  color: #1A1A1A !important;
}

/* 4. تغيير لون النص الداخلي للأسود عند التمرير لتوضيح القراءة */
.s-button-primary-outline:hover *,
button.s-button-btn:hover *,
.s-button-btn.s-button-solid:hover span,
.s-button-btn.s-button-solid:hover .s-button-text,
salla-button[fill="solid"]:hover *,
salla-button[fill="solid"]:hover span {
  color: #1A1A1A !important;
}
/* ==================================================== */

/* --- بطاقات المنتجات في القوائم (خلفية داكنة ونص أبيض) --- */
.s-product-card-entry {
  background-color: var(--bg-card-dark) !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.s-product-card-entry:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7) !important;
  border-color: #3A3A3A !important;
}
.s-product-card-entry h3, 
.s-product-card-entry a, 
.s-product-card-entry .s-product-card-title,
.s-product-card-entry .s-product-card-price {
  color: var(--text-light) !important;
}

/* --- صفحة المنتج الفردية وآراء العملاء (نصوص وأسعار باللون الأسود) --- */
.product-single, 
.s-product-single, 
[class*="product-single"],
.store-certificate, 
.reviews-section, 
[class*="testimonial"], 
[class*="review"] {
  background-color: var(--bg-dark-main) !important;
  color: var(--text-dark) !important;
}

/* تعديل لون السعر والعناوين والتفاصيل إلى الأسود الداكن */
.product-single .price, 
[class*="product-price"],
.product-single h1, 
.product-single h2, 
.product-single p, 
.product-single span,
.product-single label,
.product-single div,
.reviews-section p,
.reviews-section span,
[class*="product-details"] * {
  color: var(--text-dark) !important;
}

.product-single .price, [class*="product-price"] {
  font-weight: 700 !important;
}

/* --- الخطوط العامة وتنسيق النصوص --- */
body, h1, h2, h3, h4, h5, h6, p, span, button, a, label, input, textarea {
  font-family: var(--font-main) !important;
}

/* --- الفوتر --- */
.store-footer {
  background-color: #1A1A1A !important;
  border-top: 1px solid #2A2A2A !important;
}
.store-footer * {
  color: #ffffff !important;
}

/* --- تصحيح فراغات الأقسام الجانبية --- */
.s-block.container {
  margin: 24px auto 0 auto !important;
  max-width: 1280px !important;
  width: 100% !important;
  padding: 0 20px !important;
}

/* --- تحكم بحجم وموقع البانر العريض --- */
.s-block--fixed-banner {
  max-height: 280px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}
.s-block--fixed-banner .banner--fixed {
  height: 280px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}
.s-block--fixed-banner picture,
.s-block--fixed-banner picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* --- زر "اشتر الآن" فوق كل بانر --- */
section[component-id="399296122"] .banner--fixed::after {
  content: "اشتر الداش كام الآن";
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #1A1A1A;
  color: #ffffff;
  padding: 10px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  z-index: 10;
}

section[component-id="653060749"] .banner--fixed::after {
  content: "اشتر PPF الآن";
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #1A1A1A;
  color: #ffffff;
  padding: 10px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  z-index: 10;
}