/* ============================================================
   ES-TV Player Skin — VideoJS
   Coherent with ES-TV deep aurora teal theme
   ============================================================ */

/* ---- Variables via custom properties ---- */
.video-js {
    --estv-accent:      #1fbf8f;
    --estv-accent-glow: #4ee5a7;
    --estv-aurora-blue: #35478f;
    --estv-bg:          rgba(3, 14, 28, 0.92);
    --estv-glass:       rgba(31, 191, 143, 0.07);
    --estv-text:        #edf8f7;
    --estv-muted:       #a4c2c4;
    font-size: 14px;
    color: var(--estv-text);
}

/* ============================================================
   CONTROL BAR
   ============================================================ */
.video-js .vjs-control-bar {
    background:
        linear-gradient(32deg, transparent 0 69%, rgba(31, 191, 143, 0.25) 71%, rgba(31, 191, 143, 0.08) 75%, transparent 80%),
        linear-gradient(
            to top,
            rgba(3, 14, 28, 0.96) 0%,
            rgba(8, 39, 55, 0.78) 58%,
            transparent 100%
        ) !important;
    height: 3.2em;
    padding: 0 0.5em;
    transition: opacity 0.3s, transform 0.3s;
}

/* Slide-in animation */
.video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.6s ease 0.8s, transform 0.6s ease 0.8s;
}

.video-js.vjs-has-started.vjs-playing.vjs-user-active .vjs-control-bar,
.video-js.vjs-paused .vjs-control-bar {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s, transform 0.2s;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.video-js .vjs-progress-control {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    top: -0.45em;
    height: 0.45em;
    transition: height 0.2s, top 0.2s;
}

.video-js .vjs-progress-control:hover {
    height: 0.85em;
    top: -0.85em;
}

.video-js .vjs-progress-control .vjs-progress-holder {
    height: 100%;
    margin: 0;
    border-radius: 0;
}

.video-js .vjs-slider {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
}

.video-js .vjs-play-progress {
    background: linear-gradient(90deg, var(--estv-aurora-blue) 0%, var(--estv-accent) 52%, var(--estv-accent-glow) 100%);
    border-radius: 2px;
}

/* Thumb dot */
.video-js .vjs-play-progress::before {
    font-size: 0.85em;
    top: -0.28em;
    color: var(--estv-accent-glow);
    text-shadow: 0 0 6px rgba(31, 191, 143, 0.8);
    display: block !important;
}

.video-js .vjs-load-progress {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.video-js .vjs-load-progress div {
    background: rgba(255, 255, 255, 0.10);
}

/* Time tooltip */
.video-js .vjs-time-tooltip,
.video-js .vjs-mouse-display::after,
.video-js .vjs-play-progress::after {
    background: var(--estv-bg) !important;
    color: var(--estv-text) !important;
    border: 1px solid rgba(31, 191, 143, 0.4);
    border-radius: 4px;
    font-size: 11px !important;
    padding: 3px 6px;
}

/* ============================================================
   VOLUME
   ============================================================ */
.video-js .vjs-volume-level {
    background: linear-gradient(90deg, var(--estv-aurora-blue) 0%, var(--estv-accent) 100%);
    border-radius: 2px;
}

.video-js .vjs-volume-level::before {
    color: var(--estv-accent-glow);
    text-shadow: 0 0 4px rgba(31, 191, 143, 0.7);
}

.video-js .vjs-volume-bar {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
}

/*
 * Keep the volume panel expanded while dragging the slider.
 * VideoJS adds .vjs-slider-active on the slider during drag, and the panel
 * receives .vjs-hover while the pointer is anywhere inside it. Without these
 * rules the panel collapses as soon as the thumb moves outside the mute button
 * area, causing focus loss and making the slider unresponsive.
 */
.video-js .vjs-volume-panel.vjs-hover,
.video-js .vjs-volume-panel:focus-within {
    width: auto !important;
    transition: none !important;
}

.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control,
.video-js .vjs-volume-panel:focus-within .vjs-volume-control,
.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active {
    visibility: visible;
    width: 5em;
    opacity: 1;
    transition: none !important;
}

/* ============================================================
   CONTROLS (icons)
   ============================================================ */
.video-js .vjs-control {
    color: var(--estv-muted);
    transition: color 0.15s;
    width: 2.8em;
}

.video-js .vjs-control:hover,
.video-js .vjs-control:focus {
    color: var(--estv-text);
    text-shadow: 0 0 8px rgba(31, 191, 143, 0.6);
    outline: none;
}

.video-js .vjs-control:focus::before,
.video-js .vjs-control:hover::before {
    text-shadow: 0 0 8px rgba(31, 191, 143, 0.6);
}

/* ============================================================
   BIG PLAY BUTTON
   ============================================================ */
.video-js .vjs-big-play-button {
    top: 50%;
    left: 50%;
    margin-left: -1.1em;
    margin-top: -1.1em;
    width: 2.2em;
    height: 2.2em;
    line-height: 2.2em;
    border-radius: 50%;
    border: 2px solid rgba(31, 191, 143, 0.7);
    background:
        radial-gradient(circle at 72% 30%, rgba(78, 229, 167, 0.25), transparent 34%),
        linear-gradient(145deg, rgba(5, 35, 65, 0.78), rgba(7, 17, 61, 0.74));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 3.2em;
    color: var(--estv-text);
    box-shadow:
        0 0 0 0 rgba(31, 191, 143, 0),
        inset 0 0 20px rgba(31, 191, 143, 0.15);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.2s;
    z-index: 2;
}

.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
    background:
        radial-gradient(circle at 72% 30%, rgba(78, 229, 167, 0.34), transparent 36%),
        linear-gradient(145deg, rgba(31, 191, 143, 0.58), rgba(53, 71, 143, 0.62));
    border-color: var(--estv-accent-glow);
    box-shadow:
        0 0 24px rgba(31, 191, 143, 0.55),
        0 0 48px rgba(31, 191, 143, 0.25),
        inset 0 0 20px rgba(31, 191, 143, 0.2);
    transform: scale(1.07);
}

.video-js .vjs-big-play-button:active {
    transform: scale(0.97);
}

/* Hide big play when playing */
.video-js.vjs-playing .vjs-big-play-button {
    display: none;
}

/* Show on pause and end */
.vjs-paused.vjs-has-started .vjs-big-play-button,
.video-js.vjs-ended .vjs-big-play-button {
    display: block;
}

/* ============================================================
   LOADING SPINNER
   ============================================================ */
.video-js .vjs-loading-spinner {
    border-color: var(--estv-accent) !important;
}

.video-js .vjs-loading-spinner::before,
.video-js .vjs-loading-spinner::after {
    border-top-color: var(--estv-accent-glow) !important;
}

/* ============================================================
   MENUS (quality, speed, subtitles)
   ============================================================ */
.video-js .vjs-menu-button-popup .vjs-menu {
    left: -4em;
}

.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    background:
        linear-gradient(148deg, transparent 0 18%, rgba(31, 191, 143, 0.12) 21%, transparent 32%),
        rgba(3, 14, 28, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    padding: 4px 0;
    overflow: hidden;
}

.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item {
    background: transparent;
    color: var(--estv-muted);
    padding: 0.5em 1em;
    font-size: 12px;
    transition: background 0.15s, color 0.15s;
    border-radius: 0;
}

.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item:hover,
.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item:focus {
    background: rgba(255, 255, 255, 0.07);
    color: var(--estv-text);
}

.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected {
    background: rgba(31, 191, 143, 0.30);
    color: var(--estv-text);
}

.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-title {
    background: rgba(255, 255, 255, 0.05);
    color: var(--estv-muted);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.4em 1em;
}

/* ============================================================
   TIME DISPLAY
   ============================================================ */
.video-js .vjs-time-control {
    color: var(--estv-muted);
    font-size: 12px;
    line-height: 3.2em;
    padding: 0 0.3em;
    min-width: 0;
    flex: 0 0 auto;
}

.video-js .vjs-current-time {
    color: var(--estv-text);
}

.video-js .vjs-time-divider {
    padding: 0;
    min-width: 1em;
    text-align: center;
}

/* ============================================================
   CAPTIONS / SUBTITLES
   ============================================================ */
.video-js .vjs-text-track-display {
    bottom: 3.5em;
}

.video-js .vjs-text-track-cue > div {
    background: rgba(3, 14, 28, 0.85) !important;
    color: var(--estv-text) !important;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 1em;
}

/* ============================================================
   FULLSCREEN
   ============================================================ */
.video-js.vjs-fullscreen {
    background: #03081d;
}

/* ============================================================
   LIVE BADGE
   ============================================================ */
.video-js .vjs-live-control .vjs-live-display {
    background: var(--estv-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

/* ============================================================
   REMAINING / DURATION
   ============================================================ */
.video-js .vjs-remaining-time {
    display: none;
}

/* ============================================================
   HARD OVERRIDES
   Keep ESTV teal even when VideoJS/base player CSS is loaded later.
   ============================================================ */
#mainVideo.video-js,
.video-js.vjs-default-skin {
    color: var(--estv-text) !important;
}

#mainVideo.video-js .vjs-control-bar,
.video-js.vjs-default-skin .vjs-control-bar {
    background:
        linear-gradient(32deg, transparent 0 69%, rgba(31, 191, 143, 0.25) 71%, rgba(31, 191, 143, 0.08) 75%, transparent 80%),
        linear-gradient(to top, rgba(3, 14, 28, 0.96) 0%, rgba(8, 39, 55, 0.78) 58%, transparent 100%) !important;
}

#mainVideo.video-js .vjs-play-progress,
#mainVideo.video-js .vjs-volume-level,
#mainVideo.video-js .vjs-slider-bar,
.video-js.vjs-default-skin .vjs-play-progress,
.video-js.vjs-default-skin .vjs-volume-level,
.video-js.vjs-default-skin .vjs-slider-bar {
    background: linear-gradient(90deg, #35478f 0%, #1fbf8f 52%, #4ee5a7 100%) !important;
}

#mainVideo.video-js .vjs-play-progress::before,
#mainVideo.video-js .vjs-volume-level::before,
.video-js.vjs-default-skin .vjs-play-progress::before,
.video-js.vjs-default-skin .vjs-volume-level::before {
    color: #4ee5a7 !important;
    text-shadow: 0 0 6px rgba(31, 191, 143, 0.8) !important;
}

#mainVideo.video-js .vjs-big-play-button,
.video-js.vjs-default-skin .vjs-big-play-button {
    border-color: rgba(31, 191, 143, 0.72) !important;
    background:
        radial-gradient(circle at 72% 30%, rgba(78, 229, 167, 0.25), transparent 34%),
        linear-gradient(145deg, rgba(5, 35, 65, 0.78), rgba(7, 17, 61, 0.74)) !important;
    box-shadow:
        0 0 0 0 rgba(31, 191, 143, 0),
        inset 0 0 20px rgba(31, 191, 143, 0.15) !important;
}

#mainVideo.video-js:hover .vjs-big-play-button,
#mainVideo.video-js .vjs-big-play-button:focus,
.video-js.vjs-default-skin:hover .vjs-big-play-button,
.video-js.vjs-default-skin .vjs-big-play-button:focus {
    border-color: #4ee5a7 !important;
    background:
        radial-gradient(circle at 72% 30%, rgba(78, 229, 167, 0.34), transparent 36%),
        linear-gradient(145deg, rgba(31, 191, 143, 0.58), rgba(53, 71, 143, 0.62)) !important;
    box-shadow:
        0 0 24px rgba(31, 191, 143, 0.55),
        0 0 48px rgba(31, 191, 143, 0.25),
        inset 0 0 20px rgba(31, 191, 143, 0.2) !important;
}

#mainVideo.video-js .vjs-control:hover,
#mainVideo.video-js .vjs-control:focus,
.video-js.vjs-default-skin .vjs-control:hover,
.video-js.vjs-default-skin .vjs-control:focus {
    color: #edf8f7 !important;
    text-shadow: 0 0 8px rgba(31, 191, 143, 0.6) !important;
}

#mainVideo.video-js .vjs-menu-item.vjs-selected,
.video-js.vjs-default-skin .vjs-menu-item.vjs-selected {
    background: rgba(31, 191, 143, 0.30) !important;
}