/* main.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

/* IMPORTANT: your JS adds this class */
body.no-scroll {
  overflow: hidden !important;
  touch-action: none;
}

/* iOS control visibility handling */
video.show-controls::-webkit-media-controls { display: block; }
video.hide-controls::-webkit-media-controls { display: none; }

/* ---------- VIDEO CONTAINER ---------- */
.video-container {
  position: relative;
  width: 80%;
  max-width: 900px;
  margin: 20px auto;
  background-color: #000;
  border-radius: 10px;
  overflow: hidden;
}

.video-js { width: 100%; height: auto; display: block; }


/* ---------- TIMELINE (CUSTOM, shown only in Fullscreen / Pseudo Fullscreen) ---------- */
.mos-timeline {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2%;
  width: 92%;
  height: 26px;
  z-index: 16;
  display: none;
  touch-action: pan-x;
}

#videoContainer.mos-pseudo-fullscreen .mos-timeline,
#videoContainer.mos-native-fullscreen .mos-timeline {
  display: block;
  bottom: 2%;
  width: 94%;
}

#voiceToggle {
  position: absolute;
  top: 10px;
  left: calc(57% + 130px);
  transform: translateX(-50%);
  padding: 8px 14px;
  background-color: #A8E1FF;
  color: #93278f;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  z-index: 20;
}

/* ---------- FULLSCREEN BUTTON ---------- */
#button {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background-color: #A8E1FF;
  color: #93278f;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  z-index: 20;
}
#button:hover { background-color: #7ECFFF; }

/* ---------- OVERLAY CONTROLS ---------- */
.overlay-controls {
  position: absolute;
  bottom: 4.25%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.overlay-controls:hover { opacity: 1; }
.overlay-controls button {
	padding: 8px 12px;
  background-color: rgba(168, 225, 255, 0.9);
  color: #93278f;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

/* ---------- NATIVE FULLSCREEN (DESKTOP / iPad) ---------- */
.video-container:fullscreen,
.video-container:-webkit-full-screen,
.video-container:-moz-full-screen,
.video-container:-ms-fullscreen {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  border-radius: 0;
}
.video-container:fullscreen video,
.video-container:-webkit-full-screen video,
.video-container:-moz-full-screen video,
.video-container:-ms-fullscreen video {
  max-width: 100vw;
  max-height: 100vh;
}

/* ---------- PSEUDO FULLSCREEN (iOS + Android) ---------- */
#videoContainer.mos-pseudo-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  min-width: 100vw;
  min-height: 100dvh;
  width: 100vw !important;
  height: 100dvh !important;
  padding: 0;
  margin: 0 !important;
  background: black !important;
  display: block !important;
  z-index: 2147483646 !important;
}

/* VIDEO ITSELF */
#videoContainer.mos-pseudo-fullscreen video,
#videoContainer.mos-pseudo-fullscreen .video-js,
#videoContainer.mos-pseudo-fullscreen .vjs-tech {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) !important;
}

/* ---------- OVERLAY CONTROLS: RESPONSIVE ---------- */
#videoContainer.mos-pseudo-fullscreen .overlay-controls {
  position: absolute;
  bottom: 10.75%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  z-index: 2147483647;
}

/* Landscape / wider screens → single row */
@media (orientation: landscape) { 
  #videoContainer.mos-pseudo-fullscreen .overlay-controls {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
		max-width: 100vw;
		-webkit-overflow-scrolling: touch;
  }

  #videoContainer.mos-pseudo-fullscreen .overlay-controls::-webkit-scrollbar {
    display: none;
  }
	
	 #videoContainer.mos-pseudo-fullscreen .overlay-controls button {
   flex-shrink: 0;
  }
}
	#videoContainer.mos-native-fullscreen .overlay-controls {
	position: absolute;
  bottom: 10.75%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  z-index: 2147483647;
}
	@media (orientation: landscape) {
  #videoContainer.mos-native-fullscreen .overlay-controls {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
		max-width: 100vw;
    -webkit-overflow-scrolling: touch;
  }
	
	#videoContainer.mos-native-fullscreen .overlay-controls::-webkit-scrollbar { 
	display: none; }

  #videoContainer.mos-native-fullscreen .overlay-controls button {
   flex-shrink: 0;
  }
}
/* ---------- CURSOR CONTROL ---------- */
.video-js.hide-controls,
#videoContainer.mos-pseudo-fullscreen .video-js.hide-controls {
  cursor: none;
}

#videoContainer:not(.mos-pseudo-fullscreen) #button {
  display: block !important;
  z-index: 2147483647 !important;
}

/* ---------- ANDROID NOTICE TIP (shows once, then again after 30 days) ---------- */
.mos-android-tip {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.55);
}
.mos-android-tip__box {
  max-width: 520px;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.mos-android-tip__title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #222;
}
.mos-android-tip__text {
  font-size: 14px;
  line-height: 1.35;
  color: #333;
}
.mos-android-tip__btn {
  margin-top: 12px;
  padding: 10px 16px;
  background-color: #A8E1FF;
  color: #93278f;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}
.mos-android-tip__btn:hover { background-color: #7ECFFF; }

/* ---------- VOICE NOTICE TIP (shown when voice is not available) ---------- */
.mos-voice-note {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.55);
}
.mos-voice-note__box {
  max-width: 520px;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.mos-voice-note__title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #222;
}
.mos-voice-note__text {
  font-size: 14px;
  line-height: 1.35;
  color: #333;
}
.mos-voice-note__btn {
  margin-top: 12px;
  padding: 10px 16px;
  background-color: #A8E1FF;
  color: #93278f;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}
.mos-voice-note__btn:hover { background-color: #7ECFFF; }