/* tmt-single-video-player.css */

/* Base & vars */
.tmt-single-video-player, .tmt-single-video-player * { box-sizing: border-box; }
.tmt-single-video-player{
  --panel:#181818; --text:#eee; --muted:#aaa;
  --rail:#2a2a2a; --rail2:#3a3a3a; --accent:#ff0033;
  --track-h:6px; --thumb:12px; --icon:26px; --btn:40px;
  color:var(--text);
  font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans",sans-serif;
}
.tmt-single-video-player .svp-wrap{ max-width:1100px; margin:10px auto; }
.tmt-single-video-player .svp-stage{
  position:relative; width:100%; aspect-ratio:16/9; background:#000;
  border-radius:12px; overflow:hidden; user-select:none; touch-action:none;
}
.tmt-single-video-player .svp-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }

/* Buttons (no theme ovals) */
.tmt-single-video-player .btn{
  all:unset; display:inline-flex; align-items:center; justify-content:center;
  width:var(--btn); height:var(--btn); border-radius:4px; cursor:pointer; color:#fff;
}
.tmt-single-video-player .btn .ic{ width:var(--icon); height:var(--icon); display:block; fill:currentColor; stroke:currentColor; }

/* Controls */
.tmt-single-video-player .svp-controls{ background:var(--panel); border-radius:12px; padding:12px; margin-top:10px; }
.tmt-single-video-player .svp-row{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.tmt-single-video-player .time{ font-variant-numeric:tabular-nums; color:#ddd; font-size:13px; white-space:nowrap; }
.tmt-single-video-player .right{ margin-left:auto; display:flex; align-items:center; gap:6px; }

/* Progress */
.tmt-single-video-player .svp-progress-wrap{ position:relative; width:100%; height:var(--track-h); display:flex; align-items:center; }
.tmt-single-video-player .svp-progress-rail{ position:absolute; inset:0; background:var(--rail); border-radius:999px; }
.tmt-single-video-player .svp-progress-buffer{ position:absolute; inset:0; background:linear-gradient(90deg,#888 0 var(--buf,0%), transparent 0); border-radius:999px; opacity:.35; }
.tmt-single-video-player .svp-progress-input{ appearance:none; width:100%; height:var(--track-h); background:transparent; position:relative; z-index:2; }
.tmt-single-video-player .svp-progress-input::-webkit-slider-runnable-track{ height:var(--track-h); background:transparent; }
.tmt-single-video-player .svp-progress-input::-moz-range-track{ height:var(--track-h); background:transparent; }
.tmt-single-video-player .svp-progress-input::-webkit-slider-thumb{
  appearance:none; width:var(--thumb); height:var(--thumb); border-radius:50%; background:#fff;
  margin-top: calc((var(--thumb) - var(--track-h))/-2); box-shadow:0 1px 3px #0007;
}
.tmt-single-video-player .svp-progress-input::-moz-range-thumb{
  width:var(--thumb); height:var(--thumb); border-radius:50%; background:#fff; border:none;
}
.tmt-single-video-player .svp-progress-fill{
  pointer-events:none; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--accent) 0 var(--pct,0%), transparent 0);
  border-radius:999px;
}

/* Volume (vertical, click-to-open) */
.tmt-single-video-player .vol{ position:relative; display:inline-flex; align-items:center; }
.tmt-single-video-player .vol-pop{
  position:absolute; bottom: calc(var(--btn) + 8px); left:50%; transform:translateX(-50%);
  width:44px; height:160px; padding:8px 6px; background:#1e1e1e; border-radius:10px;
  display:none; align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .14s;
}
.tmt-single-video-player .vol.open .vol-pop{ display:flex; opacity:1; visibility:visible; pointer-events:auto; }
.tmt-single-video-player .vol .svp-vol{
  width:120px; height:var(--track-h); transform:rotate(-90deg);
  appearance:none; background:var(--rail2); border-radius:999px; padding:0; margin:0;
}
.tmt-single-video-player .vol .svp-vol::-webkit-slider-runnable-track{ height:var(--track-h); background:transparent; }
.tmt-single-video-player .vol .svp-vol::-webkit-slider-thumb{
  appearance:none; width:var(--thumb); height:var(--thumb); border-radius:50%; background:#fff;
  margin-top: calc((var(--thumb) - var(--track-h))/-2); box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.tmt-single-video-player .vol .svp-vol::-moz-range-track{ height:var(--track-h); background:transparent; }
.tmt-single-video-player .vol .svp-vol::-moz-range-thumb{ width:var(--thumb); height:var(--thumb); border-radius:50%; background:#fff; border:none; }

/* Repeat active → red (no background) */
.tmt-single-video-player .svp-repeat .ic{ color:#fff; stroke:currentColor; transform:scale(.92); transform-origin:50% 50%; }
.tmt-single-video-player .svp-repeat[aria-pressed="true"] .ic,
.tmt-single-video-player .svp-repeat[aria-pressed="true"] .ic *{ color:var(--accent)!important; stroke:var(--accent)!important; fill:none!important; }

/* Playlist overlay */
.tmt-single-video-player .svp-pl-toggle{
  position:absolute; top:10px; right:10px; width:36px; height:36px; background:#0008; border-radius:8px;
}
.tmt-single-video-player .svp-pl-overlay{
  position:absolute; top:10px; right:10px; width:min(320px, 60%); max-height:70%; background:#000000c0;
  border-radius:12px; padding:10px; backdrop-filter: blur(2px);
  display:none; flex-direction:column; gap:8px; overflow:hidden;
}
.tmt-single-video-player.svp-pl-open .svp-pl-overlay{ display:flex; }
.tmt-single-video-player .svp-pl-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tmt-single-video-player .svp-pl-title{ font-weight:600; font-size:14px; color:#fff; }
.tmt-single-video-player .svp-pl-list{ overflow:auto; display:flex; flex-direction:column; gap:6px; padding-right:4px; }
.tmt-single-video-player .svp-pl-item{
  all:unset; display:flex; align-items:center; gap:8px; padding:8px; border-radius:8px; cursor:pointer;
  background:#ffffff10;
}
.tmt-single-video-player .svp-pl-item[aria-current="true"]{ background:#ffffff22; outline:1px solid #ffffff44; }
.tmt-single-video-player .svp-thumb{ width:64px; height:36px; object-fit:cover; border-radius:6px; background:#111; }
.tmt-single-video-player .svp-title{ color:#fff; font-size:13px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:200px; }

/* Compact modes */
.tmt-single-video-player.svp-compact{
  --track-h:5px; --thumb:10px; --icon:22px; --btn:36px;
}
.tmt-single-video-player.svp-super{
  --track-h:5px; --thumb:10px; --icon:20px; --btn:32px;
}
/* Reorder controls: Prev (back) first, then Play/Pause, then Next */
.tmt-single-video-player .svp-row {
  display: flex;
}

.tmt-single-video-player .svp-prev  { order: 0; }
.tmt-single-video-player .svp-play,
.tmt-single-video-player .svp-pause { order: 1; }  /* play/pause share the same slot */
.tmt-single-video-player .svp-next  { order: 2; }
.tmt-single-video-player .vol       { order: 3; }
.tmt-single-video-player .time      { order: 4; }
.tmt-single-video-player .right     { order: 5; }