/**
 * Video.js Customization CSS
 * 
 * Brand-specific CSS overrides and customizations for video.js players.
 * This file extends/modifies theme styles and adds brand-specific behavior.
 * 
 * Load order: Core CSS → Theme CSS → This file (custom CSS)
 */

/* ========================================
   Brand-Specific Player Customizations
   ======================================== */

/* Example: Custom control bar styling */
.video-js .vjs-control-bar {
  /* Add brand-specific control bar customizations here */
}

/* Example: Custom play button */
.video-js .vjs-big-play-button {
  /* Add brand-specific play button customizations here */
}

/* Example: Custom progress bar */
.video-js .vjs-progress-control {
  /* Add brand-specific progress bar customizations here */
}

/* Example: Theme-specific overrides */
.video-js.vjs-theme-city {
  /* City theme customizations */
}

.video-js.vjs-theme-sea {
  /* Sea theme customizations */
}

/* Example: Responsive adjustments */
@media (max-width: 768px) {
  .video-js {
    /* Mobile-specific customizations */
  }
}

/* Add your brand-specific customizations below */

/* Background video hover control for native background videos */
.o-dc-video-bg-container {
  position: relative;
}
.o-dc-video-bg-container .o-dc-video-bg-play-pause {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 10;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  mix-blend-mode: difference;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  line-height: 0;
}
.o-dc-video-bg-container:hover .o-dc-video-bg-play-pause {
  opacity: 1 !important; /* important to override the inline style, nec to prevent flash on load. */
  pointer-events: auto;
}
.o-dc-video-bg-container.is-paused .o-dc-video-bg-play-pause__pause {
  display: none;
}
.o-dc-video-bg-container:not(.is-paused) .o-dc-video-bg-play-pause__play {
  display: none;
}
.o-dc-video-bg-play-pause__play::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-top: 0.55em solid transparent;
  border-bottom: 0.55em solid transparent;
  border-left: 0.9em solid currentColor;
}
.o-dc-video-bg-play-pause__pause::before {
  content: '';
  display: block;
  width: 0.9em;
  height: 1.1em;
  margin: 0 auto;
  background: linear-gradient(to right, currentColor 0, currentColor 38%, transparent 38%, transparent 62%, currentColor 62%, currentColor 100%);
}