/* Reusable branded video player — YouTube-style layout. Pairs with video-player.js.
   Drop <div class="olvp" data-ready="true" data-src="/x.mp4" data-poster="/p.jpg"></div>.
   Self-contained (not scoped) so it works on any page. Palette: SCA blue + gold. */
.olvp{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;
  font-family:'Inter',system-ui,Segoe UI,Arial,sans-serif;
  --v:#1d4ed8;--vb:#3b82f6;--m:#2563eb;--gold:#f5a623;
  border:1px solid rgba(96,165,250,.28);box-shadow:0 0 0 1px rgba(245,166,35,.16),0 30px 80px -34px rgba(37,99,235,.65);
  user-select:none;-webkit-user-select:none}
.olvp *{box-sizing:border-box}
.olvp video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;cursor:pointer}
.olvp-poster{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .3s;pointer-events:none}
.olvp.playing .olvp-poster{opacity:0}

/* center play button */
.olvp-big{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border:0;cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(15,18,28,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  box-shadow:0 2px 22px rgba(0,0,0,.45);
  transition:transform .15s,opacity .25s,background .2s;z-index:4}
.olvp-big:hover{transform:translate(-50%,-50%) scale(1.07);background:rgba(15,18,28,.7)}
.olvp-big svg{width:34px;height:34px;fill:#fff;margin-left:4px}
.olvp.playing .olvp-big{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.8)}

/* "coming soon" overlay (used when data-ready="false") */
.olvp-soon{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:24px}
.olvp-soon .pill{font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#9fc2ff;background:rgba(96,165,250,.14);border:1px solid rgba(96,165,250,.42);padding:8px 16px;border-radius:999px}
.olvp-soon b{font-family:'Archivo',sans-serif;color:#fff;font-size:clamp(16px,2.4vw,21px);line-height:1.25;max-width:480px;font-weight:800}

/* ---- controls ---- */
.olvp-ctrl{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:0 6px 2px;color:#fff;
  opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.36) 56%,transparent)}
.olvp.show-ctrl .olvp-ctrl{opacity:1;transform:none;pointer-events:auto}
.olvp.playing.idle video{cursor:none}

/* seek bar (full width, grows on hover) */
.olvp-seek{position:relative;height:18px;display:flex;align-items:center;cursor:pointer;touch-action:none;margin:0 8px}
.olvp-seek .track{position:relative;width:100%;height:4px;border-radius:4px;background:rgba(255,255,255,.3);transition:height .12s}
.olvp-seek:hover .track,.olvp.scrubbing .track{height:7px}
.olvp-seek .buf{position:absolute;left:0;top:0;height:100%;background:rgba(255,255,255,.32);border-radius:4px;width:0}
.olvp-seek .prog{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--m),var(--vb));border-radius:4px;width:0}
.olvp-seek .knob{position:absolute;top:50%;left:0;width:15px;height:15px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%) scale(0);transition:transform .12s;box-shadow:0 0 10px rgba(59,130,246,.95)}
.olvp-seek:hover .knob,.olvp.scrubbing .knob{transform:translate(-50%,-50%) scale(1)}

/* button row */
.olvp-bar{display:flex;align-items:center;gap:3px;padding:3px 4px 7px;height:50px}
.olvp-bar .sp{flex:1}
.olvp-btn{background:none;border:0;color:#fff;cursor:pointer;height:44px;min-width:44px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 6px;flex:0 0 auto;
  transition:background .15s,color .15s;font:inherit}
.olvp-btn:hover{background:rgba(255,255,255,.15)}
.olvp-btn svg{width:27px;height:27px;fill:currentColor;display:block}
/* directional +/-10s seek buttons */
.olvp-skip{gap:3px;font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums}
.olvp-skip svg{width:24px;height:24px}
.olvp-time{font-size:13.5px;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap;padding:0 10px}

/* volume (slider expands on hover) */
.olvp-volwrap{display:flex;align-items:center}
.olvp-vol{width:0;opacity:0;height:4px;accent-color:#fff;cursor:pointer;transition:width .18s,opacity .18s;margin:0 4px 0 2px}
.olvp-volwrap:hover .olvp-vol,.olvp-vol:focus{width:78px;opacity:1}

/* speed dropdown */
.olvp-spdwrap{position:relative;flex:0 0 auto}
.olvp-spd{font-weight:700;font-size:14.5px;min-width:50px}
.olvp-spdmenu{position:absolute;bottom:52px;right:0;background:rgba(18,20,28,.98);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:6px;display:none;flex-direction:column;min-width:120px;
  box-shadow:0 12px 34px rgba(0,0,0,.55);z-index:7}
.olvp-spdmenu.open{display:flex}
.olvp-spdmenu .hd{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9aa3b2;padding:5px 12px 7px}
.olvp-spdmenu button{background:none;border:0;color:#fff;text-align:left;padding:9px 13px;border-radius:8px;
  cursor:pointer;font:inherit;font-size:13.5px;width:100%}
.olvp-spdmenu button:hover{background:rgba(255,255,255,.12)}
.olvp-spdmenu button.on{color:var(--gold);font-weight:700}

@media(max-width:560px){
  .olvp-big{width:64px;height:64px}.olvp-big svg{width:27px;height:27px}
  .olvp-volwrap{display:none}
  .olvp-btn{height:40px;min-width:40px;padding:0 4px}.olvp-btn svg{width:24px;height:24px}
  .olvp-skip{font-size:11px}.olvp-skip svg{width:22px;height:22px}
  .olvp-time{font-size:12px;padding:0 5px}
  .olvp-spd{font-size:13px;min-width:42px}
  .olvp-bar{gap:1px;height:46px}
}