/* ============================================================================
   Creator Deal Guide - shared custom video player styles (ONE system for EVERY
   video). Loaded by the course (public/system.html) AND the homepage About-us
   video (src/pages/index.astro). Pairs with /vendor/cdg-player.js. Do NOT fork:
   every control-bar / caption style change happens here so all videos match.
   Colors use a --red fallback so it works with or without the page's CSS vars.
   ========================================================================== */
.video-frame{position:relative;aspect-ratio:16/9;background:radial-gradient(120% 120% at 30% 20%,#2a2a2a 0%,#131313 60%,#0a0a0a 100%);display:grid;place-items:center;overflow:hidden}
.video-frame[data-cf-uid]{cursor:pointer}
.video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.video-frame:has(.video-poster) .video-badge{display:none}
.video-frame[data-cf-uid] video{cursor:pointer}
/* Captions: one consistent look for every video, and no ragged box edges. A per-line
   dark ::cue box steps/rags at the left+right edges when the two lines differ in width
   (proportional font), which space-padding cannot truly fix. So we drop the box and use
   white text with a strong layered shadow (Netflix-style): zero edges, zero seams,
   identical inline and fullscreen, readable on any footage. One file = every video. */
video::cue{background:transparent !important;color:#fff;font-weight:700;line-height:1.5;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.75)}
.vctl{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:5px 14px 11px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(to top,rgba(0,0,0,.74),rgba(0,0,0,0));opacity:0;transition:opacity .18s;color:#fff;font:13px ui-sans-serif,system-ui,sans-serif;pointer-events:none}
.video-frame.cdg-show .vctl,.video-frame.vpaused .vctl{opacity:1;pointer-events:auto}
.vseek{position:relative;height:5px;border-radius:3px;background:rgba(255,255,255,.3);cursor:pointer}
.vbuf{position:absolute;left:0;top:0;height:100%;background:rgba(255,255,255,.32);border-radius:3px;width:0}
.vplay{position:absolute;left:0;top:0;height:100%;background:var(--red,#e60000);border-radius:3px;width:0}
.vplay::after{content:"";position:absolute;right:-6px;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;transform:translateY(-50%) scale(0);transition:transform .12s}
.vseek:hover .vplay::after{transform:translateY(-50%) scale(1)}
.vrow{display:flex;align-items:center;gap:7px}
.vbtn{background:none;border:0;color:#fff;cursor:pointer;padding:6px;border-radius:7px;display:grid;place-items:center;line-height:0}
.vbtn:hover{background:rgba(255,255,255,.18)}
.vbtn svg{width:20px;height:20px;fill:#fff;display:block}
.vtime{font-variant-numeric:tabular-nums;opacity:.95;white-space:nowrap}
.vgap{flex:1}
.vvol{display:flex;align-items:center;gap:1px}
.vvolrange{width:0;opacity:0;height:4px;margin:0;padding:0;cursor:pointer;accent-color:#fff;transition:width .18s,opacity .18s}
.vvol:hover .vvolrange,.vvolrange:focus-visible{width:62px;opacity:1;margin:0 4px 0 2px}
.vcc{font-weight:800;font-size:11px;letter-spacing:.03em;border:1.5px solid rgba(255,255,255,.55);border-radius:4px;padding:2px 5px;color:#fff;line-height:1.1}
.vcc.on{background:#fff;color:#111;border-color:#fff}
.vset{position:relative;display:flex;margin-left:6px}/* center the cog evenly between CC and fullscreen (CC pill sits tighter) */
.vmenu{position:absolute;bottom:calc(100% + 12px);right:0;min-width:118px;max-height:230px;overflow:auto;background:rgba(22,22,22,.97);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:6px;display:none;flex-direction:column;gap:1px;box-shadow:0 10px 28px rgba(0,0,0,.45)}
.vset.open .vmenu{display:flex}
.vmlabel{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45);padding:7px 9px 3px}
.vmitem{background:none;border:0;color:#fff;text-align:left;font:13px ui-sans-serif,system-ui,sans-serif;padding:7px 10px;border-radius:7px;cursor:pointer;white-space:nowrap}
.vmitem:hover{background:rgba(255,255,255,.15)}
.vmitem.on{color:#ff5a5a;font-weight:700}
.video-frame:fullscreen{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.video-frame:fullscreen video{object-fit:contain}
/* Click-to-play affordance shown on the poster before the player mounts. */
.play-btn{width:58px;height:58px;border-radius:50%;background:linear-gradient(155deg,#ff5a5a,var(--red,#e60000));border:3px solid #fff;display:grid;place-items:center;cursor:default;pointer-events:none;position:relative;z-index:2;box-shadow:0 7px 16px rgba(230,0,0,.30)}
.play-btn svg{width:28px;height:28px;margin-left:4px;display:block}
.play-btn::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(230,0,0,.25)}
.video-badge{position:absolute;top:14px;left:14px;z-index:2;font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);padding:5px 11px;border-radius:99px;display:flex;align-items:center;gap:7px}
.video-badge svg{fill:currentColor}
.video-badge .live{width:7px;height:7px;border-radius:50%;background:var(--red,#e60000)}
.video-dur{position:absolute;bottom:14px;right:14px;z-index:2;font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.5);padding:4px 9px;border-radius:7px}