/* ImageEvent Video.js chrome: preserve aspect ratio (contain), neutral skin, no extra branding */
.ie-video-player-wrap {
  position: relative;
  display: block;
  margin: 0 auto;
  background: #222;
  box-sizing: border-box;
  max-width: 100%;
}

.ie-video-player-wrap .video-js {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.ie-video-player-wrap .video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Fullscreen: player is reparented under .vjs-full-window; tech must use contain */
.video-js.vjs-fullscreen .vjs-tech,
.video-js.vjs-fullscreen video.vjs-tech,
.vjs-full-window .video-js.vjs-fullscreen .vjs-tech,
.vjs-full-window .video-js.vjs-fullscreen video.vjs-tech,
.video-js:-webkit-full-screen .vjs-tech,
.video-js:-webkit-full-screen video.vjs-tech,
video.vjs-tech:-webkit-full-screen {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

.ie-video-player-wrap .video-js.vjs-fluid {
  padding-top: 0 !important;
}

.ie-vjs-nobrand .vjs-logo,
.ie-video-player-wrap .vjs-logo {
  display: none !important;
}

.ie-video-player-wrap .vjs-control-bar {
  background: rgba(0, 0, 0, 0.55);
}

.ie-video-player-wrap .vjs-play-progress,
.ie-video-player-wrap .vjs-volume-level {
  background: #db0000;
}

.ie-video-player-wrap .vjs-load-progress {
  background: rgba(255, 255, 255, 0.35);
}

/*
 * Stock Video.js keeps big-play at display:block until .vjs-has-started; native
 * autoplay desyncs that. Hide in the viewer + rely on syncVjsStateFromNativeVideo
 * in ie-videojs-init.js. Prefer table.ie-viewer-main-table when scoped from JSP too.
 */
.ie-video-player-wrap .video-js .vjs-big-play-button,
table.ie-viewer-main-table .video-js .vjs-big-play-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Slideshow-deferred video: Video.js may re-show big-play at ended; keep it off. */
.ie-ss-slideshow-defer .video-js.vjs-ended .vjs-big-play-button,
.ie-ss-slideshow-defer.video-js.vjs-ended .vjs-big-play-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Mobile Safari: keep control bar above home indicator / browser chrome; viewport-fit=cover in head2.jsp supplies env() */
@media (max-width: 765px) {
  .ie-video-player-wrap .video-js .vjs-control-bar {
    bottom: env(safe-area-inset-bottom, 0px) !important;
    box-sizing: border-box;
  }

  .video-js.vjs-fullscreen .vjs-control-bar,
  .vjs-full-window .video-js.vjs-fullscreen .vjs-control-bar {
    bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* WebKit often fails height:100% when the parent only gets height from aspect-ratio; avoid grey zero-height players. */
  .ie-video-player-wrap.ie-video-wrap-responsive .video-js {
    height: auto !important;
    aspect-ratio: var(--ie-vw) / var(--ie-vh);
    min-height: 88px;
    position: relative;
  }

  .ie-video-player-wrap {
    touch-action: manipulation;
  }
}

/* Center replay: shown when clip ends; works with mouse and touch */
.ie-video-player-wrap .video-js .ie-vjs-replay,
table.ie-viewer-main-table .video-js .ie-vjs-replay,
.vjs-full-window .video-js .ie-vjs-replay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 16;
  width: 64px;
  height: 64px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.ie-video-player-wrap .video-js .ie-vjs-replay--visible,
table.ie-viewer-main-table .video-js .ie-vjs-replay--visible,
.vjs-full-window .video-js .ie-vjs-replay--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ie-video-player-wrap .video-js .ie-vjs-replay:hover,
table.ie-viewer-main-table .video-js .ie-vjs-replay:hover {
  background: rgba(0, 0, 0, 0.78);
}

.ie-video-player-wrap .video-js .ie-vjs-replay:focus {
  outline: none;
}

.ie-video-player-wrap .video-js .ie-vjs-replay:focus-visible,
table.ie-viewer-main-table .video-js .ie-vjs-replay:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.ie-video-player-wrap .video-js .ie-vjs-replay__svg,
table.ie-viewer-main-table .video-js .ie-vjs-replay__svg {
  display: block;
  margin: auto;
}

/*
 * Ended state: do not let tech or the stock play control accept pointer events until
 * playback restarts (explicit replay or otherwise). Avoids spurious replay when the
 * control bar appears under the cursor after ended.
 */
.ie-video-player-wrap .video-js.ie-vjs-ended-await-replay .vjs-tech,
table.ie-viewer-main-table .video-js.ie-vjs-ended-await-replay .vjs-tech,
.vjs-full-window .video-js.ie-vjs-ended-await-replay .vjs-tech {
  pointer-events: none !important;
}

.ie-video-player-wrap .video-js.ie-vjs-ended-await-replay .vjs-play-control,
table.ie-viewer-main-table .video-js.ie-vjs-ended-await-replay .vjs-play-control,
.vjs-full-window .video-js.ie-vjs-ended-await-replay .vjs-play-control {
  pointer-events: none !important;
}

.ie-video-player-wrap .video-js.ie-vjs-ended-await-replay .ie-vjs-replay.ie-vjs-replay--visible,
table.ie-viewer-main-table .video-js.ie-vjs-ended-await-replay .ie-vjs-replay.ie-vjs-replay--visible,
.vjs-full-window .video-js.ie-vjs-ended-await-replay .ie-vjs-replay.ie-vjs-replay--visible {
  pointer-events: auto !important;
}