/* ==========================================================================
   Velveflix — Navbar / Header 2026 (Э3)
   vf-design-engineer · 2026-06-08
   Изоляция: всё под #header.vf-nav-scope. Конфликтные токены переопределены
   локально (специфичность .vf-nav-scope (0,1,0)+id > старый :root). Старый
   глобальный :root в style.css НЕ трогаем. Бэкенд поиска = DooPlay live-search.
   ========================================================================== */

/* Devendored 2026-06-13: локальный дубль 12 токенов убран — наследуем из :root
   (vf-tokens.css). Был защитой от light-ветки токенов, но light отключена
   (vf-tokens.css, 12.06.2026), фолбэки в var(...) внутри файла остаются страховкой. */

#header.vf-nav-scope{

  /* перебиваем боевые стили DooPlay #header (в т.ч. mobile display:none,
     т.к. наш навбар сам адаптивный — DooPlay .fixheadresp не используется) */
  display: block !important;
  background: var(--vf-surface-1, #16181F) !important;
  border-bottom: 1px solid var(--vf-line, #2C313D);
  box-shadow: none !important;
  height: auto !important;
  min-width: 0 !important;
  position: sticky;       /* CSS sticky, без JS-IO — не плодим осцилляцию */
  top: 0;
  z-index: var(--vf-z-sticky, 100);
}
/* NB: сайт DooPlay всегда тёмный — навбар НЕ переключаем по prefers-color-scheme
   (иначе светлый дропдаун на тёмной странице, как в Э2/WtW). Светлую тему даёт
   отдельная глобальная миграция токенов (техдолг). */

/* sr-only утилита (глобально, для единого H1 на главной и a11y-лейблов) */
.vf-sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ----- сетка навбара ----- */
#header.vf-nav-scope .vf-nav{
  max-width: var(--vf-container-max, 1280px);
  margin-inline: auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--vf-space-5, 24px);
  padding-inline: var(--vf-container-pad, 16px);
}
@media (min-width:1024px){
  #header.vf-nav-scope .vf-nav{ padding-inline: var(--vf-container-pad-lg, 32px); }
}

/* ----- логотип ----- */
#header.vf-nav-scope .vf-nav__logo{
  display: inline-flex; align-items: center;
  flex: 0 0 auto; text-decoration: none; line-height: 0;
  border-radius: var(--vf-radius-sm);
}
#header.vf-nav-scope .vf-nav__logo svg{ height: 30px; width: auto; display: block; }
#header.vf-nav-scope .vf-nav__logo:focus-visible{
  outline: 2px solid var(--vf-focus-ring, #6AA8FF); outline-offset: 3px;
}

/* ----- основная навигация (десктоп) ----- */
#header.vf-nav-scope .vf-nav__menu{
  display: none; flex: 1 1 auto; min-width: 0;
}
@media (min-width:900px){
  #header.vf-nav-scope .vf-nav__menu{ display: block; }
}
#header.vf-nav-scope .vf-nav__menu ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: var(--vf-space-1, 4px);
}
#header.vf-nav-scope .vf-nav__menu .sub-menu{ display: none; }   /* мегаменю — в мобайл-панель/будущее */
#header.vf-nav-scope .vf-nav__menu > ul > li{ position: relative; }
#header.vf-nav-scope .vf-nav__menu > ul > li > a{
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 var(--vf-space-3, 12px);
  border-radius: var(--vf-radius-sm);
  color: var(--vf-text-2, #B9C0CE) !important;
  font: var(--vf-fw-medium,500) var(--vf-fs-sm,.875rem)/1 var(--vf-font-sans, system-ui);
  text-decoration: none !important; white-space: nowrap;
  transition: color var(--vf-dur-fast,120ms), background var(--vf-dur-fast,120ms);
}
@media (hover:hover) and (pointer:fine){
  #header.vf-nav-scope .vf-nav__menu > ul > li > a:hover{
    color: var(--vf-text,#F2F4F8) !important; background: var(--vf-surface-3,#272B37);
  }
}
#header.vf-nav-scope .vf-nav__menu > ul > li.current-menu-item > a,
#header.vf-nav-scope .vf-nav__menu > ul > li.current_page_item > a{
  color: var(--vf-accent,#FF5C49) !important;
}
#header.vf-nav-scope .vf-nav__menu a:focus-visible{
  outline: 2px solid var(--vf-focus-ring,#6AA8FF); outline-offset: 2px;
}
/* dropdown-разделители вида "— Drama —" в меню — скрыть на верхнем уровне */
#header.vf-nav-scope .vf-nav__menu > ul > li > a[href="#"]{ display:none; }

/* ----- правый блок ----- */
#header.vf-nav-scope .vf-nav__right{
  margin-left: auto; flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--vf-space-2, 8px);
}

/* ----- поиск (десктоп inline) ----- */
#header.vf-nav-scope .vf-search{ position: relative; }
#header.vf-nav-scope .vf-search__form{
  display: flex; align-items: center;
  background: var(--vf-surface-2, #1E212B);
  border: 1px solid var(--vf-line, #2C313D);
  border-radius: var(--vf-radius-pill, 999px);
  height: 40px; padding: 0 6px 0 14px;
  transition: border-color var(--vf-dur-fast,120ms);
}
#header.vf-nav-scope .vf-search__form:focus-within{
  border-color: var(--vf-accent, #FF5C49);
}
#header.vf-nav-scope .vf-search__input{
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  color: var(--vf-text, #F2F4F8) !important;
  font: var(--vf-fw-regular,400) var(--vf-fs-sm,.875rem)/1 var(--vf-font-sans, system-ui);
  width: 200px; height: 38px; padding: 0 8px 0 0 !important; margin: 0 !important;
  outline: none !important; min-height: 0 !important;
}
@media (min-width:1200px){ #header.vf-nav-scope .vf-search__input{ width: 260px; } }
#header.vf-nav-scope .vf-search__input::placeholder{ color: var(--vf-text-muted, #8A93A6); opacity:1; }
#header.vf-nav-scope .vf-search__btn{
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0; margin: 0;
  display: grid; place-items: center; cursor: pointer;
  background: transparent !important; border: 0 !important; box-shadow:none !important;
  color: var(--vf-text-muted, #8A93A6) !important; border-radius: var(--vf-radius-round,50%);
}
#header.vf-nav-scope .vf-search__btn:hover{ color: var(--vf-accent,#FF5C49) !important; }
#header.vf-nav-scope .vf-search__btn svg{ width:18px; height:18px; fill:currentColor; display:block; }
#header.vf-nav-scope .vf-search__btn:focus-visible{ outline:2px solid var(--vf-focus-ring,#6AA8FF); outline-offset:2px; }

/* десктоп: поиск виден, мобайл-иконки скрыты */
#header.vf-nav-scope .vf-search{ display: none; }
@media (min-width:900px){
  #header.vf-nav-scope .vf-search{ display: block; }
}

/* ----- саджест-дропдаун ----- */
#header.vf-nav-scope .vf-suggest{
  position: absolute; top: calc(100% + 8px); right: 0;
  width: min(380px, 92vw);
  background: var(--vf-surface-2, #1E212B);
  border: 1px solid var(--vf-line, #2C313D);
  border-radius: var(--vf-radius-md, 12px);
  box-shadow: var(--vf-shadow-3, 0 12px 32px rgba(0,0,0,.55));
  padding: var(--vf-space-2, 8px);
  z-index: var(--vf-z-dropdown, 200);
  display: none;
}
#header.vf-nav-scope .vf-suggest.is-open{ display: block; }
#header.vf-nav-scope .vf-suggest__item{
  display: flex; align-items: center; gap: var(--vf-space-3, 12px);
  padding: var(--vf-space-2,8px); border-radius: var(--vf-radius-sm,8px);
  text-decoration: none !important; color: var(--vf-text,#F2F4F8) !important;
}
#header.vf-nav-scope .vf-suggest__item:hover,
#header.vf-nav-scope .vf-suggest__item.is-active{ background: var(--vf-surface-3, #272B37); }
#header.vf-nav-scope .vf-suggest__thumb{
  flex: 0 0 auto; width: 34px; height: 51px; border-radius: var(--vf-radius-xs,4px);
  object-fit: cover; background: var(--vf-surface-3,#272B37);
}
#header.vf-nav-scope .vf-suggest__body{ min-width:0; flex:1 1 auto; }
#header.vf-nav-scope .vf-suggest__title{
  font: var(--vf-fw-semibold,600) var(--vf-fs-sm,.875rem)/1.3 var(--vf-font-sans,system-ui);
  color: var(--vf-text,#F2F4F8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#header.vf-nav-scope .vf-suggest__meta{
  font: var(--vf-fw-regular,400) var(--vf-fs-xs,.75rem)/1.2 var(--vf-font-sans,system-ui);
  color: var(--vf-text-muted,#8A93A6); font-feature-settings:"tnum";
}
#header.vf-nav-scope .vf-suggest__type{
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius: var(--vf-radius-xs,4px);
  background: var(--vf-surface-4,#323744); color: var(--vf-text-2,#B9C0CE);
  text-transform: uppercase; letter-spacing: var(--vf-ls-caps,.04em); font-size:.65rem;
}
#header.vf-nav-scope .vf-suggest__all{
  display:flex; align-items:center; gap: var(--vf-space-2,8px);
  margin-top: 4px; padding: var(--vf-space-3,12px) var(--vf-space-2,8px);
  border-top: 1px solid var(--vf-line,#2C313D);
  color: var(--vf-accent,#FF5C49) !important; text-decoration:none !important;
  font: var(--vf-fw-semibold,600) var(--vf-fs-sm,.875rem)/1 var(--vf-font-sans,system-ui);
}
#header.vf-nav-scope .vf-suggest__all svg{ width:15px; height:15px; fill:currentColor; }
#header.vf-nav-scope .vf-suggest__empty{
  padding: var(--vf-space-4,16px) var(--vf-space-2,8px);
  color: var(--vf-text-muted,#8A93A6); font-size: var(--vf-fs-sm,.875rem); text-align:center;
}

/* ----- мобильные иконки (бургер + лупа) ----- */
#header.vf-nav-scope .vf-nav__icon{
  width: 44px; height: 44px; padding:0; display: grid; place-items: center;
  background: transparent !important; border: 0 !important; box-shadow:none !important;
  color: var(--vf-text, #F2F4F8) !important; cursor: pointer; border-radius: var(--vf-radius-sm,8px);
}
#header.vf-nav-scope .vf-nav__icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; }
#header.vf-nav-scope .vf-nav__icon:focus-visible{ outline:2px solid var(--vf-focus-ring,#6AA8FF); outline-offset:2px; }
@media (min-width:900px){ #header.vf-nav-scope .vf-nav__icon{ display:none; } }

/* ===================== МОБАЙЛ: бэкдроп + панели ===================== */
.vf-nav-backdrop{
  position: fixed; inset: 0; z-index: var(--vf-z-overlay, 300);
  background: rgba(0,0,0,.55); opacity:0; visibility:hidden;
  transition: opacity var(--vf-dur-base,180ms) ease;
}
.vf-nav-backdrop.is-open{ opacity:1; visibility:visible; }

/* боттом-шит навигации (переименован с .vf-sheet → .vf-navsheet:
   развязка коллизии с фильтр-шитом дискавера .vf-sheet в vf-discover.css) */
.vf-navsheet[hidden]{ display:none !important; }
.vf-navsheet{
  position: fixed; left:0; right:0; bottom:0; z-index: var(--vf-z-modal, 400);
  background: var(--vf-surface-1, #16181F);
  border-top-left-radius: var(--vf-radius-lg,16px);
  border-top-right-radius: var(--vf-radius-lg,16px);
  border-top: 1px solid var(--vf-line,#2C313D);
  max-height: 80vh; overflow-y: auto;
  padding: var(--vf-space-3,12px) var(--vf-space-4,16px)
           calc(var(--vf-space-5,24px) + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform var(--vf-dur-slow,240ms) var(--vf-ease-out, cubic-bezier(0,0,.2,1));
}
.vf-navsheet.is-open{ transform: translateY(0); }
.vf-navsheet__grip{ width:40px; height:4px; border-radius:2px; background: var(--vf-line-strong,#3A4150); margin: 4px auto var(--vf-space-3,12px); }
.vf-navsheet__list{ list-style:none; margin:0; padding:0; }
.vf-navsheet__list li{ margin:0; }
.vf-navsheet__list a{
  display:flex; align-items:center; min-height:48px; padding: 0 var(--vf-space-2,8px);
  color: var(--vf-text,#F2F4F8) !important; text-decoration:none !important;
  font: var(--vf-fw-medium,500) var(--vf-fs-body,1rem)/1.3 var(--vf-font-sans,system-ui);
  border-bottom: 1px solid var(--vf-line,#2C313D);
}
.vf-navsheet__list a:active{ background: var(--vf-surface-3,#272B37); }
.vf-navsheet__list .sub-menu{ list-style:none; margin:0; padding:0 0 0 var(--vf-space-4,16px); }
.vf-navsheet__list .sub-menu a{ font-size: var(--vf-fs-sm,.875rem); color: var(--vf-text-2,#B9C0CE)!important; min-height:44px; }
/* раздел-заголовок (a href="#") */
.vf-navsheet__list a[href="#"], .vf-navsheet__list a[href$="/#"]{
  color: var(--vf-text-muted,#8A93A6)!important; text-transform:uppercase;
  letter-spacing: var(--vf-ls-caps,.04em); font-size: var(--vf-fs-xs,.75rem); pointer-events:none;
  min-height:36px; border-bottom:0; padding-top: var(--vf-space-3,12px);
}

/* мобайл full-screen поиск */
.vf-search-overlay{
  position: fixed; inset: 0; z-index: var(--vf-z-modal, 400);
  background: var(--vf-bg, #0E0F13);
  display: flex; flex-direction: column;
  transform: translateY(-12px); opacity:0; visibility:hidden;
  transition: opacity var(--vf-dur-base,180ms) ease, transform var(--vf-dur-base,180ms) ease;
}
.vf-search-overlay.is-open{ transform: translateY(0); opacity:1; visibility:visible; }
.vf-search-overlay__bar{
  display:flex; align-items:center; gap: var(--vf-space-2,8px);
  padding: calc(var(--vf-space-3,12px) + env(safe-area-inset-top)) var(--vf-space-4,16px) var(--vf-space-3,12px);
  border-bottom: 1px solid var(--vf-line,#2C313D); background: var(--vf-surface-1,#16181F);
}
.vf-search-overlay__form{
  flex:1 1 auto; display:flex; align-items:center;
  background: var(--vf-surface-2,#1E212B); border:1px solid var(--vf-line,#2C313D);
  border-radius: var(--vf-radius-pill,999px); height:44px; padding:0 14px;
}
.vf-search-overlay__form:focus-within{ border-color: var(--vf-accent,#FF5C49); }
.vf-search-overlay__input{
  flex:1 1 auto; border:0!important; background:transparent!important; box-shadow:none!important;
  color: var(--vf-text,#F2F4F8)!important; outline:none!important; min-height:0!important;
  font: var(--vf-fw-regular,400) var(--vf-fs-body,1rem)/1 var(--vf-font-sans,system-ui);
  height:42px; padding:0!important; margin:0!important;
}
.vf-search-overlay__input::placeholder{ color: var(--vf-text-muted,#8A93A6); opacity:1; }
.vf-search-overlay__close{
  flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center;
  background:transparent!important; border:0!important; color: var(--vf-text,#F2F4F8)!important;
  cursor:pointer; border-radius: var(--vf-radius-sm,8px);
}
.vf-search-overlay__close svg{ width:22px; height:22px; stroke:currentColor; stroke-width:2; fill:none; }
.vf-search-overlay__results{ flex:1 1 auto; overflow-y:auto; padding: var(--vf-space-3,12px) var(--vf-space-4,16px); }
.vf-search-overlay__results .vf-suggest__item{
  display:flex; align-items:center; gap: var(--vf-space-3,12px);
  padding: var(--vf-space-2,8px); border-radius: var(--vf-radius-sm,8px);
  text-decoration:none!important; color: var(--vf-text,#F2F4F8)!important;
}
.vf-search-overlay__results .vf-suggest__item:active{ background: var(--vf-surface-3,#272B37); }
.vf-search-overlay__results .vf-suggest__thumb{ width:40px; height:60px; border-radius: var(--vf-radius-xs,4px); object-fit:cover; background: var(--vf-surface-3,#272B37); flex:0 0 auto; }
.vf-search-overlay__results .vf-suggest__title{ font: var(--vf-fw-semibold,600) var(--vf-fs-body,1rem)/1.3 var(--vf-font-sans,system-ui); color: var(--vf-text,#F2F4F8); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vf-search-overlay__results .vf-suggest__meta{ font-size: var(--vf-fs-sm,.875rem); color: var(--vf-text-muted,#8A93A6); }
.vf-search-overlay__results .vf-suggest__type{ display:inline-block; margin-left:6px; padding:1px 6px; border-radius: var(--vf-radius-xs,4px); background: var(--vf-surface-4,#323744); color: var(--vf-text-2,#B9C0CE); text-transform:uppercase; letter-spacing: var(--vf-ls-caps,.04em); font-size:.65rem; }
.vf-search-overlay__results .vf-suggest__empty{ padding: var(--vf-space-6,32px) 0; text-align:center; color: var(--vf-text-muted,#8A93A6); }

body.vf-nav-locked{ overflow: hidden; }

/* ===================== ДЕСКТОП: мегапанель Genres ===================== */
/* анти-«дамп меню»: панель скрыта по умолчанию (дублирует критикал-CSS в <head>) */
#header.vf-nav-scope .vf-megamenu[hidden]{ display:none !important; }

#header.vf-nav-scope .vf-nav__has-mega{ position: relative; display: none; }
@media (min-width:900px){
  #header.vf-nav-scope .vf-nav__has-mega{ display: block; }
}

/* триггер-кнопка (стилизуем как пункт меню) */
#header.vf-nav-scope .vf-nav__mega-trigger{
  display: inline-flex; align-items: center; gap: 4px;
  height: 40px; padding: 0 var(--vf-space-3, 12px);
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  border-radius: var(--vf-radius-sm, 8px); cursor: pointer;
  color: var(--vf-text-2, #B9C0CE) !important;
  font: var(--vf-fw-medium,500) var(--vf-fs-sm,.875rem)/1 var(--vf-font-sans, system-ui);
  white-space: nowrap;
  transition: color var(--vf-dur-fast,120ms), background var(--vf-dur-fast,120ms);
}
@media (hover:hover) and (pointer:fine){
  #header.vf-nav-scope .vf-nav__mega-trigger:hover{
    color: var(--vf-text,#F2F4F8) !important; background: var(--vf-surface-3,#272B37);
  }
}
#header.vf-nav-scope .vf-nav__mega-trigger[aria-expanded="true"]{
  color: var(--vf-text,#F2F4F8) !important; background: var(--vf-surface-3,#272B37);
}
#header.vf-nav-scope .vf-nav__mega-trigger:focus-visible{
  outline: 2px solid var(--vf-focus-ring,#6AA8FF); outline-offset: 2px;
}
#header.vf-nav-scope .vf-nav__mega-caret{
  width: 16px; height: 16px; flex: 0 0 auto; transition: transform var(--vf-dur-fast,120ms);
}
#header.vf-nav-scope .vf-nav__mega-trigger[aria-expanded="true"] .vf-nav__mega-caret{
  transform: rotate(180deg);
}

/* панель */
#header.vf-nav-scope .vf-megamenu{
  position: absolute; top: calc(100% + 8px); left: 0;
  width: min(620px, 86vw);
  background: var(--vf-surface-2, #1E212B);
  border: 1px solid var(--vf-line, #2C313D);
  border-radius: var(--vf-radius-md, 12px);
  box-shadow: var(--vf-shadow-3, 0 12px 32px rgba(0,0,0,.55));
  padding: var(--vf-space-3, 12px);
  z-index: var(--vf-z-dropdown, 200);
}
#header.vf-nav-scope .vf-nav__menu ul.vf-megamenu__grid,
#header.vf-nav-scope .vf-megamenu__grid{
  list-style: none; margin: 0; padding: 0;
  display: grid; align-items: stretch; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
@media (max-width:1100px){
  #header.vf-nav-scope .vf-nav__menu ul.vf-megamenu__grid,
  #header.vf-nav-scope .vf-megamenu__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  #header.vf-nav-scope .vf-megamenu{
    opacity: 0; transform: translateY(6px);
    transition: opacity var(--vf-dur-fast,120ms) ease-out, transform var(--vf-dur-fast,120ms) ease-out;
  }
  #header.vf-nav-scope .vf-megamenu.is-open{ opacity: 1; transform: translateY(0); }
}
#header.vf-nav-scope .vf-megamenu__cell{ margin: 0; min-width: 0; }
#header.vf-nav-scope .vf-megamenu__link{
  display: block; padding: 8px 10px; border-radius: var(--vf-radius-sm, 8px);
  color: var(--vf-text-2, #B9C0CE) !important; text-decoration: none !important;
  font: var(--vf-fw-medium,500) var(--vf-fs-sm,.875rem)/1.2 var(--vf-font-sans, system-ui);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--vf-dur-fast,120ms), background var(--vf-dur-fast,120ms);
}
@media (hover:hover) and (pointer:fine){
  #header.vf-nav-scope .vf-megamenu__link:hover{
    color: var(--vf-text,#F2F4F8) !important; background: var(--vf-surface-3,#272B37);
  }
}
#header.vf-nav-scope .vf-megamenu__link:focus-visible{
  outline: 2px solid var(--vf-focus-ring,#6AA8FF); outline-offset: 2px;
  color: var(--vf-text,#F2F4F8) !important;
}

/* reduced-motion */
@media (prefers-reduced-motion: reduce){
  .vf-navsheet, .vf-search-overlay, .vf-nav-backdrop{ transition: none !important; }
  #header.vf-nav-scope .vf-nav__mega-caret{ transition: none !important; }
}