/*
 * vjs-xveli: A clean, modern, Material-inspired theme for Video.js
 * (Modified for mobile responsiveness)
 */

/* 1. Import Material Design's standard font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

/* 2. Define Theme Variables */
.vjs-xveli {
  --vjs-xveli-primary: #2196F3; /* Material Blue 500 */
  --vjs-xveli-accent: #FF4081; /* Material Pink A200 */
  --vjs-xveli-background-bar: rgba(28, 28, 28, 0.85);
  --vjs-xveli-background-menu: #2a2a2a;
  --vjs-xveli-icon-primary: #FFFFFF;
  --vjs-xveli-icon-secondary: #d1d1d1;
  --vjs-xveli-text-color: #FFFFFF;
  --vjs-xveli-font-family: 'Roboto', sans-serif;
}



/* 3. General Player Styles */
.vjs-xveli {
  font-family: var(--vjs-xveli-font-family);
  overflow: hidden; /* Ensure corners clip */
}

/* 4. Big Play Button (Material Floating Action Button - FAB) */
.vjs-xveli .vjs-big-play-button {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  top: 50%;
  left: 50%;
  margin-top: -36px;
  margin-left: -36px;
}

.vjs-xveli .vjs-big-play-button .vjs-icon-placeholder::before {
  font-size: 48px;
  color: var(--vjs-xveli-primary);
  line-height: 72px;
}

.vjs-xveli:hover .vjs-big-play-button,
.vjs-xveli .vjs-big-play-button:focus {
  background-color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transform: scale(1.05);
}

/* Hide big play button when playing */
.vjs-xveli.vjs-playing .vjs-big-play-button {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
}



/* 2. The Ambient Background (The blurred image) */
.video-js.vjs-xveli::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    
    /* Inherit the image we set in JS/HTML */
    background-image: var(--bg-image); 
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* 5. Control Bar */
.vjs-xveli .vjs-control-bar {
  height: 40px;

  background-color: #1a1c28;
  padding: 0 12px;
  transition: all 0.3s ease;
  bottom: 0;
  display: flex; /* Use flexbox for positioning */
  align-items: center;
  flex-wrap: nowrap; /* Prevent wrapping */
}

/* Cleaner show/hide */
.vjs-xveli.vjs-user-inactive .vjs-control-bar {
  opacity: 0;
  visibility: hidden;
  bottom: -40px;
}
.vjs-xveli.vjs-paused .vjs-control-bar {
  opacity: 1;
  visibility: visible;
  bottom: 0;
}


/* 6. Control Bar Buttons (Play, Mute, Fullscreen) */
.vjs-xveli .vjs-control {
  width: 48px;
  height: 100%;
  color: var(--vjs-xveli-icon-secondary);
  transition: all 0.2s ease;
  order: 0; /* Default order for flex items */
  flex-shrink: 0; /* Prevent controls from shrinking */
}
.vjs-xveli .vjs-control:hover {
  color: var(--vjs-xveli-icon-primary);

}

.vjs-xveli .vjs-control .vjs-icon-placeholder::before {
  font-size: 26px;
  line-height: 40px;
}

/* Specific button ordering */
.vjs-xveli .vjs-play-control { order: 0; } /* Far left */
.vjs-xveli .vjs-time-control { order: 2; } /* Next to play button */
.vjs-xveli .vjs-volume-panel {
  order: 3; /* Placed after progress bar and time */
  margin-left: auto; /* Push it and subsequent elements to the far right */
}
.vjs-xveli .vjs-fullscreen-control { order: 4; } /* After volume */

/* Other buttons can stay in default order or be explicitly ordered as needed */
.vjs-xveli .vjs-chapters-button,
.vjs-xveli .vjs-playback-rate,
.vjs-xveli .vjs-subtitles-button,
.vjs-xveli .vjs-captions-button,
.vjs-xveli .vjs-quality-button,
.vjs-xveli .vjs-picture-in-picture-control,
.vjs-xveli .vjs-settings-button {
  order: 2; /* Group these generally in the middle, before volume/fullscreen */
}


/* 7. Progress Bar (Seek Bar) */
.vjs-xveli .vjs-progress-control {
  position: relative; /* Make it a flex item */
  flex-grow: 1; /* Allow it to take up available space */
  height: 10px; /* Taller hover area */
  transition: all 0.2s ease;
  margin: 0 10px; /* Spacing from adjacent controls */
  order: 2; /* Position it between play/time and volume/fullscreen */
}
.vjs-xveli .vjs-progress-control:hover .vjs-progress-holder {
  height: 8px; /* Increased hover height */
}
.vjs-xveli .vjs-progress-holder {
  height: 10px; /* Increased default height */
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 2px 0; /* Adjusted margin to center */
  transition: all 0.2s ease;
}

/* Play Progress (Elapsed) */
.vjs-xveli .vjs-play-progress {
  background-color: var(--vjs-xveli-primary);
  border-radius: 3px;
}

/* Scrubber Handle */
.vjs-xveli .vjs-play-progress::before {
  content: '';
  display: block;
  position: absolute;
  right: -6px;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--vjs-xveli-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transform: translateY(-50%) scale(1); /* <-- CHANGED: Always visible */
  transition: all 0.2s ease;
}

/* Load Progress (Buffered) */
.vjs-xveli .vjs-load-progress {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 3px;
}

/* 8. Time Display */
.vjs-xveli .vjs-time-control {
  font-size: 14px;
  line-height: 40px;
  color: var(--vjs-xveli-text-color);
  width: auto;
  padding: 0 10px;
  order: 2; /* After play button */
}
.vjs-xveli .vjs-current-time { padding-right: 0; }
.vjs-xveli .vjs-time-divider { padding: 0 4px; }
.vjs-xveli .vjs-duration { padding-left: 0; }


/* 9. Volume Control */
.vjs-xveli .vjs-volume-panel {
  width: 48px;
  transition: all 0.3s ease;
  margin-left: 10px; /* Space from progress bar */
}
/* Material: Show slider on hover */
.vjs-xveli .vjs-volume-panel:hover {
  width: 120px;
}
.vjs-xveli .vjs-volume-bar {
  background-color: rgba(255, 255, 255, 0.3);
  height: 4px;
  border-radius: 3px;
  margin: 18px auto 0; /* Changed from 28px */
}
.vjs-xveli .vjs-volume-level {
  background-color: var(--vjs-xveli-icon-primary);
  border-radius: 3px;
}
.vjs-xveli .vjs-volume-level::before {
  content: '';
  position: absolute;
  right: -4px;
  top: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--vjs-xveli-icon-primary);
}

/* 10. Menus (Captions, Playback Rate, etc.) */
.vjs-xveli .vjs-menu {
  background-color: var(--vjs-xveli-background-menu);
  border-radius: 4px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

.vjs-xveli .vjs-menu-button-popup .vjs-menu-content {
  bottom: 1.5em; /* Position above control bar */
  background-color: var(--vjs-xveli-background-menu);
  border-radius: 4px;
}

.vjs-xveli .vjs-menu-item,
.vjs-xveli .vjs-menu-title {
  padding: 8px 16px;
  font-size: 14px;
  color: var(--vjs-xveli-icon-secondary);
  transition: all 0.2s ease;
}
.vjs-xveli .vjs-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--vjs-xveli-icon-primary);
}
.vjs-xveli .vjs-menu-item.vjs-selected {
  background-color: var(--vjs-xveli-primary);
  color: var(--vjs-xveli-icon-primary);
}


/* ------------------------------------------- */
/* Mobile Responsiveness             */
/* ------------------------------------------- */
@media (max-width: 768px) {
  /* Smaller Big Play Button */
  .vjs-xveli .vjs-big-play-button {
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  .vjs-xveli .vjs-big-play-button .vjs-icon-placeholder::before {
    font-size: 32px;
    line-height: 50px;
  }

  /* Shorter Control Bar */
  .vjs-xveli .vjs-control-bar {
    height: 48px;
    padding: 0 8px; /* Less padding on sides */
  }
  .vjs-xveli.vjs-user-inactive .vjs-control-bar {
    bottom: -48px;
  }

  /* Smaller Control Buttons */
  .vjs-xveli .vjs-control {
    width: 40px; /* Slightly smaller button area */
  }
  .vjs-xveli .vjs-control .vjs-icon-placeholder::before {
    font-size: 22px; /* Smaller icons */
    line-height: 48px; /* Match new control bar height */
  }

  /* Adjust Time Display */
  .vjs-xveli .vjs-time-control {
    font-size: 12px; /* Smaller font */
    line-height: 48px; /* Match new control bar height */
    padding: 0 5px;
  }

  /* Adjust Progress Bar Margin */
  .vjs-xveli .vjs-progress-control {
    margin: 0 5px;
    height: 8px; /* Slightly thinner progress bar */
  }
  .vjs-xveli .vjs-progress-control:hover .vjs-progress-holder {
    height: 12px;
  }
  .vjs-xveli .vjs-progress-holder {
    height: 10px;
  }
  .vjs-xveli .vjs-play-progress::before {
    width: 18px; /* Smaller scrubber handle */
    height: 18px;
    right: -5px;
    /* It will inherit the scale(1) from the base rule, so it's always visible */
  }

  /* Hide volume slider on mobile by default to save space */
  .vjs-xveli .vjs-volume-panel {
    width: 40px; /* Force width, hide slider */
  }
  .vjs-xveli .vjs-volume-panel:hover {
    width: 40px; /* No expansion on hover for mobile */
  }
  .vjs-xveli .vjs-volume-bar {
    display: none; /* Hide the volume bar itself */
  }
}

.vjs-xveli .vjs-slider-horizontal .vjs-volume-level {
	height: 0.4em;
}