/* Custom video player shared by the EPs and Mixtape detail pages. Same look as the Video details page player,
   but class based (no element ids) so it can sit on pages that also have the audio player's #playPauseBtn / #muteBtn. */
.custom-video-container {
    position: relative;
    width: 100%;
    background: #050505;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    isolation: isolate;
}

.custom-video-container video {
    width: 100%;
    display: block;
    max-height: 640px;
    background: #000;
    cursor: pointer;
}

.custom-video-container .video-fade {
    position: absolute;
    inset: auto 0 0 0;
    height: 48%;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.45) 45%, transparent 100%);
    transition: opacity 0.25s ease;
}

/* Hide chrome while playing unless the pointer is over the player. */
.custom-video-container.is-playing:not(.is-hovering) .video-fade,
.custom-video-container.is-playing:not(.is-hovering) .video-controls,
.custom-video-container.is-playing:not(.is-hovering) .video-center-play {
    opacity: 0;
    pointer-events: none;
}

.custom-video-container .video-center-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #1aa3ff 0%, #0095FF 55%, #0077cc 100%);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 10px 28px rgba(0, 149, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.2s ease;
}

.custom-video-container .video-center-play i {
    margin-left: 3px;
}

.custom-video-container .video-center-play:hover,
.custom-video-container .video-center-play:focus {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 14px 34px rgba(0, 149, 255, 0.55);
    outline: none;
}

.custom-video-container.is-playing .video-center-play {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.9);
}

.custom-video-container .video-controls {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 0.7rem 0.9rem;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 12, 12, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    transition: opacity 0.25s ease;
}

.custom-video-container .video-ctrl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.custom-video-container .video-ctrl-btn:hover,
.custom-video-container .video-ctrl-btn:focus {
    background: rgba(0, 149, 255, 0.28);
    border-color: rgba(0, 149, 255, 0.7);
    color: #fff;
    transform: translateY(-1px);
    outline: none;
}

.custom-video-container .video-controls .video-play-btn {
    width: 44px;
    height: 44px;
    border: 0;
    background: linear-gradient(145deg, #1aa3ff 0%, #0095FF 60%, #0077cc 100%);
    color: #fff;
    font-size: 15px;
    box-shadow: 0 6px 16px rgba(0, 149, 255, 0.4);
}

.custom-video-container .video-controls .video-play-btn:hover,
.custom-video-container .video-controls .video-play-btn:focus {
    background: linear-gradient(145deg, #33adff 0%, #1aa3ff 60%, #0095FF 100%);
}

.custom-video-container .video-time {
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
    min-width: 96px;
}

.custom-video-container .video-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    border: 0;
    outline: none;
    cursor: pointer;
    background: linear-gradient(to right, #0095FF 0%, #0095FF 0%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.22) 100%);
}

.custom-video-container .video-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0095FF;
    box-shadow: 0 0 0 4px rgba(0, 149, 255, 0.18), 0 0 10px rgba(0, 149, 255, 0.45);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.custom-video-container .video-range:hover::-webkit-slider-thumb {
    transform: scale(1.08);
}

.custom-video-container .video-range::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0095FF;
    box-shadow: 0 0 0 4px rgba(0, 149, 255, 0.18), 0 0 10px rgba(0, 149, 255, 0.45);
    cursor: pointer;
}

.custom-video-container .video-range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.custom-video-container .video-volume {
    width: 90px;
    min-width: 90px;
}

@media (max-width: 767.98px) {
    .custom-video-container .video-fade {
        display: none;
    }

    .custom-video-container .video-center-play {
        width: 64px;
        height: 64px;
        font-size: 20px;
    }

    .custom-video-container .video-controls {
        position: relative;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
        grid-template-columns: auto auto 1fr auto;
        grid-template-areas:
            "play time time full"
            "seek seek seek seek"
            "mute volume volume volume";
        gap: 0.55rem 0.65rem;
        padding: 0.8rem;
        background: rgba(14, 14, 14, 0.96);
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: none;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .custom-video-container .video-play-btn { grid-area: play; }
    .custom-video-container .video-time { grid-area: time; min-width: 0; }
    .custom-video-container .video-fullscreen-btn { grid-area: full; justify-self: end; }
    .custom-video-container .video-seek { grid-area: seek; width: 100%; }
    .custom-video-container .video-mute-btn { grid-area: mute; }
    .custom-video-container .video-volume {
        grid-area: volume;
        width: 100%;
        min-width: 0;
    }

    .custom-video-container.is-playing:not(.is-hovering) .video-controls {
        opacity: 1;
        pointer-events: auto;
    }
}