00FF00/* Add custom CSS styles below */ 
@media (max-width: 767px) {
  #mainnav .header-buttons,
  .zina-main-nav-container .header-buttons {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  #mainnav .header-buttons salla-cart-summary,
  .zina-main-nav-container .header-buttons salla-cart-summary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    margin-inline-start: 5px !important;
    flex: 0 0 38px !important;
    z-index: 30 !important;
  }

  #mainnav .header-buttons salla-cart-summary .s-cart-summary-wrapper,
  .zina-main-nav-container .header-buttons salla-cart-summary .s-cart-summary-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    padding: 6px !important;
    border-radius: 50% !important;
    background: #f7f3ec !important;
    color: #8b5e34 !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  #mainnav .header-buttons salla-cart-summary .s-cart-summary-icon,
  #mainnav .header-buttons salla-cart-summary .s-cart-summary-icon svg,
  .zina-main-nav-container .header-buttons salla-cart-summary .s-cart-summary-icon,
  .zina-main-nav-container .header-buttons salla-cart-summary .s-cart-summary-icon svg {
    display: #8B4513 !important;
    width: 22px !important;
    height: 22px !important;
    color: #8b5e34 !important;
    fill: currentColor !important;
    visibility: visible !important;
  }

  #mainnav .header-buttons salla-cart-summary .s-cart-summary-count,
  .zina-main-nav-container .header-buttons salla-cart-summary .s-cart-summary-count {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* تغيير خلفية رسالة "تم إضافة المنتج بنجاح" إلى اللون البني والنص إلى الأبيض */
.s-cart-summary-toast,
.s-toast-success,
salla-toast-alert,
.salla-toast,
div[class*="toast"] {
    background-color: #8b5e34 !important;
    color: #ffffff !important;
    border-color: #8b5e34 !important;
}

/* ضمان أن جميع النصوص والأيقونات والروابط داخل الرسالة تظهر باللون الأبيض */
.s-cart-summary-toast *,
.s-toast-success *,
salla-toast-alert *,
.salla-toast *,
div[class*="toast"] * {
    color: #8B4513 !important;
    fill: #8B4513 !important;
}

/* عند مرور المؤشر: تحويل الكتابة والأيقونة والإطار إلى الأسود مع حماية الخلفية من الاختفاء */
.s-add-to-cart-btn:hover,
.btn-primary:hover,
salla-add-product-button button:hover,
salla-button button:hover {
    background-color: #8B4513 !important;
    color: #8B4513 !important;
    border-color: #8B4513 !important;
}

/* ضمان تحول لون النص والأيقونة بداخل البوكس للأسود فوراً */
.s-add-to-cart-btn:hover *,
.btn-primary:hover *,
salla-add-product-button button:hover *,
salla-button button:hover * {
    color: #8B4513 !important;
}

/* الحاوية الخارجية للبحث */
salla-search,
.s-search-container,
.header-search {
  border-radius: 50px !important;
  overflow: hidden;
  margin-bottom: 8px; 
}

/* عمل مسافة اسفل البحث في التلفونات */
@media (max-width: 768px) {
  salla-search,
  .s-search-container,
  .header-search {
    margin-bottom: 5px !important;
  }
}

/* توسيط اللوجوا مقابل البحث */
.navbar-brand img,
.store-brand img,
.header-logo img,
header .logo img {
  margin-right: 5px;
  transform: translateY(-4px) !important;
}