/* ===== نظام الألوان الموحد للموقع ===== */

:root {
    /* الألوان الأساسية */
    --primary-color: #2563eb;          /* أزرق أساسي */
    --primary-dark: #1d4ed8;          /* أزرق داكن */
    --primary-light: #3b82f6;         /* أزرق فاتح */
    --primary-lighter: #dbeafe;       /* أزرق فاتح جداً للخلفيات */
    
    /* الألوان الثانوية */
    --secondary-color: #64748b;       /* رمادي أزرق */
    --secondary-dark: #475569;        /* رمادي داكن */
    --secondary-light: #94a3b8;       /* رمادي فاتح */
    --secondary-lighter: #f1f5f9;    /* رمادي فاتح جداً للخلفيات */
    
    /* ألوان النجاح */
    --success-color: #059669;         /* أخضر */
    --success-dark: #047857;          /* أخضر داكن */
    --success-light: #10b981;         /* أخضر فاتح */
    --success-lighter: #d1fae5;       /* أخضر فاتح جداً للخلفيات */
    
    /* ألوان التحذير */
    --warning-color: #d97706;         /* برتقالي */
    --warning-dark: #b45309;          /* برتقالي داكن */
    --warning-light: #f59e0b;         /* برتقالي فاتح */
    --warning-lighter: #fef3c7;       /* برتقالي فاتح جداً للخلفيات */
    
    /* ألوان الخطر */
    --danger-color: #dc2626;          /* أحمر */
    --danger-dark: #b91c1c;           /* أحمر داكن */
    --danger-light: #ef4444;          /* أحمر فاتح */
    --danger-lighter: #fee2e2;        /* أحمر فاتح جداً للخلفيات */
    
    /* ألوان المعلومات */
    --info-color: #0891b2;            /* أزرق سماوي */
    --info-dark: #0e7490;             /* أزرق سماوي داكن */
    --info-light: #06b6d4;            /* أزرق سماوي فاتح */
    --info-lighter: #cffafe;          /* أزرق سماوي فاتح جداً للخلفيات */
    
    /* ألوان محايدة */
    --white: #ffffff;                 /* أبيض */
    --black: #000000;                 /* أسود */
    --gray-50: #f9fafb;               /* رمادي فاتح جداً */
    --gray-100: #f3f4f6;             /* رمادي فاتح */
    --gray-200: #e5e7eb;             /* رمادي */
    --gray-300: #d1d5db;             /* رمادي متوسط */
    --gray-400: #9ca3af;             /* رمادي غامق */
    --gray-500: #6b7280;             /* رمادي غامق جداً */
    --gray-600: #4b5563;             /* رمادي أسود */
    --gray-700: #374151;             /* رمادي أسود داكن */
    --gray-800: #1f2937;             /* رمادي أسود داكن جداً */
    --gray-900: #111827;             /* رمادي أسود داكن جداً */
    
    /* ألوان خاصة */
    --accent-color: #3b82f6;          /* أزرق فاتح */
    --accent-dark: #2563eb;           /* أزرق داكن */
    --accent-light: #60a5fa;          /* أزرق فاتح جداً */
    --accent-lighter: #dbeafe;        /* أزرق فاتح جداً للخلفيات */
    
    /* ألوان التدرجات */
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    --gradient-success: linear-gradient(135deg, var(--success-color), var(--success-dark));
    --gradient-warning: linear-gradient(135deg, var(--warning-color), var(--warning-dark));
    --gradient-danger: linear-gradient(135deg, var(--danger-color), var(--danger-dark));
    --gradient-info: linear-gradient(135deg, var(--info-color), var(--info-dark));
    --gradient-accent: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
    
    /* ألوان الظلال */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* ألوان الشفافية */
    --primary-transparent: rgba(37, 99, 235, 0.1);
    --success-transparent: rgba(5, 150, 105, 0.1);
    --warning-transparent: rgba(217, 119, 6, 0.1);
    --danger-transparent: rgba(220, 38, 38, 0.1);
    --info-transparent: rgba(8, 145, 178, 0.1);
    --accent-transparent: rgba(139, 92, 246, 0.1);
}

/* ===== تطبيق الألوان على العناصر الأساسية ===== */

/* الأزرار */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.btn-primary:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem var(--primary-transparent) !important;
}

.btn-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--white) !important;
}

.btn-secondary:hover {
    background-color: var(--secondary-dark) !important;
    border-color: var(--secondary-dark) !important;
}

.btn-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
    color: var(--white) !important;
}

.btn-success:hover {
    background-color: var(--success-dark) !important;
    border-color: var(--success-dark) !important;
}

.btn-warning {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
    color: var(--white) !important;
}

.btn-warning:hover {
    background-color: var(--warning-dark) !important;
    border-color: var(--warning-dark) !important;
}

.btn-danger {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
    color: var(--white) !important;
}

.btn-danger:hover {
    background-color: var(--danger-dark) !important;
    border-color: var(--danger-dark) !important;
}

.btn-info {
    background-color: var(--info-color) !important;
    border-color: var(--info-color) !important;
    color: var(--white) !important;
}

.btn-info:hover {
    background-color: var(--info-dark) !important;
    border-color: var(--info-dark) !important;
}

/* أزرار الإطار */
.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.btn-outline-success {
    color: var(--success-color) !important;
    border-color: var(--success-color) !important;
    background-color: transparent !important;
}

.btn-outline-success:hover {
    background-color: var(--success-color) !important;
    color: var(--white) !important;
}

.btn-outline-warning {
    color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
    background-color: transparent !important;
}

.btn-outline-warning:hover {
    background-color: var(--warning-color) !important;
    color: var(--white) !important;
}

.btn-outline-danger {
    color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
    background-color: transparent !important;
}

.btn-outline-danger:hover {
    background-color: var(--danger-color) !important;
    color: var(--white) !important;
}

.btn-outline-info {
    color: var(--info-color) !important;
    border-color: var(--info-color) !important;
    background-color: transparent !important;
}

.btn-outline-info:hover {
    background-color: var(--info-color) !important;
    color: var(--white) !important;
}

/* التنبيهات */
.alert-primary {
    background-color: var(--primary-lighter) !important;
    border-color: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}

.alert-success {
    background-color: var(--success-lighter) !important;
    border-color: var(--success-light) !important;
    color: var(--success-dark) !important;
}

.alert-warning {
    background-color: var(--warning-lighter) !important;
    border-color: var(--warning-light) !important;
    color: var(--warning-dark) !important;
}

.alert-danger {
    background-color: var(--danger-lighter) !important;
    border-color: var(--danger-light) !important;
    color: var(--danger-dark) !important;
}

.alert-info {
    background-color: var(--info-lighter) !important;
    border-color: var(--info-light) !important;
    color: var(--info-dark) !important;
}

/* البطاقات */
.card {
    border-color: var(--gray-200) !important;
    box-shadow: var(--shadow-sm) !important;
}

.card-header {
    background-color: var(--gray-50) !important;
    border-bottom-color: var(--gray-200) !important;
}

/* الروابط */
a {
    color: var(--primary-color) !important;
}

a:hover {
    color: var(--primary-dark) !important;
}

/* النصوص الملونة */
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-info { color: var(--info-color) !important; }
.text-accent { color: var(--accent-color) !important; }

/* الخلفيات الملونة */
.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-success { background-color: var(--success-color) !important; }
.bg-warning { background-color: var(--warning-color) !important; }
.bg-danger { background-color: var(--danger-color) !important; }
.bg-info { background-color: var(--info-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }

/* الخلفيات الشفافة */
.bg-primary-transparent { background-color: var(--primary-transparent) !important; }
.bg-success-transparent { background-color: var(--success-transparent) !important; }
.bg-warning-transparent { background-color: var(--warning-transparent) !important; }
.bg-danger-transparent { background-color: var(--danger-transparent) !important; }
.bg-info-transparent { background-color: var(--info-transparent) !important; }
.bg-accent-transparent { background-color: var(--accent-transparent) !important; }

/* الحدود */
.border-primary { border-color: var(--primary-color) !important; }
.border-secondary { border-color: var(--secondary-color) !important; }
.border-success { border-color: var(--success-color) !important; }
.border-warning { border-color: var(--warning-color) !important; }
.border-danger { border-color: var(--danger-color) !important; }
.border-info { border-color: var(--info-color) !important; }
.border-accent { border-color: var(--accent-color) !important; }

/* التدرجات */
.bg-gradient-primary { background: var(--gradient-primary) !important; }
.bg-gradient-success { background: var(--gradient-success) !important; }
.bg-gradient-warning { background: var(--gradient-warning) !important; }
.bg-gradient-danger { background: var(--gradient-danger) !important; }
.bg-gradient-info { background: var(--gradient-info) !important; }
.bg-gradient-accent { background: var(--gradient-accent) !important; }

/* الظلال */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }

/* ===== ألوان خاصة بالموقع ===== */

/* الهيدر */
.site-header {
    background: var(--gradient-primary) !important;
    box-shadow: var(--shadow-md) !important;
}

/* الفوتر */
.site-footer {
    background: var(--gradient-primary) !important;
    color: var(--white) !important;
    box-shadow: var(--shadow-md) !important;
}

.site-footer .widget-title {
    color: var(--white) !important;
    font-weight: 600 !important;
}

.site-footer .footer-links li a {
    color: var(--white) !important;
    opacity: 0.9 !important;
    transition: all 0.3s ease !important;
}

.site-footer .footer-links li a:hover {
    color: var(--primary-lighter) !important;
    opacity: 1 !important;
    transform: translateX(5px) !important;
}

.site-footer .btn-outline-light {
    color: var(--white) !important;
    border-color: var(--white) !important;
}

.site-footer .btn-outline-light:hover {
    background-color: var(--white) !important;
    color: var(--primary-color) !important;
}

.site-footer .btn-primary {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
    color: var(--white) !important;
}

.site-footer .btn-primary:hover {
    background-color: var(--success-dark) !important;
    border-color: var(--success-dark) !important;
    color: var(--white) !important;
}

.site-footer .contact-info h6,
.site-footer .social-links h6 {
    color: var(--white) !important;
}

.site-footer .whatsapp-link {
    color: var(--white) !important;
}

.site-footer .whatsapp-link span {
    color: var(--white) !important;
}

.site-footer .social-icon {
    color: var(--white) !important;
    opacity: 0.8 !important;
    transition: all 0.3s ease !important;
}

.site-footer .social-icon:hover {
    opacity: 1 !important;
    transform: scale(1.2) !important;
}

.footer-bottom {
    background: var(--primary-dark) !important;
    border-top: 1px solid var(--primary-light) !important;
}

.footer-bottom .copyright {
    color: var(--white) !important;
}

.footer-bottom .copyright a {
    color: var(--primary-lighter) !important;
}

.navbar-brand {
    color: var(--white) !important;
}

.nav-link {
    color: var(--white) !important;
}

.nav-link:hover {
    color: var(--primary-lighter) !important;
}

.nav-link.active {
    color: var(--white) !important;
    background-color: var(--primary-transparent) !important;
    border-radius: 8px !important;
}

/* القوائم المنسدلة */
.dropdown-menu {
    border-color: var(--gray-200) !important;
    box-shadow: var(--shadow-lg) !important;
}

.dropdown-item:hover {
    background-color: var(--primary-lighter) !important;
    color: var(--primary-dark) !important;
}

/* رأس الصفحة */
.page-header {
    background: var(--gradient-secondary) !important;
    color: var(--white) !important;
}

.page-title {
    color: var(--white) !important;
}

/* البطاقات */
.seller-card {
    border-color: var(--primary-color) !important;
    box-shadow: var(--shadow-lg) !important;
}

.seller-card .card-header {
    background: var(--gradient-primary) !important;
    color: var(--white) !important;
}

/* التقييمات */
.seller-rating .fa-star {
    color: var(--warning-color) !important;
}

/* الأيقونات */
.icon-wrapper {
    background-color: var(--primary-lighter) !important;
    color: var(--primary-color) !important;
}

/* الإحصائيات */
.stat-card {
    border-color: var(--gray-200) !important;
    transition: all 0.3s ease !important;
}

.stat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* النوافذ المنبثقة */
.modal-header.bg-primary {
    background: var(--gradient-primary) !important;
}

.modal-header.bg-danger {
    background: var(--gradient-danger) !important;
}

/* الأزرار في النوافذ المنبثقة */
.modal .btn-close-white {
    filter: brightness(0) invert(1) !important;
}

/* ===== تحسينات إضافية ===== */

/* تأثيرات التحويم */
.btn, .card, .stat-card {
    transition: all 0.3s ease !important;
}

.btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* تأثيرات التركيز */
.btn:focus, .form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 0.2rem var(--primary-transparent) !important;
    border-color: var(--primary-color) !important;
}

/* تحسين النصوص */
h1, h2, h3, h4, h5, h6 {
    color: var(--gray-800) !important;
}

.text-muted {
    color: var(--gray-600) !important;
}

/* تحسين الخلفيات */
body {
    background-color: var(--gray-50) !important;
}

/* تحسين الجداول */
.table {
    background-color: var(--white) !important;
}

.table thead th {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-700) !important;
}

.table tbody tr:hover {
    background-color: var(--primary-lighter) !important;
}