/* ImageEvent Video.js chrome: preserve aspect ratio (contain), neutral skin, no extra branding */
.ie-video-player-wrap {
  position: relative;
  display: block;
  margin: 0 auto;
  /* Use album image-area color (set as --ie-video-bg on the wrap, else transparent → TD bgcolor). */
  background: var(--ie-video-bg, transparent);
  box-sizing: border-box;
  max-width: 100%;
  /* Keeps HDR video compositing stable when ancestors use borders/hover chrome (Chrome).
   * Disabled on iOS below — isolation + overflow creates a black inline video layer there. */
  isolation: isolate;
}

/* iOS Safari / WebKit: stacking isolation often paints inline <video> as black until fullscreen. */
@supports (-webkit-touch-callout: none) {
  .ie-video-player-wrap {
    isolation: auto;
  }
}

.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;
}

/*
 * Viewer responsive clips (pic_include48_viewer): use --ie-vw/--ie-vh on the wrap, not viewport.
 * Keep control bar clear of home indicator where env() is non-zero; harmless on desktop.
 */
table.ie-viewer-main-table .ie-video-player-wrap.ie-video-wrap-responsive .video-js .vjs-control-bar {
  bottom: env(safe-area-inset-bottom, 0px) !important;
  box-sizing: border-box;
}

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

/*
 * Enhanced (responsive): wrap already has pixel size + --ie-vw/--ie-vh.
 * v10.0.1 uses video-player { display:contents }, so size video-skin (not .video-js).
 * Absolute-fill restored for Chrome / v10 — do not apply to Safari native fallback.
 */
table.ie-viewer-main-table .ie-video-player-wrap.ie-video-wrap-responsive {
  touch-action: manipulation;
  position: relative;
  min-height: 88px;
  height: auto !important;
  aspect-ratio: var(--ie-vw, 16) / var(--ie-vh, 9);
}

/* Direct <video> (Safari native / pre-mount): never keep desktop height attrs on first paint. */
table.ie-viewer-main-table .ie-video-player-wrap.ie-video-wrap-responsive > video.video-js,
table.ie-viewer-main-table .ie-video-player-wrap.ie-video-wrap-responsive > video {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: var(--ie-vw, 16) / var(--ie-vh, 9);
  object-fit: contain !important;
  background: var(--ie-video-bg, transparent) !important;
}

table.ie-viewer-main-table .ie-video-player-wrap.ie-video-wrap-responsive video-skin {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  box-sizing: border-box;
}

/*
 * Safari-only native <video> (class set by ie-videojs-init.js).
 * Center with justify-content (not ::before/::after spacers — those pin Safari low).
 * Background stays theme-colored via --ie-video-bg / transparent.
 */
.ie-video-player-wrap.ie-video-native-ios,
table.ie-viewer-main-table .ie-video-player-wrap.ie-video-native-ios {
  display: block !important;
  position: relative !important;
  isolation: auto !important;
  overflow: visible !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  aspect-ratio: var(--ie-vw, 16) / var(--ie-vh, 9);
  background: var(--ie-video-bg, transparent) !important;
}

.ie-video-player-wrap.ie-video-native-ios video,
table.ie-viewer-main-table .ie-video-player-wrap.ie-video-native-ios video {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: var(--ie-vw, 16) / var(--ie-vh, 9);
  object-fit: contain !important;
  background: var(--ie-video-bg, transparent) !important;
  margin: 0 auto !important;
  transform: none !important;
  -webkit-transform: none !important;
}

table.ie-viewer-main-table > tbody > tr:first-child > td.ie-viewer-main-td--video:has(.ie-video-native-ios) {
  vertical-align: middle !important;
}

/*
 * Safari native center: kill stage ::before/::after spacers (Safari flex-grows ::before only
 * → pins video to the bottom). First-paint height comes from aspect-ratio (not desktop px attrs).
 */
table.ie-viewer-main-table > tbody > tr:first-child > td.ie-viewer-main-td--video
  > .ie-viewer-stage.ie-viewer-stage--with-meta.ie-video-stage-ios-center,
table.ie-viewer-main-table > tbody > tr:first-child > td
  > .ie-viewer-stage.ie-viewer-stage--with-meta.ie-video-stage-ios-center,
.ie-viewer-stage.ie-video-stage-ios-center {
  min-height: min(72vh, calc(100svh - 120px), calc(100dvh - 120px)) !important;
  justify-content: center !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

table.ie-viewer-main-table > tbody > tr:first-child > td.ie-viewer-main-td--video
  > .ie-viewer-stage.ie-viewer-stage--with-meta::before,
table.ie-viewer-main-table > tbody > tr:first-child > td.ie-viewer-main-td--video
  > .ie-viewer-stage.ie-viewer-stage--with-meta::after,
table.ie-viewer-main-table > tbody > tr:first-child > td
  > .ie-viewer-stage.ie-viewer-stage--with-meta.ie-video-stage-ios-center::before,
table.ie-viewer-main-table > tbody > tr:first-child > td
  > .ie-viewer-stage.ie-viewer-stage--with-meta.ie-video-stage-ios-center::after,
.ie-viewer-stage.ie-video-stage-ios-center::before,
.ie-viewer-stage.ie-video-stage-ios-center::after {
  content: none !important;
  display: none !important;
  flex: 0 0 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

.ie-viewer-stage.ie-video-stage-ios-center table.ie-viewer-video-host,
.ie-viewer-stage.ie-video-stage-ios-center table.ie-viewer-video-host td {
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Mobile global `.pplayer{height:auto}` must not collapse the Video.js host. */
.ie-video-player-wrap.pplayer {
  max-width: 100%;
}

/* 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;
}

/* Viewer Original (pic_include48): cap width to container or native pixels — no svh cap so full 4K shows when the window is large enough; page may scroll vertically */
table.ie-viewer-video-host--original {
    max-width: 100%;
    min-width: 0;
    height: auto !important;
}

table.ie-viewer-video-host--original .ie-video-player-wrap {
    width: 100% !important;
    max-width: min(100%, calc(var(--ie-vw, 1280) * 1px)) !important;
    min-width: 0;
    height: auto !important;
    aspect-ratio: var(--ie-vw, 1280) / var(--ie-vh, 720);
    box-sizing: border-box;
    overflow: visible;
    position: relative;
}

/* Original: wrap owns aspect-ratio; skin fills that box (video-player is display:contents). */
table.ie-viewer-video-host--original .ie-video-player-wrap video-skin {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    position: relative;
    box-sizing: border-box;
}

/*
 * 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;
}

/*
 * Video.js 10.0.1+ custom-element layout:
 * Official skin sets video-player { display:contents }. Sizing must live on the wrap
 * and video-skin / media-container, or the frame collapses to a black empty box.
 */
.ie-video-player-wrap video-player,
table.ie-viewer-main-table .ie-video-player-wrap video-player {
  display: contents;
  border-radius: 0 !important;
  --media-border-radius: 0 !important;
  --media-video-border-radius: 0 !important;
}

.ie-video-player-wrap video-skin,
table.ie-viewer-main-table .ie-video-player-wrap video-skin {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  box-sizing: border-box;
  border-radius: 0 !important;
  --media-border-radius: 0 !important;
  --media-video-border-radius: 0 !important;
  --media-controls-border-radius: 0 !important;
}

.ie-video-player-wrap video-player video,
.ie-video-player-wrap video-skin video,
table.ie-viewer-main-table .ie-video-player-wrap video-player video,
table.ie-viewer-main-table .ie-video-player-wrap video-skin video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center;
  border-radius: 0 !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  background: transparent !important;
}

/* v10 video-player is display:contents — ignore height:auto/aspect-ratio aimed at .video-js. */
table.ie-viewer-main-table .ie-video-player-wrap.ie-video-wrap-responsive video-player.video-js {
  height: auto !important;
  aspect-ratio: auto !important;
}

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

.ie-video-player-wrap video-player .ie-vjs-replay,
table.ie-viewer-main-table video-player .ie-vjs-replay,
.vjs-full-window video-player .ie-vjs-replay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 16;
}

/* v10 center play control (YouTube-like overlay) */
.ie-video-player-wrap video-player .ie-v10-center-play,
table.ie-viewer-main-table video-player .ie-v10-center-play,
.vjs-full-window video-player .ie-v10-center-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 18;
  width: 68px;
  height: 68px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.16s ease, visibility 0.16s ease, background 0.14s ease;
}

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

.ie-video-player-wrap video-player .ie-v10-center-play--animating,
table.ie-viewer-main-table video-player .ie-v10-center-play--animating,
.vjs-full-window video-player .ie-v10-center-play--animating {
  pointer-events: none;
}

.ie-video-player-wrap video-player .ie-v10-center-play:hover,
table.ie-viewer-main-table video-player .ie-v10-center-play:hover {
  background: rgba(0, 0, 0, 0.74);
}

.ie-video-player-wrap video-player .ie-v10-center-play__svg,
table.ie-viewer-main-table video-player .ie-v10-center-play__svg,
.vjs-full-window video-player .ie-v10-center-play__svg {
  position: absolute;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform-origin: 50% 50%;
}

.ie-video-player-wrap video-player .ie-v10-center-play__svg--play,
table.ie-viewer-main-table video-player .ie-v10-center-play__svg--play,
.vjs-full-window video-player .ie-v10-center-play__svg--play {
  opacity: 1;
  transform: scale(1);
}

.ie-video-player-wrap video-player .ie-v10-center-play__svg--pause,
table.ie-viewer-main-table video-player .ie-v10-center-play__svg--pause,
.vjs-full-window video-player .ie-v10-center-play__svg--pause {
  opacity: 0;
  transform: scale(0.82);
}

.ie-video-player-wrap video-player .ie-v10-center-play--playing .ie-v10-center-play__svg--play,
table.ie-viewer-main-table video-player .ie-v10-center-play--playing .ie-v10-center-play__svg--play,
.vjs-full-window video-player .ie-v10-center-play--playing .ie-v10-center-play__svg--play {
  opacity: 0;
  transform: scale(0.82);
}

.ie-video-player-wrap video-player .ie-v10-center-play--playing .ie-v10-center-play__svg--pause,
table.ie-viewer-main-table video-player .ie-v10-center-play--playing .ie-v10-center-play__svg--pause,
.vjs-full-window video-player .ie-v10-center-play--playing .ie-v10-center-play__svg--pause {
  opacity: 1;
  transform: scale(1);
}

/*
 * v10 fullscreen: often the fullscreen element is media-container inside video-skin shadow.
 * Keep light-DOM fallbacks when video-player/video-skin themselves are fullscreen.
 */
video-player.video-js:fullscreen,
video-player.video-js:-webkit-full-screen,
video-skin:fullscreen,
video-skin:-webkit-full-screen {
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  aspect-ratio: unset !important;
  box-sizing: border-box;
  background: #000;
}

video-player.video-js:fullscreen video-skin,
video-player.video-js:-webkit-full-screen video-skin {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

video-player.video-js:fullscreen video,
video-player.video-js:-webkit-full-screen video,
video-skin:fullscreen video,
video-skin:-webkit-full-screen video {
  object-fit: contain !important;
  object-position: center !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
}

table.ie-viewer-main-table .ie-video-player-wrap.ie-video-wrap-responsive video-player.video-js:fullscreen,
table.ie-viewer-main-table .ie-video-player-wrap.ie-video-wrap-responsive video-player.video-js:-webkit-full-screen,
table.ie-viewer-video-host--original .ie-video-player-wrap video-player.video-js:fullscreen,
table.ie-viewer-video-host--original .ie-video-player-wrap video-player.video-js:-webkit-full-screen {
  height: 100vh !important;
  width: 100vw !important;
  aspect-ratio: unset !important;
}

/* Keep video full brightness when controls show: limit skin backdrop to bottom strip (2026-11-04) */
.media-skin .video-controls-backdrop{top:auto!important;bottom:0!important;height:110px!important;max-height:45%!important;background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))!important;}