/* Video.js Custom Styling for Dark Theme */

/* Main player container */
.video-js {
  background-color: #000000 !important;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Control bar styling */
.video-js .vjs-control-bar {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent) !important;
  color: #ffffff !important;
}

/* Button styling */
.video-js .vjs-button > .vjs-icon-placeholder:before,
.video-js .vjs-button:before {
  color: #ffffff !important;
}

.video-js .vjs-button:hover {
  color: #60a5fa !important; /* Light blue hover color */
}

/* Progress bar styling */
.video-js .vjs-progress-control .vjs-progress-holder {
  background-color: rgba(255, 255, 255, 0.3) !important;
  height: 0.5em !important; /* Consistent height */
  position: relative !important;
}

/* Timeline Markers Styling - Enhanced */
.vjs-timeline-markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.vjs-timeline-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background-color: #3b82f6; /* Blue color */
  border: 2px solid #ffffff;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  z-index: 20;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Create a larger invisible click area */
.vjs-timeline-marker::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background: transparent;
  border-radius: 50%;
  z-index: -1;
}

.vjs-timeline-marker:hover {
  transform: translate(-50%, -50%) scale(1.5);
  background-color: #2563eb;
  border-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(59, 130, 246, 0.3);
  z-index: 25;
}

/* Enhanced tooltip styling */
.vjs-timeline-marker[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.95);
  color: white;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 30;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: tooltipFadeIn 0.2s ease-out;
}

/* Tooltip arrow */
.vjs-timeline-marker[title]:hover::before {
  content: '';
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.95);
  z-index: 30;
  pointer-events: none;
  animation: tooltipFadeIn 0.2s ease-out;
}

/* Tooltip fade-in animation */
@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Ensure markers are visible above progress bar */
.video-js .vjs-progress-control {
  position: relative !important;
  z-index: 1 !important; /* Lower z-index than markers */
}

.video-js .vjs-progress-control .vjs-seek-bar {
  position: relative !important;
  z-index: 1 !important; /* Lower z-index than markers */
  height: 100% !important;
}

/* Ensure the progress bar holder doesn't block markers */
.video-js .vjs-progress-control .vjs-progress-holder {
  z-index: 1 !important;
  position: relative !important;
  height: 100% !important;
}

/* Make sure the seek bar has proper height */
.video-js .vjs-progress-control .vjs-seek-bar {
  height: 100% !important;
}

/* Volume bar styling */
.video-js .vjs-volume-level {
  background-color: #60a5fa !important; /* Light blue volume level */
}

.video-js .vjs-volume-bar {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Time display styling */
.video-js .vjs-current-time,
.video-js .vjs-time-divider,
.video-js .vjs-duration {
  color: #ffffff !important;
}

/* Playback rate menu styling */
.video-js .vjs-menu-content {
  background-color: #1f2937 !important;
  border: 1px solid #374151 !important;
}

.video-js .vjs-menu li {
  color: #ffffff !important;
  background-color: transparent !important;
}

.video-js .vjs-menu li:hover,
.video-js .vjs-menu li:focus {
  background-color: #374151 !important;
  color: #60a5fa !important; /* Light blue menu hover */
}

.video-js .vjs-menu li.vjs-selected {
  background-color: #60a5fa !important; /* Light blue selected menu item */
  color: #ffffff !important;
}

/* Fullscreen button styling */
.video-js .vjs-fullscreen-control {
  color: #ffffff !important;
}

/* Loading spinner styling */
.video-js .vjs-loading-spinner {
  border-color: #60a5fa transparent transparent transparent !important; /* Light blue spinner */
}

/* Big play button styling */
.video-js .vjs-big-play-button {
  background-color: rgba(0, 0, 0, 0.7) !important;
  border: 2px solid #60a5fa !important; /* Light blue border */
  color: #60a5fa !important; /* Light blue color */
  border-radius: 50% !important;
  width: 80px !important;
  height: 80px !important;
  line-height: 76px !important;
  font-size: 32px !important;
}

.video-js .vjs-big-play-button:hover {
  background-color: #60a5fa !important; /* Light blue background on hover */
  color: #ffffff !important;
}

/* Responsive adjustments */
.video-js.vjs-fluid {
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

/* Hide the default poster image background */
.video-js .vjs-poster {
  background-size: cover !important;
  background-position: center !important;
}

.video-js .vjs-progress-control .vjs-play-progress {
  background-color: #60a5fa !important; /* Light blue progress color */
}

.video-js .vjs-progress-control .vjs-load-progress {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.video-js .vjs-big-play-button {
  font-size: 3em;
  line-height: 2em;
  height: 2em;
  width: 2em;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-top: -1em;
  margin-left: -1em;
}

.visual-overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Allows clicks to pass through */
  z-index: 20; /* Above video player, below UI controls */
}

.visual-overlay {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  background: rgba(0, 0, 0, 0.8); /* Optional semi-transparent background */
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  overflow: hidden;
}

.visual-overlay.hidden {
  display: none;
}

.visual-content {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.visual-content.hidden {
  display: none;
}

.webcam-visual {
  transform: scaleX(-1); /* Mirror the webcam feed */
}