/* ================================================================
   استایل تکمیلی بخش دوره‌ها
   ----------------------------------------------------------------
   چرا این فایل لازم است:

   assets/css/app.css با Tailwind JIT از روی قالب‌هایی ساخته شده که
   در زمان بیلد وجود داشتند. هر کلاسی که یک قالب تازه معرفی کند،
   هیچ قاعده‌ای پشتش نیست و بی‌صدا بی‌استایل رندر می‌شود.

   (نکتهٔ جانبی برای ایجنت ارشد: app.css فعلی مربوط به ۲۰ شهریور است
   ولی قالب‌ها تا ۲۶ شهریور ویرایش شده‌اند، پس همین حالا هم کلاس‌هایی
   مثل mt-5 و p-12 در سایت بدون قاعده‌اند. یک بار `npm run build`
   این را برای کل قالب حل می‌کند.)

   این فایل فقط همان چند کلاسی را تعریف می‌کند که بخش دوره‌ها لازم
   دارد و در app.css نیست. اگر Tailwind دوباره بیلد شود، این قواعد
   تکراری ولی بی‌ضرر می‌شوند — مقادیر یکی است.

   همهٔ رنگ‌ها از توکن‌های موجود می‌آیند؛ هیچ رنگ خامی اینجا نوشته
   نشده (قاعدهٔ ۴-۳ سند معماری).
   ================================================================ */

/* --- ابزارهای پایه‌ای که در بیلد فعلی نیستند --- */
.jj-course-scope .mt-auto  { margin-top: auto; }
.jj-course-scope .gap-y-2  { row-gap: .5rem; }
.jj-course-scope .gap-y-3  { row-gap: .75rem; }
.jj-course-scope .gap-y-4  { row-gap: 1rem; }
.jj-course-scope .gap-x-6  { column-gap: 1.5rem; }
.jj-course-scope .gap-x-8  { column-gap: 2rem; }

.jj-course-scope .placeholder\:text-on-surface-variant::placeholder {
  color: rgb(var(--c-ink-2));
}

/* --- ته‌رنگ وضعیت‌ها --- */
/* معادل bg-*/10 که در بیلد فعلی وجود ندارد. */
.jj-tint-ok     { background-color: rgb(var(--c-ok) / .10); }
.jj-tint-warn   { background-color: rgb(var(--c-warn) / .10); }
.jj-tint-accent { background-color: rgb(var(--c-accent) / .12); }

/* --- شفافیت‌های موضعی --- */
.jj-course-scope .text-on-surface-variant\/50 { color: rgb(var(--c-ink-3) / .5); }

/* --- هاور گروهی روی دکمهٔ باز کردن آیتم --- */
.jj-course-scope .group:hover .jj-item-open {
  background-color: rgb(var(--c-primary) / .10);
  color: rgb(var(--c-primary));
}

/* --- فاصله‌گذاری واکنش‌گرای پنل خرید --- */
@media (min-width: 1024px) {
  .jj-course-scope .lg\:px-space-lg { padding-left: 2rem; padding-right: 2rem; }
  .jj-course-scope .lg\:pt-space-lg { padding-top: 2rem; }
}

/* --- تیتر بنر در دسکتاپ --- */
@media (min-width: 768px) {
  .jj-course-scope .md\:text-headline-lg {
    font-size: 2.25rem;
    line-height: 1.25;
  }
}

/* --- نوار پیشرفت: انتقال نرم هنگام به‌روزرسانی با ایجکس --- */
.jj-course-scope [data-jj-progress-bar] {
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

/* --- چک‌باکس پیشرفت: هم‌اندازه و هم‌رنگ با تم --- */
.jj-course-progress {
  accent-color: rgb(var(--c-primary));
  cursor: pointer;
}

.jj-course-progress:disabled {
  opacity: .5;
  cursor: wait;
}

/* --- ردیف تمام‌شده کمی محو می‌شود تا پیشرفت دیده شود --- */
.jj-course-scope li:has(.jj-course-progress:checked) .jj-item-title {
  opacity: .65;
  text-decoration: line-through;
  text-decoration-color: rgb(var(--c-ink-3) / .4);
}