/* Video player — the custom control bar.
   Behaviour: assets/js/components/video-player.js
   Notes: docs/component-video-player-notes.md
   Every vp-* class is built at runtime; there is no authored root class. */

/* ── Control bar ── */
.vp-controls{position:absolute;bottom:0;left:0;right:0;height:44px;display:flex;align-items:center;gap:8px;padding:0 12px;background:rgba(0,0,0,.75);z-index:10;opacity:0;transition:opacity .3s ease;pointer-events:none}
.vp-controls.vp-visible{opacity:1;pointer-events:auto}
.vp-btn{background:none;border:none;cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;color:var(--white);transition:color .2s ease}
@media (hover:hover){.vp-btn:hover{color:var(--gold)}}
.vp-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
.vp-btn svg{width:20px;height:20px;fill:currentColor}
.vp-progress-wrap{flex:1;position:relative;height:44px;display:flex;align-items:center;cursor:pointer}
.vp-progress-track{position:relative;width:100%;height:4px;background:rgba(255,255,255,.2);border-radius:2px;overflow:visible}
.vp-progress-buffer{position:absolute;top:0;left:0;height:100%;background:rgba(255,255,255,.3);border-radius:2px;width:0;pointer-events:none}
.vp-progress-fill{position:absolute;top:0;left:0;height:100%;background:var(--gold);border-radius:2px;width:0;pointer-events:none}
.vp-progress-scrubber{position:absolute;top:50%;left:0;width:14px;height:14px;background:var(--white);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .2s ease;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.vp-progress-wrap:hover .vp-progress-scrubber,.vp-progress-wrap.vp-dragging .vp-progress-scrubber{opacity:1}
@media (hover:hover){.vp-progress-wrap:hover .vp-progress-track{height:6px}}
.vp-progress-tooltip{position:absolute;bottom:28px;left:0;transform:translateX(-50%);background:rgba(0,0,0,.85);color:var(--white);font-size:12px;font-family:var(--body);padding:3px 6px;border-radius:3px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease}
.vp-progress-wrap:hover .vp-progress-tooltip{opacity:1}
.vp-time{color:var(--white);font-size:13px;font-family:var(--body);white-space:nowrap;user-select:none;min-width:80px;text-align:center}
.vp-volume-wrap{position:relative;display:flex;align-items:center}
.vp-volume-slider-wrap{width:0;overflow:hidden;transition:width .25s ease;display:flex;align-items:center}
.vp-volume-wrap.vp-vol-open .vp-volume-slider-wrap{width:70px}
.vp-volume-slider{width:60px;height:4px;position:relative;cursor:pointer;margin:0 5px;display:flex;align-items:center}
.vp-volume-track{position:absolute;width:100%;height:4px;background:rgba(255,255,255,.2);border-radius:2px}
.vp-volume-fill{position:absolute;height:4px;background:var(--gold);border-radius:2px;width:0;pointer-events:none}
.vp-volume-knob{position:absolute;top:50%;left:0;width:12px;height:12px;background:var(--white);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.4)}

/* ── Fullscreen ── Both spellings, kept as separate rules. */
.promo-video-wrap:fullscreen{aspect-ratio:auto;max-width:none;overflow:visible;background:var(--black)}
.promo-video-wrap:fullscreen video{width:100%;height:100%;object-fit:contain}
.promo-video-wrap:-webkit-full-screen{aspect-ratio:auto;max-width:none;overflow:visible;background:var(--black)}
.promo-video-wrap:-webkit-full-screen video{width:100%;height:100%;object-fit:contain}

@media (max-width:480px){
  .vp-time{font-size:11px;min-width:64px}
  .vp-volume-wrap.vp-vol-open .vp-volume-slider-wrap{width:50px}
  .vp-volume-slider{width:40px}
}