/* ===== Упрощенный HLS плеер ===== */
.video-js{width:100% !important;height:auto !important;max-width:100% !important;}
.hls-wrap{position:relative;width:100%;max-width:100%;margin:0 auto;border-radius:0;overflow:visible;background:#000;display:block;visibility:visible;border:none !important;outline:none !important;box-shadow:none !important;}

/* Убираем фиксированный aspect-ratio, делаем адаптивным */
.hls-wrap::before{display:none !important;}

.hls-wrap > video,
.hls-wrap > .video-js{position:relative !important;width:100% !important;height:auto !important;max-width:100% !important;max-height:90vh !important;display:block !important;visibility:visible !important;opacity:1 !important;z-index:1;margin:0 auto;}

.hls-wrap .vjs-tech,
.hls-wrap video{width:100% !important;height:auto !important;max-width:100% !important;max-height:90vh !important;display:block !important;visibility:visible !important;opacity:1 !important;object-fit:contain !important;object-position:center !important;background:#000 !important;margin:0 auto;}

/* Полноэкранный режим */
.hls-wrap:fullscreen,
.hls-wrap:-webkit-full-screen,
.hls-wrap:-moz-full-screen,
.hls-wrap:-ms-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
  /* Центруем содержимое (видео) в fullscreen */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Video.js иногда включает fullscreen через класс, а не через :fullscreen */
.hls-wrap.vjs-fullscreen,
.video-js.vjs-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  background: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hls-wrap:fullscreen::before,
.hls-wrap:-webkit-full-screen::before,
.hls-wrap:-moz-full-screen::before,
.hls-wrap:-ms-fullscreen::before {
  display: none !important;
  padding-top: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  content: none !important;
}

/* Если fullscreen применён к самому video / video.js контейнеру (Android Chrome часто так делает) */
video:fullscreen,
video:-webkit-full-screen,
.video-js:fullscreen,
.video-js:-webkit-full-screen,
.vjs-tech:fullscreen,
.vjs-tech:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  /* Важно: заставляем fullscreen-элемент занимать весь экран (иначе видео может "прилипать" к верху) */
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
}

/* JS-страховка: классы ставятся на реальный fullscreen-элемент */
html.vit-fs,
body.vit-fs{
  background: #000 !important;
}

.hls-wrap.vit-fs-wrap{
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  background: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

video.vit-fs,
.video-js.vit-fs,
.vjs-tech.vit-fs{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
}

.hls-wrap:fullscreen video,
.hls-wrap:fullscreen .vjs-tech,
.hls-wrap:fullscreen .video-js,
.hls-wrap:-webkit-full-screen video,
.hls-wrap:-webkit-full-screen .vjs-tech,
.hls-wrap:-webkit-full-screen .video-js,
.hls-wrap:-moz-full-screen video,
.hls-wrap:-moz-full-screen .vjs-tech,
.hls-wrap:-moz-full-screen .video-js,
.hls-wrap:-ms-fullscreen video,
.hls-wrap:-ms-fullscreen .vjs-tech,
.hls-wrap:-ms-fullscreen .video-js {
  /* В fullscreen даём контейнеру (flex) центрировать видео */
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #000 !important;
  position: relative !important;
  margin: auto !important;
  padding: 0 !important;
}

/* Аналогичное центрирование для режима vjs-fullscreen */
.hls-wrap.vjs-fullscreen video,
.hls-wrap.vjs-fullscreen .vjs-tech,
.hls-wrap.vjs-fullscreen .video-js,
.video-js.vjs-fullscreen video,
.video-js.vjs-fullscreen .vjs-tech {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
  margin: auto !important;
}

/* Скрываем ВСЕ элементы управления Video.js всегда */
.hls-wrap .vjs-control-bar,
.hls-wrap .vjs-menu,
.hls-wrap .vjs-menu-button,
.hls-wrap .vjs-menu-content,
.hls-wrap .vjs-menu-item,
.hls-wrap .vjs-control,
.hls-wrap .vjs-big-play-button,
.hls-wrap .vjs-play-control,
.hls-wrap .vjs-volume-control,
.hls-wrap .vjs-time-control,
.hls-wrap .vjs-progress-control,
.hls-wrap .vjs-fullscreen-control,
.hls-wrap .vjs-picture-in-picture-control,
.hls-wrap .vjs-playback-rate,
.hls-wrap .vjs-chapters-button,
.hls-wrap .vjs-descriptions-button,
.hls-wrap .vjs-subtitles-button,
.hls-wrap .vjs-captions-button,
.hls-wrap .vjs-audio-button,
.hls-wrap .vjs-quality-selector,
.hls-wrap .vjs-text-track-display,
.hls-wrap .vjs-error-display,
.hls-wrap .vjs-loading-spinner,
.hls-wrap .vjs-modal-dialog,
.hls-wrap button,
.hls-wrap select,
.hls-wrap .vjs-control-text,
.video-js .vjs-control-bar,
.video-js .vjs-menu,
.video-js .vjs-menu-button,
.video-js .vjs-menu-content,
.video-js .vjs-menu-item,
.video-js .vjs-control,
.video-js .vjs-big-play-button,
.video-js .vjs-play-control,
.video-js .vjs-volume-control,
.video-js .vjs-time-control,
.video-js .vjs-progress-control,
.video-js .vjs-fullscreen-control,
.video-js .vjs-picture-in-picture-control,
.video-js .vjs-playback-rate,
.video-js .vjs-chapters-button,
.video-js .vjs-descriptions-button,
.video-js .vjs-subtitles-button,
.video-js .vjs-captions-button,
.video-js .vjs-audio-button,
.video-js .vjs-quality-selector,
.video-js .vjs-text-track-display,
.video-js .vjs-error-display,
.video-js .vjs-loading-spinner,
.video-js .vjs-modal-dialog,
.video-js button,
.video-js select,
.video-js .vjs-control-text{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Надпись "Toca la pantalla para activar el sonido" */
.tap-to-unmute{position:absolute !important;top:50% !important;left:50% !important;transform:translate(-50%,-50%) !important;right:auto !important;bottom:auto !important;padding:16px 20px;border-radius:10px;font-size:14px;line-height:1.4;background:rgba(0,0,0,.72);color:#fff;text-align:center;z-index:5;margin:0 !important;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;}
.tap-to-unmute.hidden{display:none !important;}
.tap-to-unmute__text{display:block;white-space:nowrap;}
.tap-to-unmute__icon{width:56px;height:56px;fill:#fff;flex-shrink:0;}

/* Центрирование надписи в полноэкранном режиме */
.hls-wrap:fullscreen .tap-to-unmute,
.hls-wrap:-webkit-full-screen .tap-to-unmute,
.hls-wrap:-moz-full-screen .tap-to-unmute,
.hls-wrap:-ms-fullscreen .tap-to-unmute{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  right:auto !important;
  bottom:auto !important;
  margin:0 !important;
}

/* Таймлайн (progress bar) */
.hls-timeline{position:absolute;left:0;right:0;bottom:0;height:20px;background:#2a2a2a;z-index:10;border-radius:4px;padding:2px;box-sizing:border-box;width:100%;}
.hls-timeline__fill{height:100%;width:0%;background:#b0b0b0;border-radius:2px;transition:none;}

/* Адаптивность */
.video-wrapper{width:100%;max-width:100%;margin:0 auto 10px;border:none !important;outline:none !important;box-shadow:none !important;}

/* Адаптивные размеры для разных разрешений */
@media (min-width:480px){
  .hls-wrap video,
  .hls-wrap .vjs-tech,
  .hls-wrap > video,
  .hls-wrap > .video-js{max-width:600px;max-height:90vh;}
  .video-wrapper{max-width:600px;}
}

@media (min-width:769px){
  .hls-wrap video,
  .hls-wrap .vjs-tech,
  .hls-wrap > video,
  .hls-wrap > .video-js{max-width:700px;max-height:85vh;}
  .video-wrapper{max-width:700px;}
}

@media (min-width:1024px){
  .hls-wrap video,
  .hls-wrap .vjs-tech,
  .hls-wrap > video,
  .hls-wrap > .video-js{max-width:800px;max-height:80vh;}
  .video-wrapper{max-width:800px;}
}

@media (min-width:1440px){
  .hls-wrap video,
  .hls-wrap .vjs-tech,
  .hls-wrap > video,
  .hls-wrap > .video-js{max-width:900px;max-height:75vh;}
  .video-wrapper{max-width:900px;}
}

@media (max-width:420px){
  .tap-to-unmute{font-size:12px;padding:12px 16px;gap:8px;}
  .tap-to-unmute__icon{width:48px;height:48px;}
}