/* video.js JTV skin */
.video-js.vjs-jtv { width: 100%; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; }

.vjs-jtv .vjs-big-play-button {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: none;
    background: rgba(212,33,61,0.85);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    line-height: 64px;
    transition: all .2s;
}
.vjs-jtv .vjs-big-play-button .vjs-icon-placeholder::before {
    font-size: 28px; line-height: 64px; position: static;
}
.vjs-jtv:hover .vjs-big-play-button {
    background: rgba(212,33,61,0.95);
    transform: translate(-50%,-50%) scale(1.06);
}

.vjs-jtv .vjs-control-bar {
    background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.4) 75%, transparent 100%);
    height: 44px;
    padding: 0 4px;
}
.vjs-jtv .vjs-control-bar .vjs-button > .vjs-icon-placeholder::before {
    font-size: 17px; line-height: 44px;
}
.vjs-jtv .vjs-control-bar .vjs-button { width: 38px; transition: color .15s; }
.vjs-jtv .vjs-control-bar .vjs-button:hover { color: #ff5e6e; }

.vjs-jtv .vjs-time-control {
    font-size: 11px; font-weight: 500; line-height: 44px; padding: 0 4px; min-width: auto;
}

.vjs-jtv .vjs-progress-holder {
    height: 3px; border-radius: 2px; margin: 0 8px; transition: height .15s;
}
.vjs-jtv .vjs-progress-control:hover .vjs-progress-holder { height: 5px; }
.vjs-jtv .vjs-play-progress {
    background: linear-gradient(90deg, #d4213d, #ff4f5e);
    border-radius: 2px;
}
.vjs-jtv .vjs-play-progress::before {
    content: '';
    position: absolute;
    right: -5px; top: 50%;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 4px rgba(0,0,0,0.35);
    transform: translateY(-50%) scale(0);
    transition: transform .15s;
}
.vjs-jtv .vjs-progress-control:hover .vjs-play-progress::before {
    transform: translateY(-50%) scale(1);
}
.vjs-jtv .vjs-load-progress { background: rgba(255,255,255,0.15); }

.vjs-jtv .vjs-volume-bar { height: 3px; border-radius: 2px; }
.vjs-jtv .vjs-volume-level { background: #fff; border-radius: 2px; }

.vjs-jtv .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    background: rgba(19,23,34,0.95);
    backdrop-filter: blur(8px);
    border-radius: 6px;
    padding: 4px 0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.vjs-jtv .vjs-menu li { font-size: 11px; font-weight: 500; padding: 5px 14px; }
.vjs-jtv .vjs-menu li.vjs-selected { background: #d4213d; color: #fff; }
.vjs-jtv .vjs-menu li:hover { background: rgba(255,255,255,0.08); color: #fff; }

.vjs-jtv .vjs-time-tooltip {
    font-size: 11px; font-weight: 600;
    background: rgba(30,30,30,0.9);
    border-radius: 3px; padding: 3px 7px;
}

.vjs-jtv .vjs-loading-spinner {
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: #d4213d;
    width: 44px; height: 44px;
    margin: -22px 0 0 -22px;
}
.vjs-jtv .vjs-loading-spinner::before,
.vjs-jtv .vjs-loading-spinner::after { display: none; }

@media (max-width: 640px) {
    .vjs-jtv .vjs-big-play-button { width: 52px; height: 52px; line-height: 52px; }
    .vjs-jtv .vjs-big-play-button .vjs-icon-placeholder::before { font-size: 22px; line-height: 52px; }
    .vjs-jtv .vjs-control-bar { height: 38px; }
    .vjs-jtv .vjs-control-bar .vjs-button > .vjs-icon-placeholder::before { line-height: 38px; font-size: 15px; }
}