/* ==========================================================================
   1. CORE LAYOUT (Zero Layout Shift)
   ========================================================================== */

/* The main wrapper dictates the space rigidly */
.bonneville-hls-player {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000000;
  border-radius: 4px;
  overflow: hidden;
}

/* Force Video.js to fill the wrapper, killing the native 'fluid' padding hack */
.bonneville-hls-player .video-js {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
  background-color: #000000; /* Use black to avoid white flashes during ad transitions */
}

/* Ensure the VAST ad container stretches properly */
.bvhls-ad-container {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.bvhls-ad-container.is-active {
  pointer-events: auto;
}

/* ==========================================================================
   2. SKIN STYLES (Keep your existing skin styles here...)
   ========================================================================== */

/* Hide Video.js default Big Play Button */
.vjs-big-play-button {
  display: none !important;
}

.bonneville-hls-player {
  position: relative;
}

.bvhls-ad-container {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.bvhls-ad-container.is-active {
  pointer-events: auto;
}

/* Root: use this skin only when we add vjs-bonneville-skin */
.video-js.vjs-bonneville-skin {
  color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Bottom docked, slim control bar with gradient */
.video-js.vjs-bonneville-skin .vjs-control-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 46px;
  padding: 0 12px 6px;

  display: flex;
  align-items: center;
  box-shadow: none;
  border-top: none;

  background: linear-gradient(to top,
      rgba(0, 0, 0, 1),
      rgba(0, 0, 0, 0));

  opacity: 1;
  transition: opacity 0.25s ease;
}

/* Fade controls out when playing & user inactive */
.video-js.vjs-bonneville-skin.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar {
  opacity: 0;
  pointer-events: none;
}

/* Keep controls visible whenever paused */
.video-js.vjs-bonneville-skin.vjs-paused .vjs-control-bar {
  opacity: 1 !important;
  pointer-events: auto;
}

/* General control buttons: flat, no extra backgrounds */
.video-js.vjs-bonneville-skin .vjs-control {
  background: transparent;
  border: 0;
  min-width: 32px;
}

/* Icon size & color */
.video-js.vjs-bonneville-skin .vjs-control .vjs-icon-placeholder:before {
  font-size: 26px;
  color: #ffffff;
}

/* Hover: simple brightness bump, no circles */
.video-js.vjs-bonneville-skin .vjs-control:hover .vjs-icon-placeholder:before {
  filter: brightness(1.3);
}

/* LEFT SIDE: play + time / LIVE text */
.video-js.vjs-bonneville-skin .vjs-play-control {
  order: 0;
}

.video-js.vjs-bonneville-skin .vjs-time-control,
.video-js.vjs-bonneville-skin .vjs-live-control {
  order: 1;
  font-size: 12px;
  margin-left: 6px;
  line-height: 1;
  color: #f5f5f5;
  align-items: center;
  font-weight: 700;
}

/* If you only want the elapsed time, hide extras */
.video-js.vjs-bonneville-skin .vjs-remaining-time,
.video-js.vjs-bonneville-skin .vjs-time-divider,
.video-js.vjs-bonneville-skin .vjs-duration {
  display: none;
}

/* MIDDLE: progress bar spanning the width */
.video-js.vjs-bonneville-skin .vjs-progress-control {
  order: 2;
  flex: 1 1 auto;
  padding: 0 12px;
}

.video-js.vjs-bonneville-skin .vjs-progress-holder {
  background-color: rgba(255, 255, 255, 0.25);
  height: 3px;
  border-radius: 999px;
  margin: 0;
}

.video-js.vjs-bonneville-skin .vjs-load-progress {
  background-color: rgba(255, 255, 255, 0.35);
}

.video-js.vjs-bonneville-skin .vjs-play-progress {
  background-color: #ffffff;
  border-radius: 999px;
}

/* Seek handle: small white dot */
.video-js.vjs-bonneville-skin .vjs-progress-control .vjs-slider-handle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffffff;
  border: none;
  top: -4px;
  /* centers on 3px track */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

/* RIGHT SIDE CLUSTER: PiP → volume → quality → fullscreen */
.video-js.vjs-bonneville-skin .vjs-picture-in-picture-control {
  order: 3;
  margin-left: 8px;
}

/* Volume group: icon + horizontal slider, no pill hover */
.video-js.vjs-bonneville-skin .vjs-volume-panel {
  order: 4;
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.video-js.vjs-bonneville-skin .vjs-mute-control {
  margin-right: 4px;
}

.video-js.vjs-bonneville-skin .vjs-volume-bar {
  width: 60px;
  height: 3px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.3);
}

.video-js.vjs-bonneville-skin .vjs-volume-level {
  background-color: #ffffff;
  border-radius: 999px;
}

.video-js.vjs-bonneville-skin .vjs-volume-bar .vjs-slider-handle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ffffff;
  top: -3px;
}

/* Quality / hlsQualitySelector button ("auto") */
.video-js.vjs-bonneville-skin .vjs-menu-button {
  order: 5;
  margin-left: 10px;
}

/* Fullscreen on the far right */
.video-js.vjs-bonneville-skin .vjs-fullscreen-control {
  order: 6;
  margin-left: 6px;
}

/* Quality menu styling */
.video-js.vjs-bonneville-skin .vjs-menu-button-popup .vjs-menu-content {
  background-color: #222;
  border-radius: 4px;
  border: 1px solid #444;
  padding: 4px 0;
}

.video-js.vjs-bonneville-skin .vjs-menu-button-popup .vjs-menu-item {
  font-size: 12px;
  padding: 4px 12px;
  color: #eee;
}

.video-js.vjs-bonneville-skin .vjs-menu-button-popup .vjs-menu-item.vjs-selected {
  background-color: #555;
  color: #fff;
}

/* Kill big play button entirely */
.video-js.vjs-bonneville-skin .vjs-big-play-button {
  display: none !important;
}

.vjs-icon-placeholder{
  font-weight: 700;
  font-size: 12px;
}

/* ==========================================================================
   3. SKELETON LOADING STATE
   ========================================================================== */

/* The spinning wheel (Mimics native Video.js spinner) */
.bonneville-hls-player.bonneville-is-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  margin-left: -25px;
  border: 5px solid rgba(255, 255, 255, 0.2);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: vjs-mimic-spin 1s linear infinite;
  z-index: 10;
}

@keyframes vjs-mimic-spin {
  100% { transform: rotate(360deg); }
}

/* Hide the inner elements while loading so they don't flash unstyled */
.bonneville-hls-player.bonneville-is-loading .video-js,
.bonneville-hls-player.bonneville-is-loading video {
  opacity: 0;
  pointer-events: none;
}