/* لون ماروني حاد (يمكنك استخدام الخيار الأول أو الثاني من المرة السابقة) */
:root {
  --sharp-maroon: #800000; /* ماروني كلاسيكي */
  --sharp-maroon-hover: #660000; /* ماروني أغمق قليلاً عند التمرير */
}

/* لجعل الزر مفرغًا بلون ماروني حاد - للأزرار في صفحات عرض المنتجات */
.s-button-element.s-button-btn.s-button-primary-outline {
  background-color: transparent !important; /* لجعل الخلفية شفافة (مفرغة) */
  border: 2px solid var(--sharp-maroon) !important; /* حدود بلون ماروني حاد */
  color: var(--sharp-maroon) !important; /* لون النص ماروني حاد */
}

/* تأثير التمرير (hover) للزر المفرغ */
.s-button-element.s-button-btn.s-button-primary-outline:hover {
  background-color: var(--sharp-maroon) !important; /* الخلفية تمتلئ باللون الماروني الحاد عند التمرير */
  border-color: var(--sharp-maroon) !important; /* الحدود بنفس اللون */
  color: white !important; /* النص يصبح أبيض عند التمرير */
}

/* ==================== أزرار صفحة المنتج ==================== */

/* زر "إضافة للسلة" في صفحة المنتج - مفرغ بلون ماروني */
.s-button-element.s-button-btn.s-button-solid.s-button-primary,
.s-add-product-button-main .s-button-element,
button[class*="s-add-product-button"],
.s-add-product-button .s-button-element {
  background-color: transparent !important; /* خلفية شفافة (مفرغة) */
  border: 2px solid var(--sharp-maroon) !important; /* حدود مارونية */
  color: var(--sharp-maroon) !important; /* نص ماروني */
}

/* تأثير التمرير لزر "إضافة للسلة" في صفحة المنتج */
.s-button-element.s-button-btn.s-button-solid.s-button-primary:hover,
.s-add-product-button-main .s-button-element:hover,
button[class*="s-add-product-button"]:hover,
.s-add-product-button .s-button-element:hover {
  background-color: var(--sharp-maroon) !important; /* امتلاء باللون الماروني */
  border-color: var(--sharp-maroon) !important;
  color: white !important; /* نص أبيض */
}

/* زر "شراء الآن" - ممتلئ بلون ماروني */
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary,
button[class*="quick-buy"],
.s-button-element[class*="quick-buy"],
button:contains("شراء الآن"),
button:contains("Buy Now") {
  background-color: var(--sharp-maroon) !important; /* خلفية مارونية ممتلئة */
  border: 2px solid var(--sharp-maroon) !important; /* حدود مارونية */
  color: white !important; /* نص أبيض */
}

/* تأثير التمرير لزر "شراء الآن" */
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:hover,
button[class*="quick-buy"]:hover,
.s-button-element[class*="quick-buy"]:hover,
button:contains("شراء الآن"):hover,
button:contains("Buy Now"):hover {
  background-color: var(--sharp-maroon-hover) !important; /* لون أغمق عند التمرير */
  border-color: var(--sharp-maroon-hover) !important;
  color: white !important;
  transform: translateY(-1px) !important; /* حركة بسيطة للأعلى */
  box-shadow: 0 4px 8px rgba(128, 0, 0, 0.3) !important; /* ظل */
}

/* استهداف أكثر تحديداً لأزرار صفحة المنتج */
.sticky-product-bar .s-button-element,
.product-form .s-button-element,
[class*="product-button"] .s-button-element {
  border-radius: 4px !important; /* زوايا حادة قليلاً */
  font-weight: 600 !important; /* خط عريض */
  padding: 12px 24px !important; /* حشو مناسب */
  transition: all 0.3s ease !important; /* انتقال سلس */
}

/* تحسينات إضافية للأزرار */
.s-button-element.s-button-btn {
  border-radius: 4px !important; /* زوايا حادة قليلاً لجميع الأزرار */
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

/* تأثير الضغط (active) لجميع الأزرار */
.s-button-element.s-button-btn:active {
  transform: translateY(1px) !important; /* حركة بسيطة للأسفل عند الضغط */
}

/* استهداف زر "اشتر الآن" (افترض أن له كلاس buy-now-btn أو ID معين) */
/* إذا كان زر "اشتر الآن" لديك له كلاس أو ID مختلف، يرجى تعديل المحدد (selector) */

.buy-now-btn {
    /* الألوان والخلفية */
    background-color: #ff6b35; /* لون الخلفية البرتقالي */
    color: white; /* لون النص الأبيض */
    
    /* الحدود والزوايا */
    border: none; /* لا يوجد حد */
    border-radius: 4px; /* زوايا مدورة قليلاً */
    
    /* المسافات الداخلية (Padding) */
    padding: 12px 24px;
    
    /* الخط */
    font-size: 14px;
    font-weight: 600; /* سمك الخط */
    font-family: inherit; /* استخدام نفس خط المتجر */
    
    /* الأبعاد */
    min-width: 120px; /* عرض أدنى */
    height: 48px; /* ارتفاع ثابت */
    
    /* المحاذاة والمؤشر */
    text-align: center;
    cursor: pointer;
    
    /* التأثيرات الانتقالية (Transitions) */
    transition: all 0.3s ease; /* حركة سلسة عند التفاعل */
    
    /* خصائص إضافية لضمان العرض الصحيح */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; /* إزالة خط الرابط إذا كان الزر رابطًا */
    line-height: 1.2;
}

/* تأثير التمرير (Hover Effect) */
.buy-now-btn:hover {
    background-color: #e55a2b; /* لون أغمق قليلاً عند التمرير */
    transform: translateY(-1px); /* رفع الزر قليلاً */
    box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3); /* ظل خفيف */
}

/* تأثير النقر (Active Effect) */
.buy-now-btn:active {
    transform: translateY(0); /* يعود لمكانه الأصلي */
    box-shadow: 0 2px 4px rgba(255, 107, 53, 0.3); /* ظل أصغر */
}

/* حالة التركيز (Focus State) */
.buy-now-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2); /* إطار تركيز خفيف */
}

/* حالة الزر المعطل (Disabled State) */
.buy-now-btn:disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* إذا كان زر "اشتر الآن" عبارة عن رابط (<a>) بدلاً من زر (<button>) */
a.buy-now-btn {
    text-decoration: none;
    color: white; /* لضمان بقاء لون النص أبيض في حالة الرابط */
}

/* تحسينات للشاشات الصغيرة (Responsive) */
@media (max-width: 768px) {
    .buy-now-btn {
        width: 100%; /* عرض كامل على الشاشات الصغيرة */
        max-width: 300px; /* حد أقصى للعرض */
    }
}
/* استهداف زر "اشتر الآن" الذي يحمل الكلاس s-button-outline */
/* هذا الكود سيقوم بتجاوز الخصائص الافتراضية لـ s-button-outline */

/* محاولة استهداف الزر داخل salla-mini-checkout-widget */
salla-mini-checkout-widget .s-button-outline {
    /* الألوان والخلفية */
    background-color: rgb(128, 0, 0) !important; /* لون الخلفية الأحمر/العنابي */
    color: white !important; /* لون النص الأبيض */
    
    /* الحدود والزوايا */
    border: 2px solid rgb(128, 0, 0) !important; /* حدود بنفس لون الخلفية */
    border-radius: 4px !important; /* زوايا مدورة قليلاً */
    
    /* المسافات الداخلية (Padding) */
    padding: 12px 24px !important;
    
    /* الخط */
    font-size: 14px !important;
    font-weight: 600 !important; /* سمك الخط */
    font-family: inherit !important; /* استخدام نفس خط المتجر */
    
    /* الأبعاد */
    min-width: 120px !important; /* عرض أدنى */
    height: 48px !important; /* ارتفاع ثابت */
    
    /* المحاذاة والمؤشر */
    text-align: center !important;
    cursor: pointer !important;
    
    /* التأثيرات الانتقالية (Transitions) */
    transition: all 0.3s ease !important; /* حركة سلسة عند التفاعل */
    
    /* خصائص إضافية لضمان العرض الصحيح */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important; /* إزالة خط الرابط إذا كان الزر رابطًا */
    line-height: 1.2 !important;
}

/* تأثير التمرير (Hover Effect) */
salla-mini-checkout-widget .s-button-outline:hover {
    background-color: rgb(100, 0, 0) !important; /* لون أغمق قليلاً عند التمرير */
    border-color: rgb(100, 0, 0) !important;
    transform: translateY(-1px) !important; /* رفع الزر قليلاً */
    box-shadow: 0 4px 8px rgba(128, 0, 0, 0.3) !important; /* ظل خفيف */
}

/* تأثير النقر (Active Effect) */
salla-mini-checkout-widget .s-button-outline:active {
    transform: translateY(0) !important; /* يعود لمكانه الأصلي */
    box-shadow: 0 2px 4px rgba(128, 0, 0, 0.3) !important; /* ظل أصغر */
}

/* حالة التركيز (Focus State) */
salla-mini-checkout-widget .s-button-outline:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.2) !important; /* إطار تركيز خفيف */
}

/* حالة الزر المعطل (Disabled State) */
salla-mini-checkout-widget .s-button-outline:disabled {
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: #cccccc !important;
}

/* إذا كان زر "اشتر الآن" عبارة عن رابط (<a>) بدلاً من زر (<button>) */
salla-mini-checkout-widget a.s-button-outline {
    text-decoration: none !important;
    color: white !important; /* لضمان بقاء لون النص أبيض في حالة الرابط */
}

/* تحسينات للشاشات الصغيرة (Responsive) */
@media (max-width: 768px) {
    salla-mini-checkout-widget .s-button-outline {
        width: 100% !important; /* عرض كامل على الشاشات الصغيرة */
        max-width: 300px !important; /* حد أقصى للعرض */
    }
}