/* Fullscreen Video */
.video-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
    position: relative;
}

/* Video.js Custom Theme */
.vjs-theme-custom {
    --vjs-primary: #ff5722; /* Orange */
    --vjs-secondary: #ff9800;
    --vjs-bg: #222; /* Dark Background */
    --vjs-progress-bg: #ff5722; /* Track Progress */
    --vjs-text: #fff;
}

/* Custom Progress Bar & Buttons */
.video-js.vjs-theme-custom .vjs-play-progress {
    background-color: #ff5722 !important;
}

.video-js.vjs-theme-custom .vjs-progress-holder {
    background-color: #333 !important; /* Track background */
}

.video-js.vjs-theme-custom .vjs-volume-level {
    background-color: #ff9800 !important;
}

.video-js.vjs-theme-custom .vjs-control-bar {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

.video-js.vjs-theme-custom .vjs-button {
    color: #ff9800 !important;
}

.video-js.vjs-theme-custom .vjs-control-bar .vjs-button {
    background-color: transparent !important;
    border: none !important;
    color: #ff9800 !important;
}

/* Quality Selector in Controls */
.vjs-menu-button-popup .vjs-menu {
    background: #222;
}

/* Hide Default Big Play Button */
.video-js .vjs-big-play-button {
    display: none !important;
}

/* Make sure the controls are always visible */
.video-js .vjs-control-bar {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force the control bar to show at page load */
.video-js {
    visibility: visible !important;
}

/* Ensure the custom play button remains visible in fullscreen */
.video-container:fullscreen .custom-play-button,
.video-container:-webkit-full-screen .custom-play-button,
.video-container:-moz-full-screen .custom-play-button,
.video-container:-ms-fullscreen .custom-play-button {
    display: flex !important;
    z-index: 10000; /* Ensure it stays on top */
}

    /* Ensure the play button's SVG icon remains visible in fullscreen */
    .video-container:fullscreen .custom-play-button svg,
    .video-container:-webkit-full-screen .custom-play-button svg,
    .video-container:-moz-full-screen .custom-play-button svg,
    .video-container:-ms-fullscreen .custom-play-button svg {
        fill: #fff; /* Ensure the icon stays visible */
    }


/* Custom Play Button */
.custom-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    z-index: 1000; /* Ensure it's on top */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Soft shadow */
}

    /* Hover Effect */
    .custom-play-button:hover {
        background: rgba(255, 87, 34, 0.8);
        transform: translate(-50%, -50%) scale(1.1); /* Slight scale effect */
    }

    /* SVG Play Icon */
    .custom-play-button svg {
        width: 50px;
        height: 50px;
        fill: white;
        transition: fill 0.2s ease;
    }

    /* SVG Hover Effect */
    .custom-play-button:hover svg {
        fill: #ff5722; /* Change icon color on hover */
    }