/**
 * صفحه‌ی تک‌دوره — دو بخش:
 *   ۱) جدول فشرده‌ی اشتراک‌ها («طرح C»).
 *   ۲) دکمه‌ی اصلی «خرید اشتراک» در باکس خرید کنار ویدیو.
 * به‌علاوه استیکی‌کردن باکس همکاری در فروش (انتهای فایل).
 *
 * ---------------------------------------------------------------------
 * ۱) جدول فشرده‌ی اشتراک‌ها
 *
 * همان شش اشتراک صفحه‌ی اصلی، ولی در صفحه‌ی دوره اشتراک یک پیشنهاد جانبی
 * است نه موضوع اصلی: گرید شش کارت بلند (~۹۶۰ پیکسل) به شش ردیف ~۶۳ پیکسلی
 * تبدیل می‌شود، تقریباً هم‌اندازه‌ی باکس توضیحات محصول بالای صفحه.
 *
 * مارک‌آپ افزونه برای هر ردیف (article.td-subs__card):
 *   span.dl-sub-ribbon?  + span.td-subs__badge
 *   + div.td-subs__card-top (h*.td-subs__name, .td-subs__price-row, .td-subs__duration)
 *   + a.td-subs__btn + a.td-subs__btn--buy
 * `.td-subs__card-top { display: contents }` بچه‌هایش را به همان خط فلکس
 * ردیف می‌آورد، پس فقط با `order` ستون‌ها چیده می‌شوند:
 *   ریبون | نام (flex:1) | مدت+هدیه | قیمت | خرید اشتراک | مشاهده اشتراک
 * نام تنها ستون کشسان است، پس بقیه‌ی ستون‌ها در همه‌ی ردیف‌ها هم‌تراز
 * می‌مانند حتی وقتی ردیف پیشنهادی یک تگ اضافه دارد.
 * assets/js/dl-subs-home.js بخش هدیه را این‌جا هم به .dl-subs-gift جدا می‌کند
 * و target="_blank" را از هر دو لینک برمی‌دارد.
 *
 * کدام دکمه اصلی است (۱۴۰۵/۰۶/۳۰ اصلاح شد):
 * هر ردیف دو لینک دارد — «مشاهده اشتراک» به صفحه‌ی خودِ آن اشتراک، و
 * «خرید اشتراک» که مستقیم به سبد خرید می‌رود (/cart/?dl_add_sub=<id>).
 * در نسخه‌ی اول، دکمه‌ی آبی روی «خرید اشتراک» نشسته بود؛ یعنی کاربر دکمه‌ی
 * اصلی ردیف را می‌زد و یک‌باره در سبد خرید می‌افتاد بدون اینکه صفحه‌ی
 * اشتراک را دیده باشد. حالا دکمه‌ی آبی «مشاهده اشتراک» است (مثل قبل از
 * بازطراحی) و «خرید اشتراک» لینک متنی آرام کنارش.
 *
 * رنگ‌ها و `gap` عمداً !important هستند چون هم شیت افزونه و هم CSS تولیدی
 * المنتور با سلکتورهای سنگین‌تر همین عناصر را استایل می‌دهند — مخصوصاً
 * gap بیست‌پیکسلی گرید که ۱۰۰ پیکسل فضای مرده بین ردیف‌ها می‌ساخت.
 * --------------------------------------------------------------------- */

body.single-course .td-subs .td-subs__grid {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  padding: 6px 22px 10px 22px;
  background: #ffffff;
  border: 1px solid #ece7df;
  border-radius: 16px;
}

body.single-course .td-subs .td-subs__grid .td-subs__card {
  position: relative;
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 0;
  margin: 0 !important;
  padding: 11px 0 !important;
  box-sizing: border-box;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid #f7f3ed !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}

body.single-course .td-subs .td-subs__grid .td-subs__card:last-child {
  border-bottom: 0 !important;
}

body.single-course .td-subs .td-subs__grid .td-subs__card::before,
body.single-course .td-subs .td-subs__grid .td-subs__card::after {
  display: none !important;
}

body.single-course .td-subs .td-subs__card .td-subs__card-top {
  display: contents;
}

/* بج توضیحی اولین چیزی است که حذف می‌شود — نام اشتراک خودش گویاست. */
body.single-course .td-subs .td-subs__card .td-subs__badge,
body.single-course .td-subs .td-subs__card .td-subs__desc,
body.single-course .td-subs .td-subs__card .td-subs__features,
body.single-course .td-subs .td-subs__card .dl-sub-picture {
  display: none !important;
}

body.single-course .td-subs .td-subs__card .dl-sub-ribbon {
  order: 1;
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 3px 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background-color: #1f5fe0 !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  color: #ffffff !important;
  white-space: nowrap;
  transform: none !important;
}

body.single-course .td-subs .td-subs__card .dl-sub-ribbon::before,
body.single-course .td-subs .td-subs__card .dl-sub-ribbon::after {
  display: none !important;
}

body.single-course .td-subs .td-subs__card .dl-sub-ribbon * {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
}

body.single-course .td-subs .td-subs__card .td-subs__name {
  order: 2;
  flex: 1 1 auto;
  min-width: 140px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  color: #17161c !important;
}

body.single-course .td-subs .td-subs__card .td-subs__duration {
  order: 3;
  flex: 0 0 220px;
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  color: #45424f !important;
}

body.single-course .td-subs .td-subs__card .td-subs__duration-icon {
  display: none !important;
}

body.single-course .td-subs .td-subs__card .dl-subs-gift {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fcf0e9;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  color: #b4460f;
  white-space: nowrap;
}

/* خط «معادل ماهانه» فقط به چیدمان صفحه‌ی اصلی تعلق دارد. */
body.single-course .td-subs .td-subs__card .dl-subs-monthly {
  display: none !important;
}

body.single-course .td-subs .td-subs__card .td-subs__price-row {
  order: 4;
  flex: 0 0 190px;
  display: flex !important;
  align-items: baseline;
  justify-content: flex-start;
  gap: 5px;
  margin: 0 !important;
  padding: 0 !important;
}

body.single-course .td-subs .td-subs__card .td-subs__price {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #17161c !important;
}

body.single-course .td-subs .td-subs__card .td-subs__currency {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #6b6875 !important;
}

/* اقدام ثانویه: «خرید اشتراک» → مستقیم به سبد خرید. */
body.single-course .td-subs .td-subs__card .td-subs__btn--buy {
  order: 5;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 4px 2px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #1b54c9 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.8 !important;
  white-space: nowrap;
  text-align: center !important;
  text-decoration: none !important;
}

body.single-course .td-subs .td-subs__card .td-subs__btn--buy:hover,
body.single-course .td-subs .td-subs__card .td-subs__btn--buy:focus {
  background-color: transparent !important;
  color: #123e96 !important;
  text-decoration: underline !important;
}

/* اقدام اصلی: «مشاهده اشتراک» → صفحه‌ی خودِ همان اشتراک. */
body.single-course .td-subs .td-subs__card .td-subs__btn:not(.td-subs__btn--buy) {
  order: 6;
  flex: 0 0 150px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 150px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 9px !important;
  background-color: #1f5fe0 !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: nowrap;
  text-align: center !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease;
}

body.single-course .td-subs .td-subs__card .td-subs__btn:not(.td-subs__btn--buy):hover,
body.single-course .td-subs .td-subs__card .td-subs__btn:not(.td-subs__btn--buy):focus {
  background-color: #1b4fbd !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* اشتراک پیشنهادی: ردیف تیره‌ی کم‌رنگ با یک نوار نازک در لبه‌ی خواندن.
   صفحه RTL است، پس نوار باید سمت راست و کنار نام اشتراک باشد — آفست
   مثبت آن را سمت چپ و پشت دکمه می‌اندازد که مثل یک لکه‌ی بی‌ربط دیده
   می‌شود. */
body.single-course .td-subs .td-subs__grid .td-subs__card--recommended {
  margin: 4px -12px !important;
  padding: 11px 12px !important;
  border-bottom: 0 !important;
  border-radius: 10px !important;
  background-color: #f4f7ff !important;
  box-shadow: inset -3px 0 0 0 #1f5fe0 !important;
}

body.single-course .td-subs .td-subs__grid .td-subs__card--recommended .td-subs__name {
  font-weight: 700 !important;
}

/* تیتر بالای جدول. */
body.single-course .td-subs .td-subs__header {
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

body.single-course .td-subs .td-subs__title {
  margin: 0 0 6px 0 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  color: #17161c !important;
}

body.single-course .td-subs .td-subs__subtitle {
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  color: #6b6875 !important;
}

body.single-course .td-subs .dl-subs-all-wrap {
  margin: 0 0 10px 0 !important;
  text-align: left !important;
}

@media (max-width: 880px) {
  body.single-course .td-subs .td-subs__grid .td-subs__card {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 0 !important;
  }
  body.single-course .td-subs .td-subs__card .td-subs__name {
    flex: 1 1 100%;
  }
  body.single-course .td-subs .td-subs__card .td-subs__duration {
    flex: 0 0 auto;
  }
  body.single-course .td-subs .td-subs__card .td-subs__price-row {
    flex: 1 1 auto;
  }
  body.single-course .td-subs .td-subs__card .td-subs__btn--buy {
    order: 7;
    flex: 0 0 auto;
    min-height: 44px !important;
    padding: 4px 10px !important;
  }
  body.single-course .td-subs .td-subs__card .td-subs__btn:not(.td-subs__btn--buy) {
    order: 6;
    flex: 1 1 100%;
    width: 100% !important;
    min-height: 44px !important;
  }
}

/* ---------------------------------------------------------------------
 * ۲) دکمه‌ی اصلی «خرید اشتراک» در باکس خرید کنار ویدیو
 *
 * این دکمه را assets/js/dl-sales-mode.js می‌سازد (کلاس .dl-sales-sub-cta)
 * و مهم‌ترین اقدام کل صفحه است، ولی در حالت اولیه با ارتفاع ۴۴ پیکسل و
 * فونت ۱۳ از دکمه‌های فرعی صفحه هم کم‌جان‌تر دیده می‌شد.
 *
 * درباره‌ی سایه — نسخه‌ی قبلی یک هاله‌ی بزرگ نارنجی هم‌رنگ خود دکمه داشت
 * (۲۴ پیکسل بلور، آلفای ۰.۳۵). روی کارت سفید، سایه‌ی هم‌رنگ با بلور زیاد
 * مثل پخش‌شدن رنگ از زیر دکمه دیده می‌شود، نه مثل سایه. حالا سایه
 * خنثی و جمع است: یک لایه‌ی خیلی نزدیک که دکمه را به کارت می‌چسباند و یک
 * لایه‌ی بازتر با آفست منفی (spread منفی) که فقط کمی بلندش می‌کند. رنگ
 * سایه خاکستریِ تیره است نه نارنجی، و همین تفاوت اصلی است.
 *
 * دو خط inset هم شکل «جسم توپر» می‌سازند: یک خط روشن روی لبه‌ی بالا و یک
 * خط تیره‌ی نارنجی روی لبه‌ی پایین. گرادیان هم ملایم‌تر شد تا حالت پلاستیکی
 * نگیرد.
 *
 * درباره‌ی رنگ: نارنجی اولیه (#FF9115) با متن سفید نسبت کنتراست ~۲.۲ داشت
 * که پایین‌تر از حد استاندارد است. گرادیان این‌جا تیره‌تر است و وضع را
 * بهتر می‌کند، ولی برای رسیدن به حد کامل استاندارد باید نارنجی محسوس‌تر
 * تیره شود — که تصمیم برند است، نه فنی.
 *
 * `prefers-reduced-motion` رعایت شده: برای کسی که انیمیشن کمتر می‌خواهد،
 * جابه‌جایی هاور غیرفعال می‌شود.
 * --------------------------------------------------------------------- */

body.single-course .td-buy-options .dl-sales-sub-cta,
body.single-course .dl-sales-sub-wrap .dl-sales-sub-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  min-height: 56px !important;
  padding: 10px 20px !important;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 12px !important;
  background-color: #f07f11 !important;
  background-image: linear-gradient(180deg, #fa8f17 0%, #ee7410 100%) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.2px;
  text-align: center;
  text-decoration: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(122, 52, 2, 0.20),
    0 1px 2px rgba(23, 22, 28, 0.12),
    0 6px 14px -4px rgba(23, 22, 28, 0.20) !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-image 0.16s ease;
}

/* فلش کوچک رو به راست (جهت خواندن فارسی) به‌عنوان نشانه‌ی حرکت. */
body.single-course .td-buy-options .dl-sales-sub-cta::after,
body.single-course .dl-sales-sub-wrap .dl-sales-sub-cta::after {
  content: "←";
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.85;
  transform: translateX(0);
  transition: transform 0.16s ease;
}

body.single-course .td-buy-options .dl-sales-sub-cta:hover,
body.single-course .dl-sales-sub-wrap .dl-sales-sub-cta:hover,
body.single-course .td-buy-options .dl-sales-sub-cta:focus-visible,
body.single-course .dl-sales-sub-wrap .dl-sales-sub-cta:focus-visible {
  background-image: linear-gradient(180deg, #ff991d 0%, #f27c13 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(122, 52, 2, 0.20),
    0 2px 4px rgba(23, 22, 28, 0.14),
    0 10px 20px -6px rgba(23, 22, 28, 0.24) !important;
}

body.single-course .td-buy-options .dl-sales-sub-cta:hover::after,
body.single-course .dl-sales-sub-wrap .dl-sales-sub-cta:hover::after {
  transform: translateX(-4px);
}

body.single-course .td-buy-options .dl-sales-sub-cta:active,
body.single-course .dl-sales-sub-wrap .dl-sales-sub-cta:active {
  transform: translateY(0);
  background-image: linear-gradient(180deg, #ee7410 0%, #e06a0d 100%) !important;
  box-shadow:
    inset 0 2px 4px rgba(122, 52, 2, 0.26),
    0 1px 2px rgba(23, 22, 28, 0.12) !important;
}

body.single-course .td-buy-options .dl-sales-sub-cta:focus-visible,
body.single-course .dl-sales-sub-wrap .dl-sales-sub-cta:focus-visible {
  outline: 3px solid rgba(31, 95, 224, 0.55);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  body.single-course .td-buy-options .dl-sales-sub-cta,
  body.single-course .dl-sales-sub-wrap .dl-sales-sub-cta,
  body.single-course .td-buy-options .dl-sales-sub-cta::after,
  body.single-course .dl-sales-sub-wrap .dl-sales-sub-cta::after {
    transition: none;
  }
  body.single-course .td-buy-options .dl-sales-sub-cta:hover,
  body.single-course .dl-sales-sub-wrap .dl-sales-sub-cta:hover {
    transform: none;
  }
}

/* "با سیستم همکاری در فروش درآمد کسب کنید" — این باکس کلاس sticky-sidebar
   داشت ولی هیچ‌وقت استیکی نشده بود، پس در طول اسکرول سرفصل‌ها ثابت
   می‌ماند. حالا همراه اسکرول ستونش می‌آید. `top` نیاز به !important دارد:
   جایی در CSS قالب/المنتور روی این کانتینرها `top: auto` می‌گذارد و عنصر
   استیکی با top:auto هرگز نمی‌چسبد. باکس جایی می‌ایستد که ستونش تمام
   می‌شود (ردیف سرفصل‌ها)؛ بخش اشتراک زیر آن تمام‌عرض و بیرون این ستون
   است، پس بدون بازچینی ساختار المنتور نمی‌تواند از آن پایین‌تر بیاید. */
body.single-course .elementor-element.sticky-sidebar {
  position: sticky !important;
  top: 110px !important;
  align-self: flex-start;
}