/* Halton Video Optimizer - Complete CSS Styles */

/* ===== VIDEO.JS PLAYER STYLES ===== */

/* Make the video background black for all states - target all possible elements */
.video-js,
.video-js .vjs-tech,
.video-js video,
video,
[data-video-thumbnail] video,
.video-container video,
.video-wrapper video {
  background-color: #000000 !important;
  background-image: none !important; /* Remove any thumbnail image */
}

/* Ensure the video element itself has black background */
.video-js video {
  background-color: #000000 !important;
  object-fit: cover !important; /* Ensure video fills the container */
}

/* Target the video container directly */
.video-js.vjs-paused,
.video-js.vjs-playing,
.video-js.vjs-waiting {
  background-color: #000000 !important;
}

/* Remove any poster background images */
.video-js .vjs-poster {
  background-image: none !important;
  background-color: #000000 !important;
}

/* Style the big play button with white text and gray background */
.vjs-big-play-button {
  background-color: #666666 !important; /* Gray background */
  border: none !important;
  border-radius: 50% !important;
  width: 80px !important;
  margin-top: 0em !important;
  margin-left: 0em !important;
  height: 80px !important;
  line-height: 80px !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  transition: all 0.3s ease !important;
}

/* Play button triangle icon */
.vjs-big-play-button .vjs-icon-placeholder:before {
  color: #ffffff !important; /* White play icon */
  font-size: 30px !important;
  line-height: 80px !important;
  text-shadow: none !important;
}

/* Hover state for play button */
.vjs-big-play-button:hover {
  background-color: #888888 !important; /* Lighter gray on hover */
  transform: translate(-50%, -50%) scale(1.1) !important;
}

/* Focus state for accessibility */
.vjs-big-play-button:focus {
  outline: 2px solid #ffffff !important;
  outline-offset: 2px !important;
}

/* Ensure the poster maintains solid black background - no thumbnail when not playing */
.vjs-poster {
  background-color: #000000 !important;
  background-image: none !important; /* Remove thumbnail image */
  opacity: 1 !important; /* Full opacity for solid black background */
  display: block !important; /* Ensure poster is visible */
}

/* Hide poster when video is playing or has started */
.vjs-has-started .vjs-poster,
.vjs-playing .vjs-poster {
  display: none !important;
  opacity: 0 !important;
}

/* Additional targeting for common video containers */
[data-video-thumbnail],
.video-container,
.video-wrapper {
  background-color: #000000 !important;
}

/* Force black background on absolutely everything video-related */
video:not(.video-js),
video.video-js,
.vjs-poster,
.video-js .vjs-poster,
.vjs-loading-spinner,
.video-js .vjs-loading-spinner {
  background-color: #000000 !important;
  background-image: none !important;
}

/* Ensure any thumbnail images are hidden */
[data-video-thumbnail] .video-thumbnail-image,
.video-thumbnail-overlay {
  display: none !important;
}

/* Make sure the video element is visible with black background when not playing */
[data-video-thumbnail] video {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  background-color: #000000 !important;
}

/* Allow video content to show when playing */
.vjs-has-started [data-video-thumbnail] video,
.vjs-playing [data-video-thumbnail] video {
  background-color: transparent !important;
}

/* Force black background on all video-related elements when not playing */
.vjs-tech,
.video-js .vjs-tech {
  background-color: #000000 !important;
  background-image: none !important;
}

/* Allow actual video content to show when playing */
.vjs-has-started .vjs-tech,
.vjs-playing .vjs-tech {
  background-color: transparent !important;
}

/* Loading spinner styling */
.vjs-loading-spinner {
  border-color: #ffffff !important;
  border-top-color: transparent !important;
}

/* Control bar styling */
.vjs-control-bar {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7),
    transparent
  ) !important;
}

/* Progress bar styling */
.vjs-progress-holder {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.vjs-play-progress {
  background-color: #ffffff !important;
}

/* All control buttons - white icons */
.vjs-control-bar .vjs-button .vjs-icon-placeholder:before,
.vjs-menu-button .vjs-icon-placeholder:before,
.vjs-play-control .vjs-icon-placeholder:before,
.vjs-mute-control .vjs-icon-placeholder:before,
.vjs-fullscreen-control .vjs-icon-placeholder:before,
.vjs-picture-in-picture-control .vjs-icon-placeholder:before,
.vjs-playback-rate .vjs-icon-placeholder:before {
  color: #ffffff !important;
}

/* Time display styling - white text */
.vjs-time-control,
.vjs-current-time-display,
.vjs-duration-display,
.vjs-remaining-time-display {
  color: #ffffff !important;
}

/* Volume control styling - white elements */
.vjs-volume-level,
.vjs-volume-bar:before {
  background-color: #ffffff !important;
}

/* Menu items - white text */
.vjs-menu-content .vjs-menu-item,
.vjs-playback-rate-value {
  color: #ffffff !important;
}

/* Slider controls - white handles and progress */
.vjs-slider:before,
.vjs-volume-bar .vjs-volume-level:before {
  color: #ffffff !important;
}

/* Seek bar handle - white */
.vjs-progress-control .vjs-progress-holder .vjs-play-progress:before {
  color: #ffffff !important;
}

/* Ultimate fallback - force black background on video elements when not playing */
video,
video[src*='.mp4'],
video[src*='.webm'],
video[src*='.mov'],
video[data-setup] {
  background-color: #000000 !important;
  background-image: none !important;
}

/* Allow video content to show when playing */
.vjs-has-started video,
.vjs-playing video {
  background-color: transparent !important;
}

/* ===== VIDEO LOADING INDICATOR STYLES ===== */

/* Video loading indicator styles */
.video-loading-indicator {
  pointer-events: none;
  z-index: 20;
}

.video-loading-indicator .loading-spinner {
  animation: spin 1s linear infinite;
}

/* Make sure the indicator is visible over video */
.video-loading-indicator > div {
  backdrop-filter: blur(2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ===== THUMBNAIL COMPONENT STYLES ===== */

/* Video Thumbnail Component Styles */
.video-thumbnail-overlay {
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.video-thumbnail-overlay:hover {
  transform: scale(1.05);
}

.video-thumbnail-overlay:focus {
  transform: scale(1.05);
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.video-thumbnail-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.video-thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-in-out;
}

.video-thumbnail-overlay:hover .video-thumbnail-image {
  transform: scale(1.1);
}

.video-thumbnail-overlay-bg {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease;
}

.video-thumbnail-overlay:hover .video-thumbnail-overlay-bg {
  background-color: rgba(0, 0, 0, 0.2);
}

.video-thumbnail-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4rem;
  height: 4rem;
  background-color: rgba(255, 255, 255, 0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease-in-out;
}

.video-thumbnail-play-button:hover {
  background-color: rgba(255, 255, 255, 1);
  transform: translate(-50%, -50%) scale(1.1);
}

.video-thumbnail-play-icon {
  width: 2rem;
  height: 2rem;
  color: #374151;
  margin-left: 0.25rem;
}

.video-thumbnail-title {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.75rem;
  border-radius: 0.25rem;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Loading State */
.video-thumbnail-overlay.loading .video-thumbnail-play-button {
  opacity: 0;
}

.video-thumbnail-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.video-thumbnail-spinner {
  width: 2rem;
  height: 2rem;
  border: 4px solid white;
  border-top: 4px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.video-thumbnail-loading-text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Error State */
.video-thumbnail-overlay.error .video-thumbnail-play-button {
  opacity: 0;
}

.video-thumbnail-error {
  color: #fca5a5;
  text-align: center;
  padding: 0 1rem;
}

/* Animation for spinner */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
  .vjs-big-play-button {
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important;
  }

  .vjs-big-play-button .vjs-icon-placeholder:before {
    font-size: 24px !important;
    line-height: 60px !important;
  }

  .video-thumbnail-play-button {
    width: 5rem;
    height: 5rem;
  }
  
  .video-thumbnail-play-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
  
  .video-thumbnail-title {
    font-size: 1rem;
  }
}

@media (max-width: 640px) {
  .video-thumbnail-play-button {
    width: 3rem;
    height: 3rem;
  }
  
  .video-thumbnail-play-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  .video-thumbnail-title {
    font-size: 0.75rem;
    bottom: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    padding: 0.5rem 0.75rem;
  }
}

@media (max-width: 480px) {
  .vjs-big-play-button {
    width: 50px !important;
    height: 50px !important;
    line-height: 50px !important;
  }

  .vjs-big-play-button .vjs-icon-placeholder:before {
    font-size: 20px !important;
    line-height: 50px !important;
  }
}

/* Accessibility improvements */
.video-thumbnail-overlay:focus-visible {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.75);
}