/* === فایل CSS حرفه‌ای (سبک شیشه مات اپل) === */

:root {
    /* تم اصلی (بنفش اپل) */
    --modern-accent: #bf5af2; 
    --modern-accent-glow: rgba(191, 90, 242, 0.4);
    
    /* پس‌زمینه اصلی (جایگزین تم دارک/لایت) */
    --primary-bg: #000000; /* همیشه تیره برای افکت شیشه‌ای */
    --secondary-bg: #1c1c1e; /* خاکستری فضایی اپل */
    --text-primary: #f5f5f7; /* سفید اپل */
    --text-secondary: #8e8e93; /* خاکستری اپل */
    --border-color: rgba(170, 170, 170, 0.2); /* حاشیه شیشه‌ای */

    /* افکت شیشه‌ای (GlassMorphism) */
    --glass-bg: rgba(28, 28, 30, 0.7); /* 70% شفاف */
    --glass-blur: blur(20px);
    --glass-border: 1px solid rgba(170, 170, 170, 0.2);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* 1. تنظیمات کلی بدنه */
body {
    background-color: var(--primary-bg);
    color: var(--text-primary);
    
    /* این بخش برای لود کردن عکس بک‌گراند شماست */
    /* مطمئن شوید که عکس را در پنل ادمین آپلود کرده‌اید */
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center !important;
}

/* 2. منوی ناوبری (Navbar) شیشه‌ای */
.navbar {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur); /* برای سازگاری با Safari */
    border-bottom: var(--glass-border) !important;
    box-shadow: var(--glass-shadow);
}

/* 3. کادرها (Cards) شیشه‌ای */
.card, .alert, #chat-window {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border) !important;
    box-shadow: var(--glass-shadow);
    transition: all 0.3s ease;
}

.card:hover {
    border-color: var(--modern-accent-glow);
    box-shadow: 0 0 20px 0 var(--modern-accent-glow);
}

/* 4. دکمه‌های اصلی (Primary Button) */
.btn-primary {
    background: var(--modern-accent);
    color: white;
    border: none;
    box-shadow: 0 0 15px 0 var(--modern-accent-glow);
    transition: all 0.3s ease;
    font-weight: bold;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px 5px var(--modern-accent-glow);
}

/* 5. فیلدهای ورودی */
.form-input, .form-textarea, .form-select {
    background: rgba(44, 44, 46, 0.8) !important; /* کمی روشن‌تر */
    border: var(--glass-border) !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
    border-color: var(--modern-accent) !important;
    box-shadow: 0 0 10px 0 var(--modern-accent-glow);
    outline: none;
}

/* 6. منوی کشویی */
#dropdown-menu {
    background: var(--secondary-bg);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

#dropdown-menu a:hover {
    background: var(--modern-accent);
    color: white;
}