video::cue {
  font-size: 1.85rem;
  line-height: 1.5rem;
}

@media (max-width: 767px) {
  video::cue {
 		 font-size: 1rem;
 		 line-height: 1.15rem;
  }
}

.video_progress-wr {
  touch-action: none;
}

.video_progress-buffer,
.video_progress-played {
  pointer-events: none;
}
  
.video_wr:hover .video_controls {
  opacity: 1;
}

/* When wrapper goes fullscreen */
[data-video-wrapper]:fullscreen {
  display: flex;
  justify-content: center;
  align-items: center;
  background: black; /* prevents white flash */
}

/* Center video element inside fullscreen */
[data-video-wrapper]:fullscreen video {
  width: 100%;
  height: auto;
  max-height: 100vh;
  object-fit: contain;
}


.video_click-feedback {
  opacity: 0;
  transform: scale(0.75);
}
/* Show active state */
.video_click-feedback.is-visible {
  opacity: 1;
  transform: scale(1);
}

.video_click-feedback[data-state="play"] [data-icon="play"],
.video_click-feedback[data-state="pause"] [data-icon="pause"] {
  opacity: 1;
  transform: scale(1);
}

/* Hide the other icon completely */
.video_click-feedback[data-state="play"] [data-icon="pause"],
.video_click-feedback[data-state="pause"] [data-icon="play"] {
  opacity: 0;
  transform: scale(0.75);
}

/* Universal fullscreen layout */
[data-video-wrapper]:fullscreen,
[data-video-wrapper]:-webkit-full-screen {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: black;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

/* Video perfectly centered, including mobile Safari */
[data-video-wrapper]:fullscreen video,
[data-video-wrapper]:-webkit-full-screen video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Make sure controls stay anchored at bottom */
[data-video-wrapper]:fullscreen [data-video-controls],
[data-video-wrapper]:-webkit-full-screen [data-video-controls] {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}