/* Add custom CSS styles below */


/* رأس الصفحة */

/* البحث */


/* خلفية نتائج البحث */
.s-search-product {
    background-color: #FFF; /* اللون والشفافية الافتراضية */
    backdrop-filter: blur(8px); /* تأثير الضبابية */
    -webkit-backdrop-filter: blur(10px); /* دعم لمتصفح Safari */
    order: 1; /* ترتيب افتراضي للمنتجات المتاحة */
}

/* تأثير أسود زجاجي عند مرور الماوس على المنتجات */
.s-search-product:hover {
    background-color: rgba(0, 0, 0, 0.05); /* لون أسود زجاجي مع شفافية */
        -webkit-backdrop-filter: blur(10px); /* دعم لمتصفح Safari */
}

/* لون اسم المنتج */
.s-search-product-title {
    color: #348498;
}

/* لون سعر المنتج في البحث */
.s-search-product-price {
    color: #F7AC2E;
}

/* تلوين خلفية محرك البحث  */
.top-navbar {
    background-color: #004D61!important; /* لون الخلفية */
    color: #FFF !important; /* لون النص */
}
/* اخفاء الايميل بجانب محرك البحث */ 
.s-contacts.s-contacts-header.hydrated {
    display: none !important; /* إخفاء العنصر بالكامل */
}


/* الإعلان */
.flex-1.font-bold.text-center.text-sm {
    animation: slideRight 15s infinite linear; /* اسم الرسم المتحركة ومدتها وتكرارها ونمط الحركة */
}

@keyframes slideRight {
    0% {
        transform: translateX(-80%); /* بداية الحركة خارج الجهة اليسرى */
    }
    100% {
        transform: translateX(80%); /* نهاية الحركة إلى اليمين */
    }
}


/* 004D61  لون السجل الذكي غامق */ 


/* شريط الصفحة الرئيسية */


/* خلفية الشريط */
.inner.bg-inherit {
    background-color: #FFF; /* لون خلفية الشريط */
    background-size: cover; /* يُغطي الصورة الخلفية بالكامل داخل العنصر */
    background-position: center; /* يوسط الصورة الخلفية داخل العنصر */
}



/* تغيير لون أيقونة الجانبية للجوال */
.sicon-menu::before {
    color: #348498 ; /* تغيير لون الأيقونة إلى الأبيض */
}




/* قائمة التصنيفات في الشريط العلوي */
.inner {
    color: #348498 ; /* لون النص */
}


/* تصنيف التخفيضات */ 

.offers-link, 
.offers-link span {
    color: #FF6B69; /* اللون الأحمر للتخفيضات */
    text-decoration: none; /* إزالة الخط السفلي من الرابط */
    font-weight: bold; /* جعل النص عريضًا */
    transition: color 0.3s ease; /* تأثير التحول على اللون */
}

/* عند تمرير الماوس فوق الرابط */
.offers-link:hover,
.offers-link span:hover {
    color: #F6AC2D; /* تغيير اللون عند التحريك إلى اللون الأصفر */
}


/* أيقونة الأمنيات الدائرية */
.wishlist-icon {
    background-color: transparent; /* خلفية شفافة */
    border: 0.1px solid #348498; /* حدود */
    border-radius: 50%; /* لجعل الأيقونة دائرية */
    width: 39px; /* عرض الأيقونة */
    height: 39px; /* ارتفاع الأيقونة */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 20px; /* مساحة بين الأيقونة وأيقونة السلة */
    transition: all 0.3s ease; /* تأثيرات الحركة */
}

/* عند مرور الماوس فوق الأيقونة */
.wishlist-icon:hover {
    background-color: #348498 ; /* خلفية */
    color: #FFFFFF; /* لون الأيقونة أبيض */
    transform: scale(1.1); /* تكبير الأيقونة قليلاً */
}

/* تنسيق أيقونة القلب */
.wishlist-icon .sicon-heart {
    font-size: 15px; /* حجم أيقونة القلب */
    line-height: -10; /* لضبط الارتفاع الداخلي للأيقونة */
    color: #348498; /* لون القلب أسود في البداية */
    transition: color 0.3s ease; /* تأثير التحول للون الأيقونة */
}

/* عند مرور الماوس فوق القلب */
.wishlist-icon:hover .sicon-heart {
    color: #FFF; /* لون القلب يصبح أبيض عند التفاعل */
}

/* إخفاء الأيقونة في الشاشات الصغيرة */
@media only screen and (max-width: 768px) {
    .wishlist-icon {
        display: none;
    }
}


/* سلة الشراء */
/* شكل أيقونة السلة قبل مرور الماوس */ 
.s-cart-summary-icon {
    background-color: transparent; /* خلفية شفافة */
    border: 0.1px solid #348498; /* حدود سوداء */
    border-radius: 50%; /* لجعل الأيقونة دائرية */
    width: 38px; /* عرض الأيقونة */
    height: 38px; /* ارتفاع الأيقونة */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 20px; /* مساحة بين الأيقونة وأيقونة السلة */
    transition: all 0.3s ease; /* تأثيرات الحركة */
}
    
    
.header-btn__icon.icon.sicon-shopping-bag {
    color: #348498 !important; /* تغيير لون الأيقونة إلى الأبيض */
    font-size: 17px; /* حجم أيقونة السلة*/
    border: 0.5px solid #348498;
}

/* التأثير عند مرور الماوس فوق الحقيبة */
.header-btn__icon.icon.sicon-shopping-bag:hover {
    background-color: #348498 ; /* خلفية */
    transform: scale(1.1); /* تكبير الأيقونة قليلاً */
    transition: all 0.3s ease; /* تأثير الحركة */
}

/* تغيير لون أيقونة الحقيبة إذا كانت Font Icon */
.header-btn__icon.icon.sicon-shopping-bag:hover:before {
    color: #FFFFFF; /* تغيير لون أيقونة الحقيبة إلى الأبيض */
}




/* لون كتابة سعر السلة */
.s-cart-summary-total {
     
    background-color: transparent; /* لون الخلفية */
    color: #F7AC2E; /* لون الأيقونة */

}


/* اظهار الأيقونة الشخصية وكلمة الترحيب والاسم */
/* الشكل قبل تسجيل الدخول */
.header-btn {
    background-color: transparent; /* خلفية شفافة */
    border: 0.5px solid #348498; /* حدود */
    border-radius: 50%; /* لجعل الأيقونة دائرية */
    width: 39px; /* عرض الأيقونة */
    height: 39px; /* ارتفاع الأيقونة */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease; /* تأثيرات الحركة */
}

/* لتغيير لون أيقونة المستخدم */
.header-btn__icon.sicon-user-circle::before {
    color: #348498; /* اللون الأساسي للأيقونة */
    font-size: 16px; /* حجم أيقونة المستخدم */
    transition: color 0.3s ease; /* تأثير الحركة للون */
}

/* لتأثير hover (عند مرور الماوس فوق الأيقونة) */
.header-btn:hover {
    background-color: #348498; /* تمتلئ الدائرة باللون */
    color: #FFFFFF; /* لون الأيقونة يصبح أبيض */
    transform: scale(1.1); /* تكبير الأيقونة قليلاً */
    border: 0.1px solid #348498; /* نفس لون الحدود */
}

/* تغيير لون الأيقونة إلى الأبيض عند مرور الماوس */
.header-btn:hover .header-btn__icon.sicon-user-circle::before {
    color: #FFFFFF; /* يصبح لون الأيقونة أبيض */
}




salla-user-menu[avatar-only] .s-user-menu-trigger-content {
    display: block !important; /* عرض محتوى الترحيب والاسم */
    visibility: visible !important; /* التأكد من أن المحتوى مرئي */
}

/* التأكد من أن السهم يظهر بشكل صحيح */
salla-user-menu[avatar-only] .s-user-menu-trigger-icon {
    display: inline-block !important; /* عرض السهم */
    fill: #348498 !important; /* لون السهم (يمكن تغييره) */
    margin-right: 10px; /* إضافة مسافة بين السهم والنص */
}

/* تخصيص العناصر الداخلية */
.s-user-menu-trigger-content span,
.s-user-menu-trigger-content p {
    color: #000 !important; /* لون النص الأبيض */
}

/* إخفاء الاسم والترحيب والسهم في نسخة الجوال */
@media (max-width: 767px) {
    salla-user-menu[avatar-only] .s-user-menu-trigger-content,
    salla-user-menu[avatar-only] .s-user-menu-trigger-icon {
        display: none !important; /* إخفاء الاسم والترحيب والسهم */
    }
}
/* إزالة الخلفية البيضاء حول صورة الحساب */
.s-user-menu-trigger {
    background-color: transparent !important; /* اجعل الخلفية شفافة */
}


/* تلوين النص مرحباً بك */
.s-user-menu-trigger-content .s-user-menu-trigger-hello {
    color: #F6AC2D!important; /* اللون الأصفر الفاتح */
}

/* تلوين النص اسم المشتري  */
.s-user-menu-trigger-content .s-user-menu-trigger-name {
    color: #348498 !important; /* اللون الأبيض */
}
.main-nav-container {
    color: #FFF; /* لون النص */
}

/* لون أيقونة القائمة الرئيسية للجوال */
.sicon-menu {
    color: #FFFFFF; /* تعيين لون الأيقونة إلى الأبيض */
}

/* أيقونة تسجيل الملف الشخصي */
.sicon-user-circle {
    background-color: transparent; /* لون الخلفية */
    color: #FFFFFF; /* لون النص */
}


/* أيقونة سلة الشراء للهيدر */
.sicon-shopping-bag {
    background-color: transparent; /* لون الخلفية */
    color: #FFFFFF; /* لون الأيقونة */
}

/* أيقونة سعر المشتريات */
.s-cart-summary-total {
    background-color: transparent; /* لون الخلفية */
    color: #F7AC2E; /* لون الأيقونة */
}

/* عناصر القائمة الرئيسية للجوال */
.mobile-menu.mm-spn.mm-spn--light.mm-spn--navbar.mm-spn--main {
    background-color: #ECECEC;
    color: #120022;
}

/* كود تغيير لون خلفية المتجر*/
body {
    background-color: #ededed; /* لون خلفية الصفحة */
}

/* المنتجات */
/* اسم المنتج */
.s-product-card-content-title {
    color: black; /* لون النص الافتراضي */
    transition: color 0.3s ease; /* تأثير التحول على لون النص */
}

.s-product-card-content-title:hover {
    color: #ff6b69; /* لون النص بعد تمرير الماوس */
}

/* نص إضافة للسلة للمنتجات */
.s-button-element {
    background-color: #348498; /* لون الخلفية قبل تمرير الماوس */
    color: #fff; /* لون النص قبل تمرير الماوس */
    border: 2px solid #348498; /* لون الحدود قبل تمرير الماوس */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* تأثير التحويل */
}

.s-button-element:hover {
    background-color: #348498; /* لون الخلفية بعد تمرير الماوس */
    color: white; /* لون النص بعد تمرير الماوس */
    border-color: #348498; /* لون الحدود بعد تمرير الماوس */
}

.s-button-element .sicon-shopping-bag {
    transition: color 0.3s ease; /* تأثير التحويل للأيقونة فقط */
}

.s-button-element:hover .sicon-shopping-bag {
    color: white; /* لون النص بعد تمرير الماوس */
}

/* لون النص الرمادي */
.text-gray-400 {
    color: #000000;
}





/* التصنيفات */
.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr); /* عمودين للجوال */
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(5, 1fr); /* أربعة أعمدة للكمبيوتر */
  }
}

.grid .category-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  padding-top: 50%; /* لضمان أن العنصر يأخذ شكل مربع */
  position: relative;
  background-color: transparent;
}

.grid .category-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* يحافظ على نسبة الصورة دون تشويه */
}




.banner-entry {
    width: 100%; /* تقليل عرض البنر بنسبة معينة */
    margin: 0 auto; /* توسيط البنر */
    background-color: transparent; /* جعل الخلفية شفافة */
}




/* واتساب */
*.whatsapp-icon {
    position: fixed;
    bottom: 375px;
    right: 0px;
    z-index: 1000;
    background-color: rgba(37, 211, 102, 1);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    padding: 4px 4px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* ترتيب عمودي للعناصر */
    align-items: center; /* توسيط الأيقونة والنص */
    justify-content: center;
    padding-top: 5px; /* رفع الأيقونة قليلاً */
    height: 65px; /* تعيين ارتفاع معين للمستطيل */
    width: 80px;
}

/* تأثير hover لتخفيف اللون - يظهر فقط على الشاشات الكبيرة */
@media (min-width: 769px) {
    .whatsapp-icon:hover {
        background-color: rgba(37, 211, 102, 0.8); /* تخفيف اللون قليلاً */
    }
}

.whatsapp-icon img {
    width: 30px; /* تصغير الأيقونة */
    height: 30px;
    position: relative;
    z-index: 2;
    margin-down: 0px;
}

/* إضافة النص "تواصل معنا" */
.whatsapp-icon:after {
    content: "تواصل معنا";
    font-size: 14px;
    color: white;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
    display: block;
     text-shadow: 1px 1px 2px rgba(0, 100, 0, 0.5); /* إضافة ظل أسود خفيف */
}

/* النافذة المنبثقة */
.whatsapp-popup {
    position: fixed;
    bottom: 225px;
    right: 10px;
    width: 300px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 1001;
}

.whatsapp-popup .whatsapp-header {
    background-color: #25D366;
    color: white;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.whatsapp-popup .whatsapp-body {
    padding: 15px;
    font-size: 14px;
    color: #333;
}

.whatsapp-popup .whatsapp-footer {
    text-align: center;
    padding: 10px;
    background-color: #f1f1f1;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.whatsapp-popup .whatsapp-footer a {
    text-decoration: none;
    color: #25D366;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whatsapp-popup .whatsapp-footer img {
    margin-left: 8px;
    width: 20px;
    height: 20px;
}

.close-btn {
    cursor: pointer;
    font-size: 20px;
    color: white;
}





/* صفحة الأمنيات*/ 
.profile-header gradient-bg {
    background-color: transparent; /* لون الخلفية */
    color: #FFFFFF; /* لون النص */
}