/* Luminova Video.js Custom Skin */
/* Based on Video.js default skin, customized to match Luminova branding */

.video-js {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #d6e0ff;
}

/* Control Bar */
.video-js .vjs-control-bar {
  background: linear-gradient(135deg, rgba(0,229,168,0.1), rgba(59,130,246,0.1));
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.06);
  height: 48px;
}

/* Play Button */
.video-js .vjs-play-control,
.video-js .vjs-play-control:hover,
.video-js .vjs-play-control:focus {
  color: #00e5a8;
  background: transparent;
  border: none;
}

.video-js .vjs-play-control:before {
  content: "\f04b"; /* Play icon */
  font-family: VideoJS;
}

.video-js .vjs-paused .vjs-play-control:before {
  content: "\f04c"; /* Pause icon */
}

/* Progress Bar */
.video-js .vjs-progress-control {
  background: rgba(255,255,255,0.12);
  height: 4px;
  border-radius: 2px;
}

.video-js .vjs-play-progress {
  background: linear-gradient(135deg, #00e5a8, #3b82f6);
  border-radius: 2px;
}

.video-js .vjs-progress-holder {
  height: 100%;
}

.video-js .vjs-load-progress {
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
}

/* Time Display */
.video-js .vjs-current-time,
.video-js .vjs-duration {
  color: #d6e0ff;
  font-size: 14px;
  font-weight: 500;
}

/* Volume Controls */
.video-js .vjs-volume-panel {
  background: transparent;
}

.video-js .vjs-volume-control,
.video-js .vjs-mute-control {
  color: #00e5a8;
}

.video-js .vjs-volume-bar {
  background: rgba(255,255,255,0.12);
  height: 4px;
  border-radius: 2px;
}

.video-js .vjs-volume-level {
  background: #00e5a8;
  border-radius: 2px;
}

/* Fullscreen and Settings */
.video-js .vjs-fullscreen-control,
.video-js .vjs-picture-in-picture-control,
.video-js .vjs-settings-control {
  color: #8aa0b9;
}

.video-js .vjs-fullscreen-control:hover,
.video-js .vjs-picture-in-picture-control:hover,
.video-js .vjs-settings-control:hover {
  color: #00e5a8;
}

/* Big Play Button */
.video-js .vjs-big-play-button {
  background: rgba(0,229,168,0.2);
  border: 2px solid #00e5a8;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  font-size: 32px;
  color: #00e5a8;
  transition: all 0.2s ease;
}

.video-js .vjs-big-play-button:hover {
  background: rgba(0,229,168,0.3);
  transform: scale(1.05);
}

.video-js .vjs-big-play-button:before {
  content: "\f01d";
  font-family: VideoJS;
  position: relative;
  left: 2px;
}

/* Menu */
.video-js .vjs-menu {
  background: #161d26;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

.video-js .vjs-menu-item {
  color: #d6e0ff;
}

.video-js .vjs-menu-item:hover {
  background: rgba(0,229,168,0.1);
  color: #00e5a8;
}

.video-js .vjs-selected {
  background: rgba(0,229,168,0.2);
  color: #00e5a8;
}

/* Loading Spinner */
.video-js .vjs-loading-spinner {
  border-color: #00e5a8;
}

/* Error Display */
.video-js .vjs-error-display {
  background: rgba(22,29,38,0.9);
  color: #d6e0ff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
  .video-js .vjs-control-bar {
    height: 44px;
  }

  .video-js .vjs-big-play-button {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }
}