/**
 * Stable 16:9 / vertical player layout for direct hosted Zype embeds.
 * Scoped to .zype-player-embed — no html/body/video/iframe global rules.
 */

.zype-player-embed {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.zype-player-embed .zype-player-embed__frame,
.zype-player-embed .video-player,
.zype-player-embed .zype_player_container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b0b0b;
  overflow: hidden;
}

.zype-player-embed.is-vertical .zype-player-embed__frame,
.zype-player-embed.is-vertical .video-player,
.zype-player-embed.is-vertical .zype_player_container,
.zype_video--vertical .zype-player-embed .zype-player-embed__frame,
.zype_video--vertical .zype-player-embed .video-player,
.zype_video--vertical .zype-player-embed .zype_player_container {
  aspect-ratio: 9 / 16;
  max-width: var(--zype-vertical-player-max-width, 500px);
  margin-inline: auto;
}

.zype-player-embed .zype_player_container img.placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Details Backdrop as Bitmovin poster artwork.
 * Hosted embed.js has no poster URL param; JS sets --zype-player-poster and
 * rewrites video.poster + .bitmovinplayer-poster (the visible surface in Zype's
 * Bitmovin build). Prefer the player's own surface over a plugin overlay.
 */
.zype-player-embed[data-zype-player-poster] .bitmovinplayer-poster,
.zype-player-embed[data-zype-player-poster] .bmpui-ui-poster,
.zype-player-embed[data-zype-player-poster] .bmpui-ui-posterimage,
.zype-player-embed[data-zype-player-poster] [class*="bmpui-ui-poster"] {
  background-image: var(--zype-player-poster) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.zype-player-embed .zype-player-embed__frame .zype_player,
.zype-player-embed .video-player .zype_player,
.zype-player-embed .video-player [id^="zype_"],
.zype-player-embed .zype_player_container .zype_player,
.zype-player-embed .zype_player_container [id^="zype_"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.zype-player-embed .bitmovinplayer-container {
  z-index: 1;
}

.zype-player-embed .preview-video-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}