/* 🎨 خلفية كحلية غامقة بتوهج خفيف من الأطراف */
body, .main-content, .salla-body, .s-page, html {
  background: radial-gradient(
      circle at center,
      #000814 0%,
      #000511 70%,
      #00020a 100%
  ) !important;
  color: #47c7db !important;
  box-shadow: inset 0 0 180px rgba(0, 60, 255, 0.25); /* توهج خفيف من الأطراف */
  transition: background 0.4s ease, box-shadow 0.4s ease;
}



/* 🩵النصوص داخل الوصف في الصور وصفحة الصور */
p {
  color: #007bff!important;
}

/* 🌟 العناوين الرئيسية زي يد هاوكس في المنتج واراء العملاء */
h1 {
   color: #1e6bff !important; /* أزرق نيون فاتح */
  text-shadow:
    0 0 10px #0028ff,
    0 0 25px #0038ff,
    0 0 45px #0048ff,
    0 0 70px #0055ff;
  filter: brightness(2.3) saturate(190%);
  transition: none !important;
}

/* هنا نعزز ثقتك وأسئلة شائعة وأسماء اراء العملاء */
h2 {
   color: #1e6bff !important; /* أزرق نيون فاتح */
  text-shadow:
    0 0 10px #0028ff,
    0 0 25px #0038ff,
    0 0 45px #0048ff,
    0 0 70px #0055ff;
  filter: brightness(2.3) saturate(190%);
  transition: none !important;
}

/* العناوين الرئيسية يد و أيادي هاوكس الاحترافية وتحت روابط مهمة وتواصل معنا والعناوين الرئيسية في الصور */
h3 {
   color: #1e6bff !important; /* أزرق نيون فاتح */
  text-shadow:
    0 0 10px #0028ff,
    0 0 25px #0038ff,
    0 0 45px #0048ff,
    0 0 70px #0055ff;
  filter: brightness(2.3) saturate(190%);
  transition: none !important;
}

/* العناوين الرئيسية في هنا نعزز ثقتك فينا */
h4 {
  color: #007bff !important;
}

/* في صفحة الطلب العناوين المغمقة  في الوصف */
strong {
  color: #1e6bff !important; /* أزرق نيون فاتح */
  text-shadow:
    0 0 10px #0028ff,
    0 0 25px #0038ff,
    0 0 45px #0048ff,
    0 0 70px #0055ff;
  filter: brightness(2.3) saturate(190%);
  transition: none !important;
}

/* خيارات اختيارات الاضافات في اليد وأيضا التوتال الي يبان فوق */
b {
  color: #1e6bff !important; /* أزرق نيون فاتح */
  text-shadow:
    0 0 10px #0028ff,
    0 0 25px #0038ff,
    0 0 45px #0048ff,
    0 0 70px #0055ff;
  filter: brightness(2.3) saturate(190%);
  transition: none !important;
}







/* 🩵 زر تفاصيل أكثر بنفس ستايل زر إضافة للسلة */
.s-button-btn,
.btn--primary {
  background: linear-gradient(135deg, #0038ff, #001a80) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 100, 255, 0.6) !important;
  font-weight: 700 !important;
  border-radius: 30px !important;
  box-shadow:
    0 0 15px rgba(0, 80, 255, 0.4),
    0 0 30px rgba(0, 100, 255, 0.2) !important;
  transition: 0.3s ease;
}

.s-button-btn:hover,
.btn--primary:hover {
  background: linear-gradient(135deg, #1e6bff, #0048ff) !important;
  color: #fff !important;
  box-shadow:
    0 0 20px rgba(0, 120, 255, 0.6),
    0 0 40px rgba(0, 120, 255, 0.4) !important;
  transform: scale(1.03);
}




/* لون السعر حق اليد */
 [class*="price"] {
  color: #1e6bff !important; /* أزرق نيون فاتح */
  text-shadow:
    0 0 10px #0028ff,
    0 0 25px #0038ff,
    0 0 45px #0048ff,
    0 0 70px #0055ff;
  filter: brightness(2.3) saturate(190%);
  transition: none !important;
}


/*  لون الخلفية في هنا نعزز ثقتك فينا مع الهيدر */
.bg-\[--t-bg-secondary-clr\] {
  background-color: #444444!important;
}

/* تغيير لون خلفية عنصر الاسئلة الشائعة */
.faqs-list__item {
  background-color: #000000 !important; /* ← غير اللون حسب رغبتك */
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}


/* تغيير لون خلفية صندوق التقييم */
.s-reviews-testimonial {
  background-color: #777777!important; /* ← غيّر اللون حسب رغبتك */
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: background-color 0.3s ease;
}

/* غيّر لون أيقونة الاقتباس */
.s-reviews-testimonial__icon svg path {
  fill: #1e6bff !important; 
}

/* الاسئلة الشائعة */
.form-label b {
  color: #000000 !important; /* ← غيّر اللون إلى اللي يناسبك */
}

/* تغيير خلفية الإجابة داخل قسم الأسئلة الشائعة 
.faq-answer {
  background-color: #000000 !important; /* ← غيّر اللون حسب ذوقك 
  padding: 1rem;
  border-radius: 8px;
} */


/* 🎨الاضافات تخصيص لون خيار المنتج */
.s-product-options-grid-mode-span {
  background: rgba(0, 20, 40, 0.9) !important; /* أزرق غامق شفاف */
  color: #3ea6ff !important; /* نص أزرق فاتح */
  border: 1px solid rgba(60, 150, 255, 0.4) !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  transition: 0.3s ease;
}

/* عند التحديد */
label input:checked + .s-product-options-grid-mode-span {
  background: linear-gradient(135deg, #1e6bff, #0048ff) !important;
  color: #ffffff !important;
  box-shadow: 0 0 25px #1e6bff, 0 0 45px rgba(30, 107, 255, 0.4);
}

/* عند المرور بالماوس */
label:hover .s-product-options-grid-mode-span {
  background: rgba(0, 40, 80, 0.8) !important;
  color: #b7d9ff !important;
}



/* 💎 أيقونات النيون (الرجوع - البطاقة - المحادثة) */
.flex-center i.sicon-back,
.flex-center i.sicon-crdit-card-alt,
.flex-center i.sicon-chat-bubbles {
  color: #1e6bff !important; /* أزرق نيون فاتح */
  text-shadow:
    0 0 10px #0028ff,
    0 0 25px #0038ff,
    0 0 45px #0048ff,
    0 0 70px #0055ff;
  filter: brightness(2.3) saturate(190%);
  transition: none !important;
}








/* ✨ الأسئلة الأساسية */
label[for^="faq-"] {
  color: #007bff !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  text-shadow:
    0 0 8px rgba(0, 255, 255, 0.5),
    0 0 15px rgba(0, 200, 255, 0.3);
  transition: 0.3s ease;
  cursor: pointer;
}

/* 💎 عند تمرير الماوس */
label[for^="faq-"]:hover {
  color: #00faff !important;
  text-shadow:
    0 0 10px #0028ff,
    0 0 25px #0038ff,
    0 0 45px #0048ff,
    0 0 70px #0055ff;
}

/* ⚡ عند الفتح (يبقى التوهج إلى أن تُغلق) */
input[type="checkbox"]:checked + .faqs-list__item label {
  color: #00faff !important;
  text-shadow:
    0 0 10px #0028ff,
    0 0 25px #0038ff,
    0 0 45px #0048ff,
    0 0 70px #0055ff;
  filter: brightness(1.6) saturate(180%);
}


ــــــــــــــــــــــــــــــــــــــ

/* 💰 سكشن السعر والكمية - إزالة الخلفية البيضاء نهائيًا */
section.flex.p-5,
section.flex.p-5 *,
section.sticky-product-bar,
section.sticky-product-bar * {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 💠 الخلفية بنفس ستايل المتجر */
section.flex.p-5,
section.sticky-product-bar {
  background: radial-gradient(
      circle at center,
      #000814 0%,
      #000511 70%,
      #00020a 100%
  ) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0, 180, 255, 0.15) !important;
  color: #1e6bff !important;
  padding: 20px !important;
  box-shadow:
    0 0 15px rgba(0, 50, 255, 0.15),
    0 0 35px rgba(0, 100, 255, 0.08);
}

/* 💎 توهج كلمة السعر */
section.flex.p-5 label b {
  color: #1e6bff !important;
  text-shadow:
    0 0 10px #0028ff,
    0 0 25px #0038ff,
    0 0 45px #0048ff,
    0 0 70px #0055ff;
  filter: brightness(2.3) saturate(190%);
  transition: none !important;
}

/* 💎 توهج كلمة الكمية */
section.sticky-product-bar label {
  color: #1e6bff !important;
  text-shadow:
    0 0 10px #0028ff,
    0 0 25px #0038ff,
    0 0 45px #0048ff,
    0 0 70px #0055ff;
  filter: brightness(2.3) saturate(190%);
  transition: none !important;
}

/* 💡 توهج رقم الكمية */
.s-quantity-input-input {
  color: #1e6bff !important;
  background: rgba(0, 40, 60, 0.6) !important;
  border: 1px solid rgba(0, 200, 255, 0.25) !important;
  border-radius: 10px !important;
  text-align: center !important;
  font-weight: 700 !important;
  text-shadow:
    0 0 10px #0028ff,
    0 0 25px #0038ff,
    0 0 45px #0048ff,
    0 0 70px #0055ff;
  filter: brightness(2.3) saturate(190%);
}

/* ➕➖ أزرار الزيادة والنقصان */
.s-quantity-input-button svg path {
  fill: #1e6bff !important;
  filter: brightness(2.1) saturate(190%) drop-shadow(0 0 20px #1e6bff);
  transition: none !important;
}

/* 🛒 زر إضافة للسلة */
button.s-button-element {
  background: linear-gradient(135deg, #0038ff, #001a80) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 100, 255, 0.6) !important;
  font-weight: 700 !important;
  box-shadow:
    0 0 15px rgba(0, 80, 255, 0.4),
    0 0 30px rgba(0, 100, 255, 0.2) !important;
  transition: 0.3s ease;
}
button.s-button-element:hover {
  background: linear-gradient(135deg, #1e6bff, #0048ff) !important;
  color: #fff !important;
  box-shadow:
    0 0 20px rgba(0, 120, 255, 0.6),
    0 0 40px rgba(0, 120, 255, 0.4) !important;
  transform: scale(1.03);
}

/* 💳 قسم طرق الدفع بنفس خلفية المتجر */
.product-page-payment-methods {
  background: radial-gradient(
      circle at center,
      #000814 0%,
      #000511 70%,
      #00020a 100%
  ) !important;
  border: 1px solid rgba(0, 180, 255, 0.15) !important;
  border-radius: 18px !important;
  padding: 20px !important;
  text-align: center;
  box-shadow:
    0 0 15px rgba(0, 50, 255, 0.15),
    0 0 35px rgba(0, 100, 255, 0.08);
}

/* 💠 أيقونات الدفع بدون توهج */
.product-page-payment-methods img {
  filter: brightness(1.3) saturate(140%) !important;
  transition: 0.3s ease;
  border-radius: 10px;
}
.product-page-payment-methods img:hover {
  transform: scale(1.08);
  filter: brightness(1.5) saturate(160%) !important;
}
.product-page-payment-methods,
.product-page-payment-methods * {
  color: #1e6bff !important;
  transition: none !important;
}



/* ✨ تبويبات الوصف والمراجعات */
.s-tabs-header-item {
  color: #9bd8ff !important;
  background: rgba(0, 40, 60, 0.6) !important;
  border: 1px solid rgba(0, 180, 255, 0.2) !important;
  border-radius: 12px !important;
  padding: 10px 20px !important;
  transition: 0.3s ease;
}
.s-tabs-header-item:hover {
  background: rgba(0, 80, 120, 0.7) !important;
  color: #ffffff !important;
}
.s-tabs-active {
  background: linear-gradient(135deg, #0048ff, #0028aa) !important;
  color: #ffffff !important;
  box-shadow: 0 0 25px rgba(0, 80, 255, 0.4);
}


/* ⭐ تعديل لون النجوم إلى رمادي */
.s-rating-stars-btn-star svg path {
  fill: #777b8a !important;
  filter: none !important;
  opacity: 0.7 !important;
  transition: 0.3s ease;
}
.s-rating-stars-btn-star:hover svg path {
  fill: #9aa1b3 !important;
  opacity: 0.9 !important;
}

/* رقم التقييم بجانب النجوم */
.s-reviews-summary-average {
  color: #00e5ff !important;
  text-shadow:
    0 0 10px #0028ff,
    0 0 25px #0038ff,
    0 0 45px #0048ff,
    0 0 70px #0055ff;
  filter: brightness(2.3) saturate(190%);
}
/* 🌌 تنسيق سكشن الوصف والمراجعات بنفس ألوان الخلفية العامة */
.s-tabs-content {
  background: linear-gradient(145deg, rgba(0, 15, 25, 0.95), rgba(0, 25, 35, 0.9)) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 180, 255, 0.15) !important;
  box-shadow:
    0 0 20px rgba(0, 180, 255, 0.2),
    0 0 40px rgba(0, 180, 255, 0.1) !important;
  padding: 25px !important;
  backdrop-filter: blur(6px);
}

/* 🔹 إزالة أي خطوط أو طبقات مكررة */
.s-tabs,
.s-tabs-header,
.s-tabs-content-wrapper,
.s-tabs-content > * {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ✨ توهج خفيف حول آخر طبقة فقط */
.s-tabs-content {
  background: radial-gradient(
      circle at center,
      #000814 0%,
      #000511 70%,
      #00020a 100%
  ) !important;
  border: 1px solid rgba(0, 200, 255, 0.25) !important;
  box-shadow: inset 0 0 180px rgba(0, 60, 255, 0.25);
}


/* 🎯 محاذاة تبويبات (الوصف / المراجعات) في المنتصف */
.s-tabs-header {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  margin: 20px auto !important;
  background: transparent !important;
  border: none !important;
}

/* 💫 تبويبات (الوصف / المراجعات) بلون أزرق متوهج من الأطراف */
.s-tabs-header-item {
  color: #bfe4ff !important;
  background: radial-gradient(circle at top left, rgba(0, 40, 80, 0.7), rgba(0, 20, 40, 0.95)) !important;
  border: 1px solid rgba(0, 140, 255, 0.7) !important;
  border-radius: 12px !important;
  padding: 10px 25px !important;
  font-weight: 600 !important;
  text-shadow: 0 0 10px rgba(0, 160, 255, 0.7);
  box-shadow:
    0 0 10px rgba(0, 120, 255, 0.6),
    0 0 25px rgba(0, 160, 255, 0.3),
    inset 0 0 10px rgba(0, 100, 255, 0.2) !important;
  transition: 0.3s ease;
}

/* ✨ عند التمرير عليه */
.s-tabs-header-item:hover {
  background: radial-gradient(circle at center, rgba(0, 70, 150, 0.9), rgba(0, 40, 90, 0.85)) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 15px rgba(0, 160, 255, 0.8),
    0 0 35px rgba(0, 200, 255, 0.5),
    inset 0 0 12px rgba(0, 150, 255, 0.3) !important;
}

/* 🔷 التبويب النشط (أزرق متوهج أكثر) */
.s-tabs-active {
  background: linear-gradient(135deg, #0050ff, #0026aa) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 180, 255, 0.9) !important;
  box-shadow:
    0 0 20px rgba(0, 180, 255, 0.9),
    0 0 45px rgba(0, 180, 255, 0.5),
    inset 0 0 15px rgba(0, 180, 255, 0.4) !important;
  transform: scale(1.03);
}


/* ⭐ لون نجوم التقييم إلى أصفر متوهّج */
.s-rating-stars-btn-star svg path,
.s-reviews-testimonial__rating svg path {
  fill: #ffd700 !important; /* أصفر ذهبي */
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8))
          drop-shadow(0 0 15px rgba(255, 215, 0, 0.5));
  transition: 0.3s ease;
}

/* ✨ تأثير عند المرور */
.s-rating-stars-btn-star:hover svg path {
  fill: #fff37a !important; /* أصفر فاتح عند التمرير */
  filter: drop-shadow(0 0 12px rgba(255, 235, 120, 0.9))
          drop-shadow(0 0 25px rgba(255, 255, 160, 0.6));
}

/* 💬 تصميم صناديق الاقتباس أو المراجعات */
.s-reviews-testimonial,
blockquote {
  background: radial-gradient(
    circle at center,
    #000814 0%,
    #000511 70%,
    #00020a 100%
  ) !important;
  border: 1px solid rgba(0, 180, 255, 0.25) !important;
  border-radius: 16px !important;
  padding: 25px !important;
  color: #9bd8ff !important;
  font-size: 17px !important;
  line-height: 1.9 !important;
  box-shadow:
    0 0 15px rgba(0, 100, 255, 0.15),
    0 0 40px rgba(0, 150, 255, 0.1) !important;
  backdrop-filter: blur(6px);
  transition: 0.3s ease;
}

/* ✨ عند المرور على الصندوق */
.s-reviews-testimonial:hover,
blockquote:hover {
  box-shadow:
    0 0 25px rgba(0, 180, 255, 0.3),
    0 0 50px rgba(0, 200, 255, 0.15) !important;
  transform: scale(1.02);
}

/* 🩵 لون النص داخل الاقتباس */
.s-reviews-testimonial p,
blockquote p {
  color: #b5e1ff !important;
  text-shadow: 0 0 6px rgba(0, 180, 255, 0.3);
}

/* 🌟 لون النجوم داخل التقييم */
.s-rating-stars-btn-star svg path {
  fill: #ffcc00 !important; /* أصفر متوهج */
  filter: drop-shadow(0 0 8px rgba(255, 230, 0, 0.5));
  transition: 0.3s ease;
}
.s-rating-stars-btn-star:hover svg path {
  fill: #ffe866 !important;
  filter: drop-shadow(0 0 10px rgba(255, 250, 120, 0.8));
}

/* 🧭 قسم "هنا نعزز ثقتك فينا" بنفس خلفية وستايل الاقتباسات */
.bg-\[--t-bg-secondary-clr\] {
  background: radial-gradient(
    circle at center,
    #000814 0%,
    #000511 70%,
    #00020a 100%
  ) !important;
  border: 1px solid rgba(0, 180, 255, 0.25) !important;
  border-radius: 16px !important;
  box-shadow:
    0 0 15px rgba(0, 100, 255, 0.15),
    0 0 40px rgba(0, 150, 255, 0.1) !important;
  color: #9bd8ff !important;
  backdrop-filter: blur(6px);
  padding: 25px !important;
}

/* ❓ تصميم قسم الأسئلة الشائعة بنفس ستايل المتجر */
.faqs-list__item {
  background: radial-gradient(
    circle at center,
    #000814 0%,
    #000511 70%,
    #00020a 100%
  ) !important;
  border: 1px solid rgba(0, 180, 255, 0.25) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  margin-bottom: 1rem !important;
  box-shadow:
    0 0 15px rgba(0, 100, 255, 0.15),
    0 0 35px rgba(0, 150, 255, 0.08) !important;
  color: #9bd8ff !important;
  backdrop-filter: blur(6px);
  transition: 0.3s ease;
}

/* ✨ عند تمرير الماوس */
.faqs-list__item:hover {
  transform: scale(1.02);
  box-shadow:
    0 0 20px rgba(0, 180, 255, 0.3),
    0 0 50px rgba(0, 200, 255, 0.15) !important;
}

/* 💎 عنوان السؤال */
.faqs-list__item label {
  color: #1e6bff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  cursor: pointer;
  text-shadow:
    0 0 10px #0028ff,
    0 0 25px #0038ff,
    0 0 45px #0048ff;
  transition: 0.3s ease;
}

/* 🌟 عند فتح السؤال يكون متوهج */
.faq-container input:checked + .faqs-list__item label {
  color: #1e6bff !important; /* أزرق نيون فاتح */
  text-shadow:
    0 0 10px #0028ff,
    0 0 25px #0038ff,
    0 0 45px #0048ff,
    0 0 70px #0055ff;
  filter: brightness(2.3) saturate(190%);
  transition: none !important;
}

/* 💬 الإجابة */
.faq-answer p {
  color: #b5e1ff !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
  margin-top: 10px;
  text-shadow: 0 0 6px rgba(0, 150, 255, 0.3);
}

/* 🔹 خلفية الأيقونة الزرقاء لما تكون زايد */
.faq-item.sicon-add {
  background: radial-gradient(circle at center, #0030ff 0%, #001a80 80%) !important;
  color: #00e0ff !important; /* لون + */
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 90, 255, 0.6), 0 0 25px rgba(0, 100, 255, 0.3);
}

/* 💠 عند التحويم على الزائد */
label[for^="faq-"]:hover .faq-item.sicon-add {
  box-shadow: 0 0 15px rgba(0, 120, 255, 0.8), 0 0 35px rgba(0, 140, 255, 0.4);
  transform: scale(1.05);
}

/* ⚡ عند الفتح (تحول إلى ناقص) */
.faq-container input:checked + .faqs-list__item label .faq-item.sicon-add {
  background: radial-gradient(circle at center, #0040ff 0%, #0020aa 90%) !important;
  color: #ffffff !important; /* لون الخط داخلها */
  box-shadow:
    0 0 20px #0048ff,
    0 0 40px #005fff,
    0 0 70px #0080ff;
  transform: scale(1.1);
}

/* 🌌 خلفية صفحة السلة بنفس خلفية المتجر */
section.cart-item,
.cart-summary,
#cart-gifting,
#free-shipping {
  background: radial-gradient(circle at center, #000814 0%, #000511 70%, #00020a 100%) !important;
  border: 1px solid rgba(0, 180, 255, 0.15) !important;
  border-radius: 16px !important;
  box-shadow:
    0 0 20px rgba(0, 50, 255, 0.15),
    0 0 40px rgba(0, 80, 255, 0.08);
  color: #9bd8ff !important;
}

/* ✨ نصوص الترويسة والعناوين */
.cart-summary h2,
.cart-summary span,
.cart-summary b,
.cart-summary .text-[--t-text-secondary],
label.s-product-options-option-label,
.s-product-options-option-label b,
.s-product-options-option-label small {
  color: #1e6bff !important;
}

/* 💠 صندوق اختيار الخيارات (اختر، نعم، لا، إلخ) */
.s-product-options-grid-mode-span {
  background: rgba(0, 40, 60, 0.6) !important;
  border: 1px solid rgba(0, 180, 255, 0.2) !important;
  border-radius: 12px !important;
  color: #9bd8ff !important;
  font-weight: 600;
  transition: 0.3s ease;
}

.s-product-options-grid-mode label:hover .s-product-options-grid-mode-span {
  background: rgba(0, 80, 120, 0.8) !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(0, 120, 255, 0.5);
}

/* ✅ لما تختار الخيار */
.s-product-options-grid-mode input:checked + .s-product-options-grid-mode-span {
  background: linear-gradient(135deg, #0048ff, #001f80) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 20px rgba(0, 80, 255, 0.8),
    0 0 40px rgba(0, 120, 255, 0.4);
  transform: scale(1.03);
}

/* 🔹 السعر الإجمالي والمجموع الفرعي */
#sub-total,
[data-cart-total],
.item-price,
.item-total {
  color: #1e6bff !important;
  font-weight: 700 !important;
}

/* 💳 أزرار مثل "إتمام الطلب" */
button.s-button-element {
  background: linear-gradient(135deg, #0038ff, #001a80) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 100, 255, 0.6) !important;
  font-weight: 700 !important;
  border-radius: 30px !important;
  box-shadow:
    0 0 15px rgba(0, 80, 255, 0.4),
    0 0 30px rgba(0, 100, 255, 0.2) !important;
  transition: 0.3s ease;
}

button.s-button-element:hover {
  background: linear-gradient(135deg, #1e6bff, #0048ff) !important;
  color: #fff !important;
  box-shadow:
    0 0 20px rgba(0, 120, 255, 0.6),
    0 0 40px rgba(0, 120, 255, 0.4) !important;
  transform: scale(1.03);
}

/* 💎 زر إتمام الطلب بنفس ستايل زر إضافة للسلة */
#cart-submit button.s-button-element,
.s-button-element.s-button-primary,
.s-button-element.s-button-btn {
  background: linear-gradient(135deg, #0038ff, #001a80) !important;
  color: #ffffff !important; /* 🔹 النص أبيض */
  border: 1px solid rgba(0, 100, 255, 0.6) !important;
  font-weight: 700 !important;
  border-radius: 30px !important;
  box-shadow:
    0 0 15px rgba(0, 80, 255, 0.4),
    0 0 30px rgba(0, 100, 255, 0.2) !important;
  transition: 0.3s ease;
}

/* ✨ عند المرور عليه */
#cart-submit button.s-button-element:hover,
.s-button-element.s-button-primary:hover,
.s-button-element.s-button-btn:hover {
  background: linear-gradient(135deg, #1e6bff, #0048ff) !important;
  color: #ffffff !important; /* 🔹 يظل أبيض حتى عند التمرير */
  box-shadow:
    0 0 20px rgba(0, 120, 255, 0.6),
    0 0 40px rgba(0, 120, 255, 0.4) !important;
  transform: scale(1.03);
}

/* 🎮 تنسيق عداد الكمية (بدون خلفية بيضاء) */
.s-quantity-input-container {
  background: linear-gradient(145deg, #020c1f, #000814) !important;
  border: 1px solid #004cff !important;
  border-radius: 40px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 10px rgba(0, 50, 255, 0.3),
    inset 0 0 10px rgba(0, 80, 255, 0.2) !important;
}

/* 🔹 الأزرار (+ و -) */
.s-quantity-input-button {
  background: transparent !important;
  color: #1e6bff !important;
  border: none !important;
  transition: 0.3s ease;
}

.s-quantity-input-button:hover {
  color: #00aaff !important;
  text-shadow: 0 0 12px #0066ff, 0 0 24px #004cff !important;
}

/* 🔵 المربع الأوسط (الرقم) */
.s-quantity-input-input {
  background: linear-gradient(145deg, #0024a8, #00134d) !important;
  color: #00e5ff !important;
  border: 1px solid #0072ff !important;
  border-radius: 12px !important;
  text-align: center;
  font-weight: 700 !important;
  width: 40px !important;
  height: 35px !important;
  box-shadow: 0 0 15px rgba(0, 110, 255, 0.3) !important;
}

/* 🌌 خلفية الفوتر الأساسية */
.store-footer,
.store-footer__inner,
.footer-copyright,
.s-contacts,
.s-menu-footer-list,
.salla-social,
.s-apps-icons,
.s-payments-list-wrap {
  background: linear-gradient(180deg, #000c1a 0%, #000513 100%) !important;
  color: #d0e2ff !important;
}

/* ✨ إزالة أي خلفيات بيضاء */
.store-footer * {
  background: transparent !important;
  border-color: rgba(0, 60, 255, 0.2) !important;
}

/* 🩵 النصوص */
.store-footer p,
.store-footer span,
.store-footer a,
.store-footer small,
.store-footer .unicode {
  color: #b8cfff !important;
  transition: 0.3s ease;
}
.store-footer a:hover {
  color: #1e6bff !important;
  text-shadow: 0 0 10px rgba(30, 107, 255, 0.7);
}

/* 💎 العناوين */
.store-footer,
.store-footer {
  color: #1e6bff !important;
  text-shadow: 0 0 8px rgba(30, 107, 255, 0.6);
}

/* 🔹 الأيقونات */
.store-footer svg path {
  fill: #1e6bff !important;
  transition: 0.3s ease;
}
.store-footer a:hover svg path {
  fill: #00aaff !important;
  filter: drop-shadow(0 0 6px #0088ff);
}

/* ⚡ حدود خفيفة متوهجة للفوتر */
.store-footer {
  border-top: 1px solid rgba(0, 85, 255, 0.35);
  box-shadow: 0 -8px 30px rgba(0, 60, 255, 0.2);
  padding: 60px 0 !important;
}

/* 🪄 أسفل الحقوق */
.footer-copyright {
  background: #000814 !important;
  border-top: 1px solid rgba(0, 85, 255, 0.25);
  color: #9dbaff !important;
  box-shadow: 0 -5px 20px rgba(0, 85, 255, 0.15);
  text-align: center;
}

.footer-copyright a {
  color: #1e6bff !important;
  font-weight: 600;
}

/* 💳 شعارات الدفع */
.s-payments-list img {
  filter: drop-shadow(0 0 5px rgba(0, 120, 255, 0.4));
  transition: 0.3s;
}
.s-payments-list img:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 0 10px rgba(30, 107, 255, 0.7));
}

/* ====== الهيدر البلوري ====== */
header, .main-header, .store-header {
  backdrop-filter: blur(16px);
  background: rgba(0, 15, 30, 0.6); /* خلفية شبه شفافة */
  border-bottom: 1px solid rgba(0, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 255, 255, 0.08);
  transition: all 0.3s ease-in-out;
}


/* تنسيق النص داخل الهيدر */
header::after {
  content: "أهلاً صديق هاوكس";
  color: #1e6bff !important; /* أزرق نيون فاتح */
    
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 1px;
  text-shadow:
      0 0 10px #0028ff,
      0 0 25px #0038ff,
      0 0 45px #0048ff,
      0 0 70px #0055ff;
  filter: brightness(2.3) saturate(190%);
  transition: none !important;
  display: block;
  text-align: center;
  padding: 15px 0;
  font-family: "Cairo", sans-serif;
}