/* Add custom CSS styles below */ 
.custom-header-wrapper {
  text-align: center;
  padding: 20px 0 10px 0;
  direction: rtl;
}

.custom-header-title {
  font-size: 30px;
  font-weight: 700;
  color: #3a2613 !important;
  margin-bottom: 6px;
}

.custom-header-sub {
  font-size: 20px;
  color: #7a6e65;
  margin-bottom: 12px;
}

.custom-divider-line {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  margin: 0 auto;
}

.custom-divider-line::before,
.custom-divider-line::after {
  content: "";
  flex: 1;
  border-bottom: 1.5px solid #3a2613;
}

.custom-divider-circle {
  width: 8px;
  height: 8px;
  border: 1.5px solid #3a2613;
  border-radius: 50%;
  margin: 0 6px;
  background-color: transparent;
}

/* 1. تطبيق الضبابية وتحديد لون الخلفية للهيدر (جوال وكمبيوتر) */
header,  
.site-header,  
.main-header,
.s-header,
.s-header-mobile,
.s-header--sticky,
.header-wrapper,
.s-header-mobile-wrapper {
  background-color: rgba(31, 20, 10, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
}

/* 2. إلغاء الخلفيات البيضاء عن الأقسام الداخلية */
header *,
.s-header *,
.s-header-mobile * {
  background-color: transparent !important;
}

/* 3. لون النصوص والأيقونات للكمبيوتر (أبيض) */
header a,
header span,
header p,
header i,
header svg,
.s-header *,
.s-header-mobile * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* 4. تثبيت الهيدر وترتيبه */
header,  
.s-header,  
.site-header {
  position: relative !important;
  top: 0 !important;
  z-index: 100 !important;
}

.s-header-announcement-bar,
.announcement-bar,
[class*="announcement"] {
  position: relative !important;
  top: 0 !important;
  z-index: 99 !important;
  width: 100% !important;
}

.s-header-wrapper,
header {
  display: flex !important;
  flex-direction: column-reverse !important;
}

/* 5. تخصيص الجوال فقط: خلفية فاتحة للقائمة + خطوط بالدرجة البنية المطلوبة */
@media (max-width: 768px) { 
    .header-content,
    .mobile-menu,  
    .mm-menu,
    .mm-panels,
    .mm-panel,
    .header-categories,
    .nav-drawer,
    div[class*="header"],
    div[class*="menu"] {
        background-color: #fcfbfa !important;
    }

    header *,  
    .site-header *,  
    .mobile-menu *,  
    .mm-menu *,
    .mm-panel *,
    .header-categories *,
    .nav-drawer *,
    header a,  
    .site-header a,  
    .mobile-menu a,  
    .header-categories a,
    .nav-drawer a,
    span, a, p, li, strong {
        color: #120b06 !important;
        fill: #120b06 !important;
        stroke: #120b06 !important;
    }
}
)
)
@media (max-width: 768px) {
  /* تغيير خلفية القائمة المحددة إلى لون البراند */
  .s-menu-footer-list {
    background-color: #120b06 !important;
    background: #120b06 !important;
  }
}
}
}
}
@media (max-width: 768px) {
  /* تعديل لون الخط للروابط والعناصر داخل قائمة الروابط */
  .s-menu-footer-list,
  .s-menu-footer-list a,
  .s-menu-footer-list span,
  .s-menu-footer-list li {
    color: #ffffff !important;
  }

  /* تعديل لون نصوص وأيقونات قائمة تواصل معنا */
  salla-menu[source="footer"] a,
  salla-menu[source="footer"] span,
  .store-footer-apps a,
  .store-footer-apps span,
  footer [aria-label="footer"] a,
  footer [aria-label="footer"] span {
    color: #ffffff !important;
  }

  /* تعديل ألوان الأيقونات والحدود في الفوتر */
  footer svg,
  footer i {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    border-color: #ffffff !important;
  }
}