/* ============================================
   VIDEO CONTAINER
   ============================================ */

.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: var(--player-z-video);
  overflow: visible;
  pointer-events: none;
}

/* ============================================
   VIDEO ELEMENT
   ============================================ */

.video-element {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: auto;
}

/* ============================================
   HIDE NATIVE MEDIA CONTROLS
   ============================================ */

/* Chrome/Safari/Edge */
.video-element::-webkit-media-controls {
  display: none !important;
}

.video-element::-webkit-media-controls-enclosure {
  display: none !important;
}

.video-element::-webkit-media-controls-panel {
  display: none !important;
}

/* Firefox */
.video-element::-moz-media-controls {
  display: none !important;
}

/* ============================================
   SUBTITLE STYLING - Modern & Cross-Browser
   Optimized for Chromium and Firefox
   ============================================ */

/* ==================== BASE CUE STYLES ==================== */

/* All browsers - Base subtitle appearance */
::cue {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  background-color: rgba(0, 0, 0, 0.9) !important;
  padding: 0.4em 0.8em !important;
  border-radius: 6px !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 2px 8px rgba(0, 0, 0, 0.8) !important;
  white-space: pre-line !important;
}

/* Chromium specific */
.video-element::cue {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  background-color: rgba(0, 0, 0, 0.9) !important;
  padding: 0.4em 0.8em !important;
  border-radius: 6px !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 2px 8px rgba(0, 0, 0, 0.8) !important;
  white-space: pre-line !important;
}

/* Firefox specific - Base styles */
::-moz-cue {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  background-color: rgba(0, 0, 0, 0.9) !important;
  padding: 0.4em 0.8em !important;
  border-radius: 6px !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 2px 8px rgba(0, 0, 0, 0.8) !important;
  white-space: pre-line !important;
}

video::-moz-cue {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  background-color: rgba(0, 0, 0, 0.9) !important;
  padding: 0.4em 0.8em !important;
  border-radius: 6px !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 2px 8px rgba(0, 0, 0, 0.8) !important;
  white-space: pre-line !important;
}

.video-element::-moz-cue {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  background-color: rgba(0, 0, 0, 0.9) !important;
  padding: 0.4em 0.8em !important;
  border-radius: 6px !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 2px 8px rgba(0, 0, 0, 0.8) !important;
  white-space: pre-line !important;
}

/* ==================== TEXT FORMATTING ==================== */

::cue(b), ::cue(strong) {
  font-weight: 900 !important;
}

::cue(i), ::cue(em) {
  font-style: italic !important;
}

::cue(u) {
  text-decoration: underline !important;
}

.video-element::cue(b),
.video-element::cue(strong) {
  font-weight: 900 !important;
}

.video-element::cue(i),
.video-element::cue(em) {
  font-style: italic !important;
}

.video-element::cue(u) {
  text-decoration: underline !important;
}

/* Firefox text formatting */
::-moz-cue(b), ::-moz-cue(strong) {
  font-weight: 900 !important;
}

::-moz-cue(i), ::-moz-cue(em) {
  font-style: italic !important;
}

::-moz-cue(u) {
  text-decoration: underline !important;
}

/* ==================== CHROMIUM POSITIONING ==================== */

/* Container - Chromium */
.video-element::-webkit-media-text-track-container {
  position: absolute !important;
  bottom: var(--player-subtitle-bottom-offset) !important;
  bottom: calc(var(--player-subtitle-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  overflow: visible !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Display wrapper - Chromium */
.video-element::-webkit-media-text-track-display {
  width: 100% !important;
  max-width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 20px !important;

  text-align: center !important;
}

/* ==================== FIREFOX POSITIONING ==================== */

/* Firefox - Position subtitles using video wrapper approach */
@-moz-document url-prefix() {
  .video-container {
    position: relative;
  }

  .video-element {
    position: relative;
  }

  /* Firefox subtitle container positioning */
  .video-element::cue {
    position: relative;
  }
}

/* Firefox - Use text track display positioning */
video::-moz-text-track-display {
  position: absolute !important;
  bottom: var(--player-subtitle-bottom-offset) !important;
  bottom: calc(var(--player-subtitle-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 20px !important;
  margin: 0 !important;

  text-align: center !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.video-element::-moz-text-track-display {
  position: absolute !important;
  bottom: var(--player-subtitle-bottom-offset) !important;
  bottom: calc(var(--player-subtitle-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 20px !important;
  margin: 0 !important;

  text-align: center !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* ==================== FULLSCREEN ==================== */

.video-element:fullscreen::cue,
:fullscreen .video-element::cue {
  font-size: 2rem !important;
  padding: 0.5em 1em !important;
}

::-moz-cue:fullscreen,
video:fullscreen::-moz-cue,
.video-element:fullscreen::-moz-cue,
:fullscreen ::-moz-cue,
:fullscreen video::-moz-cue,
:fullscreen .video-element::-moz-cue {
  font-size: 2rem !important;
  padding: 0.5em 1em !important;
}

.video-element:fullscreen::-webkit-media-text-track-container,
:fullscreen .video-element::-webkit-media-text-track-container {
  bottom: calc(var(--player-subtitle-bottom-offset) + 40px) !important;
  bottom: calc(var(--player-subtitle-bottom-offset) + 40px + env(safe-area-inset-bottom, 0px)) !important;
}

video:fullscreen::-moz-text-track-display,
.video-element:fullscreen::-moz-text-track-display,
:fullscreen video::-moz-text-track-display,
:fullscreen .video-element::-moz-text-track-display {
  bottom: calc(var(--player-subtitle-bottom-offset) + 40px) !important;
  bottom: calc(var(--player-subtitle-bottom-offset) + 40px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1024px) {
  ::cue,
  .video-element::cue,
  ::-moz-cue,
  video::-moz-cue,
  .video-element::-moz-cue {
    font-size: 1.35rem !important;
  }

  .video-player {
    --player-subtitle-bottom-offset: clamp(80px, 14vh, 120px);
  }
}

@media (max-width: 640px) {
  ::cue,
  .video-element::cue,
  ::-moz-cue,
  video::-moz-cue,
  .video-element::-moz-cue {
    font-size: 1.15rem !important;
    padding: 0.35em 0.7em !important;
  }

  .video-player {
    --player-subtitle-bottom-offset: 80px;
  }

  .video-element::-webkit-media-text-track-container {
    padding: 0 12px !important;
  }

  .video-element::-webkit-media-text-track-display {
    max-width: 92% !important;
  }

  video::-moz-text-track-display,
  .video-element::-moz-text-track-display {
    padding: 0 12px !important;
  }
}

@media (max-width: 375px) {
  ::cue,
  .video-element::cue,
  ::-moz-cue,
  video::-moz-cue,
  .video-element::-moz-cue {
    font-size: 1rem !important;
  }

  .video-player {
    --player-subtitle-bottom-offset: 60px;
  }
}