/* ==============================================================
   هوية اليوم الوطني السعودي 96 — «عزّنا بطبعنا» 2026
   متجر يو سايز | usize.co
   --------------------------------------------------------------
   النسخة النهائية: جماليات الأخضر + الذهبي (السدو)،
   مركّبة على الكلاسات الحقيقية لثيمك بعد فحصه عنصراً عنصراً.
   يعمل كـ:  (أ) ملف ثيم: src/assets/styles/06-national-day/national-day.scss
            (ب) أو CSS مخصّص في لوحة سلة (الكود كله CSS نقي).
   لإيقاف الهوية: احذف الملف/الكود واحفظ.

   لوحة الألوان:
   أخضر سعودي #006C35 | أخضر حيوي #2FA84F | أخضر غامق #08351f
   ذهبي السدو #B69F64 | عاجي #F4EEDD | قاعدة غامقة #061f14
   ============================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root{
  /* ===== متغيّرات الهوية ===== */
  --nd-green:      #006C35;
  --nd-green-2:    #2FA84F;
  --nd-green-deep: #08351f;
  --nd-gold:       #B69F64;
  --nd-gold-2:     #cdb888;
  --nd-cream:      #F4EEDD;
  --nd-dark:       #061f14;

  /* ===== الخط (الخط السعودي ← IBM Plex Sans ← Harir) ===== */
  --font-main: 'The Saudi', 'Saudi', 'IBM Plex Sans Arabic', 'Harir', 'DINNextLTArabic', sans-serif;

  /* ===== إعادة تعيين متغيّرات الثيم ===== */
  --color-primary:         #006C35;
  --color-primary-d:       #08351f;
  --color-primary-dark:    #08351f;
  --color-primary-l:       #2FA84F;
  --color-primary-light:   #2FA84F;
  --color-primary-reverse: #ffffff;
  --store-text-secondary:  #006C35;

  /* الهيدر والتنقّل */
  --header-bg:             #08351f;
  --header-text-color:     #F4EEDD;
  --mainnav-bg:            #08351f;
  --mainnav-text-color:    #F4EEDD;
  --topnav-bg:             #061f14;
  --topnav-text-color:     #F4EEDD;
  --bottom-nav-bg:         #08351f;
  --bottom-nav-text-color: #F4EEDD;

  /* الفوتر */
  --footer-bg:             #08351f;
  --footer-text-color:     #F4EEDD;
  --bottom-footer-bg:      #061f14;

  /* المنتجات */
  --product-border-color:       #B69F64;
  --product-enhanced-btn-bg:    #08351f;
  --product-enhanced-btn-color: #ffffff;

  /* العدّاد التنازلي + نقاط السلايدر ذهبية */
  --countdown-color:       #B69F64;
  --countdown-border-color:#B69F64;
  --swiper-theme-color:    #B69F64;
}

/* الخط على كامل المتجر */
body, .store-header, .store-footer,
h1,h2,h3,h4,h5,h6, button, input, textarea, select {
  font-family: var(--font-main);
}

/* ==============================================================
   (1) شريط علوي احتفالي — «عزّنا بطبعنا»
   ============================================================== */
body::before{
  content:"عِزُّنا بطبعنا  •  اليوم الوطني السعودي ٩٦  •  تخفيضات الوطن";
  display:block; text-align:center;
  font-family:var(--font-main); font-weight:700; font-size:14px; letter-spacing:.3px;
  color:var(--nd-cream);
  padding:9px 12px;
  background:linear-gradient(90deg,var(--nd-dark),var(--nd-green) 50%,var(--nd-dark));
  border-bottom:2px solid var(--nd-gold);
  position:relative; z-index:60;
}

/* ==============================================================
   (2) الهيدر — أخضر غامق + خط ذهبي (سدو)
   ============================================================== */
.store-header, header.store-header{
  background:var(--nd-green-deep) !important;
  border-bottom:3px solid var(--nd-gold) !important;
}
.store-header .topnav-link-item, .store-header .menu-item{ color:var(--nd-cream); }

/* ==============================================================
   (3) الأزرار الأساسية / أضف للسلة
   ============================================================== */
.btn--primary, .btn--add-product-button,
salla-add-product-button .btn--add-product-button,
.s-button-element--primary{
  background:linear-gradient(180deg,var(--nd-green),var(--nd-green-deep)) !important;
  color:#fff !important; border:none !important;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn--primary:hover, .btn--add-product-button:hover{
  box-shadow:0 6px 18px rgba(0,108,53,.35); transform:translateY(-1px);
}
.btn--outline-primary, .btn--outline{
  border-color:var(--nd-green) !important; color:var(--nd-green) !important;
}
/* زر باقة العودة (Mix & Match) */
.zudapp-mix-match__bar-btn{ background:var(--nd-green) !important; color:#fff !important; }
.zudapp-mix-match__bar-btn:hover{ background:var(--nd-green-deep) !important; }

/* ==============================================================
   (4) عناوين الأقسام — ماسة ذهبية + خط سدو  (الكلاس الحقيقي: s-block__title)
   ============================================================== */
.s-block__title{ position:relative; }
.s-block__title h2::before{
  content:"\25C6"; display:block; color:var(--nd-gold);
  font-size:12px; line-height:1; margin:0 0 8px; opacity:.9;
}
.s-block__title h2::after{
  content:""; display:block; width:72px; height:3px; margin-top:12px; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--nd-gold) 20%,var(--nd-gold) 80%,transparent);
}

/* ==============================================================
   (5) كرت العروض المخصّص (custom-salla-product-card)
   خلفيته خضراء غامقة — كلاساته product-card__* — هنا كانت «البلاوي»
   ============================================================== */
custom-salla-product-card .product-card,
.product-card.has-image{
  background:#ffffff !important;                        /* بدون لون — خلفية بيضاء نظيفة */
  border:1px solid rgba(182,159,100,.45) !important;   /* حدّ ذهبي خفيف للهوية */
}
/* اسم المنتج — أخضر غامق بولد واضح على الأبيض */
custom-salla-product-card .product-card__title a,
.product-card__title a{ color:var(--nd-green-deep) !important; font-weight:700 !important; }

/* توحيد ارتفاع أسماء المنتجات — سطران ثابتان بنقاط (…) بدون JS.
   الاسم الكامل يبقى في الكود (سيو + قارئ الشاشة سليم)، والقصّ بصري فقط. */
.product-card__title{
  height:4em !important;          /* ارتفاع ثابت = ثلاثة أسطر → الأسماء متحاذية */
  min-height:4em !important;
  overflow:hidden !important;
  margin-bottom:8px !important;
}
.product-card__title a{
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;   /* ثلاثة أسطر ليظهر الاسم كاملاً */
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:normal !important;
  font-size:12px !important;         /* خط أصغر ليتّسع الاسم كاملاً */
  line-height:1.35 !important;
}

/* ---- محاذاة عمودية موحّدة للكرت (flexbox) ----
   الكرت عمود مرن، والمحتوى يملأ الارتفاع، وزر «أضف للسلة» ينزل لأسفل الكرت
   فتتحاذى أزرار الشراء بين كل الكروت مهما اختلف عدد الخيارات. */
custom-salla-product-card{ display:flex !important; height:100% !important; }
custom-salla-product-card > .product-card{ width:100% !important; }
custom-salla-product-card .product-card,
.product-card.has-image{
  display:flex !important; flex-direction:column !important; height:100% !important;
}
.product-card__content{ flex:1 1 auto !important; }
/* زر «أضف للسلة» يلتصق بأسفل الكرت (محاذاة موحّدة) */
.product-card__buttons{ margin-top:auto !important; }

/* السعر داخل الكرت: أخضر حيوي بولد على الأبيض */
custom-salla-product-card .total-price,
.product-card .total-price{ color:var(--nd-green-2) !important; font-weight:800 !important; font-size:1.05rem !important; }
/* السعر القديم (المشطوب) — رمادي مقروء */
custom-salla-product-card .before-price,
.product-card .before-price{ color:#9aa0a6 !important; }

/* ---- تثبيت ارتفاع صورة المنتج (الحل الجذري لمحاذاة الأسماء) ----
   على الجوال ارتفاع الصور يختلف حسب أبعاد كل منتج، فيبدأ الاسم من مستوى مختلف.
   نخلي الصورة مربّعة موحّدة الارتفاع → الاسم يبدأ دائماً من نفس المكان تحتها.
   object-fit:contain يعرض المنتج كامل بدون قص أو تشويه. */
.product-card__image{
  position:relative !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  overflow:hidden !important;
}
.product-card__image img,
.product-card__image .main-image,
.product-card__image .second-image{
  width:100% !important; height:100% !important; object-fit:contain !important;
}

/* شارة العرض داخل الكرت → ذهبية بنص غامق + طبقة فوق الصورة (لا تدفع الاسم) */
custom-salla-product-card .product-card__promotion,
.product-card__promotion{
  background:var(--nd-gold) !important; color:var(--nd-green-deep) !important;
  position:absolute !important;
  bottom:8px !important; right:8px !important; top:auto !important; left:auto !important;
  z-index:3 !important; margin:0 !important;
  max-width:calc(100% - 16px);
}

/* خيارات المنتج (المقاسات/الألوان) — كانت خلايا فارغة خضراء.
   نخليها بيلز واضحة: شفافة فاتحة + حدّ ذهبي + نص عاجي */
custom-salla-product-card salla-product-options,
.product-card salla-product-options{ background:transparent !important; }
custom-salla-product-card .s-product-options-wrapper,
.product-card .s-product-options-wrapper{ color:var(--nd-green-deep) !important; }
custom-salla-product-card [class*="s-product-options"] button,
.product-card [class*="s-product-options"] button,
.product-card__options button{
  background:#ffffff !important;
  border:1px solid var(--nd-green) !important;
  color:var(--nd-green-deep) !important;
}
custom-salla-product-card [class*="s-product-options"] button:hover,
.product-card__options button:hover{
  background:var(--nd-gold) !important; color:var(--nd-green-deep) !important;
  border-color:var(--nd-gold) !important;
}

/* زر «أضف إلى السلة» داخل الكرت — ذهبي بنص غامق ليبرز (فخامة) */
custom-salla-product-card .product-card__addToCart .s-button-element,
.product-card__addToCart .s-button-solid,
.product-card__addToCart .s-button-element{
  background:var(--nd-gold) !important; color:var(--nd-green-deep) !important;
  border:none !important; font-weight:700 !important;
}
custom-salla-product-card .product-card__addToCart .s-button-element:hover{
  background:var(--nd-gold-2) !important;
}
/* أيقونة المفضلة واضحة على الأبيض */
custom-salla-product-card .btn--wishlist svg{ color:var(--nd-green) !important; }

/* ==============================================================
   (6) بطاقات الثيم البيضاء (s-product-card) — لو استُخدمت في بلوكات أخرى
   ============================================================== */
.s-product-card{ border:1px solid rgba(182,159,100,.30) !important; }
.s-product-card:hover{ border-color:var(--nd-gold) !important; box-shadow:0 10px 28px rgba(0,108,53,.12) !important; }
.s-product-card-price, .s-product-card-sale-price{ color:var(--nd-green-2) !important; font-weight:700; }

/* ==============================================================
   (7) صفحة المنتج (single) — على خلفية بيضاء
   ============================================================== */
.container--product-details .total-price,
.product-single .total-price{ color:var(--nd-green-2) !important; }
.container--product-details .before-price{ color:#9aa0a6 !important; }
.product-single__title{ color:var(--nd-green-deep) !important; }
.promotion-title{ background:var(--nd-gold) !important; color:var(--nd-green-deep) !important; }
.s-tabs-header .active, .s-tabs-header [aria-selected="true"]{
  color:var(--nd-green) !important; border-color:var(--nd-green) !important;
}
.sticky-product-bar__btn .btn{
  background:linear-gradient(180deg,var(--nd-green),var(--nd-green-deep)) !important; color:#fff !important;
}

/* ==============================================================
   (8) آراء العملاء — إظهار النص ولونه واضح
   ============================================================== */
.s-reviews-testimonial{ background:#fff !important; }
.s-reviews-testimonial__text,
.s-reviews-testimonial__text p,
.s-reviews-testimonial__text .text-gray-700{ color:#374151 !important; display:block !important; }
.s-reviews-testimonial__name_wrapper .font-bold,
.s-reviews-testimonial__info .text-gray-900{ color:var(--nd-green-deep) !important; }
.s-reviews-testimonial__icon svg{ fill:var(--nd-gold) !important; }
.s-reviews-header{ color:var(--nd-green-deep) !important; }

/* ==============================================================
   (9) الفوتر — أخضر غامق + خط ذهبي علوي
   ============================================================== */
.store-footer, footer.store-footer{
  background:linear-gradient(180deg,var(--nd-green-deep),var(--nd-dark)) !important;
  color:var(--nd-cream) !important;
  border-top:3px solid var(--nd-gold) !important;
}
.store-footer a{ color:var(--nd-cream) !important; }
.store-footer a:hover{ color:#fff !important; }
.store-footer h3, .store-footer h4{ color:#fff !important; }
.copyright-text p{ color:rgba(244,238,221,.75) !important; }

/* ==============================================================
   (10) العدّاد التنازلي (عروض اليوم الوطني)
   ============================================================== */
.s-count-down, salla-count-down, [class*="countdown"]{ --countdown-color:var(--nd-gold); }

/* ==============================================================
   (11) تحسينات جمالية لصفحة المنتج + إصلاحات ألوان النصوص
   (النص كان أبيض على أبيض في بعض العناصر — نثبّت لون داكن واضح)
   ============================================================== */
/* لون نص المحتوى الأساسي (كان أبيض على أبيض) */
:root{ --store-text-primary:#292929; }
.product-single-top-description,
.product-single-top-description *,
.s-product-options-grid-mode-span,
.s-product-options-option-label{ color:#292929 !important; }

/* عنوان المنتج + خط هوية (أخضر ← ذهبي) */
.product-single__title{
  color:var(--nd-green-deep) !important;
  font-weight:800 !important;
  position:relative; padding-bottom:12px !important;
}
.product-single__title::after{
  content:""; display:block; width:80px; height:3px; margin-top:12px; border-radius:3px;
  background:linear-gradient(90deg, var(--nd-green), var(--nd-gold));
}

/* السعر أبرز وأوضح */
.container--product-details .total-price,
.product-single .total-price{ color:var(--nd-green-2) !important; font-weight:800 !important; font-size:1.7rem !important; }
.container--product-details .before-price{ color:#9aa0a6 !important; }

/* صندوق الشراء بلمسة هوية (إطار ذهبي خفيف + خلفية ناعمة)
   مهم: مخصّص لصفحة المنتج فقط — لأن كرت المنتج يحتوي فورم بنفس الكلاس
   .product-form، ولو ما خصّصناه يصبغ محتوى الكرت فاتح ويخفي الاسم. */
.container--product-details .product-form,
.product-single .product-form{
  background:linear-gradient(180deg,#f6faf7,#eef5f0) !important;
  border:1px solid rgba(182,159,100,.45) !important;
  border-radius:16px !important;
  padding:18px !important;
}

/* بانر الكاش باك — قيمة بلون الهوية (بدل البنفسجي) وأيقونة واضحة */
.s-cashback-banner-value{ color:var(--nd-green-deep) !important; font-weight:700 !important; }
.s-cashback-banner-icon .icon,
.s-cashback-banner-inner-icon{ color:#ffffff !important; }

/* عناوين أقسام صفحة المنتج (المواصفات، الوصف…) */
.s-blocks-wrapper h2,
.product__description-title{ color:var(--nd-green-deep) !important; }

/* ==============================================================
   (12) نقش السدو الهندسي — توقيع هوية اليوم الوطني 2026
   طبقة خفيفة جداً (لا تؤثر على الوضوح) في الشريط والهيدر والفوتر والبانر
   ============================================================== */
:root{
  --nd-sadu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg fill='none' stroke='%23B69F64' stroke-width='1' opacity='0.4'%3E%3Cpath d='M18 2 L34 18 L18 34 L2 18 Z'/%3E%3Cpath d='M18 10 L26 18 L18 26 L10 18 Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* الشريط العلوي — النقش فوق التدرّج */
body::before{ background-image:var(--nd-sadu), linear-gradient(90deg,var(--nd-dark),var(--nd-green) 50%,var(--nd-dark)) !important; }
/* الهيدر — طبقة نقش خفيفة */
.store-header{ position:relative; }
.store-header::after{
  content:""; position:absolute; inset:0; background-image:var(--nd-sadu);
  opacity:.14; pointer-events:none; z-index:0;
}
.store-header > *{ position:relative; z-index:1; }
/* الفوتر — طبقة نقش */
.store-footer{ position:relative; }
.store-footer::before{
  content:""; position:absolute; inset:0; background-image:var(--nd-sadu);
  opacity:.12; pointer-events:none;
}
.store-footer > *{ position:relative; }

/* ==============================================================
   (13) تحسينات الجوال — تركيز على صفحة المنتج (99% من العملاء جوال)
   ============================================================== */
@media (max-width: 768px){

  /* الشريط العلوي أصغر ومريح */
  body::before{ font-size:12px !important; padding:7px 8px !important; }

  /* ----- صفحة المنتج ----- */
  /* عنوان المنتج مقروء ومركّز */
  .product-single__title{
    font-size:1.15rem !important; line-height:1.5 !important;
    font-weight:800 !important;
  }
  /* السعر بارز جداً على الجوال */
  .container--product-details .total-price,
  .product-single .total-price{ font-size:1.5rem !important; font-weight:800 !important; }
  .container--product-details .before-price{ font-size:1rem !important; }

  /* صندوق الشراء — حواف وحشو مريح + إطار ذهبي */
  .container--product-details .product-form,
  .product-single .product-form{
    padding:14px !important; border-radius:14px !important;
    margin:0 12px !important;
  }

  /* أزرار الخيارات (مقاسات/ألوان) — أهداف لمس كبيرة ≥44px */
  .s-product-options-option-button,
  [class*="s-product-options"] button,
  .product-options button{
    min-height:44px !important; min-width:44px !important;
    font-size:14px !important; border-radius:10px !important;
  }

  /* مدخل الكمية أكبر للمس */
  .s-quantity-input-input{ min-height:44px !important; font-size:16px !important; }
  .s-quantity-input-container button{ min-width:44px !important; min-height:44px !important; }

  /* شريط الشراء الثابت أسفل الشاشة — بارز وثابت وسهل الوصول */
  .sticky-product-bar{
    box-shadow:0 -4px 20px rgba(0,0,0,.12) !important;
    border-top:2px solid var(--nd-gold) !important;
    border-radius:16px 16px 0 0 !important;
  }
  .sticky-product-bar__btn .btn,
  .sticky-product-bar salla-add-product-button{
    min-height:52px !important; font-size:16px !important; font-weight:800 !important;
    border-radius:12px !important;
  }
  .sticky-product-bar__btn .btn{
    background:linear-gradient(180deg,var(--nd-green),var(--nd-green-deep)) !important;
    color:#fff !important;
  }

  /* شارة العرض في صفحة المنتج أوضح */
  .promotion-title{ font-size:13px !important; padding:5px 12px !important; }

  /* التبويبات (وصف/مواصفات/تقييمات) قابلة للتمرير أفقياً بدون كسر */
  .s-tabs-header{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; white-space:nowrap; }

  /* ----- بطاقات المنتجات على الجوال ----- */
  /* اسم المنتج بخط أصغر ليظهر كاملاً على الجوال */
  .product-card__title a{ font-size:11.5px !important; line-height:1.35 !important; }
  .product-card__title{ height:3.9em !important; min-height:3.9em !important; }
  .product-card .total-price{ font-size:1rem !important; }
  .product-card__addToCart .s-button-element{ min-height:46px !important; font-size:14px !important; }
  /* أزرار خيارات الكرت أهداف لمس مناسبة */
  .product-card [class*="s-product-options"] button{ min-height:38px !important; }
}