/* Vazirmatn base */
.ys-slider-wrap, .ys-slider-wrap * {
  font-family: 'Vazirmatn', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.ys-swiper {
  position: relative;
  width: 100%;
  height: var(--ys-height, 520px);
  overflow: hidden;
  border-radius: 0;
}

.ys-swiper .swiper-slide.ys-slide {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: var(--ys-bg);
  background-size: cover;
  background-position: center center;
}

.ys-swiper .ys-overlay {
  position: absolute;
  inset: 0;
  background: var(--ys-overlay, rgba(0,0,0,.35));
}

.ys-swiper .ys-content {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  padding: clamp(16px, 4vw, 48px);
}

.ys-swiper .ys-content-inner {
  max-width: min(780px, 90%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ys-slide-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.2;
  color: #fff;
}

.ys-slide-desc {
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.8;
  color: #f6f6f6;
}

.ys-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  background: #003459;
  color: #fff;
  text-decoration: none !important;
  font-weight: 700;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.ys-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ys-btn:active { transform: translateY(0); }

/* Swiper nav */
.ys-swiper .swiper-button-prev,
.ys-swiper .swiper-button-next {
  color: #fff;
  width: 44px; height: 44px;
  background: rgba(0,0,0,.25);
  border-radius: 50%;
  backdrop-filter: blur(4px);
}
.ys-swiper .swiper-button-prev:hover,
.ys-swiper .swiper-button-next:hover {
  background: rgba(0,0,0,.38);
}
.ys-swiper .swiper-pagination-bullet {
  background: rgba(255,255,255,.7);
  opacity: 1;
}
.ys-swiper .swiper-pagination-bullet-active {
  background: #fff;
}

/* RTL fine-tune */
[dir="rtl"] .ys-swiper .swiper-button-prev { right: 16px; left: auto; }
[dir="rtl"] .ys-swiper .swiper-button-next { left: 16px; right: auto; }


/* overlay اصلاً کلیک نگیرد و چیزی را نپوشاند */
.ys-swiper .ys-overlay {
  pointer-events: none;
}

/* اگر قالب شما روی <a> استایل خنثی‌ساز دارد، این خط تضمین می‌کند دکمه دیده شود */
.ys-btn,
.ys-swiper a.ys-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 12px;
  background: #003459;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
}




/* ====== Hard reset برای محتوای اسلاید ====== */

/* مطمئن شو خود اسلاید پس‌زمینه می‌گیرد و خالی نمی‌ماند */
.ys-swiper .swiper-slide.ys-slide{
  background-image: var(--ys-bg, none);
  background-color: #0b1220; /* fallback در صورت نبود تصویر */
}

/* اورلی کلیک نگیرد و روی محتوا ننشیند */
.ys-swiper .ys-overlay{ pointer-events: none; }

/* متن/دکمه داخل اسلاید همیشه روی همه چیز دیده شود */
.ys-swiper .ys-content{ position: relative; z-index: 3; }
.ys-swiper .ys-content-inner{ position: relative; z-index: 4; }

/* ====== ریست تهاجمی برای لینک‌ها داخل اسلایدر ====== */
.ys-swiper a, 
.ys-swiper a:link,
.ys-swiper a:visited{
  writing-mode: horizontal-tb !important;
  transform: none !important;
  position: static !important;
  height: auto !important;
  max-height: none !important;
  float: none !important;
  display: inline !important;
}

/* ====== دکمه CTA: بازسازی کامل بعد از ریست ====== */
.ys-btn,
.ys-swiper a.ys-btn{
  all: unset;                  /* تمام وراثت‌های مزاحم را حذف کن */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  min-height: 44px;
  border-radius: 12px;
  background: #003459;
  color: #fff !important;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  white-space: nowrap;         /* یک خطی بماند */
}
.ys-btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.ys-btn:active{ transform: translateY(0); }



/* =========================
   NAV (Arrows) – no background
   ========================= */

/* پیش‌فرض متغیرها (قابل کنترل از ویجت) */
.ys-swiper{
  --ys-arrow-size: 24px;  /* اندازه آیکون سفارشی */
  --ys-prev-off: 16px;    /* فاصله افقی فلش قبلی از لبه */
  --ys-next-off: 16px;    /* فاصله افقی فلش بعدی از لبه */
  --ys-v-off: 0px;        /* آفست عمودی نسبت به جایگاه پایه */
}

/* جایگاه پایه: وسط عمودی (قابل تغییر با کلاس‌های ys-arrows-*) */
.ys-swiper .swiper-button-prev,
.ys-swiper .swiper-button-next{
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% + var(--ys-v-off)));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent !important; /* حذف بک‌گراند گرد */
  width: auto; height: auto;
  box-shadow: none;
  z-index: 999!important; /* بالاتر از overlay */
}
.swiper-button-prev, .swiper-button-next {
    z-index: 999 !important;
}

/* چینش عمودی سفارشی */
.ys-swiper.ys-arrows-top .swiper-button-prev,
.ys-swiper.ys-arrows-top .swiper-button-next{
  top: 16px; bottom: auto;
  transform: translateY(0) translateY(var(--ys-v-off));
}
.ys-swiper.ys-arrows-bottom .swiper-button-prev,
.ys-swiper.ys-arrows-bottom .swiper-button-next{
  top: auto; bottom: 16px;
  transform: translateY(0) translateY(calc(-1 * var(--ys-v-off)));
}

/* آفست افقی هر کدام */
.ys-swiper .swiper-button-prev{ left: var(--ys-prev-off); right: auto; }
.ys-swiper .swiper-button-next{ right: var(--ys-next-off); left: auto; }

/* RTL جابجایی طرفین */
[dir="rtl"] .ys-swiper .swiper-button-prev{ right: var(--ys-prev-off); left: auto; }
[dir="rtl"] .ys-swiper .swiper-button-next{ left: var(--ys-next-off); right: auto; }

/* اگر آیکون سفارشی داریم، آیکون پیش‌فرض Swiper را پنهان کن */
.ys-swiper.has-custom-arrows .swiper-button-prev::after,
.ys-swiper.has-custom-arrows .swiper-button-next::after{
  display: none !important;
}

/* خودِ آیکون سفارشی که در HTML با <span class="ys-arrow-icon"> چاپ می‌شود */
.ys-arrow-icon{
  display: inline-block;
  width: var(--ys-arrow-size);
  height: var(--ys-arrow-size);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none; /* کلیک روی دکمه والد بماند */
}

/* حالت‌ها */
.ys-swiper .swiper-button-prev:hover,
.ys-swiper .swiper-button-next:hover{
  filter: brightness(1.05);
}
.ys-swiper .swiper-button-prev:focus,
.ys-swiper .swiper-button-next:focus{
  outline: none;
}

/* اگر آیکون سفارشی آپلود نشده بود هم بک‌گراند نخواهیم */
.ys-swiper .swiper-button-prev::after,
.ys-swiper .swiper-button-next::after{
  background: none !important; /* بعضی تم‌ها روی ::after بک‌گراند می‌گذارند */
  box-shadow: none !important;
}



/* ========== Slide List Overlay ========== */
.ys-swiper{
  --ys-list-x: 24px;
  --ys-list-y: 24px;
}
.ys-episodes{
  position: absolute;
  z-index: 6;
  inset: auto auto auto auto; /* reset */
  width: 360px;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}

/* corners / offsets */
.ys-list-tr{ top: var(--ys-list-y); right: var(--ys-list-x); }
.ys-list-tl{ top: var(--ys-list-y); left:  var(--ys-list-x); }
.ys-list-br{ bottom: var(--ys-list-y); right: var(--ys-list-x); }
.ys-list-bl{ bottom: var(--ys-list-y); left:  var(--ys-list-x); }

.ys-episodes-hd{
  font-weight: 800;
  font-size: 14px;
  margin: 2px 2px 10px;
  opacity: .95;
}

.ys-episodes-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;        /* overridable via control */
  overflow: auto;
  padding-right: 4px;       /* space for scrollbar */
}

.ys-ep{
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
}
.ys-ep:hover{ background: rgba(255,255,255,.06); }
.ys-ep.is-active{ background: rgba(255,255,255,.12); }

.ys-ep-thumb{
  width: 96px;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  flex-shrink: 0;
}
.ys-ep-meta{ display: grid; line-height: 1.25; }
.ys-ep-title{ font-weight: 700; font-size: 13px; }

/* RTL متن داخل لیست (جای لی‌آوت تغییری نمی‌کند) */
[dir="rtl"] .ys-ep{ text-align: right; }


/* ===== Slide List – extended style control ===== */
.ys-swiper{
  --ys-list-x: 24px;
  --ys-list-y: 24px;

  --ys-ep-gap: 10px;
  --ys-ep-hover-bg: rgba(255,255,255,.06);
  --ys-ep-active-bg: rgba(255,255,255,.12);

  --ys-thumb-w: 96px;            /* for row layouts */
  --ys-thumb-radius: 8px;
}

.ys-episodes{
  position: absolute;
  z-index: 6;
  width: 360px;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  /* placement now driven by responsive control via inline rules */
}

.ys-episodes-hd{
  font-weight: 800;
  font-size: 14px;
  margin: 2px 2px 10px;
  opacity: .95;
}

.ys-episodes-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;            /* overridable by control you already have */
  overflow: auto;
  padding-right: 4px;
}

/* Item */
.ys-ep{
  display: flex;
  align-items: center;
  gap: var(--ys-ep-gap);
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
}
.ys-ep:hover{ background: var(--ys-ep-hover-bg); }
.ys-ep.is-active{ background: var(--ys-ep-active-bg); }

/* Thumb */
.ys-ep-thumb{
  width: var(--ys-thumb-w);
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: var(--ys-thumb-radius);
  flex-shrink: 0;
}

/* Vertical layouts (col-t / col-b) make thumb full width */
.ys-episodes .ys-ep[style*="flex-direction: column"] .ys-ep-thumb,
.ys-episodes .ys-ep[style*="flex-direction: column-reverse"] .ys-ep-thumb{
  width: 100%;
}

.ys-ep-meta{ display: grid; line-height: 1.25; }
.ys-ep-title{ font-weight: 700; font-size: 13px; }

/* RTL text direction inside list */
[dir="rtl"] .ys-ep{ text-align: right; }
/* ===== Slide List — horizontal support + reset button pink ===== */
.ys-swiper{
  --ys-list-x: 24px;
  --ys-list-y: 24px;

  --ys-ep-gap: 10px;
  --ys-ep-hover-bg: rgba(255,255,255,.06);
  --ys-ep-active-bg: rgba(255,255,255,.12);

  --ys-thumb-w: 96px;          /* used for row-l/row-r */
  --ys-thumb-radius: 8px;
  --ys-ep-card-w: 200px;       /* width of item when list is horizontal */
}

.ys-episodes{ position:absolute; z-index:6; width:360px; background:rgba(0,0,0,.55); color:#fff;
  padding:12px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); backdrop-filter:blur(6px); }

.ys-episodes-hd{ font-weight:800; font-size:14px; margin:2px 2px 10px; opacity:.95; }

/* The list itself: now configurable (row/column) via control; defaults to horizontal */
.ys-episodes-list{
  display:flex;
  flex-direction: row;
  gap: 8px;
  overflow-x:auto;
  overflow-y:hidden;
  padding: 2px;
  scroll-behavior: smooth;
}

/* Item reset to avoid theme buttons turning pink on :active */
.ys-ep{
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit;
  cursor: pointer;
  text-align: start;
  display: flex;
  align-items: center;
  gap: var(--ys-ep-gap);
  padding: 8px;
  border-radius: 10px;
  flex: 0 0 var(--ys-ep-card-w);   /* width in horizontal mode */
}
.ys-ep:hover{ background: var(--ys-ep-hover-bg) !important; }
.ys-ep.is-active{ background: var(--ys-ep-active-bg) !important; }
.ys-ep:focus{ outline: none; }
.ys-ep:active{ background: var(--ys-ep-active-bg) !important; }

/* Per-item layout (controlled by your list_layout control via inline style) */
.ys-ep-thumb{
  width: var(--ys-thumb-w);
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: var(--ys-thumb-radius);
  flex-shrink: 0;
}

/* For column layouts (image up/down): thumbnail should span full card width */
.ys-episodes .ys-ep[style*="flex-direction: column"] .ys-ep-thumb,
.ys-episodes .ys-ep[style*="flex-direction: column-reverse"] .ys-ep-thumb{
  width: 100%;
}

.ys-ep-meta{ display:grid; line-height:1.25; }
.ys-ep-title{ font-weight:700; font-size:13px; }

/* RTL text direction only */
[dir="rtl"] .ys-ep{ text-align: right; }

/* ===== Slide List — layout-driven direction (no separate direction control) ===== */
.ys-swiper{
  --ys-list-x: 24px;
  --ys-list-y: 24px;

  --ys-ep-gap: 10px;
  --ys-ep-hover-bg: rgba(255,255,255,.06);
  --ys-ep-active-bg: rgba(255,255,255,.12);

  --ys-list-dir: row;    /* default (overridden by control) */
  --ys-ep-dir: row;      /* default (overridden by control) */
  --ys-thumb-w: 96px;    /* row*: width; col*: 100% */
  --ys-thumb-radius: 8px;
  --ys-ep-card-w: 200px; /* width per card in horizontal */
}

.ys-episodes{
  position: absolute;
  z-index: 6;
  width: 360px;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}

.ys-episodes-hd{
  font-weight: 800;
  font-size: 14px;
  margin: 2px 2px 10px;
  opacity: .95;
}

/* Container flex-direction follows --ys-list-dir (row for L/R, column for T/B) */
.ys-episodes-list{
  display: flex;
  flex-direction: var(--ys-list-dir);
  gap: 8px;
  overflow: auto;       /* lets the needed axis scroll */
  padding: 2px;
  scroll-behavior: smooth;
}

/* Button reset to kill theme :active pink */
.ys-ep{
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit;
  cursor: pointer;
  text-align: start;
  display: flex;
  flex-direction: var(--ys-ep-dir); /* row/row-reverse/column/column-reverse */
  align-items: center;
  gap: var(--ys-ep-gap);
  padding: 8px;
  border-radius: 10px;
  flex: 0 0 var(--ys-ep-card-w);    /* width in horizontal mode; ignored in column */
}
.ys-ep:hover{ background: var(--ys-ep-hover-bg) !important; }
.ys-ep.is-active,
.ys-ep:active{ background: var(--ys-ep-active-bg) !important; }
.ys-ep:focus{ outline: none; }

/* Thumb respects row/col via variable width */
.ys-ep-thumb{
  width: var(--ys-thumb-w);
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: var(--ys-thumb-radius);
  flex-shrink: 0;
}

.ys-ep-meta{ display: grid; line-height: 1.25; }
.ys-ep-title{ font-weight: 700; font-size: 13px; }

/* RTL text direction only */
[dir="rtl"] .ys-ep{ text-align: right; }





/* ===== Content offsets (shared for title/desc/button) ===== */
.ys-swiper{
  --ys-cx: 0px;   /* افست افقی انتخاب‌شده در کنترل */
  --ys-cy: 0px;   /* افست عمودی انتخاب‌شده در کنترل */
  --ys-tx: 0px;   /* ترجمه‌ی افقی وقتی تراز افقی = center */
  --ys-ty: 0px;   /* ترجمه‌ی عمودی وقتی تراز عمودی = center */
}

/* همیشه یک transform واحد تا در صورت نیاز همزمان X/Y اعمال شود */
.ys-swiper .ys-content-inner{
  transform: translate(var(--ys-tx), var(--ys-ty));
}

/* --- افقی --- */
/* اگر تراز افقی چپ باشد: از کناره‌ی چپ به داخل آفست بده */
.ys-swiper .ys-content[style*="align-items: flex-start"] .ys-content-inner{
  margin-inline-start: var(--ys-cx);
}
/* اگر تراز افقی راست باشد: از کناره‌ی راست به داخل آفست بده */
.ys-swiper .ys-content[style*="align-items: flex-end"] .ys-content-inner{
  margin-inline-end: var(--ys-cx);
}
/* اگر تراز افقی وسط باشد: حولِ مرکز کمی هل بده */
.ys-swiper .ys-content[style*="align-items: center"] .ys-content-inner{
  --ys-tx: var(--ys-cx);
}

/* --- عمودی --- */
/* اگر تراز عمودی بالا باشد: از بالا به داخل آفست بده */
.ys-swiper .ys-content[style*="justify-content: flex-start"] .ys-content-inner{
  margin-top: var(--ys-cy);
}
/* اگر تراز عمودی پایین باشد: از پایین به داخل آفست بده */
.ys-swiper .ys-content[style*="justify-content: flex-end"] .ys-content-inner{
  margin-bottom: var(--ys-cy);
}
/* اگر تراز عمودی وسط باشد: حولِ مرکز کمی هل بده */
.ys-swiper .ys-content[style*="justify-content: center"] .ys-content-inner{
  --ys-ty: var(--ys-cy);
}