/* LPAVP base */
.lpavp-wrapper {
  margin: 0 0 16px 0;
}

.lpavp-player {
  width: 100%;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.lpavp-video {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
  max-height: 60vh;
}

.lpavp-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(20,20,20,0.95);
  color: #fff;
  font-size: 14px;
}

.lpavp-btn {
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 8px;
}
.lpavp-btn:hover { background: rgba(255,255,255,0.12); }

.lpavp-time {
  display: inline-flex;
  gap: 6px;
  min-width: 92px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.lpavp-progress {
  flex: 1;
  min-width: 120px;
}

.lpavp-volume {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lpavp-vol { width: 100px; }

.lpavp-speed {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 6px 8px;
  outline: none;
}
.lpavp-speed option { color: #000; }

/* LearnPress popup layout enhancements (Eduma-friendly) */
body.lpavp-theater #popup-content .lpavp-video,
body.lpavp-theater .lpavp-video {
  max-height: 75vh;
}

/* Sticky inside popup content so it feels like Udemy */
#popup-content .lpavp-wrapper.lpavp-sticky {
  position: sticky;
  top: 0;
  z-index: 20; /* below header but above content */
}

/* Keep lesson nav visible: never fixed overlay */
#popup-footer { position: relative; z-index: 30; }

/* Mobile */
@media (max-width: 768px) {
  .lpavp-controls { flex-wrap: wrap; }
  .lpavp-vol { width: 80px; }
}

/* Fullscreen layout fixes (desktop + mobile) */
.lpavp-player:fullscreen,
.lpavp-player:-webkit-full-screen,
.lpavp-player:-moz-full-screen,
.lpavp-player:-ms-fullscreen {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
  display: flex !important;
  flex-direction: column !important;
}

/*
 * Some themes/caches/browsers can be inconsistent with :fullscreen selectors.
 * We also toggle .lpavp-fullscreen via JS on fullscreenchange for reliability.
 */
.lpavp-player.lpavp-fullscreen {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Pseudo-fullscreen fallback (used when native fullscreen is unreliable, e.g. iOS or theme conflicts) */
body.lpavp-ps-fullscreen {
  overflow: hidden !important;
}

.lpavp-player.lpavp-ps-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 999999 !important;
}

.lpavp-player:fullscreen .lpavp-video,
.lpavp-player:-webkit-full-screen .lpavp-video,
.lpavp-player:-moz-full-screen .lpavp-video,
.lpavp-player:-ms-fullscreen .lpavp-video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  object-fit: contain;
  background: #000 !important;
}

.lpavp-player.lpavp-fullscreen .lpavp-video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  object-fit: contain;
  background: #000 !important;
}

.lpavp-player.lpavp-ps-fullscreen .lpavp-video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  object-fit: contain;
  background: #000 !important;
}

.lpavp-player:fullscreen .lpavp-controls,
.lpavp-player:-webkit-full-screen .lpavp-controls,
.lpavp-player:-moz-full-screen .lpavp-controls,
.lpavp-player:-ms-fullscreen .lpavp-controls {
  flex: 0 0 auto;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.lpavp-player.lpavp-fullscreen .lpavp-controls {
  flex: 0 0 auto;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.lpavp-player.lpavp-ps-fullscreen .lpavp-controls {
  flex: 0 0 auto;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}