/* وئام - الهوية البصرية المحسّنة */
:root {
    /* الألوان الأساسية */
    --primary-rose-gold: #C79A72;
    --beige-light: #FFF5F3;
    --soft-pink: #F8E9E4;
    --dark-brown: #8C6143;
    --white: #FFFFFF;
    
    /* الذهبي - محسّن */
    --accent-gold: #D4AF37;
    --soft-gold: #E8C7A3;
    --rich-gold: #B8860B;
    --strong-gold: #D4AF37;  /* استبدال بالذهبي الهادئ */
    
    /* الألوان الدافئة */
    --warm-cream: #FDF6E3;
    --deep-rose: #A0522D;
    --light-rose: #FAD5A5;
    --muted-rose: #E8B4A3;
    
    /* النصوص - محسّنة للتباين الأفضل */
    --text-primary: #6B4423;      /* أغمق للقراءة الأفضل */
    --text-secondary: #8C6143;
    --text-muted: #9B7E5F;        /* أغمق قليلاً */
    --text-body: #4A3728;         /* للنصوص الطويلة */
    --text-light: #C79A72;        /* للنصوص الثانوية */
    --text-accent: #E8C7A3;
    --text-gold: #D4AF37;
    --text-strong-gold: #f1ee08;  /* محسّن */
    --text-deep-rose: #A0522D;
    
    /* ألوان الحالات - جديدة */
    --success: #7A9B76;
    --success-light: #E8F5E9;
    --error: #C17A74;
    --error-light: #FFEBEE;
    --warning: #D4A574;
    --warning-light: #FFF3E0;
    --info: #7A9BC1;
    --info-light: #E3F2FD;
}

/* الألوان النصية */
.text-primary {
    color: var(--text-primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-light {
    color: var(--text-light) !important;
}

.text-accent {
    color: var(--text-accent) !important;
}

.text-gold {
    color: var(--text-gold) !important;
}

.text-strong-gold {
    color: var(--strong-gold) !important;
}

.text-deep-rose {
    color: var(--text-deep-rose) !important;
}

.text-danger {
    color: var(--error) !important;
}

.text-body {
    color: var(--text-body) !important;
}

/* ألوان الحالات */
.text-success {
    color: var(--success) !important;
}

.text-error {
    color: var(--error) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-info {
    color: var(--info) !important;
}

/* ألوان الخلفيات الإضافية */
.bg-accent-gold {
    background-color: var(--accent-gold) !important;
}

.bg-warm-cream {
    background-color: var(--warm-cream) !important;
}

.bg-deep-rose {
    background-color: var(--deep-rose) !important;
}

.bg-light-rose {
    background-color: var(--light-rose) !important;
}

.bg-muted-rose {
    background-color: var(--muted-rose) !important;
}

.bg-primary-rose-gold {
    background-color: var(--primary-rose-gold) !important;
}

.bg-beige-light {
    background-color: var(--beige-light) !important;
}

.bg-soft-pink {
    background-color: var(--soft-pink) !important;
}

.bg-dark-brown {
    background-color: var(--dark-brown) !important;
}

.bg-strong-gold {
    background-color: var(--strong-gold) !important;
}

/* خلفيات الحالات */
.bg-success {
    background-color: var(--success) !important;
    color: var(--white) !important;
}

.bg-success-light {
    background-color: var(--success-light) !important;
    color: var(--success) !important;
}

.bg-error {
    background-color: var(--error) !important;
    color: var(--white) !important;
}

.bg-error-light {
    background-color: var(--error-light) !important;
    color: var(--error) !important;
}

.bg-warning {
    background-color: var(--warning) !important;
    color: var(--white) !important;
}

.bg-warning-light {
    background-color: var(--warning-light) !important;
    color: var(--warning) !important;
}

.bg-info {
    background-color: var(--info) !important;
    color: var(--white) !important;
}

.bg-info-light {
    background-color: var(--info-light) !important;
    color: var(--info) !important;
}

.bg-sent-message {
    background: linear-gradient(135deg, var(--primary-rose-gold), var(--dark-brown)) !important;
    color: var(--white) !important;
}

.bg-received-message {
    background-color: var(--warm-cream) !important;
    color: var(--dark-brown) !important;
}

/* حدود وتدرجات إضافية */
.border-accent-gold {
    border-color: var(--accent-gold) !important;
}

.border-deep-rose {
    border-color: var(--deep-rose) !important;
}

.border-primary-rose-gold {
    border-color: var(--primary-rose-gold) !important;
}

.border-strong-gold {
    border-color: var(--strong-gold) !important;
}

/* تدرجات الهوية */
.gradient-primary {
    background: linear-gradient(135deg, var(--primary-rose-gold), var(--dark-brown)) !important;
}

.gradient-hero {
    background: 
        radial-gradient(circle at 20% 80%, var(--primary-rose-gold) 0%, transparent 50%),
        linear-gradient(135deg, var(--beige-light), var(--soft-pink) 70%, var(--primary-rose-gold)) !important;
}

.gradient-cta {
    background: linear-gradient(135deg, var(--beige-light) 0%, var(--soft-pink) 50%, var(--primary-rose-gold) 100%) !important;
}

.gradient-section-title {
    background: linear-gradient(135deg, var(--primary-rose-gold), var(--dark-brown));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-hero-illustration {
    background: linear-gradient(135deg, rgba(199, 154, 114, 0.1), rgba(248, 233, 228, 0.1)) !important;
}

.gradient-stat-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255, 245, 243, 0.9)) !important;
}

.gradient-step-circle {
    background: linear-gradient(135deg, var(--primary-rose-gold), var(--soft-pink)) !important;
}

/* Force navbar dropdown to appear on the right in RTL */
.navbar .dropdown-menu {
    right: auto !important;
    left: 0 !important;
}

/* أزرار مخصصة للتحليل الشخصي */
.btn-primary-rose-gold {
    background: var(--primary-rose-gold) !important;
    border: none !important;
    border-radius: 25px !important;
    color: var(--white) !important;
    font-weight: 600;
    transition: all 0.3s ease;
    font-family: 'Tajawal', sans-serif;
    padding: 10px 30px;
    box-shadow: 0 2px 8px rgba(199, 154, 114, 0.2);
}

.btn-primary-rose-gold:hover {
    background: var(--dark-brown) !important;
    border: none !important;
    color: var(--white) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(140, 97, 67, 0.3) !important;
}

.btn-primary-rose-gold:disabled {
    background: var(--text-muted) !important;
    color: var(--white) !important;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

/* Loading state for send button */
.btn-primary-rose-gold.loading {
    pointer-events: none;
    opacity: 0.7;
}

.btn-primary-rose-gold.loading i.fa-paper-plane {
    display: none;
}

.btn-primary-rose-gold.loading::before {
    content: "\f110";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    animation: fa-spin 1s linear infinite;
    margin-right: 5px;
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn-outline-secondary {
    background: var(--white) !important;
    border: 2px solid var(--text-muted) !important;
    border-radius: 25px !important;
    color: var(--text-muted) !important;
    font-weight: 600;
    transition: all 0.3s ease;
    font-family: 'Tajawal', sans-serif;
    padding: 10px 30px;
}

.btn-outline-secondary:hover {
    background: var(--text-muted) !important;
    border: 2px solid var(--text-muted) !important;
    color: var(--white) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(166, 138, 110, 0.3) !important;
}

.btn-outline-secondary:disabled {
    background: var(--beige-light) !important;
    border: 2px solid var(--text-light) !important;
    color: var(--text-light) !important;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

.btn-success {
    background: var(--success) !important;
    border: none !important;
    border-radius: 25px !important;
    color: var(--white) !important;
    font-weight: 600;
    transition: all 0.3s ease;
    font-family: 'Tajawal', sans-serif;
    padding: 10px 30px;
}

.btn-success:hover {
    background: var(--rich-gold) !important;
    border: none !important;
    color: var(--white) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(122, 155, 118, 0.3) !important;
}

.btn-success:disabled {
    background: var(--text-muted) !important;
    color: var(--white) !important;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

.gradient-stat-overlay {
    background: linear-gradient(135deg, rgba(199, 154, 114, 0.05), rgba(248, 233, 228, 0.05));
}
