/* Add custom CSS styles below */ 
/*
================================================
   DEVELOPER: Abdullah (0507339742)
   STORE COLOR: #0f2a47
================================================
 /*رفع الشعار قليلا  */
.logo-normal, 
img[alt*="Logo"] {
    margin-top: -20px !important; /* عدل هذه القيمة  (e.g., -5px or -15px) لرفعه اكثر */
    position: relative;
    z-index: 10;

} 
} 


/* --- 1. إعدادات أيقونة المستخدم الأساسية --- */
/* إخفاء الصورة الرمزية الافتراضية (الأفاتار) لاستبدالها بالأيقونة */
.s-user-menu-trigger-avatar {
    display: none !important;


}
/* غطي صورة الشعار القديمة  */
.s-user-menu-avatar-wrap img {
    display: none !important;
}

/* ضبط الحاوية المحيطة بالأيقونة لجعلها شفافة وبدون حدود */
.s-user-menu-avatar-wrap {
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex !important; /* لضمان ظهور النقطة الخضراء بشكل صحيح */
    align-items: center;
    justify-content: center;
    position: relative !important;
    overflow: visible !important; /* للسماح للنقطة الخضراء بالخروج عن حدود الأيقونة */
}

/* --- 2. حالة "تسجيل الخروج" (الزائر) --- */
/* اختيار شكل الأيقونة، حجمها، ولونها الأساسي */
.sicon-user:before, 
.s-user-menu-avatar-wrap:before {
    content: "\f078"; /* رمز أيقونة المستخدم من مكتبة سلة */
    font-size: 25px;
    color: #0f2a47; /* لون المتجر الأساسي */
    font-family: 'sallaicons' !important;
    transition: all 0.3s ease;
}

/* --- 3. حالة "تسجيل الدخول" (عبدالله) --- */
/* إضافة النقطة الخضراء الوامضة أسفل الأيقونة */
salla-user-menu.hydrated .s-user-menu-avatar-wrap::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 11px !important; /* حجم النقطة */
    height: 11px !important;
    background-color: #2ecc71 !important; /* اللون الأخضر */
    border-radius: 50% !important;
    border: 1.5px solid #fff !important; /* إطار أبيض للنقطة */
    z-index: 99 !important;
    
    /* تحريك النقطة للأسفل ولليمين (6px لليمين، 5px للأسفل) */
    transform: translate(6px, 5px) !important; 
    
  /*  animation: simpleBlink 1s infinite !important; /* تفعيل حركة الوميض */
}
/* تعريف حركة الوميض للنقطة الخضراء */
/*@keyframes simpleBlink {
    50% { opacity: 0; }
}

/* إضافة خلفية دائرية خفيفة خلف الأيقونة عند تسجيل الدخول لتمييزها */
salla-user-menu.hydrated .s-user-menu-avatar-wrap:after {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    background-color: rgba(15, 42, 71, 0.1); /* لون المتجر بوزن شفاف 10% */
    border-radius: 50%;
    z-index: -1;
}

/* تكبير الأيقونة قليلاً عند تسجيل الدخول */
salla-user-menu.hydrated .s-user-menu-avatar-wrap:before {
    transform: scale(1.05);
    color: #0f2a47 !important;
    font-weight: 900 !important; /* جعل الأيقونة أعرض (Bold) */
}

/* إزالة الإطار وإضافة لمسة ذكية للزر عرض الكل */
.btn--outline-primary.group {
    border: none !important; /* إزالة الإطار نهائياً */
border-radius: 8px !important; /* تجعل الحواف دائرية بالكامل (Smart Pill Shape) */   
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* إزالة الإطار طرق الدفع */
.s-payments-list-item, .s-payments-list-item img {
    background: none !important;
    border: none !important;
}

/*  تغيير الافاتار للعملاء*/
img[src*="avatar_female"], 
img[src*="avatar_male"],
.s-comments-item-avatar-img,
.testimonials-slider img.lazy {
  object-position: -9999px !important; /* إخفي الافاتار القديم*/
  background-color: #0f2a47 !important;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a1a1a1'><path d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 65% !important;
  border: 1px solid #ececec !important;
}





@media (max-width: 767px) {
    /* تحويل الحاوية إلى نظام Flexbox بدلاً من Grid */
    .s-products-list-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important; /* توسيط العناصر في الصف الأخير */
        gap: 10px !important; /* المسافة بين المنتجات */
    }

    /* ضبط عرض كرت المنتج ليناسب ظهور اثنين في كل صف */
    .s-products-list-wrapper custom-salla-product-card {
        flex: 0 0 calc(50% - 10px) !important; /* عرض المنتج 50% مع خصم المسافات */
        max-width: calc(50% - 10px) !important;
    }
}