/* ================== الأساس ================== */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Poppins', 'Arial', sans-serif;
  color: #fff;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  width: 100vw;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.6;
  background: linear-gradient(320deg,#1a2a40,#165a63,#0f3d3e,#25c290,#2e2e3a,#1b1f3b);
  background-size: 600% 600%;
  animation: gradientAnimation 15s ease infinite;
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(320deg,#1a2a40,#165a63,#0f3d3e,#25c290,#2e2e3a,#1b1f3b);
  background-size: 600% 600%;
  animation: gradientAnimation 15s ease infinite;
  will-change: background-position;
}
/* القاعدة العامة خطيرة على عناصر الهيدر — نبقيها خارج الهيدر فقط */
*{ box-sizing:border-box; margin:0; padding:0; max-width:100vw; }

@keyframes gradientAnimation{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

html{ scroll-behavior: smooth; }
button{ background:#25c290; color:#fff; border:0; padding:10px 20px; border-radius:8px; cursor:pointer; transition:transform .3s ease; }
button:hover{ transform: translateY(-3px); }
.content,h1,h2,p,a{ position:relative; z-index:10; color:#25c290; font-weight:900; }
h1,h2{ background:linear-gradient(45deg,#25c290,#16a085); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

/* ================== بطاقات المنتجات ================== */
.s-product-card, .s-product-card-entry{
  overflow:hidden !important;
  border-radius:16px !important;
  background:transparent !important;
  border:none !important;
}
.s-product-card-content{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#0f1b2a !important;
  color:#eaf2ff;
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
}
.s-product-card-content::before{
  content:"";
  position:absolute; inset:0;
  z-index:0; pointer-events:none;
  border-bottom-left-radius:inherit;
  border-bottom-right-radius:inherit;
  background:linear-gradient(320deg,#1a2a40,#165a63,#0f3d3e,#25c290,#2e2e3a,#1b1f3b);
  background-size:600% 600%;
  animation: cardGradientMove 15s ease infinite;
}
.s-product-card-content>*{ position:relative; z-index:1; }
@keyframes cardGradientMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ================== آراء العملاء ================== */
.s-reviews-testimonial{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  padding:24px 28px;
  background:#0f1b2a !important;
  color:#eaf2ff;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.s-reviews-testimonial::before{
  content:"";
  position:absolute; inset:0;
  z-index:0; pointer-events:none;
  background:linear-gradient(320deg,#1a2a40,#165a63,#0f3d3e,#25c290,#2e2e3a,#1b1f3b);
  background-size:600% 600%;
  animation: reviewsGradient 15s ease infinite;
}
.s-reviews-testimonial__inner,
.s-reviews-testimonial__text,
.s-reviews-testimonial__name_wrapper,
.s-reviews-testimonial__avatar{ position:relative; z-index:1; }
@keyframes reviewsGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ================== الشريط المثبّت أسفل صفحة المنتج ================== */
.sticky-product-bar{
  position:fixed !important;
  inset-inline: 8px;
  inset-block-end: calc(8px + env(safe-area-inset-bottom));
  z-index:2147483647 !important;
  isolation:isolate;
  border-radius:18px !important;
  padding:14px 16px !important;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  transform: translateZ(0);
}
.sticky-product-bar::before{
  content:"";
  position:absolute; inset:0; z-index:0; border-radius:inherit;
  background: linear-gradient(320deg,#1a2a40,#165a63,#0f3d3e,#25c290,#2e2e3a,#1b1f3b);
  background-size: 600% 600%;
  animation: gradientAnimation 15s ease infinite;
  filter: brightness(1.1);
  pointer-events:none;
}
.sticky-product-bar *{ position:relative; z-index:1; }
.sticky-product-bar.is-hidden{
  opacity:0; transform:translateY(20px); pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}

/* (اختياري) صندوق الكمية */
.sticky-product-bar_quantity{
  display:flex; align-items:center; justify-content:space-between;
  flex:1; min-width:0;
  border:2px solid #25c290 !important;
  border-radius:14px !important;
  background: rgba(0,0,0,.25) !important;
  padding:12px 16px; margin-bottom:12px;
  color:#fff; font-weight:700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.sticky-product-bar_quantity button{
  background:transparent !important; border:none !important;
  color:#25c290 !important; font-size:28px; cursor:pointer; flex-shrink:0;
}
.sticky-product-bar_quantity input[type="number"]{
  flex:1; background:transparent !important; border:none !important;
  color:#fff !important; text-align:center; font-size:22px; font-weight:700; min-width:40px;
}

/* زر "إضافة للسلة" — مع لمعة وبروز */
.sticky-product-bar .s-button-btn.s-button-primary{
  background: linear-gradient(135deg,#25c290,#16a085) !important;
  color:#fff !important; border:none !important;
  border-radius:14px !important; padding:14px 18px !important;
  font-weight:800 !important; position:relative; overflow:hidden;
  box-shadow:0 6px 15px rgba(37,194,144,.5), 0 2px 6px rgba(0,0,0,.4);
  transition: transform .3s ease, box-shadow .3s ease;
}
.sticky-product-bar .s-button-btn.s-button-primary::after{
  content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
  background: linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
  transform: skewX(-25deg); animation: shineEffect 3s infinite;
}
@keyframes shineEffect{ 0%{left:-75%} 100%{left:125%} }
.sticky-product-bar .s-button-btn.s-button-primary:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 10px 20px rgba(37,194,144,.6),0 4px 8px rgba(0,0,0,.4);
}

/* زر "اشتري الآن" — إطار فقط */
.sticky-product-bar .s-button-btn.s-button-outline{
  background:transparent !important; color:#25c290 !important;
  border:2px solid #25c290 !important; border-radius:14px !important;
  padding:14px 18px !important; font-weight:800 !important;
  transition: transform .3s ease, box-shadow .3s ease;
}
.sticky-product-bar .s-button-btn.s-button-outline:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 8px 18px rgba(37,194,144,.5);
}

/* الأقسام تحت الشريط تبقى فوق الخلفية المتحركة */
.product-description, .s-product-description,
.s-reviews, .s-reviews-container, .reviews, .reviews-latest, .s-reviews-latest,
.s-add-review, .add-review,
.product-suggestions, .s-product-suggestions, .suggestions, .recommended,
.related-products, .s-related-products, .s-products-slider,
footer, .site-footer, .s-footer{
  position:relative !important; z-index:1 !important;
  transform:none !important; filter:none !important; perspective:none !important; will-change:auto !important; overflow:visible !important;
}

/* ================== الهيدر بنفس تدرّج المتجر ================== */
:root{
  --brand-1:#25c290;
  --brand-2:#16a085;
  --ink:#eaf2ff;
  --grad: linear-gradient(320deg,#1a2a40,#165a63,#0f3d3e,#25c290,#2e2e3a,#1b1f3b);
}

header{
  position: relative;         /* غير لاصق */
  top: auto;
  z-index: 200;               /* كافي للظهور فوق المحتوى */
  overflow: visible;
  isolation: isolate;
  background: transparent !important;
}
header::before{
  content:"";
  position:absolute; inset:0;
  background: var(--grad);
  background-size: 600% 600%;
  animation: headerGradientMove 15s ease infinite;
  z-index: -1; pointer-events:none;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
header::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 30% 0%, rgba(255,255,255,.08), transparent 70%);
  mix-blend-mode: overlay; pointer-events:none; z-index:-1;
}
@keyframes headerGradientMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ألوان عناصر الهيدر */
header a, header span, header i, header svg{
  color: var(--ink) !important;
  fill: var(--ink) !important;
  transition: color .2s ease, fill .2s ease, opacity .2s ease;
}
header a:hover{ color: var(--brand-1) !important; }

/* إزالة أي خلفيات/ظلال داخل شريط الناف */
header .main-nav-container,
header .main-nav-container.bg-white,
header .bg-white,
header .shadow-default{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* داخل الهيدر: لا نسمح لقاعدة max-width العامة بتخريب القياسات */
header *, .s-header *,
header .main-nav-container *{
  max-width: none !important;
}

/* زر الحساب — إزالة المربع/الخلفية وجعله دائريًا فقط */
header salla-user-menu { position: relative; }

header salla-user-menu .user-menu-trigger,
header salla-user-menu .trigger,
header salla-user-menu .user-menu__trigger,
header .user-menu-trigger,
header .user-menu__trigger,
header .user-menu-toggler,
header .user-menu-trigger-slot,
header .user-menu-wrapper,
header .user-menu-trigger[style],
header .user-menu__trigger[style],
header .user-menu-toggler[style]{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;

  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  line-height: 1 !important;
}
header .user-menu-trigger::before,
header .user-menu-trigger::after,
header .user-menu__trigger::before,
header .user-menu__trigger::after,
header .user-menu-toggler::before,
header .user-menu-toggler::after,
header .user-menu-trigger-slot::before,
header .user-menu-trigger-slot::after{
  content: none !important;
}
header .user-menu-trigger img,
header .user-menu__trigger img,
header .user-menu-toggler img,
header .user-menu-trigger [class*="avatar"],
header .user-menu__trigger [class*="avatar"]{
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  object-fit: cover;
}

/* قائمة الحساب المنسدلة تبقى فوق كل شيء */
header .user-menu__dropdown,
header .user-menu .user-menu__dropdown,
.user-menu__menu{
  position: absolute;
  z-index: 2147483600 !important;
  overflow: visible !important;
}
/* ===== خلفية قسم المميزات (A7la Store™ style) ===== */
.s-block--features__item {
  background: linear-gradient(320deg,#1a2a40,#165a63,#0f3d3e,#25c290,#2e2e3a,#1b1f3b);
  background-size: 600% 600%;
  animation: gradientAnimation 15s ease infinite;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.s-block--features__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(37,194,144,0.4);
}

.s-block--features__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 40%,
    rgba(255,255,255,0) 80%
  );
  animation: shineEffect 4s infinite linear;
}

/* حركة التدرج العام */
@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* حركة اللمعة */
@keyframes shineEffect {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* شفافية الهيدر فقط بدون لمس بقية أقسام الموقع */
.store-header .main-nav-container.bg-white {
  background: transparent !important;
  box-shadow: none !important;
}

/* إزالة الخلفية والحدود من مكوّن الحساب فقط */
header .s-user-menu-trigger,
header .s-user-menu-avatar-wrap,
header .s-user-menu-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* صورة الحساب داخل المكوّن */
header .s-user-menu-avatar-wrap img.s-user-menu-trigger-avatar {
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* إلغاء أي ظل أو لون داخلي إضافي */
header .s-user-menu-trigger::before,
header .s-user-menu-trigger::after {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* زر المشاركة بخلفية متدرجة بنفس نمط المتجر */
.s-social-share-btn .s-button-element {
  background: linear-gradient(320deg,#1a2a40,#165a63,#0f3d3e,#25c290,#2e2e3a,#1b1f3b) !important;
  background-size: 600% 600%;
  animation: gradientAnimation 15s ease infinite;
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* لمعان خفيف متحرك */
.s-social-share-btn .s-button-element::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 40%,
    rgba(255,255,255,0) 80%
  );
  animation: shineEffect 4s infinite linear;
  border-radius: inherit;
  pointer-events: none;
}

/* تأثير عند المرور */
.s-social-share-btn .s-button-element:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(37,194,144,0.4);
}

/* إجبار التحريك الفعلي لتدرّج السعر */
@keyframes priceGradientMove {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 50% 75%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 25%; }
  100% { background-position: 0% 50%; }
}

section.flex.bg-white.rounded-md.rounded-b-none {
  background-image: linear-gradient(320deg,#1a2a40,#165a63,#0f3d3e,#25c290,#2e2e3a,#1b1f3b) !important;
  background-size: 600% 600% !important;
  animation: priceGradientMove 12s linear infinite !important;
  will-change: background-position;
  transform: translateZ(0); /* يمنع التجمّد */
}
/* ===== خلفية قسم التعليقات (A7la Store™ style) ===== */
.s-comments-product {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 24px;
  background: linear-gradient(320deg,#1a2a40,#165a63,#0f3d3e,#25c290,#2e2e3a,#1b1f3b);
  background-size: 600% 600%;
  animation: commentsGradientMove 15s ease infinite;
  color: #eaf2ff;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  isolation: isolate;
}

/* لمعان خفيف متحرك */
.s-comments-product::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 40%,
    rgba(255,255,255,0) 80%
  );
  animation: shineEffect 4s infinite linear;
  border-radius: inherit;
}

.s-comments-product * {
  position: relative;
  z-index: 1;
}

/* حركة الخلفية */
@keyframes commentsGradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* لون النص داخل صناديق الإدخال بلون شعار المتجر */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea,
.s-comment-form-input,
.s-review-form textarea,
.s-review-form input {
  color: #25c290 !important;       /* لون النص */
  caret-color: #25c290 !important; /* لون مؤشر الكتابة */
}

/* لون النص الإرشادي (placeholder) */
input::placeholder,
textarea::placeholder {
  color: rgba(37,194,144,0.55) !important; /* نفس اللون بتعتيم بسيط */
}

/* ===== خلفية كاملة لمدخل خيار المنتج (A7la Store™) ===== */
.s-product-options-option-container {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 16px;
  background: linear-gradient(320deg,#1a2a40,#165a63,#0f3d3e,#25c290,#2e2e3a,#1b1f3b);
  background-size: 600% 600%;
  animation: optionContainerGradient 15s ease infinite;
  box-shadow: 0 0 12px rgba(0,0,0,.35);
  isolation: isolate;
}

/* لمعان ناعم متحرك */
.s-product-options-option-container::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 40%,
    rgba(255,255,255,0) 80%
  );
  animation: shineEffect 4s infinite linear;
  pointer-events: none;
}

/* المحتوى داخلها فوق اللمعة */
.s-product-options-option-container * {
  position: relative;
  z-index: 1;
}

/* حركة التدرّج */
@keyframes optionContainerGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* إزالة الخلفية والظل الأبيض الناتج من نظام Tailwind في حقول الإدخال */
.s-product-options-wrapper,
.s-product-options-option-container,
.s-product-options-option-content {
  --tw-ring-offset-color: transparent !important;
  --tw-shadow: none !important;
  --tw-shadow-colored: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
}
/* حركة بطيئة ومعاكسة عن خلفية المتجر */
@keyframes optionContainerGradient {
  0% { background-position: 100% 50%; }
  50% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* تطبيق الحركة الجديدة بخلفية أبطأ */
.s-product-options-option-container {
  animation: optionContainerGradient 30s ease infinite; /* ضعف المدة */
}