/* ==================================== 1) متغيرات الهوية — غيّر القيم هنا فقط ليتبدّل التصميم كاملاً
   ------------------------------------------------------------------------- */
:root{
  --mh-bg:            #ffffff;   /* خلفية الصفحة الأساسية */
  --mh-bg-alt:         #faf8f4;  /* خلفية الأقسام البديلة (كريمي فاتح جداً) */
  --mh-surface:        #ffffff;  /* خلفية البطاقات */
  --mh-surface-strong: #fdfaf3;  /* عند التحويم */
  --mh-border:         #ece6d8;

  --mh-gold:      #a3812f;  /* اللون الأساسي — أغمق قليلاً من قبل ليبرز على الأبيض */
  --mh-gold-dark: #8a6c26;
  --mh-gold-tint: #fbf3e2;  /* خلفية فاتحة للشارات والتلميحات */
  --mh-mint:      #2e8f74;  /* لون ثانوي للثقة/الشفافية */
  --mh-mint-tint: #e8f5f1;

  --mh-text:       #2a241a;
  --mh-text-muted: #6b6153;
  --mh-text-faint: #9a917f;

  --mh-radius: 18px;
  --mh-shadow: 0 20px 45px -25px rgba(42,36,26,.25);
  --mh-transition: all .35s cubic-bezier(.22,.68,.4,1);
}

/* -------------------------------------------------------------------------
   2) الأساس — تعديل متغيرات سلة الرسمية نفسها بدل تجاوزها لاحقاً
   ------------------------------------------------------------------------- */
:root{
  --color-background-store: var(--mh-bg) !important;
  --color-text-store: var(--mh-text) !important;
  --color-primary: var(--mh-gold) !important;
  --color-primary-dark: var(--mh-gold-dark) !important;
  --color-primary-light: #d8bd80 !important;
  --color-header-background: var(--mh-bg) !important;
  --color-header-text: var(--mh-text) !important;
  --color-footer: var(--mh-bg-alt) !important;
  --color-footer-text: var(--mh-text-muted) !important;
  --color-footer-icons: var(--mh-text-muted) !important;
}

body{
  background-color: var(--mh-bg) !important;
  color: var(--mh-text) !important;
}
h1,h2,h3,h4{ color: var(--mh-text) !important; font-weight: 800 !important; letter-spacing: -.01em; }

/* -------------------------------------------------------------------------
   3) الهيدر (athar-store-header / athar-main-nav-container)
   ------------------------------------------------------------------------- */
.athar-store-header,
.athar-main-nav-container,
.athar-main-nav-container .inner{
  background-color: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--mh-border) !important;
}
.athar-main-nav-container a,
.athar-main-nav-container .header-btn,
.athar-main-nav-container i{
  color: var(--mh-text) !important;
}
.athar-main-nav-container a:hover{ color: var(--mh-gold) !important; }

/* -------------------------------------------------------------------------
   4) البانر الرئيسي (athar-main-banner) — يبقى بصورته الأصلية فوق تدرّج داكن خفيف
   ------------------------------------------------------------------------- */
.athar-main-banner .absolute.inset-0 > div[style*="linear-gradient"]{
  background-image: linear-gradient(to right, rgba(20,18,15,.85), rgba(20,18,15,.55), rgba(20,18,15,.15)) !important;
}
/* الشارة الصغيرة "رحلة عطاء مستمرة" */
.athar-main-banner .rounded-full.border-brand-accent\/50{
  background-color: rgba(255,255,255,.12) !important;
  border-color: var(--mh-gold-tint) !important;
  color: #ffffff !important;
}
.athar-main-banner h1{ color: #ffffff !important; }
.athar-main-banner p{ color: rgba(255,255,255,.85) !important; }
/* زر "ساهم الان" (الأساسي) */
.athar-main-banner a.inline-flex.hover\:opacity-90{
  background-color: var(--mh-gold) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  transition: var(--mh-transition) !important;
}
.athar-main-banner a.inline-flex.hover\:opacity-90:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -12px rgba(163,129,47,.55);
}
/* زر "تعرف على رسالتنا" (الشفاف) */
.athar-main-banner a.border-white\/30{
  border-radius: 999px !important;
  border-color: rgba(255,255,255,.5) !important;
}
.athar-main-banner a.border-white\/30:hover{
  border-color: #ffffff !important;
  background-color: rgba(255,255,255,.1) !important;
}

/* -------------------------------------------------------------------------
   5) شريط الإحصائيات (athar-statistics) — أرقام بارزة كما في mytts.sa
   ------------------------------------------------------------------------- */
.athar-statistics{
  background-color: var(--mh-bg-alt) !important;
  border-top: 1px solid var(--mh-border);
  border-bottom: 1px solid var(--mh-border);
}
.athar-statistics .divide-x > div{
  border-color: var(--mh-border) !important;
}
.athar-statistics .text-4xl.text-brand-primary{
  color: var(--mh-gold) !important;
  font-variant-numeric: tabular-nums;
}
.athar-statistics .text-gray-600{
  color: var(--mh-text-muted) !important;
}

/* -------------------------------------------------------------------------
   6) قسم الآية (s-block--slider-with-bg) فوق منتجات سلة
   ------------------------------------------------------------------------- */
.s-block--slider-with-bg{
  background-color: var(--mh-bg) !important;
}
.s-block--slider-with-bg .slider-bg{
  background-color: #14120f;
  box-shadow: inset 0 0 0 2000px rgba(20,18,15,.6);
  padding-block: 3rem;
}
.s-block--slider-with-bg h3{
  color: #ffffff !important;
  font-size: 1.4rem !important;
  margin-bottom: .75rem !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.s-block--slider-with-bg p{
  color: rgba(255,255,255,.92) !important;
  font-size: 1.05rem !important;
  line-height: 1.9 !important;
  max-width: 42rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
 
/* حاوية المنتجات — بطاقة بيضاء أنيقة تحت قسم الآية مباشرة، بدون أي تراكب أو
   هامش سالب. نُلغي كلاس Tailwind "-mt-62" الأصلي بالكامل ونضع مسافة طبيعية. */
.s-block--slider-with-bg > .container:last-child{
  margin-top: 2rem !important;
  background: #ffffff;
  border-radius: 24px;
  padding: 1.75rem 1.25rem !important;
  box-shadow: 0 20px 45px -25px rgba(42,36,26,.3);
  border: 1px solid var(--mh-border);
}
@media (max-width: 640px){
  .s-block--slider-with-bg .slider-bg{ padding-block: 2rem; }
  .s-block--slider-with-bg > .container:last-child{
    margin-top: 1.25rem !important;
    border-radius: 18px;
    padding: 1.25rem !important;
  }
}
/* -------------------------------------------------------------------------
   7) نبذة الجمعية + رقم الترخيص (athar-why-us)
   ------------------------------------------------------------------------- */
.athar-why-us{
  background-color: var(--mh-bg-alt) !important;
}
.athar-why-us h2{ color: var(--mh-text) !important; }
.athar-why-us p{ color: var(--mh-text-muted) !important; }
/* بطاقة رقم الترخيص */
.athar-why-us .inline-flex > div{
  background-color: var(--mh-mint-tint) !important;
  border-color: var(--mh-mint) !important;
  color: var(--mh-mint) !important;
}

/* -------------------------------------------------------------------------
   8) "كيف يتحول تبرعك إلى أثر" (athar-impact-path) — خطوات مرقّمة
   ------------------------------------------------------------------------- */
.athar-impact-path{
  background-color: #211c15 !important;
}
.athar-impact-path h2,
.athar-impact-path p{
  color: #ffffff !important;
}
.athar-impact-path .h-0\.5{
  background-color: rgba(255,255,255,.15) !important;
}
.athar-impact-path [style*="--bg-color"]{
  --bg-color: rgba(255,255,255,.08) !important;
  --text-color: var(--mh-gold-tint) !important;
  border-color: #211c15 !important;
}
.athar-impact-path .group:hover [style*="--bg-color"]{
  background-color: var(--mh-gold) !important;
  color: #ffffff !important;
}
.athar-impact-path h3{ color: #ffffff !important; }
.athar-impact-path .text-brand-muted{ color: rgba(255,255,255,.7) !important; }

/* -------------------------------------------------------------------------
   9) باقات التبرع الشهري (athar-subscription-plans) — أهم قسم في الصفحة
   ------------------------------------------------------------------------- */
.athar-subscription-plans{
  background-color: var(--mh-bg) !important;
}
.athar-subscription-plans h2{ color: var(--mh-text) !important; }
.athar-subscription-plans .max-w-2xl{ color: var(--mh-text-muted) !important; }

/* بطاقات الباقات الثلاث */
.athar-subscription-plans .backdrop-blur-lg{
  background-color: #ffffff !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  box-shadow: var(--mh-shadow);
  transition: var(--mh-transition) !important;
}
.athar-subscription-plans .backdrop-blur-lg:hover{
  border-color: var(--mh-gold) !important;
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -20px rgba(163,129,47,.3);
}
.athar-subscription-plans .backdrop-blur-lg h3,
.athar-subscription-plans .backdrop-blur-lg > div{
  color: var(--mh-text) !important;
}
.athar-subscription-plans .backdrop-blur-lg p.opacity-80{
  color: var(--mh-text-muted) !important;
}
.athar-subscription-plans .backdrop-blur-lg span.font-normal{
  color: var(--mh-text-faint) !important;
}
/* شارة "الأكثر بركة" */
.athar-subscription-plans .absolute.rounded-full{
  background-color: var(--mh-mint) !important;
  color: #ffffff !important;
}
/* أزرار الباقات */
.athar-subscription-plans a.block.w-full{
  background-color: var(--mh-gold) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  transition: var(--mh-transition) !important;
}
.athar-subscription-plans a.block.w-full:hover{
  background-color: var(--mh-gold-dark) !important;
}

/* -------------------------------------------------------------------------
   10) البانر الكامل الفاصل (s-block--full-banner)
   ------------------------------------------------------------------------- */
.s-block--full-banner .overlay{
  background-color: rgba(20,18,15,.55) !important;
}

/* -------------------------------------------------------------------------
   11) الأسئلة الشائعة (athar-faqs) — أكورديون أنيق بخلفية فاتحة
   ------------------------------------------------------------------------- */
.athar-faqs{
  background-color: var(--mh-bg-alt) !important;
}
.athar-faqs h2{ color: var(--mh-text) !important; }

.athar-faqs details{
  --bg-color: #ffffff !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: 14px !important;
  margin-bottom: .75rem;
  box-shadow: 0 8px 20px -15px rgba(42,36,26,.25);
}
.athar-faqs details summary{
  --bg-color: var(--mh-bg-alt) !important;
  color: var(--mh-text) !important;
}
.athar-faqs details > div{
  --border-color: var(--mh-border) !important;
  color: var(--mh-text-muted) !important;
}
.athar-faqs details svg{
  stroke: var(--mh-gold) !important;
}
.athar-faqs details[open]{
  border-color: var(--mh-gold) !important;
}

/* -------------------------------------------------------------------------
   12) موقع الجمعية على الخريطة (s-block--bundle-trust-map)
   ------------------------------------------------------------------------- */
.s-block--bundle-trust-map{
  background-color: var(--mh-bg) !important;
  padding: 2.5rem 0 !important;
  display: block;
}

/* -------------------------------------------------------------------------
   13) الفوتر (athar-store-footer)
   ------------------------------------------------------------------------- */
.athar-store-footer,
.athar-store-footer__inner{
  background-color: var(--mh-bg-alt) !important;
  border-top: 1px solid var(--mh-border) !important;
}
.athar-store-footer h3{
  color: var(--mh-text) !important;
  font-size: 1rem !important;
}
.athar-store-footer a,
.athar-store-footer p{
  color: var(--mh-text-muted) !important;
}
.athar-store-footer a:hover{
  color: var(--mh-gold) !important;
}
.athar-copyright{
  background-color: var(--mh-bg-alt) !important;
  border-top: 1px solid var(--mh-border) !important;
}
.athar-copyright .text-gray-400{
  color: var(--mh-text-faint) !important;
}

/* -------------------------------------------------------------------------
   14) استجابة الجوال
   ------------------------------------------------------------------------- */
@media (max-width: 768px){
  .athar-statistics .divide-x > div:not(:last-child){ border-inline-end: none !important; }
  .athar-why-us, .athar-impact-path, .athar-subscription-plans{ padding: 2.5rem 0 !important; }
}

/* -------------------------------------------------------------------------
   15) بطاقات المنتجات (salla-products-slider / صفحة المنتج) — متغيرات سلة الرسمية
   -------------------------------------------------------------------------
   معرّفة أصلاً في كود متجركم ضمن :root لكنها فارغة القيمة. هذه المتغيرات تخترق
   حدود الـ Shadow DOM الذي تُبنى به بطاقة المنتج (بعكس أي كلاس أو selector عادي).
   ------------------------------------------------------------------------- */
:root{
  --color-promotion-title-card:  var(--mh-mint) !important;
  --color-title-card:            var(--mh-text) !important;
  --color-subtitle-card:         var(--mh-text-muted) !important;
  --color-original-price-card:   var(--mh-text-faint) !important;
  --color-price-card:            var(--mh-gold) !important;
  --color-old-price-card:        var(--mh-text-faint) !important;
  --color-text-btn-card:         #ffffff !important;
  --color-btn-card:              var(--mh-gold) !important;
  --color-btn-hover-card:        var(--mh-gold-dark) !important;

  --color-title-single-product:        var(--mh-text) !important;
  --color-subtitle-single-product:     var(--mh-text-muted) !important;
  --color-description-single-product:  var(--mh-text-muted) !important;
  --color-price-original-product:      var(--mh-text-faint) !important;
  --color-price-single-product:        var(--mh-gold) !important;
  --color-disprice-single-product:     var(--mh-mint) !important;
  --color-icons-single-product:        var(--mh-gold) !important;
  --color-btn-single-product:          var(--mh-gold) !important;
  --color-btnHove-single-product:      var(--mh-gold-dark) !important;
  --color-relatedTitle-single-product: var(--mh-text) !important;
}

.s-product-card,
salla-product-card,
.card-product{
  background-color: #ffffff !important;
  border-color: var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  box-shadow: var(--mh-shadow);
}