/* ==========================================================================
   Velveflix — Where to Watch (.vf-wtw)
   Источник правды: _vf-preview/title.html + assets/vf-preview.css (утв. Ильёй).
   Модель JustWatch: группы Stream · Free · Rent · Buy, цвет-маркер = --vf-wtw-*.
   Пилюли (radius-pill), лого 30px на белой плашке (--vf-wtw-logo-bg → CLS 0),
   цветной hover группы (border = --c группы). Токены 2026 из vf-tokens.css.
   Подключается ТОЛЬКО на is_singular(movies|tvshows|episodes).
   Коллизия: блок НЕ под .vf-scope, поэтому конфликтные с боевым style.css имена
   (--vf-radius-sm:5px старый, --vf-text старый) переопределяю локально на 2026,
   а боевое a{color:var(--vf-text)!important} перебиваю color:...!important.
   ========================================================================== */

.vf-wtw{
  /* локальные оверрайды --vf-radius-sm/--vf-text УДАЛЕНЫ 2026-06-12:
     старый :root снят из style.css, глобальные значения теперь = 2026. */
  background: var(--vf-surface-1, var(--vf-surface-2));
  border: 1px solid var(--vf-line);
  border-radius: var(--vf-radius-lg);
  padding: var(--vf-space-5);
  margin: var(--vf-space-5) 0;
  color: var(--vf-text);
}

/* ── шапка: заголовок + регион-пилюля справа ───────────────────────────── */
.vf-wtw__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vf-space-3);
  margin-bottom: var(--vf-space-4);
}
.vf-wtw__title{
  font-family: var(--vf-font-sans);
  font-size: var(--vf-fs-h3);
  font-weight: var(--vf-fw-bold);
  line-height: var(--vf-lh-snug);
  letter-spacing: var(--vf-ls-tight);
  color: var(--vf-text);
  margin: 0;
}
.vf-wtw__region{
  flex: 0 0 auto;
  font-size: var(--vf-fs-xs);
  font-weight: var(--vf-fw-medium);
  color: var(--vf-text-muted);
  border: 1px solid var(--vf-line);
  padding: 3px 10px;
  border-radius: var(--vf-radius-pill);
}

/* ── группа: цветной маркер по типу ────────────────────────────────────── */
.vf-wtw__group{ margin-bottom: var(--vf-space-4); --c: var(--vf-wtw-stream); }
.vf-wtw__group:last-child{ margin-bottom: 0; }
.vf-wtw__group--stream{ --c: var(--vf-wtw-stream); }
.vf-wtw__group--free  { --c: var(--vf-wtw-free); }
.vf-wtw__group--rent  { --c: var(--vf-wtw-rent); }
.vf-wtw__group--buy   { --c: var(--vf-wtw-buy); }

.vf-wtw__group-title{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--vf-font-sans);
  font-size: var(--vf-fs-xs);
  font-weight: var(--vf-fw-bold);
  color: var(--vf-text-2);
  text-transform: uppercase;
  letter-spacing: var(--vf-ls-caps);
  margin: 0 0 var(--vf-space-2);
}
.vf-wtw__group-title::before{
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: var(--vf-radius-round);
  background: var(--c);
}

/* ── список провайдеров ───────────────────────────────────────────────── */
.vf-wtw__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--vf-space-2);
}
.vf-wtw__list > li{
  display: inline-flex;
  align-items: center;
}

/* ── пилюля провайдера (трекер живёт на a.vf-wtw__provider[data-vf-wtw]) ── */
.vf-wtw__provider{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;                 /* тап-таргет */
  padding: 6px 12px 6px 6px;        /* лого слева вплотную к краю */
  background: var(--vf-surface-3);
  border: 1px solid var(--vf-line);
  border-radius: var(--vf-radius-pill);
  text-decoration: none;
  color: var(--vf-text) !important; /* перебиваем боевое a{color:var(--vf-text)!important} */
  font-size: var(--vf-fs-sm);
  font-weight: var(--vf-fw-medium);
  transition: background var(--vf-dur-base) var(--vf-ease-standard),
              border-color var(--vf-dur-base) var(--vf-ease-standard);
}

/* ── лого 30px на белой плашке ─────────────────────────────────────────── */
.vf-wtw__logo{
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: var(--vf-radius-sm); /* P2-2 2026-06-12: 7px → 8px (токен) */
  background: var(--vf-wtw-logo-bg);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.vf-wtw__logo img{
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  padding: 2px;
  box-sizing: border-box;
}
.vf-wtw__name{ white-space: nowrap; }
.vf-wtw__ads{
  font-size: var(--vf-fs-xs);
  font-weight: var(--vf-fw-regular);
  color: var(--vf-text-muted);
}

/* Фаза 4 (аккаунты): «свои» сервисы залогина — акцент-рамка + чип yours */
.vf-wtw__provider--mine{
  border-color: var(--vf-accent);
  box-shadow: inset 0 0 0 1px var(--vf-accent);
}
.vf-wtw__mine{
  font-size: var(--vf-fs-xs);
  font-weight: var(--vf-fw-semibold);
  color: var(--vf-accent);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* dofollow-перелинковка на /watch/{slug}/ (S4) — отдельная мини-ссылка */
.vf-wtw__hub{
  margin-left: 4px;
  font-size: var(--vf-fs-xs);
  font-weight: var(--vf-fw-medium);
  color: var(--vf-text-muted);
  text-decoration: underline;
}
.vf-wtw__hub:hover{ color: var(--vf-text-2); }

/* ── цветной hover группы ──────────────────────────────────────────────── */
@media (hover:hover) and (pointer:fine){
  .vf-wtw__provider:hover{
    background: var(--vf-surface-4);
    border-color: var(--c);
    color: var(--vf-text) !important;
  }
}
.vf-wtw__provider:focus-visible{
  outline: 2px solid var(--vf-focus-ring);
  outline-offset: 2px;
}

.vf-wtw__attr{
  margin: var(--vf-space-4) 0 0;
  font-size: var(--vf-fs-xs);
  color: var(--vf-text-muted);
}
.vf-wtw__attr a{ color: var(--vf-text-2); text-decoration: underline; }

/* мобайл: чуть плотнее */
@media (max-width: 480px){
  .vf-wtw{ padding: var(--vf-space-4); }
  .vf-wtw__list{ gap: var(--vf-space-2); }
}

/* ==========================================================================
   E4 §6 — Sticky WtW-CTA (мобайл). Выезжает снизу, когда блок WtW
   (#where-to-watch) ушёл из вьюпорта; ведёт обратно на #where-to-watch.
   Триггер — IntersectionObserver на WtW-блоке (вердикт N9: sticky-WtW > anchor-ad).
   Анимируем только transform+opacity+visibility. JS тоглит .is-visible.
   НЕ под .vf-scope (как и .vf-wtw): токены 2026 уже глобальны.
   ========================================================================== */
.vf-sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--vf-z-sticky);
  padding:var(--vf-space-3) var(--vf-container-pad);
  padding-bottom:calc(var(--vf-space-3) + env(safe-area-inset-bottom));
  background:var(--vf-surface-1); border-top:1px solid var(--vf-line);
  transform:translateY(100%); opacity:0; visibility:hidden;
  transition: transform var(--vf-dur-slow) var(--vf-ease-in),
              opacity   var(--vf-dur-slow) var(--vf-ease-in),
              visibility 0s linear var(--vf-dur-slow);
}
.vf-sticky-cta.is-visible{
  transform:translateY(0); opacity:1; visibility:visible;
  transition: transform var(--vf-dur-slow) var(--vf-ease-out),
              opacity   var(--vf-dur-slow) var(--vf-ease-out),
              visibility 0s;
}
.vf-sticky-cta .vf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:46px; padding:0 18px;
  border-radius:var(--vf-radius-md); border:1px solid transparent;
  font-weight:var(--vf-fw-semibold); font-size:var(--vf-fs-sm);
  line-height:1; text-decoration:none;
  background:var(--vf-accent); color:#fff;
}
.vf-sticky-cta .vf-btn:hover{ background:var(--vf-accent-hover); }
.vf-sticky-cta .vf-btn:focus-visible{ outline:2px solid var(--vf-focus-ring); outline-offset:2px; }
.vf-sticky-cta .vf-btn svg{ flex:0 0 auto; }

/* Только мобайл: на десктопе бара нет. */
@media (min-width:768px){ .vf-sticky-cta{ display:none; } }

/* Резерв места под бар включается JS-классом has-sticky-cta (ставится при показе,
   но padding учитывает CLS: бар fixed поверх контента, резерв снизу страницы). */
@media (max-width:767px){
  body.has-sticky-cta{ padding-bottom:72px; }
}

@media (prefers-reduced-motion: reduce){
  .vf-sticky-cta{ transition:none; }
}

/* ==========================================================================
   CTA с микроконтекстом провайдера (2026-06-13).
   Мини-чип лого провайдера в кнопках «Watch on {Name}»:
   - hero-CTA тайтла (.vf-title__actions .vf-btn — под .vf-scope),
   - sticky WtW-CTA мобайла (.vf-sticky-cta .vf-btn — вне .vf-scope).
   Белая плашка (как .vf-wtw__logo → контраст лого на тёмной кнопке), CLS 0:
   фикс-размер задаётся и в CSS, и атрибутами width/height на <img>.
   Размер чипа = высота строки кнопки (на токене --vf-fs-sm), лого внутри fit.
   ========================================================================== */
.vf-cta-prov{
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.25em;            /* масштаб от font-size кнопки (≈18px при fs-sm) */
  height: 1.25em;
  border-radius: var(--vf-radius-sm);
  background: var(--vf-wtw-logo-bg);
  overflow: hidden;
}
.vf-cta-prov img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 1px;
  box-sizing: border-box;
}
/* sticky-бар: чуть крупнее (тап-таргет крупной мобайл-кнопки) */
.vf-sticky-cta .vf-cta-prov{ width: 20px; height: 20px; }