/* Custom video player styles */ /* file header comment */
.custom-video-player { /* custom player wrapper */
  display: flex; /* layout as column */
  flex-direction: column; /* stack frame and controls */
  gap: 8px; /* spacing between frame and controls */
} /* end custom player wrapper */
.custom-video-player--overlay-controls { /* overlay controls wrapper */
  position: relative; /* allow absolute controls */
  gap: 0; /* remove layout gap */
} /* end overlay wrapper */
.custom-video-player--overlay-controls .custom-video-controls { /* overlay controls */
  position: absolute; /* overlay on video */
  left: 12px; /* left inset */
  right: 12px; /* right inset */
  bottom: 12px; /* bottom inset */
  z-index: 2; /* keep above video */
} /* end overlay controls */
.custom-video-frame { /* video frame wrapper */
  position: relative; /* relative for overlays */
} /* end video frame wrapper */
.custom-video-controls { /* controls container */
  display: flex; /* flex row */
  align-items: center; /* center vertically */
  gap: 8px; /* space between controls */
  padding: 8px 10px; /* control padding */
  background: rgba(0, 0, 0, 0.78); /* dark background */
  color: #ffffff; /* white text */
  border-radius: 10px; /* rounded corners */
  flex-wrap: wrap; /* wrap on small screens */
  opacity: 0; /* hide controls by default */
  pointer-events: none; /* disable clicks when hidden */
  transition: opacity 0.2s ease-in-out; /* fade on hover */
} /* end controls container */
.custom-video-controls--singleline { /* force single line controls */
  flex-wrap: nowrap; /* keep controls on one line */
} /* end single line controls */
.custom-video-player:hover .custom-video-controls { /* show on hover */
  opacity: 1; /* show controls */
  pointer-events: auto; /* enable controls */
} /* end hover show */
.custom-video-player:not(.custom-video-player--playing) .custom-video-controls:focus-within { /* show when paused and focused */
  opacity: 1; /* show controls */
  pointer-events: auto; /* enable controls */
} /* end paused focus show */
.custom-video-player--playing.custom-video-player:focus-within .custom-video-controls { /* hide while playing unless hovered */
  opacity: 0; /* hide controls */
  pointer-events: none; /* disable controls */
} /* end playing focus hide */
.custom-video-player--playing.custom-video-player:hover .custom-video-controls, /* show while playing on hover */
.custom-video-player--playing .custom-video-controls:focus-within:has(:focus-visible) { /* show while playing for keyboard focus */
  opacity: 1; /* show controls */
  pointer-events: auto; /* enable controls */
} /* end playing hover/focus-visible show */
.custom-video-controls .cvp-btn { /* button styling */
  border: none; /* no border */
  background: transparent; /* transparent background */
  color: inherit; /* inherit text color */
  padding: 4px 6px; /* button padding */
  line-height: 1; /* compact line height */
} /* end button styling */
.custom-video-controls .cvp-btn:focus { /* focus style */
  outline: 2px solid rgba(255, 255, 255, 0.4); /* focus ring */
  outline-offset: 2px; /* ring offset */
} /* end focus style */
.custom-video-controls .cvp-time { /* time label */
  font-size: 0.85rem; /* small time text */
  min-width: 48px; /* align time width */
  text-align: center; /* center time text */
} /* end time label */
.custom-video-controls .cvp-seek { /* seek range */
  flex: 1 1 240px; /* grow to fill */
} /* end seek range */
.custom-video-controls .cvp-volume { /* volume range */
  width: 90px; /* fixed width */
} /* end volume range */
.custom-video-controls input[type="range"] { /* range inputs */
  accent-color: #ee6023; /* match accent color */
} /* end range inputs */
.custom-video-controls .cvp-spacer { /* optional spacer */
  flex: 0 0 auto; /* no flex growth */
} /* end spacer */
/* Overflow menu: hidden until .cvp-controls--compact (narrow controls bar) */
.custom-video-controls .cvp-overflow-menu { /* three-dot menu wrapper */
  display: none; /* hidden when full-width fullscreen button is shown */
  flex: 0 0 auto; /* keep toggle from shrinking away */
} /* end overflow menu default */
.custom-video-controls.cvp-controls--compact .cvp-fullscreen { /* hide inline fullscreen when narrow */
  display: none !important; /* ensure toolbar item is not clipped off-screen */
} /* end compact fullscreen hide */
.custom-video-controls.cvp-controls--compact .cvp-overflow-menu { /* show overflow when narrow */
  display: block; /* bootstrap .dropdown is block */
} /* end compact overflow show */
.course-content-item .chapter-row-title, /* course chapter title */
.package-content-item .chapter-row-title { /* package chapter title */
  font-size: 0.95rem; /* reduce size */
  font-weight: 600; /* reduce boldness */
} /* end chapter row title */

@media (max-width: 991.98px) { /* mobile video controls */
  .custom-video-controls { /* controls container */
    gap: 6px; /* tighter spacing */
    padding: 6px 8px; /* tighter padding */
  } /* end controls container */
  .custom-video-controls .cvp-time { /* time label */
    min-width: 40px; /* smaller min width */
    font-size: 0.8rem; /* smaller text */
  } /* end time label */
  .custom-video-controls .cvp-volume { /* volume range */
    width: 70px; /* narrower slider */
  } /* end volume range */
} /* end mobile video controls */