/**
 * Custom Video.js Theme - CG Africa Orange Branding
 * Primary brand color: #F26522
 */

/* Big play button - centered */
.video-js .vjs-big-play-button {
  background-color: #F26522;
  border-color: #F26522;
  border-radius: 50%;
  width: 2em;
  height: 2em;
  line-height: 2em;
  font-size: 3em;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.video-js .vjs-big-play-button:hover {
  background-color: #d95419;
  border-color: #d95419;
  transform: translate(-50%, -50%) scale(1.1);
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  font-size: 1em;
}

/* Control bar */
.video-js .vjs-control-bar {
  background: rgba(242, 101, 34, 0.7);
  backdrop-filter: blur(8px);
}

.video-js:hover .vjs-control-bar {
  background: rgba(242, 101, 34, 0.85);
}

/* Play progress bar */
.video-js .vjs-play-progress {
  background-color: #F26522;
}

.video-js .vjs-play-progress:before {
  color: #F26522;
  text-shadow: 0 0 10px rgba(242, 101, 34, 0.8);
}

/* Volume level */
.video-js .vjs-volume-level {
  background-color: #F26522;
}

/* Slider handle */
.video-js .vjs-slider-handle {
  background-color: #F26522;
}

/* Loading spinner */
.video-js .vjs-loading-spinner {
  border-color: rgba(242, 101, 34, 0.8);
}

.video-js .vjs-loading-spinner:before,
.video-js .vjs-loading-spinner:after {
  border-color: #F26522 transparent transparent transparent;
}

/* Control buttons hover effects */
.video-js .vjs-control:hover {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(242, 101, 34, 0.8);
}

/* Progress holder */
.video-js .vjs-progress-holder {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Slider background */
.video-js .vjs-slider {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Time tooltip */
.video-js .vjs-time-tooltip {
  background-color: #F26522;
  color: white;
  border-radius: 4px;
  padding: 4px 8px;
}

/* Fullscreen toggle hover */
.video-js .vjs-fullscreen-control:hover {
  color: #F26522;
}

/* Responsive sizing */
.video-js {
  font-size: 14px;
  color: #ffffff;
}

/* Error display */
.video-js .vjs-error-display {
  background-color: rgba(0, 0, 0, 0.9);
}

.video-js .vjs-error-display:before {
  color: #F26522;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .video-js .vjs-big-play-button {
    font-size: 2.5em;
  }
  
  .video-js {
    font-size: 12px;
  }
}

/* Ensure proper aspect ratio */
.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3 {
  width: 100%;
  max-width: 100%;
  height: 100%;
}

/* Poster image */
.video-js .vjs-poster {
  background-size: cover;
  background-position: center;
}

/* Text track display */
.video-js .vjs-text-track-display {
  pointer-events: none;
}

/* Custom scrollbar for menus */
.video-js .vjs-menu-content {
  scrollbar-width: thin;
  scrollbar-color: #F26522 rgba(255, 255, 255, 0.1);
}

.video-js .vjs-menu-content::-webkit-scrollbar {
  width: 8px;
}

.video-js .vjs-menu-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.video-js .vjs-menu-content::-webkit-scrollbar-thumb {
  background-color: #F26522;
  border-radius: 4px;
}