/**
 * vod-player-v1.css
 * Styles for the standalone optimized VOD player on the Video.js 8.24.0
 * stack (loaded by vod_player_v1.php).
 *
 * Identical to vod-player.css apart from the "Settings menu" section at the
 * end, which styles the gear button and its two-pane menu — components
 * Video.js has no styles of its own for, since it ships no settings menu.
 */

/* ---- Full-viewport layout ---- */
body {
    margin: 0;
    padding: 0;
    width: 100vw !important;
    height: 100vh !important;
    font-family: arial, verdana, sans-serif;
    overflow: hidden;
}

video {
    margin: 0;
    padding: 0;
    width: 100vw !important;
    height: 100vh !important;
    /* Smooth fade for viewport-driven auto pause/resume (no visual jank). */
    transition: opacity 0.3s ease-in-out;
}

.video-js {
    margin: 0;
    padding: 0;
    width: 100vw !important;
    height: 100vh !important;
    /* Match the video element transition so state changes stay smooth. */
    transition: opacity 0.3s ease-in-out;
}

/* ---- Unavailable / error message ---- */
.error-msg {
    text-align: center;
    padding-top: 100px;
    font-size: larger;
}

/* ---- Loading indicator ---- */
#loading-text {
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10;
    position: absolute;
    margin: 1%;
    border-radius: 10px;
    padding: 8px;
}

/* ---- Disable default right-click popup ---- */
.vjs-rightclick-popup {
    display: none;
}

/* ---- Video.js control / spinner tweaks ---- */
.vjs-audio-button {
    display: none;
}

.vjs-loading-spinner:before,
.vjs-loading-spinner:after {
    display: none;
}

.vjs-loading-spinner {
    border: none;
}

/* ---- Big play button ---- */
.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play-button {
    display: block;
}

.video-js .vjs-big-play-button {
    margin-top: -1em;
    margin-left: -1em;
    line-height: 1.8em;
    height: 2em;
    width: 2em;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 2em;
}

/* -------------------------------------------------------------------------
 * Settings menu (gear) — resolution switcher + playback speed
 *
 * The component tree is stock Video.js (MenuButton + MenuItem), so only the
 * gear glyph, the right-aligned value column, and the submenu affordances
 * need styling.
 * ---------------------------------------------------------------------- */

/* Gear glyph. Video.js puts buildCSSClass() on the inner button element, so
   the icon hangs off the placeholder span exactly as the built-in controls
   do. "\f114" is vjs-icon-cog in the bundled VideoJS icon font. */
.video-js .vjs-settings-button .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}

.video-js .vjs-settings-button .vjs-icon-placeholder:before {
    content: "\f114";
}

/* Widen the popup past the stock 10em. Rows here carry a label *and* a
   value ("Quality" + "Auto (720p)"), which 10em clips. Video.js sizes the
   popup on .vjs-menu (the content inside is width:100% of it), and offsets
   it left to centre it under the button, so both move together.
   The responsive max-height rules Video.js sets on .vjs-menu-content are
   left alone: .vjs-menu-content already scrolls on overflow, which is the
   right fallback for a short player. */
.video-js .vjs-settings-button .vjs-menu {
    width: 13em;
    left: -4.5em;
}

/* Two-column rows: label left, current value right. */
.video-js .vjs-settings-button .vjs-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    text-align: left;
    padding: 0.5em 1em;
}

.video-js .vjs-settings-button .vjs-menu-item .vjs-settings-item-value {
    opacity: 0.7;
    font-size: 0.9em;
    white-space: nowrap;
}

/* Navigation rows ("Quality \203a", "Speed \203a") get a trailing chevron.
   It is decorative and CSS-only, deliberately not part of the accessible
   name — the row already reads as "Quality, Auto (720p)". */
.video-js .vjs-settings-button .vjs-settings-nav:after {
    content: "\203a";
    opacity: 0.7;
    margin-left: 0.25em;
}

/* Submenu heading / back row: a leading chevron plus a rule separating it
   from the options it introduces. */
.video-js .vjs-settings-button .vjs-settings-back {
    font-weight: bold;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.video-js .vjs-settings-button .vjs-settings-back .vjs-menu-item-text:before {
    content: "\2039";
    margin-right: 0.5em;
    opacity: 0.7;
}