/* ===== Series page (scoped) ===== */
.series-page{ --h-gap: 22px; }

.series-hero{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  min-height: 220px;
  display: grid;
  align-items: end;
  padding: 22px;
  margin: 18px 0 16px;
  background: #0f1420;
}
.series-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,10,18,0) 0, rgba(6,10,18,.75) 65%, rgba(6,10,18,.95) 100%),
    var(--bg, none) center/cover no-repeat;
  filter: blur(6px) saturate(120%);
  transform: scale(1.06);
  z-index:-1;
}
.series-hero__top{
  display:flex; gap: var(--h-gap); align-items: flex-end;
}
.series-hero .poster{
  width: 220px; max-width: 32vw;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.series-hero__meta{ flex:1; }
.series-hero__title{
  font-size: clamp(28px, 3.2vw, 44px);
  margin:0 0 6px;
  letter-spacing:.3px;
}
.series-hero__chips{ display:flex; flex-wrap:wrap; gap:8px 10px; margin:10px 0 }
.series-chip{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  padding:6px 10px; border-radius: 999px;
  color:#c9d4e4; font-size:13px;
}
.series-hero__actions{ display:flex; gap:10px; margin-top:10px }
.series-hero .btn{ padding:10px 16px }

@media (max-width: 920px){
  .series-hero__top{ flex-direction: column; align-items:flex-start }
  .series-hero .poster{ width: 180px; }
}

/* info + description card */
.info-card .meta{
  display:grid;
  grid-template-columns: repeat(3, minmax(140px,1fr));
  gap:10px 16px;
}
@media (max-width: 920px){
  .info-card .meta{ grid-template-columns: repeat(2, minmax(120px,1fr)) }
}

.info-card .section-title{
  margin:18px 0 10px; font-size:14px; color:#9fb1c6; letter-spacing:.2px
}

/* player shell (сам плеер не меняем) */
.player-shell{ padding:0; overflow:hidden; border-radius: 16px }

/* Chips (seasons / episodes) */
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  background: #1b2432; color:#e6edf3;
  border:1px solid rgba(255,255,255,.08);
  padding: 8px 12px; border-radius: 999px; cursor:pointer;
  transition:.15s background, .15s transform;
}
.chip:hover{ background:#223047; transform: translateY(-1px) }
.chip--active{ background:#4f7cff; border-color: transparent }

/* Episodes container per season */
.episodes{ display:none; gap:8px; flex-wrap:wrap; }
.episodes.is-active{ display:flex; }

/* collapsible description */
.clamp{
  --lines: 8;
  display:-webkit-box;
  -webkit-line-clamp: var(--lines);
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.clamp.open{ -webkit-line-clamp: unset; }
.clamp-toggle{
  margin-top:8px; color:#9fb6ff; cursor:pointer; font-size:14px;
}
.player-card {
  background: rgba(17, 25, 40, 0.6);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 6px 26px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin: 20px 0 28px;
}

/* Коробка плеера с фиксированным соотношением сторон */
.player-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
}

.player-frame iframe,
.player-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
  object-fit: contain; /* для <video> */
}

/* Устраняет любую «тонкую линию» снизу */
.player-frame iframe::-webkit-scrollbar,
.player-frame video::-webkit-media-controls-enclosure {
  display: none !important;
}


.seasons-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .5rem 0 1rem;
}

.season-tab {
  padding: .45rem .8rem;
  border-radius: 9999px;
  background: #1c2430;           /* темный фон */
  color: #cbd5e1;                 /* светлый текст */
  border: 1px solid #273244;
  cursor: pointer;
  font-size: .95rem;
  transition: .15s ease;
}

.season-tab:hover {
  background: #223044;
  border-color: #2f4157;
}

.season-tab.is-active {
  background: #2d5bff;
  border-color: #2d5bff;
  color: #fff;
}

/* Обязательный класс, которым скрываем эпизоды */
.is-hidden { display: none !important; }


/* ====== Инфо-блок фильма ====== */
.facts {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px 18px;
  margin-top: 16px;
  backdrop-filter: blur(2px);
  transition: border-color 0.2s ease;
}
.facts:hover { border-color: rgba(255, 255, 255, 0.12); }

.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 24px;
}

.fact {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fact-label {
  color: #aab2c3;
  font-size: 0.9rem;
  min-width: 70px;
}

.fact-value {
  color: #e6eaf3;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.fact-muted {
  color: #767e93;
}

/* Бейджи */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 3px 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.2;
}

.badge--imdb {
  background: linear-gradient(180deg, #F5C518, #D4AC0D);
  color: #0d0d0d;
}

.badge--kp {
  background: linear-gradient(180deg, #3AA8FF, #007BFF);
  color: #f8f9fb;
}

.badge--age {
  background: rgba(138, 180, 255, 0.15);
  color: #cfe7ff;
  border: 1px solid rgba(138, 180, 255, 0.25);
  padding: 3px 8px;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
  .facts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
  }

  .fact-label { font-size: 0.88rem; }
  .fact-value { font-size: 0.95rem; }
}

/* ====== Описание (Netflix-like) ====== */
.desc {
  background: transparent;                /* не создаём «карточку в карточке» */
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 16px;
  backdrop-filter: blur(2px);
  transition: border-color .2s ease;
}
.desc:hover { border-color: rgba(255,255,255,0.12); }

.desc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.desc-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #e7ecf6;
  letter-spacing: .2px;
}

.desc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: #8fb6ff;
  font-size: 0.92rem;
  padding: 6px 8px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  transition: color .2s ease, background-color .2s ease;
}
.desc-toggle:hover { color: #bcd4ff; background: rgba(138,180,255,0.08); }
.desc-toggle .chev { transition: transform .25s ease; }

.desc-text {
  font-size: 0.98rem;
  color: #d7dbe6;
  line-height: 1.72;
  letter-spacing: 0.1px;
  /* «обрезаем» высоту и добавляем маску-затухание снизу */
  max-height: 7.5rem;              /* ~4–5 строк на десктопе */
  overflow: hidden;
  transition: max-height .35s ease;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, rgba(0,0,0,0));
  mask-image: linear-gradient(180deg, #000 72%, rgba(0,0,0,0));
}

/* Состояние развёрнуто — показываем весь текст и убираем маску */
.desc-text.expanded {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Если у пользователя выключены анимации */
@media (prefers-reduced-motion: reduce) {
  .desc-text { transition: none; }
  .desc-toggle .chev { transition: none; }
}

/* Мобильная адаптация */
@media (max-width: 768px) {
  .desc { padding: 14px 14px; }
  .desc-text { max-height: 6rem; font-size: 0.96rem; }
  .desc-title { font-size: 1rem; }
}


/* bar */
.translations-bar{
  display:flex;align-items:center;gap:10px;margin:16px 0 10px;
}
.translations-label{font-size:15px;color:#cfd9ef;opacity:.9}

/* dropdown */
.dd{position:relative;min-width:220px}
.dd-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#e6edff;font-size:14px;line-height:1;
  cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .06s ease;
}
.dd-toggle:hover{background:rgba(255,255,255,.1)}
.dd-toggle:active{transform:translateY(1px)}
.dd-caret{opacity:.9;transition:transform .18s ease}

/* menu */
.dd-menu{
  position:absolute;left:0;right:0;top:calc(100% + 6px);
  background:rgba(22,24,28,.96);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.04) inset;
  padding:6px;margin:0;list-style:none;max-height:280px;overflow:auto;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s ease; z-index:30;
}
.dd.is-open .dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dd.is-open .dd-caret{transform:rotate(180deg)}

.dd-option{
  padding:10px 10px;border-radius:10px;line-height:1.2;cursor:pointer;
  color:#dfe7ff;outline:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
  transition:background .12s ease,color .12s ease,transform .04s ease;
}
.dd-option:hover,.dd-option:focus{background:rgba(255,255,255,.08)}
.dd-option:active{transform:translateY(1px)}
.dd-option.is-selected{background:rgba(82,109,255,.2);color:#e9efff}

/* компакт на мобилках */
@media (max-width: 560px){
  .dd{min-width:180px}
  .dd-toggle{padding:9px 10px;border-radius:10px}
  .dd-option{padding:9px 9px;border-radius:8px}
}