.video_progress {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: transparent; /* we'll define tracks separately */
  cursor: pointer;
  position: relative;
}
.video_progress::before { /* expands clickable area vertically */
  content: '';
  position: absolute;
  top: -16px;                  
  bottom: -20px;
  left: 0;
  right: 0;
  cursor: pointer;
}

/* Chrome, Safari, Edge track */
.video_progress::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    #ffffff var(--progress, 0%),         /* solid white fill */
    rgba(255,255,255,0.2) var(--progress, 0%) /* 20% opacity remainder */
  );
}

/* Firefox track (base) */
.video_progress::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.2);
}

/* Firefox progress fill */
.video_progress::-moz-range-progress {
  background: #ffffff;
  height: 6px;
  border-radius: 3px;
}

/* Hide thumb in Chrome/Safari/Edge */
.video_progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 0;
  background: transparent;
  border: none;
}

/* Hide thumb in Firefox */
.video_progress::-moz-range-thumb {
  width: 0;
  height: 0;
  border: none;
  background: transparent;
}

.video_overlay-btn:hover .video_overlay-btn_icon-wr{
  	transform: scale(1.1);
  }
  
.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; /* Optional: 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%;
}