html, body.single-rst_course {
    overflow-x: hidden;
    max-width: 100vw;
}

/* باکس اصلی خلاصه دوره (طبق کد شما) */
.rst-summary-box {
    background: linear-gradient(51deg, rgba(58, 41, 121, 1) 0%, rgba(56, 55, 75, 0.66) 48%);
    backdrop-filter: blur(15px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    border-radius: var(--box-radius);
    position: relative;
    padding: 24px;
    border: 1px solid transparent;
}

/* باکس‌های شیشه‌ای داخلی (طبق کد شما) */
.rst-inner-glass {
    background: transparent;
    box-shadow: inset 0px 0px 15px 0px rgba(255, 255, 255, 0.25);
    border-radius: 8px;
}

/* نوار پیشرفت (بدون باکس دورش) */
.rst-progress-bar-container {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin-top: 8px;
}

.rst-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3F4DE3, var(--rst-accent-color));
    border-radius: var(--box-radius);
}

/* دکمه‌های گرادینت */
.btn-primary-gradient {
    background: linear-gradient(180deg, #3F4DE3 13.94%, #8189DF 100% 100%);
    border: none;
    transition: opacity 0.3s ease;
    padding: 6px 26px 6px 26px;
}

.btn-primary-gradient:hover {
    opacity: 0.9;
}

/* ========================================================
   استایل‌های حالت لایت (Light Mode)
   سلکتور قالب: [data-bs-theme="light"]
======================================================== */

/* ۱. استایل باکس اصلی خلاصه دوره در حالت لایت */
[data-bs-theme="light"] .rst-summary-box {
    background: linear-gradient(227.67deg, #FFFFFF 33.49%, rgba(175, 181, 243, 74%) 113%) !important;
    border: 1px solid rgba(81, 97, 201, 0.3) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03) !important;
}

/* ۲. تغییر رنگ متون (سفید به سرمه‌ای)
   نکته: دکمه (.btn-primary-gradient) مستثنی شده تا متن آن سفید بماند */
[data-bs-theme="light"] .text-white:not(.btn-primary-gradient) {
    color: #1B1256 !important;
}

/* ۳. تغییر رنگ متون کم‌رنگ (متن‌های دارای .text-white-50) */
[data-bs-theme="light"] .text-white-50 {
    color: rgb(27, 18, 86) !important;
}

/* ۴. استایل باکس‌های شیشه‌ای داخلی در حالت لایت */
[data-bs-theme="light"] .rst-inner-glass {
    box-shadow: 0px 0px 7.6px 0px #AFB5F3 inset;
    border: 1px solid rgba(27, 18, 86, 0.1) !important;
}

[data-bs-theme="light"] .rst-inner-glass .text-warning {
    color: #1B1256 !important;
}

/* ۵. تغییر پس‌زمینه خالی نوار پیشرفت (کمرنگ کردن آن برای لایت مود) */
[data-bs-theme="light"] .rst-progress-bar-container {
    background: rgba(27, 18, 86, 0.1) !important;
}

/* ۶. اصلاح خط جداکننده زیر کلمه "خلاصه دوره" در لایت مود */
[data-bs-theme="light"] .rst-summary-box .border-bottom {
    border-color: rgba(27, 18, 86, 0.15) !important;
}

/* استایل‌های اختصاصی بخش "در این مسیر چی یاد میگیری" */
.rst-report-main-box {
    background: linear-gradient(355.77deg, rgba(66, 32, 215, 0.2) -0.26%, rgba(11, 9, 23, 0) 47.77%, #1B1358 99.77%),
    radial-gradient(107.35% 40.45% at 83.11% 64.82%, rgba(16, 12, 35, 0.44) 0%, rgba(23, 21, 37, 0.044) 100%),
    radial-gradient(68.68% 29.98% at 14.54% 77.17%, rgba(213, 36, 229, 0) 0%, rgba(24, 21, 55, 0) 100%);
    border-radius: var(--box-radius, 16px);
}

/* آیتم‌های شیشه‌ای داخلی */
.rst-glass-row-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--box-radius, 16px);
    box-shadow: inset 0px 0px 15px 0px rgba(255, 255, 255, 0.25);
    transition: all 0.3s ease;
}

.rst-glass-row-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(93, 93, 255, 0.3);
}

/* =========================================
   ریسپانسیو: ریزتر شدن متن‌ها در موبایل
========================================= */
@media (max-width: 768px) {
    .rst-glass-row-item p {
        font-size: 13px !important; /* سایز ریزتر برای موبایل */
        line-height: 2 !important; /* فاصله بین خطوط برای خوانایی بهتر */
    }

    /* اگر آیکون‌ها هم در موبایل بزرگ هستند، می‌توانید سایزشان را کمی کم کنید */
    .rst-glass-row-item svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* ==========================================
   اورراید رنگ‌های گزارش عملکرد / مراحل (Light Mode)
========================================== */

/* ۱. تغییر رنگ عنوان بخش */
[data-bs-theme="light"] .rst-performance-report h2.text-white {
    color: #1B1256 !important;
}

/* ۲. استایل و گرادینتِ باکس کلی */
[data-bs-theme="light"] .rst-report-main-box {
    background: linear-gradient(227.67deg, #FFFFFF 33.49%, #D2D6FE 113%) !important;

    /* جایگزینی border-image با border-color برای حفظ گردی گوشه‌ها (border-radius) */
    border: 1px solid rgba(122, 131, 224, 0.4) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important; /* سایه ملایم برای تم روشن */
}

/* ۳. استایل اختصاصی باکس‌های داخلی (آیتم‌های متن) */
[data-bs-theme="light"] .rst-glass-row-item {
    background: rgba(255, 255, 255, 0.5) !important; /* یک بک‌گراند شیشه‌ای روشن تا گرادینت زیری دیده شود */
    box-shadow: 0px 0px 21.6px 0px #b4b7e1 inset !important;
}

}

/* افکت هاور باکس‌های متنی در لایت‌مود */
[data-bs-theme="light"] .rst-glass-row-item:hover {
    background: #ffffff !important;
    border-color: #5D68E5 !important;
}

/* 🟢 تنظیمات خوانایی متن و آیکون‌ها 🟢 */

/* تغییر رنگ متنِ داخل باکس‌ها از سفید به سرمه‌ای */
[data-bs-theme="light"] .rst-glass-row-item p.text-white {
    color: #1B1256 !important;
}

/* سیستم هوشمند تغییر رنگ آیکون تیک (SVG) به سرمه‌ای (بدون پر شدن کادر) */
[data-bs-theme="light"] .rst-glass-row-item svg [fill="white"],
[data-bs-theme="light"] .rst-glass-row-item svg [fill="#ffffff"],
[data-bs-theme="light"] .rst-glass-row-item svg [fill="#fff"] {
    fill: #1B1256 !important;
}

/* ========================================================
   استایل‌های بخش سرفصل‌های دوره (رنگ متفاوت فقط برای محتوای باز شده)
======================================================== */

/* باکس کلیِ دور تمام سرفصل‌ها */
.rst-chapters-container {
    background-color: #14113C !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
}

/* باکس هر فصل (هدر همیشه ثابت می‌ماند) */
.rst-course-accordion .accordion-item {
    background-color: #1B1256 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: var(--box-radius);
    margin-bottom: 16px;
    overflow: hidden;
}

/* *** فقط قسمتی که باز می‌شود (محتوای کشویی) رنگش فرق کند *** */
.rst-course-accordion .accordion-collapse {
    background-color: #241A75 !important; /* رنگ روشن‌تر فقط برای باکس توضیحات */
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* یک خط ملایم بین هدر و بدنه */
}

/* دکمه هدر آکاردئون */
.rst-course-accordion .accordion-button {
    background-color: transparent !important;
    color: white !important;
    box-shadow: none !important;
    padding: 20px;
    display: flex !important;
    align-items: center !important;
    width: 100%;
}

/* تغییر رنگ متن عنوان به رنگ اکسنت در حالت باز */
.rst-course-accordion .accordion-button:not(.collapsed) {
    color: var(--rst-accent-color) !important;
}

/* تنظیم آیکون فلش (Arrow) در انتهای سمت چپ */
.rst-course-accordion .accordion-button::after {
    flex-shrink: 0;
    margin: 0 !important;
    margin-inline-start: 16px !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/* تغییر رنگ فلش در حالت باز */
.rst-course-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235D6CFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/* تگ‌های مجزا و مستقل شیشه‌ای (ویدیو و زمان) */
.rst-meta-badge {
    background: transparent;
    box-shadow: inset 0px 0px 15px 0px rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    padding: 6px 14px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* ========================================================
   ریسبانسیو اختصاصی سرفصل‌ها (موبایل و دسکتاپ)
======================================================== */
@media (max-width: 768px) {
    /* ریزتر کردن عنوان سرفصل در موبایل */
    .rst-course-accordion .accordion-button span.font-size-16 {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* ریزتر کردن شماره فصل (مثلاً ۰۱) در موبایل */
    .rst-course-accordion .accordion-button span.font-size-18 {
        font-size: 15px !important;
    }

    /* تراز شدن دقیق تگ‌ها زیر متنِ عنوان در موبایل */
    .rst-mobile-tags-align {
        padding-right: 32px;
        margin-top: 8px;
    }

    /* بهینه‌سازی پدینگ دکمه بازشو در موبایل */
    .rst-course-accordion .accordion-button {
        padding: 16px 12px;
    }
}

/* اعمال محدودیت عرض توضیحات فقط در دسکتاپ برای جلوگیری از چسبیدن به دکمه */
@media (min-width: 769px) {
    .rst-desc-width-adjust {
        max-width: 75%;
    }
}

/* ========================================================
   استایل‌های حالت لایت (Light Mode) برای بخش سرفصل‌ها
   سلکتور قالب: [data-bs-theme="light"]
======================================================== */

/* ۱. باکس کلیِ دور تمام سرفصل‌ها */
[data-bs-theme="light"] .rst-chapters-container {
    background: #8B92E633 !important; /* رنگ درخواستی شما */
    border-color: rgba(27, 18, 86, 0.05) !important; /* حاشیه متناسب با لایت */
}

/* ۲. باکس هر فصل (حالت بسته) */
[data-bs-theme="light"] .rst-course-accordion .accordion-item {
    background-color: #FFFFFF !important; /* رنگ سفید درخواستی */
    border-color: rgba(27, 18, 86, 0.08) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02); /* یک سایه بسیار ملایم برای زیبایی */
}

/* ۳. قسمتی که باز می‌شود (محتوای کشویی) */
[data-bs-theme="light"] .rst-course-accordion .accordion-collapse {
    /* گرادینت درخواستی شما */
    background: linear-gradient(1deg, #ffffff, #d2d4edf2);
    border-top: 1px solid rgba(27, 18, 86, 0.08) !important;
}

/* ۴. تغییر رنگ متن‌های داخل آکاردئون (چون بک‌گراند سفید شده است) */
[data-bs-theme="light"] .rst-course-accordion .accordion-button .text-white,
[data-bs-theme="light"] .rst-course-accordion .accordion-button .text-white-50,
[data-bs-theme="light"] .rst-course-accordion .accordion-body .text-white,
[data-bs-theme="light"] .rst-course-accordion .accordion-body .text-white-50 {
    color: #1B1256 !important; /* تبدیل رنگ سفید متون به سرمه‌ای */
}

/* کم‌رنگ کردن توضیحات بازشو و تگ‌های شماره فصل برای تفکیک بهتر */
[data-bs-theme="light"] .rst-course-accordion .accordion-body p.text-white-50,
[data-bs-theme="light"] .rst-course-accordion .accordion-button span.font-size-18 {
    color: rgba(27, 18, 86, 0.65) !important;
}

/* حفظ رنگ اکسنت (آبی/بنفش) برای عنوان فصلی که باز است */
[data-bs-theme="light"] .rst-course-accordion .accordion-button:not(.collapsed) span.text-white {
    color: var(--rst-accent-color) !important;
}

/* ۵. استایل تگ‌های مجزا (ویدیو و زمان) متناسب با لایت مود */
[data-bs-theme="light"] .rst-course-accordion .rst-meta-badge {
    box-shadow: 0px 0px 7.6px 0px #AFB5F3 inset;
    color: rgba(27, 18, 86, 0.7) !important; /* رنگ متن تگ‌ها */
}

/* ۶. تغییر رنگ آیکون فلش به سرمه‌ای در حالت بسته (تا روی سفید دیده شود) */
[data-bs-theme="light"] .rst-course-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231B1256'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/* تغییر رنگ فلش به رنگ اکسنت در حالت باز */
[data-bs-theme="light"] .rst-course-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235D6CFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/* ========================================================
   استایل‌های بخش مقالات دوره (محو شدن عکس و چیدمان جدید)
======================================================== */

/* باکس تصویر مقاله همراه با افکت محو شدن لبه پایین */
.rst-article-img-holder {

    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: var(--box-radius);
    line-height: 0;
}

.rst-glass-card {
    background: linear-gradient(264deg, rgb(28, 19, 89) 0%, rgba(12, 10, 26, 0) 100%);
}

/* لایه ماسک برای محو کردن پایین عکس */
.rst-article-img-holder::after {
    content: "";
    position: absolute;
    inset: 0;
    /* این گرادینت پایین عکس را هم‌رنگ پس‌زمینه کارت می‌کند تا محو به نظر برسد */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, rgba(20, 17, 60, 0.4) 80%, #0f0d2b 100%);
    pointer-events: none;
}

.rst-article-img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* تگ ویو یا زمان مطالعه که روی عکس سمت راست پایین قرار می‌گیرد */
.rst-article-view-tag {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 2;

    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3) !important;
    padding: 6px 14px;
    border-radius: var(--box-radius);
    display: inline-flex;
    gap: 6px;
}

/* فیکس کردن بدنه کارت مقاله برای هل دادن دکمه‌ها به کف باکس */
.rst-article-card-body {
    padding: 24px;
    display: flex;
    flex-column: column;
    flex-direction: column;
    flex-grow: 1;
}

/* ردیف انتهایی کارت (نویسنده راست / دکمه چپ) */
.rst-article-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between; /* نویسنده راست و دکمه چپ */
    width: 100%;
}

/* ========================================================
   استایل‌های حالت لایت (Light Mode) برای مقالات دوره
   سلکتور قالب: [data-bs-theme="light"]
======================================================== */

/* ۱. استایل باکس کلی مقاله (کارت) در حالت لایت */
[data-bs-theme="light"] .rst-glass-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(27, 18, 86, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

/* ۲. تغییر رنگ لایه محوکننده عکس به رنگ سفید */
[data-bs-theme="light"] .rst-article-img-holder::after {
    /* گرادینت پایین عکس را به رنگ سفید محو می‌کند */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.6) 80%, #FFFFFF 100%) !important;
}

/* ۳. تغییر رنگ متن‌ها در کارت مقاله (عناوین، توضیحات، نویسنده) */
[data-bs-theme="light"] .rst-glass-card .text-white,
[data-bs-theme="light"] .rst-glass-card h3,
[data-bs-theme="light"] .rst-glass-card span.text-white {
    color: #1B1256 !important;
}

/* ۴. تغییر رنگ متن‌های کمرنگ (توضیحات مقاله) */
[data-bs-theme="light"] .rst-glass-card .text-white-50 {
    color: rgb(27, 18, 86) !important;
}

/* ۵. استایل تگ ویو (روی عکس) در حالت لایت */
[data-bs-theme="light"] .rst-article-view-tag {
    box-shadow: 0px 0px 15px 0px #FFFFFF40 inset !important;
    color: #1B1256 !important; /* رنگ متن و آیکون داخل تگ */
}

/* ۶. اصلاح خط جداکننده (border-top) بالای بخش نویسنده و دکمه */
[data-bs-theme="light"] .rst-article-footer-row {
    border-top-color: rgba(27, 18, 86, 0.1) !important;
}

/* تغییر رنگ آیکون‌های SVG داخل کارت (مثل آیکون ویو یا آیکون نویسنده) که استروک سفید دارند */
[data-bs-theme="light"] .rst-glass-card svg {
    stroke: #1B1256 !important;
}