/* Когда включены нативные контролы — прячем кастомные */
.player--native .player-center-toggle,
.player--native .player-leftctrl,
.player--native .player-progress{
  display: none !important;
}

/* Контейнер медиаблока в модалке: прижат вправо, растягиваем по высоте */
.review-modal.video-mode .review-modal-media{
  display: flex;
  justify-content: flex-end;
  align-items: stretch;      /* ключ: тянем по высоте */
  gap: 0;
  overflow: visible;         /* чтобы рейка громкости могла выступать */
}

/* Плеер во всю ширину контейнера */
.review-modal.video-mode .review-modal-media .player{
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 0;
  min-width: 0;
}

/* Левая рейка громкости — фикс ширина */
.review-modal.video-mode .player-rail{
  flex: 0 0 28px;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
}

/* Поверхность видео — заполняет оставшееся место, не вылезает */
.review-modal.video-mode .player-surface{
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  overflow: hidden;          /* обрезаем по радиусу контейнера */
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 9 / 16;      /* держим вертикальную пропорцию внутри модалки */
}

/* Картинка/видео — занимают 100% высоты коробки (без пустот) */
.review-modal.video-mode .player-video,
.review-modal.video-mode .player-thumb{
  width: 100% !important;
  height: 100% !important;           /* ключ: заполняем высоту контейнера */
  object-fit: cover !important;      /* без «полос» по краям */
  display: block;
  border-radius: inherit;
}

/* ====== Полноэкранный режим: видео на всю высоту экрана ====== */
.player-video:fullscreen,
.player-video:-webkit-full-screen,
.player-video:-moz-full-screen,
.player-video:-ms-fullscreen{
  height: 100vh !important;          /* вся высота экрана */
  width: auto !important;            /* ширина подстраивается */
  max-width: 100vw !important;       /* не шире экрана */
  object-fit: contain !important;    /* без обрезки в фуллскрине */
  display: block;
  margin: 0 auto;
  background: #000;
}

/* чтобы aspect-ratio контейнера не влиял в полноэкранном режиме */
:fullscreen .player-surface,
:-webkit-full-screen .player-surface,
:-moz-full-screen .player-surface,
:-ms-fullscreen .player-surface{
  aspect-ratio: auto !important;
}

/* На время fullscreen скрываем скролл модалки */
.review-modal:has(.player-video:fullscreen),
.review-modal:has(.player-video:-webkit-full-screen){
  overflow: hidden;
}

/* === Узкий вертикальный ползунок громкости 50×2, белая «черта» 6×2 === */
.review-modal .player-rail .player-volume{
  height: 50px !important;
  width: 2px !important;
  margin: 0 !important;
  background: transparent;
  outline: 0;
  -webkit-appearance: slider-vertical !important;
  appearance: slider-vertical !important;
  accent-color: transparent;
}
.review-modal .player-rail .player-volume::-webkit-slider-runnable-track{
  width: 2px;
  background: rgba(255,255,255,.35);
  border-radius: 999px;
}
.review-modal .player-rail .player-volume::-webkit-slider-thumb{
  -webkit-appearance: none !important;
  width: 6px !important;
  height: 2px !important;            /* белая горизонтальная «черточка» */
  background: #fff !important;
  border: 0 !important;
  border-radius: 1px !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* Firefox */
@supports not (-webkit-appearance: slider-vertical){
  .review-modal .player-rail .player-volume[orient="vertical"]{
    appearance: auto !important;
    writing-mode: vertical-lr !important;
    transform: rotate(180deg) !important; /* чтобы 0 был снизу */
    height: 50px !important;
    width: 2px !important;
  }
  .review-modal .player-rail .player-volume::-moz-range-track{
    width: 2px;
    background: rgba(255,255,255,.35);
    border-radius: 999px;
  }
  .review-modal .player-rail .player-volume::-moz-range-thumb{
    width: 6px !important;
    height: 2px !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 1px !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
}