/* Add custom CSS styles below */ 
/* ==========================================================================
   ترف — CSS FINAL
   القالب: رائد (Raed) — النسخة النشطة «تنسيق رائد رقم (2)»
   يحل محل كل CSS المخصص الحالي بالكامل. لا تُبقِ أي جزء من القديم.
   الأقسام: 1 المتغيرات · 2 الأساس · 3 شاشة التحميل · 4 الهيدر · 5 البنرات
            6 بطاقات المنتجات والأزرار · 7 الأسئلة الشائعة · 8 صفحة المنتج
            9 الفوتر · 10 تقليل الحركة
   ========================================================================== */


/* 1) المتغيرات ------------------------------------------------------------ */
:root {
  --taraf-bg: #FBF7F1;
  --taraf-section: #EFE3D3;
  --taraf-border: #E4D6C5;
  --taraf-primary: #8F6F60;
  --taraf-dark: #3B2620;
  --taraf-secondary: #6B4538;
  --taraf-alert-bg: #F7E9E3;
  --taraf-logo: url("https://cdn.files.salla.network/homepage/1148454054/0f7ade0c-4478-42a7-89d9-0236d1603f1b-original.webp");
}


/* 2) الأساس --------------------------------------------------------------- */
/* الـ !important الوحيدة في الملف: القالب يطبّق خلفية الجسم من أكثر من مكان */
body {
  background-color: var(--taraf-bg) !important;
}


/* 3) شاشة التحميل (يُنشئها JS مرة واحدة لكل جلسة) ---------------------------- */
.taraf-loader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background-color: var(--taraf-bg);
  font-family: inherit;
  text-align: center;
  opacity: 1;
  transition: opacity .3s ease;
}

.taraf-loader.is-hiding {
  opacity: 0;
}

.taraf-loader__logo {
  width: 150px;
  max-width: 60vw;
  height: auto;
  mix-blend-mode: multiply;
  animation: taraf-loader-in .9s ease-out both;
}

.taraf-loader__text {
  margin: 0;
  direction: rtl;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--taraf-secondary);
}

@keyframes taraf-loader-in {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: none; }
}


/* 4) الهيدر --------------------------------------------------------------- */
#mainnav {
  background-color: var(--taraf-bg);
  background-image: none;
  border-bottom: 1px solid var(--taraf-border);
}

#mainnav .main-menu li.root-level > a,
#mainnav .s-cart-summary-total,
#mainnav .header-btn__icon,
#mainnav [class*="sicon-"],
#mainnav [class*="sicon-"]::before {
  color: var(--taraf-dark);
}

#mainnav .header-btn__icon {
  border-color: var(--taraf-primary);
}

#mainnav .s-search-input {
  background-color: #fff;
  border: 1px solid var(--taraf-primary);
}

/* شعار الهيدر: mix-blend-mode يخفي المربع الأبيض حول الشعار */
.navbar-brand img {
  max-height: 3rem;
  width: auto;
  max-width: 100px;
  mix-blend-mode: multiply;
  animation: taraf-logo-breathe 7s ease-in-out infinite alternate;
}

@keyframes taraf-logo-breathe {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}


/* 5) البنرات -------------------------------------------------------------- */
/* سلايدر الصور (البنر الرئيسي) */
.s-block--photos-slider {
  margin-top: 0;
}

/* إخفاء أسهم/عنوان السلايدر في البنر فقط (كانت القاعدة عامة على كل سلايدرات سلة) */
.s-block--photos-slider .s-slider-block__title-nav {
  display: none;
}

.s-block--photos-slider .swiper {
  padding-inline: 0;
}

salla-slider.photos-slider .swiper-slide {
  width: 100%;
  margin: 0;
  padding: 0;
}

.s-block--photos-slider .rounded-md,
salla-slider.photos-slider .swiper-slide {
  border-radius: 0;
}

/* البنر الثابت: عرض كامل (جوال + ديسكتوب) */
section.s-block.s-block--fixed-banner {
  margin-top: 0;
  padding-top: 0;
}

section.s-block.s-block--fixed-banner .container {
  max-width: none;
  padding-inline: 0;
}

section.s-block.s-block--fixed-banner img {
  width: 100%;
  border-radius: 0;
}


/* 6) بطاقات المنتجات والأزرار ---------------------------------------------- */
.s-product-card-entry {
  background-color: #fff;
  border: 1px solid var(--taraf-border);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(59, 38, 32, .08);
}

.s-product-card-content-title,
.s-product-card-content-title a,
.s-product-card-price,
.s-product-card-sale-price h4,
.s-product-card-entry .sicon-sar::before {
  color: var(--taraf-dark);
}

.s-product-card-entry .sicon-shopping-bag::before {
  color: var(--taraf-primary);
}

salla-products-slider .swiper {
  padding-block: 1rem;
}

/* زر «عرض المزيد» في الرئيسية (بديل قاعدة .undefined القديمة).
   يستثني بطاقات المنتجات. يحتاج اختبار DOM. */
body.index .s-block .s-button-element.s-button-outline.s-button-wide.s-button-primary-outline:not(.s-product-card-entry *) {
  background-color: var(--taraf-primary);
  border: 0;
  border-radius: 50px;
  color: #fff;
}


/* 7) الأسئلة الشائعة (يبنيها JS بالكلاسات التالية) ---------------------------- */
.taraf-faq {
  width: 90%;
  max-width: 800px;
  margin: 1rem auto;
  padding: 1rem 1.25rem;
  background-color: var(--taraf-section);
  border: 1px solid var(--taraf-border);
  border-radius: 10px;
  font-family: inherit;
}

.taraf-faq__title {
  margin: 0 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--taraf-border);
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--taraf-dark);
}

.taraf-faq__item {
  margin: .4rem 0;
  background-color: var(--taraf-bg);
  border: 1px solid var(--taraf-border);
  border-radius: 8px;
  overflow: hidden;
}

.taraf-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  list-style: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--taraf-dark);
}

.taraf-faq__q::-webkit-details-marker {
  display: none;
}

.taraf-faq__q::after {
  content: "+";
  flex: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--taraf-primary);
}

.taraf-faq__item[open] > .taraf-faq__q::after {
  content: "\2212";
}

.taraf-faq__q:focus-visible {
  outline: 2px solid var(--taraf-primary);
  outline-offset: -2px;
}

.taraf-faq__a {
  margin: 0;
  padding: 0 14px 14px;
  font-size: .95rem;
  line-height: 1.8;
  color: var(--taraf-secondary);
}

@media (min-width: 768px) {
  .taraf-faq {
    padding: 1.25rem 2rem;
  }
}


/* 8) صفحة المنتج ---------------------------------------------------------- */

/* رسالة اختيار الخيارات (يضيفها JS مرة واحدة قبل salla-product-options) */
.taraf-product-options-alert {
  margin: 0 0 10px;
  padding: 8px 12px;
  background-color: var(--taraf-alert-bg);
  border: 1px solid var(--taraf-primary);
  border-radius: 12px;
  text-align: center;
  font-weight: 700;
  color: var(--taraf-secondary);
}

/* ==== PENDING DOM VERIFICATION — منطقة الشراء في صفحة المنتج ================
   الحالة: غير مكتمل. هذا القسم مطلوب في النسخة النهائية، وهو معطّل مؤقتًا
   فقط لأن بنية صفحة المنتج الحية لم تُؤكَّد بعد. لا تُعتبر النسخة نهائية
   قبل تفعيله واجتياز اختبارات القبول التالية على الجوال:

   1) اختفاء الفراغ الكبير بعد الخيارات والسعر (بلا margin سالب).
   2) ظهور الكمية وزر «إضافة للسلة» داخل محتوى المنتج بعد الخيارات والسعر.
   3) بقاء الشريط السفلي المثبت مساعدًا فقط.
   4) سلامة تغيّر السعر حسب الخيار، والمخزون، والشراء السريع / Apple Pay.
   5) مسافة طبيعية (24–32px) قبل «منتجات مشابهة».

   ما تأكدت منه من قالب رائد الرسمي (وليس من متجرك الحي):
   - داخل form.product-form بالترتيب: خيارات المنتج ← قسم السعر ←
     section.sticky-product-bar (الكمية ثم salla-add-product-button)،
     والشراء السريع داخل زر الإضافة نفسه عبر الخاصية quick-buy.
   - إعداد القالب sticky_add_to_cart عندك مفعّل:
     «تثبيت زر الإضافة والكمية أسفل شاشة الجوال».
   لم يُؤكَّد بعد: سبب الفراغ الفعلي، وكيف يثبّت القالب الشريط (CSS أم JS).

   التفعيل: بعد فحص DOM الحي احذف `not all` (يصبح @media all) وعدّل القواعد
   حسب سبب الفراغ الحقيقي. `@media not all` لا يطابق أي شاشة، فالقواعد
   بالداخل لا تعمل الآن، وهذا مقصود لتفادي كسر الشراء بتخمين. */
@media not all {

  /* أ) إبقاء قسم الكمية والإضافة داخل تدفق الصفحة تحت السعر */
  body.product-single .product-form .sticky-product-bar {
    position: static;
    box-shadow: none;
  }

  /* ب) مسافة طبيعية قبل «منتجات مشابهة» (24–32px) بعد معرفة سبب الفراغ */
  body.product-single .container:has(> salla-products-slider[source="related"]) {
    margin-top: 1.75rem;
  }

  /* ج) إخفاء حاويات الـhooks الفارغة إن كانت سبب الفراغ */
  body.product-single .s-blocks-wrapper:not(:has(*)) {
    display: none;
  }
}


/* 9) الفوتر --------------------------------------------------------------- */

/* خلفية الفوتر كاملة #EFE3D3: الحاوية، القسم الرئيسي، وشريط الحقوق السفلي.
   `footer.store-footer > div` يغطي أي قسم مباشر (بما فيه الحقوق) دون معرفة
   اسم كلاسه. إن كان لشريط الحقوق كلاس خلفية خاص بقوة أعلى فيلزم فحص DOM. */
footer.store-footer,
footer.store-footer > div,
footer.store-footer .store-footer__inner {
  background-color: var(--taraf-section);
}

footer.store-footer {
  border-top: 1px solid var(--taraf-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

footer.store-footer .store-footer__inner {
  color: var(--taraf-dark);
  padding-block: 1.25rem 1.5rem;
}

footer.store-footer .store-footer__inner :is(h1, h2, h3, h4, h5, h6, p, li, a, span) {
  color: var(--taraf-dark);
}

footer.store-footer .copyright-text p {
  color: var(--taraf-dark);
}

/* شعار الفوتر — يعتمد على بنية القالب الحالية (قاعدة هشة، يحتاج اختبار).
   الأفضل لاحقًا وضع الشعار من إعدادات الفوتر بدل CSS. */
.store-footer a h3:nth-child(1)::before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  margin: auto auto 20px;
  background-color: transparent;
  background-image: var(--taraf-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  mix-blend-mode: multiply;
  animation: taraf-footer-logo 2s ease-in-out infinite;
}

@keyframes taraf-footer-logo {
  0%   { transform: scale(1.4); }
  50%  { transform: scale(1.6); }
  100% { transform: scale(1.4); }
}

/* ==== PENDING DOM VERIFICATION — تواصل معنا في الفوتر =======================
   الحالة: غير نهائي. النتيجة المطلوبة: واتساب + تيك توك + سناب شات في صف
   واحد، ثلاث خانات متساوية، دائرة #8F6F60 وأيقونة فاتحة والاسم تحتها.
   الاختيار كله بقيم href وأسماء كلاسات سلة، لا بترتيب العناصر.

   من توثيق قالب رائد (لا من متجرك الحي):
   - <salla-contacts> في عمود «معلومات التواصل».
   - <salla-social> يظهر في عمود معلومات المتجر على الديسكتوب، وفي عمود
     التواصل على الجوال فقط.
   ⇒ على الجوال قد يجتمعان في حاوية واحدة فيمكن ترتيبهما في صف واحد بالـCSS.
   ⇒ على الديسكتوب هما في عمودين مختلفين، ولا يمكن جمعهما في صف واحد بـCSS
      وحده دون تعديل البنية.
   تيك توك وسناب أُضيفا من إعدادات سلة الأصلية (ليس بـJS). ما زال يلزم فحص
   HTML الفوتر الحي على الجوال والديسكتوب قبل اعتماد هذا القسم.

   الحالة الآن: معطّل مؤقتًا. كل قواعد التواصل أدناه (الترتيب، الإخفاء،
   الدوائر، الأسماء، :has() و display: contents) داخل `@media not all`
   فلا تعمل. ألوان الفوتر العامة وخلفيته وشعاره تبقى فعّالة. */

@media not all {

  /* كل قائمة صف مرن. على الديسكتوب تبقى في أعمدة الفوتر الأصلية بدون نقل */
  .store-footer .s-contacts-list,
  .store-footer .s-social-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
  }

  /* الجوال فقط (قبل نقطة lg في رائد = 1024px): واتساب + تيك توك + سناب في صف واحد.
     LCA = أقرب حاوية تضم salla-contacts و salla-social معًا (عمود التواصل في رائد).
     لا نقل عناصر ولا JS: نحوّل الحاوية إلى صف مرن ونجعل مكوّنات سلة والقوائم
     والأغلفة المباشرة display: contents فتصير خانات التواصل أبناء الصف مباشرة.
     إن لم توجد حاوية مشتركة فلا تتطابق هذه القواعد ويبقى كل مكوّن في صفه. */
  @media (max-width: 1023px) {
    .store-footer .s-contacts-list,
    .store-footer .s-social-list {
      justify-content: center;
    }

    .store-footer :has(salla-contacts):has(salla-social):not(:has(> :has(salla-contacts):has(salla-social))) {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      gap: 20px;
    }

    .store-footer :has(salla-contacts):has(salla-social):not(:has(> :has(salla-contacts):has(salla-social))) > :is(salla-contacts, salla-social, :has(> salla-contacts), :has(> salla-social)),
    .store-footer :has(salla-contacts):has(salla-social):not(:has(> :has(salla-contacts):has(salla-social))) :is(.s-contacts-list, .s-social-list) {
      display: contents;
    }

    .store-footer :has(salla-contacts):has(salla-social):not(:has(> :has(salla-contacts):has(salla-social))) > :not(:has(salla-contacts)):not(:has(salla-social)) {
      flex: 0 0 100%;
    }
  }

  /* ثلاث خانات متساوية */
  .store-footer :is(.s-contacts-item, .s-social-list a) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 96px;
    text-align: center;
    text-decoration: none;
  }

  /* إخفاء البريد والجوال العادي فقط. عنصر واتساب محمي بثلاثة شروط:
     href فيه wa.me أو whatsapp، أو فيه أيقونة/كلاس whatsapp، فلا يُخفى
     حتى لو كان رابطه من نوع tel: */
  .store-footer .s-contacts-item:is([href^="mailto:"], [href^="tel:"]):not([href*="wa.me"], [href*="whatsapp"], :has([class*="whatsapp"])),
  .store-footer .s-contacts-list > :has(> .s-contacts-item:is([href^="mailto:"], [href^="tel:"]):not([href*="wa.me"], [href*="whatsapp"], :has([class*="whatsapp"]))) {
    display: none;
  }

  /* الدائرة والأيقونة (على أعمق عنصر مطابق فقط لتفادي دوائر متداخلة) */
  footer.store-footer .store-footer__inner :is(.s-contacts-icon, [class*="social-icon"]):not(:has(.s-contacts-icon, [class*="social-icon"])) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--taraf-primary);
    box-shadow: none;
    color: var(--taraf-bg);
  }

  footer.store-footer .store-footer__inner :is(.s-contacts-icon, [class*="social-icon"]) * {
    color: var(--taraf-bg);
    fill: var(--taraf-bg);
  }

  /* الاسم تحت الدائرة */
  .store-footer .s-contacts-item::after,
  .store-footer .s-social-list a::after {
    font-size: .9rem;
    line-height: 1.4;
    color: var(--taraf-dark);
  }

  .store-footer .s-contacts-item:is([href*="wa.me"], [href*="whatsapp"], :has([class*="whatsapp"])) > :not([class*="contacts-icon"]) {
    display: none;
  }

  .store-footer .s-contacts-item:is([href*="wa.me"], [href*="whatsapp"], :has([class*="whatsapp"]))::after {
    content: "واتساب";
  }

  .store-footer .s-social-list a[href*="tiktok.com"]::after {
    content: "تيك توك";
  }

  .store-footer .s-social-list a[href*="snapchat.com"]::after {
    content: "سناب شات";
  }
}

/* ==== نهاية قسم PENDING: تواصل معنا ==================================== */

@media (max-width: 768px) {
  footer.store-footer {
    text-align: center;
  }
}


/* 10) تقليل الحركة --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .taraf-loader,
  .taraf-loader__logo,
  .navbar-brand img,
  .store-footer a h3:nth-child(1)::before {
    animation: none;
    transition: none;
  }
}