/* THE NIR Video 播放器皮膚：YouTube 的版面與操作手感，nir-blue 系主色。
   原則：完全蓋掉 video.js 預設 icon font，全部改 SVG；進度條吸在控制列頂緣。 */

.video-js { color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* ── 控制列 ───────────────────────────── */
.video-js .vjs-control-bar {
  height: 48px;
  padding: 0 6px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  display: flex;
  align-items: center;
  transition: opacity 0.2s;
}
.video-js.vjs-user-inactive.vjs-playing .vjs-control-bar { opacity: 0; }

.video-js .vjs-button { width: 44px; height: 48px; }

/* 關掉 icon font，全部用 SVG 背景 */
.video-js [class*="vjs-icon-"]:before,
.video-js .vjs-icon-placeholder:before { content: "" !important; }
.video-js .vjs-button .vjs-icon-placeholder {
  display: block; width: 100%; height: 100%;
  background-position: center; background-repeat: no-repeat; background-size: 24px;
  opacity: 0.95;
}
.video-js .vjs-button:hover .vjs-icon-placeholder { opacity: 1; }

.video-js .vjs-play-control .vjs-icon-placeholder {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E");
}
.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z'/%3E%3C/svg%3E");
}

.video-js .vjs-mute-control .vjs-icon-placeholder {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
}
.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder,
.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z'/%3E%3C/svg%3E");
}
.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E");
}

.video-js .vjs-fullscreen-control .vjs-icon-placeholder {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E");
}
.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'/%3E%3C/svg%3E");
}

.np-settings-button .vjs-icon-placeholder {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E");
}

/* ── 進度條：吸在控制列頂緣、hover 變粗＋出現圓點 ── */
.video-js .vjs-progress-control {
  /* 命中區刻意比 3px 細線大很多（上下各約 14px），瞄不準也抓得到，不會誤觸影片的播放切換 */
  position: absolute; left: 10px; right: 10px; top: -14px;
  width: auto; height: 28px; z-index: 1;
  display: flex; align-items: center; cursor: pointer;
}
.video-js .vjs-progress-holder {
  height: 3px; margin: 0; width: 100%;
  background: rgba(255, 255, 255, 0.25);
  transition: height 0.1s;
}
.video-js .vjs-progress-control:hover .vjs-progress-holder { height: 5px; }
.video-js .vjs-load-progress { background: rgba(255, 255, 255, 0.35); }
.video-js .vjs-load-progress div { background: transparent; }
.video-js .vjs-play-progress { background: #3b82f6; }
.video-js .vjs-play-progress:before { display: none; }
.video-js .vjs-play-progress:after {
  content: ""; position: absolute; right: -7px; top: 50%;
  width: 14px; height: 14px; border-radius: 50%; background: #3b82f6;
  transform: translateY(-50%) scale(0); transition: transform 0.1s;
}
.video-js .vjs-progress-control:hover .vjs-play-progress:after { transform: translateY(-50%) scale(1); }
.video-js .vjs-play-progress .vjs-time-tooltip,
.video-js .vjs-progress-control:hover .vjs-play-progress .vjs-time-tooltip { display: none !important; }
.video-js .vjs-time-tooltip {
  background: rgba(28, 28, 30, 0.92); color: #fff;
  border-radius: 4px; font-size: 12px; padding: 4px 7px; top: -34px;
}

/* ── 時間（現在 / 總長，YouTube 格式） ── */
.video-js .vjs-time-control {
  display: flex; align-items: center;
  padding: 0 3px; font-size: 13px; min-width: 0; line-height: 48px;
}
.video-js .vjs-remaining-time { display: none; }
.video-js .vjs-time-divider { padding: 0 3px; min-width: 0; }

/* ── 音量：hover 時水平滑桿展開 ── */
.video-js .vjs-volume-panel { display: flex; align-items: center; width: 44px; transition: width 0.2s; }
.video-js .vjs-volume-panel:hover,
.video-js .vjs-volume-panel.vjs-hover,
.video-js .vjs-volume-panel:focus-within { width: 116px; }
.video-js .vjs-volume-control.vjs-volume-horizontal {
  width: 0; height: 48px; transition: width 0.2s; overflow: hidden;
  display: flex; align-items: center; opacity: 1; visibility: hidden;
}
.video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
.video-js .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal { width: 72px; visibility: visible; }
.video-js .vjs-volume-bar.vjs-slider-horizontal {
  height: 3px; width: 56px; margin: 0 8px;
  background: rgba(255, 255, 255, 0.25);
}
.video-js .vjs-volume-level { background: #fff; height: 3px; }
.video-js .vjs-volume-level:before {
  content: ""; font-size: 0; position: absolute; right: -6px; top: 50%;
  transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: #fff;
}

/* ── 佔位推擠（左右分組） ── */
.video-js .vjs-custom-control-spacer { flex: 1 1 auto; display: block; }

/* ── 設定選單（速度）：保留 vjs 的 height:0 外框＋絕對定位內容，只換皮 ── */
.video-js .vjs-menu-button-popup .vjs-menu {
  width: 160px; left: auto; right: -8px;
}
.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  position: absolute; right: 0; bottom: 56px; width: 160px;
  background: rgba(28, 28, 30, 0.92); border-radius: 10px; padding: 6px 0;
  max-height: 280px;
}
.video-js .vjs-menu li.vjs-menu-item {
  font-size: 13px; padding: 8px 16px; text-transform: none; text-align: left; line-height: 1.4;
  display: flex; justify-content: flex-start; /* vjs8 的選單項目是 flex，置中靠這裡改 */
}
.video-js .vjs-menu li.vjs-menu-item:hover { background: rgba(255, 255, 255, 0.12); }
.video-js .vjs-menu li.vjs-selected { background: transparent; color: #60a5fa; font-weight: 700; }
.video-js .vjs-menu li.vjs-selected:after { content: " ✓"; }

/* ── 中央大播放鈕 ── */
.video-js .vjs-big-play-button {
  width: 76px; height: 76px; border-radius: 50%; border: 0;
  background: rgba(28, 28, 30, 0.72);
  top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder {
  display: block; width: 100%; height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 34px no-repeat;
}
.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus { background: #1d4ed8; }

/* ── 播放／暫停中央回饋動畫 ── */
.np-tap-flash {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px;
  margin: -36px 0 0 -36px; border-radius: 50%;
  background-color: rgba(28, 28, 30, 0.65);
  background-position: center; background-repeat: no-repeat; background-size: 30px;
  opacity: 0; pointer-events: none; z-index: 2;
}
.np-tap-flash[data-kind="play"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
.np-tap-flash[data-kind="pause"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E");
}
.np-tap-flash.np-anim { animation: np-flash 0.5s ease-out forwards; }
@keyframes np-flash {
  0% { opacity: 0.9; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* 其他 */
.video-js .vjs-poster img { object-fit: cover; }
.video-js .vjs-control:focus { text-shadow: none; }
.video-js .vjs-control:focus-visible { outline: 2px solid #60a5fa; outline-offset: -4px; border-radius: 8px; }