/* ============================================================
   SHAPEX — SALLA CUSTOM CSS
   مبني على دليل الهوية البصرية ShapeX · Brand Book V1.0 · 2026
   يُنسخ ويُلصق في: لوحة تحكم سلة → إعدادات المتجر → CSS مخصص
   ============================================================ */

/* ------------------------------------------------------------
   1) استيراد الخطوط: Cairo (أساسي) + JetBrains Mono (ثانوي/أرقام)
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ------------------------------------------------------------
   2) متغيرات الهوية البصرية (Design Tokens)
   ------------------------------------------------------------ */
:root {
  /* الألوان الأساسية */
  --sx-black: #0B0B0B;         /* Deep Black — الخلفية الأساسية */
  --sx-white: #FFFFFF;         /* Pure White — النص الأساسي */
  --sx-blue: #00AEEF;          /* Electric Blue — للإبراز فقط، لا يتجاوز 5% من السطح */
  --sx-blue-glow: rgba(0, 174, 239, 0.45);

  /* درجات الرمادي (نصوص ثانوية وحدود) */
  --sx-grey-secondary: rgba(255, 255, 255, 0.55);
  --sx-grey-tertiary: rgba(255, 255, 255, 0.28);
  --sx-grey-border: rgba(255, 255, 255, 0.14);
  --sx-grey-hairline: rgba(255, 255, 255, 0.08);

  /* الخطوط */
  --sx-font-primary: 'Cairo', sans-serif;
  --sx-font-mono: 'JetBrains Mono', monospace;
}

/* ------------------------------------------------------------
   3) الأساسيات — الخلفية والنص
   ------------------------------------------------------------ */
html, body {
  background-color: var(--sx-black) !important;
  color: var(--sx-white) !important;
  font-family: var(--sx-font-primary) !important;
  font-weight: 400;
  line-height: 1.75; /* حسب دليل الـ Body Text */
}

/* أي حاويات/سكاشن رئيسية تستخدم خلفية بيضاء افتراضية في ثيم سلة */
.s-block, .s-products-list, main, section, .container,
.s-layout-page, .s-app-body {
  background-color: var(--sx-black) !important;
}

/* بطاقات (منتجات، تصنيفات، إلخ) تاخذ درجة أغمق شوي لفصل بصري خفيف */
.s-product-card-entry, .card, .s-block-card, .product-card {
  background-color: #101010 !important;
  border: 1px solid var(--sx-grey-border) !important;
  border-radius: 6px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.s-product-card-entry:hover, .card:hover, .product-card:hover {
  border-color: var(--sx-blue) !important;
  box-shadow: 0 0 24px var(--sx-blue-glow);
}

/* ------------------------------------------------------------
   4) العناوين — Cairo بأوزان الدليل
   ------------------------------------------------------------ */
h1, .h1, .s-block-title {
  font-family: var(--sx-font-primary) !important;
  font-weight: 800 !important;      /* H2 spec في الدليل (أقرب مستوى للـ H1 بالموقع) */
  font-size: clamp(32px, 4vw, 72px);
  line-height: 1.1;
  color: var(--sx-white) !important;
}

h2, .h2 {
  font-family: var(--sx-font-primary) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 3vw, 56px);
  line-height: 1.1;
  color: var(--sx-white) !important;
}

h3, .h3 {
  font-family: var(--sx-font-primary) !important;
  font-weight: 700 !important;
  font-size: clamp(22px, 2.2vw, 40px);
  line-height: 1.2;
  color: var(--sx-white) !important;
}

p, span, li, .s-block-description, .description {
  font-family: var(--sx-font-primary) !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: var(--sx-grey-secondary);
}

/* كلمة/عبارة محورية داخل النص — استخدمها يدويًا عبر class="sx-highlight" */
.sx-highlight {
  color: var(--sx-blue);
  font-weight: 700;
}

/* ------------------------------------------------------------
   5) الأزرار / CTA — أزرق + توهج + Mono للنص القصير
   ------------------------------------------------------------ */
.btn, .btn-primary, .add-cart-btn, button[type="submit"],
.s-add-product-to-cart-button, .s-block-button {
  background-color: var(--sx-blue) !important;
  color: var(--sx-black) !important;
  border: none !important;
  border-radius: 4px;
  font-family: var(--sx-font-mono) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 14px 28px;
  box-shadow: 0 0 28px var(--sx-blue-glow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover, .btn-primary:hover, .add-cart-btn:hover,
.s-add-product-to-cart-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 40px var(--sx-blue-glow);
}

/* أزرار ثانوية (outline) */
.btn-outline, .btn-secondary {
  background-color: transparent !important;
  color: var(--sx-white) !important;
  border: 1px solid var(--sx-grey-border) !important;
  font-family: var(--sx-font-mono) !important;
  letter-spacing: 2px;
}
.btn-outline:hover, .btn-secondary:hover {
  border-color: var(--sx-blue) !important;
  color: var(--sx-blue) !important;
}

/* ------------------------------------------------------------
   6) الروابط
   ------------------------------------------------------------ */
a {
  color: var(--sx-white);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover {
  color: var(--sx-blue);
}

/* ------------------------------------------------------------
   7) الأسعار — إبراز بالأزرق (نقطة الإبراز الوحيدة المسموح بها بكثافة)
   ------------------------------------------------------------ */
.s-price-amount, .s-product-card-price, .price, .amount {
  font-family: var(--sx-font-mono) !important;
  font-weight: 500 !important;
  color: var(--sx-blue) !important;
  letter-spacing: 0.5px;
}
.old-price, .s-price-before-discount {
  font-family: var(--sx-font-mono) !important;
  color: var(--sx-grey-tertiary) !important;
  text-decoration: line-through;
}

/* ------------------------------------------------------------
   8) الهيدر / الناف بار
   ------------------------------------------------------------ */
header, .s-header, .s-header-main, nav, .navbar {
  background-color: var(--sx-black) !important;
  border-bottom: 1px solid var(--sx-grey-hairline) !important;
}
.s-header .nav-link, header a, nav a {
  font-family: var(--sx-font-primary) !important;
  font-weight: 500;
  color: var(--sx-white) !important;
}
.s-header .nav-link:hover, header a:hover, nav a:hover {
  color: var(--sx-blue) !important;
}

/* ------------------------------------------------------------
   9) الفوتر
   ------------------------------------------------------------ */
footer, .s-footer {
  background-color: var(--sx-black) !important;
  border-top: 1px solid var(--sx-grey-hairline) !important;
  color: var(--sx-grey-secondary) !important;
}
footer a, .s-footer a {
  color: var(--sx-grey-secondary) !important;
}
footer a:hover, .s-footer a:hover {
  color: var(--sx-blue) !important;
}

/* كلاس الفوتر الفعلي في ثيم المتجر (تم تحديده عبر Inspect) */
.store-footer__inner {
  border-bottom: 1px dashed hsla(0, 0%, 100%, .1) !important;
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
  background-color: var(--sx-black) !important;
}

/* ------------------------------------------------------------
   10) عناصر Mono — تسميات/شارات/أرقام (اختياري تطبيقها يدويًا)
   استخدمها عبر class="sx-eyebrow" أو "sx-label" أو "sx-metric"
   ------------------------------------------------------------ */
.sx-eyebrow {
  font-family: var(--sx-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--sx-blue);
}
.sx-label {
  font-family: var(--sx-font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--sx-grey-secondary);
}
.sx-metric {
  font-family: var(--sx-font-mono);
  font-weight: 500;
  font-size: 16px;
  color: var(--sx-white);
}

/* ------------------------------------------------------------
   11) توهج أزرق قابل لإعادة الاستخدام (استخدمه بحذر، أقصى 5% من السطح)
   ------------------------------------------------------------ */
.sx-glow {
  text-shadow: 0 0 24px var(--sx-blue-glow);
}
.sx-glow-box {
  box-shadow: 0 0 32px var(--sx-blue-glow);
}

/* ------------------------------------------------------------
   12) الحدود والفواصل الرفيعة (Hairline)
   ------------------------------------------------------------ */
hr, .divider {
  border-color: var(--sx-grey-hairline) !important;
  opacity: 1;
}

/* ------------------------------------------------------------
   13) حقول الإدخال (فورمات، سلة الشراء، إلخ)
   ------------------------------------------------------------ */
input, textarea, select {
  background-color: #101010 !important;
  border: 1px solid var(--sx-grey-border) !important;
  color: var(--sx-white) !important;
  font-family: var(--sx-font-primary) !important;
  border-radius: 4px;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--sx-blue) !important;
  box-shadow: 0 0 0 3px var(--sx-blue-glow) !important;
  outline: none !important;
}

/* ------------------------------------------------------------
   14) شريط التمرير (Scrollbar) — لمسة هوية بصرية إضافية
   ------------------------------------------------------------ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--sx-black); }
::-webkit-scrollbar-thumb {
  background: var(--sx-grey-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--sx-blue); }

/* ------------------------------------------------------------
   15) تحديد النص (Text Selection)
   ------------------------------------------------------------ */
::selection {
  background: var(--sx-blue);
  color: var(--sx-black);
}

.s-product-card-promotion-title { --tw-bg-opacity: 1; background-color: #991b1b; background-color: rgba(153, 27, 27, var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: #fff; color: rgba(255, 255, 255, var(--tw-text-opacity, 1)); transform: translate(-3px, -20px);
                                }


.s-comments-product {
    --tw-bg-opacity: 0;
    background-color: #f3f4f6;
    background-color: rgba(243, 244, 246, var(--tw-bg-opacity, 1));
    padding-bottom: 1rem;
    padding-top: 1rem;
}
.content--single-page{
  background-color: var(--black) !important;
}
.s-product-card-image img {
    height: 100%;
    transition-duration: .5s;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    width: 100%;
    background: black;
}
.s-product-card-content-title a {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: #f9fafb;
}
.s-product-card-content-subtitle {
    font-size: .875rem;
    line-height: 1.5rem;
    margin-bottom: .625rem;
    --tw-text-opacity: 1;
    color: white;
}
.s-user-menu-dropdown-list {
      list-style: none;
    margin: 0;
    padding: 0;
    background-color: black;
}