/* =========================================
   Premium Aurora & Glassmorphism Dark Mode
   ========================================= */
:root {
    --dark-bg: #05010f; /* رنگ پایه پس‌زمینه */
    --glass-bg: rgba(255, 255, 255, 0.03); /* پس‌زمینه شیشه‌ای */
    --glass-border: rgba(255, 255, 255, 0.1); /* حاشیه شیشه‌ای */
    --brand-teal: #3BA8B5; /* فیروزه‌ای برند */
}

/* پس‌زمینه شفق قطبی (Aurora) */
body.dark-mode {
    background-color: var(--dark-bg) !important;
    color: #F8FAFC !important;
    background-image: 
        radial-gradient(40% 50% at 20% 30%, rgba(59, 168, 181, 0.15) 0%, transparent 70%),
        radial-gradient(45% 55% at 75% 25%, rgba(37, 99, 235, 0.15) 0%, transparent 70%),
        radial-gradient(50% 60% at 60% 75%, rgba(139, 92, 246, 0.1) 0%, transparent 70%),
        radial-gradient(40% 50% at 30% 80%, rgba(229, 62, 62, 0.1) 0%, transparent 70%) !important;
    background-attachment: fixed !important;
}

/* کارت‌ها و کادرها با حالت شیشه‌ای (Glassmorphism) */
body.dark-mode .card, 
body.dark-mode .form-container, 
body.dark-mode .header, 
body.dark-mode .toolbar,
body.dark-mode .accordion-item,
body.dark-mode .acc-item,
body.dark-mode .otp-box,
body.dark-mode .modal-content,
body.dark-mode .expert-card,
body.dark-mode #sideMenu {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
    border-radius: 20px !important;
}

/* دکمه‌ها با افکت درخشش نئون (Neon Glow) */
body.dark-mode .btn-primary, 
body.dark-mode button[onclick*="doSearch"] {
    background: linear-gradient(135deg, #0F766E, #0D9488) !important;
    border: 1px solid #14B8A6 !important;
    box-shadow: 0 0 20px rgba(59, 168, 181, 0.4) !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important;
    transition: all 0.3s ease !important;
}

body.dark-mode .btn-primary:hover {
    box-shadow: 0 0 30px rgba(59, 168, 181, 0.6) !important;
    transform: translateY(-2px) !important;
}

/* ورودی‌های فرم (شیشه‌ای تیره) */
body.dark-mode input, 
body.dark-mode select, 
body.dark-mode textarea {
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: #F8FAFC !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(10px) !important;
}

body.dark-mode input:focus {
    border-color: var(--brand-teal) !important;
    box-shadow: 0 0 15px rgba(59, 168, 181, 0.3) !important;
}

/* متن‌ها و جداول */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode strong {
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

body.dark-mode th {
    background: rgba(0,0,0,0.4) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

/* استایل دکمه دارک مود در منوی همبرگری */
#themeToggleBtn {
    position: absolute;
    top: 15px;
    right: 15px; 
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}

#themeToggleBtn:hover {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 15px rgba(255,255,255,0.2);
}

/* =========================================
   Custom Professional Leaflet Layer Control
   ========================================= */
.leaflet-control-layers {
    border: none !important;
    background: transparent !important;
}

.leaflet-control-layers-toggle {
    background-image: none !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
    cursor: pointer !important;
    border: 1px solid #ccc !important;
}

/* حالت تاریک برای دکمه */
body.dark-mode .leaflet-control-layers-toggle {
    background-color: #1E293B !important;
    border-color: #334155 !important;
}
body.dark-mode .leaflet-control-layers-toggle span {
    color: #fff !important;
}
body.dark-mode .leaflet-control-layers-toggle svg {
    stroke: #fff !important;
}

/* منوی باز شده */
.leaflet-control-layers-expanded {
    background: #fff !important;
    padding: 10px 15px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    border: 1px solid #ccc !important;
}
body.dark-mode .leaflet-control-layers-expanded {
    background: #1E293B !important;
    border-color: #334155 !important;
}

.leaflet-control-layers-base label {
    font-family: Vazirmatn, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #1E293B !important;
}
body.dark-mode .leaflet-control-layers-base label {
    color: #fff !important;
}

/* رفع مشکل دیده نشدن متن در فرم‌های سفید در حالت تاریک */
body.dark-mode .form-group input, 
body.dark-mode .form-group select, 
body.dark-mode .form-group textarea {
    color: #1E293B !important; /* متن تیره روی پس‌زمینه سفید */
    background-color: #fff !important;
}
/* =========================================
   Fixes for Home Page, Side Menu & Footer
   ========================================= */

/* 1. باکس رتبه اعتماد (Trust Score) */
body.dark-mode .container[style*="background:#FEF3C7"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode h4[style*="color:#92400E"] {
    color: #FCD34D !important; /* رنگ طلایی برای عنوان */
}
body.dark-mode .container[style*="background:#FEF3C7"] div[style*="background:#fff"] {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #E2E8F0 !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 2. منوی همبرگری (Side Menu) */
body.dark-mode #sideMenu {
    background: #0f172a !important; /* پس‌زمینه تیره یکدست */
}
body.dark-mode #sideMenu a {
    color: #E2E8F0 !important; /* سفید کردن متن لینک‌ها */
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
/* متمایز کردن لینک متخصصین من */
body.dark-mode #sideMenu a#myExpertsLink {
    color: #3BA8B5 !important; 
    background: rgba(59, 168, 181, 0.1) !important;
    border-radius: 8px;
    padding-right: 10px;
    padding-left: 10px;
}

/* 3. فوتر (Footer) */
body.dark-mode footer {
    background: #0f172a !important; /* کمی متفاوت از بدنه برای تفکیک */
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 4. نوار ناوبری پایین (کاشی‌ها) */
body.dark-mode .app-bottom-nav {
    background: #0f172a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.5) !important;
}
body.dark-mode .nav-item {
    color: #94A3B8 !important;
}
body.dark-mode .nav-item.active {
    color: #3BA8B5 !important;
}
body.dark-mode .nav-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 5. اصلاح ظاهر لوگو در حالت تاریک */
body.dark-mode .logo img {
    filter: brightness(0.9) contrast(1.1);
    border-radius: 12px; /* نرم کردن گوشه‌های پس‌زمینه سفید عکس */
    box-shadow: 0 0 10px rgba(59, 168, 181, 0.2);
}
/* =========================================
   Fix White Boxes & Invisible Text in Dark Mode
   ========================================= */

/* ۱. کادرهای سفید (مثل بخش ثبت‌نام، کارت متخصصین) */
body.dark-mode [style*="background:#fff"], 
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:white"],
body.dark-mode .card {
    background-color: #1E293B !important;
    border: 1px solid #334155 !important;
}

/* ۲. اصلاح متن‌های داخل کادرهای سفید (اگر بک‌گراند تیره نشد، متن تیره شود) */
body.dark-mode [style*="background:#fff"] *, 
body.dark-mode .card * {
    color: #F8FAFC !important;
}

/* ۳. باکس رتبه اعتماد (رنگ پس‌زمینه زرد را در دارک مود تیره می‌کنیم) */
body.dark-mode [style*="background:#FEF3C7"],
body.dark-mode .trust-score {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode [style*="background:#FEF3C7"] *,
body.dark-mode .trust-score * {
    color: #F8FAFC !important;
}

/* ۴. آیکون‌های شبکه‌های اجتماعی (فوتر) */
body.dark-mode footer a img {
    filter: none !important; 
    border-radius: 50%;
}

/* ۵. دکمه‌های رنگی (مثل مشتری/متخصص/ویزیتور) که رنگشان حفظ شود */
body.dark-mode a[href="/register/customer/"],
body.dark-mode a[href="/register/expert/"],
body.dark-mode a[href="/register/visitor/"] {
    color: #fff !important; /* متن دکمه‌های رنگی سفید بماند */
}
/* =========================================
   Fix Header (Navbar) in Dark Mode
   ========================================= */

/* تیره کردن پس‌زمینه هدر */
body.dark-mode header,
body.dark-mode .header {
    background-color: #05010f !important; /* هم‌رنگ با پس‌زمینه اصلی */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* تغییر رنگ آیکون منوی همبرگری (☰) و متن‌های داخل هدر به سفید */
body.dark-mode header *,
body.dark-mode .header * {
    color: #F8FAFC !important;
}

/* استثنا: دکمه‌های رنگی هدر (مثل دکمه ورود) باید متن سفید داشته باشند */
body.dark-mode header a[style*="background"],
body.dark-mode .header a[style*="background"] {
    color: #fff !important;
}
/* =========================================
   Final Fixes: Header Icon, Side Menu Scroll, Expert Cards
   ========================================= */

/* ۱. بازگرداندن رنگ فیروزه‌ای به سه خط منوی همبرگری در هدر */
body.dark-mode header div[onclick*="openSideMenu"],
body.dark-mode header div[onclick*="openSideMenu"] * {
    color: #3BA8B5 !important; 
}

/* ۲. اصلاح اسکرول منوی همبرگری در موبایل */
body.dark-mode #sideMenu {
    height: 100dvh !important; /* استفاده از ارتفاع داینامیک برای موبایل */
    max-height: 100dvh !important;
    overflow-y: auto !important;
    padding-bottom: 120px !important; /* فضای کافی برای دیده شدن دکمه خروج */
}

/* ۳. اصلاح کارت‌های متخصصین (تیره کردن پس‌زمینه و سفید کردن متن) */
body.dark-mode div[onclick*="/expert/"][style*="background:#F8FAFC"] {
    background-color: #1E293B !important;
    border: 1px solid #334155 !important;
    color: #F8FAFC !important;
}
body.dark-mode div[onclick*="/expert/"][style*="background:#F8FAFC"] div {
    color: #F8FAFC !important; /* نام و تخصص متخصص سفید شود */
}
/* استثنا: ستاره‌های امتیاز و آیکون‌های پایین کارت باید رنگ خودشان را حفظ کنند */
body.dark-mode div[onclick*="/expert/"][style*="background:#F8FAFC"] svg {
    color: inherit !important; 
}
/* =========================================
   Ultimate Fixes: Mobile Side Menu, Chat Widget & Categories
   ========================================= */

/* ۱. اصلاح اسکرول منوی همبرگری در موبایل (به خصوص آیفون) */
body.dark-mode #sideMenu {
    height: 100vh !important;
    height: 100dvh !important; /* ارتفاع داینامیک برای موبایل */
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch !important; /* اسکرول نرم در iOS */
    padding-bottom: 150px !important; /* فضای کافی برای دکمه خروج */
}

/* ۲. اصلاح متن‌های دستیار هوشمند (تیره کردن متن‌ها روی پس‌زمینه سفید) */
body.dark-mode #chatWindow {
    background-color: #ffffff !important; 
}
body.dark-mode #chatWindow .chat-body * {
    color: #1E293B !important; 
}
body.dark-mode #chatWindow .chat-header * {
    color: #ffffff !important; 
}
body.dark-mode #chatWindow .msg-text.bot,
body.dark-mode #chatWindow .menu-item {
    background-color: #F8FAFC !important;
    color: #1E293B !important;
}
body.dark-mode #chatWindow .msg-text.user {
    background: linear-gradient(135deg, #3BA8B5, #2A7A85) !important;
    color: #ffffff !important;
}
body.dark-mode #chatWindow input {
    background-color: #ffffff !important;
    color: #1E293B !important;
}

/* ۳. اصلاح کارت‌های دسته‌بندی (تیره کردن کارت‌های داخل اسلایدر) */
body.dark-mode #categoriesSlider > div,
body.dark-mode #categoriesSlider > a {
    background-color: #1E293B !important;
    border: 1px solid #334155 !important;
}
body.dark-mode #categoriesSlider > div *,
body.dark-mode #categoriesSlider > a * {
    color: #F8FAFC !important; /* سفید کردن متن و آیکون‌های داخل کارت */
}

/* ۴. اصلاح دکمه‌های فلش اسلایدر دسته‌بندی */
body.dark-mode #categoriesSlider ~ button {
    background-color: #1E293B !important;
    border-color: #334155 !important;
}
body.dark-mode #categoriesSlider ~ button svg {
    stroke: #3BA8B5 !important; /* فیروزه‌ای کردن رنگ فلش */
}