/**
 * Custom Video Player - Modern Design with Bootstrap Icons
 * Features: Centered play button, auto-hide controls, smooth interactions
 */

/* ============================================
   CSS Variables
   ============================================ */
.video-player {
  --vp-accent: #fff;
  --vp-accent-dim: rgba(255, 255, 255, 0.9);
  --vp-track: rgba(255, 255, 255, 0.3);
  --vp-track-fill: #fff;
  --vp-track-buffered: rgba(255, 255, 255, 0.5);
  --vp-controls-bg: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
  --vp-surface: rgba(255, 255, 255, 0.1);
  --vp-surface-hover: rgba(255, 255, 255, 0.2);
  --vp-surface-active: rgba(255, 255, 255, 0.3);
  --vp-radius: 8px;
  --vp-radius-sm: 6px;
  --vp-transition: 0.25s ease;
}

/* ============================================
   Hide Native Controls
   ============================================ */
.video-player video::-webkit-media-controls,
.video-player video::-webkit-media-controls-enclosure,
.video-player video::-webkit-media-text-track-container,
.video-player video::-webkit-media-text-track-display {
  display: none !important;
}

.video-player video {
  -webkit-appearance: none;
  appearance: none;
}

.video-player video::-moz-media-controls {
  display: none !important;
}

.video-player video::cue {
  display: none !important;
}

.video-player video track {
  display: none;
}

/* ============================================
   Container
   ============================================ */
.video-player {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  background: #000;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  border-radius: var(--vp-radius);
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

.video-player video {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  transition: opacity 0.3s ease;
  /* Let overlay and controls receive taps on iOS; video must not capture touch */
  pointer-events: none;
}

/* ============================================
   Fullscreen
   ============================================ */
.video-player:fullscreen,
.video-player:-webkit-full-screen,
.video-player:-moz-full-screen,
.video-player:-ms-fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  border-radius: 0;
}

.video-player:fullscreen video,
.video-player:-webkit-full-screen video,
.video-player:-moz-full-screen video,
.video-player:-ms-fullscreen video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================
   Skeleton Loader
   Prevents layout shift before video is ready.
   Removed by JS once the video fires canplay.

   Layout strategy:
   - The WRAPPER holds aspect-ratio: 16/9 during skeleton phase.
   - The skeleton overlay is always position: absolute (no flow impact).
   - The video is in normal flow but invisible (opacity: 0).
   - On canplay the class is removed → wrapper loses the forced
     aspect-ratio, the video (now with intrinsic dimensions) drives
     the height, and the skeleton fades out. No layout jump.
   ============================================ */

/* Wrapper reserves 16:9 space while skeleton is active */
.video-player-skeleton {
  aspect-ratio: 16 / 9;
}

/* When an explicit height is set, aspect-ratio is not needed */
.video-player-skeleton[style*="height"] {
  aspect-ratio: unset;
}

/* Video stays in flow but invisible — it loads in the background */
.video-player-skeleton video {
  opacity: 0;
  pointer-events: none;
}

/* Hide all other player chrome while skeleton is visible */
.video-player-skeleton .video-player-play-overlay,
.video-player-skeleton .video-player-controls,
.video-player-skeleton .video-player-captions,
.video-player-skeleton .video-player-loading,
.video-player-skeleton .video-player-error {
  opacity: 0;
  pointer-events: none;
}

/* Skeleton overlay — always absolute, purely visual, no flow impact */
.vp-skeleton {
  position: absolute;
  inset: 0;
  background: #111;
  border-radius: var(--vp-radius);
  overflow: hidden;
  z-index: 30;
}

/* Shimmer sweep animation */
.vp-skeleton-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.04) 45%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.04) 55%,
    transparent 65%
  );
  background-size: 250% 100%;
  animation: vp-skeleton-shimmer 2s ease-in-out infinite;
}

@keyframes vp-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -50% 0; }
}

/* Faux play button — centered circle */
.vp-skeleton-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

/* Faux controls bar at bottom */
.vp-skeleton-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
}

.vp-skeleton-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.vp-skeleton-btn-sm {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.vp-skeleton-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  min-width: 0;
}

.vp-skeleton-time {
  width: 60px;
  height: 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

/* ——— Skin overrides for skeleton ——— */

/* Ocean */
.video-player-skin-ocean .vp-skeleton {
  background: #0a1e3c;
}
.video-player-skin-ocean .vp-skeleton-play {
  background: rgba(62, 168, 255, 0.12);
}
.video-player-skin-ocean .vp-skeleton-shimmer {
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(62, 168, 255, 0.04) 45%,
    rgba(62, 168, 255, 0.08) 50%,
    rgba(62, 168, 255, 0.04) 55%,
    transparent 65%
  );
  background-size: 250% 100%;
}

/* Cinema */
.video-player-skin-cinema .vp-skeleton {
  background: #140000;
  border-radius: 0;
}
.video-player-skin-cinema .vp-skeleton-play {
  background: rgba(229, 9, 20, 0.12);
}
.video-player-skin-cinema .vp-skeleton-btn,
.video-player-skin-cinema .vp-skeleton-btn-sm {
  border-radius: 4px;
}
.video-player-skin-cinema .vp-skeleton-shimmer {
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(229, 9, 20, 0.04) 45%,
    rgba(229, 9, 20, 0.07) 50%,
    rgba(229, 9, 20, 0.04) 55%,
    transparent 65%
  );
  background-size: 250% 100%;
}

/* Minimal */
.video-player-skin-minimal .vp-skeleton {
  background: #0a0a0a;
  border-radius: 0;


}
.video-player-skin-minimal .vp-skeleton-play {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.08);
}
.video-player-skin-minimal .vp-skeleton-btn,
.video-player-skin-minimal .vp-skeleton-btn-sm {
  border-radius: 0;
}
.video-player-skin-minimal .vp-skeleton-bar {
  height: 3px;
}

/* Reduced motion — stop shimmer animation */
@media (prefers-reduced-motion: reduce) {
  .vp-skeleton-shimmer {
    animation: none;
  }

}
/* ============================================
   Centered Play Button Overlay
   ============================================ */
.video-player-play-overlay {
  position: absolute;
  top: 50%;

  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;

  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.video-player-play-overlay:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
}

.video-player-play-overlay:active {
  transform: translate(-50%, -50%) scale(1.05);
}

.video-player-play-overlay i {
  font-size: 32px;
  color: #000;
  margin-left: 4px;
}

/* Hide overlay when playing */
.video-player.video-player-playing .video-player-play-overlay {
  opacity: 0;
  pointer-events: none;
}

/* Show overlay when paused */
.video-player.video-player-paused .video-player-play-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================
   Controls Container
   ============================================ */
.video-player-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 16px 16px;
  background: var(--vp-controls-bg);
  color: var(--vp-accent);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10;
}

/* Show controls on hover or when paused */
.video-player:hover .video-player-controls,
.video-player.video-player-paused .video-player-controls,
.video-player.video-player-controls-visible .video-player-controls {
  opacity: 1;
  transform: translateY(0);
}

/* Hide controls when playing and no interaction */
.video-player.video-player-playing:not(:hover):not(.video-player-controls-visible) .video-player-controls {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

/* ============================================
   Control Buttons
   ============================================ */
.video-player-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vp-accent);
  cursor: pointer;
  border-radius: var(--vp-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, transform 0.15s ease;
  font-size: 18px;
}

.video-player-btn:hover {
  background: var(--vp-surface-hover);
}

.video-player-btn:active {
  transform: scale(0.95);
  background: var(--vp-surface-active);
}

.video-player-btn:focus-visible {
  outline: 2px solid var(--vp-accent-dim);
  outline-offset: 2px;
}

.video-player-btn i {
  pointer-events: none;
}

/* Play/Pause Button (in controls) */
.video-player-btn[data-play] {
  width: 36px;
  height: 36px;
}

/* Hide pause icon by default, show play icon */
.video-player-btn[data-play] .bi-pause-fill {
  display: none;
}

.video-player-btn[data-play] .bi-play-fill {
  display: block;
}

/* When playing, show pause and hide play */
.video-player.video-player-playing .video-player-btn[data-play] .bi-pause-fill {
  display: block;
}

.video-player.video-player-playing .video-player-btn[data-play] .bi-play-fill {
  display: none;
}

/* Mute Button */
.video-player-btn[data-mute] .bi-volume-mute-fill {
  display: none;
}

.video-player.video-player-muted .video-player-btn[data-mute] .bi-volume-up-fill {
  display: none;
}

.video-player.video-player-muted .video-player-btn[data-mute] .bi-volume-mute-fill {
  display: block;
}

/* CC Button */
.video-player-btn[data-cc] {
  font-size: 16px;
  font-weight: 600;
}

.video-player.video-player-captions-active .video-player-btn[data-cc] {
  background: var(--vp-surface-active);
}

/* Fullscreen Button */
.video-player-btn[data-fullscreen] .bi-fullscreen-exit {
  display: none;
}

.video-player.video-player-fullscreen .video-player-btn[data-fullscreen] .bi-fullscreen {
  display: none;
}

.video-player.video-player-fullscreen .video-player-btn[data-fullscreen] .bi-fullscreen-exit {
  display: block;
}

/* ============================================
   Progress Bar
   ============================================ */
.video-player-progress-wrap {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
}

.video-player-progress-track {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 4px;
  background: var(--vp-track);
  border-radius: 2px;
  overflow: visible;
  transition: height 0.2s ease;
}

.video-player-progress-wrap:hover .video-player-progress-track {
  height: 6px;
}

.video-player-progress-buffered {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--vp-track-buffered);
  border-radius: 2px;
  width: 0;
  transition: width 0.2s ease;
}

.video-player-progress-played {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--vp-track-fill);
  border-radius: 2px;
  width: 0;
  transition: width 0.1s linear;
}

.video-player-progress {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  border: 0 !important;
}

.video-player-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--vp-accent);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  opacity: 0;
}

.video-player-progress-wrap:hover .video-player-progress::-webkit-slider-thumb {
  opacity: 1;
  transform: scale(1);
}

.video-player-progress::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.video-player-progress::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--vp-accent);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  opacity: 0;
}

.video-player-progress-wrap:hover .video-player-progress::-moz-range-thumb {
  opacity: 1;
}

/* ============================================
   Volume Control
   ============================================ */
.video-player-volume {
  width: 70px;
  min-width: 70px;
  height: 4px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: var(--vp-track);
  border-radius: 2px;
  cursor: pointer;
  transition: height 0.2s ease;
  border: 0 !important;
}

.video-player-volume:hover {
  height: 6px;
}

.video-player-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--vp-accent);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.video-player-volume::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--vp-accent);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ============================================
   Time Display
   ============================================ */
.video-player-time {
  flex-shrink: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--vp-accent-dim);
  min-width: 85px;
  text-align: center;
  font-weight: 500;
}

/* ============================================
   Captions Display
   ============================================ */
.video-player-captions {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90%;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.85);
  padding: 8px 16px;
  border-radius: var(--vp-radius-sm);
  font-size: 1.125rem;
  line-height: 1.5;
  pointer-events: none;
  z-index: 5;
  display: none;
  font-weight: 500;
}

.video-player-captions.active {
  display: block;
}

.video-player:fullscreen .video-player-captions,
.video-player:-webkit-full-screen .video-player-captions {
  bottom: 110px;
  font-size: 1.5rem;
}

/* ============================================
   Captions Menu
   ============================================ */
.video-player-captions-menu {
  position: absolute;
  bottom: 70px;
  right: 16px;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--vp-radius);
  padding: 8px 0;
  min-width: 200px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 20;
}

.video-player-captions-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.video-player-captions-menu-title {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vp-accent-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 4px;
}

.video-player-captions-menu-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--vp-accent);
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-size: 14px;
  transition: background 0.2s ease;
}

.video-player-captions-menu-item:hover {
  background: var(--vp-surface-hover);
}

.video-player-captions-menu-item.active {
  background: var(--vp-surface-active);
  font-weight: 600;
}

.video-player-captions-menu-item::before {
  content: '✓';
  margin-right: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.video-player-captions-menu-item.active::before {
  opacity: 1;
}

/* ============================================
   Loading / Buffering Indicator
   ============================================ */
.video-player-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 15;
}

/* State class on wrapper uses "is-" prefix to avoid collision */
.video-player.is-loading .video-player-loading {
  display: flex;
}

.video-player-loading::after {
  content: '';
  width: 48px;
  height: 48px;
  border: 3px solid var(--vp-track);
  border-top-color: var(--vp-accent);
  border-radius: 50%;
  animation: video-player-spin 0.7s linear infinite;
}

@keyframes video-player-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   Quality Selector Menu
   ============================================ */
.video-player-quality-menu {
  position: absolute;
  bottom: 70px;
  right: 56px;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--vp-radius);
  padding: 8px 0;
  min-width: 160px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 20;
}

.video-player-quality-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.video-player-quality-menu-title {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vp-accent-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 4px;
}

.video-player-quality-menu-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--vp-accent);
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-size: 14px;
  transition: background 0.2s ease;
  font-variant-numeric: tabular-nums;
}

.video-player-quality-menu-item:hover {
  background: var(--vp-surface-hover);
}

.video-player-quality-menu-item.active {
  background: var(--vp-surface-active);
  font-weight: 600;
}

.video-player-quality-menu-item::before {
  content: '✓';
  margin-right: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.video-player-quality-menu-item.active::before {
  opacity: 1;
}

/* Quality button icon */
.video-player-btn[data-quality] {
  font-size: 16px;
  font-weight: 600;
}

.video-player-btn[data-quality] .vp-quality-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* ============================================
   Audio Track Menu
   ============================================ */
.video-player-audio-menu {
  position: absolute;
  bottom: 70px;
  right: 90px;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--vp-radius);
  padding: 8px 0;
  min-width: 160px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 20;
}

.video-player-audio-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.video-player-audio-menu-title {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vp-accent-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 4px;
}

.video-player-audio-menu-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--vp-accent);
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-size: 14px;
  transition: background 0.2s ease;
}

.video-player-audio-menu-item:hover {
  background: var(--vp-surface-hover);
}

.video-player-audio-menu-item.active {
  background: var(--vp-surface-active);
  font-weight: 600;
}

.video-player-audio-menu-item::before {
  content: '✓';
  margin-right: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.video-player-audio-menu-item.active::before {
  opacity: 1;
}

/* Audio track button */
.video-player-btn[data-audio-track-btn] {
  font-size: 16px;
}

/* ============================================
   Error Display
   ============================================ */
.video-player-error {
  position: absolute;
  bottom: 80px;
  left: 16px;
  right: 16px;
  padding: 12px 16px;
  background: rgba(220, 53, 69, 0.95);
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  border-radius: var(--vp-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 25;
  font-weight: 500;
}

.video-player-error[hidden] {
  display: none !important;
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .video-player-btn,
  .video-player-controls,
  .video-player-play-overlay,
  .video-player-captions-menu,
  .video-player-audio-menu,
  .video-player-progress-track,
  .video-player-progress-buffered,
  .video-player-progress-played {
    transition: none;

  }

  .video-player-loading::after {
    animation-duration: 1.5s;
  }

  .video-player-quality-menu,
  .video-player-audio-menu {
    transition: none;
  }
}

/* ============================================
   Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
  .video-player-volume {
    width: 50px;
    min-width: 50px;
  }

  .video-player-captions {
    font-size: 1rem;
    max-width: 85%;
  }
}

@media (max-width: 480px) {
  .video-player-controls {
    padding: 16px 12px 12px;
    gap: 6px;
  }

  .video-player-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .video-player-play-overlay {
    width: 64px;
    height: 64px;
  }

  .video-player-play-overlay i {
    font-size: 24px;
  }

  .video-player-time {
    font-size: 12px;
    min-width: 75px;
  }

  .video-player-captions {
    font-size: 0.9375rem;
    bottom: 70px;
  }

  .video-player-captions-menu,
  .video-player-audio-menu {
    right: 8px;
    left: 8px;
    min-width: unset;
  }
}

/* ============================================
   Screen Reader Only
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;

}


/* ============================================
   SKIN: Default (dark)
   ============================================
   Already defined above via base CSS variables.
   No extra class needed. Works out of the box.
   ============================================ */


/* ============================================
   SKIN: Ocean (blue accent)
   Apply with: <div class="video-player video-player-skin-ocean">
   ============================================ */
.video-player-skin-ocean {
  --vp-accent: #e0f0ff;
  --vp-accent-dim: rgba(160, 210, 255, 0.9);
  --vp-track: rgba(100, 180, 255, 0.2);
  --vp-track-fill: #3ea8ff;
  --vp-track-buffered: rgba(62, 168, 255, 0.35);
  --vp-controls-bg: linear-gradient(to top, rgba(10, 30, 60, 0.85) 0%, rgba(10, 30, 60, 0.4) 70%, transparent 100%);
  --vp-surface: rgba(62, 168, 255, 0.12);
  --vp-surface-hover: rgba(62, 168, 255, 0.25);
  --vp-surface-active: rgba(62, 168, 255, 0.4);
}

.video-player-skin-ocean .video-player-play-overlay {
  background: rgba(62, 168, 255, 0.95);
  box-shadow: 0 4px 24px rgba(62, 168, 255, 0.4);
}

.video-player-skin-ocean .video-player-play-overlay:hover {
  background: #3ea8ff;
  box-shadow: 0 6px 30px rgba(62, 168, 255, 0.55);
}

.video-player-skin-ocean .video-player-play-overlay i {
  color: #fff;
}

.video-player-skin-ocean .video-player-captions {
  background: rgba(10, 30, 60, 0.9);
}

.video-player-skin-ocean .video-player-captions-menu {
  background: rgba(10, 30, 60, 0.95);
}

.video-player-skin-ocean .video-player-error {
  background: rgba(62, 168, 255, 0.9);
}


/* ============================================
   SKIN: Cinema (red accent, dark background)
   Apply with: <div class="video-player video-player-skin-cinema">
   ============================================ */
.video-player-skin-cinema {
  --vp-accent: #fff;
  --vp-accent-dim: rgba(255, 230, 230, 0.9);
  --vp-track: rgba(255, 255, 255, 0.2);
  --vp-track-fill: #e50914;
  --vp-track-buffered: rgba(229, 9, 20, 0.35);
  --vp-controls-bg: linear-gradient(to top, rgba(20, 0, 0, 0.9) 0%, rgba(20, 0, 0, 0.45) 70%, transparent 100%);
  --vp-surface: rgba(229, 9, 20, 0.12);
  --vp-surface-hover: rgba(229, 9, 20, 0.28);
  --vp-surface-active: rgba(229, 9, 20, 0.45);
  --vp-radius: 0;
}

.video-player-skin-cinema .video-player-play-overlay {
  background: rgba(229, 9, 20, 0.95);
  box-shadow: 0 4px 24px rgba(229, 9, 20, 0.4);
}

.video-player-skin-cinema .video-player-play-overlay:hover {
  background: #e50914;
  box-shadow: 0 6px 30px rgba(229, 9, 20, 0.55);
}

.video-player-skin-cinema .video-player-play-overlay i {
  color: #fff;
}

.video-player-skin-cinema .video-player-captions {
  background: rgba(20, 0, 0, 0.92);
  font-weight: 600;
}

.video-player-skin-cinema .video-player-captions-menu {
  background: rgba(20, 0, 0, 0.95);
}

.video-player-skin-cinema .video-player-error {
  background: rgba(229, 9, 20, 0.95);
  border-radius: 0;
}

.video-player-skin-cinema .video-player-progress-track {
  border-radius: 0;
}

.video-player-skin-cinema .video-player-progress-buffered,
.video-player-skin-cinema .video-player-progress-played {
  border-radius: 0;
}

.video-player-skin-cinema .video-player-btn {
  border-radius: 4px;
}


/* ============================================
   SKIN: Minimal (invisible controls until hover,
   monochrome, no overlay, ultra-clean)
   Apply with: <div class="video-player video-player-skin-minimal">
   ============================================ */
.video-player-skin-minimal {
  --vp-accent: rgba(255, 255, 255, 0.9);
  --vp-accent-dim: rgba(255, 255, 255, 0.7);
  --vp-track: rgba(255, 255, 255, 0.15);
  --vp-track-fill: rgba(255, 255, 255, 0.8);
  --vp-track-buffered: rgba(255, 255, 255, 0.3);
  --vp-controls-bg: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
  --vp-surface: transparent;
  --vp-surface-hover: rgba(255, 255, 255, 0.1);
  --vp-surface-active: rgba(255, 255, 255, 0.15);
  --vp-radius: 0;
}

.video-player-skin-minimal .video-player-play-overlay {
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: none;
  border: 2px solid rgba(255, 255, 255, 0.6);
}

.video-player-skin-minimal .video-player-play-overlay:hover {
  background: rgba(0, 0, 0, 0.7);
  box-shadow: none;
  border-color: #fff;
}

.video-player-skin-minimal .video-player-play-overlay i {
  color: #fff;
  font-size: 24px;
}

.video-player-skin-minimal .video-player-controls {
  padding: 12px 16px 12px;
  gap: 6px;
}

.video-player-skin-minimal .video-player-btn {
  width: 32px;
  height: 32px;
  font-size: 16px;
  border-radius: 0;
}

.video-player-skin-minimal .video-player-time {
  font-size: 12px;
  font-weight: 400;
  min-width: 80px;
}

.video-player-skin-minimal .video-player-progress-track {
  height: 3px;
  border-radius: 0;
}

.video-player-skin-minimal .video-player-progress-wrap:hover .video-player-progress-track {
  height: 4px;
}

.video-player-skin-minimal .video-player-progress-buffered,
.video-player-skin-minimal .video-player-progress-played {
  border-radius: 0;
}

.video-player-skin-minimal .video-player-captions {
  background: rgba(0, 0, 0, 0.7);
  font-size: 1rem;
  border-radius: 2px;
  font-weight: 400;
}