/* ==========================================================================
   Locked video player
   AutomatorsX LMS

   Deliberately not themed off the page it sits on. A video player is dark
   everywhere a video is watched, and this one appears in two places with
   different palettes — the course player and the public sales page — so it
   carries its own colours rather than inheriting either.

   The shield is the load-bearing rule in this file: it sits above the iframe
   and below the controls, so a pointer never reaches YouTube's chrome.
   ========================================================================== */

.vp {
    /* The brand red from main.css, stated rather than inherited: learn.css
       rebinds --primary to the course player's indigo, so inheriting it would
       give the same player two different accents depending on the page it
       loaded in. Overriding --vp-accent recolours all of it from one line. */
    --vp-accent: #FF0000;
    --vp-accent-hover: #CC0000;
    --vp-accent-text: #FF6B6B;

    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    font-family: var(--lp-font, var(--font-body, 'Inter', system-ui, sans-serif));
    color: #fff;
}

.vp:focus { outline: none; }
.vp:focus-visible { outline: 2px solid var(--vp-accent); outline-offset: 2px; }

/* Where the surrounding page already draws the 16/9 box — the course player's
   framed stage, the sales page's buy box — the player fills it instead of
   claiming a second aspect ratio inside the first. */
.lp-video > .vp,
.cd-buybox-media > .vp,
.vp-fill { height: 100%; aspect-ratio: auto; }

.vp-stage { position: absolute; inset: 0; }
.vp-frame { position: absolute; inset: 0; }
.vp-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --------------------------------------------------------------------------
   The shield

   Covers the iframe edge to edge. Every click, drag and right-click lands
   here, which is what makes YouTube's title bar, its logo and its context
   menu unreachable — and what makes our controls the only way to play.
   -------------------------------------------------------------------------- */
.vp-shield {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
    background: transparent;
}

.vp--playing.vp--idle .vp-shield { cursor: none; }

/* --------------------------------------------------------------------------
   Poster and first play
   -------------------------------------------------------------------------- */
.vp-poster {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    background: #05070C center / cover no-repeat;
    transition: opacity 260ms ease, visibility 260ms ease;
}

.vp-poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .55));
}

.vp-poster--gone { opacity: 0; visibility: hidden; }

.vp-bigplay {
    position: relative;
    z-index: 1;
    width: 76px;
    height: 76px;
    border: 0;
    border-radius: 50%;
    background: var(--vp-accent);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
    transition: transform 160ms ease, background 160ms ease;
}

.vp-bigplay i { margin-left: 4px; }
.vp-bigplay:hover { transform: scale(1.07); background: var(--vp-accent-hover); }
.vp-bigplay:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.vp--loading .vp-bigplay,
.vp--failed .vp-bigplay { opacity: 0; pointer-events: none; }

.vp-spinner {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    place-items: center;
    font-size: 30px;
    color: rgba(255, 255, 255, .85);
    pointer-events: none;
}

.vp--loading .vp-spinner { display: grid; }
.vp-spinner i { animation: vp-spin 900ms linear infinite; }

@keyframes vp-spin { to { transform: rotate(360deg); } }

.vp-message {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    background: rgba(5, 7, 12, .92);
    color: #E8EBF2;
    font-size: 14px;
}

.vp--failed .vp-message { display: grid; }
.vp-message i { font-size: 28px; color: #F59E0B; }

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */
.vp-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: 34px 12px 10px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82));
    opacity: 1;
    transform: translateY(0);
    transition: opacity 220ms ease, transform 220ms ease;
}

.vp--playing.vp--idle .vp-controls { opacity: 0; transform: translateY(8px); pointer-events: none; }
.vp--failed .vp-controls { display: none; }

.vp-row { display: flex; align-items: center; gap: 4px; }
.vp-spacer { flex: 1; }

.vp-btn {
    display: inline-grid;
    place-items: center;
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.vp-btn:hover { background: rgba(255, 255, 255, .16); }
.vp-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* The 10 sitting inside the skip arrow, the way every player draws it. */
.vp-btn-num {
    position: absolute;
    top: 51%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: -.02em;
    pointer-events: none;
}

.vp-time {
    margin-left: 8px;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
}

.vp-time i { font-style: normal; opacity: .5; margin: 0 3px; }

/* The play control carries the brand red, the way the big play button does —
   it is the one thing in the bar a student looks for without reading it. */
.vp-play { color: var(--vp-accent); font-size: 17px; }
.vp-play:hover { color: #fff; background: var(--vp-accent); }

/* Speed and quality: a label rather than a glyph, so both read at a glance. */
.vp-pill {
    width: auto;
    min-width: 46px;
    padding: 0 9px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Scrubber

   Two layers: a buffered bar painted behind a native range input. The range
   stays a real input so it keeps its keyboard behaviour and its screen-reader
   role — the appearance is all that is replaced.
   -------------------------------------------------------------------------- */
.vp-track {
    position: relative;
    height: 16px;
    margin: 0 4px 2px;
    display: flex;
    align-items: center;
}

.vp-buffer {
    position: absolute;
    left: 0;
    height: 4px;
    width: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, .28);
    pointer-events: none;
}

.vp-seek, .vp-volume {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 16px;
    margin: 0;
    background: transparent;
    cursor: pointer;
}

.vp-seek { position: relative; z-index: 1; --vp-fill: 0%; }
.vp-volume { --vp-fill: 100%; width: 78px; height: 16px; }

.vp-seek::-webkit-slider-runnable-track,
.vp-volume::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--vp-accent) var(--vp-fill), rgba(255, 255, 255, .22) var(--vp-fill));
}

.vp-seek::-moz-range-track,
.vp-volume::-moz-range-track {
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--vp-accent) var(--vp-fill), rgba(255, 255, 255, .22) var(--vp-fill));
}

.vp-seek::-webkit-slider-thumb,
.vp-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    margin-top: -4px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    transition: transform 120ms ease;
}

.vp-seek::-moz-range-thumb,
.vp-volume::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

.vp-seek:hover::-webkit-slider-thumb { transform: scale(1.25); }
.vp-seek:focus-visible::-webkit-slider-thumb { transform: scale(1.25); }

.vp-volume-wrap { display: flex; align-items: center; gap: 2px; }

/* Volume collapses until the speaker is hovered, so the bar keeps its room
   for the clock on narrow players. */
.vp-volume {
    width: 0;
    opacity: 0;
    transition: width 180ms ease, opacity 180ms ease;
}

.vp-volume-wrap:hover .vp-volume,
.vp-volume:focus-visible { width: 78px; opacity: 1; }

/* --------------------------------------------------------------------------
   Speed menu
   -------------------------------------------------------------------------- */
.vp-menu-wrap { position: relative; }
.vp-menu-wrap[hidden] { display: none; }

.vp-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    min-width: 116px;
    padding: 5px;
    border-radius: 10px;
    background: rgba(12, 14, 20, .97);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
    display: none;
}

.vp-menu.open { display: block; }

.vp-menu-item {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.vp-menu-item:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.vp-menu-item.on { color: var(--vp-accent-text); }
.vp-menu-item.on::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; float: right; font-size: 10px; }

/* --------------------------------------------------------------------------
   Full screen — the real one, and the fallback for browsers that will not
   put a div in it (iPhone Safari).
   -------------------------------------------------------------------------- */
.vp:fullscreen {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    border-radius: 0;
    border: 0;
}

.vp--faux-full {
    position: fixed;
    inset: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    border-radius: 0;
}

.vp-body-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .vp-controls { padding: 28px 6px 6px; }
    .vp-btn { width: 32px; height: 32px; font-size: 14px; }
    .vp-pill { min-width: 40px; padding: 0 7px; font-size: 11.5px; }
    .vp-time { margin-left: 4px; font-size: 11.5px; }
    .vp-volume-wrap:hover .vp-volume { width: 56px; }
    .vp-bigplay { width: 62px; height: 62px; font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .vp-controls, .vp-poster, .vp-bigplay { transition: none; }
    .vp-spinner i { animation-duration: 2s; }
}