/* =========================================
   NAFAH — تنسيق الهيدر والمنتجات والفوتر
   ========================================= */

/* مقاسات الشعار */
html body#app:not(.maintenance) {
  --nafah-logo-width: 180px;
  --nafah-logo-height: 64px;
}


/* =========================================
   الهيدر — التنسيق المعتمد
   ========================================= */

/* إلغاء المساحة العلوية الكبيرة */
html body#app #mainnav .inner > .container > div {
  position: relative !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 84px !important;
  padding-block: 8px !important;
  align-items: center !important;
}

/* الحاوية المحيطة بالشعار */
html body#app #mainnav .inner > .container
> div > div:has(> .navbar-brand) {
  position: static !important;
  transform: none !important;
  min-width: 0 !important;
}

/* الشعار في منتصف الهيدر */
html body#app #mainnav .navbar-brand {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--nafah-logo-width) !important;
  height: var(--nafah-logo-height) !important;
  max-width: calc(100% - 32px) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
}

/* الحفاظ على أبعاد الشعار الأصلية */
html body#app #mainnav .navbar-brand img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: var(--nafah-logo-height) !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

/* إخفاء البحث الأصلي في أعلى الهيدر */
html body#app header.store-header :is(
  .header-search,
  salla-search,
  .s-search-btn,
  .search-btn,
  .btn--search,
  [data-modal-trigger="search"],
  [data-target="#search"],
  button[aria-label*="بحث"],
  button[aria-label*="Search" i],
  a[aria-label*="بحث"],
  a[aria-label*="Search" i]
),
html body#app header.store-header
:is(a, button):has(.sicon-search, .s-icon-search) {
  display: none !important;
}

/* إخفاء رابط اسم المتجر في القائمة */
html body#app #mainnav custom-main-menu
a:is(
  [href="/"],
  [href="https://nafah-sa.com"],
  [href="https://nafah-sa.com/"],
  [href="https://salla.sa/nafah-2030"],
  [href="https://salla.sa/nafah-2030/"]
):not(:has(img)) {
  display: none !important;
}

/* تقليل مسافات الشريط العلوي */
html body#app header.store-header .top-navbar {
  min-height: 0 !important;
  padding-block: 4px !important;
}

/* =========================================
   زر البحث بجانب المستخدم
   ========================================= */

html body#app #mainnav .nafah-search-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 40px !important;

  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;

  color: #432b1d !important;
  background: #fffdf9 !important;
  border: 1px solid #e3d7c7 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: 0.2s ease !important;
}

html body#app #mainnav .nafah-search-button:hover {
  background: #fbf8f3 !important;
  border-color: #dda46f !important;
}

html body#app #mainnav .nafah-search-button svg {
  width: 19px !important;
  height: 19px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
}

html body#app #mainnav .nafah-search-button:focus-visible {
  outline: 2px solid #432b1d !important;
  outline-offset: 3px !important;
}

/* =========================================
   عرض المنتجات — 2 في كل صف
   ========================================= */

html body#app main salla-products-list
> div:has(> :is(salla-product-card, custom-salla-product-card)) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(8px, 2vw, 24px) !important;
  align-items: stretch !important;
}

html body#app main salla-products-list
> div:has(> :is(salla-product-card, custom-salla-product-card))
> :is(salla-product-card, custom-salla-product-card) {
  box-sizing: border-box !important;
  width: auto !important;
  inline-size: auto !important;
  min-width: 0 !important;
  min-inline-size: 0 !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
}

html body#app main salla-products-list
> div:has(> :is(salla-product-card, custom-salla-product-card))
> :not(salla-product-card, custom-salla-product-card) {
  grid-column: 1 / -1;
}

/* =========================================
   لون زر أضف إلى السلة
   ========================================= */

html body#app main salla-add-product-button {
  --color-primary: #dda46f !important;
  --color-primary-dark: #c88955 !important;
  --color-primary-reverse: #432b1d !important;
}

html body#app main salla-add-product-button button {
  background-color: #dda46f !important;
  border-color: #dda46f !important;
  color: #432b1d !important;
  box-shadow: none !important;
}

html body#app main salla-add-product-button button :is(span, i, svg) {
  color: #432b1d !important;
  fill: currentColor !important;
}

html body#app main salla-add-product-button button:hover {
  background-color: #c88955 !important;
  border-color: #c88955 !important;
  color: #fffdf9 !important;
}

html body#app main salla-add-product-button button:hover :is(span, i, svg) {
  color: #fffdf9 !important;
}

/* =========================================
   الفوتر — الشعار وروابط التواصل
   ========================================= */

/* رابط الهوية في الفوتر */
html body#app footer.store-footer
.store-footer__inner > .container > div:first-child > a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: fit-content !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

/* إخفاء الاسم بصريًا مع إبقائه لقارئات الشاشة */
html body#app footer.store-footer
.store-footer__inner > .container > div:first-child > a > h3 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* إلغاء أي شعار مضاف سابقًا داخل عنوان الفوتر */
html body#app footer.store-footer
.store-footer__inner > .container > div:first-child > a > h3::before,
html body#app footer.store-footer
.store-footer__inner > .container > div:first-child > a > h3::after {
  content: none !important;
}

/* عرض الشعار الأصلي بدل الاسم */
html body#app footer.store-footer
.store-footer__inner > .container > div:first-child > a::before {
  content: "" !important;
  display: block !important;
  flex: 0 1 180px !important;

  width: 180px !important;
  height: 68px !important;
  max-width: 100% !important;

  background-image: url("https://cdn.files.salla.network/other/2128510985/f30269fd-144e-4247-8d39-5f600156c5a4-original.webp") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* إخفاء عنوان روابط مهمة فقط */
html body#app footer.store-footer
.store-footer__inner > .container
> div:has(> salla-menu[data-testid="store-footer-menu"]) > h3 {
  display: none !important;
}

/* إخفاء مجموعة التواصل الموجودة تحت وصف المتجر */
html body#app footer.store-footer
.store-footer__inner > .container > div:first-child
> div:has(> salla-social[data-testid="store-footer-social"]) {
  display: none !important;
}

/* ترتيب عمود تواصل معنا */
html body#app footer.store-footer
.store-footer__inner > .container
> div:has(> salla-contacts[data-testid="store-footer-contacts"]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
}

/* بيانات التواصل */
html body#app footer.store-footer
salla-contacts[data-testid="store-footer-contacts"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* إظهار الأيقونات أسفل التواصل على جميع الشاشات */
html body#app footer.store-footer .contact-social {
  display: block !important;
  width: 100% !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
}

/* محاذاة مجموعة الأيقونات مع بداية عمود التواصل */
html body#app footer.store-footer .contact-social
salla-social[data-testid="store-footer-social-mobile"] {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body#app footer.store-footer .contact-social
salla-social ul {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body#app footer.store-footer .contact-social
salla-social li {
  margin: 0 !important;
  padding: 0 !important;
}

/* توحيد مقاسات أزرار التواصل */
html body#app footer.store-footer .contact-social
salla-social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

/* =========================================
   تعديل عبارة السجل التجاري
   ========================================= */

/* السماح بالتفاف العبارة داخل مساحة الفوتر */
html body#app footer.store-footer
salla-trust-badges {
  max-width: 100% !important;
  min-width: 0 !important;
}

html body#app footer.store-footer
salla-trust-badges .s-trust-badges-content {
  min-width: 0 !important;
}

/* الحفاظ على مقاس شعار السجل */
html body#app footer.store-footer
salla-trust-badges .s-trust-badges-image {
  flex-shrink: 0 !important;
}

/* استبدال العبارة المعروضة دون التأثير على رقم السجل */
html body#app footer.store-footer
salla-trust-badges .s-trust-badges-label {
  font-size: 0 !important;
  line-height: 0 !important;
  margin-bottom: 6px !important;
}

html body#app footer.store-footer
salla-trust-badges .s-trust-badges-label::after {
  content: "السجل التجاري - المملكة العربية السعودية - جدة" !important;
  display: block !important;

  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  color: inherit !important;

  direction: rtl !important;
  text-align: right !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* =========================================
   الهاتف والتابلت
   ========================================= */

@media (max-width: 1023px) {
  html body#app:not(.maintenance) {
    --nafah-logo-width: 140px;
    --nafah-logo-height: 48px;
  }

  html body#app #mainnav .inner > .container > div {
    min-height: 100px !important;
    padding-block-start: 54px !important;
    padding-block-end: 4px !important;
  }

  html body#app #mainnav .navbar-brand {
    top: 4px !important;
    transform: translateX(-50%) !important;
  }

  html body#app #mainnav .inner > .container
  > div > div:has(> salla-cart-summary) {
    margin-block: 0 !important;
  }

  /* شعار الفوتر على الهاتف */
  html body#app footer.store-footer
  .store-footer__inner > .container > div:first-child > a::before {
    width: 160px !important;
    height: 60px !important;
    flex-basis: 160px !important;
  }

  html body#app footer.store-footer .contact-social {
    margin-top: 14px !important;
  }
}

/* ملاءمة البطاقات لثلاثة أعمدة على الهاتف */
@media (max-width: 639px) {
  html body#app main salla-products-list
  > div:has(> :is(salla-product-card, custom-salla-product-card)) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body#app main salla-products-list
  :is(salla-product-card, custom-salla-product-card)
  .s-product-card-content {
    min-width: 0 !important;
    padding: 8px 5px !important;
  }

  html body#app main salla-products-list
  :is(salla-product-card, custom-salla-product-card)
  .s-product-card-content-title a {
    font-size: 12px !important;
    line-height: 1.6 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body#app main salla-products-list
  :is(salla-product-card, custom-salla-product-card)
  .s-product-card-price {
    font-size: 12px !important;
  }

  html body#app main salla-products-list
  :is(salla-product-card, custom-salla-product-card)
  .s-product-card-content-footer {
    min-width: 0 !important;
    gap: 4px !important;
  }

  html body#app main salla-products-list
  salla-add-product-button {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body#app main salla-products-list
  salla-add-product-button button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: auto !important;
    padding: 7px 3px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
  }

  html body#app main salla-products-list
  salla-add-product-button button span {
    white-space: normal !important;
  }
}
/* إخفاء شريط الإيميل أعلى الهيدر */
html body#app header.store-header .top-navbar {
  display: none !important;
}
/* صور المنتجات: عرض موحّد دون قص أو زوم */
html body#app main
:is(salla-product-card, custom-salla-product-card).s-product-card-fit-height
.s-product-card-image,
html body#app main
:is(salla-product-card, custom-salla-product-card)
.s-product-card-image {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  background: transparent !important;
}

html body#app main
:is(salla-product-card, custom-salla-product-card)
.s-product-card-image > a {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

html body#app main
:is(salla-product-card, custom-salla-product-card)
img.s-product-card-image-contain,
html body#app main
:is(salla-product-card, custom-salla-product-card)
img.s-product-card-image-cover {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* نفح: بانر بكامل العرض دون قص أو فراغات جانبية */

body.index #main-slider-0 {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* ارتفاع الإطار يتبع النسبة الأصلية للصورة */
body.index #main-slider-0 .swiper-slide {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1350 / 899 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* إظهار الصورة كاملة داخل الإطار المطابق لها */
body.index #main-slider-0
.swiper-slide > div[style*="background-image"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transform: none !important;
  scale: none !important;
}

/* منع طبقة النص من زيادة ارتفاع الإطار */
body.index #main-slider-0 .home-slider__content {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box;
}
/* NAFAH — عرض منتجين في كل صف */
html body#app main salla-products-list > div:has(
  > :is(salla-product-card, custom-salla-product-card)
) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* السماح للبطاقات بالتناسب مع عرض العمود */
html body#app main salla-products-list > div
> :is(salla-product-card, custom-salla-product-card) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* NAFAH — شبكة متجاوبة مع الحفاظ على تنسيق الهاتف */

/* الشاشات المتوسطة والآيباد الأفقي */
@media (min-width: 1024px) {
  html body#app main salla-products-list > div:has(
    > :is(salla-product-card, custom-salla-product-card)
  ) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

/* شاشات الكمبيوتر الواسعة */
@media (min-width: 1280px) {
  html body#app main salla-products-list > div:has(
    > :is(salla-product-card, custom-salla-product-card)
  ) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;

    /* منع تضخم البطاقات على الشاشات الكبيرة جدًا */
    max-width: 1440px !important;
    margin-inline: auto !important;
  }
}