/* Add custom CSS styles below */

/* تعريف متغيرات الألوان الجديدة في الروت */
:root {
  --my-store-blue: #38a3f5;
  --my-red: #dc2626;
  --my-red2: #ef4444;
  --my-black: #2b2d34;
  --my-blue: #0481fd;
  --my-blue2: #206ba2;
  --my-border-red: #dc262660;
  --my-border-black: #2b2d3460;
  --my-border-selver: #c0c0c066;
  --my-border-blue: #38a3f560;
  --my-border-yallow: #fbc531;
  --my-dark-blue: #004d73;
  --my-dark-black: #212324;
}

.sicon-filter {
  color: var(--my-red)
}

/* إظهار نصف العنصر الأخير في سلايدر الأقسام على الجوال */
@media (max-width: 767px) {
    /* استهداف الحاوية الأب للسلايدر لضمان السماح بظهور العناصر الخارجة عن الإطار */
    .swiper-slide.text-center.group:has(a[href*="/c"]) {
        width: 25.5% !important; /* هذا الوزن الدقيق يضمن طباعة 3 عناصر كاملة ونصف عنصر بالطرف */
        margin-left: 8px !important; /* مسافة تباعد داخلية آمنة أفقياً */
        margin-right: 8px !important;
    }
    
    /* تأمين التفاف السلايدر ومنع قص الأيقونات بشكل مشوه */
    .swiper-slide.text-center.group:has(a[href*="/c"]) a {
        width: 100% !important;
        overflow: visible !important;
    }
}

/* إظهار كرت ونصف فقط في سلايدر المنتجات على الجوال */
@media (max-width: 767px) {
    /* تعديل عرض بطاقة المنتج لتستوعب كرت ونصف الكرت المجاور */
    .swiper-wrapper.s-slider-swiper-wrapper .s-products-slider-card.swiper-slide {
        width: 65% !important; /* هذا الوزن الرياضي يضمن ظهور كرت كامل بنسبة 100% ونصف كرت بالطرف */
        margin-left: 8px !important; /* تباعد أفقي متناسق بين البطاقات */
        margin-right: 8px !important;
    }
    
    /* تأمين مرونة الحاوية الداخلية للبطاقات لمنع التمدد المشوه */
    .s-products-slider-card.swiper-slide custom-salla-product-card {
        width: 100% !important;
        overflow: visible !important;
    }
}

/***************/
/*االغاء زر تقييمات المنتج وتقليص المسافة*/
.s-block--tabs-produtcs .tab-trigger.is-active button {
    display: none;
}
.s-blocks-wrapper:not(:first-of-type) {
    margin-top: 0 !important;
}
.s-block--tabs-produtcs .tabs{margin-bottom: 1rem}
/*نهاية الغاء زر تقييمات المنتج وتقليص المسافة*/

/* استهداف حاوية وصورة الماركة التجارية لمنتج واحد */
.product-single__info .product-brand.w-12 {
width: 4rem !important;}

/***************/
/*بداية تعديل الأوسمة*/
/***************/

/* تحويل حاوية تفاصيل المنتج إلى Flexbox لنقل صندوق الوسوم */
.product-single__info {
    display: flex !important;
    flex-direction: column !important;
}

/* استهداف صندوق الوسوم (Tags) ونقله إلى القاع مع إضافة خط فاصل متميز */
.product-single__info > div:has(> [data-selia="product-tag"]),
.product-single__info .mb-3:has([data-selia="product-tag"]) {
    order: 15 !important; /* نزول الصندوق أسفل كافة الخيارات وأزرار الشراء */
    margin-top: 10px !important; /* مسافة علوية كافية قبل الخط الفاصل */
    margin-bottom: 15px !important;
    padding-top: 10px !important; /* مسافة داخلية بين الخط والكلمات */
    border-top: 2px solid rgba(192, 192, 192, 0.3) !important; /* خط فاصل أنيق وواضح */
    
    display: block !important; /* لضمان ظهور العنوان في سطر منفصل أو بداية السطر */
}

/* إضافة عنوان "الأوسمة:" تلقائياً قبل الكلمات الدلالية */
.product-single__info > div:has(> [data-selia="product-tag"])::before,
.product-single__info .mb-3:has([data-selia="product-tag"])::before {
    content: "الكلمات الدلالية:" !important;
    display: block !important; /* جعل العنوان في سطر مستقل فوق الكلمات */
    font-size: 15px !important; /* حجم خط مناسب للعنوان */
    font-weight: bold !important; /* جعل الخط عريضاً ومميزاً */
    color: var(--color-primary-reverse) !important; /* لون العنوان */
    margin-bottom: 4px !important; /* مسافة بين العنوان والكلمات الدلالية */
}
/*نهاية تعديل الأوسمة*/
/***************/


/*هيدر مسار التنقل تهميش الخيارات في الثيم واضافة خط سفلي ولون للخط ولون الخلفية*/
.store-header {
  border-bottom: 4px solid var(--my-border-yallow) !important;
  background-color: #ffffff !important;
  color: #0c0c0c !important;
}

/*تعديل لجهة العنوان الترويجي في جميع الصفحات للغة العربي*/
[dir=rtl] .product-card__promotion {
  left: unset !important;
  box-shadow: -3px 3px 6px rgb(0 0 0 / 55%);
  border-radius: 10px 0 0 10px !important;
  top: 0.50rem !important;
  padding-left: 0.225rem;
  padding-right: 0.225rem;
  padding-top: 0.075rem;
  padding-bottom: 0.275rem;
  font-weight: 500;
}
/*تعديل لجهة العنوان الترويجي في صفحة المنتج*/
html[dir="rtl"] .product-single__slider .promotion-title {
  box-shadow: -3px 3px 6px rgb(0 0 0 / 55%);
  border-radius: 10px 0 0 10px !important;
  top: 0.50rem !important;
  padding: .5rem .75rem .6rem !important;
}

/*تعديل نوع الخط في زر اشتر الان*/
.s-add-product-button-mini-checkout-content {
  font-family: var(--font-main);
  color: var(--color-primary-reverse);
}


/* 1. تبديل شكل أيقونة الزائد (+) إلى أيقونة حقيبة التسوق الخاصة بسلة */
.product-card__enhanced-mini-cart__btn--inner .enhanced-icon.sicon-add:before,
.addToCart__btn .sicon-shopping:before,
.s-add-product-button-main .sicon-shopping:before {
  content: "\ef36" !important;
}

/* 2. تطبيق خاصية التدوير والقلب الأفقي مع تثبيت العرض */
.product-card__enhanced-mini-cart__btn--inner .enhanced-icon.sicon-add {
  display: inline-block !important;
  transform: scaleX(-1) !important;
}

/*اضهار كامل الصوره عند استخدام وضع الصور كغلاف*/
.product-card__image .object-cover {
  -o-object-fit: contain;
  object-fit: contain;
  height: 100%;
  /* 
  -o-object-fit: unset !important;
    object-fit: unset !important;
     width: 100%;
     height: auto;
  /*
    -o-object-fit: cover;
    object-fit: contain;
  */
}

/*الغاء ظهور الصورة تحت العنوان*/
.product-card__image {
  overflow: unset !important;
}

@media (max-width: 767px) {

  .simplified-products .offer-slide .product-card--simplified .product-card__image,
  .simplified-products .s-products-list-wrapper .product-card--simplified .product-card__image,
  .simplified-products .s-products-slider-card .product-card--simplified .product-card__image {
    height: 11.3rem;
  }
}

/*****تنسيق الفوتر******/
/*جعل الشعار في الفوتر دائري بحدود بيضا*/
.img-fluid {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  object-fit: contain;
  border: 2px solid #ffffff;
  box-sizing: border-box;
  background-color: #ffffff;
  justify-content: right !important;
}

.footer-list a {
  line-height: 1rem !important;
  ;
  text-align: right;
  font-size: 15px;
}

.store-footer h3 {
  text-align: right;
  margin-bottom: 0;
  color: #206ba2;
}

/* إضافة الشرطة ايقونة للروابط المهمه في الفوتر*/
.store-links-items li a::before {
  font-family: 'sallaicons' !important;
  content: "\ea63" !important;
  /* ايقونة الروابط المهمه */
  margin-left: 8px !important;
  /*font-size: 8px !important;*/
  /* حجم صغير جداً لتكون كعلامة نقطية */
  display: inline-block !important;
  vertical-align: middle !important;
  color: #206ba2;
  /* لون الشرطة (يمكنك تغييره) */

}

/* التأثير التفاعلي وتغيير الألوان عند تمرير الماوس (Hover) */
.store-links-items li a:hover {
  color: #38bdf8 !important;
  /* يتغير النص والأيقونة للأزرق البحري (يمكنك تعديله) */
  text-decoration: none !important;
}

.store-links-items li a:hover::before {
  margin-left: 12px !important;
  /* تتحرك الأيقونة بسلاسة لتنبيه العميل */
  margin-right: -4px !important;
  /* موازنة الحركة لعدم تشتيت الكلمة */
}


/*تحت صوره الشعار - إلغاء الفراغ الزائد أسفل الوصف في التذييل */
.footer-description.mb-8 {
  margin-bottom: 8px !important;
  /* تقليل الفراغ السفلي من 32px إلى 8px فقط */
  margin-top: 4px !important;
  /* ضبط الفراغ العلوي ليكون متناسقاً */
}

/* تصفير هوامش الفقرات الداخلية إن وجدت لمنع تداخل الأسطر */
.footer-description p {
  margin: 0 !important;
  padding: 0 !important;
  leading-baseline: transparent;
}

.footer-description+p {
  margin-bottom: 10px !important;
}


/*تعديلات بيانات الوثيقة في الفوتر*/
.s-trust-badges-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.s-trust-badges-label {
  font-size: .7rem;
  line-height: 0.25rem;
  margin-bottom: .1rem;
  display: none;
  /*الغائها بدل التصغير*/
}

.s-trust-badges-number {
  font-size: .7rem;
  line-height: 1.25rem;
}

.s-trust-badges-image {
  width: 32px
}

/*اخفاء نص وثيقة العمل الحر*/
[data-selia="footer-apps-section"] {
  display: none !important
}

/*********************/
/* ==================================================================
   1. التنسيق والشاشات الصغيرة (الجوال والتابلت) - القائمة أولاً
   ================================================================== */

/* عمود القائمة (الروابط المهمة) يظهر في المقدمة */
[data-selia="footer-links-column"] {
  order: 1 !important;
}

/* عمود الشعار (اللوقو والوصف) يظهر ثانياً */
[data-selia="footer-brand-column"] {
  order: 2 !important;
  margin-top: 0 !important;
  /* إلغاء السحب العلوي السلبي لتجنب تداخل العناصر */
}

/* عمود التطبيقات والتوثيق يظهر ثالثاً وأخيراً */
[data-selia="footer-apps-section"] {
  order: 3 !important;
}


/* ==================================================================
   2. الشاشات الكبيرة (أجهزة الكمبيوتر واللاب توب) - الشعار أولاً
   ================================================================== */
@media (min-width: 1024px) {
  /* إعادة توجيه الخانات عبر الـ Grid للشاشات الكبيرة */

  /* عمود الشعار يُحجز في الخانة الأولى */
  [data-selia="footer-brand-column"] {
    grid-column: 1 / span 1 !important;
    order: 1 !important;
  }

  /* عمود القائمة يُنقل للخانة الثانية */
  [data-selia="footer-links-column"] {
    grid-column: 2 / span 1 !important;
    order: 2 !important;
  }

  /* عمود التوثيق يُنقل للخانة الثالثة */
  [data-selia="footer-apps-section"] {
    grid-column: 3 / span 1 !important;
    order: 3 !important;
  }
}

/*********************/

/* الشاشات الكبيرة فقط (أجهزة الكمبيوتر واللاب توب) */
@media (min-width: 1024px) {

  /* محاذاة رابط الشعار لليمين */
  [data-selia="footer-logo-link"] {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  /*محاذاة نص النص*/
  [data-selia="footer-brand-column"] p {
    text-align: right !important
  }

  /* محاذاة شارات التوثيق (وثيقة العمل الحر) لليمين */
  .footer-badges {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .s-trust-badges-wrapper {
    display: flex;
    align-items: flex-end;
    flex-direction: row;
  }
}


/* يطبق الكود فقط على شاشات الحاسوب والمكتبية الكبيرة (ويستثني الجوال والتابلت) */
@media (min-width: 1024px) {

  /****الاوان الازرار في الشاشة الكبيره في كرت المنتجات****/
  /******لخيار زر اضف لسلة ثابت في الاصفل واليقونتين على الصورة*****/

  /* استهداف زر الإضافة المخصص من سلة */
  .product-card__normal-cart__btn .s-button-element {
    border: 0;
    background-color: var(--product-enhanced-btn-bg) !important;
    /* لون الخلفية الأزرق */
    color: var(--product-enhanced-btn-color) !important;
    /* تلوين الحدود بنفس اللون الأزرق */
    border-radius: 10px !important;
    /* حواف دائرية انسيابية تناسب التصميم الزجاجي */
    width: 95% !important;
    /* جعل العرض 95% لترك مساحة متساوية على الطرفين */
    margin-left: auto !important;
    /* هوامش تلقائية من اليمين واليسار للتوسيط */
    margin-right: auto !important;
    margin-bottom: 12px !important;
    /* الحفاظ على المساحة من الأسفل */
    /* إضافة الظل الداخلي (تأثير العمق الزجاجي) */
    /* ظل داخلي ينطلق من الركن الأيمن السفلي */
    box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.15) !important;
  }

  /* تأثير عند تمرير الفأرة فوق الزر (Hover) */
  .product-card__normal-cart__btn .s-button-element:hover {
    color: var(--product-enhanced-btn-color) !important;
    box-shadow: inset 8px 8px 8px rgba(0, 0, 0, 0.15) !important;
  }

  /* 3. إضافة الأيقونة الجديدة باستخدام ::before قبل نص الزر */
  .product-card__normal-cart__btn .sicon-shopping:before {
    color: var(--product-enhanced-btn-color) !important;
    content: "\ef36" !important;
    /* رمز الترميز لأيقونة الحقيبة البديلة */
    font-family: "sallaicons" !important;
    /* الاعتماد على خط أيقونات سلة */
  }


  /*******لخيار الازرار الثابته********/
  /*******لخيار الازرار الثابته********/

  /* ترتيب حاوية الأزرار لجعل زر إضافة للسلة في الأول */
  .product-card__buttons {
    display: flex !important;
  }

  /* إعطاء حاوية زر السلة الترتيب الأول */
  .product-card__buttons .addToCart {
    order: -1 !important;
  }

  /* ترتيب باقي الأزرار بالتوالي (المفضلة ثم العرض السريع) */
  .product-card__buttons .wishlist {
    order: 1 !important;
  }

  .product-card__buttons .quickview-btn {
    order: 2 !important;
  }

  /* ظل احترافي وناعم للزر في حالته الطبيعية */
  .product-card__content-wrapper salla-button.s-button-wrap .s-button-element,
  .sticky-product-bar button.s-button-element.s-button-solid {
    box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.15) !important;
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out !important;
  }


  /* زيادة عمق وتوهج الظل عند تمرير الماوس (Hover) للزر المتاح */
  .product-card__content-wrapper salla-button.s-button-wrap:not([disabled]) .s-button-element:hover,
  .sticky-product-bar button.s-button-element.s-button-solid:hover {
    transform: translateY(-1px) !important;
    /* رفعة خفيفة جداً لإبراز مظهر الظل */
    box-shadow: inset 8px 8px 8px rgba(0, 0, 0, 0.15) !important;
  }

  /* ==========================================
     1. الحالة العادية (بدون تمرير المؤشر)
     ========================================== */

  /* تغيير خلفية الأزرار الثلاثة وإطارها الافتراضي */
  .product-card__buttons .wishlist button,
  .product-card__buttons .quickview-btn button,
  .product-card__buttons .addToCart button {
    /*background: var(--product-enhanced-btn-bg) !important;*/
    /* لون الخلفية العادية (أبيض كمثال) */
    border: 0 !important;
    /* لون الإطار العادي */
    background-color: rgba(255, 255, 255, 0.3) !important;
    /* خلفية بيضاء شفافة بنسبة 60% */
    backdrop-filter: blur(1px) !important;
    /* تأثير زجاجي ضبابي للخلفية */
    -webkit-backdrop-filter: blur(1px) !important;
    /* دعم متصفحات آيفون (Safari) */
  }

  /* تغيير لون الأيقونات الافتراضي (القلب، العين، السلة) */
  .product-card__buttons .wishlist button i,
  .product-card__buttons .quickview-btn button i,
  .product-card__buttons .addToCart button i {
    /*color: var(--product-enhanced-btn-color) !important;*/
    /* لون الأيقونة الافتراضي (رمادي داكن/أسود كمثال) */
  }

  /* لون حدود زر الأمنيات */
  .product-card--primary-buttons .product-card__actions .wishlist button,
  .product-card--primary-buttons .product-card__buttons .wishlist button,
  .product-card--primary-buttons .product-card__actions .wishlist button:hover,
  .product-card--primary-buttons .product-card__buttons .wishlist button:hover {
    border: 1px solid rgba(192, 192, 192, 0.4) !important;
    border-color: var(--my-border-red) !important;
  }

  /* لون أيقونة زر الأمنيات */
  .product-card--primary-buttons .product-card__actions .wishlist button i,
  .product-card--primary-buttons .product-card__buttons .wishlist button i,
  .product-card--primary-buttons .product-card__actions .wishlist button:hover i,
  .product-card--primary-buttons .product-card__buttons .wishlist button:hover i {
    color: var(--my-red) !important;
  }


  /* ====== ثانياً: زر المعاينة (تثبيت الحدود والأيقونة في الوضع العادي وعند التمرير) ====== */

  /* لون حدود زر المعاينة */
  .product-card--primary-buttons .product-card__actions .quickview-btn button,
  .product-card--primary-buttons .product-card__buttons .quickview-btn button,
  .product-card--primary-buttons .product-card__actions .quickview-btn button:hover,
  .product-card--primary-buttons .product-card__buttons .quickview-btn button:hover {
    border: 1px solid rgba(192, 192, 192, 0.4) !important;
    border-color: var(--my-border-black) !important;
  }

  /* لون أيقونة زر المعاينة */
  .product-card--primary-buttons .product-card__actions .quickview-btn button i,
  .product-card--primary-buttons .product-card__buttons .quickview-btn button i,
  .product-card--primary-buttons .product-card__actions .quickview-btn button:hover i,
  .product-card--primary-buttons .product-card__buttons .quickview-btn button:hover i {
    color: var(--my-black) !important;
  }


  /* ====== ثالثاً: زر إضافة للسلة (تثبيت الحدود والأيقونة في الوضع العادي وعند التمرير) ====== */

  /* لون حدود زر إضافة للسلة */
  .product-card--primary-buttons:not(.hover_style_1):not(.hover_style_4) .product-card__buttons .addToCart:not(:has(salla-product-availability)) button,
  .product-card--primary-buttons:not(.hover_style_1):not(.hover_style_4) .product-card__buttons .addToCart:not(:has(salla-product-availability)) button:hover {
    border: 1px solid rgba(192, 192, 192, 0.4) !important;
    border-color: var(--my-border-blue) !important;
  }

  /* لون أيقونة زر إضافة للسلة */
  .product-card--primary-buttons:not(.hover_style_1):not(.hover_style_4) .product-card__buttons .addToCart:not(:has(salla-product-availability)) button i,
  .product-card--primary-buttons:not(.hover_style_1):not(.hover_style_4) .product-card__buttons .addToCart:not(:has(salla-product-availability)) button:hover i {
    color: var(--product-enhanced-btn-bg) !important;
  }

  /* ==========================================
     2. الحالة عند تمرير المؤشر (Hover)
     ========================================== */
  /****الزر فوق الصورة*****/
  .product-card__image .product-card__addToCart__btn salla-button:after {
    background-color: var(--product-enhanced-btn-bg) !important;
  }

  /* تغيير خلفية الأزرار الثلاثة وإطارها عند تمرير الماوس */
  .product-card__buttons .wishlist button:hover,
  .product-card__buttons .quickview-btn button:hover,
  .product-card__buttons .addToCart button:hover {
    box-shadow: inset 8px 8px 8px rgba(0, 0, 0, 0.15) !important;
    /* لون الخلفية الجديد عند التمرير */
  }

  /* تغيير لون الأيقونات عند تمرير الماوس عليها */
  .product-card__buttons .wishlist button:hover i,
  .product-card__buttons .quickview-btn button:hover i,
  .product-card__buttons .addToCart button:hover i {
    /*color: var(--product-enhanced-btn-color) !important;*/
    /* لون الأيقونة الجديد عند التمرير (أبيض كمثال) */
  }

  .product-card__buttons .wishlist button:hover i {
    color: var(--my-red) !important;
    /* لون الأيقونة الجديد عند التمرير (أبيض كمثال) */
  }

  .product-card__buttons .quickview-btn button:hover i {
    color: var(--my-black) !important;
    /* لون الأيقونة الجديد عند التمرير (أبيض كمثال) */
  }

  .product-card__buttons .addToCart button:hover i {
    color: var(--product-enhanced-btn-bg) !important;
    /* لون الأيقونة الجديد عند التمرير (أبيض كمثال) */
  }

  /* إزالة الظل تماماً عندما يكون المنتج غير متاح (نفدت الكمية) لتبدو البطاقة مسطحة وغير تفاعلية */
  salla-button[product-status="out"] .s-button-element,
  salla-button.s-button-wrap[disabled] .s-button-element {
    box-shadow: none !important;
    transform: none !important;
  }

  /* تغيير لون كلمة اشتري الآن */
  salla-mini-checkout-widget .s-add-product-button-mini-checkout-content {
    /*color: #cccfff !important;*/
  }

  /* 1. حدود فضية ولون الخط للزر المعطل */
  salla-button[product-status="out"] .s-button-element.s-button-disabled {
    opacity: .5;
    /*شفاف فقط مثل الجوال*/
    /* فضي
      box-shadow: none !important;
        transform: none !important;*/
    /* border: 2px solid #C0C0C0 !important;*/
    /* حدود فضية */
    /* color: #8E8E93 !important;   */
    /* لون الخط */
    /* background-color: transparent !important; */
    /* خلفية شفافة */

  }

  /* 2. تغيير الأيقونة الداخلية للزر المعطل */
  salla-button[product-status="out"] .s-button-element.s-button-disabled .sicon-shopping::before {
    content: "\ef39" !important;
    /* رمز الأيقونة المخصص الخاص بك */
    /*color: #8E8E93 !important;*/
    /* لون الأيقونة الجديد */
    font-family: "sallaicons" !important;
    /* مكتبة الأيقونات الصحيحة */
  }
}

/* إضافة ظل ناعم واحترافي لكارت المنتج */
body.products-has-border .product-card {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out !important;
  margin-bottom: 10px;
}

/* زيادة عمق الظل وبروزه عند تمرير الماوس (Hover) فوق الكارت */
body.products-has-border .product-card:hover {
  transform: translateY(-4px) !important;
  /* رفعة خفيفة للكارت تزيد من جمالية الظل */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.04) !important;
}

/* ايقونة الامنيات والعرض السريع على الجوال*/
@media (max-width: 990px) {
  .product-card__actions {
    position: absolute !important;
    /**لتوسيط**/
    /*right: 50% !important;                  /* وضع نقطة البداية في يمين العرض */
    top: 100% !important;
    /* وضع نقطة البداية في اسفل الارتفاع */
    transform: translate(100%, -100%) !important;
    /* سحب دقيق لتوسيط الأزرار بشكل مثالي فوق الصورة */
    */
    /**لليمين**/
    right: 5% !important;
    /* وضع نقطة البداية في منتصف العرض */
    top: 100% !important;
    /* وضع نقطة البداية في اسفل الارتفاع */
    transform: translate(5%, -100%) !important;
    /* سحب دقيق لتوسيط الأزرار بشكل مثالي فوق الصورة */

    z-index: 5 !important;
    /* رفع طبقة الأزرار لتظهر بوضوح فوق كروت المنتجات */
  }

  /* جعل أزرار بطاقة المنتج شفافة تماماً */
  .product-card__actions div button {
    background-color: rgba(255, 255, 255, 0.3) !important;
    /* خلفية بيضاء شفافة بنسبة 60% */
    backdrop-filter: blur(1px) !important;
    /* تأثير زجاجي ضبابي للخلفية */
    -webkit-backdrop-filter: blur(1px) !important;
    /* دعم متصفحات آيفون (Safari) */
    border: 1px solid rgba(192, 192, 192, 0.4) !important;
    /* حدود فضية ناعمة وشبه شفافة */
    color: #ef4444 !important;
  }

  /* 2. تغيير الأيقونة الداخلية للزر المعطل */
  salla-button[product-status="out"] .s-button-element.s-button-disabled .sicon-minus-circle::before {
    content: "\ef39" !important;
    /* رمز الأيقونة المخصص الخاص بك */
    /*color: #8E8E93 !important;*/
    /* لون الأيقونة الجديد */
    font-family: "sallaicons" !important;
    /* مكتبة الأيقونات الصحيحة */
  }

  /* تعديل زر الامنيات والعين في الجوال عند وضع المؤشر */
  .product-card--primary-buttons .product-card__actions .wishlist button:hover,
  .product-card--primary-buttons .product-card__actions .wishlist salla-button:hover,
  .product-card--primary-buttons .product-card__actions .quickview-btn button:hover,
  .product-card--primary-buttons .product-card__actions .quickview-btn salla-button:hover {
    border-color: transparent !important;
  }

  /*لون زر الامنيات على الجوال */
  .product-card--primary-buttons .product-card__actions .wishlist button i,
  .product-card--primary-buttons .product-card__actions .wishlist salla-button i {
    color: var(--my-red) !important;
  }

  .product-card--primary-buttons .product-card__actions .wishlist button,
  .product-card--primary-buttons .product-card__actions .wishlist salla-button {
    border-color: var(--my-border-red) !important;
  }

  /* لون زر المعاينة على الجوال */
  .product-card--primary-buttons .product-card__actions .quickview-btn button i,
  .product-card--primary-buttons .product-card__actions .quickview-btn salla-button i {
    color: var(--my-black) !important;
  }

  .product-card--primary-buttons .product-card__actions .quickview-btn button,
  .product-card--primary-buttons .product-card__actions .quickview-btn salla-button {
    border-color: var(--my-border-black) !important;
  }

  /* تثبيت لون الخط والحدود لزر الامنيات والعين عند وضع المؤشر */

  /* زر الأمنيات - تثبيت اللون الأحمر للخط والحدود */
  .product-card--primary-buttons .product-card__actions .wishlist button:hover i,
  .product-card--primary-buttons .product-card__actions .wishlist salla-button:hover i {
    color: var(--my-red) !important;
  }

  .product-card--primary-buttons .product-card__actions .wishlist button:hover,
  .product-card--primary-buttons .product-card__actions .wishlist salla-button:hover {
    border-color: var(--my-border-red) !important;
  }

  /* زر العين (المعاينة) - تثبيت اللون الأسود للخط والحدود */
  .product-card--primary-buttons .product-card__actions .quickview-btn button:hover i,
  .product-card--primary-buttons .product-card__actions .quickview-btn salla-button:hover i {
    color: var(--my-black) !important;
  }

  .product-card--primary-buttons .product-card__actions .quickview-btn button:hover,
  .product-card--primary-buttons .product-card__actions .quickview-btn salla-button:hover {
    border-color: var(--my-border-black) !important;
  }


  /* 1. تطبيق المظهر الزجاجي الأصفر على خلفية الزر الأساسي */
  .product-card salla-button[product-status="sale"] .s-button-element.s-button-primary-outline,
  .product-card salla-button[product-status="out"] .s-button-element.s-button-disabled {
    display: block !important;
    /* تحويل الزر لعنصر كتلي يسمح بالتوسيط */
    border-radius: 10px !important;
    /* حواف دائرية انسيابية تناسب التصميم الزجاجي */
    width: 95% !important;
    /* جعل العرض 95% لترك مساحة متساوية على الطرفين */
    margin-left: auto !important;
    /* هوامش تلقائية من اليمين واليسار للتوسيط */
    margin-right: auto !important;
    margin-bottom: 12px !important;
    /* الحفاظ على المساحة من الأسفل */

    /* إضافة الظل الداخلي (تأثير العمق الزجاجي) */
    /* ظل داخلي ينطلق من الركن الأيمن السفلي */
    box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.15) !important;
  }

  .product-card salla-button.s-button-wrap:not([disabled]) .s-button-element:hover {
    box-shadow: inset 8px 8px 8px rgba(0, 0, 0, 0.15) !important;
    /* border-radius: 5px !important;*/
  }

  /*تعديل زر اضف للسلة في وضع الجوال تليون الخط واليقونة اثناء وضع المؤشر*/
  .product-card salla-button[product-status="sale"] .s-button-element.s-button-primary-outline:hover,
  .product-card button[product-status="sale"].s-button-primary-outline:hover .enhanced-icon {
    color: var(--product-enhanced-btn-color) !important;
  }

}

/* الألوان الافتراضية لكافة الحقول ونماذج الإدخال */
.s-datetime-picker-input,
.s-form-control,
.s-text-input {
  border-color: #dddddd !important;
  box-shadow: none !important;
  /* إزالة أي توهج أو ظلال افتراضية */
  transition: border-color 0.2s ease-in-out;
}

/* لون الإطار عند قيام العميل بالضغط على الحقل للكتابة (Focus) */
.s-datetime-picker-input:focus,
.s-form-control:focus,
select.s-form-control option {
  border-color: #dddddd !important;
  /* رمادي أغمق قليلًا عند التفاعل لجعل الحقل حيويًا */
  outline: none !important;
}


/***********تعديل وصف المنتج*************/

#details_table>p {}

/*تباعد الاسطر في الصوف*/
.more-info-tabs__content,
.product-single-top-description {
  line-height: 2rem !important;
  /* يمكنك زيادة الرقم أو إنقاصه حسب الرغبة */
}


/* 1. تنسيق الروابط داخل جدول التفاصيل */
#details_table a,
.product-single-top-description a {
  color: var(--my-dark-blue) !important;
  /* لون أزرق كلاسيكي للروابط ليعرف العميل أنها قابلة للضغط */
  text-decoration: none !important;
  /* وضع خط تحت الرابط لتمييزه عن النص العادي */
  font-weight: 700;
}

/* يستهدف الـ p الذي بداخله رابط ويضبطه حسب اتجاه اللغة الحالي */
/* الكود الأساسي المشترك للغتين */
#details_table p:has(a),
.product-single-top-description p:has(a) {
  position: relative !important;
  padding-inline-start: 20px !important;
  padding-inline-end: 0 !important;
}

#details_table p:has(a)::before,
.product-single-top-description p:has(a)::before {
  font-family: 'sallaicons' !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  top: 55% !important;
  transform: translateY(-50%) !important;
  color: var(--my-red);
  font-weight: 700;
}

/* 🇸🇦 النسخة العربية: أيقونة الروابط المهمة */
html[lang="ar"] #details_table p:has(a)::before,
html:not([lang]) #details_table p:has(a)::before,
html[lang="ar"] .product-single-top-description p:has(a)::before,
html:not([lang]) .product-single-top-description p:has(a)::before {
  content: "\ea63" !important;
}

/* 🇬🇧 النسخة الإنجليزية: الأيقونة الجديدة */
html[lang="en"] #details_table p:has(a)::before,
html[lang="en"] .product-single-top-description p:has(a)::before {
  content: "\ea66" !important;
}


#details_table a:hover,
.product-single-top-description a:hover {
  color: #0056b3 !important;
  /* تغميق لون الرابط قليلًا عند مرور الماوس عليه */
}

/* 2. تنسيق خط وحجم الوصف العلوي للمنتج */
.product-single-top-descr {
  color: #555555 !important;
  /* لون رمادي داكن مريح للعين أثناء القراءة */
  font-size: 15px !important;
  /* حجم خط مناسب ومتناسق مع تصميم المتجر */
  line-height: 1.6 !important;
  /* زيادة التباعد بين السطور لتسهيل القراءة للعميل */
  margin-bottom: 15px !important;
  /* مسافة أمان أسفل الوصف لفصله عن خيارات المنتج */
}

.more-tab-container strong,
.product-single-top-description strong {
  margin: 5px 0 5px 5px !important;
  color: var(--my-dark-black) !important;
  /* لون الخط الأزرق الداكن الخاص بك */
  background-color: #eee !important;
  /* لون الخلفية الرمادية الفاتحة الخفيفة */
  border: 1px solid #dddddd !important;
  /* إضافة حد رمادي فاتح جداً لتطابق القوائم المنسدلة والحقول */
  border-radius: 4px !important;
  /* انحناء خفيف جداً للحواف لمنع الزوايا الحادة المزعجة */
  padding: 1px 5px 5px !important;
  /* مسافات داخلية متوازنة لضبط النص في المنتصف تماماً */
  display: inline-block;
  /* لضمان ضبط المسافات والانحناءات بشكل صحيح على الهاتف والكمبيوتر */
}

.swiper.s-slider-container.swiper-initialized.swiper-horizontal {
  padding: 20px !important;
  /* يمكنك تغيير الـ 20px لأي مقاس يناسبك */
  box-sizing: border-box !important;
  /* يضمن عدم تمدد حجم السلايدر خارج الشاشة بسبب البطانة */
}

.product-entry__sub-title {
  /* 1. لون الخط (يمكنك تعديل الـ #777777 إلى لون متجرك) */
  color: var(--color-primary-reverse) !important;

  /* 2. ارتفاع السطر لراحة القراءة إذا كان العنوان الفرعي طويلاً */
  line-height: 1.6 !important;

  /* 3. تباعد خارجي من الأعلى ليفصله عن العنصر الذي فوقه */
  margin-top: 8px !important;

  /* 4. تباعد خارجي من الأسفل ليفصله عن العناصر التي تحته */
  margin-bottom: 12px !important;
}

/*عناوين الشجرة الفرعية*/
.s-breadcrumb-wrapper li {
  margin-top: 8px !important;
}

/*خصائص الازرار اضافة للسلة في الجوال والكمبيوتر في صفحة عرض المنتج*/
button.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary {
  border-radius: 10px !important;
  /* يجعل الحواف دائرية بمقدار 10 بكسل */
  overflow: hidden !important;
  /* يضمن عدم خروج الخلفية أو التأثيرات عن الحواف الدائرية */
  background: var(--product-enhanced-btn-bg) !important;
  /* لون الخلفية العادية (أبيض كمثال) */
  border: 0 !important;
  /* لون الإطار العادي */
  color: var(--product-enhanced-btn-color) !important;
}

/* زر اشتر الان*/

/* 1. تصميم الزر باللون الأخضر مع النص والحدود البيضاء */
salla-mini-checkout-widget,
salla-quick-buy {
  background-color: #ef4444 !important;
  /* خلفية خضراء تسويقية */
  color: #ffffff !important;
  /* لون النص الداخلي أبيض */
  border-radius: 10px !important;
  box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* لضمان اختراق اللون الأبيض للنص الداخلي والأيقونة بالكامل */
salla-mini-checkout-widget *,
salla-quick-buy * {
  color: #ffffff !important;
  fill: #ffffff !important;
  /* لتلوين أيقونة السلة باللون الأبيض أيضاً */
}

/* 2. تأثير الهوفر عند تمرير الماوس */
salla-mini-checkout-widget:hover,
salla-quick-buy:hover {
  background-color: #f11e1e !important;
  /* خلفية خضراء أغمق */
  box-shadow: inset 8px 8px 15px rgba(0, 0, 0, 0.25) !important;
  /* الظل الداخلي */
}

/* تغيير لون خط الرابط داخل حاوية خلفية المتجر */
section.bg-storeBG a {
  font-weight: 800 !important;
  color: var(--my-dark-blue) !important;
  /* رمادي فحمي فخم وواضح جداً للقراءة */
  text-decoration: none !important;
  /* إزالة الخط السفلي الافتراضي للروابط إذا كنت تفضل ذلك */
  transition: color 0.3s ease !important;
  /* حركة ناعمة عند تمرير الماوس */
}

/* تأثير عند تمرير الماوس فوق الرابط (Hover) ليتحول للون متجرك الأصفر */
section.bg-storeBG a:hover {
  color: var(--my-dark-blue) !important;
  /* يتحول للأصفر المشرق عند التمرير */
}

/*الصورة الصغير للمنتج عند الوصول لمنتصف الصفحة في الكمبيوتر*/
/* تنسيق حاوية الصورة لضمان ثبات المساحة */
.sticky-cart-single .item-thumb {
  width: 80px;
  /* يمكنك تعديل عرض الحاوية حسب الرغبة */
  height: 80px;
  /* يمكنك تعديل ارتفاع الحاوية حسب الرغبة */
  overflow: hidden !important;
  /* إخفاء أي أجزاء زائدة من الصورة خارج الحاوية */
}

/* تعديل خصائص الصورة الداخلية */
.sticky-cart-single .item-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* يمنع تمطط أو تشويه الصورة ويجعلها تتناسق داخل المربع */
}


/*الحقول عند الفوكس*/
[multiple]:focus,
[type=date]:focus,
[type=datetime-local]:focus,
[type=email]:focus,
[type=month]:focus,
[type=number]:focus,
[type=password]:focus,
[type=search]:focus,
[type=tel]:focus,
[type=text]:focus,
[type=time]:focus,
[type=url]:focus,
[type=week]:focus,
input:where(:not([type])):focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary) !important;
}

/*****قالب المعاينة*****/
/* استهداف زر الإضافة المخصص من سلة */
.product-quickview .quickview-single-info salla-add-product-button .s-button-element {
  border: 0;
  background-color: var(--product-enhanced-btn-bg) !important;
  /* لون الخلفية الأزرق */
  color: var(--product-enhanced-btn-color) !important;
  /* تلوين الحدود بنفس اللون الأزرق */
  border-radius: 10px !important;
  /* حواف دائرية انسيابية تناسب التصميم الزجاجي */
  width: 95% !important;
  /* جعل العرض 95% لترك مساحة متساوية على الطرفين */
  margin-left: auto !important;
  /* هوامش تلقائية من اليمين واليسار للتوسيط */
  margin-right: auto !important;
  margin-bottom: 12px !important;
  /* الحفاظ على المساحة من الأسفل */
  /* إضافة الظل الداخلي (تأثير العمق الزجاجي) */
  /* ظل داخلي ينطلق من الركن الأيمن السفلي */
  box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* تأثير عند تمرير الفأرة فوق الزر (Hover) */
.product-quickview .quickview-single-info salla-add-product-button .s-button-element:hover {
  color: var(--product-enhanced-btn-color) !important;
  box-shadow: inset 8px 8px 8px rgba(0, 0, 0, 0.15) !important;
}

/* 3. إضافة الأيقونة الجديدة باستخدام ::before قبل نص الزر */
.product-quickview .quickview-single-info salla-add-product-button .s-button-element .sicon-shopping:before {
  color: var(--product-enhanced-btn-color) !important;
  content: "\ef36" !important;
  /* رمز الترميز لأيقونة الحقيبة البديلة */
  font-family: "sallaicons" !important;
  /* الاعتماد على خط أيقونات سلة */
}

/* استهداف رابط "المزيد" داخل وصف العرض السريع */
.product-quickview .quickview-description a.link--primary {
  color: var(--my-red2) !important;
  /* تغيير لون النص إلى الأزرق ليناسب الزر */
  font-weight: bold !important;
  /* جعل الخط عريضاً */
  transition: color 0.3s ease !important;
  /* نعومة عند التغيير */
}

/* تأثير عند تمرير الفأرة (Hover) فوق الرابط */
.product-quickview .quickview-description a.link--primary:hover {
  color: var(--my-red) !important;
  /* أزرق داكن عند التمرير */
}

/*******************/
/*********النهاية*******/
/*******************/