/* Video.js Player Custom Styles */

/* Base player styles */
.video-js {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

/* Custom theme for Saasy */
.vjs-theme-saasy {
  --vjs-theme-primary: #3b82f6;
  --vjs-theme-secondary: #1e40af;
}

.vjs-theme-saasy .vjs-big-play-button {
  background-color: rgba(59, 130, 246, 0.7);
  border: none;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin-top: -40px;
  margin-left: -40px;
}

.vjs-theme-saasy:hover .vjs-big-play-button,
.vjs-theme-saasy .vjs-big-play-button:focus {
  background-color: var(--vjs-theme-primary);
}

.vjs-theme-saasy .vjs-control-bar {
  background-color: rgba(0, 0, 0, 0.7);
}

.vjs-theme-saasy .vjs-play-progress {
  background-color: var(--vjs-theme-primary);
}

.vjs-theme-saasy .vjs-slider {
  background-color: rgba(255, 255, 255, 0.3);
}

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

/* Video pill specific styles */
.video-pill-container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .video-pill-container {
    flex-direction: row;
  }
  
  .video-pill-player {
    width: 33.333333%;
  }
  
  .video-pill-content {
    width: 66.666667%;
  }
}

/* Dark mode adjustments */
.dark .vjs-theme-saasy {
  --vjs-theme-primary: #60a5fa;
  --vjs-theme-secondary: #3b82f6;
}