/*
 * VideoJS Themes Fix
 *
 * Universal resets ensure all themed players match the default control bar
 * layout (3em height, standard icon sizing, default flex/order).
 * Theme-specific sections handle remaining edge cases.
 */


/* ========================================
   UNIVERSAL THEME RESETS
   Match default player control bar for all themes
   ======================================== */

/* Control bar: default height (3em), no extra padding/margin from themes.
   overflow:visible ensures the settings menu popup can protrude above the bar. */
.video-js[class*="vjs-theme-"] .vjs-control-bar {
    height: 3em !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* All control bar children: reset flex/order to default layout
   (prevents themes from distributing space unevenly, e.g. City play flex:8) */
.video-js[class*="vjs-theme-"] .vjs-control-bar > * {
    flex: none !important;
    order: unset !important;
}

/* Button icons: default line-height (centers icons in 3em bar) */
.video-js[class*="vjs-theme-"] .vjs-button > .vjs-icon-placeholder:before {
    line-height: 1.67 !important;
}

/* Time controls: match default bar height */
.video-js[class*="vjs-theme-"] .vjs-time-control {
    line-height: 3em !important;
}

/* Volume panel: reset theme-specific padding */
.video-js[class*="vjs-theme-"] .vjs-volume-panel {
    padding-top: 0 !important;
}

/* Play control: reset theme-specific font-size */
.video-js[class*="vjs-theme-"] .vjs-play-control {
    font-size: inherit !important;
}

/* Play control icon: reset theme-specific circle/border styling
   (City/Fantasy/Forest add custom circles around the play icon) */
.video-js[class*="vjs-theme-"] .vjs-play-control .vjs-icon-placeholder:before {
    height: 100% !important;
    width: 100% !important;
    margin-top: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    color: inherit !important;
    top: 0 !important;
    left: 0 !important;
}

/* Progress control: restore default positioning above the control bar.
   Themes (City, Sea) reposition progress-control inside the bar (top:0),
   which overlaps flex-flow buttons (FBF, markers) and intercepts clicks. */
.video-js[class*="vjs-theme-"] .vjs-progress-control {
    top: -30px !important;
    height: 30px !important;
}

/* Progress holder: restore VJS default hover font-size (1.6666em)
   Themes override this (Fantasy: 1.5em, Forest: 1em) which shrinks the time
   tooltips and scrubber circle. VJS sizes these elements with relative em units
   (tooltip: 0.6em, scrubber: 0.9em) that rely on this hover font-size bump. */
.video-js[class*="vjs-theme-"] .vjs-progress-control:hover .vjs-progress-holder {
    font-size: 1.6666666667em !important;
}

/* Play progress marker: all themes hide it (display:none) or replace it with
   custom decorations — reset to default VJS circle icon */
.video-js[class*="vjs-theme-"] .vjs-play-progress:before {
    display: block !important;
    content: "\f116" !important;
    font-size: 0.9em !important;
    position: absolute !important;
    right: -0.5em !important;
    line-height: 0.35em !important;
    z-index: 1 !important;
    height: auto !important;
    width: auto !important;
    border: none !important;
    border-radius: 0 !important;
    top: auto !important;
    background: none !important;
}

/* Volume panel: z-index so the percentage tooltip appears above the progress bar */
.video-js[class*="vjs-theme-"] .vjs-volume-panel {
    z-index: 3;
}

/* Settings menu popup: high z-index ensures the popup is above all other
   control bar elements (progress bar z-index:2, fullscreen z-index:999).
   background ensures menu is visible against all theme backgrounds. */
.video-js[class*="vjs-theme-"] .vjs-settings-menu .vjs-menu {
    z-index: 9999 !important;
}
.video-js[class*="vjs-theme-"] .vjs-settings-menu .vjs-menu .vjs-menu-content {
    background-color: rgba(43, 51, 63, 0.95) !important;
}


/* ========================================
   CITY THEME
   ======================================== */

/* Hide mute button — the triangle IS the volume control */
.vjs-theme-city .vjs-volume-panel .vjs-mute-control {
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}

/* Volume panel: fixed size for triangle, override universal flex:none */
.video-js.vjs-theme-city .vjs-volume-panel {
    flex: 0 0 2.8em !important;
    width: 2.8em !important;
    min-width: 2.8em;
}

.vjs-theme-city .vjs-volume-bar.vjs-slider-horizontal,
.vjs-theme-city .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
.vjs-theme-city .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
.vjs-theme-city .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
.vjs-theme-city .vjs-volume-panel:hover,
.vjs-theme-city .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal {
    width: 2.8em !important;
}

/* Volume triangle: vertically center in 3em bar
   Triangle height = 1.75em, offset = (3em - 1.75em) / 2 = 0.625em */
.vjs-theme-city .vjs-volume-bar:before {
    border-width: 0 0 1.75em 2.8em;
    top: 0.625em;
}

.vjs-theme-city .vjs-volume-level:before {
    border-left: 2.8em solid transparent;
    top: 0.625em;
}


/* ========================================
   FANTASY THEME
   ======================================== */

/* Reset progress bar: theme sets font-size:1.5em + large decorative circle
   which makes the thin 5px progress bar area appear much thicker */
.vjs-theme-fantasy .vjs-progress-control {
    font-size: inherit !important;
}
.vjs-theme-fantasy .vjs-progress-control .vjs-progress-holder {
    font-size: inherit !important;
}
/* Volume bar: reset margin-top from 2.5em (designed for 54px bar) to VJS default
   Default: margin 1.35em top/bottom → 1.35 + 0.3 + 1.35 = 3em, centers in 3em bar */
.vjs-theme-fantasy .vjs-volume-bar {
    margin: 1.35em 0.45em !important;
}


/* ========================================
   FOREST THEME
   ======================================== */

/* Hide mute button — the triangle IS the volume control */
.vjs-theme-forest .vjs-volume-panel .vjs-mute-control {
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}


/* ========================================
   SEA THEME
   ======================================== */

/* Volume slider: vertical centering in control bar */
.vjs-theme-sea .vjs-volume-panel {
    align-items: center;
}