
/* Custom Plyr Styles */

/* Make sure Plyr is responsive within container */
.plyr {
  width: 100%;
  height: 100%;
}

/* Customize Plyr controls colors to match app theme */
:root {
  --plyr-color-main: #ffffff; /* Changed to white */
  --plyr-video-control-color: white;
  --plyr-video-control-color-hover: #cccccc; /* Changed to light grey */
  --plyr-video-control-background-hover: rgba(26, 31, 44, 0.8);
  --plyr-audio-control-background-hover: rgba(26, 31, 44, 0.8);
  --plyr-video-control-radius: 4px;
  --plyr-range-thumb-background: #ffffff; /* Changed to white */
  --plyr-range-fill-background: #ffffff; /* Changed to white */
}

/* Control spacing */
.plyr--video .plyr__controls {
  padding: 12px;
}

/* Improve contrast for captions */
.plyr__captions {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  padding: 4px 8px;
}

/* Fullscreen mode improvements */
.plyr--fullscreen-active .plyr__control--exit-fullscreen {
  position: absolute;
  right: 10px;
  top: 10px;
}

/* Loading indicator */
.plyr--loading .plyr__controls {
  opacity: 0;
}

/* Buffering indicator */
.plyr__progress__buffer {
  background-color: rgba(255, 255, 255, 0.25);
}

/* Progress hover preview */
.plyr__tooltip {
  background: rgba(26, 31, 44, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Custom focus styles */
.plyr__control:focus {
  outline: 2px solid var(--plyr-video-control-color-hover); /* Changed to use monochromatic hover color */
  outline-offset: 2px;
}

/* Time display */
.plyr__time {
  font-size: 13px;
  font-weight: 500;
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .plyr--video .plyr__controls {
    padding: 8px;
  }
  
  .plyr__time {
    display: none;
  }
  
  .plyr__volume {
    max-width: 60px;
  }
}
