/* ============================================================
   بذل — CSS مخصص لتصميم واجهة المتجر (سلة)
   مبني على هوية "بذل" البصرية: الطين والرمل
   الألوان: تراكوتا A85B3E# · ذهبي رملي C99A5C# · بني غامق 3B2A22#
             أبيض عظمي FAF7F3#
   الخطوط: Aref Ruqaa للشعار والعناوين الرئيسية فقط
             Cairo للعناوين الفرعية، الأزرار، والنصوص العامة
   ملاحظة: تم بناء هذا الملف بعد فحص كود متجركم الفعلي (ثيم رائد)
   للتأكد من مطابقة الأصناف (classes) الحقيقية المستخدمة في المتجر.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Aref+Ruqaa:wght@400;700&display=swap');

/* ------------------------------------------------------------
   01 — متغيرات الهوية + استبدال متغيرات ثيم سلة
   ------------------------------------------------------------ */
:root{
  /* ألوان الهوية */
  --brand-terracotta: #A85B3E;
  --brand-terracotta-dark: #8B4930;
  --brand-terracotta-light: #F3E2D8;
  --brand-gold: #C99A5C;
  --brand-gold-dark: #B07F3E;
  --brand-dark: #3B2A22;
  --brand-cream: #FAF7F3;

  /* خطوط الهوية */
  --brand-font-body: 'Cairo', 'PingARLT', -apple-system, sans-serif;
  --brand-font-display: 'Aref Ruqaa', 'Cairo', serif;

  /* استبدال متغيرات سلة الأساسية — هذا وحده يعيد تلوين كل
     الأزرار، الشارات، خانات التقييم وغيرها في المتجر بالكامل */
  --color-primary: var(--brand-terracotta);
  --color-primary-dark: var(--brand-terracotta-dark);
  --color-primary-light: var(--brand-terracotta-light);
  --color-primary-reverse: var(--brand-cream);
  --font-main: var(--brand-font-body);
  --s-radius: .9rem;
}

/* ------------------------------------------------------------
   02 — الأساسيات والخطوط
   ------------------------------------------------------------ */
body{
  font-family: var(--brand-font-body) !important;
  background-color: var(--brand-cream) !important;
  color: var(--brand-dark) !important;
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--brand-font-body);
  color: var(--brand-dark);
  font-weight: 700;
}

/* العنوان الرئيسي فقط (اسم المتجر) بخط Aref Ruqaa، حسب دليل الهوية
   الذي ينص أن هذا الخط "للشعار والعناوين الرئيسية فقط" ولا يُستخدم
   في عناوين فرعية صغيرة مثل عناوين أعمدة الفوتر أو عناوين الأقسام */
h1{
  font-family: var(--brand-font-display) !important;
  font-weight: 700;
}

/* اسم المتجر في أعلى الفوتر فقط بخط Aref Ruqaa كعنوان رئيسي مكرر للهوية،
   وباقي عناوين الفوتر (روابط مهمة، تواصل معنا...) تبقى بخط Cairo Bold
   الأوضح في الأحجام الصغيرة */
.store-footer a.flex.items-center.m-0 h3{
  font-family: var(--brand-font-display) !important;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--brand-cream) !important;
  -webkit-text-fill-color: var(--brand-cream) !important;
  opacity: 1 !important;
}

a{ color: var(--brand-dark); }
a:hover{ color: var(--brand-terracotta); }

/* شريط التمرير */
::-webkit-scrollbar-thumb{ background-color: var(--brand-terracotta) !important; }

/* ------------------------------------------------------------
   03 — الهيدر والتنقل
   ------------------------------------------------------------ */
.top-navbar{
  background-color: var(--brand-cream) !important;
  border-bottom: 1px solid var(--brand-terracotta-light);
  color: var(--brand-dark) !important;
}

#mainnav.main-nav-container{
  background-color: var(--brand-cream) !important;
  border-bottom: 1px solid var(--brand-terracotta-light);
}

.navbar-brand{
  color: var(--brand-dark);
}

/* روابط القائمة الرئيسية */
custom-main-menu a,
.s-menu-topnav-list a,
.s-menu-item a{
  font-family: var(--brand-font-body);
  font-weight: 600;
  color: var(--brand-dark) !important;
  transition: color .2s ease;
}
custom-main-menu a:hover,
.s-menu-topnav-list a:hover,
.s-menu-item a:hover{
  color: var(--brand-terracotta) !important;
}

/* إخفاء البريد الإلكتروني من أعلى الهيدر — تم فحص كود المتجر الفعلي ووجد
   أن هذا العنصر (salla-contacts.s-contacts-header) لا يحتوي على أي شيء
   سوى رابط البريد نفسه، فإخفاؤه بالكامل آمن ولا يترك فراغًا غريبًا.
   البريد يبقى ظاهرًا طبيعيًا في الفوتر (عبر .s-contacts-item في قسم 07
   أدناه) لأنه عنصر salla-contacts منفصل تمامًا هناك. */
salla-contacts.s-contacts-header{
  display: none !important;
}

/* إخفاء شريط روابط الصفحات (السجل التجاري/التوثيق/الترخيص) من أعلى الواجهة
   بجانب مربع البحث — هذي الروابط مقصودة تظهر فقط في "روابط مهمة" بالفوتر،
   وليس مكررة في الهيدر. لا يؤثر هذا على القائمة الرئيسية للتنقل ولا على
   قائمة الفوتر (.s-menu-footer-list) لأنهما بأصناف مختلفة تمامًا. */
.s-menu-topnav-list{
  display: none !important;
}

.sicon-menu.text-primary,
i[class*="sicon-"]{
  color: var(--brand-dark);
}

/* أيقونات الهيدر (سلة، حساب) */
.s-user-menu-login-btn,
#s-cart-icon .s-cart-summary-icon,
.header-btn__icon{
  color: var(--brand-dark) !important;
  fill: var(--brand-dark) !important;
}
.s-cart-summary-wrapper:hover .s-cart-summary-icon,
.s-cart-summary-wrapper:hover .header-btn__icon{
  color: var(--brand-terracotta) !important;
}

/* شارة عدد المنتجات في السلة */
.s-cart-summary-count{
  background-color: var(--brand-terracotta) !important;
  color: var(--brand-cream) !important;
}

/* مربع البحث */
.s-search-input-wrapper{
  background-color: #fff;
  border: 1px solid var(--brand-terracotta-light);
  border-radius: 999px !important;
}
.s-search-input{
  font-family: var(--brand-font-body);
  color: var(--brand-dark);
}
.s-search-icon-wrap,
.s-search-icon{
  color: var(--brand-terracotta) !important;
  fill: var(--brand-terracotta) !important;
}

/* ------------------------------------------------------------
   04 — الأزرار (تنطبق تلقائيًا على كل أزرار سلة بفضل المتغيرات،
   وهذه تأكيدات إضافية لضمان التطابق الكامل مع الهوية)
   ------------------------------------------------------------ */
.s-button-primary{
  background-color: var(--brand-terracotta) !important;
  border-color: var(--brand-terracotta) !important;
  color: var(--brand-cream) !important;
  font-family: var(--brand-font-body) !important;
  font-weight: 700;
}
.s-button-primary:hover{
  background-color: var(--brand-terracotta-dark) !important;
  border-color: var(--brand-terracotta-dark) !important;
}

.s-button-primary-outline,
.s-button-primary-link{
  color: var(--brand-terracotta) !important;
  fill: var(--brand-terracotta) !important;
  border-color: var(--brand-terracotta) !important;
  font-family: var(--brand-font-body) !important;
  font-weight: 700;
}
.s-button-primary-outline:hover{
  background-color: var(--brand-terracotta) !important;
  color: var(--brand-cream) !important;
  fill: var(--brand-cream) !important;
}

.s-button-text{
  font-family: var(--brand-font-body);
  font-weight: 700;
}

/* زر المفضلة (القلب) على كرت المنتج */
.s-product-card-wishlist-btn{
  border-color: var(--brand-terracotta-light) !important;
}
.s-product-card-wishlist-btn .sicon-heart{
  color: var(--brand-terracotta);
}
.s-product-card-wishlist-btn:hover{
  border-color: var(--brand-terracotta) !important;
  background-color: var(--brand-terracotta-light) !important;
}
.s-product-card-wishlist-btn.added .sicon-heart,
.s-product-card-wishlist-btn[class*="favorited"]:not(.un-favorited) .sicon-heart{
  color: var(--brand-terracotta);
}

/* ------------------------------------------------------------
   05 — بطاقات المنتجات
   ------------------------------------------------------------ */
.s-product-card-entry{
  background-color: #fff;
  border: 1px solid var(--brand-terracotta-light);
  border-radius: var(--s-radius);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.s-product-card-entry:hover{
  border-color: var(--brand-terracotta);
  box-shadow: 0 10px 24px rgba(59, 42, 34, .12);
  transform: translateY(-2px);
}

.s-product-card-content-title,
.s-product-card-content-title a{
  font-family: var(--brand-font-body);
  font-weight: 600;
  color: var(--brand-dark) !important;
}
.s-product-card-content-title a:hover{
  color: var(--brand-terracotta) !important;
}

.s-product-card-price{
  font-family: var(--brand-font-body);
  font-weight: 800;
  color: var(--brand-terracotta) !important;
}
.s-product-card-price .sicon-sar{
  color: var(--brand-terracotta);
}

/* السعر قبل الخصم (إن وجد) */
.s-product-card-price-sale,
.s-product-card-price-old{
  color: var(--brand-gold-dark) !important;
  opacity: .75;
}

/* تقييم النجوم */
.s-rating-stars-selected{
  fill: var(--brand-gold) !important;
}

/* ------------------------------------------------------------
   06 — قسم البانر الرئيسي (السلايدر)
   ملاحظة: نص وزر البانر الحالي جزء من الصورة نفسها، لذلك تنسيقه
   يتم من داخل تصميم الصورة لا عبر CSS. هذا التنسيق يجهّز أي
   عنوان/نص/زر HTML حقيقي تضيفونه مستقبلاً لأي بانر آخر.

   تصحيح: صورة الطفل كانت تُقص من الأعلى والأسفل على شاشات اللابتوب
   الواسعة (bg-cover) مما يقطع عنوان "متجر بذل". تم ضبطها لتظهر
   كاملة دائمًا على الجوال واللابتوب (bg-contain) مع خلفية بنية
   داكنة تملأ أي هامش جانبي بما يتناسق مع ألوان الصورة نفسها. */
#main-slider-0 .swiper-slide{
  background-color: var(--brand-dark) !important;
}
#main-slider-0 .swiper-slide > div:first-child{
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.home-slider__content h2{
  font-family: var(--brand-font-display);
  color: var(--brand-cream);
}
.home-slider__content .description{
  font-family: var(--brand-font-body);
  color: var(--brand-gold);
}

/* ------------------------------------------------------------
   07 — الفوتر
   ------------------------------------------------------------ */
/* تكرار الصنف .store-footer يرفع خصوصية القاعدة عمدًا حتى تتغلب
   على أي خلفية افتراضية للثيم ولا تبقى الخلفية فاتحة خلف نص فاتح */
footer.store-footer.store-footer.store-footer,
footer.store-footer.store-footer.store-footer .store-footer__inner{
  background-color: var(--brand-dark) !important;
  color: var(--brand-cream) !important;
}
footer.store-footer.store-footer.store-footer h3,
footer.store-footer.store-footer.store-footer h3 *{
  color: var(--brand-terracotta-dark) !important;
  -webkit-text-fill-color: var(--brand-terracotta-dark) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  background: none !important;
}
footer.store-footer .max-w-sm{
  color: rgba(250, 247, 243, .75);
}

footer.store-footer a,
footer.store-footer .s-menu-footer-list a,
footer.store-footer .s-contacts-item{
  color: rgba(250, 247, 243, .85) !important;
  -webkit-text-fill-color: rgba(250, 247, 243, .85) !important;
  opacity: 1 !important;
  font-family: var(--brand-font-body);
}
footer.store-footer a:hover,
footer.store-footer .s-menu-footer-list a:hover,
footer.store-footer .s-contacts-item:hover{
  color: var(--brand-gold) !important;
}

footer.store-footer .s-contacts-icon,
footer.store-footer .s-contacts-title{
  color: var(--brand-cream) !important;
}

/* أيقونات التواصل الاجتماعي كدوائر تراكوتا */
footer .s-social-link a{
  background-color: var(--brand-terracotta);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  transition: background-color .2s ease;
}
footer .s-social-link a:hover{
  background-color: var(--brand-gold);
}
footer .s-social-icon{
  color: var(--brand-cream) !important;
  fill: var(--brand-cream) !important;
  width: 18px;
  height: 18px;
}

/* السجل التجاري وشارات الثقة */
footer .s-trust-badges-label{
  color: rgba(250, 247, 243, .7) !important;
}
footer .s-trust-badges-number{
  color: var(--brand-cream) !important;
}

/* ------------------------------------------------------------
   08 — التركيز والوصولية
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
.s-button-element:focus-visible{
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   09 — فوتر بأعمدة منظمة (بنفس روح المتجر المرجعي)
   ملاحظة مهمة: CSS يستطيع فقط "تنسيق" العناصر الموجودة فعليًا في
   متجركم، ولا يستطيع اختراع محتوى غير موجود. لتظهر عناصر مثل:
   شارات توثيق إضافية، روابط "سياسة الاسترجاع/الخصوصية"، أو قسم
   "حمّل التطبيق" تمامًا كالمتجر المرجعي، يجب إضافتها أولاً من
   لوحة تحكم سلة:
   - شارات توثيق إضافية ← الإعدادات > الثقة والأمان
   - روابط إضافية في "روابط مهمة" ← التنقل > قائمة الفوتر
   - قسم تحميل التطبيق ← يظهر تلقائيًا فقط إذا كان للمتجر تطبيق
     جوال منشور عبر سلة
   بمجرد إضافتها من لوحة التحكم، سيقوم هذا التنسيق بعرضها بشكل
   منسّق تلقائيًا ضمن نفس الأعمدة.
   ------------------------------------------------------------ */

/* حواف علوية دائرية للفوتر لانسيابية أفضل مع باقي الصفحة */
footer.store-footer{
  border-radius: 1.75rem 1.75rem 0 0;
  padding-top: .5rem;
}

/* إخفاء عمود تحميل التطبيق تلقائيًا طالما لا يوجد تطبيق منشور،
   حتى لا يترك فراغًا فارغًا في التصميم */
salla-apps-icons:empty{
  display: none !important;
}

/* توزيع الأعمدة المتبقية بشكل متساوٍ ومنظم */
@media (min-width: 1024px){
  .store-footer__inner .container.grid{
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2.5rem !important;
  }
  .store-footer__inner .container.grid > *{
    grid-column: span 1 !important;
    padding-inline-end: 0 !important;
  }
}

/* عنوان كل عمود بخط أوضح مع خط سفلي ذهبي قصير، مثل الأعمدة في
   المتجر المرجعي (التوثيق / طرق الدفع / تابعونا / روابط مهمة) */
footer.store-footer.store-footer.store-footer h3{
  font-size: 1.1rem;
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  display: inline-block;
  border-bottom: 3px solid var(--brand-gold) !important;
  color: var(--brand-terracotta-dark) !important;
  -webkit-text-fill-color: var(--brand-terracotta-dark) !important;
  opacity: 1 !important;
}

/* بطاقة السجل التجاري وشارات الثقة تصبح بطاقة واضحة الحدود */
footer .s-trust-badges-wrapper{
  display: flex;
  align-items: center;
  gap: .75rem;
  background-color: rgba(250, 247, 243, .06);
  border: 1px solid rgba(250, 247, 243, .18);
  border-radius: .9rem;
  padding: .75rem 1rem;
  margin-top: 1rem;
}

/* شريط أسفل الفوتر (الحقوق + طرق الدفع) كبطاقة منفصلة وواضحة */
footer.store-footer .md\:flex.items-center.justify-between.py-4{
  border-top: 1px solid rgba(250, 247, 243, .15);
  margin-top: 1.5rem;
  padding-top: 1.5rem !important;
  flex-direction: column;
  gap: 1rem;
}
footer .s-payments-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
}
footer .s-payments-list-item{
  background-color: var(--brand-cream);
  border-radius: .75rem;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .4rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}
footer .copyright-text,
footer .copyright-text p{
  color: rgba(250, 247, 243, .6) !important;
  text-align: center;
  width: 100%;
}
footer .copyright-text a{
  color: rgba(250, 247, 243, .85) !important;
}

/* ------------------------------------------------------------
   10 — شريط تنويه الحصرية (Announcement Bar)
   ملاحظة: هذا العنصر (salla-advertisement) موجود في أعلى الصفحة
   لكنه فارغ حاليًا بدون أي نص. فعّليه من: التسويق ← الإعلان
   الترويجي/شريط الإعلانات، واكتبي فيه نص التنويه، وسيظهر تلقائيًا
   بهذا التنسيق فوق الهيدر مباشرة.
   ------------------------------------------------------------ */
salla-advertisement{
  display: block;
  width: 100%;
}
salla-advertisement,
salla-advertisement *{
  background-color: var(--brand-dark) !important;
  color: var(--brand-cream) !important;
}
salla-advertisement{
  text-align: center;
  font-family: var(--brand-font-body);
  font-weight: 600;
  font-size: .85rem;
  padding: .55rem 1rem;
  line-height: 1.6;
}
salla-advertisement a{
  color: var(--brand-gold) !important;
  text-decoration: underline;
}

/* ------------------------------------------------------------
   11 — تجهيز مسبق لأي حقول جديدة تُضاف لاحقًا (الإهداء، رقم
   واتساب المُهدى له، أو أي حقل مخصص آخر تضيفينه من "خيارات
   المنتج" في لوحة سلة)
   ملاحظة: سلة تعطي كل نوع حقل صنفه (class) الخاص به ولا يظهر إلا
   بعد إضافة الحقل فعليًا، فما قدرت أستهدفه بصنف دقيق مسبقًا. هذا
   التنسيق عام يغطي أي مربع نص/عنوان يضاف داخل صفحة المنتج تلقائيًا
   بنفس هوية المتجر، ولن يحتاج تعديل عند إضافة الحقول — لكن أرسليلي
   لقطة شاشة بعد الإضافة لو احتجينا تخصيصًا أدق حسب الصنف الحقيقي. */
main label{
  display: block;
  font-family: var(--brand-font-body);
  font-weight: 700;
  color: var(--brand-dark);
  font-size: .9rem;
  margin-bottom: .4rem;
}
main input[type="text"],
main input[type="tel"],
main input[type="number"],
main textarea{
  font-family: var(--brand-font-body);
  color: var(--brand-dark);
  background-color: #fff;
  border: 1px solid var(--brand-terracotta-light);
  border-radius: var(--s-radius);
  padding: .65rem .9rem;
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
main input[type="text"]:focus,
main input[type="tel"]:focus,
main input[type="number"]:focus,
main textarea:focus{
  outline: none;
  border-color: var(--brand-terracotta);
  box-shadow: 0 0 0 3px var(--brand-terracotta-light);
}
main input::placeholder,
main textarea::placeholder{
  color: rgba(59, 42, 34, .45);
}