/* Кастомная тема Video.js — класс vjs-theme-videos на <video> (скоупим, чтобы
   не задеть дефолтный скин других плееров). Тёмная тема + акцент #4da3ff.
   Принцип: НЕ ломаем em-раскладку Video.js (не задаём фикс. высоты/line-height
   контрол-бару) — только цвета, большая кнопка play и меню. */
.video-js.vjs-theme-videos {
  --vp-accent: #4da3ff;
  --vp-accent-2: #7cc0ff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  border-radius: var(--radius, 10px);
  overflow: hidden;
}
.video-js.vjs-theme-videos .vjs-tech { border-radius: inherit; }

/* большая кнопка play по центру — круг с акцентным кольцом.
   Центрируем через transform (margin Video.js рассчитан на дефолтный размер
   и со своим размером кнопку уводит из центра). */
.video-js.vjs-theme-videos.vjs-big-play-centered .vjs-big-play-button {
  width: 84px;
  height: 84px;
  line-height: 80px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(12, 15, 21, 0.45);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.video-js.vjs-theme-videos .vjs-big-play-button .vjs-icon-placeholder:before { font-size: 42px; }
.video-js.vjs-theme-videos.vjs-big-play-centered:hover .vjs-big-play-button,
.video-js.vjs-theme-videos.vjs-big-play-centered .vjs-big-play-button:focus {
  background: var(--vp-accent);
  border-color: #fff;
  transform: translate(-50%, -50%) scale(1.06);
}

/* контрол-бар: показываем ДО старта (по умолчанию Video.js прячет до первого play),
   мягкий градиент снизу. Авто-скрытие во время проигрывания остаётся (правило
   .vjs-user-inactive.vjs-playing специфичнее и перебивает наше opacity). */
.video-js.vjs-theme-videos .vjs-control-bar {
  display: flex;
  visibility: visible;
  opacity: 1;
  background: linear-gradient(to top, rgba(8, 10, 14, 0.92), rgba(8, 10, 14, 0));
}
.video-js.vjs-theme-videos .vjs-control:hover { color: var(--vp-accent-2); }

/* прогресс-бар: played = акцент, буфер = полупрозрачный */
.video-js.vjs-theme-videos .vjs-play-progress { background: var(--vp-accent); }
.video-js.vjs-theme-videos .vjs-play-progress:before { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.video-js.vjs-theme-videos .vjs-load-progress { background: rgba(255, 255, 255, 0.28); }
.video-js.vjs-theme-videos .vjs-load-progress div { background: rgba(255, 255, 255, 0.12); }
.video-js.vjs-theme-videos .vjs-slider:focus { box-shadow: 0 0 0 2px rgba(124, 192, 255, 0.5); }
.video-js.vjs-theme-videos .vjs-time-tooltip,
.video-js.vjs-theme-videos .vjs-mouse-display .vjs-time-tooltip {
  background: var(--vp-accent);
  color: #04101f;
  font-weight: 600;
  border-radius: 4px;
}

/* громкость */
.video-js.vjs-theme-videos .vjs-volume-level { background: var(--vp-accent); }
.video-js.vjs-theme-videos .vjs-volume-level:before { color: var(--vp-accent); }

/* меню (качество, скорость) — тёмные, скруглённые, акцент на выбранном */
.video-js.vjs-theme-videos .vjs-menu .vjs-menu-content {
  background: rgba(16, 19, 26, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
}
.video-js.vjs-theme-videos .vjs-menu li {
  border-radius: 6px;
  margin: 2px 4px;
  transition: background-color .12s ease, color .12s ease;
}
.video-js.vjs-theme-videos .vjs-menu li.vjs-selected,
.video-js.vjs-theme-videos .vjs-menu li.vjs-selected:focus {
  background: var(--vp-accent);
  color: #04101f;
}
.video-js.vjs-theme-videos .vjs-menu li:hover { background: rgba(77, 163, 255, 0.22); color: #fff; }

/* спиннер загрузки — акцентный */
.video-js.vjs-theme-videos .vjs-loading-spinner {
  border-color: rgba(255, 255, 255, 0.18);
  border-top-color: var(--vp-accent);
}

/* фокус-обводка доступности */
.video-js.vjs-theme-videos .vjs-control:focus-visible {
  outline: 2px solid var(--vp-accent-2);
  outline-offset: -2px;
}

/* сториборд-превью кадра при наведении на полосу перемотки */
.video-js .vjs-progress-control { position: relative; }
.video-js .vjs-sb-tip {
  position: absolute;
  bottom: 1.8em;
  border: 2px solid #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 4;
}