/* ── Reset ──────────────────────────────────────────────────────────────── */
.vp-root *,.vp-root *::before,.vp-root *::after{box-sizing:border-box;margin:0;padding:0;}

/* ── Root container ─────────────────────────────────────────────────────── */
.vp-root{
  position:relative;display:block;width:100%;
  aspect-ratio:16/9;max-height:60vh;overflow:hidden;
  background:#000;color:#fff;
  font-family:Roboto,Arial,sans-serif;font-size:14px;
  -webkit-user-select:none;user-select:none;cursor:default;
}
.vp-root.vp-theater{max-height:80vh;}
.vp-root:fullscreen,
.vp-root:-webkit-full-screen{max-height:none;aspect-ratio:auto;}

/* ── Inner wrapper fills root ───────────────────────────────────────────── */
.vp-wrap{position:absolute;inset:0;}

/* ── Video element ──────────────────────────────────────────────────────── */
.vp-video{width:100%;height:100%;display:block;object-fit:contain;background:#000;}

/* ── Buffering spinner ──────────────────────────────────────────────────── */
.vp-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;}
.vp-spinner[hidden]{display:none;}
.vp-spinner-ring{width:52px;height:52px;border:4px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:vp-spin .8s linear infinite;}
@keyframes vp-spin{to{transform:rotate(360deg);}}

/* ── Click layer ────────────────────────────────────────────────────────── */
.vp-click-layer{position:absolute;inset:0;z-index:3;cursor:pointer;}

/* ── Big play button ────────────────────────────────────────────────────── */
.vp-big-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:4;pointer-events:none;transition:opacity .15s;}
.vp-big-play[hidden]{display:none;}
.vp-big-play-svg{filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));transition:transform .1s;}
.vp-click-layer:hover~.vp-big-play .vp-big-play-svg,.vp-big-play:hover .vp-big-play-svg{transform:scale(1.08);}
.vp-big-play-bg{fill:rgba(0,0,0,.75);}
.vp-big-play-arrow{fill:#fff;}

/* ── Flash indicator ────────────────────────────────────────────────────── */
.vp-flash{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.72);backdrop-filter:blur(2px);
  color:#fff;font-size:13px;font-weight:500;
  padding:7px 14px;border-radius:4px;
  pointer-events:none;z-index:10;
  opacity:0;transition:opacity .25s;
}
.vp-flash[hidden]{display:none;}
.vp-flash.vp-flash-on{opacity:1;transition:none;}

/* ── Controls (gradient + bar) ──────────────────────────────────────────── */
.vp-controls{
  position:absolute;bottom:0;left:0;right:0;z-index:5;
  background:linear-gradient(transparent,rgba(0,0,0,.72) 60%);
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.vp-controls.vp-show{opacity:1;pointer-events:auto;}
/* Always show controls while paused */
.vp-root.vp-paused .vp-controls{opacity:1;pointer-events:auto;}

/* ── Progress bar area ──────────────────────────────────────────────────── */
.vp-prog-area{
  position:relative;height:18px;padding:0 12px;
  display:flex;align-items:flex-end;cursor:pointer;
}
.vp-prog-track{
  position:relative;width:100%;height:3px;border-radius:2px;
  background:rgba(255,255,255,.22);
  transition:height .12s ease;
}
.vp-prog-area:hover .vp-prog-track{height:5px;}
.vp-prog-buf{position:absolute;inset-block:0;left:0;height:100%;background:rgba(255,255,255,.38);border-radius:2px;transition:width .3s linear;}
.vp-prog-fill{position:absolute;inset-block:0;left:0;height:100%;background:#f00;border-radius:2px;}
.vp-prog-knob{
  position:absolute;top:50%;left:0;
  width:13px;height:13px;border-radius:50%;background:#f00;
  transform:translate(-50%,-50%) scale(0);transition:transform .12s ease;
  pointer-events:none;
}
.vp-prog-area:hover .vp-prog-knob{transform:translate(-50%,-50%) scale(1);}
/* Transparent range input over the styled bar */
.vp-prog-input{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;margin:0;
  -webkit-appearance:none;appearance:none;
}

/* ── Controls bar ───────────────────────────────────────────────────────── */
.vp-bar{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 8px;}
.vp-bar-left,.vp-bar-right{display:flex;align-items:center;gap:2px;}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.vp-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  background:none;border:none;cursor:pointer;
  color:#fff;border-radius:2px;outline:none;flex-shrink:0;
}
.vp-btn:hover{opacity:.85;}
.vp-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.vp-icon{width:24px;height:24px;fill:currentColor;display:block;pointer-events:none;}

/* ── Play / Pause icon switching ────────────────────────────────────────── */
/* Default: show play icon (paused state) */
.vp-pause-icon{display:none;}
.vp-play-icon{display:block;}
/* While playing (no vp-paused class): swap icons */
.vp-root:not(.vp-paused) .vp-play-icon{display:none;}
.vp-root:not(.vp-paused) .vp-pause-icon{display:block;}

/* ── Volume control ─────────────────────────────────────────────────────── */
.vp-vol-group{display:flex;align-items:center;}
.vp-vol-slider{
  position:relative;height:36px;width:0;overflow:hidden;
  display:flex;align-items:center;
  transition:width .18s ease;
}
.vp-vol-group:hover .vp-vol-slider,
.vp-vol-slider:focus-within{width:72px;}
.vp-vol-track{
  position:absolute;left:4px;right:4px;height:3px;
  background:rgba(255,255,255,.25);border-radius:2px;
  pointer-events:none;
}
.vp-vol-fill{position:absolute;top:0;left:0;height:100%;background:#fff;border-radius:2px;width:100%;}
.vp-vol-knob{
  position:absolute;top:50%;
  width:10px;height:10px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);pointer-events:none;
}
.vp-vol-input{
  position:absolute;left:4px;right:4px;
  width:calc(100% - 8px);height:100%;
  opacity:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}

/* ── Time ───────────────────────────────────────────────────────────────── */
.vp-time{font-size:12px;font-weight:500;white-space:nowrap;padding:0 6px;line-height:1;}
.vp-time-sep{color:rgba(255,255,255,.6);}

/* ── Captions button active state ───────────────────────────────────────── */
.vp-btn[data-vp="captions"][aria-pressed="true"]{color:#3ea6ff;}

/* ── Theater mode icon switching ────────────────────────────────────────── */
.vp-theater-wide{display:none;}
.vp-root.vp-theater .vp-theater-normal{display:none;}
.vp-root.vp-theater .vp-theater-wide{display:block;}

/* ── Fullscreen icon switching ──────────────────────────────────────────── */
.vp-fs-exit{display:none;}
.vp-root:fullscreen .vp-fs-enter,
.vp-root:-webkit-full-screen .vp-fs-enter{display:none;}
.vp-root:fullscreen .vp-fs-exit,
.vp-root:-webkit-full-screen .vp-fs-exit{display:block;}

/* ── Settings panel ─────────────────────────────────────────────────────── */
.vp-settings-wrap{position:relative;}
.vp-settings-panel{
  position:absolute;bottom:calc(100% + 6px);right:0;
  background:rgba(24,24,24,.97);border-radius:4px;
  min-width:176px;padding:6px 0;z-index:20;
  box-shadow:0 4px 16px rgba(0,0,0,.6);
}
.vp-settings-panel[hidden]{display:none;}
.vp-settings-section{padding:8px 0;}
.vp-settings-section+.vp-settings-section{border-top:1px solid rgba(255,255,255,.1);}
.vp-settings-label{
  padding:2px 16px 6px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.vp-speeds,.vp-qualities{display:flex;flex-direction:column;}
.vp-speed-btn,.vp-qual-btn{
  background:none;border:none;color:rgba(255,255,255,.8);
  font-size:13px;text-align:left;
  padding:5px 16px;cursor:pointer;
  display:flex;align-items:center;gap:8px;
}
.vp-speed-btn:hover,.vp-qual-btn:hover{background:rgba(255,255,255,.1);color:#fff;}
.vp-speed-on,.vp-qual-on{color:#fff;font-weight:600;}
.vp-speed-on::before,.vp-qual-on::before{content:"✓";font-size:11px;width:12px;display:inline-block;}
.vp-speed-btn:not(.vp-speed-on),.vp-qual-btn:not(.vp-qual-on){padding-left:28px;}