/* VideoJS DRM Player Custom Styles */

.video-js {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  border: none;
  font-family: Arial, sans-serif;
  background-color: black;
  border-radius: 10px;
}

.video-js .vjs-tech {
  display: block;
  position: relative;
  border-radius: 8px 8px 0 0;
}

.video-js .vjs-text-track-display {
  position: relative;
}

.video-js video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center !important;
  background: #000;
}

/* Button hover effects */
.video-js .vjs-button {
  transition: all 0.2s ease;
  border-radius: 10px;
}

.video-js .vjs-button:hover,
.video-js .vjs-button:focus {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

/* Audio-only mode: collapse to control bar height only */
.video-js.audio-only {
  height: auto !important;
  min-height: auto !important;
  background-color: transparent;
}

.video-js.audio-only .vjs-tech,
.video-js.audio-only video,
.video-js.audio-only .vjs-text-track-display,
.video-js.audio-only .vjs-poster {
  display: none !important;
}

/* Responsive Design for Buttons */
@media (max-width: 768px) {
  .video-js .vjs-button {
    width: 30px;
    height: 30px;
    font-size: 14px;
    padding: 3px;
  }

  /* Smaller SVG icons on tablet */
  .video-js .vjs-button > svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .video-js .vjs-button {
    width: 20px;
    height: 20px;
    font-size: 12px;
    padding: 3px;
  }

  /* Even smaller SVG icons on mobile */
  .video-js .vjs-button > svg {
    width: 16px;
    height: 16px;
  }
}

/* Touch-friendly button sizing */
@media (hover: none) and (pointer: coarse) {
  .video-js .vjs-button {
    min-width: 36px;
    min-height: 36px;
    padding: 6px;
  }
}