/* =========================================
   قسم الأسئلة الشائعة
   FAQ Section
========================================= */

/* الغلاف الخارجي */
.s-block--faqs.uminds-faq-section {
  width: 100% !important;
  margin: 28px 0 !important;
  padding: 0 !important;
  background: transparent !important;

  font-family:
    var(--uminds-real-site-font),
    sans-serif !important;

  box-sizing: border-box !important;
}

/* الحاوية الداخلية بنفس عرض بقية الأقسام */
.s-block--faqs.uminds-faq-section > .container {
  width: calc(100% - 24px) !important;
  max-width: 1460px !important;

  margin-right: auto !important;
  margin-left: auto !important;

  padding: 38px 34px 40px !important;

  background: #fcfaf7 !important;
  border: 1px solid #e8ded3 !important;
  border-radius: 18px !important;

  box-shadow:
    0 8px 20px rgb(74 55 40 / 4%) !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* =========================================
   عنوان القسم
========================================= */

.s-block--faqs.uminds-faq-section .s-block__title {
  width: 100% !important;

  margin: 0 0 28px !important;
  padding: 0 !important;

  text-align: center !important;
  box-sizing: border-box !important;
}

.s-block--faqs.uminds-faq-section
.s-block__title .flex {
  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
}

.s-block--faqs.uminds-faq-section
.s-block__title h2 {
  width: 100% !important;

  margin: 0 0 8px !important;
  padding: 0 !important;

  color: #4a3728 !important;

  font-family:
    var(--uminds-real-site-font),
    sans-serif !important;

  font-size: 30px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;

  text-align: center !important;
}

.s-block--faqs.uminds-faq-section
.s-block__title p {
  width: 100% !important;
  max-width: 700px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  color: #6e5a4c !important;

  font-family:
    var(--uminds-real-site-font),
    sans-serif !important;

  font-size: 15px !important;
  line-height: 1.8 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;

  text-align: center !important;
}

/* =========================================
   شبكة الأسئلة
========================================= */

.s-block--faqs.uminds-faq-section .faqs-list {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 12px 16px !important;
  align-items: start !important;

  box-sizing: border-box !important;
}

/* العنصر الخارجي لكل سؤال */
.s-block--faqs.uminds-faq-section
.faq-container {
  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}

/* =========================================
   بطاقة السؤال
========================================= */

.s-block--faqs.uminds-faq-section
.faqs-list__item {
  width: 100% !important;

  background: #ffffff !important;
  border: 1px solid #e8ded3 !important;
  border-radius: 10px !important;

  box-shadow: none !important;
  overflow: hidden !important;

  box-sizing: border-box !important;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease !important;
}

.s-block--faqs.uminds-faq-section
.faqs-list__item:hover {
  background: #ffffff !important;
  border-color: #bfe5e6 !important;

  box-shadow:
    0 5px 14px rgb(74 55 40 / 5%) !important;
}

/* =========================================
   صف السؤال
========================================= */

.s-block--faqs.uminds-faq-section
.faqs-list__item > label {
  position: relative !important;

  width: 100% !important;
  min-height: 58px !important;

  display: flex !important;
  align-items: center !important;

  margin: 0 !important;

  padding-top: 13px !important;
  padding-bottom: 13px !important;
  padding-right: 20px !important;
  padding-left: 58px !important;

  color: #4a3728 !important;

  font-family:
    var(--uminds-real-site-font),
    sans-serif !important;

  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;

  text-align: right !important;
  cursor: pointer !important;

  box-sizing: border-box !important;
}

/* =========================================
   دائرة علامة الجمع والطرح
========================================= */

.s-block--faqs.uminds-faq-section
.open-badge {
  position: absolute !important;

  top: 50% !important;
  left: 18px !important;
  right: auto !important;

  transform: translateY(-50%) !important;

  width: 30px !important;
  height: 30px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #ffffff !important;
  color: #00b3bb !important;

  border: 1px solid #cce9ea !important;
  border-radius: 50% !important;

  opacity: 1 !important;
  visibility: visible !important;

  box-shadow: none !important;

  font-family: "sallaicons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;

  box-sizing: border-box !important;

  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease !important;
}

/* رمز الأيقونة نفسه */
.s-block--faqs.uminds-faq-section
.open-badge::before {
  color: #00b3bb !important;

  font-family: "sallaicons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;

  opacity: 1 !important;
  visibility: visible !important;
}

/* الحفاظ على الأيقونة عند المرور */
.s-block--faqs.uminds-faq-section
.faqs-list__item:hover
.open-badge,
.s-block--faqs.uminds-faq-section
.faqs-list__item > label:hover
.open-badge {
  background: #ffffff !important;
  color: #00b3bb !important;
  border-color: #9edbdd !important;
}

.s-block--faqs.uminds-faq-section
.faqs-list__item:hover
.open-badge::before,
.s-block--faqs.uminds-faq-section
.faqs-list__item > label:hover
.open-badge::before {
  color: #00b3bb !important;
}

/* =========================================
   حالة السؤال المفتوح
========================================= */

.s-block--faqs.uminds-faq-section
.faq-container
input:checked
+ .faqs-list__item {
  border-color: #00b3bb !important;

  box-shadow:
    0 6px 16px rgb(0 179 187 / 8%) !important;
}

.s-block--faqs.uminds-faq-section
.faq-container
input:checked
+ .faqs-list__item
.open-badge {
  background: #00b3bb !important;
  color: #ffffff !important;
  border-color: #00b3bb !important;
}

.s-block--faqs.uminds-faq-section
.faq-container
input:checked
+ .faqs-list__item
.open-badge::before {
  color: #ffffff !important;
}

/* =========================================
   الإجابة
========================================= */

.s-block--faqs.uminds-faq-section
.answer-container {
  width: 100% !important;
  box-sizing: border-box !important;
}

.s-block--faqs.uminds-faq-section
.faq-answer {
  width: 100% !important;

  padding-right: 20px !important;
  padding-left: 20px !important;

  color: #6e5a4c !important;

  font-family:
    var(--uminds-real-site-font),
    sans-serif !important;

  font-size: 14px !important;
  line-height: 1.9 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;

  text-align: right !important;

  box-sizing: border-box !important;
}

.s-block--faqs.uminds-faq-section
.faq-answer p,
.s-block--faqs.uminds-faq-section
.faq-answer span,
.s-block--faqs.uminds-faq-section
.faq-answer a {
  font-family:
    var(--uminds-real-site-font),
    sans-serif !important;

  font-style: normal !important;
  letter-spacing: 0 !important;
}

.s-block--faqs.uminds-faq-section
.faq-answer p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.s-block--faqs.uminds-faq-section
.faq-container
input:checked
+ .faqs-list__item
.faq-answer {
  padding-bottom: 18px !important;
}

/* =========================================
   التابلت
========================================= */

@media (max-width: 1000px) {
  .s-block--faqs.uminds-faq-section {
    margin: 24px 0 !important;
  }

  .s-block--faqs.uminds-faq-section
  > .container {
    width: calc(100% - 20px) !important;

    padding:
      32px 22px 34px !important;

    border-radius: 16px !important;
  }

  .s-block--faqs.uminds-faq-section
  .s-block__title {
    margin-bottom: 24px !important;
  }

  .s-block--faqs.uminds-faq-section
  .s-block__title h2 {
    font-size: 27px !important;
  }

  .s-block--faqs.uminds-faq-section
  .faqs-list {
    gap: 11px 12px !important;
  }
}

/* =========================================
   الجوال
========================================= */

@media (max-width: 640px) {
  .s-block--faqs.uminds-faq-section {
    margin: 20px 0 !important;
  }

  .s-block--faqs.uminds-faq-section
  > .container {
    width: calc(100% - 12px) !important;

    padding:
      26px 14px 28px !important;

    border-radius: 14px !important;
  }

  .s-block--faqs.uminds-faq-section
  .s-block__title {
    margin-bottom: 22px !important;
  }

  .s-block--faqs.uminds-faq-section
  .s-block__title h2 {
    font-size: 24px !important;
  }

  .s-block--faqs.uminds-faq-section
  .s-block__title p {
    font-size: 14px !important;
  }

  .s-block--faqs.uminds-faq-section
  .faqs-list {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .s-block--faqs.uminds-faq-section
  .faqs-list__item > label {
    min-height: 56px !important;

    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-right: 14px !important;
    padding-left: 52px !important;

    font-size: 14px !important;
  }

  .s-block--faqs.uminds-faq-section
  .open-badge {
    left: 13px !important;

    width: 28px !important;
    height: 28px !important;
  }

  .s-block--faqs.uminds-faq-section
  .faq-answer {
    padding-right: 14px !important;
    padding-left: 14px !important;

    font-size: 13px !important;
  }
}



/* =========================================================
   قائمة الجوال الجانبية — Uminds
   نسخة آمنة لا تكسر منطق mm-spn
========================================================= */

@media (max-width: 1024px) {

  /* =====================================
     طبقة التعتيم خلف القائمة
  ===================================== */

  html body .mm-ocd,
  html body .mm-ocd--open {
    background-color: rgba(20, 24, 25, 0.48) !important;

    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }

  html body .mm-ocd__content {
    background: transparent !important;
  }

  /* =====================================
     جسم القائمة — محدد مباشر وقوي
  ===================================== */

  html body #mobile-menu {
    --menu-bg: #fffdf9 !important;
    --mm-color-background: #fffdf9 !important;
    --mm-color-text: #3f3026 !important;
    --mm-color-border: #ebe2d9 !important;

    width: min(90vw, 400px) !important;
    max-width: 400px !important;
    height: 100dvh !important;
    min-height: 100dvh !important;

    background: #fffdf9 !important;
    background-color: #fffdf9 !important;
    color: #3f3026 !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow:
      -14px 0 38px rgba(41, 30, 22, 0.2) !important;

    direction: rtl !important;
    box-sizing: border-box !important;

    /*
     * لا نضع overflow-y هنا،
     * لأن المكتبة تجعل كل مستوى داخلي قابلًا للتمرير.
     */
    overflow: hidden !important;
  }

  /*
   * تجاوز لون الخلفية المكتوب داخل العنصر
   * أو القادم من متغيرات القالب.
   */
  html body #mobile-menu[style],
  html body #mobile-menu.mm-spn,
  html body #mobile-menu.mobile-menu {
    --menu-bg: #fffdf9 !important;

    background: #fffdf9 !important;
    background-color: #fffdf9 !important;
  }

  /* =====================================
     الخط
  ===================================== */

  html body #mobile-menu,
  html body #mobile-menu a,
  html body #mobile-menu span,
  html body #mobile-menu p,
  html body #mobile-menu div {
    font-family:
      var(--uminds-real-site-font, inherit) !important;

    letter-spacing: 0 !important;
  }

  /*
   * لا نستخدم background: transparent على جميع العناصر؛
   * لأنه كان يلغي خلفية القوائم المفتوحة.
   */
  html body #mobile-menu li,
  html body #mobile-menu a,
  html body #mobile-menu span {
    box-sizing: border-box !important;
  }

  /* إخفاء مساحة السلايدر الفارغة داخل القائمة */
  html body #mobile-menu .mobile-menu-slider {
    display: none !important;
  }

  /* =====================================
     رأس القائمة
  ===================================== */

  html body #mobile-menu.mm-spn--navbar::after,
  html body #mobile-menu[class*="mm-spn"]::after {
    height: 58px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    padding: 0 58px 0 58px !important;

    background: #fffdf9 !important;
    background-color: #fffdf9 !important;
    color: #4a3728 !important;

    border-bottom: 1px solid #e8ded3 !important;

    font-family:
      var(--uminds-real-site-font, inherit) !important;

    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;

    text-align: right !important;
    opacity: 1 !important;

    box-sizing: border-box !important;
    z-index: 30 !important;
  }

  /* سهم العودة الخاص بالمكتبة */
  html body #mobile-menu.mm-spn--navbar::before {
    top: 21px !important;
    right: 20px !important;
    left: auto !important;

    width: 11px !important;
    height: 11px !important;

    border-color: #806b5d !important;
    opacity: 1 !important;

    z-index: 40 !important;
  }

  /* زر الإغلاق */
  html body #mobile-menu .close-mobile-menu {
    position: absolute !important;

    top: 9px !important;
    left: 14px !important;
    right: auto !important;

    width: 40px !important;
    height: 40px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    color: #4a3728 !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;

    font-family: "sallaicons" !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 1 !important;

    z-index: 50 !important;

    transition:
      background-color 0.2s ease,
      color 0.2s ease !important;
  }

  html body #mobile-menu .close-mobile-menu:hover {
    background-color: #f2ece5 !important;
    color: #008d94 !important;
  }

  /* =====================================
     مستويات القائمة
     لا نغير left / transform / visibility
  ===================================== */

  html body #mobile-menu.mm-spn ul,
  html body #mobile-menu[class*="mm-spn"] ul {
    background: #fffdf9 !important;
    background-color: #fffdf9 !important;

    padding-top: 16px !important;
    padding-bottom: 28px !important;

    box-sizing: border-box !important;

    scrollbar-width: thin !important;
    scrollbar-color: #cfc2b6 transparent !important;
  }

  html body #mobile-menu ul::-webkit-scrollbar {
    width: 5px !important;
  }

  html body #mobile-menu ul::-webkit-scrollbar-thumb {
    background-color: #cfc2b6 !important;
    border-radius: 10px !important;
  }

  /*
   * مهم:
   * لا توجد هنا قواعد left أو transform أو opacity،
   * حتى تظل مكتبة mm-spn مسؤولة عن الانتقال بين المستويات.
   */

  /* =====================================
     عناصر القائمة
  ===================================== */

  html body #mobile-menu ul > li {
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-bottom: 1px solid #eee6de !important;

    box-sizing: border-box !important;
  }

  html body #mobile-menu ul > li:last-child {
    border-bottom: 0 !important;
  }

  html body #mobile-menu ul > li > a,
  html body #mobile-menu ul > li > span {
    position: relative !important;

    width: 100% !important;
    min-height: 52px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;

    margin: 0 !important;
    padding: 12px 18px !important;

    background: transparent !important;
    color: #3f3026 !important;

    border: 0 !important;
    border-radius: 7px !important;

    font-family:
      var(--uminds-real-site-font, inherit) !important;

    font-size: 15px !important;
    line-height: 1.55 !important;
    font-weight: 600 !important;

    text-align: right !important;
    text-decoration: none !important;
    white-space: normal !important;

    box-sizing: border-box !important;

    transition:
      background-color 0.2s ease,
      color 0.2s ease !important;
  }

  html body #mobile-menu ul > li > a:hover,
  html body #mobile-menu ul > li > span:hover {
    background-color: #f6f1eb !important;
    color: #008d94 !important;
  }

  /* عنوان الرابط */
  html body #mobile-menu .menu_title {
    width: 100% !important;

    color: inherit !important;

    font-family:
      var(--uminds-real-site-font, inherit) !important;

    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;

    text-align: right !important;
    white-space: normal !important;
  }

  /* عرض الكل */
  html body #mobile-menu .display-all-category {
    color: #008d94 !important;
    font-weight: 800 !important;
  }

  /* =====================================
     أسهم القوائم الفرعية
  ===================================== */

  html body #mobile-menu li > a::before,
  html body #mobile-menu li > a::after,
  html body #mobile-menu li > span::before,
  html body #mobile-menu li > span::after {
    border-color: #aa998c !important;
  }

  /* =====================================
     أيقونات التخفيضات والمدونة
  ===================================== */

  html body #mobile-menu .menu-img {
    flex: 0 0 auto !important;

    width: 20px !important;
    height: 20px !important;

    margin-right: 0 !important;
    margin-left: 8px !important;

    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    border-radius: 5px !important;
  }

  /* =====================================
     روابط تهمك وخدمة العملاء
  ===================================== */

  html body #mobile-menu li.links > span,
  html body #mobile-menu li.social > span {
    cursor: pointer !important;
  }

  html body #mobile-menu li.links > span > i,
  html body #mobile-menu li.social > span > i {
    flex: 0 0 auto !important;

    width: 22px !important;
    height: 22px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-right: 0 !important;
    margin-left: 8px !important;

    color: #00aeb6 !important;

    font-family: "sallaicons" !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 1 !important;
  }

  /* =====================================
     روابط تهمك
  ===================================== */

  html body #mobile-menu .links-menu .menu-list {
    width: 100% !important;
  }

  html body #mobile-menu .links-menu .footer-title {
    margin: 0 0 10px !important;
    padding: 0 4px 10px !important;

    color: #4a3728 !important;

    border-bottom: 1px solid #e8ded3 !important;

    font-size: 15px !important;
    font-weight: 800 !important;
  }

  html body
  #mobile-menu
  .links-menu
  .store-links-items
  a {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 11px 10px !important;

    background: transparent !important;
    color: #5f4c3f !important;

    border-bottom: 1px solid #eee6de !important;
    border-radius: 6px !important;

    font-family:
      var(--uminds-real-site-font, inherit) !important;

    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;

    text-align: right !important;
  }

  html body
  #mobile-menu
  .links-menu
  .store-links-items
  a:hover {
    background-color: #f6f1eb !important;
    color: #008d94 !important;
  }

  /* =====================================
     خدمة العملاء
  ===================================== */

  html body
  #mobile-menu
  .social-menu
  .s-contacts-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;

    width: 100% !important;
  }

  html body
  #mobile-menu
  .social-menu
  .s-contacts-item {
    width: 100% !important;
    min-height: 46px !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    padding: 9px 11px !important;

    background-color: #ffffff !important;
    color: #55443a !important;

    border: 1px solid #e8ded4 !important;
    border-radius: 9px !important;

    font-family:
      var(--uminds-real-site-font, inherit) !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;

    direction: ltr !important;
  }

  html body
  #mobile-menu
  .social-menu
  .s-contacts-icon {
    flex: 0 0 auto !important;

    width: 28px !important;
    height: 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #00aeb6 !important;
  }

  html body
  #mobile-menu
  .social-menu
  .s-contacts-icon svg {
    width: 20px !important;
    height: 20px !important;

    fill: currentColor !important;
  }
}


/* =========================================================
   الجوال الأصغر
========================================================= */

@media (max-width: 480px) {

  html body #mobile-menu {
    width: min(92vw, 370px) !important;
    max-width: 370px !important;
  }

  html body #mobile-menu ul > li > a,
  html body #mobile-menu ul > li > span {
    min-height: 49px !important;

    padding: 11px 14px !important;

    font-size: 14px !important;
  }

  html body #mobile-menu.mm-spn--navbar::after {
    font-size: 14px !important;
  }
}


/* =========================================================
   إصلاح تطبيق تصميم قائمة الجوال في معاينة سطح المكتب
========================================================= */

html body #mobile-menu {
  --menu-bg: #fffdf9 !important;
  --mm-color-background: #fffdf9 !important;
  --mm-color-text: #3f3026 !important;
  --mm-color-border: #e8ded3 !important;

  width: min(90vw, 400px) !important;
  max-width: 400px !important;
  height: 100dvh !important;

  background: #fffdf9 !important;
  background-color: #fffdf9 !important;
  color: #3f3026 !important;

  border: 0 !important;
  box-shadow: -14px 0 38px rgb(41 30 22 / 20%) !important;

  direction: rtl !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* خلفية كل مستوى داخل القائمة */
html body #mobile-menu ul,
html body #mobile-menu ul.mm-spn--open,
html body #mobile-menu ul.mm-spn--parent {
  background: #fffdf9 !important;
  background-color: #fffdf9 !important;
}

/* رأس القائمة */
html body #mobile-menu.mm-spn--navbar::after {
  height: 58px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  padding: 0 58px !important;

  background: #fffdf9 !important;
  color: #4a3728 !important;

  border-bottom: 1px solid #e8ded3 !important;

  font-family: var(--uminds-real-site-font, inherit) !important;
  font-size: 15px !important;
  font-weight: 700 !important;

  text-align: right !important;
  opacity: 1 !important;
}

/* النصوص */
html body #mobile-menu,
html body #mobile-menu a,
html body #mobile-menu span,
html body #mobile-menu p,
html body #mobile-menu div {
  font-family: var(--uminds-real-site-font, inherit) !important;
  letter-spacing: 0 !important;
}

/* عناصر القائمة */
html body #mobile-menu ul > li {
  background: transparent !important;
  border-bottom: 1px solid #eee6de !important;
}

html body #mobile-menu ul > li > a,
html body #mobile-menu ul > li > span {
  width: 100% !important;
  min-height: 52px !important;

  display: flex !important;
  align-items: center !important;

  padding: 12px 18px !important;

  background: transparent !important;
  color: #3f3026 !important;

  border: 0 !important;
  border-radius: 7px !important;

  font-family: var(--uminds-real-site-font, inherit) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;

  text-align: right !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}

html body #mobile-menu ul > li > a:hover,
html body #mobile-menu ul > li > span:hover {
  background: #f6f1eb !important;
  color: #008d94 !important;
}

/* زر الإغلاق */
html body #mobile-menu .close-mobile-menu {
  position: absolute !important;
  top: 9px !important;
  left: 14px !important;
  right: auto !important;

  width: 40px !important;
  height: 40px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;

  background: transparent !important;
  color: #4a3728 !important;

  border: 0 !important;
  border-radius: 50% !important;

  z-index: 50 !important;
}

/* خلفية الصفحة عند فتح القائمة */
html body .mm-ocd,
html body .mm-ocd--open {
  background-color: rgb(18 24 25 / 48%) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* الجوال الصغير */
@media (max-width: 480px) {
  html body #mobile-menu {
    width: min(92vw, 370px) !important;
    max-width: 370px !important;
  }

  html body #mobile-menu ul > li > a,
  html body #mobile-menu ul > li > span {
    min-height: 49px !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
  }
}


/* =========================================================
   فرض خط PingARLT على جميع نصوص قائمة الجوال
========================================================= */

/* جميع عناصر القائمة بلا استثناء */
html body #mobile-menu,
html body #mobile-menu * {
  font-family: "PingARLT", Tahoma, Arial, sans-serif !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}

/* عنوان المستوى الحالي: القائمة الرئيسية / لوحات كانفس */
html body #mobile-menu.mm-spn--navbar::after,
html body #mobile-menu[class*="mm-spn"]::after {
  font-family: "PingARLT", Tahoma, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
}

/* روابط القائمة */
html body #mobile-menu ul > li > a,
html body #mobile-menu ul > li > span,
html body #mobile-menu ul > li > a *,
html body #mobile-menu ul > li > span * {
  font-family: "PingARLT", Tahoma, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
}

/* المستوى الفرعي */
html body #mobile-menu ul ul > li > a,
html body #mobile-menu ul ul > li > span,
html body #mobile-menu ul ul > li > a *,
html body #mobile-menu ul ul > li > span * {
  font-family: "PingARLT", Tahoma, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* إزالة أي خط تفرضه كلاسات القالب */
html body #mobile-menu .font-primary,
html body #mobile-menu [class*="font-primary"],
html body #mobile-menu [style*="font-family"] {
  font-family: "PingARLT", Tahoma, Arial, sans-serif !important;
}

/* إعادة خط أيقونات سلة حتى لا تتحول إلى رموز غريبة */
html body #mobile-menu i,
html body #mobile-menu i::before,
html body #mobile-menu i::after,
html body #mobile-menu [class^="sicon-"],
html body #mobile-menu [class*=" sicon-"],
html body #mobile-menu .close-mobile-menu,
html body #mobile-menu .close-mobile-menu::before {
  font-family: "sallaicons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1 !important;
}

/* الصور المصغرة ليست أيقونات خطية */
html body #mobile-menu .menu-img {
  font-family: initial !important;
}

/* الجوال الصغير */
@media (max-width: 480px) {
  html body #mobile-menu ul > li > a,
  html body #mobile-menu ul > li > span,
  html body #mobile-menu ul > li > a *,
  html body #mobile-menu ul > li > span * {
    font-size: 15px !important;
  }

  html body #mobile-menu.mm-spn--navbar::after {
    font-size: 15px !important;
  }
}
/* =========================================================
   V19 — HERO + CATEGORIES CRITICAL LAYOUT (CLS SAFE)
   الهدف:
   1) حجز مساحة البنر قبل تشغيل JavaScript لتقليل CLS
   2) الحفاظ على عرض 1460px
   3) إظهار صورة 16:9 كاملة
   4) إصلاح إزاحة Swiper الداخلية 34px على سطح المكتب
========================================================= */

/* ---------------------------------------------------------
   البنر الرئيسي — Desktop
--------------------------------------------------------- */
.s-block.home-slider.s-block--hero-slider {
  width: calc(100% - 24px) !important;
  max-width: 1460px !important;

  /*
   * صور البنر التي تصل من سلة 16:9
   * مثال فعلي من الفحص: 1440 × 810
   *
   * نحجز الارتفاع منذ أول Paint بدل انتظار JavaScript.
   */
  height: min(
    calc((100vw - 24px) * 0.5625),
    821.25px
  ) !important;

  min-height: min(
    calc((100vw - 24px) * 0.5625),
    821.25px
  ) !important;

  max-height: 821.25px !important;
  aspect-ratio: 16 / 9 !important;

  margin: 12px auto 24px !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  background: #f7f3ed !important;

  border: 0 !important;
  border-radius: 14px !important;

  overflow: hidden !important;
}

/* مكوّن سلة نفسه */
.s-block.home-slider.s-block--hero-slider salla-slider {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-height: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  border: 0 !important;
  border-radius: inherit !important;

  overflow: hidden !important;
  background: #f7f3ed !important;
}

/*
 * الفحص الفعلي أظهر:
 * SECTION top = 144px
 * SALLA-SLIDER top = 144px
 * .swiper.s-slider-container top = 178px
 *
 * الفرق = 34px.
 * نطبّق الإصلاح هنا في CSS المبكر، وليس بعد الرسم عبر JS.
 */
.s-block.home-slider.s-block--hero-slider
.swiper.s-slider-container {
  width: 100% !important;
  height: 100% !important;

  min-height: 100% !important;
  max-height: 100% !important;

  /*
   * V19:
   * بدل margin-top السالب الذي يغيّر تخطيط الصفحة ويساهم في CLS،
   * نستخدم transform بصريًا فقط.
   * النتيجة المرئية تبقى نفسها: رفع السلايدر 34px،
   * لكن تدفق الصفحة لا يتغيّر.
   */
  margin: 0 !important;
  transform: translateY(-34px) !important;
  will-change: transform !important;

  padding: 0 !important;

  box-sizing: border-box !important;

  border: 0 !important;
  border-radius: inherit !important;

  overflow: hidden !important;
  background: #f7f3ed !important;
}

/* Swiper wrapper */
.s-block.home-slider.s-block--hero-slider
.swiper-wrapper {
  width: 100% !important;
  height: 100% !important;

  min-height: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  align-items: stretch !important;
}

/* الشرائح */
.s-block.home-slider.s-block--hero-slider
.swiper-slide {
  width: 100% !important;
  height: 100% !important;

  min-height: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  border: 0 !important;

  overflow: hidden !important;
  background: #f7f3ed !important;
}

/* أغلفة الصورة */
.s-block.home-slider.s-block--hero-slider
.swiper-slide > a,
.s-block.home-slider.s-block--hero-slider
.swiper-slide > picture,
.s-block.home-slider.s-block--hero-slider
.swiper-slide picture {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-height: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* الصورة نفسها */
.s-block.home-slider.s-block--hero-slider
.swiper-slide img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  max-width: 100% !important;

  min-height: 0 !important;
  max-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center center !important;

  background: #f7f3ed !important;

  border: 0 !important;
  border-radius: 14px !important;
}

/* ---------------------------------------------------------
   التصنيفات أسفل البنر
   نحجز لها مساحة مبكرة لتقليل انتقال العناصر
--------------------------------------------------------- */
.s-block--categories.merge-with-top-component {
  min-height: 135px !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */
@media (max-width: 900px) {
  .s-block.home-slider.s-block--hero-slider {
    width: calc(100% - 20px) !important;

    height: calc((100vw - 20px) * 0.5625) !important;
    min-height: calc((100vw - 20px) * 0.5625) !important;
    max-height: none !important;

    margin-top: 10px !important;

    border-radius: 12px !important;
  }

  /*
   * الإزاحة 34px تم قياسها على سطح المكتب.
   * لا نفرضها على التابلت والجوال.
   */
  .s-block.home-slider.s-block--hero-slider
  .swiper.s-slider-container {
    margin-top: 0 !important;
    transform: none !important;
    will-change: auto !important;
  }

  .s-block.home-slider.s-block--hero-slider
  .swiper-slide img {
    border-radius: 12px !important;
  }

  .s-block--categories.merge-with-top-component {
    min-height: 115px !important;
  }
}

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */
@media (max-width: 640px) {
  .s-block.home-slider.s-block--hero-slider {
    width: calc(100% - 12px) !important;

    height: calc((100vw - 12px) * 0.5625) !important;
    min-height: calc((100vw - 12px) * 0.5625) !important;
    max-height: none !important;

    margin-top: 8px !important;

    border-radius: 10px !important;
  }

  .s-block.home-slider.s-block--hero-slider
  .swiper-slide img {
    border-radius: 10px !important;
  }

  .s-block--categories.merge-with-top-component {
    min-height: 100px !important;
  }
}