/* =========================================================================
   تخصيص ثيم رائد (Salla Theme Raed) — تصميم كُحلي/ذهبي مستوحى من متجر ميسون
   الاستخدام: لوحة التحكم ← تصميم المتجر ← ثيم رائد ← تخصيص ← أكواد CSS مخصصة
   تم بناء الكود على كلاسات ثيم رائد الرسمية (github.com/SallaApp/theme-raed)
   ========================================================================= */

/* 1) الألوان الأساسية — غيّرها هنا فقط ليتغيّر كل شيء في الملف تلقائياً */
:root{
  --navy:        #0a1925;   /* اللون الكحلي الداكن (الهيدر العلوي + الأزرار نص) */
  --navy-dark:   #061019;
  --gold:        #dfc684;   /* اللون الذهبي (الأزرار + التفاصيل) */
  --gold-light:  #efe3c3;

  /* أهم سطر في الملف: زر "أضف إلى السلة" مبني بمكوّن ويب داخلي من سلة
     (salla-add-product-button) لا تصله كلاسات CSS العادية إطلاقاً، ويصله
     فقط تغيير متغيرات الألوان هذه لأنها تخترق حدود المكوّن الداخلي.
     هذا ما يجعل الزر ذهبي الخلفية كحلي النص كما في تصميم ميسون: */
  --color-primary: #dfc684;
  --color-primary-dark: #c9a94f;
  --color-primary-reverse: #0a1925;
}

/* =========================================================================
   2) الهيدر — الشريط العلوي الداكن + الشعار
   ========================================================================= */

/* الشريط العلوي (كود الخصم / روابط الصفحات) بخلفية كحلية ونص ذهبي */
.top-navbar{
  background-color: var(--navy) !important;
  color: var(--gold-light) !important;
}
.top-navbar a,
.top-navbar .topnav-link-item{
  color: var(--gold-light) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.top-navbar .s-search-input{
  background-color: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.top-navbar .btn--rounded-gray,
.top-navbar .btn--circle-gray{
  background-color: rgba(255,255,255,.08) !important;
}

/* الشريط الرئيسي (الشعار + القائمة + السلة) يبقى أبيض */
.main-nav-container{ background:#fff; }

/* -------------------------------------------------------------------------
   استبدال شعار الصورة بنص "اسم المتجر" (اختياري — كما في متجر ميسون)
   إن كنت تفضل إبقاء صورة الشعار كما هي، احذف/علّق هذه الفقرة بالكامل.
   غيّر النص "HAMSA NABD" إلى اسم متجرك كما تريد أن يظهر.
   ------------------------------------------------------------------------- */
.store-header .navbar-brand img,
.store-header .navbar-brand .sr-only{
  display:none !important;
}
.store-header .navbar-brand::before{
  content: "HAMSA NABD";              /* ← عدّل هذا النص لاسم متجرك */
  font-family: sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: .5px;
  line-height: 1;
  display:block;
}

/* أيقونة السلة والمستخدم بحجم متناسق */
.header-btn__icon{ border-color:#e9e9e9; }

/* =========================================================================
   3) الأزرار الأساسية (أضف إلى السلة + زر السلة السريعة على البطاقة)
   ========================================================================= */
.btn--primary,
.s-button-primary,
.s-button-solid.s-button-primary,
.s-button-outline.s-button-primary,
.product-card__enhanced-mini-cart button.s-button-element,
salla-add-product-button button,
salla-add-product-button .s-button-btn{
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--navy) !important;
  font-weight: 700 !important;
}
.btn--primary:hover,
.s-button-primary:hover,
salla-add-product-button button:hover{ opacity:.85; }

/* أيقونة السلة (شنطة التسوق) داخل الزر باللون الكحلي لتتماشى مع النص */
salla-add-product-button svg,
salla-add-product-button i{ color:var(--navy) !important; fill:var(--navy) !important; }

/* =========================================================================
   4) بطاقة المنتج — تنسيق مطابق لبطاقات متجر ميسون
   ========================================================================= */
.s-product-card-entry,
.product-entry,
salla-product-card{
  border-radius: 14px !important;
  border: 1.5px solid #e9e2cf !important;
  overflow: hidden;
  display: block;
}
.s-product-card-content-title a{
  color:#111827;
  font-weight:700;
}
.s-product-card-content-title a:hover{ color: var(--navy); }

/* النجوم ذهبية */
.s-product-card-rating span svg{ fill: var(--gold) !important; }

/* السعر (الحالي / سعر التخفيض) بلون كحلي غامق بدل الأحمر الافتراضي */
.s-product-card-sale-price h4,
.s-product-card-price,
.s-product-card-starting-price h4{
  color: var(--navy) !important;
  font-weight: 800 !important;
}

/* شارة العرض / الكمية المحدودة أعلى الصورة */
.s-product-card-promotion-title,
.s-product-card-quantity{
  background-color: var(--navy) !important;
}

/* توحيد ارتفاع كل البطاقات في نفس الصف — بغض النظر عن طول اسم المنتج
   أو وجود وصف فرعي أو عدم وجوده (هذا سبب اختلاف الارتفاع الذي ظهر لديك) */
.s-product-card-vertical,
.s-product-card-entry{
  height: 100% !important;
}
.s-product-card-content{
  display:flex !important;
  flex-direction: column !important;
  flex:1 1 auto !important;
}
/* إخفاء السطر الفرعي تحت اسم المنتج — هو السبب الرئيسي لتفاوت الأطوال،
   وإخفاؤه يعطي شكلاً أنظف مطابقاً لبطاقات ميسون */
.s-product-card-content-subtitle{ display:none !important; }

/* حجز مساحة ثابتة لاسم المنتج (سطرين دائماً) بحيث يبدأ السعر والزر
   من نفس المستوى في كل البطاقات */
.s-product-card-content-title{
  min-height: 44px;
  display:flex;
  align-items:flex-start;
}
/* يدفع السعر والزر دائماً لأسفل البطاقة مهما اختلف طول العنوان */
.s-product-card-content-footer{ margin-top:auto !important; }

/* تثبيت ارتفاع صورة المنتج — رفعتها قليلاً (4:5 بدل مربع) لتبدو البطاقة
   أطول وأكثر أناقة كبطاقات المتاجر الراقية.
   ملاحظة تقنية: ثيم رائد يفرض height:100% على الصورة افتراضياً، وهذا يمنع
   aspect-ratio من العمل، لذلك لازم إلغاء ذلك الارتفاع أولاً (flex:none +
   height:auto) قبل تطبيق النسبة، وإلا تبقى الصورة بنفس شكلها القديم: */
.s-product-card-vertical .s-product-card-image{
  flex: none !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
}
.s-product-card-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* تحسينات عامة على شكل البطاقة: مسافة داخلية أريح + ظل ناعم عند التمرير */
.s-product-card-content{ padding: 14px 16px 16px !important; }
.s-product-card-entry{
  transition: box-shadow .25s ease, transform .25s ease;
}
.s-product-card-entry:hover{
  box-shadow: 0 10px 24px rgba(10,25,37,.12) !important;
  transform: translateY(-2px);
}

/* التأكد أن كل خلايا الشبكة تتمدد لنفس ارتفاع أطول عنصر بالصف */
salla-products-list .grid,
salla-related-products .grid,
[class*="products-list"] .grid{
  align-items: stretch !important;
}
/* =========================================================================
   5) سلايدر الصفحة الرئيسية — تصميم جديد أقوى وأكثر جاذبية
   (الصور تبقى تُدار من نفس مكان السلايدر في لوحة التحكم كما هي، هذا الكود
   يعيد فقط تنسيق الشكل والحركة والألوان لتطابق هوية المتجر)
   ========================================================================= */
.s-block--hero-slider{ margin-top: 0 !important; }
.s-block--hero-slider .swiper-slide{
  height: 320px !important;
  overflow:hidden;
  position:relative;
}
@media (min-width:640px){
  .s-block--hero-slider .swiper-slide{ height: 420px !important; }
}
@media (min-width:1024px){
  .s-block--hero-slider .swiper-slide{ height: 520px !important; }
}

/* تدرج داكن أسفل الصورة يمنح النصوص وضوحاً ويعطي عمقاً أنيقاً للتصميم */
.s-block--hero-slider .swiper-slide::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,25,37,0) 35%, rgba(10,25,37,.65) 100%);
  pointer-events:none;
  z-index:1;
}

/* تكبير الصورة تدريجياً أثناء عرض الشريحة (حركة سينمائية هادئة وفخمة) */
.s-block--hero-slider .swiper-slide .swiper-lazy{
  transition: transform 6.5s ease-out;
  transform: scale(1);
}
.s-block--hero-slider .swiper-slide-active .swiper-lazy{
  transform: scale(1.09);
}

/* نقاط التنقل (bullets) بشكل ذهبي أنيق بدل الأبيض الافتراضي */
.s-block--hero-slider .swiper-pagination-bullet{
  width:8px; height:8px;
  background:#fff; opacity:.55;
  transition: all .3s ease;
}
.s-block--hero-slider .swiper-pagination-bullet-active{
  background: var(--gold) !important;
  opacity:1;
  width:26px;
  border-radius:5px;
}

/* أسهم التنقل يمين/يسار بخلفية كحلية شفافة تتحول ذهبية عند التمرير */
.s-block--hero-slider .s-slider--nav-arrow,
.s-block--hero-slider .swiper-button{
  background: rgba(10,25,37,.55) !important;
  color:#fff !important;
  border:none !important;
  width:44px; height:44px;
  border-radius:50%;
  transition: all .25s ease;
}
.s-block--hero-slider .s-slider--nav-arrow:hover,
.s-block--hero-slider .swiper-button:hover{
  background: var(--gold) !important;
  color: var(--navy) !important;
}
@media (max-width:640px){
  .s-block--hero-slider .s-slider--nav-arrow,
  .s-block--hero-slider .swiper-button{ display:none; }
}

/* تظليل إضافي كامل خلف النص (وليس فقط أسفل الصورة) لضمان وضوح القراءة
   على أي صورة يتم رفعها لاحقاً من لوحة التحكم */
.s-block--hero-slider .overlay-bg::after{
  background-color: rgba(10,25,37,.45) !important;
}

/* عنوان ووصف السلايدر بخط أوضح وأثقل، وظل خفيف يضمن القراءة فوق أي صورة */
.home-slider__content h2{
  font-weight: 800 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.home-slider__content .description{
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* أي زر داخل السلايدر (مثل "تسوق الآن") يتحول ذهبياً بدل الأزرق الافتراضي */
.home-slider__content a{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  background: var(--gold) !important;
  color: var(--navy) !important;
  border-color: var(--gold) !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  padding: 12px 28px !important;
}
.home-slider__content a:hover{ opacity:.9; }

/* =========================================================================
   6) عناوين أقسام الصفحة الرئيسية (مثل "ملابس الأندية الرياضية")
   ========================================================================= */
.s-block__title{
  flex-direction: column;
  text-align: center;
}
.s-block__title h2{
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  padding-bottom: 14px;
  position: relative;
  display:inline-block;
}
.s-block__title h2::after{
  content:"";
  position:absolute;
  bottom:0; left:50%;
  transform:translateX(-50%);
  width:56px; height:3px;
  background: var(--gold);
  border-radius:3px;
}

/* =========================================================================
   7) الفوتر — خلفية كحلية داكنة
   ========================================================================= */
.store-footer{ background-color: var(--navy) !important; }
.store-footer__inner{ background-color: var(--navy-dark) !important; }
.store-footer h3{ color: var(--gold) !important; }

/* النصوص كانت شبه غير مرئية على الخلفية الكحلية الجديدة — نجعلها بيضاء
   واضحة بنسب شفافية مختلفة حسب الأهمية (فرض اللون على كل شيء داخل
   الفوتر لضمان التطبيق حتى لو كان العنصر مكوّن ويب من سلة) */
.store-footer,
.store-footer p,
.store-footer span,
.store-footer li,
.store-footer a,
.store-footer .menu-item,
.store-footer salla-menu,
.store-footer salla-contacts{
  color: rgba(255,255,255,.85) !important;
}
.store-footer a:hover{ color: var(--gold) !important; opacity:1 !important; }
.store-footer .description,
.store-footer > .store-footer__inner p{ color: rgba(255,255,255,.65) !important; }

/* دوائر أيقونات التواصل الاجتماعي — حدود وخلفية واضحة على الكحلي */
.store-footer .social-link,
.s-social-link{
  border-color: rgba(255,255,255,.35) !important;
  background-color: rgba(255,255,255,.06) !important;
}
.store-footer .social-link:hover,
.s-social-link:hover{
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
}
.s-social-link a svg,
.store-footer .social-link svg{ fill:#ffffff !important; }
.store-footer .social-link:hover svg,
.s-social-link:hover svg{ fill:var(--navy) !important; }

.copyright-text,
.copyright-text p{ color: rgba(255,255,255,.55) !important; }

/* إخفاء عدد التقييمات في شارات الثقة أسفل الفوتر (كما في ميسون) */
.store-footer .s-trust-badges-content .s-trust-badges-number,
.store-footer salla-trust-badges .s-trust-badges-image{
  display:none;
}

/* =========================================================================
   8) ضبط عام + توافق كامل مع الجوال
   ========================================================================= */
*, *:before, *:after{ box-sizing:border-box; }

@media (max-width:640px){
  .store-header .navbar-brand::before{ font-size:22px; }
  .s-block__title h2{ font-size:18px; }
  .top-navbar{ font-size:12px; }
}