/* =========================================================
   تخصيص هيدر وفوتر متجر سلّة - صفاء الألوان
   الصق هذا الكود في: لوحة التحكم > تخصيص المظهر > إضافة كود CSS مخصص
   ملاحظة: أسماء الـ classes قد تختلف حسب قالبك، إذا جزء ما اشتغل
   افحص العنصر (Inspect) من المتصفح وابعتلي اسم الـ class الصحيح
   ========================================================= */

/* ---------- 1) لون خلفية الصفحة العام ---------- */
body {
  background-color: #f7f8fa; /* رمادي فاتح جداً بدل الأبيض الكامل */
}

/* ---------- 1.5) خلفية الهيدر: أبيض بدل الأسود ---------- */
/* الأسماء التالية مؤكدة من فحص DevTools مباشرة على موقعك */
.header-is-dark .header-components,
.header-is-dark .header-components-top,
.header-is-dark .fixed-pinned.header-components,
.header-is-dark .fixed-pinned .inner,
.header-is-dark .main-nav-container,
.header-components-top,
.header-components-all,
.header-op-page,
.header-bg {
  background-color: #ffffff !important;
}

/* الأيقونات والنصوص جوا الهيدر تتحول لداكن عشان تبين على الأبيض */
.header-is-dark a,
.header-is-dark span,
.header-is-dark svg,
.header-is-dark i,
.header-components-top a,
.header-components-top span,
.header-components-top svg,
.main-nav-container a,
.main-nav-container span {
  color: #1a2b52 !important;
  fill: #1a2b52 !important;
}

/* ---------- 2) الشعار: الحجم والمكان ---------- */
.s-header-logo,
.header-logo,
.s-header-main-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.s-header-logo img,
.header-logo img,
.s-header-main-logo img,
.header-components-inner img {
  max-height: 200px !important;   /* كبّرته أكثر */
  width: auto !important;
}

/* توسيط الشعار داخل صف الهيدر بالكامل (لو الشعار كان طرف بدل النص) */
.s-header-main,
.s-header-top-row,
.s-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.s-header-logo,
.header-logo {
  order: 2;         /* يخليه بالنص بين العناصر اليمين واليسار */
  margin: 0 auto;
}

/* توسيط مضمون للشعار بدون تراكب مع باقي العناصر (الكلاس الحقيقي المؤكد) */
.header-components-inner {
  flex-wrap: wrap !important;
  row-gap: 8px !important;
}

/* أي عنصر جوّا الحاوية فيه صورة (الشعار) ياخذ سطر مستقل، وأول شي بالترتيب */
.header-components-inner > *:has(img),
.header-components-inner > img {
  order: -1 !important;
  flex: 0 0 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin: 4px 0 !important;
}

/* التصنيفات تاخذ آخر سطر دائماً (بعد الشعار) */
.main-nav-container {
  order: 10 !important;
  flex: 0 0 100% !important;
  border-top: 1px solid #eef0f3 !important;
  padding-top: 10px !important;
  margin-top: 6px !important;
}

/* فتح ارتفاع الحاويات الأب عشان السطر الجديد يبين ولا يتقص */
.header-components-top,
.header-op-page,
.header-components-inner,
.fixed-pinned,
.fixed-pinned .inner,
.header-bg {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

/* ترتيب زر البحث ليطلع أول عنصر (يمين) بدل آخر واحد */
.search-btn,
.btn--gray.search-btn {
  order: -1 !important;
}

/* دفع السلة والحساب ليطلعوا بعد البحث (يسار) - نستهدف أي عنصر أب يحتوي أيقونة السلة/الحساب */
.header-components-inner *:has(> .sicon-cart2),
.header-components-inner *:has(.sicon-cart2),
.header-components-inner *:has(> .sicon-user),
.header-components-inner *:has(.sicon-user),
.header-components-inner *:has(> .sicon-user2),
.header-components-inner *:has(.sicon-user2) {
  order: 2 !important;
}

/* تكبير أيقونات الهيدر (سلة، حساب، بحث) */
.header-components-inner svg {
  width: 26px !important;
  height: 26px !important;
}

.header-components-inner a,
.header-components-inner button {
  padding: 6px !important;
}
/* ---------- 3) قائمة التصنيفات (المناسبات، الطباعة...الخ) ---------- */
.main-nav-container {
  display: flex !important;
  justify-content: center !important;
  font-size: 17px !important;
}

.s-header-navigation-links,
.s-header-main-menu,
.main-menu {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.s-header-navigation-links a,
.s-header-main-menu a,
.main-menu a,
.main-nav-container a {
  color: #1a2b52 !important;   /* كحلي نفس لون الفوتر */
  font-weight: 600;
  font-size: 17px !important;
  transition: color 0.2s ease;
}

.s-header-navigation-links a:hover,
.s-header-main-menu a:hover,
.main-menu a:hover {
  color: #e30613;         /* اللون الأحمر عند التحويم، عدّله حسب هوية المتجر */
}

/* تمييز الرابط النشط (الرئيسية) */
.s-header-navigation-links a.active,
.main-menu a.active {
  color: #e30613;
  border-bottom: 2px solid #e30613;
}

/* ---------- 4) البنر الرئيسي ياخذ عرض الشاشة كامل ---------- */
.s-block--fixed-banner {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* إلغاء الحواف الدائرية عشان يكون البنر حاد الأطراف ومنسجم مع الشاشة كاملة */
.s-block--fixed-banner .banner--fixed {
  border-radius: 0 !important;
}

.s-block--fixed-banner img {
  width: 100% !important;
  object-fit: cover !important;
}

/* ---------- 5) الفوتر: اللون والتقسيم ---------- */
.s-footer,
.footer,
.store-footer {
  background-color: #1a2b52 !important; /* كحلي غامق */
  color: #ffffff;
}

.s-footer a,
.footer a,
.store-footer a {
  color: #d7dbe6;
}

.s-footer a:hover,
.footer a:hover,
.store-footer a:hover {
  color: #ffffff;
}

/* تقسيم أعمدة الفوتر */
.s-footer-widgets,
.footer-widgets,
.footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 أعمدة: تابعنا / معلومات المتجر / خدمة العملاء / تواصل معنا */
  gap: 32px;
}

/* عمود الشعار داخل الفوتر (يكون آخر عمود في RTL) */
.s-footer-logo,
.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.s-footer-logo img,
.footer-logo img {
  max-height: 60px;
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .s-footer-widgets,
  .footer-widgets,
  .footer-content {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  .s-footer-logo,
  .footer-logo {
    align-items: center;
  }
}

/* ---------- 7) تثبيت الهيدر بشكل ثابت (Sticky) عند التمرير ---------- */
.header-components-top,
.header-bg,
.header-op-page {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}
/* ---------- 8) القائمة المنسدلة تحت التصنيفات (Dropdown) ---------- */
.main-menu .has-children ul,
.main-menu .root-level ul,
.main-menu ul ul,
.main-nav-container .dropdown,
.main-nav-container .sub-menu,
.main-nav-container .submenu,
.main-nav-container .dropdown-menu,
.main-nav-container .mega-menu,
.main-nav-container [class*="dropdown"] {
  background-color: #ffffff !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
  border-radius: 8px !important;
}

.main-menu .has-children ul a,
.main-menu .root-level ul a,
.main-menu ul ul a,
.main-nav-container .dropdown a,
.main-nav-container .sub-menu a,
.main-nav-container .submenu a,
.main-nav-container .dropdown-menu a,
.main-nav-container .mega-menu a,
.main-nav-container [class*="dropdown"] a {
  color: #7a1128 !important;   /* أحمر عنابي */
}

/* ---------- 9) القائمة الجانبية على الجوال (Mobile Menu) ---------- */
.s-menu,
.s-mobile-menu,
.s-header-mobile-menu,
.mobile-menu,
.offcanvas,
.offcanvas-menu,
.s-drawer,
.s-drawer-menu,
.mm-menu,
.mm-panel {
  background-color: #ffffff !important;
}

.s-menu a,
.s-mobile-menu a,
.s-header-mobile-menu a,
.mobile-menu a,
.offcanvas a,
.offcanvas-menu a,
.s-drawer a,
.mm-menu a,
.mm-panel a,
.mm-listitem a {
  color: #0a5fd6 !important;   /* نفس أزرق التصنيفات بالهيدر */
  border-bottom-color: #eef0f3 !important;
}

/* عنوان "القائمة الرئيسية" أعلى القائمة الجانبية */
.s-menu .s-menu-title,
.mm-navbar,
.mm-navbar__title,
.offcanvas-header,
.s-drawer-header {
  background-color: #ffffff !important;
  color: #1a2b52 !important;
}

/* أيقونات السهم (الأسهم اللي جنب "الطباعة والتخصيص" مثلاً) */
.s-menu svg,
.mm-menu svg,
.mm-listitem svg,
.s-drawer svg {
  fill: #1a2b52 !important;
}