/* Container styles */
body {
  margin: 0;
  padding: 0;
}

.custom-video-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: #000;
}

/* My Video Container */
.myVideo-container {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  pointer-events: none;
  /* 讓點擊事件穿透或失效，避免直接點擊到影片 */
}

.myVideo-container iframe {
  margin-left: -100%;
  height: 100% !important;
  width: 300% !important;
}

.myVideo-container .plyr--video,
.myVideo-container .plyr {
  width: 100%;
  height: 100%;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* background-color: rgba(0, 0, 0, 0.2); 如果需要半透明黑色遮罩可以加上這行 */
}

/* Controls Wrapper */
.video-controls {
  position: absolute;
  bottom: 1rem;
  left: 1.25rem;
  width: calc(100% - 2.5rem);
  z-index: 10;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.buttons-wrapper {
  display: flex;
  justify-content: flex-end;
}

.control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid white;
  background-color: rgba(0, 0, 0, 0.35);
  padding: 0.25rem 0.625rem;
  cursor: pointer;
  outline: none;
  color: white;
}

.control-btn.play-btn {
  border-left-width: 0;
}

/* Icon Styles & Toggle Logic */
.icon-wrapper {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-wrapper svg {
  width: 100%;
  height: 100%;
}

/* Play/Pause Toggle */
.play-btn .icon-play { display: none; }
.play-btn .icon-pause { display: block; }
.play-btn.is-paused .icon-play { display: block; }
.play-btn.is-paused .icon-pause { display: none; }

/* Mute/Unmute Toggle */
.mute-btn .icon-sound-high { display: none; }
.mute-btn .icon-sound-down { display: block; } /* Default is muted */
.mute-btn.is-unmuted .icon-sound-high { display: block; }
.mute-btn.is-unmuted .icon-sound-down { display: none; }