/* 
   Custom CSS for Awabin Brand on Salla (Sagi Theme)
   Colors: Deep Navy (#2F4768), Light Navy (#6F8DAF), Cream (#E8E1D6), Gold/Beige (#CDB99A)
*/

:root {
    --brand-primary: #2F4768;    /* الكحلي الداكن الفاخر */
    --brand-secondary: #6F8DAF;  /* الكحلي الفاتح */
    --brand-cream: #E8E1D6;      /* الكريمي الهادئ */
    --brand-gold: #CDB99A;       /* الذهبي الفاخر */
    --text-dark: #1A2536;        /* نص داكن متناسق مع الكحلي */
    --white: #ffffff;
}

/* تطبيق خط Tajawal المعتمد للهوية بالكامل */
body, html, p, span, h1, h2, h3, h4, h5, h6, a, button, input, select {
    font-family: 'Tajawal', sans-serif !important;
}

/* تخصيص الهيدر (أعلى الصفحة) */
.main-header {
    background-color: var(--brand-primary) !important;
    border-bottom: 2px solid var(--brand-gold) !important;
}

/* تعديل ألوان نصوص القائمة العلوية والأيقونات */
.main-header .nav-link, 
.main-header .header-btn, 
.main-header .cart-large-icon {
    color: var(--white) !important;
}

.main-header .nav-link:hover {
    color: var(--brand-gold) !important;
}

/* تخصيص البار العلوي للإعلانات الترويجية */
.top-header {
    background-color: var(--brand-gold) !important;
    color: var(--brand-primary) !important;
    font-weight: 500;
}

/* تخصيص الأزرار الأساسية (شراء، إضافة للسلة، إتمام الطلب) */
.btn-primary, 
.s-button-primary, 
.add-to-cart-btn, 
.submit-btn {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--white) !important;
    border-radius: 8px !important; /* انحناء ناعم وراقٍ */
    transition: all 0.3s ease;
}

.btn-primary:hover, 
.s-button-primary:hover, 
.add-to-cart-btn:hover {
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
    box-shadow: 0 4px 12px rgba(111, 141, 175, 0.3);
}

/* تخصيص بطاقات المنتجات (Product Cards) */
.product-card {
    border: 1px solid var(--brand-cream) !important;
    border-radius: 12px !important;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: var(--white);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(47, 71, 104, 0.08) !important;
    border-color: var(--brand-gold) !important;
}

/* أسماء المنتجات وأسعارها */
.product-title a {
    color: var(--text-dark) !important;
    font-weight: 500 !important;
}

.product-price {
    color: var(--brand-primary) !important;
    font-weight: 700 !important;
}

/* تخصيص البادجات والوسوم (مثل: تخفيض، جديد) */
.badge-tags .badge {
    background-color: var(--brand-gold) !important;
    color: var(--brand-primary) !important;
    font-weight: bold;
}

/* تخصيص الفوتر (أسفل الموقع) */
.main-footer {
    background-color: var(--brand-primary) !important;
    color: var(--brand-cream) !important;
    border-top: 4px solid var(--brand-gold) !important;
}

.main-footer h4, 
.main-footer h5, 
.main-footer .footer-title {
    color: var(--brand-gold) !important;
    font-weight: bold !important;
}

.main-footer a {
    color: var(--brand-cream) !important;
}

.main-footer a:hover {
    color: var(--white) !important;
}

/* تخصيص الأيقونات العائمة (واتساب، الصعود لأعلى) */
.whatsapp-float {
    background-color: #25D366 !important; /* الحفاظ على لون الواتساب الأصلي للتعرف السريع */
}

/* تعديل شكل العناوين الرئيسية في الصفحة (المنتجات الأكثر مبيعاً، إلخ) */
.section-title h2 {
    color: var(--brand-primary) !important;
    position: relative;
    padding-bottom: 10px;
}

.section-title h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background-color: var(--brand-gold) !important;
}