/* Utility Classes */
.videoPlayer {
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

@media (min-width: 768px) {
    .videoPlayer {
        max-width: 200px;
    } 
} 

.video-wrapper {
  width: 100%;
  max-width: 800px;  
  margin: 0 auto;    
  position: relative;
  background: #000;   
  border-radius: 8px;
  overflow: hidden;
}

.responsive-video {
  width: 100%;       
  height: auto;       
  display: block;
}

/* Custom Controls Styling */
.controls {
  display: flex;
  align-items: center;
  padding: 10px;
  background: rgba(0, 0, 0, 0.7);
  gap: 10px;
}

/* Mobile Tweak: Make buttons bigger for thumbs */
@media (max-width: 480px) {
  .controls {
    padding: 15px;
  }
  #playPause {
    padding: 10px 15px;
  }
}