/*
dark-mode.css
حالت شب - با toggleClass('dark-mode') روی body فعال/غیرفعال می‌شه
(همون چیزی که تو mainscript.js با کلیک روی #darkModeToggle اتفاق می‌افته)

روش کار: به‌جای بازنویسی رنگ تک‌تک المان‌ها، همون متغیرهای CSS که تو
style.css تعریف کردیم (--rm-navy, --rm-white, --rm-hero-bg, --rm-text-gray)
رو زیر هر بخشِ روشن، با مقدار تیره دوباره تعریف می‌کنیم. چون همه‌ی
فایل‌ها (courses.css, webinars.css, testimonials.css, faq.css,
instructors.css, consultation-form.css) از همین متغیرها استفاده
می‌کنن، عنوان‌ها/متن‌ها/بک‌گراند کارت‌ها خودکار عوض می‌شن.

نکته مهم: هدر و فوتر از قبل تیره‌ن (پس‌زمینه‌شون از --rm-navy-deep
میاد)، به همین دلیل عمداً دست نمی‌خورن.

این فایل باید بعد از همه‌ی CSSهای دیگه (style.css و بقیه‌ی
بخش‌ها) لود بشه تا override کنه.
*/

/* پس‌زمینه‌ی کلی صفحه و ترنزیشن نرم موقع تعویض حالت */
body {
    transition: background-color .35s ease, color .35s ease;
}

body.dark-mode {
    background: #10132a;
}

/* =====================================================
   بخش‌های روشن - با اسکوپ کردن متغیرها به تیره تبدیل می‌شن
===================================================== */
body.dark-mode .hero-section,
body.dark-mode .video-section,
body.dark-mode .courses-section,
body.dark-mode .webinars-section,
body.dark-mode .instructors-section,
body.dark-mode .testimonials-section,
body.dark-mode .faq-section {
    --rm-hero-bg: #10132a;
    /* پس‌زمینه‌ی بخش */
    --rm-white: #1c2140;
    /* پس‌زمینه‌ی کارت‌ها (چیزی که قبلاً سفید بود) */
    --rm-navy: #f3f4fa;
    /* متن اصلی/تیتر (چیزی که قبلاً سرمه‌ای تیره بود) */
    --rm-navy-deep: #ffffff;
    /* متن پررنگ‌تر/تاکیدی */
    --rm-text-gray: #a7acc9;
    /* متن کم‌رنگ/توضیحات */
    background: var(--rm-hero-bg);
}

/* -----------------------------------------------------
   بخش فرم مشاوره - جدا از بقیه، چون .consultation-card خودش از
   قبل (تو هر دو حالت) تیره‌ست و از همون --rm-navy-deep برای
   پس‌زمینه‌ی خودش استفاده می‌کنه. اگه این‌جا هم مثل بالا اون
   متغیر رو سفید می‌کردیم، پنل تیره‌ی فرم سفید می‌شد و
   بوردر/متن سفیدِ نیمه‌شفاف داخلش کلاً محو می‌شد. برای همین فقط
   پس‌زمینه‌ی خودِ بخش (دور پنل) رو تیره می‌کنیم، بدون دست زدن
   به متغیرها، تا داخل کارت دست‌نخورده و درست بمونه.
------------------------------------------------------ */
body.dark-mode .consultation-section {
    background: #10132a;
}

/* =====================================================
   دکمه‌ها و بج‌هایی که از navy-deep به‌عنوان "پرشده‌ی تیره"
   استفاده می‌کردن (نه متن) - چون بالا navy-deep رو سفید کردیم،
   این‌ها رو جدا نگه می‌داریم تا شکل دکمه/بج خراب نشه و طلایی بمونن
===================================================== */
body.dark-mode .btn-hero-cta,
body.dark-mode .btn-courses-cta,
body.dark-mode .course-badge {
    background: var(--rm-gold, #f2b632);
    color: #1c2140;
}

body.dark-mode .add_to_cart_button {
    border-color: var(--rm-gold, #f2b632);
    color: var(--rm-gold, #f2b632);
}

body.dark-mode .add_to_cart_button:hover {
    background: var(--rm-gold, #f2b632);
    color: #1c2140;
}

/* -----------------------------------------------------
   حلقه‌های دور کارت سه‌بعدی رویال‌مایند - رنگ نقطه‌چین روشن‌تر بشه
   که رو پس‌زمینه‌ی تیره هم دیده بشه
------------------------------------------------------ */
body.dark-mode .home-ring-dashed {
    border-color: rgba(255, 255, 255, .25);
}

/* -----------------------------------------------------
   پنل نظرات - پس‌زمینه‌ی روشنِ کم‌رنگش، تیره‌ی کم‌رنگ بشه
------------------------------------------------------ */
body.dark-mode .testimonials-panel {
    background: rgba(255, 255, 255, .04);
}

body.dark-mode .testimonials-decor-icon,
body.dark-mode .testimonial-arrow {
    background: #1c2140;
    color: var(--rm-white-icon, #fff);
}

/* -----------------------------------------------------
   آیتم‌های سوالات متداول - بوردر خاکستری روشن، روی پس‌زمینه‌ی
   تیره تقریباً دیده نمی‌شه، کمی روشن‌ترش می‌کنیم
------------------------------------------------------ */
body.dark-mode .faq-item {
    border-color: rgba(255, 255, 255, .12);
}

body.dark-mode .faq-item.is-active {
    border-color: var(--rm-gold, #f2b632);
}

body.dark-mode .faq-q-icon {
    background: rgba(255, 255, 255, .08);
}

/* -----------------------------------------------------
   دراپ‌داون منوی هدر - بدون تغییر (هدر از قبل تیره‌ست)
------------------------------------------------------ */

/* -----------------------------------------------------
   آیکون دکمه‌ی حالت شب - وقتی فعاله، رنگ متفاوت (طلایی) بگیره
   تا مشخص باشه الان تو حالت شب هستیم
------------------------------------------------------ */
body.dark-mode #darkModeToggle {
    background: var(--rm-gold, #f2b632);
    border-color: var(--rm-gold, #f2b632);
    color: #1c2140;
}