/* Add custom CSS styles below */ 
/* 1. تنسيق الإطار العام للبطاقة */
custom-salla-product-card {
    /* تطبيق تصميم عصري: خلفية بيضاء، زوايا دائرية، انتقال سلس */
    display: block;
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden; /* لضمان عدم خروج أي عناصر عن الزوايا الدائرية */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* ظل ناعم خفيف */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* مساحة داخلية للبطاقة */
    padding: 15px; 
}

/* 2. تأثير التحويم الجذاب (Hover Effect) */
custom-salla-product-card:hover {
    /* رفع البطاقة قليلاً لتعطي شعوراً بالتفاعل 
      (تأثير ثلاثي الأبعاد جذاب) */
    transform: translateY(-0.5px); 
    /* ظل أعمق قليلًا عند التحويم */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
}

/* 3. تنسيق صورة المنتج (Product Image) */
.s-product-card-image {
    /* جعل الصورة تأخذ شكل مربع داخل البطاقة */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.s-product-card-image img {
    /* إضافة انتقال سلس عند التحويم لتأثير Zoom */
    transition: transform 0.4s ease-out;
}

/* 4. تأثير تكبير الصورة عند التحويم */
custom-salla-product-card:hover .s-product-card-image img {
    transform: scale(1.1); /* تكبير الصورة 5% بشكل سلس */
}

/* 5. تنسيق المحتوى (العنوان والسعر) */
.s-product-card-content-title a {
    /* لون نص داكن وأنيق ووزن خط متوسط */
    color: #333;
    font-weight: 600;
    line-height: 1.4;
    font-size: 16px;
}

/* 6. تنسيق السعر */
.s-product-card-price {
    color: #00673f; /* استخدم اللون الأساسي للمتجر */
    font-size: 18px;
    font-weight: 700;
    margin-top: 5px;
}



/*-------- الفوتر --------*/
.store-footer__inner {
    /* تحديد ارتفاع حاوية الهيدر */
    min-height: 400px; /* يمكنك تغيير القيمة إلى الارتفاع المطلوب */

    /* أو يمكنك استخدام height إذا كنت تريد ارتفاعًا ثابتًا */
    /* height: 400px; */
}

.store-footer__inner {
  /* 1. تطبيق الخلفية المتدرجة الشفافة من الأعلى إلى الأسفل فوق الصورة */
  background-image: 
    linear-gradient(
      to bottom, /* الاتجاه: من الأعلى إلى الأسفل */
      rgba(18, 109, 18, 0.9), /* اللون العلوي (بداية التدرج) - شفافية 40% */
      rgba(10, 74, 10, 2.8)  /* اللون السفلي (نهاية التدرج) - شفافية 80% */
    ),
    url('https://e.top4top.io/p_3603dif561.jpg'); /* الصورة في الخلفية */

  /* 2. خصائص الصورة (نفسها للحفاظ على التغطية) */
  background-size: cover;     /* تغطية كاملة للمساحة */
  background-position: center; /* توسيط الصورة */
  background-repeat: no-repeat; /* عدم تكرار الصورة */

  /* 3. تحديد لون النص ليكون مرئياً على الخلفية الغامقة */
  color: #E0FFE0; 
  
  /* 4. تعديل لون الروابط داخل التذييل أيضاً */
  .store-footer__inner a {
    color: #C0FFC0;
  }

  /* 5. استهداف عناوين الأقسام داخل التذييل */
  .store-footer__inner h3 {
    color: #FFFFFF;
  }

  /* 6. استهداف أيقونات التواصل الاجتماعي وتلوينها */
  .store-footer__inner .s-social-icon svg,
  .store-footer__inner .s-contacts-icon svg {
    fill: #C0FFC0; 
  }
}

/*------ فوتر سفلي ----------*/

.footer-is-light .store-footer {
    background-color: #02311f;
}
.copyright-text p {
    --tw-text-opacity: 1;
    color: rgb(255 255 255);
}


/*-------- لون خلفية خيارات المنتج متعدد  ------*/
salla-product-options {
  background-color: #f3f4f6 !important; /* يمكنك استخدام لون سداسي مثل #008000 */
}

/*-------- لون اهدي من تحب  ------*/

.s-list-tile-item {
    background-color: rgb(239 241 243);
}

/*--------- تغيير ايقونة السلة ----------------*/ 

/* إخفاء أيقونة السلة البديلة/المستخدمة في الـ slot */

salla-cart-summary [slot="icon"] {

  display: none !important;

}

/* إضافة أيقونة سلة جديدة (رمز يونيكود) */

salla-cart-summary .s-cart-summary-wrapper::before {

  content: "🛍️"; 

  font-size: 24px;

  /* مسافة لليمين في حال كانت القائمة باللغة العربية */

  margin-left: 5px; 

  /* لضمان محاذاة النص والأيقونة الجديدة */

  display: inline-block;

  vertical-align: middle;

}

/*------------ ايقونة وضع الزائر (تسجيل الخروج) ---------*/

/* 1. إخفاء الأيقونة الافتراضية (user-circle) */
.header-btn .sicon-user-circle {
  display: none !important;
}

/* 2. استبدال الأيقونة بالصورة الجديدة */
.header-btn[aria-label="user-icon"]::before {
  content: ""; /* يجب تصفير المحتوى لاستخدام الصورة كخلفية */
  display: inline-block; 
  vertical-align: middle;
  
  /* ** خصائص الصورة الجديدة ** */
  background-image: url('https://a.top4top.io/p_3606jkepw1.png'); /* رابط الصورة الجديدة */
  background-size: contain; /* لضمان ظهور الصورة بالكامل دون قص */
  background-repeat: no-repeat;
  background-position: center;

  /* ** تحديد أبعاد الصورة الجديدة ** */
  width: 28px; /* قيمة تقديرية، يمكنك تعديلها */
  height: 28px; /* قيمة تقديرية، يمكنك تعديلها */
  
  /* إزاحة بسيطة إذا لزم الأمر */
  margin-left: 5px; 
}
/*--------------- ايقونة العضوية بصورة جديدة ------------*/
/* 1. إخفاء وسم الصورة الأصلي (Avatar Image) */
salla-user-menu .s-user-menu-trigger-avatar {
  display: none !important;
}

/* 2. استهداف العنصر الأب واستبدال الأيقونة بالصورة الجديدة */
salla-user-menu .s-user-menu-avatar-wrap::before {
  content: ""; /* يجب تصفير المحتوى ليعمل العرض كخلفية */
  display: block; /* لجعل العنصر يأخذ أبعاده بشكل صحيح */
  
  /* ** خصائص الصورة الجديدة ** */
  background-image: url('https://k.top4top.io/p_3606f43zj1.png'); /* رابط الصورة الجديدة */
  background-size: cover; /* لتغطية المساحة المحددة دون تشوه كبير */
  background-repeat: no-repeat;
  background-position: center;

  /* ** تحديد أبعاد الصورة الجديدة ** */
  width: 40px; /* الحفاظ على نفس الأبعاد الأصلية للأفاتار */
  height: 40px;
  
  /* الحفاظ على الشكل الدائري */
  border-radius: 50%; 
  
  /* مسح أي خصائص تنسيق سابقة (لون الخلفية، لون الخط، حجم الخط) */
  background-color: transparent !important; 
  color: transparent !important; 
  font-size: 0 !important; 
}

/* 3. إخفاء أيقونة السهم لأسفل (لإبقاء الأيقونة الدائرية فقط) */
salla-user-menu .s-user-menu-trigger-icon {
  display: none !important;
}