@charset "UTF-8";
/* ===========================================================================
   سکانس برتر — لایهٔ شیشه‌ای (Liquid Glass)
   ---------------------------------------------------------------------------
   بعد از kft-custom.css بار می‌شود و متغیرهای همان فایل را استفاده می‌کند.

   هستهٔ افکت سه چیز است و هر سه لازم‌اند:
     ۱. backdrop-filter: blur + saturate  → پشت شیشه را محو و پررنگ می‌کند
     ۲. یک لایهٔ سفید کم‌شفاف            → خود جسم شیشه
     ۳. inset highlight بالای لبه         → بازتاب نور روی لبهٔ شیشه
   بدون مورد سوم، نتیجه فقط «مات» به نظر می‌رسد نه «شیشه‌ای».
   =========================================================================== */

html:root body {
  --kb-glass-bg: rgba(255, 255, 255, 0.1);
  --kb-glass-bg-strong: rgba(255, 255, 255, 0.17);
  --kb-glass-bg-accent: var(--kb-accent-dim);
  --kb-glass-border: rgba(255, 255, 255, 0.22);
  --kb-glass-border-accent: var(--kb-accent);
  --kb-glass-blur: blur(18px) saturate(170%);
  --kb-glass-blur-soft: blur(10px) saturate(150%);
  --kb-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.34);
  --kb-glass-shadow: 0 10px 28px -12px rgba(2, 0, 28, 0.7);
  --kb-glass-text: #ffffff;
}

/* پشتیبانی: اگر مرورگر backdrop-filter نداشت، لایه‌ها کدرتر می‌شوند تا متن
   همچنان خوانا بماند. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:root body {
    --kb-glass-bg: rgba(7, 4, 70, 0.82);
    --kb-glass-bg-strong: rgba(7, 4, 70, 0.9);
    --kb-glass-bg-accent: var(--primaryColor);
  }
}

/* کلاس کمکی — هر جای دیگری خواستی شیشه‌ای شود همین را اضافه کن */
.kb-glass {
  background: var(--kb-glass-bg);
  -webkit-backdrop-filter: var(--kb-glass-blur);
  backdrop-filter: var(--kb-glass-blur);
  border: 1px solid var(--kb-glass-border);
  box-shadow: var(--kb-glass-highlight), var(--kb-glass-shadow);
  color: var(--kb-glass-text);
}

/* ---------------------------------------------------------------------------
   ۱) کارت فیلم — نوار شیشه‌ای کف پوستر
   ساختار پوسته:  .film_cat > a > .position-relative > img + .overlay
   --------------------------------------------------------------------------- */
.film_cat,
.film_cat2,
.film_cat3,
.film_cat4 {
  border-radius: var(--kb-radius);
}

.film_cat > a > .position-relative,
.film_cat2 > a > .position-relative,
.film_cat3 > a > .position-relative,
.film_cat4 > a > .position-relative,
.serial_card__image {
  position: relative;
  overflow: hidden;
  border-radius: var(--kb-radius);
  isolation: isolate;
}

.film_cat img,
.film_cat3 img {
  display: block;
  width: 100%;
}

/* پوستر بدون هیچ پرده‌ای.
   پوستهٔ مادر روی کل تصویر یک `::before` با گرادیان مشکی می‌کشد
   (`.film_cat` تا ۵۶٪ و `.film_cat3` تا ۷۱٪ سیاه، از ۳۵٪ ارتفاع به پایین)،
   و همین باعث می‌شد کاورها تیره دیده شوند. کامل برداشته شد — خوانایی متن
   از نوار شیشه‌ای کف کارت می‌آید که گرادیان خودش را دارد. */
.film_cat .position-relative::before,
.film_cat2 .position-relative::before,
.film_cat3 .position-relative::before,
.film_cat4 .position-relative::before,
html.dark .film_cat .position-relative::before,
html.dark .film_cat3 .position-relative::before,
html:root.dark body .film_cat3 .position-relative::before {
  content: none !important;
  background: none !important;
}

/* نوار شیشه‌ای: عنوان، ژانر و امتیاز رویش می‌نشینند */
.film_cat .overlay,
.film_cat2 .overlay,
.film_cat3 .overlay,
.film_cat4 .overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 10px 11px;

  /* دو لایه: یک برق سفید (خودِ شیشه) روی یک پردهٔ سرمه‌ای (برای خوانایی متن).
     فقط با پردهٔ سرمه‌ای، نتیجه «مات» می‌شد نه «شیشه‌ای». */
  background: linear-gradient(to top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)),
    linear-gradient(
      to top,
      rgba(4, 0, 48, 0.74) 0%,
      rgba(4, 0, 48, 0.34) 68%,
      rgba(4, 0, 48, 0.04) 100%
    );
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 -6px 18px -10px rgba(2, 0, 28, 0.5);
  color: #fff;
  transition: background 0.35s var(--kb-ease);
}

.film_cat:hover .overlay,
.film_cat3:hover .overlay {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07)),
    linear-gradient(
      to top,
      rgba(4, 0, 48, 0.84) 0%,
      rgba(4, 0, 48, 0.46) 68%,
      rgba(4, 0, 48, 0.08) 100%
    );
}

.film_cat .badges,
.film_cat3 .badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}

.film_cat .film_cat_title,
.film_cat3 .film_cat_title {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(2, 0, 28, 0.7);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   ۲) چیپ‌های روی کارت
   ژانر قبلاً زرد پررنگ #FFBF01 با متن مشکی بود و با هیچ‌جای سایت هم‌خانواده نبود.
   امتیاز IMDb از قبل rgba(255,255,255,.22) داشت — یعنی نیمه‌شیشه‌ای بود و این دو
   کنار هم ناهماهنگ دیده می‌شدند. حالا هر دو شیشه‌ای‌اند، با یک تفاوت رنگی ظریف
   که نقششان را از هم جدا نگه می‌دارد.
   --------------------------------------------------------------------------- */
.film_cat .genres,
.film_cat3 .genres,
.genres.text-truncate {
  background: var(--kb-glass-bg) !important;
  border: 1px solid var(--kb-glass-border);
  box-shadow: var(--kb-glass-highlight);
  color: #fff !important;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--kb-radius-pill);
  min-width: 0;
}

/* امتیاز: ته‌رنگ کهربایی، بدون زردِ جیغ */
.film_cat .imdb_score,
.film_cat3 .imdb_score,
.imdb_score {
  background: rgba(245, 197, 24, 0.18) !important;
  border: 1px solid rgba(245, 197, 24, 0.4);
  box-shadow: var(--kb-glass-highlight);
  color: #ffe9a3 !important;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--kb-radius-pill);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* «زیرنویس فارسی» و نشان‌های نوع محتوا */
.film_cat .badge_type,
.film_cat3 .badge_type,
.badge_type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--kb-radius-pill);
  background: var(--kb-glass-bg);
  border: 1px solid var(--kb-glass-border);
  box-shadow: var(--kb-glass-highlight);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.film_cat .cta,
.film_cat3 .cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.film_cat .cta .icon,
.film_cat3 .cta .icon {
  color: var(--kb-accent);
  transition: transform 0.25s var(--kb-ease);
}

.film_cat:hover .cta .icon,
.film_cat3:hover .cta .icon {
  transform: translateX(-3px);
}

/* ---------------------------------------------------------------------------
   ۳) نشان «بروزرسانی» روی کارت سریال
   --------------------------------------------------------------------------- */
.serial_card__badge {
  background: var(--kb-glass-bg-accent) !important;
  -webkit-backdrop-filter: var(--kb-glass-blur);
  backdrop-filter: var(--kb-glass-blur);
  border: 1px solid var(--kb-glass-border-accent);
  box-shadow: var(--kb-glass-highlight), var(--kb-glass-shadow);
  color: #ffffff !important;
  font-weight: 700;
  border-radius: var(--kb-radius-sm);
  padding: 5px 11px;
}

.serial_card__overlay--icons i {
  color: #fff;
  text-shadow: 0 1px 6px rgba(2, 0, 28, 0.8);
}

/* ---------------------------------------------------------------------------
   ۴) دکمه‌های قسمت‌ها در باکس دانلود
   مشکل: پوسته روی دکمه‌های قفل، opacity: .6 می‌گذارد. آبی کم‌رنگِ نیمه‌شفاف
   روی سرمه‌ای تیره تقریباً ناخوانا می‌شد — و چون کاربر بدون اشتراک همهٔ
   قسمت‌ها را قفل می‌بیند، عملاً کل باکس دانلود کم‌رنگ بود.
   راه‌حل: خود دکمه شیشه‌ای و خوانا، و قفل بودن با آیکون نشان داده می‌شود
   نه با محو کردن.
   --------------------------------------------------------------------------- */
.btn-episode,
.btn-ep-dl,
.btn-copy-all {
  opacity: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: var(--kb-radius-sm);

  background: var(--kb-glass-bg) !important;
  border: 1px solid var(--kb-glass-border) !important;
  box-shadow: var(--kb-glass-highlight);

  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s var(--kb-ease), border-color 0.2s var(--kb-ease),
    transform 0.12s var(--kb-ease);
}

.btn-episode:hover,
.btn-ep-dl:hover,
.btn-copy-all:hover {
  background: var(--kb-glass-bg-accent) !important;
  border-color: var(--kb-glass-border-accent) !important;
  color: #ffffff !important;
}

.btn-episode:active,
.btn-copy-all:active {
  transform: scale(0.985);
}

.btn-episode svg,
.btn-copy-all svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--kb-accent);
}

/* قفل: آیکون به‌جای محو شدن */
.btn-locked {
  opacity: 1 !important;
}

.btn-locked::before {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  background: currentColor;
  /* قفل باید دیده شود ولی چون کاربر بدون اشتراک همهٔ قسمت‌ها را قفل می‌بیند،
     نباید بیست آیکون پررنگ کنار هم شلوغ‌کاری کند. */
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 9V7A5 5 0 0 0 7 7v2H5v12h14V9h-2zM9 7a3 3 0 0 1 6 0v2H9V7zm3 7a1.5 1.5 0 0 1 .9 2.7V18a.9.9 0 0 1-1.8 0v-1.3A1.5 1.5 0 0 1 12 14z'/></svg>")
    center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 9V7A5 5 0 0 0 7 7v2H5v12h14V9h-2zM9 7a3 3 0 0 1 6 0v2H9V7zm3 7a1.5 1.5 0 0 1 .9 2.7V18a.9.9 0 0 1-1.8 0v-1.3A1.5 1.5 0 0 1 12 14z'/></svg>")
    center / contain no-repeat;
}

/* دکمهٔ کپی همهٔ لینک‌ها — کار مفیدی می‌کند، پس کمی برجسته‌تر */
.btn-copy-all {
  width: 100%;
  background: var(--kb-glass-bg-strong) !important;
  border-color: var(--kb-glass-border-accent) !important;
  font-weight: 700;
}

/* گروه فصل و بدنهٔ کیفیت‌ها */
.dlbox_group,
.dlbox_group_body,
.quality-episodes-body {
  border-radius: var(--kb-radius);
}

.dlbox_group.season-item {
  background: var(--kb-glass-bg) !important;
  border: 1px solid var(--kb-glass-border);
  box-shadow: var(--kb-glass-highlight);
  color: #fff;
}

.episodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 9px;
}

/* ---------------------------------------------------------------------------
   ۵) جاهای دیگری که شیشه به کارشان می‌آید
   --------------------------------------------------------------------------- */

/* تب‌های صفحهٔ تک‌فیلم (دانلود باکس، اطلاعات بیشتر، نظرات…) */
.nav-tabs,
.single_tabs .nav {
  gap: 6px;
  border: 0;
}

.nav-tabs .nav-link,
.single_tabs .nav-link {
  border: 1px solid transparent !important;
  border-radius: var(--kb-radius-pill);
  color: var(--kb-text-muted) !important;
  font-weight: 600;
  transition: background 0.2s var(--kb-ease), color 0.2s var(--kb-ease),
    border-color 0.2s var(--kb-ease);
}

.nav-tabs .nav-link:hover,
.single_tabs .nav-link:hover {
  background: var(--kb-glass-bg) !important;
  color: #fff !important;
}

.nav-tabs .nav-link.active,
.single_tabs .nav-link.active {
  background: var(--kb-glass-bg-accent) !important;
  -webkit-backdrop-filter: var(--kb-glass-blur-soft);
  backdrop-filter: var(--kb-glass-blur-soft);
  border-color: var(--kb-glass-border-accent) !important;
  box-shadow: var(--kb-glass-highlight);
  color: #ffffff !important;
}

/* نشان‌های کیفیت و زیرنویس در فهرست‌ها */
.kb-badge,
.quality,
.dubbed,
.subtitle_badge {
  background: var(--kb-glass-bg);
  border: 1px solid var(--kb-glass-border);
  box-shadow: var(--kb-glass-highlight);
  color: #fff;
}

/* برچسب «پیشنهاد ما» و درصد تخفیف صفحهٔ پلن‌ها
   (اینجا عمداً توپر می‌مانند — کارشان جلب توجه است، نه هم‌رنگ شدن با پس‌زمینه) */

/* هدر چسبان: همان شیشه، با توکن‌های مشترک */
.header.sticky {
  -webkit-backdrop-filter: var(--kb-glass-blur);
  backdrop-filter: var(--kb-glass-blur);
  box-shadow: var(--kb-glass-highlight), 0 8px 30px -14px rgba(2, 0, 28, 0.8);
}

/* زیرمنوها */
.header .top_nav li ul {
  background: rgba(7, 4, 70, 0.72) !important;
  -webkit-backdrop-filter: var(--kb-glass-blur);
  backdrop-filter: var(--kb-glass-blur);
  border: 1px solid var(--kb-glass-border) !important;
  box-shadow: var(--kb-glass-highlight), var(--kb-glass-shadow) !important;
}

/* مودال‌ها */
.modal-content,
.search_modal .modal-content,
.vip_modal .modal-content {
  background: rgba(7, 4, 70, 0.78) !important;
  -webkit-backdrop-filter: var(--kb-glass-blur);
  backdrop-filter: var(--kb-glass-blur);
  border: 1px solid var(--kb-glass-border) !important;
  border-radius: var(--kb-radius) !important;
  box-shadow: var(--kb-glass-highlight), var(--kb-glass-shadow) !important;
}

/* جعبهٔ جستجوی پیشرفته */
.advanced_search,
.mobile_adv_trigger,
.new_searchform {
  background: var(--kb-glass-bg) !important;
  -webkit-backdrop-filter: var(--kb-glass-blur-soft);
  backdrop-filter: var(--kb-glass-blur-soft);
  border: 1px solid var(--kb-glass-border) !important;
  box-shadow: var(--kb-glass-highlight);
}

/* آیتم فعال منوی پنل کاربری */
.panel_layout .nav_panel ul li.active a {
  background: var(--kb-glass-bg-accent);
  -webkit-backdrop-filter: var(--kb-glass-blur-soft);
  backdrop-filter: var(--kb-glass-blur-soft);
  border: 1px solid var(--kb-glass-border-accent);
  box-shadow: var(--kb-glass-highlight);
}

/* ---------------------------------------------------------------------------
   ۶) حالت روشن
   روی پس‌زمینهٔ روشن، شیشهٔ سفید دیده نمی‌شود؛ ته‌رنگ باید تیره باشد.
   --------------------------------------------------------------------------- */
html:root.dark body {
  --kb-glass-bg: rgba(28, 42, 74, 0.08);
  --kb-glass-bg-strong: rgba(28, 42, 74, 0.14);
  --kb-glass-bg-accent: var(--kb-accent-dim);
  --kb-glass-border: rgba(28, 42, 74, 0.16);
  --kb-glass-border-accent: var(--kb-accent);
  --kb-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --kb-glass-shadow: 0 10px 26px -14px rgba(28, 42, 74, 0.45);
  --kb-glass-text: #1c2a4a;
}

/* نوار کف کارت روی تم روشن هم باید تیره بماند — پوستر زیرش تصویر است، نه
   پس‌زمینهٔ صفحه. */
html:root.dark body .film_cat .overlay,
html:root.dark body .film_cat3 .overlay {
  background: linear-gradient(
    to top,
    rgba(10, 14, 32, 0.86) 0%,
    rgba(10, 14, 32, 0.55) 62%,
    rgba(10, 14, 32, 0.1) 100%
  );
  color: #fff;
}

html:root.dark body .film_cat .genres,
html:root.dark body .film_cat3 .genres,
html:root.dark body .film_cat .badge_type,
html:root.dark body .film_cat3 .badge_type {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff !important;
}

html:root.dark body .btn-episode,
html:root.dark body .btn-ep-dl,
html:root.dark body .btn-copy-all {
  color: #1c2a4a !important;
}

html:root.dark body .btn-episode:hover,
html:root.dark body .btn-copy-all:hover {
  color: #ffffff !important;
}

html:root.dark body .header .top_nav li ul,
html:root.dark body .modal-content {
  background: rgba(255, 255, 255, 0.82) !important;
}

html:root.dark body .serial_card__badge {
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
   ۷) موبایل و حرکت کمتر
   --------------------------------------------------------------------------- */
@media (max-width: 576px) {
  .film_cat .overlay,
  .film_cat3 .overlay {
    padding: 8px 8px 9px;
    gap: 5px;
  }

  .film_cat .genres,
  .film_cat3 .genres,
  .film_cat .imdb_score,
  .film_cat3 .imdb_score {
    font-size: 11px;
    padding: 2px 8px;
  }

  .episodes-grid {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }
}

/* blur روی دستگاه‌های ضعیف گران است؛ وقتی کاربر حرکت کمتر خواسته، ساده‌اش کن */
@media (prefers-reduced-motion: reduce) {
  .kb-card__hover {
    transition: none;
  }
}

/* ===========================================================================
   نسخهٔ ۳.۰ — بازبینی کارت‌ها و خوانایی
   =========================================================================== */

/* ---------------------------------------------------------------------------
   الف) امتیاز و ژانر در دو خط جدا، و حذف تگ «زیرنویس فارسی»
   چون همهٔ فیلم‌های سایت زیرنویس فارسی دارند، این تگ روی کارت چیزی به کاربر
   نمی‌گوید و فقط جا می‌گیرد.
   --------------------------------------------------------------------------- */
.film_cat .badges,
.film_cat3 .badges {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

/* امتیاز بالاتر از ژانر می‌نشیند — عددی که چشم اول دنبالش می‌گردد */
.film_cat .imdb_score,
.film_cat3 .imdb_score {
  order: -1;
}

.film_cat .cta .badge_type,
.film_cat3 .cta .badge_type {
  display: none !important;
}

/* با حذف آن تگ، در ردیف پایین فقط یک فلش تنها می‌ماند که حدود ۳۰ پیکسل ارتفاع
   می‌گیرد و چیزی اضافه نمی‌کند — کل کارت خودش لینک است. */
.film_cat .cta,
.film_cat3 .cta {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   ب) بزرگ‌تر و خواناتر
   --------------------------------------------------------------------------- */
.film_cat .genres,
.film_cat3 .genres,
.genres.text-truncate {
  font-size: 13px;
  padding: 4px 11px;
}

.film_cat .imdb_score,
.film_cat3 .imdb_score,
.imdb_score {
  font-size: 13px;
  padding: 4px 11px;
  color: #ffefbe !important;
  background: rgba(245, 197, 24, 0.22) !important;
}

.film_cat .film_cat_title,
.film_cat3 .film_cat_title {
  font-size: 16px;
  font-weight: 800;
}

/* ---------------------------------------------------------------------------
   ج) کارت «سریال های بروز شده»
   دو ایراد داشت:
     ۱. نشان بروزرسانی در top:146px با ارتفاع 54px شروع می‌شد، ولی قاب تصویر
        فقط 180px ارتفاع دارد و overflow:hidden است — یعنی ۲۰ پیکسل پایینش
        بریده می‌شد. حالا از پایین لنگر می‌اندازد و کامل داخل قاب می‌ماند.
     ۲. نام سریال ۱۵px و وزن ۴۰۰ بود، روی پس‌زمینه‌ای هم‌رنگ بقیهٔ صفحه.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   د) دکمه‌های قسمت‌ها — دور دوم خوانایی
   هنوز کوچک بودند (13px) و پرکنندهٔ شیشه خیلی کم‌رنگ بود.
   --------------------------------------------------------------------------- */
.btn-episode,
.btn-ep-dl,
.btn-copy-all {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  padding: 11px 15px;
  line-height: 1.9;
}

.btn-episode:hover,
.btn-ep-dl:hover,
.btn-copy-all:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: var(--kb-accent) !important;
  color: #ffffff !important;
}

/* «کپی تمامی لینک ها» و دکمهٔ VLC داخل همان گریدِ قسمت‌ها می‌نشینند. ستون‌های
   گرید حداقل ۱۵۰px‌اند، ولی متن این دو دکمه بلندتر از یک ستون است و در بعضی
   عرض‌ها از کادر بیرون می‌زد. با grid-column تمام عرض ردیف را می‌گیرند و متن
   هم اجازهٔ شکستن دارد. */
.btn-copy-all,
.btn-vlc-grid {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

.btn-copy-all {
  background: var(--kb-accent-dim) !important;
  border-color: var(--kb-accent) !important;
  font-size: 15px !important;
}

/* دکمهٔ VLC فیلم‌ها بیرون از گرید است */
.btn-vlc-block {
  display: flex !important;
  width: 100%;
  margin-top: 10px;
  white-space: normal;
  text-align: center;
}

.dlbox_group.season-item,
.dlbox_group_body {
  font-size: 15px;
}

/* دکمهٔ VLC که با kft/vlc-button.php ساخته می‌شود */
.btn-vlc {
  background: var(--kb-accent-dim) !important;
  border-color: var(--kb-accent) !important;
}

/* ---------------------------------------------------------------------------
   هـ) در حالت روشن، نوار عنوان و دکمه‌ها متن تیره می‌گیرند
   --------------------------------------------------------------------------- */
/* عنوان روی پوستر است، پس در تم روشن هم پردهٔ تیره می‌ماند */
html:root.dark body .serial_card .film_cat_title {
  background: linear-gradient(
    to top,
    rgba(10, 14, 32, 0.92) 0%,
    rgba(10, 14, 32, 0.5) 55%,
    rgba(10, 14, 32, 0) 100%
  );
  color: #ffffff;
}

html:root.dark body .btn-episode,
html:root.dark body .btn-ep-dl,
html:root.dark body .btn-copy-all {
  background: rgba(28, 42, 74, 0.08) !important;
  border-color: rgba(28, 42, 74, 0.2) !important;
  color: #1c2a4a !important;
}

@media (max-width: 576px) {
  .serial_card .film_cat_title {
    font-size: 15.5px;
    padding: 22px 12px 11px;
  }

  .serial_card__badge {
    font-size: 12.5px;
  }

  .btn-episode,
  .btn-ep-dl,
  .btn-copy-all {
    font-size: 13.5px !important;
  }
}

/* ===========================================================================
   نسخهٔ ۳.۲
   =========================================================================== */

/* ---------------------------------------------------------------------------
   الف) جعبهٔ دانلود فیلم — هم‌خانواده با جعبهٔ سریال
   نسخهٔ قبل فقط .btn-episode (شاخهٔ سریال) را شیشه‌ای کرده بود. شاخهٔ فیلم
   کلاس‌های کاملاً دیگری دارد (.dlbox_btn و …) و با رنگ آبی روشن پوسته
   (#29B6F6) مانده بود — برای همین دکمهٔ VLC که کنارش می‌نشست وصله به نظر
   می‌رسید. حالا هر دو خانواده از یک قاعده تغذیه می‌شوند تا دیگر از هم فاصله
   نگیرند.
   --------------------------------------------------------------------------- */
.btn-episode,
.btn-ep-dl,
.btn-copy-all,
.dlbox_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 15px;
  border-radius: var(--kb-radius-sm);
  opacity: 1 !important;

  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: var(--kb-glass-highlight);

  color: #ffffff !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.9;
  text-decoration: none;
  transition: background 0.2s var(--kb-ease), border-color 0.2s var(--kb-ease),
    transform 0.12s var(--kb-ease);
}

.btn-episode:hover,
.btn-ep-dl:hover,
.btn-copy-all:hover,
.dlbox_btn:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: var(--kb-accent) !important;
  color: #ffffff !important;
}

.btn-episode:active,
.btn-copy-all:active,
.dlbox_btn:active {
  transform: scale(0.985);
}

.dlbox_btn .dlbox_btn_icon,
.btn-episode svg,
.btn-copy-all svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--kb-accent);
}

/* سطوح جعبهٔ دانلود فیلم */
.dlbox_group_header {
  background: var(--kb-glass-bg) !important;
  -webkit-backdrop-filter: var(--kb-glass-blur-soft);
  backdrop-filter: var(--kb-glass-blur-soft);
  border: 1px solid var(--kb-glass-border) !important;
  box-shadow: var(--kb-glass-highlight);
  border-radius: var(--kb-radius) !important;
  color: #fff;
}

.dlbox_row {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: var(--kb-radius-sm) !important;
}

.dlbox_quality {
  color: var(--kb-accent) !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
}

.dlbox_meta_compact,
.dlbox_size_value,
.dlbox_size_label,
.dlbox_encoder {
  color: var(--kb-text-muted) !important;
}

.dlbox_badge,
.dlbox_badge_sub,
.dlbox_badge_dub,
.dlbox_free_badge {
  background: var(--kb-glass-bg) !important;
  border: 1px solid var(--kb-glass-border) !important;
  box-shadow: var(--kb-glass-highlight);
  color: #ffffff !important;
  border-radius: var(--kb-radius-pill) !important;
  font-weight: 700;
}

.dlbox_group_title {
  color: #ffffff !important;
  font-weight: 800;
}

.dlbox_toggle_btn {
  color: var(--kb-accent) !important;
}

/* دکمهٔ VLC فیلم دقیقاً مثل بقیهٔ دکمه‌های همان جعبه دیده می‌شود */
.btn-vlc-block {
  background: var(--kb-accent-dim) !important;
  border-color: var(--kb-accent) !important;
}

/* ---------------------------------------------------------------------------
   ب) کارت فیلم — آیکون‌ها، خلاصهٔ داستان و دکمه‌ها
   ساختار از inc/template_parts/cards/film_card3.php می‌آید.
   --------------------------------------------------------------------------- */
.kb-card .kb-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ستون عمودی آیکون‌ها، بالا سمت شروع (در RTL یعنی راست) */
.kb-card__flags {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.kb-card__flag {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;

  background: var(--kb-glass-bg-strong);
  -webkit-backdrop-filter: var(--kb-glass-blur-soft);
  backdrop-filter: var(--kb-glass-blur-soft);
  border: 1px solid var(--kb-glass-border);
  box-shadow: var(--kb-glass-highlight);
  color: #ffffff;
}

.kb-card__flag svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* پنل خلاصهٔ داستان */
.kb-card__hover {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 12px 12px;

  /* پردهٔ پایین پررنگ‌تر است (متن آنجاست) و بالا بازتر، تا پوستر زیرش کاملاً
     محو نشود و کاربر بفهمد روی کدام فیلم است. */
  background: linear-gradient(to top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
    linear-gradient(to top, rgba(2, 0, 28, 0.94) 35%, rgba(2, 0, 28, 0.72) 100%);
  -webkit-backdrop-filter: var(--kb-glass-blur);
  backdrop-filter: var(--kb-glass-blur);
  border-radius: var(--kb-radius);

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.28s var(--kb-ease), transform 0.28s var(--kb-ease),
    visibility 0.28s;
}

.kb-card__hover-title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.7;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.kb-card__story {
  margin: 0;
  color: var(--kb-text);
  font-size: 12.5px;
  line-height: 1.95;
  text-align: start;

  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* فقط روی دستگاه‌هایی که واقعاً hover دارند — در موبایل کارت مثل قبل می‌ماند */
@media (hover: hover) and (pointer: fine) {
  .kb-card:hover .kb-card__hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .kb-card:hover .kb-card__flags {
    opacity: 0;
    transition: opacity 0.2s var(--kb-ease);
  }
}

/* لمسی: hover وجود ندارد، پس با تپ باز می‌شود. kft-custom.js کلاس is-open را
   می‌گذارد و تپ اول را نگه می‌دارد؛ تپ دوم وارد صفحهٔ فیلم می‌شود. */
.kb-card.is-open .kb-card__hover {
  opacity: 1;
  visibility: visible;
}

.kb-card.is-open .kb-card__flags {
  opacity: 0;
}

/* ===========================================================================
   نسخهٔ ۳.۳ — کارت‌ها، کارت سریال‌های بروز، و اسلایدر دسکتاپ
   =========================================================================== */

/* ---------------------------------------------------------------------------
   الف) کارت فیلم — بدون زوم، پنل یکدست، یک برچسب بدون کادر
   پنل hover دقیقاً همان گردی قاب را می‌گیرد (border-radius: inherit) و قاب هم
   overflow: hidden دارد، پس دیگر مثل یک جعبهٔ جدا روی کارت دیده نمی‌شود.
   --------------------------------------------------------------------------- */
.kb-card {
  position: relative;
  border-radius: var(--kb-radius);
}

.kb-card .kb-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}

.kb-card .position-relative,
.kb-card .serial_card__image {
  border-radius: var(--kb-radius);
  overflow: hidden;
  isolation: isolate;
}

.kb-card__hover {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;

  /* نام بالا، خلاصهٔ داستان زیرش، برچسب پایین — همه وسط‌چین، افقی و عمودی */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 9px;
  padding: 16px 14px;

  background: linear-gradient(to top, rgba(2, 0, 28, 0.94) 35%, rgba(2, 0, 28, 0.74) 100%);
  -webkit-backdrop-filter: var(--kb-glass-blur);
  backdrop-filter: var(--kb-glass-blur);

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.26s var(--kb-ease), visibility 0.26s;
}

.kb-card__hover-title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.7;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.kb-card__story {
  margin: 0;
  color: var(--kb-text);
  font-size: 12.5px;
  line-height: 1.95;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 0 1 auto;
}

/* برچسب، نه دکمه: بدون کادر و بدون پس‌زمینه */
.kb-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: center;
  margin-top: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--kb-accent);
  font-size: 13px;
  font-weight: 800;
}

.kb-card__cta svg {
  width: 15px;
  height: 15px;
  transition: transform 0.22s var(--kb-ease);
}

.kb-card:hover .kb-card__cta svg {
  transform: translateX(-3px);
}

/* آیکون‌های بالا سمت راست */
.kb-card__flags {
  position: absolute;
  top: 9px;
  inset-inline-start: 9px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
  transition: opacity 0.2s var(--kb-ease);
}

.kb-card__flag {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(10, 12, 30, 0.55);
  -webkit-backdrop-filter: var(--kb-glass-blur-soft);
  backdrop-filter: var(--kb-glass-blur-soft);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.kb-card__flag svg {
  width: 15px;
  height: 15px;
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .kb-card:hover .kb-card__hover {
    opacity: 1;
    visibility: visible;
  }

  .kb-card:hover .kb-card__flags {
    opacity: 0;
  }
}

/* لمسی: hover وجود ندارد، پس با تپ باز می‌شود. kft-custom.js کلاس is-open را
   می‌گذارد و تپ اول را نگه می‌دارد؛ تپ دوم وارد صفحهٔ فیلم می‌شود. */
.kb-card.is-open .kb-card__hover {
  opacity: 1;
  visibility: visible;
}

.kb-card.is-open .kb-card__flags {
  opacity: 0;
}

/* ---------------------------------------------------------------------------
   ب) کارت سریال‌های بروز شده
   --------------------------------------------------------------------------- */
.kb-serial {
  overflow: hidden;
  background: var(--kb-navy-850);
  transition: transform 0.3s var(--kb-ease), box-shadow 0.3s var(--kb-ease);
}

.kb-serial:hover {
  transform: translateY(-4px);
  box-shadow: var(--kb-shadow);
}

.kb-serial .serial_card__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.kb-serial__info {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  padding: 30px 13px 12px;
  background: linear-gradient(
    to top,
    rgba(4, 0, 48, 0.94) 0%,
    rgba(4, 0, 48, 0.6) 55%,
    rgba(4, 0, 48, 0) 100%
  );
}

.kb-serial__title {
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.7;
  text-align: start;
  text-shadow: 0 1px 8px rgba(2, 0, 28, 0.85);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kb-serial__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
  font-size: 12.5px;
}

.kb-serial__left {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

.kb-serial__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ffffff;
  font-weight: 800;
}

.kb-serial__rating svg {
  width: 14px;
  height: 14px;
  color: var(--kb-imdb);
}

.kb-serial__of,
.kb-serial__year {
  color: var(--kb-text-muted);
  font-weight: 600;
}

.kb-serial__right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--kb-text-muted);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-serial__sep {
  opacity: 0.45;
}

/* نشان قدیمی «بروزرسانی» دیگر رندر نمی‌شود، ولی اگر جایی از کش مانده بود */
.serial_card__badge,
.serial_card__epSeason {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   د) دکمهٔ VLC کنار «تماشای آنلاین» بالای صفحه
   --------------------------------------------------------------------------- */
.post_actions .btn-vlc {
  display: none;
  align-items: center;
  gap: 7px;
}

.post_actions .btn-vlc.vlc-iphone-only {
  background: var(--kb-accent-dim) !important;
  border: 1px solid var(--kb-accent) !important;
  color: #ffffff !important;
}

@media (max-width: 576px) {
  .kb-serial__title {
    font-size: 15.5px;
  }

  .kb-serial__meta {
    font-size: 11.5px;
  }
}

/* ===========================================================================
   نسخهٔ ۳.۶ — جعبهٔ دانلود سریال
   =========================================================================== */

/* ---------------------------------------------------------------------------
   فاصله‌ها: در تصویری که فرستادی ردیف اول قسمت‌ها به کادر بالایی چسبیده بود.
   گرید قسمت‌ها هیچ padding نداشت و درست زیر هدر کیفیت شروع می‌شد.
   --------------------------------------------------------------------------- */
.quality-item {
  margin-bottom: 12px;
}

.quality-item:last-child {
  margin-bottom: 0;
}

.quality-episodes-body {
  padding: 12px 10px 10px;
}

.quality-episodes-body .episodes-grid {
  gap: 10px;
}

/* گوشهٔ دکمه‌ها کمی کوچک‌تر تا کنار کادر بیرونی تو ذوق نزند */
.btn-episode,
.btn-ep-dl,
.btn-copy-all {
  border-radius: 9px;
}

/* ---------------------------------------------------------------------------
   خوانایی هدر کیفیت: «تعداد قسمت» و «میانگین حجم» سفید می‌شوند
   --------------------------------------------------------------------------- */
/* در عرض‌های کم، پوسته به‌جای .qh-metas نسخهٔ فشرده را نشان می‌دهد، پس هر دو
   باید سفید شوند وگرنه روی موبایل همان خاکستریِ کم‌خوان می‌ماند. */
.qh-meta,
.qh-metas .qh-meta,
.qh-meta-compact,
.qh-meta-compact-item,
.dlbox_meta_compact,
.dlbox_meta_compact_item {
  color: #ffffff !important;
  font-weight: 600;
}

.qh-meta svg {
  color: var(--kb-accent);
}

.qh-quality-label {
  color: var(--kb-text-muted);
}

.qh-quality strong {
  color: var(--kb-accent);
  font-weight: 800;
}

/* ---------------------------------------------------------------------------
   انتخاب کیفیت در پاپ‌آپ پخش VLC
   --------------------------------------------------------------------------- */
.kb-vlc-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.kb-vlc-step__title {
  margin: 0 0 2px;
  color: var(--kb-text);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.kb-vlc-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--kb-accent);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}