/* الخلفية - ملحق في كود الجافا سيكريبت */
#circuit-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
}
/* ############################################### */

/* تغيير لون خلفية وأطراف حقل البحث */
.s-search-input {
  background-color: #727d94 !important;
  border: 1px solid #727d94 !important;
  color: #ffffff !important;   /* لون النص داخل الحقل */
  caret-color: #ffffff !important; /* لون مؤشر الكتابة */
  transition: all 0.3s ease;
}

.s-search-input::placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}
/* ############################################### */

/* قائمة رأس الصفحة */
#mainnav {
  background-color: rgba(114, 125, 148, 0.25) !important; /* بشفافية 70% */
  box-shadow: none !important;
}

a[href*="offers"] span {
  font-size: 1.1rem; /* حجم كبير */
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 8px #ffffff; /* توهج أبيض */
  transition: all 0.3s ease;
}

a[href*="offers"]:hover span {
  text-shadow: 0 0 15px #ffffff;
  transform: scale(1.05);
}

#mainnav .inner {
  background-color: rgba(114, 125, 148, 0.25) !important;
}

/* حجم الشعار */
.navbar-brand img {
  /*width: 220px !important;*/
  max-height: 100px !important;
}

/* تغيير لون الرموز عند التمرير - ملحق كود جافا سكريبت */
/* الحالة العادية (أيقونات بلونها الافتراضي) */
#mainnav .header-btn__icon,
#mainnav .s-cart-summary-icon,
#mainnav .sicon-user-circle,
#mainnav .icon,
#mainnav .sicon-sar,
#mainnav a,
#mainnav .custom-main-menu a {
  color: #cbcadb !important; /* لون داكن افتراضي */
}

/* عند التمرير - تصبح بيضاء */
#mainnav.scrolled .header-btn__icon,
#mainnav.scrolled .s-cart-summary-icon,
#mainnav.scrolled .sicon-user-circle,
#mainnav.scrolled .icon,
#mainnav .sicon-sar,
#mainnav a,
#mainnav .custom-main-menu a {
  color: #ffffff !important;
}

/* تأثير توهج أبيض على الأيقونات في رأس الصفحة */
#mainnav .header-btn__icon,
#mainnav .s-cart-summary-icon,
#mainnav .sicon-user-circle,
#mainnav .icon {
  font-size: 1.5rem; /* تكبير بسيط للحجم */
  color: #ffffff !important;
  text-shadow: 0 0 8px #ffffff;
  transition: all 0.3s ease;
}

#mainnav .header-btn__icon:hover,
#mainnav .s-cart-summary-icon:hover,
#mainnav .sicon-user-circle:hover,
#mainnav .icon:hover {
  text-shadow: 0 0 15px #ffffff;
  transform: scale(1.1);
}

/* تغيير لون وحجم السعر داخل الهيدر */
.s-cart-summary-total {
  color: #eb0c31 !important;
  font-size: 1.3rem !important; /* حجم أكبر قليلاً */
  font-weight: bold;
}

/* تغيير لون وحجم أيقونة العملة */
.s-cart-summary-total .sicon-sar {
  font-size: 1.2rem !important;
  color: #eb0c31 !important;
}

/* تكبير الرقم داخل الدائرة */
.s-cart-summary-count {
  font-size: 0.9rem !important;
  background-color: #eb0c31 !important;
  color: white !important;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
}

/* ############################################### */

/* تغيير حجم الصور المتحركة */
@media (max-width: 768px) {
  #main-slider-0 .swiper-slide {
    min-height: 250px !important;
    height: 250px !important;
  }
}

@media (min-width: 1024px) {
  #main-slider-0 .swiper-slide {
    min-height: 500px !important;
    height: 500px !important;
  }
}

/* إزالة أي تراكب داكن */
.overlay-bg {
  background-color: transparent !important;
  filter: brightness(2.3) !important; /* ← زيادة الإضاءة قليلاً */
  opacity: 1 !important;
}

/* ############################################### */

/* الأقسام */
/* إضافة حركة توهج مستمرة */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0px #00f7ff;
  }
  50% {
    box-shadow: 0 0 15px #00f7ff;
  }
}

/* الحاوية البيضاء لكل رابط */
.slide--cat-entry {
  background-color: #99cde0;
  border-color: #0778f0 !important;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  animation: pulse-glow 2s infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* عند التمرير: ارتفاع + توقف التوهج */
.slide--cat-entry:hover {
  transform: translateY(-6px);
  animation: none;
  box-shadow: 0 8px 20px rgba(0, 247, 255, 0.6); /* ظل ثابت */
}

/* لون الأيقونة الأساسي */
.slide--cat-entry i {
  color: #2c56b0 !important;
  font-size: 2.5rem;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* عند التمرير: توهج الأيقونة */
.slide--cat-entry:hover i {
  color: #03fcec !important;
  text-shadow: 0 0 8px #03fcec;
}

/* تعديل التوهج والبروز */
.swiper-slide {
  padding: 30px;            /* مساحة حول المربع */
  overflow: visible !important;
}
.slide--cat-entry {
  width: 100%;
  max-width: 95%;            /* تصغير بسيط */
  margin: auto;
  position: relative;
  z-index: 2;
}

/* لون النص العادي */
.slide--cat-entry h2 {
  color: #373f4a;
  transition: color 0.3s ease;
}

/* عند التمرير: يصبح أبيض ناصع */
.slide--cat-entry:hover h2 {
  color: #ffffff;
}

/* ############################################### */

/* التصنيفات */
/* أخفاء التراكب بشكل افتراضي */
.banner-entry.has-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: transparent !important;
  transition: background-color 0.3s ease;
  z-index: 1;
}

/* إظهار التراكب الداكن عند تمرير الماوس */
.banner-entry.has-overlay:hover::after {
  background-color: rgba(0, 0, 0, 0.4) !important;
}

/* النص داخل البنرات - الحالة العادية */
.banner-entry__text {
  color: #ffffff;
  text-shadow: none;
  z-index: 2;
  position: relative;
  transition: text-shadow 0.3s ease;
}

/* عند تمرير الماوس: نص أبيض + توهج */
.banner-entry:hover .banner-entry__text {
  color: #ffffff !important;
  text-shadow: 0 0 10px #ffffff;
}

/* ############################################### */

/* المنتجات */
/* عنوان "أحدث المنتجات" داخل السلايدر */
.s-slider-block__title h2 {
  font-size: 1.5rem !important;  /* تكبير الحجم */
  color: #ffffff !important;  /* اللون أبيض */
  text-shadow: 0 0 10px #ffffff;   /* توهج ناعم أبيض */
  transition: all 0.3s ease-in-out;
}

/* تكبير زر "عرض الكل" */
.s-slider-block__display-all {
  font-size: 1.2rem !important; 
  font-weight: 600;
  color: #ffffff !important;
  text-shadow: 0 0 10px #ffffff;   /* توهج ناعم أبيض */
}

/* حركة التوهج المستمر */
@keyframes product-glow {
  0%, 100% {
    box-shadow: 0 0 0px #00f7ff;
  }
  50% {
    box-shadow: 0 0 15px #00f7ff;
  }
}

/* زر "إضافة للسلة" بلون أحمر */
.s-product-card-entry .s-button-element.s-button-outline.s-button-primary-outline {
  border-color: #e60023 !important;
  color: #e60023 !important;
}

/* عند تمرير الماوس عليه */
.s-product-card-entry .s-button-element.s-button-outline.s-button-primary-outline:hover {
  background-color: #e60023 !important;
  color: #ffffff !important;
}


/* كرت المنتج بالكامل */
.s-product-card-entry {
  background-color: #99cde0 !important;
  border: 2px solid #225ba8 !important;
  color: #000000 !important;
  animation: product-glow 2.5s infinite;
  transition: all 0.3s ease-in-out;
  border-radius: 12px;
}

/* عند التمرير: توقّف التوهج + تغيير اللون */
.s-product-card-entry:hover {
  animation: none;
  background-color: #225ba8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px #00f7ff;
}

/* لون النص داخل الكرت */
.s-product-card-entry h3,
.s-product-card-entry h3 a,
.s-product-card-entry .sicon-sar {
  color: #000000 !important;
  transition: color 0.3s ease;
}

/* عند التمرير: النص يصبح أبيض */
.s-product-card-entry:hover h3,
.s-product-card-entry:hover h3 a,
.s-product-card-entry:hover .sicon-sar {
  color: #ffffff !important;
}

/* لون زر "إضافة للسلة" ثابت */
.s-product-card-entry button {
  transition: all 0.3s ease;
}

/* عند التمرير: توهج خفيف للزر */
.s-product-card-entry:hover button {
  box-shadow: 0 0 10px #00f7ff;
}

/* السعر بعد الخصم */
.s-product-card-sale-price h4 {
  color: #fc0324 !important; /* أحمر فاتح */
}

/* السعر قبل الخصم */
.s-product-card-sale-price span {
  color: #990000 !important; /* أحمر داكن */
  text-decoration: line-through; /* اختياري: شطب السعر */
}

/* لون العرض الخاص */
.s-product-card-content-subtitle {
  color: #e91e36 !important; /* أحمر وردي */
}

/* إزالة عنوان العرض من بطاقة المنتج */
.promotion-title,
.s-product-card-promotion-title{
  display: none !important;
}

/* ############################################### */

/* العنوان "آراء العملاء" */
.s-reviews-header {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 10px #ffffff;
  margin-bottom: 2rem;
}

/* المربع الكامل للتقييم */
.s-reviews-testimonial {
  background-color: #99cde0;
  border: 2px solid #225ba8;
  border-radius: 15px;
  padding: 25px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: pulse-glow-reviews 2.5s infinite;
}

/* توهج دائم */
@keyframes pulse-glow-reviews {
  0%, 100% {
    box-shadow: 0 0 0px #00f7ff;
  }
  50% {
    box-shadow: 0 0 15px #00f7ff;
  }
}

/* عند التمرير على التقييم */
.s-reviews-testimonial:hover {
  transform: translateY(-6px);
  animation: none;
  box-shadow: 0 8px 20px rgba(0, 247, 255, 0.6);
}

/* نص التقييم */
.s-reviews-testimonial__text p {
  color: #000000;
  transition: color 0.3s ease;
}

/* عند التمرير يضيء النص */
.s-reviews-testimonial:hover .s-reviews-testimonial__text p {
  color: #ffffff;
}

/* اسم العميل */
.s-reviews-testimonial__info h2 {
  color: #000000;
  transition: color 0.3s ease;
}

.s-reviews-testimonial:hover .s-reviews-testimonial__info h2 {
  color: #ffffff;
}

/* رمز الاقتباس */
.s-reviews-testimonial__icon svg {
  fill: #225ba8;
  opacity: 0.4;
}

/* ############################################### */

/* ذيل الصفحة */
.store-footer__inner {
  background-color: #3e60a8 !important; 
  color: #ffffff !important;           
}

/* العناوين داخل الفوتر */
.store-footer__inner h3 {
  color: #ffffff !important;
}

/* الفقرات والنصوص داخل الفوتر */
.store-footer__inner p,
.store-footer__inner a,
.store-footer__inner span {
  color: #ffffff !important;
}

/* روابط عند التمرير */
.store-footer__inner a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* أيقونات التواصل الاجتماعي */
.store-footer__inner .sicon {
  color: #ffffff !important;
}

/* ############################################### */
/* ############################################### */
/* ############################################### */

/* صفحة المنتج */

/* لون أبيض وتوهج خفيف لعناصر النص الأساسية داخل صفحة المنتج */
.product-entry__sub-title,
h1, h2, h3, h4, h5, h6,
.product__description,
.price-wrapper h2,
.price-wrapper span,
.s-product-options-option-label,
.s-product-options-thumbnails-wrapper p,
.sticky-product-bar__quantity label,
.total-price,
.before-price,
.breadcrumbs,
.breadcrumbs a,
.breadcrumbs li,
.s-social-share-wrapper,
.form-label,
.out-of-stock,
.s-button-text {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.75);
}

/* توهج أقوى عند تمرير الماوس على العناوين */
h1:hover, h2:hover, .product-entry__sub-title:hover {
  text-shadow: 0 0 12px #ffffff;
}

/* توحيد تصميم البوكسات مع بطاقة المنتج */
section.sticky-product-bar,
section.center-between,
section.bg-white,
section.price-wrapper,
.s-product-options-option-container,
.s-product-options-thumbnails-wrapper,
.s-product-options-option-content,
.form-label,
.s-quantity-input-container {
  background-color: #99cde0 !important; /* خلفية سماوي */
  border-radius: 12px !important;
  padding: 15px !important;
  box-shadow: 0 0 15px rgba(0, 247, 255, 0.05);
  border: 1px solid rgba(0, 247, 255, 0.1);
}

/* النص داخل هذه البوكسات بلون أسود */
section.sticky-product-bar *:not(button):not(.s-button-element),
section.price-wrapper *:not(button):not(.s-button-element),
.form-label,
.s-quantity-input-container *:not(button):not(.s-button-element),
.product__description * {
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8) !important;
}

/* خيارات الطول */
.s-product-options-option-container {
  color: #000000 !important;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8) !important;
}
.s-product-options-option-label small {
  color: #000000 !important; /* أبيض */
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); /* توهج خفيف */
  font-size: 16px !important; /* تكبير بسيط للحجم */
  font-weight: bold;
}

/* تصميم زر "إضافة للسلة" و"اشتري الآن" مثل بطاقة المنتجات */
.s-button-element.s-button-primary {
  background-color: #ed0741 !important; /* أحمر قوي */
  color: #ffffff !important;
  font-weight: bold;
  border-radius: 12px !important;
  box-shadow: 0 0 10px rgba(237, 7, 30, 0.4);
  transition: all 0.3s ease-in-out;
}

.s-button-element.s-button-primary:hover {
  background-color: #ed0741 !important;
  transform: scale(1.03);
  box-shadow: 0 0 15px rgba(237, 7, 30, 0.6);
}

/* السعر الحالي (الأحمر المتوهج) */
.space-x-2 h4 {
  color: #f01818 !important; /* أحمر فاقع */
  text-shadow: 0 0 8px rgba(252, 197, 197, 0.5) !important;
  font-weight: bold;
}

/* السعر قبل الخصم (أحمر غامق بدون توهج) */
.space-x-2 span {
  color: #cc0a0a !important; /* أحمر غامق */
  text-shadow: none !important;
  opacity: 0.85;
}

/* خلفية شفافة للكونتينر الرئيسي لصفحة المنتج */
.main-content {
  background-color: rgba(255, 255, 255, 0.05) !important; /* شفافية خفيفة */
  backdrop-filter: blur(8px); /* ضبابية خلفية لإعطاء مظهر زجاجي */
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 0 20px rgba(0, 247, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* تحسين وضوح أيقونات المشاركة */
.s-social-share-icon svg,
.s-social-share-btn svg,
.s-social-share-list a span svg {
  fill: #000000 !important;
  width: 24px !important;
  height: 24px !important;
  overflow: visible !important;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
  transition: all 0.3s ease-in-out;
}

.s-social-share-list a:hover span svg {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
}

/* ضبط أزرار المشاركة لمنع القص */
.s-social-share-btn .s-button-element,
.s-social-share-list a span,
.s-social-share-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  overflow: visible !important;
  padding: 0px !important;
  box-sizing: content-box !important;
}

/* زر القلب (المفضلة) */
.s-button-element.s-button-icon,
.s-button-element.s-button-icon .s-button-text {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.s-button-element.s-button-icon i,
.s-button-element.s-button-icon svg {
  font-size: 23px !important;
  width: 22px !important;
  height: 22px !important;
  color: #e30000 !important;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
  transition: all 0.3s ease-in-out;
}

.s-button-element.s-button-icon:hover i,
.s-button-element.s-button-icon:hover svg {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
}

/* توهج لصندوق السعر والكمية */
section.sticky-product-bar,
section.price-wrapper,
section.flex.bg-white,
section.flex.bg-white .center-between,
.sticky-product-bar__quantity,
.s-quantity-input-container {
  background-color: #c2e3f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 0 12px rgba(2, 185, 191, 0.2);
  border: 1px solid rgba(2, 185, 191, 0.3);
  padding: 15px !important;
}

/* النص داخل هذه البوكسات بلون أسود */
section.sticky-product-bar *,
section.flex.bg-white *,
section.price-wrapper *,
.sticky-product-bar__quantity *,
.s-quantity-input-container * {
  color: #000000 !important;
  text-shadow: none !important;
}

/* إجبار لون النص داخل حقل الكمية على الأسود */
.s-quantity-input-input {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important; /* دعم لمتصفح كروم وسفاري */
  background-color: #fff !important;
  border: 1px solid #ccc !important;
  font-weight: bold;
}

/* تكبير حجم label "ترتيب" وجعله أبيض متوهج */
label[for="product-filter"] {
  font-size: 18px !important; /* أو جرب 20px حسب ذوقك */
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  font-weight: bold;
}

select.s-form-control,
select.s-form-control option {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important; /* دعم لمتصفح كروم وسفاري */
}

/* محتوي التعليقات في صفحة المنتج */
.s-comments.s-comments-product {
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);

  /* أهم جزء لعزل الضبابية عن باقي الصفحة */
  isolation: isolate;
  z-index: 0;
  position: relative;
}

/* ############################################### */
/* ############################################### */
/* ############################################### */

/* تنسيق صفحات السياسات */
.content--single-page {
  background-color: rgba(255, 255, 255, 0.05) !important; /* شفافية خفيفة */
  backdrop-filter: blur(8px);
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 0 20px rgba(0, 247, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff !important; /* نص أبيض */
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

/* العناوين داخل الصفحات الثابتة */
.content--single-page h1,
.content--single-page h4 {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  font-weight: bold;
}

/* الفقرات */
.content--single-page p {
  color: #f0f0f0 !important;
  line-height: 1.9;
  font-size: 1rem;
}

/* ############################################### */

/* صفحة المستخدم بعد تسجيل الدخول */

/* خلفية القائمة نفسها */
.s-user-menu-trigger {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border: none !important;
}


/* بدون بروز بشكل افتراضي */
.s-user-menu-trigger-avatar,
.s-user-menu-trigger-content,
.s-user-menu-trigger-icon svg {
  filter: none !important;
  transition: all 0.4s ease-in-out;
}

/* عند تمرير الماوس يظهر التوهج */
.s-user-menu-trigger:hover .s-user-menu-trigger-avatar,
.s-user-menu-trigger:hover .s-user-menu-trigger-content,
.s-user-menu-trigger:hover .s-user-menu-trigger-icon svg {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)) !important;
  transform: scale(1.1) !important;
}


/* صورة المستخدم */
.s-user-menu-avatar-wrap img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  border: 2px solid #ffffff44;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

/* نص "مرحباً بك" */
.s-user-menu-trigger-hello {
  color: #ffffff;
  font-size: 14px;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  display: block;
  margin-bottom: 2px;
}

/* اسم المستخدم */
.s-user-menu-trigger-name {
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* السهم */
.s-user-menu-trigger-icon svg {
  fill: #ffffff !important;
  width: 20px;
  height: 20px;
  margin-inline-start: 10px;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

/* تغيير خلفية القائمة */
ul.s-user-menu-dropdown-list {
  background-color: #99cde0 !important;
  border-radius: 12px !important;
  padding: 10px 0 !important;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}

/* تنسيق أيقونات العناصر (ما عدا تسجيل الخروج) */
ul.s-user-menu-dropdown-list li:not(.s-user-menu-dropdown-item-logout) svg {
  fill: #2c56b0 !important;
  width: 20px !important;
  height: 20px !important;
  transition: all 0.3s ease-in-out;
}

ul.s-user-menu-dropdown-list li:not(.s-user-menu-dropdown-item-logout):hover svg {
  fill: #03fcec !important;
  filter: drop-shadow(0 0 3px #03fcec);
}

/* تنسيق نصوص العناصر (ما عدا تسجيل الخروج) */
ul.s-user-menu-dropdown-list li .s-user-menu-dropdown-item-title {
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
  font-weight: bold;
  font-size: 15px;
}

/* تأثير عند التمرير على العناصر */
ul.s-user-menu-dropdown-list li:not(.s-user-menu-dropdown-item-logout):hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* نفس القائمة ولكن عند الدخول */

/* خلفية القائمة الجانبية نفسها */
.sidebar .s-user-menu-inline {
  background-color: #99cde0 !important;
  border-radius: 12px !important;
  padding: 10px 0 !important;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}

/* تنسيق أيقونات القائمة الجانبية */
.sidebar .s-user-menu-inline li:not(.s-user-menu-dropdown-item-logout) svg {
  fill: #2c56b0 !important;
  width: 20px !important;
  height: 20px !important;
  transition: all 0.3s ease-in-out;
}

.sidebar .s-user-menu-inline li:not(.s-user-menu-dropdown-item-logout):hover svg {
  fill: #03fcec !important;
  filter: drop-shadow(0 0 3px #03fcec);
}

/* تنسيق عناوين العناصر */
.sidebar .s-user-menu-inline li .s-user-menu-dropdown-item-title {
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
  font-weight: bold;
  font-size: 15px;
}

/* تأثير عند تمرير الماوس على العنصر */
.sidebar .s-user-menu-inline li:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

/* خلفية شفافة للمحتوي للقائمة الجانبية */
nav.sidebar {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border: none !important;
}

/* زر تعطيل الحساب */
button.s-button-danger-outline {
  background-color: #e61212 !important;      /* أحمر قوي */
  color: #ffffff !important;                /* نص أبيض */
  font-weight: bold;
  border: none !important;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(255, 0, 0, 0.1);  /* توهج مبدئي */
  transition: all 0.3s ease-in-out;
}

/* عند تمرير الماوس */
button.s-button-danger-outline:hover {
  transform: translateY(-2px); /* يرتفع */
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.2); /* توهج أقوى */
}

/* نص الزر */
button.s-button-danger-outline .s-button-text {
  color: #ffffff !important;
}



/* زر الطباعة */
button.s-button-primary-outline {
  background-color: #a1d2d6 !important;  /* أزرق قوي */
  color: #ffffff !important;     /* نص أبيض */
  font-weight: bold;
  border: none !important;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}

/* عند تمرير الماوس */
button.s-button-primary-outline:hover {
  transform: translateY(-1.5px); /* يرتفع */
  box-shadow: 0 0 12px rgba(203, 242, 245, 0.6); /* توهج أقوى */
}

/* نص الزر */
button.s-button-primary-outline .s-button-text {
  color: #ffffff !important;
}

/* أيقونة الطابعة داخل الزر */
button.s-button-primary-outline .sicon-printer2 {
  color: #ffffff !important;
  margin-inline-end: 6px; /* مسافة بين الأيقونة والنص */
}



/* زر تقييم */
button.s-button-light {
  background-color: #f39c12 !important; /* برتقالي مميز */
  color: #ffffff !important;           /* نص أبيض */
  font-weight: bold;
  border: none !important;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(243, 156, 18, 0.3); /* توهج خفيف */
  transition: all 0.3s ease-in-out;
}

/* عند تمرير الماوس */
button.s-button-light:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 0 12px rgba(243, 156, 18, 0.6); /* توهج أقوى */
}

/* نص الزر */
button.s-button-light .s-button-text {
  color: #ffffff !important;
}

/* ############################################### */

/* قائمة الأمنيات */

/* وصف المنتج */
.product-entry--wishlist h3 a {
  color: #000 !important; /* أسود */
  font-weight: 600;
}

/* السعر بعد الخصم */
.product-entry--wishlist h4 {
  color: #ff0000 !important; /* أحمر داكن */
  font-weight: bold;
}

/* السعر قبل الخصم (المشطوب) */
.product-entry--wishlist span.line-through {
  color: #8B0000 !important; /* أحمر فاقع */
  text-decoration: line-through;
  font-weight: bold;
}

/* ############################################### */

/* عند إضافة المنتج للمفضلة */
.s-product-card-wishlist-btn.s-product-card-wishlist-added .sicon-heart::before {
  color: red !important;
  content: "\2764"; /* هذا هو كود أيقونة القلب من Salla */
  transition: all 0.3s ease-in-out;
}

/* عند التحويم */
.s-product-card-wishlist-btn:hover .sicon-heart::before {
  color: #ff4d4d !important;
  filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.4));
}


/* عند إضافة المنتج للمفضلة في صفحة المنتج */
.btn--wishlist.favorited .sicon-heart::before,
.btn--wishlist.is-added .sicon-heart::before,
.btn--wishlist.is-added .sicon-heart::before {
  color: red !important;
  content: "\2764"; /* كود القلب الأحمر */
  transition: all 0.3s ease-in-out;
}

/* عند تمرير الماوس */
.btn--wishlist:hover .sicon-heart::before {
  color: #ff4d4d !important;
  filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.4));
}

/* ############################################### */

/*  القائمة الجانبية للجوال */

/* خلفية زرقاء لقائمة الجوال فقط */
@media (max-width: 1023px) {
  #mobile-menu {
    background-color: #99cde0 !important;
  }
}

/* خلفية شفافة لقائمة اللابتوب */
@media (min-width: 1024px) {
  #mobile-menu {
    background-color: transparent !important;
  }
}

/* تنسيق الروابط داخل القائمة */
#mobile-menu .main-menu li a span {
  font-size: 16px !important;
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}

/* تأثير عند التحويم */
#mobile-menu .main-menu li a:hover span {
  text-shadow: 0 0 8px rgba(255, 255, 255, 1);
  transform: scale(1.05);
}

/* ############################################### */

/* === مضلعات الصفحة الرئيسية === */
.octagon-container.page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.octagon.page {
  position: absolute;
  background-color: rgba(10, 60, 120, 0.4);
  clip-path: polygon(
    30% 0%, 70% 0%,
    100% 30%, 100% 70%,
    70% 100%, 30% 100%,
    0% 70%, 0% 30%
  );
  animation: float-up-page 12s linear infinite;
  opacity: 0;
}

@keyframes float-up-page {
  0% {
    transform: translateY(100vh) scale(0.5) rotate(0deg);
    opacity: 0;
  }
  20%, 80% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-20vh) scale(1.2) rotate(360deg);
    opacity: 0;
  }
}

/* === مضلعات داخل القائمة الجانبية === */
#mobile-menu .octagon-container.menu {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

#mobile-menu .octagon.menu {
  position: absolute;
  background-color: rgba(10, 60, 120, 0.4);
  clip-path: polygon(
    30% 0%, 70% 0%,
    100% 30%, 100% 70%,
    70% 100%, 30% 100%,
    0% 70%, 0% 30%
  );
  animation: float-up-menu 10s linear infinite;
  opacity: 0;
}

@keyframes float-up-menu {
  0% {
    transform: translateY(100%) scale(0.5) rotate(0deg);
    opacity: 0;
  }
  20%, 80% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-20%) scale(1.2) rotate(360deg);
    opacity: 0;
  }
}

/* ############################################### */

/* تحسينات للسلة */

/* المجموع: بلون أسود */
.text-primary.flex-none span:first-child {
  color: #000 !important;
}

/* السعر بلون أحمر */
.text-primary.flex-none .item-total {
  color: #e50000 !important;
  font-weight: bold;
}

/* شحن مجاني باللون الأسود */
#free-shipping .shipping-item,
#free-shipping .shipping-item h4,
#free-shipping .shipping-item p {
  color: #000 !important;
}

/* ملخص الطلب باللون الأسود */
h2.font-bold.text-sm.mb-5 {
  color: #000 !important;
}

/* ############################################### */

/* تحسين موقع ايقونات السوشيال */

/* نخفي السوشال ميديا من قسم "عن المتجر" */
.store-footer__inner > .container > div:first-child .s-social-list {
  display: none !important;
}

/* نظهرهم فقط داخل قسم "تواصل معنا" */
.contact-social {
  display: block !important;
}

/* نقل الأيقونات إلى تحت رقم الواتساب وتنسيقها رأسيًا */
.contact-social {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}

.store-footer .contact-social {
  margin-top: -11px !important; /* بدل 12px */
}

/* تنسيق عمودي للأيقونات */
.contact-social .s-social-list {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* ضبط كل رابط */
.contact-social .s-social-link {
  position: relative;
  padding-right: 0px; /* مساحة لعرض الاسم */
}

/* إضافة اسم الحساب بعد كل أيقونة */
.contact-social .s-social-link:nth-child(1)::after {
  content: " surat_albarq_alelektruni@";
  position: absolute;
  right: 40px;
  top: 1px;
  color: white;
  font-size: 13px;
  color: #ffffff !important;
}

.contact-social .s-social-link:nth-child(2)::after {
  content: " surat_albarq_alel@";
  position: absolute;
  right: 40px;
  top: 1px;
  color: white;
  font-size: 13px;
  color: #ffffff !important;
}

/* تفعيل المؤشر وتحويل النص إلى رابط فعّال */
.contact-social .s-social-link {
  cursor: pointer;
}

/* تفعيل التفاعل على ::after */
.contact-social .s-social-link:nth-child(1):hover::after,
.contact-social .s-social-link:nth-child(2):hover::after {
  color: #e5e7eb !important;
  text-decoration: underline;
}


/* إخفاء الخط الفاصل بين الواتساب والسوشال ميديا */
.store-footer .contact-social {
  border: none !important;
  border-top: none !important;
}

/* ############################################### */