body {
  background-color: white;
}
/* ══════════════════════════════════════════════════════════════
   غصن الأراك — CSS تخصيصي لمتجر سلة
   ══════════════════════════════════════════════════════════════
   مبني على تحليل بيانات المبيعات والسلات المتروكة
   كل قاعدة لها هدف بيعي محدد
   ══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
   1. متغيرات الألوان — هوية البراند
   ═══════════════════════════════════════════════════ */
:root {
    --arak-gold: #9C7A3C;
    --arak-gold-light: #C4A265;
    --arak-gold-glow: rgba(156, 122, 60, 0.15);
    --arak-green: #2E7D32;
    --arak-green-light: #4CAF50;
    --arak-green-soft: #E8F5E9;
    --arak-cream: #F8F5F0;
    --arak-brown: #5D4E37;
    --arak-brown-light: #8B7355;
    --arak-red: #D44638;
    --arak-text: #2C2016;
    --arak-text-sec: #6B5B4A;
    --arak-shadow: 0 4px 20px rgba(156, 122, 60, 0.1);
    --arak-shadow-hover: 0 12px 36px rgba(156, 122, 60, 0.18);
    --arak-radius: 14px;
}

/* ═══════════════════════════════════════════════════
   2. تحسين الخط العام
   الهدف: هوية بصرية موحدة واحترافية
   ═══════════════════════════════════════════════════ */
body,
body * {
    font-family: 'Tajawal', sans-serif !important;
}

/* تنعيم التمرير */
html {
    scroll-behavior: smooth;
}

/* ═══════════════════════════════════════════════════
   3. شريط الثقة العلوي
   الهدف: معالجة 76% سلات متروكة — بناء ثقة فورية
   يُضاف بالـ JavaScript
   ═══════════════════════════════════════════════════ */
.arak-trust-bar {
    background: linear-gradient(135deg, #5D4E37 0%, #9C7A3C 100%);
    color: white;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    direction: rtl;
    z-index: 9999;
    letter-spacing: 0.3px;
    position: relative;
}

.arak-trust-bar span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════
   4. بطاقات المنتجات — تحسين شامل
   الهدف: زيادة النقر والتحويل
   ═══════════════════════════════════════════════════ */

/* إطار أنيق وتأثير hover */
.s-product-card-entry,
.product-entry,
[class*="product-card"] {
    border-radius: var(--arak-radius) !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border: 1px solid rgba(156, 122, 60, 0.06) !important;
    background: white !important;
}

.s-product-card-entry:hover,
.product-entry:hover,
[class*="product-card"]:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--arak-shadow-hover) !important;
    border-color: rgba(156, 122, 60, 0.12) !important;
}

/* تكبير خفيف للصورة عند الـ hover */
.s-product-card-entry img,
.product-entry img {
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.s-product-card-entry:hover img,
.product-entry:hover img {
    transform: scale(1.04) !important;
}

/* ═══════════════════════════════════════════════════
   5. زر "أضف للسلة" — أخضر جذاب
   الهدف: الزر هو أهم عنصر — لازم يلفت الانتباه
   ═══════════════════════════════════════════════════ */
.s-product-card-entry .btn,
.product-entry .btn,
[class*="product-card"] .btn,
.s-button-element,
.btn--add-to-cart,
[class*="add-to-cart"] {
    background: linear-gradient(135deg, var(--arak-green) 0%, var(--arak-green-light) 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 12px 20px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.2) !important;
    letter-spacing: 0.3px !important;
}

.s-product-card-entry .btn:hover,
.product-entry .btn:hover,
[class*="add-to-cart"]:hover {
    box-shadow: 0 6px 20px rgba(46, 125, 50, 0.35) !important;
    transform: translateY(-2px) !important;
}

/* زر الإضافة في صفحة المنتج — أكبر وأبرز */
.product-actions .btn-primary,
.s-product-actions .btn {
    font-size: 17px !important;
    padding: 16px 32px !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 16px rgba(46, 125, 50, 0.3) !important;
}

/* ═══════════════════════════════════════════════════
   6. تحسين عرض الأسعار
   الهدف: السعر الجديد بارز + السعر القديم مشطوب واضح
   ═══════════════════════════════════════════════════ */
.product-price,
.s-product-card-price,
[class*="price"] .amount,
.s-product-card-price .s-product-card-price-new {
    color: var(--arak-green) !important;
    font-weight: 900 !important;
    font-size: 1.25em !important;
}

/* السعر القديم */
.product-price del,
.s-product-card-price del,
[class*="price"] del,
.s-product-card-price .s-product-card-price-old {
    color: #B0A090 !important;
    font-size: 0.82em !important;
    text-decoration: line-through !important;
    opacity: 0.7 !important;
}

/* ═══════════════════════════════════════════════════
   7. شارات الخصم والتمييز
   الهدف: Loss Aversion — "وفّر X%" تحفّز الشراء
   ═══════════════════════════════════════════════════ */
.product-entry .sale-badge,
.s-product-card-sale-badge,
[class*="badge"][class*="sale"],
[class*="discount"] {
    background: var(--arak-red) !important;
    color: white !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    box-shadow: 0 2px 6px rgba(212, 70, 56, 0.25) !important;
}

/* ═══════════════════════════════════════════════════
   8. عناوين الأقسام
   الهدف: تمييز بصري واضح لكل قسم
   ═══════════════════════════════════════════════════ */
.section-title,
.widget-title,
[class*="section"] h2,
[class*="widget"] h2 {
    font-weight: 900 !important;
    color: var(--arak-brown) !important;
    font-size: 1.4em !important;
}

/* ═══════════════════════════════════════════════════
   9. صفحة المنتج — تحسينات التحويل
   الهدف: تقليل التردد في لحظة القرار
   ═══════════════════════════════════════════════════ */

/* شارات الثقة تحت زر الإضافة — يُضاف بالـ JS */
.arak-product-trust {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--arak-cream);
    border-radius: 12px;
    border: 1px solid rgba(156, 122, 60, 0.08);
    direction: rtl;
}

.arak-product-trust span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--arak-brown);
}

/* ═══════════════════════════════════════════════════
   10. صفحة السلة والدفع
   الهدف: آخر فرصة قبل الـ 76% يتركون!
   ═══════════════════════════════════════════════════ */

/* زر إتمام الطلب — أكبر وأبرز */
.checkout-btn,
[class*="checkout"] .btn,
.s-cart-summary .btn {
    background: linear-gradient(135deg, var(--arak-green) 0%, var(--arak-green-light) 100%) !important;
    color: white !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 4px 16px rgba(46, 125, 50, 0.3) !important;
    transition: all 0.3s ease !important;
}

.checkout-btn:hover,
[class*="checkout"] .btn:hover {
    box-shadow: 0 8px 28px rgba(46, 125, 50, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* رسالة الضمان في صفحة الدفع — يُضاف بالـ JS */
.arak-checkout-trust {
    background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
    border: 1px solid rgba(46, 125, 50, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 16px 0;
    text-align: center;
    direction: rtl;
}

/* ═══════════════════════════════════════════════════
   11. إشعار Social Proof
   الهدف: "شخص من الرياض طلب..." يبني ثقة
   ═══════════════════════════════════════════════════ */
.arak-social-proof {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99998;
    background: white;
    padding: 14px 18px;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 12px;
    direction: rtl;
    max-width: 310px;
    border: 1px solid rgba(156, 122, 60, 0.08);
    animation: arak-slideIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes arak-slideIn {
    from { opacity: 0; transform: translateX(80px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes arak-slideOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(80px); }
}

/* ═══════════════════════════════════════════════════
   12. Sticky CTA للجوال
   الهدف: الزر مرئي دائماً — أغلب الزوار جوال
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .arak-sticky-mobile {
        position: fixed !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 99999 !important;
        background: white !important;
        padding: 10px 16px !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-top: 2px solid var(--arak-green) !important;
        direction: rtl !important;
    }

    /* مساحة للـ Sticky CTA */
    body {
        padding-bottom: 72px !important;
    }

    /* Social Proof فوق الـ Sticky */
    .arak-social-proof {
        bottom: 82px !important;
    }
}

/* ═══════════════════════════════════════════════════
   13. شريط معلومات متحرك (Marquee)
   الهدف: توصيل رسالة بدون مساحة ثابتة
   ═══════════════════════════════════════════════════ */
.arak-marquee {
    background: var(--arak-green-soft);
    border-bottom: 1px solid rgba(46, 125, 50, 0.08);
    overflow: hidden;
    white-space: nowrap;
    padding: 8px 0;
    direction: rtl;
}

.arak-marquee-track {
    display: inline-block;
    animation: arak-marquee 28s linear infinite;
    font-size: 13px;
    font-weight: 600;
    color: var(--arak-green);
}

@keyframes arak-marquee {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ═══════════════════════════════════════════════════
   14. الضمان الذهبي — بوكس بارز
   الهدف: كسر آخر نقطة تردد
   ═══════════════════════════════════════════════════ */
.arak-guarantee-box {
    background: linear-gradient(135deg, #FFFDE7 0%, #FFF8E1 100%);
    border: 2px solid rgba(156, 122, 60, 0.2);
    border-radius: 16px;
    padding: 20px 24px;
    text-align: center;
    margin: 16px 0;
    direction: rtl;
}

.arak-guarantee-box .title {
    font-weight: 900;
    font-size: 16px;
    color: var(--arak-gold);
    margin-bottom: 6px;
}

.arak-guarantee-box .desc {
    font-size: 13px;
    color: var(--arak-text-sec);
    line-height: 1.8;
}

/* ═══════════════════════════════════════════════════
   15. تحسين التقييمات (نجوم ذهبية)
   الهدف: Social Proof بصري
   ═══════════════════════════════════════════════════ */
.rating-stars,
[class*="rating"],
[class*="stars"] {
    color: #F9A825 !important;
}

/* ═══════════════════════════════════════════════════
   16. تحسين أزرار الكمية
   الهدف: تسهيل تعديل الكمية
   ═══════════════════════════════════════════════════ */
[class*="quantity"] button,
.qty-btn {
    border-radius: 8px !important;
    font-weight: 700 !important;
    min-width: 36px !important;
    min-height: 36px !important;
}

/* ═══════════════════════════════════════════════════
   17. Footer — لمسة أنيقة
   ═══════════════════════════════════════════════════ */
footer,
.s-footer {
    border-top: 3px solid var(--arak-gold) !important;
}

/* ═══════════════════════════════════════════════════
   18. رسائل الثقة في السلة
   ═══════════════════════════════════════════════════ */
.arak-cart-trust {
    background: var(--arak-cream);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 12px;
    color: var(--arak-brown);
    text-align: center;
    direction: rtl;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.arak-cart-trust span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}