/* =========================================================
   تعديل تصميم الفوتر + عناصر أخرى - متجر جاها (زد)
   يُلصق في: لوحة التحكم > تصميم المتجر > تخصيص > Custom CSS
   ========================================================= */

/* -------------------------------------------------
   1) هامش أعلى الفوتر (~40px)
   ------------------------------------------------- */
footer[section-id] {
  padding-top: 40px !important;
}

/* -------------------------------------------------
   2) تحويل حاوية الفوتر إلى Grid بنسبة 50% / 25% / 25%
   بدل التكديس الرأسي (flex-col) الحالي
   ------------------------------------------------- */
.d-m-footer-2 {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr !important; /* عمود About أصغر شوي + مسافة أوضح عن العمود الأوسط */
  grid-template-areas:
    "about    links1 links2"
    "social   links1 links2"
    "contact  links1 links2"
    "payments payments payments"
    "copyright copyright copyright" !important;
  align-items: start !important;
  justify-items: stretch !important;
  text-align: start !important; /* تتبع اتجاه اللغة تلقائيًا: يمين بالعربي، يسار بالإنجليزي */
  column-gap: 56px; /* مسافة أكبر بين الأعمدة */
  row-gap: 0;
  width: 100%;
  max-width: 1440px; /* يمنع الفوتر من التمدد الزائد على الشاشات العريضة */
  margin-inline: auto !important; /* توسيط الفوتر أفقيًا */
  padding-inline: 24px; /* هامش بسيط عن حواف الشاشة */
  box-sizing: border-box;
}

/* إلغاء محاذاة الوسط الموروثة من الكلاسات flex/items-center/justify-center */
.d-m-footer-2 .flex.items-center.justify-center {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.d-m-footer-2 .store-about,
.d-m-footer-2 .footer-links {
  align-items: flex-start !important;
  text-align: start !important;
}

/* -------------------------------------------------
   نسخة الجوال: عمود واحد بدل 3 أعمدة (يحل مشكلة القص)
   ------------------------------------------------- */
@media (max-width: 767px) {
  .d-m-footer-2 {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "about"
      "social"
      "contact"
      "links1"
      "links2"
      "payments"
      "copyright" !important;
  }
  .d-m-footer-2 > div.footer-links-1-wapper {
    margin-top: 40px !important;
  }
  .d-m-footer-2 > div.footer-links-2-wapper {
    margin-top: 40px !important;
  }
}

/* =========================================================
   العمود الأول: عن جاها + الوصف + سوشيال ميديا + تواصل معنا
   ========================================================= */

/* 1. عن جاها (العنوان + الوصف) */
.d-m-footer-2 > div:nth-child(1) {
  grid-area: about;
  margin-top: 0 !important;
}

/* 2. أيقونات السوشيال ميديا - بعد الوصف بمسافة 24px */
.d-m-footer-2 > div:nth-child(2) {
  grid-area: social;
  margin-top: 24px !important;
}

/* 3. تواصل معنا - بعد السوشيال ميديا بمسافة 40px */
.d-m-footer-2 > div.contact-us-wapper {
  grid-area: contact;
  margin-top: 40px !important;
}

/* أيقونات الايميل والجوال أفقية (هي كذلك أصلاً بالكود الأصلي) */
.contact-us-wapper .flex.gap-2.justify-start {
  flex-direction: row !important;
  justify-content: flex-start !important;
}

/* =========================================================
   العمودان الثاني والثالث: روابط مهمة 1 / روابط مهمة 2
   العنوان أعلى، والروابط تحته رأسيًا وبنفس محاذاة العنوان
   ========================================================= */

.d-m-footer-2 > div.footer-links-1-wapper {
  grid-area: links1;
}

.d-m-footer-2 > div.footer-links-2-wapper {
  grid-area: links2;
}

/* -------------------------------------------------
   محاذاة العناوين الثلاثة (عن جاها / روابط مهمة / روابط مهمة ٢)
   على نفس المستوى تمامًا - ديسكتوب فقط (768px فأعلى)
   ------------------------------------------------- */
@media (min-width: 768px) {
  .d-m-footer-2 > div:nth-child(1),
  .d-m-footer-2 > div.footer-links-1-wapper,
  .d-m-footer-2 > div.footer-links-2-wapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .d-m-footer-2 > div:nth-child(1) h3,
  .d-m-footer-2 > div.footer-links-1-wapper h3,
  .d-m-footer-2 > div.footer-links-2-wapper h3 {
    margin-top: 0 !important;
    line-height: 1.4 !important;
  }
}

.footer-links-1-wapper ul,
.footer-links-2-wapper ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* =========================================================
   صف طرق الدفع + السطر السفلي (حقوق النشر) - عرض كامل أسفل الجريد
   ========================================================= */
.d-m-footer-2 > div.footer-payments-shipping-wapper {
  grid-area: payments;
  margin-top: 40px !important;
  width: 100%;
}

.d-m-footer-2 > span.copy-right {
  grid-area: copyright;
  margin-top: 24px !important;
  text-align: center !important; /* عادة سطر الحقوق يكون في المنتصف */
}

/* =========================================================
   3) لون شارة/بادج المنتجات = اللون الأساسي للهوية
   ملاحظة: الكلاس هنا تخميني لعدم توفر HTML الخاص بكرت المنتج،
   إذا ما اشتغل ابعثلي كود الـ badge من كرت المنتج وأظبطه بدقة
   ========================================================= */
.product-item [class*="badge"],
.product-card [class*="badge"],
.product-item .sale-badge,
.product-card .sale-badge {
  background-color: var(--primary-color, #YOUR-BRAND-COLOR) !important;
  border-color: var(--primary-color, #YOUR-BRAND-COLOR) !important;
  color: #fff !important;
}

/* =========================================================
   4) إخفاء الوزن من تفاصيل المنتج
   يخفي فقط عنوان "الوزن" (h4.product-title) المتبوع مباشرة
   بـ .product-weight، حتى لا يتأثر أي عنوان آخر يشارك نفس الكلاس
   ========================================================= */
.product-weight,
h4.product-title:has(+ .product-weight) {
  display: none !important;
}

/* =========================================================
   5) إخفاء نظام المكافآت / الولاء من كامل المتجر
   ========================================================= */
.loyalty-points-products-section,
.loyalty_footer_btn,
[class*="loyalty-points"],
[class*="loyalty-reward"] {
  display: none !important;
}

/* =========================================================
   6) إخفاء رمز المنتج (SKU) من كل المنتجات
   ========================================================= */
.product-sku,
h4.product-title:has(+ .product-sku) {
  display: none !important;
}