/* ==========================================
   1. الهوية والألوان الأساسية (قوالب سلة الحديثة)
   ========================================== */
:root {
    --theme-primary: #c39b62 !important; /* الذهبي الفاخر */
    --theme-primary-dark: #a8814c !important; /* الذهبي الغامق */
    --theme-primary-light: #fdfaf4 !important; /* خلفية ذهبية ناعمة */
    --primary-navy: #3a4b61 !important; /* الكحلي المعتمد بالهوية */
}

/* ==========================================
   2. تخصيص الهيدر (القائمة العلوية وشريط الإعلانات)
   ========================================== */
/* شريط الإعلانات العلوي الصغير */
.top-header, [class*="top-nav"], .announcement-bar {
    background-color: var(--primary-navy) !important;
    color: #000000 !important;
}

/* لون الروابط النشطة وتحت الماوس بالقائمة العلوية */
.main-menu a:hover, .nav-link:hover, .header-btn:hover {
    color: var(--theme-primary) !important;
}

/* ==========================================
   3. تحسين بطاقات المنتجات (Product Cards)
   ========================================== */
.s-product-card, .product-slide, [class*="product-card"] {
    border-radius: 14px !important; /* زوايا منحنية ناعمة وفخمة */
    border: 1px solid #eaeaea !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    background: #fffff6 !important;
}

/* تأثير فخم عند مرور الماوس على بطاقة المنتج */
.s-product-card:hover, [class*="product-card"]:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 24px rgba(58, 75, 97, 0.08) !important;
    border-color: var(--theme-primary) !important;
}

/* ==========================================
   4. تنسيق وترتيب أزرار الشراء والسلة
   ========================================== */
/* زر إضافة إلى السلة وأزرار الشراء المباشر */
.s-product-card-button, .s-button-wrap .s-button, [class*="add-to-cart"] {
    background-color: var(--theme-primary) !important;
    color: #fff000 !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: background-color 0.3s ease !important;
}

.s-product-card-button:hover, .s-button-wrap .s-button:hover {
    background-color: var(--theme-primary-dark) !important;
}

/* ==========================================
   5. تخصيص الفوتر السفلي بالكامل (Footer)
   ========================================== */
/* خلفية الفوتر كحلي داكن */
.s-footer, footer, [class*="footer-wrapper"] {
    background-color: var(--primary-navy) !important;
    color: #000000 !important;
    border-top: 3px solid var(--theme-primary) !important; /* خط ذهبي يفصل الفوتر */
}

/* عناوين القوائم داخل الفوتر باللون الذهبي */
.s-footer-title, .s-footer h4, .s-footer h5, footer h4, [class*="footer"] h4, [class*="title"] {
    color: var(--theme-primary) !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
}

/* روابط الفوتر ونصوصه */
.s-footer a, footer a, [class*="footer"] a {
    color: #000000 !important;
    transition: color 0.2s ease !important;
}

/* عند مرور الماوس على روابط الفوتر يتحول للذهبي */
.s-footer a:hover, footer a:hover {
    color: var(--theme-primary) !important;
    padding-right: 4px; /* تأثير حركة بسيط وجذاب للروابط العربية */
}

/* أيقونة الحقوق ووسائل الدفع */
.footer-copyright, .copyright-text {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 20px !important;
    padding-top: 15px !important;
}