/* ==========================================================================
   إيزيون — الأزرار فقط: لون الخط + الأنيميشن
   نسخة مُتحقَّق من توافقها مع سلة (Twilight) وثيم سيليا  |  الإصدار 2.0
   --------------------------------------------------------------------------
   أسماء الأصناف والمتغيّرات أدناه مأخوذة من مصدر سلة الرسمي:
   • المتغيّرات: SallaApp/theme-raed → src/assets/styles/01-settings/global.scss
   • أصناف الأزرار: → src/assets/styles/03-elements/buttons.scss
   • مكوّنات salla-*: → src/assets/styles/04-components/product.scss
   • خصائص salla-button: docs.salla.dev/422694m0
   --------------------------------------------------------------------------
   التركيب: تصميم المتجر ← سيليا ← تخصيص ← إعدادات متقدمة ← CSS مخصص
   ========================================================================== */


/* ==========================================================================
   [1] المتغيّرات — أسماء سلة الرسمية (وليست أسماء مخترعة)
   ضبط هذه الأربعة وحدها يعيد تلوين كل زر في المتجر يستخدم
   Tailwind utilities مثل bg-primary / text-primary / border-primary.
   ========================================================================== */
:root{
  --color-primary:          #3E2613;   /* لون سلة الأساسي */
  --color-primary-d:        #2A190C;   /* الدرجة الغامقة (الضغط) */
  --color-primary-l:        #55361D;   /* الدرجة الفاتحة (التحويم) */
  --color-primary-reverse:  #FFFFFF;   /* لون النص فوق الأساسي — 14.08:1 ✓ */

  /* توكنز خاصة بهذا الملف */
  --bz-text:      var(--color-primary-reverse);
  --bz-text-alt:  var(--color-primary);   /* نص الزر المفرّغ — 12.4:1 على الأبيض ✓ */
  --bz-text-soft: #8C4A36;                /* نص الأزرار النصية — 6.25:1 ✓ */
  --bz-ring:      #A65B44;                /* حلقة التركيز */
  --bz-ease:      cubic-bezier(.34,.8,.36,1);
}


/* ==========================================================================
   [2] الأساس المشترك
   .btn / .btn--* أصناف سلة الرسمية.
   .s-button-btn هو الزر الداخلي لمكوّن <salla-button> — وهو في الـ light DOM
   (وليس shadow DOM)، وهذا مُتحقَّق منه: ثيم رائد نفسه يستهدف
   `salla-add-product-button .s-button-text` من ملف CSS عام.
   ========================================================================== */
.btn,
.s-button-btn,
salla-button button,
salla-add-product-button button,
[class*="add-to-cart"] button{
  position: relative;
  overflow: hidden;              /* يحتوي وميض اللمعة */
  isolation: isolate;
  font-weight: 600;
  cursor: pointer;
  will-change: transform;
  transition:
    background-color .18s var(--bz-ease),
    color           .18s var(--bz-ease),
    border-color    .18s var(--bz-ease),
    box-shadow      .22s var(--bz-ease),
    transform       .22s var(--bz-ease);
}

/* نص الزر داخل مكوّنات سلة عنصر مستقل — يجب تلوينه صراحةً */
.s-button-text,
salla-button .s-button-text,
salla-add-product-button .s-button-text{
  color: inherit !important;
  pointer-events: none;          /* حتى لا يبتلع النقرة */
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   [3] الزر الأساسي — لون النص وحركته
   ========================================================================== */
.btn--primary,
.s-button-btn.s-button-primary,
salla-button[color="primary"] button,
salla-add-product-button button,
[class*="add-to-cart"] button,
button[type="submit"].btn{
  background-color: var(--color-primary) !important;
  background-image: none !important;
  color: var(--color-primary-reverse) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 1px 2px rgba(47,30,16,.10);
}

/* التحويم: ارتفاع خفيف + ظل يتمدّد */
.btn--primary:hover,
.s-button-btn.s-button-primary:hover,
salla-button[color="primary"] button:hover,
salla-add-product-button button:hover,
[class*="add-to-cart"] button:hover{
  background-color: var(--color-primary-l) !important;
  border-color: var(--color-primary-l) !important;
  color: var(--color-primary-reverse) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(47,30,16,.22);
}

/* الضغط: هبوط سريع */
.btn--primary:active,
.s-button-btn.s-button-primary:active,
salla-button[color="primary"] button:active,
salla-add-product-button button:active,
[class*="add-to-cart"] button:active{
  background-color: var(--color-primary-d) !important;
  transform: translateY(0) scale(.975);
  box-shadow: 0 1px 2px rgba(47,30,16,.14);
  transition-duration: .08s;
}


/* ==========================================================================
   [4] وميض اللمعة — يمر عبر الزر عند التحويم
   ========================================================================== */
.btn--primary::before,
salla-add-product-button button::before,
[class*="add-to-cart"] button::before{
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 45%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .62s var(--bz-ease);
  pointer-events: none;
}
.btn--primary:hover::before,
salla-add-product-button button:hover::before,
[class*="add-to-cart"] button:hover::before{
  inset-inline-start: 125%;
}


/* ==========================================================================
   [5] الزر المفرّغ — النص ينقلب للأبيض عند التحويم
   btn--outline و btn--outline-primary كلاهما موجود في سلة
   ========================================================================== */
.btn--outline,
.btn--outline-primary,
salla-button[fill="outline"] button{
  background-color: transparent !important;
  color: var(--bz-text-alt) !important;
  border: 1.5px solid var(--color-primary) !important;
  box-shadow: none !important;
}
.btn--outline:hover,
.btn--outline-primary:hover,
salla-button[fill="outline"] button:hover{
  background-color: var(--color-primary) !important;
  color: var(--color-primary-reverse) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(47,30,16,.20);
}
.btn--outline:active,
.btn--outline-primary:active{ transform: scale(.975); transition-duration: .08s; }


/* ==========================================================================
   [6] الزر النصي / الروابط — خط يزحف تحت النص
   ========================================================================== */
.btn--text,
.btn-link,
salla-button[shape="link"] button{
  background-color: transparent !important;
  color: var(--bz-text-soft) !important;
  border: 0 !important;
  overflow: visible;
}
.btn--text::after,
.btn-link::after,
salla-button[shape="link"] button::after{
  content: "";
  position: absolute;
  bottom: -2px;
  inset-inline-start: 0;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transition: width .3s var(--bz-ease);
}
.btn--text:hover::after,
.btn-link:hover::after,
salla-button[shape="link"] button:hover::after{ width: 100%; }


/* ==========================================================================
   [7] حالة التركيز — حلقة تنبض مرة واحدة
   ========================================================================== */
.btn:focus-visible,
.s-button-btn:focus-visible,
salla-button button:focus-visible,
salla-add-product-button button:focus-visible{
  outline: 3px solid var(--bz-ring) !important;
  outline-offset: 2px !important;
  animation: bz-ring .5s var(--bz-ease);
}
@keyframes bz-ring{
  0%   { outline-offset: 7px; outline-color: transparent; }
  100% { outline-offset: 2px; outline-color: var(--bz-ring); }
}
.btn:focus:not(:focus-visible),
.s-button-btn:focus:not(:focus-visible){ outline: none !important; }


/* ==========================================================================
   [8] الزر المعطّل — سلة تستخدم :disabled و[disabled] على المكوّن
   ========================================================================== */
.btn:disabled,
.btn--disabled,
.s-button-btn:disabled,
salla-button[disabled] button,
[aria-disabled="true"]{
  opacity: .45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn:disabled::before,
.s-button-btn:disabled::before{ display: none !important; }


/* ==========================================================================
   [9] حالة التحميل
   btn--is-loading هو صنف سلة الرسمي، و salla-button[loading] هو
   الخاصية الموثّقة للمكوّن. الصنف is-loading مضاف لملفنا فقط.
   ========================================================================== */
.btn--is-loading,
.btn.is-loading,
salla-button[loading] button{
  color: transparent !important;
  pointer-events: none;
}
.btn--is-loading .s-button-text,
.btn.is-loading .s-button-text,
salla-button[loading] .s-button-text{ opacity: 0; }

.btn.is-loading::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-primary-reverse);
  border-top-color: transparent;
  animation: bz-spin .7s linear infinite;
}
@keyframes bz-spin{ to{ transform: rotate(360deg); } }


/* ==========================================================================
   [10] نبضة نجاح — أضف الصنف is-done بعد الإضافة للسلة
   ========================================================================== */
.btn.is-done,
.s-button-btn.is-done{ animation: bz-pop .45s var(--bz-ease); }
@keyframes bz-pop{
  0%   { transform: scale(1); }
  38%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}


/* ==========================================================================
   [11] الأيقونة داخل الزر — تزحف باتجاه القراءة
   سلة تستخدم خط أيقونات sicon-*
   ========================================================================== */
.btn i, .btn svg,
.s-button-btn i, .s-button-btn svg,
[class*="btn--"] i, [class^="sicon-"]{
  transition: transform .24s var(--bz-ease);
}
.btn:hover i, .btn:hover svg,
.s-button-btn:hover i,
[class*="btn--"]:hover i{ transform: translateX(3px); }
[dir="rtl"] .btn:hover i,
[dir="rtl"] .s-button-btn:hover i,
[dir="rtl"] [class*="btn--"]:hover i{ transform: translateX(-3px); }


/* ==========================================================================
   [12] شبكة أمان لأزرار سيليا الخاصة
   سيليا ثيم طرف ثالث وأصنافه الداخلية غير موثّقة علنياً، لذلك هذه
   القاعدة الأخيرة تلتقط أي زر إضافة للسلة بصيغة تسمية أخرى.
   إن ظهر أي زر بلون غير مقصود، احذف هذه الكتلة وحدها.
   ========================================================================== */
[class*="add-btn"], [class*="cart-btn"], [class*="buy-now"]{
  transition: background-color .18s var(--bz-ease),
              color .18s var(--bz-ease),
              transform .22s var(--bz-ease),
              box-shadow .22s var(--bz-ease);
}
[class*="add-btn"]:hover, [class*="cart-btn"]:hover, [class*="buy-now"]:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(47,30,16,.22);
}
[class*="add-btn"]:active, [class*="cart-btn"]:active, [class*="buy-now"]:active{
  transform: scale(.975);
  transition-duration: .08s;
}


/* ==========================================================================
   [13] احترام تفضيل تقليل الحركة — إلزامي
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .btn, .s-button-btn, salla-button button, [class*="btn--"],
  .btn::before, .btn::after{
    transition-duration: .01ms !important;
    animation: none !important;
    transform: none !important;
  }
  .btn:hover, .s-button-btn:hover, [class*="btn--"]:hover{ transform: none !important; }
}

/* نهاية الملف */