/* Center play/pause button state overrides for Plyr. */

.plyr .plyr__control--overlaid.my-plyr-center-button-hidden {
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.plyr .plyr__control--overlaid.my-plyr-center-button-visible {
  display: block !important;
  opacity: 0.95 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.plyr .plyr__control--overlaid.my-plyr-center-button-visible:focus,
.plyr .plyr__control--overlaid.my-plyr-center-button-visible:hover {
  opacity: 1 !important;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .plyr .plyr__control--overlaid {
    transition: none !important;
  }
}

/*
 * YouTube end-screen cards are rendered inside the cross-origin iframe and
 * cannot be removed by parent-page CSS. This cover hides them after ended.
 * The Plyr center button has a higher z-index and remains usable.
 */
.my-plyr-youtube-end-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  pointer-events: auto;
}

.my-plyr-youtube-end-overlay-visible {
  display: block;
}

.plyr .plyr__control--overlaid {
  z-index: 2;
}

/*
 * Transparent layer above the YouTube iframe. It blocks iframe navigation,
 * context-menu, modifier-click, and touch events without covering Plyr's
 * controls, which live outside the video wrapper.
 */
.plyr .plyr__video-wrapper {
  position: relative;
}

.plyr .my-plyr-youtube-click-blocker {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* Keep the custom Plyr center button above the blocker. */
.plyr .plyr__control--overlaid {
  z-index: 2;
}

/*
 * YouTube renders its title inside the cross-origin iframe, so it cannot be
 * selected directly. This mask covers the top title strip after the paused
 * controls timeout. It is pointer-transparent so center-zone playback still
 * works underneath it.
 */
.plyr .my-plyr-youtube-title-mask {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  height: 56px;
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.plyr .my-plyr-youtube-title-mask-visible {
  opacity: 1;
  visibility: visible;
}

/* Double-tap seek feedback, similar to YouTube's +10s / -10s indicator. */
.plyr .my-plyr-seek-feedback {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  min-height: 46px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
}

.plyr .my-plyr-seek-feedback-visible {
  animation: my-plyr-seek-feedback 650ms ease-out both;
}

@keyframes my-plyr-seek-feedback {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .plyr .my-plyr-seek-feedback-visible {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* Hide the complete Plyr control layer after prolonged pause. */
.plyr.my-plyr-paused-controls-hidden .plyr__controls {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.plyr.my-plyr-paused-controls-hidden .plyr__control--overlaid {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Fullscreen support: native fullscreen plus Plyr's fixed-position fallback. */
.plyr:fullscreen,
.plyr:-webkit-full-screen,
.plyr.plyr--fullscreen-fallback {
  --pyb-safe-top: env(safe-area-inset-top, 0px);
  --pyb-safe-right: env(safe-area-inset-right, 0px);
  --pyb-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pyb-safe-left: env(safe-area-inset-left, 0px);
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: var(--pyb-safe-top) var(--pyb-safe-right) var(--pyb-safe-bottom) var(--pyb-safe-left) !important;
  box-sizing: border-box !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  background: #000 !important;
  z-index: 2147483647 !important;
}

/* Prefer the dynamic viewport on iOS Safari so the fallback follows toolbar
 * expansion/collapse and recalculates correctly after orientation changes. */
@supports (height: 100dvh) {
  .plyr:fullscreen,
  .plyr:-webkit-full-screen,
  .plyr.plyr--fullscreen-fallback {
    width: 100dvw !important;
    height: 100dvh !important;
    min-width: 100dvw !important;
    min-height: 100dvh !important;
  }
}

/* Older iOS releases expose safe areas through constant(). */
@supports (top: constant(safe-area-inset-top)) {
  .plyr:fullscreen,
  .plyr:-webkit-full-screen,
  .plyr.plyr--fullscreen-fallback {
    --pyb-safe-top: constant(safe-area-inset-top);
    --pyb-safe-right: constant(safe-area-inset-right);
    --pyb-safe-bottom: constant(safe-area-inset-bottom);
    --pyb-safe-left: constant(safe-area-inset-left);
  }
}

.plyr:fullscreen .plyr__video-wrapper,
.plyr:-webkit-full-screen .plyr__video-wrapper,
.plyr.plyr--fullscreen-fallback .plyr__video-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
}

.plyr:fullscreen .plyr__video-embed,
.plyr:-webkit-full-screen .plyr__video-embed,
.plyr.plyr--fullscreen-fallback .plyr__video-embed,
.plyr:fullscreen video,
.plyr:fullscreen iframe,
.plyr:-webkit-full-screen video,
.plyr:-webkit-full-screen iframe,
.plyr.plyr--fullscreen-fallback video,
.plyr.plyr--fullscreen-fallback iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain;
  object-position: center center;
}

/* Keep the custom controls clear of the iPhone home-indicator area. */
.plyr:fullscreen .plyr__controls,
.plyr:-webkit-full-screen .plyr__controls,
.plyr.plyr--fullscreen-fallback .plyr__controls {
  margin-left: var(--pyb-safe-left) !important;
  margin-right: var(--pyb-safe-right) !important;
  padding-bottom: var(--pyb-safe-bottom) !important;
}

/* Landscape iPhones have the largest side insets around the notch. */
@media (orientation: landscape) {
  .plyr:fullscreen,
  .plyr:-webkit-full-screen,
  .plyr.plyr--fullscreen-fallback {
    padding-left: max(0px, var(--pyb-safe-left)) !important;
    padding-right: max(0px, var(--pyb-safe-right)) !important;
  }
}

/* Portrait mode keeps the video centered while honoring top and bottom insets. */
@media (orientation: portrait) {
  .plyr:fullscreen .plyr__video-embed,
  .plyr:-webkit-full-screen .plyr__video-embed,
  .plyr.plyr--fullscreen-fallback .plyr__video-embed,
  .plyr:fullscreen video,
  .plyr:fullscreen iframe,
  .plyr:-webkit-full-screen video,
  .plyr:-webkit-full-screen iframe,
  .plyr.plyr--fullscreen-fallback video,
  .plyr.plyr--fullscreen-fallback iframe {
    object-position: center center;
  }
}