/* Define CSS Variables for Easy Customization */
:root {
  /* Primary Colors */
  --ob-primary-color: rgba(
    255,
    255,
    255,
    0.916
  ); /* Icon color and accent color */
  --ob-icon-color: #ffffff;
  --ob-background-overlay: rgba(0, 0, 0, 0.5); /* Overlay background */

  /* Button Colors */
  --ob-control-button-bg: transparent;
  --ob-control-button-color: var(--ob-primary-color);
  --ob-control-button-hover-bg: var(--ob-primary-color);
  --ob-control-button-hover-color: #ffffff;
  --ob-control-button-hover-transition: background 0.2s;
  --ob-control-button-border-radius: 4px;

  /* Overlay Play Button */
  --ob-overlay-play-button-bg: var(--ob-background-overlay);
  --ob-overlay-play-button-color: var(--ob-primary-color);

  /* Progress Bar Colors */
  --ob-progress-bar-bg: var(--ob-primary-color); /* Updated to primary color */
  --ob-progress-bar-handle-color: var(--ob-primary-color);

  /* Volume Control Colors */
  --ob-volume-control-bg: var(
    --ob-primary-color
  ); /* Updated to primary color */

  /* Indicator Backgrounds */
  --ob-loading-indicator-bg: rgba(0, 0, 0, 0.7);
  --ob-error-message-bg: rgba(255, 0, 0, 0.7);

  /* Sizes */
  --ob-icon-size: 1rem;
  --ob-button-size: 1.6rem;
  --ob-button-border-radius: 4px;
  --ob-overlay-play-button-size: 4rem;
  --ob-volume-range-width: 100px;

  /* Opacity and Transition */
  --ob-control-opacity: 0;
  --ob-control-hover-opacity: 1;
  --ob-transition-duration: 0.3s;

  /* Aspect Ratio */
  --ob-aspect-ratio: 56.25%; /* Default to 16:9 aspect ratio */

  /* Margins and Padding */
  --ob-control-margin: 0 5px;
  --ob-progress-container-margin: 0 10px;
  --ob-controls-padding: 5px;
  --ob-volume-icon-margin-right: 5px;

  /* Z-Index */
  --ob-overlay-z-index: 10; /* Higher z-index */
}

/* Video Container */
.video-container {
  position: relative;
  width: 100%;
  margin: auto;
}

/* Video Wrapper to maintain aspect ratio */
.ob-video-aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: var(--ob-aspect-ratio);
  overflow: hidden;
}

.ob-video-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay Container */
.ob-overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ob-background-overlay);
  z-index: var(--ob-overlay-z-index);
  cursor: pointer;
}

/* Overlay Play Button */
.ob-overlay-play-button {
  width: var(--ob-overlay-play-button-size);
  height: var(--ob-overlay-play-button-size);
  background: var(--ob-overlay-play-button-bg);
  color: var(--ob-overlay-play-button-color);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ob-overlay-play-button svg {
  width: var(--ob-icon-size);
  height: var(--ob-icon-size);
  fill: var(--ob-primary-color);
}

/* Controls Overlay */
.ob-video-controls {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  background: var(--ob-background-overlay);
  padding: var(--ob-controls-padding);
  opacity: var(--ob-control-opacity);
  transition: opacity var(--ob-transition-duration);
}

/* Show controls when overlay is hidden or not present */
.ob-video-wrapper:hover .ob-video-controls,
.ob-video-wrapper:focus .ob-video-controls {
  opacity: var(--ob-control-hover-opacity);
}

/* Hide controls when overlay is visible */
.ob-video-wrapper.overlay-visible:hover .ob-video-controls,
.ob-video-wrapper.overlay-visible:focus .ob-video-controls {
  opacity: var(--ob-control-opacity);
}

/* Left and Right Controls */
.ob-left-controls {
  width: 100%;
  display: flex;
  align-items: center;
}

.ob-right-controls {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* Control Buttons */
.ob-video-controls button {
  background: var(--ob-control-button-bg);
  border: none;
  cursor: pointer;
  margin: var(--ob-control-margin);
  padding: 0;
  width: var(--ob-button-size);
  height: var(--ob-button-size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ob-control-button-color);
  border-radius: var(--ob-control-button-border-radius);
  transition: var(--ob-control-button-hover-transition);
}

.ob-video-controls button:hover {
  background: var(--ob-control-button-hover-bg);
  color: var(--ob-control-button-hover-color);
}

.ob-video-controls button svg {
  width: var(--ob-icon-size);
  height: var(--ob-icon-size);
  fill: currentColor;
}

.ob-video-controls button svg path {
  /* transition: fill var(--ob-transition-duration); */
}

.ob-video-controls button:hover svg path {
  fill: black;
}

/* Play Button */
.ob-play-button {
  flex-shrink: 0;
}

/* Volume Control */

.ob-volume-container {
  display: flex;
}

.ob-volume-icon {
  background: var(--ob-control-button-bg);
  border: none;
  cursor: pointer;
  margin-right: var(--ob-volume-icon-margin-right);
  padding: 0;
  width: var(--ob-button-size);
  height: var(--ob-button-size);
  color: var(--ob-control-button-color);
  border-radius: var(--ob-control-button-border-radius);
  transition: var(--ob-control-button-hover-transition);
}

.ob-volume-icon:hover {
  background: var(--ob-control-button-hover-bg);
  color: var(--ob-control-button-hover-color);
}

.ob-volume-icon svg {
  width: var(--ob-icon-size);
  height: var(--ob-icon-size);
  fill: currentColor;
}

.ob-volume-range {
  width: var(--ob-volume-range-width);
  background: var(--ob-volume-control-bg);
  accent-color: var(--ob-volume-control-bg);
}
@media screen and (max-width: 491px) {
  .ob-volume-range {
    display: none;
  }
}

/* Fullscreen Button */
.ob-fullscreen-button {
  /* Inherits styles from .ob-video-controls button */
}

.ob-fullscreen-button:hover {
  background: var(--ob-control-button-hover-bg);
  color: var(--ob-control-button-hover-color);
}

.ob-fullscreen-button svg {
  width: var(--ob-icon-size);
  height: var(--ob-icon-size);
  fill: currentColor;
}

/* Progress Bar */
.ob-progress-container {
  display: flex;
  flex-grow: 1;
  margin: var(--ob-progress-container-margin);
  align-items: center;
}

.ob-progress-bar {
  width: 100%;
  background: var(--ob-progress-bar-bg);
  accent-color: var(--ob-progress-bar-handle-color);
}

/* Spinner Styles */
.ob-spinner {
  width: var(--ob-spinner-size, 40px);
  height: var(--ob-spinner-size, 40px);
  border: 4px solid var(--ob-spinner-bg-color, rgba(255, 255, 255, 0.3));
  border-top: 4px solid var(--ob-spinner-color, #ffffff);
  border-radius: 50%;
  animation: ob-spin 1s linear infinite;
}

/* Spinner Animation */
@keyframes ob-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Loading Indicator Positioning */
.ob-loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Remove any existing styles if present */
  background: none;
  color: none;
  font-size: 0;
  padding: 0;
  border-radius: 0;
}

/* Error Message */
.ob-error-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 18px;
  background: var(--ob-error-message-bg);
  padding: 10px;
  border-radius: 5px;
}