/* Cyberpunk Video Player Override */

/* Video element overrides - ONLY for lightbox videos */
.cnvl-container video,
.cnvl-lightbox video,
#cnvl-video {
    visibility: visible !important; 
    opacity: 1 !important;
    display: block !important;
}

/* Make sure video remains visible when paused - lightbox only */
.cnvl-container video.paused,
.cnvl-lightbox video.paused,
#cnvl-video.paused {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Native HTML5 video controls styling - ONLY for lightbox videos */
.cnvl-lightbox video::-webkit-media-controls-panel,
#cnvl-video::-webkit-media-controls-panel {
    background-color: rgba(0, 10, 0, 0.7) !important;
    border-top: 1px solid #0f0 !important;
    box-shadow: 0 -5px 15px rgba(0, 255, 0, 0.2) !important;
}

.cnvl-lightbox video::-webkit-media-controls-play-button,
#cnvl-video::-webkit-media-controls-play-button {
    background-color: #0f0 !important;
    border-radius: 50% !important;
    filter: drop-shadow(0 0 5px #0f0) !important;
    transform: scale(1.2) !important;
}

.cnvl-lightbox video::-webkit-media-controls-current-time-display,
.cnvl-lightbox video::-webkit-media-controls-time-remaining-display,
#cnvl-video::-webkit-media-controls-current-time-display,
#cnvl-video::-webkit-media-controls-time-remaining-display {
    color: #0f0 !important;
    text-shadow: 0 0 2px #0f0 !important;
    font-family: 'Courier New', monospace !important;
}

.cnvl-lightbox video::-webkit-media-controls-timeline,
#cnvl-video::-webkit-media-controls-timeline {
    background-color: rgba(0, 50, 0, 0.5) !important;
    border-radius: 2px !important;
    height: 8px !important;
    border: 1px solid rgba(0, 255, 0, 0.3) !important;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.3) !important;
}

.cnvl-lightbox video::-webkit-media-controls-volume-slider,
#cnvl-video::-webkit-media-controls-volume-slider {
    background-color: rgba(0, 50, 0, 0.5) !important;
    border-radius: 2px !important;
    border: 1px solid rgba(0, 255, 0, 0.3) !important;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.3) !important;
}

.cnvl-lightbox video::-webkit-media-controls-mute-button,
.cnvl-lightbox video::-webkit-media-controls-fullscreen-button,
#cnvl-video::-webkit-media-controls-mute-button,
#cnvl-video::-webkit-media-controls-fullscreen-button {
    filter: brightness(0) saturate(100%) invert(88%) sepia(14%) saturate(6090%) hue-rotate(67deg) brightness(97%) contrast(108%) !important;
}

/* Glitch effect animation */
@keyframes glitch {
    0% {
        transform: translate(0) !important;
        filter: hue-rotate(0deg) !important;
    }
    2% {
        transform: translate(-2px, 2px) !important;
        filter: hue-rotate(10deg) !important;
    }
    4% {
        transform: translate(2px, -2px) !important;
        filter: hue-rotate(-10deg) !important;
    }
    6% {
        transform: translate(0) !important;
        filter: hue-rotate(0deg) !important;
    }
    100% {
        transform: translate(0) !important;
        filter: hue-rotate(0deg) !important;
    }
}

.playing-video {
    animation: glitch 10s infinite !important;
}

/* Cyberpunk overlay elements */
.matrix-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 255, 0, 0.02) 50%
    );
    background-size: 100% 4px;
    z-index: 2;
    pointer-events: none;
}

/* EXTREME pulse animation for borders - MAXIMUM DRAMA */
@keyframes mega-pulse-border {
    0% {
        border-width: 1px !important;
        box-shadow: 0 0 5px currentColor, 0 0 10px rgba(currentColor, 0.3) !important;
        transform: scale(0.95) rotate(-0.3deg) !important;
        filter: brightness(0.8) !important;
    }
    10% {
        border-width: 5px !important;
        box-shadow: 0 0 50px currentColor, 0 0 80px rgba(currentColor, 0.8), 0 0 100px rgba(currentColor, 0.5) !important;
        transform: scale(1.04) rotate(0.2deg) !important;
        filter: brightness(1.4) saturate(1.5) !important;
    }
    20% {
        border-width: 2px !important;
        box-shadow: 0 0 10px currentColor, 0 0 20px rgba(currentColor, 0.4) !important;
        transform: scale(0.97) rotate(-0.1deg) !important;
        filter: brightness(0.9) !important;
    }
    30% {
        border-width: 6px !important;
        box-shadow: 0 0 60px currentColor, 0 0 90px rgba(currentColor, 0.9), 0 0 120px rgba(currentColor, 0.6) !important;
        transform: scale(1.05) rotate(0.3deg) !important;
        filter: brightness(1.5) saturate(1.8) !important;
    }
    40% {
        border-width: 1px !important;
        box-shadow: 0 0 15px currentColor, 0 0 25px rgba(currentColor, 0.5) !important;
        transform: scale(0.96) rotate(-0.2deg) !important;
        filter: brightness(0.85) !important;
    }
    50% {
        border-width: 4px !important;
        box-shadow: 0 0 40px currentColor, 0 0 70px rgba(currentColor, 0.7), 0 0 100px rgba(currentColor, 0.5) !important;
        transform: scale(1.03) rotate(0.1deg) !important;
        filter: brightness(1.3) saturate(1.4) !important;
    }
    60% {
        border-width: 2px !important;
        box-shadow: 0 0 10px currentColor, 0 0 20px rgba(currentColor, 0.4) !important;
        transform: scale(0.98) rotate(-0.2deg) !important;
        filter: brightness(0.9) !important;
    }
    70% {
        border-width: 7px !important;
        box-shadow: 0 0 70px currentColor, 0 0 100px rgba(currentColor, 1), 0 0 130px rgba(currentColor, 0.7) !important;
        transform: scale(1.06) rotate(0.4deg) !important;
        filter: brightness(1.6) saturate(2) !important;
    }
    80% {
        border-width: 1px !important;
        box-shadow: 0 0 10px currentColor, 0 0 20px rgba(currentColor, 0.4) !important;
        transform: scale(0.97) rotate(-0.3deg) !important;
        filter: brightness(0.85) !important;
    }
    90% {
        border-width: 5px !important;
        box-shadow: 0 0 50px currentColor, 0 0 80px rgba(currentColor, 0.8), 0 0 100px rgba(currentColor, 0.5) !important;
        transform: scale(1.04) rotate(0.2deg) !important;
        filter: brightness(1.4) saturate(1.5) !important;
    }
    100% {
        border-width: 1px !important;
        box-shadow: 0 0 5px currentColor, 0 0 10px rgba(currentColor, 0.3) !important;
        transform: scale(0.95) rotate(-0.3deg) !important;
        filter: brightness(0.8) !important;
    }
}

/* EXTREME glow animation for color indicators */
@keyframes mega-pulse-glow {
    0% {
        box-shadow: 0 0 5px currentColor;
        transform: scale(1);
        opacity: 0.7;
    }
    25% {
        box-shadow: 0 0 40px currentColor, 0 0 60px currentColor;
        transform: scale(2.5);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 10px currentColor;
        transform: scale(1.2);
        opacity: 0.8;
    }
    75% {
        box-shadow: 0 0 50px currentColor, 0 0 70px currentColor;
        transform: scale(3);
        opacity: 1;
    }
    100% {
        box-shadow: 0 0 5px currentColor;
        transform: scale(1);
        opacity: 0.7;
    }
}

/* Background flash effect */
@keyframes mega-background-flash {
    0%, 100% {
        background-color: rgba(0, 0, 0, 1) !important;
    }
    10%, 30%, 50%, 70%, 90% {
        background-color: rgba(0, 0, 0, 0.9) !important;
    }
    20%, 40%, 60%, 80% {
        background-color: rgba(currentColor, 0.1) !important;
    }
}

/* Digital rain effect */
@keyframes matrix-bg {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100px 100px;
    }
}

/* Cyberpunk Theme Override - Enhanced Grid and Controls */

/* Overlay background with higher transparency */
#cnvl-lightbox .cnvl-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important; /* More transparent background */
    background-image: 
        linear-gradient(rgba(0, 255, 0, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 0, 0.07) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
}

/* Enhanced scanline effect (less visible but still present) */
.cnvl-scanlines {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 255, 0, 0.02) 50%
    ) !important;
    background-size: 100% 4px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    opacity: 0.7 !important;
}

/* Additional CRT effect without being too intrusive */
.cnvl-video-container::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: 
        repeating-linear-gradient(
            transparent,
            transparent 1px,
            rgba(0, 20, 0, 0.03) 1px,
            rgba(0, 20, 0, 0.03) 2px
        ) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Random glitch effect that occurs occasionally */
@keyframes scanline-glitch {
    0%, 95%, 100% { opacity: 0; }
    96%, 99% { opacity: 1; transform: translateY(0); }
    97% { opacity: 1; transform: translateY(5px); }
    98% { opacity: 1; transform: translateY(-5px); }
}

.cnvl-video-container::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background-color: rgba(0, 255, 0, 0.3) !important;
    z-index: 3 !important;
    pointer-events: none !important;
    animation: scanline-glitch 8s infinite !important;
}

/* Enhanced custom video player controls */
.cnvl-custom-controls {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 40px !important;
    background-color: rgba(0, 20, 0, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    border-top: 1px solid #0f0 !important;
    z-index: 5 !important;
    box-shadow: 0 -5px 15px rgba(0, 255, 0, 0.2) !important;
}

.cnvl-play-button {
    width: 30px !important;
    height: 30px !important;
    background-color: rgba(0, 20, 0, 0.5) !important;
    border: 2px solid #0f0 !important;
    border-radius: 50% !important;
    color: #0f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin-right: 15px !important;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5) !important;
    text-shadow: 0 0 5px #0f0 !important;
    transition: all 0.2s ease !important;
}

.cnvl-play-button:hover {
    background-color: rgba(0, 255, 0, 0.2) !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.8) !important;
    transform: scale(1.1) !important;
}

/* Enhanced Progress Bar/Slider for better hover experience */
.cnvl-progress-container {
    flex-grow: 1 !important;
    height: 8px !important;
    background-color: rgba(0, 50, 0, 0.5) !important;
    border-radius: 4px !important;
    margin: 0 10px !important;
    border: 1px solid rgba(0, 255, 0, 0.4) !important;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important;
    overflow: visible !important; /* Changed from hidden to visible to allow the handle to expand beyond container */
    cursor: pointer !important;
    position: relative !important;
    transition: height 0.2s ease-in-out !important;
    will-change: height, transform !important;
}

/* Add a hover effect to make the progress bar larger on hover */
.cnvl-progress-container:hover {
    height: 12px !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4), inset 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

.cnvl-progress-container::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 255, 0, 0.1) 50%,
        transparent 100%
    ) !important;
    animation: progress-glow 2s linear infinite !important;
    z-index: 1 !important; /* Ensure this is below the progress bar */
}

@keyframes progress-glow {
    0% { transform: translateX(-100%) !important; }
    100% { transform: translateX(100%) !important; }
}

.cnvl-progress-bar {
    height: 100% !important;
    background-color: #0f0 !important;
    width: 0 !important;
    box-shadow: 0 0 10px #0f0 !important;
    position: relative !important;
    z-index: 2 !important; /* Ensure this is above the glow effect */
    transition: width 0.05s linear !important; /* Smoother transitions */
    will-change: width !important; /* Optimize for animations */
}

/* Enhanced handle that's more visible */
.cnvl-progress-bar::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: -6px !important; /* Position it to extend outside the bar */
    width: 12px !important; /* Larger handle */
    height: 12px !important; /* Make it a circle */
    background-color: #fff !important;
    border-radius: 50% !important;
    transform: translateY(-50%) !important;
    box-shadow: 0 0 5px #fff, 0 0 10px #0f0 !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease, width 0.2s ease, height 0.2s ease !important;
    z-index: 3 !important; /* Ensure this is on top */
}

/* Make the handle more prominent on hover */
.cnvl-progress-container:hover .cnvl-progress-bar::after {
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
    box-shadow: 0 0 10px #fff, 0 0 15px #0f0 !important;
}

.cnvl-time {
    color: #0f0 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 12px !important;
    margin: 0 10px !important;
    text-shadow: 0 0 5px #0f0 !important;
    letter-spacing: 1px !important;
}

.cnvl-volume-container {
    display: flex !important;
    align-items: center !important;
    width: 80px !important;
}

.cnvl-volume-button {
    width: 20px !important;
    margin-right: 8px !important;
    color: #0f0 !important;
    cursor: pointer !important;
    text-shadow: 0 0 5px #0f0 !important;
}

/* Enhanced volume slider as well for consistency */
.cnvl-volume-slider {
    width: 50px !important;
    height: 5px !important;
    background-color: rgba(0, 50, 0, 0.5) !important;
    border-radius: 2px !important;
    overflow: visible !important; /* Allow the handle to be visible */
    border: 1px solid rgba(0, 255, 0, 0.4) !important;
    cursor: pointer !important;
    transition: height 0.2s ease !important;
    position: relative !important;
}

.cnvl-volume-slider:hover {
    height: 8px !important;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3) !important;
}

.cnvl-volume-level {
    height: 100% !important;
    background-color: #0f0 !important;
    width: 100% !important;
    box-shadow: 0 0 5px #0f0 !important;
    position: relative !important;
}

/* Add volume slider handle */
.cnvl-volume-level::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: -4px !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #fff !important;
    border-radius: 50% !important;
    transform: translateY(-50%) !important;
    box-shadow: 0 0 3px #fff, 0 0 5px #0f0 !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease, width 0.2s ease, height 0.2s ease !important;
}

.cnvl-volume-slider:hover .cnvl-volume-level::after {
    width: 10px !important;
    height: 10px !important;
    opacity: 1 !important;
    box-shadow: 0 0 5px #fff, 0 0 8px #0f0 !important;
}

.cnvl-fullscreen-button {
    width: 20px !important;
    color: #0f0 !important;
    cursor: pointer !important;
    margin-left: 15px !important;
    text-shadow: 0 0 5px #0f0 !important;
    transition: all 0.2s ease !important;
}

.cnvl-fullscreen-button:hover {
    transform: scale(1.2) !important;
    text-shadow: 0 0 10px #0f0 !important;
}

/* Glitch effect for playing video */
@keyframes glitch {
    0% { filter: brightness(1) hue-rotate(0deg) !important; }
    1% { filter: brightness(1.1) hue-rotate(5deg) !important; transform: translate(-2px, 1px) !important; }
    2% { filter: brightness(0.9) hue-rotate(-5deg) !important; transform: translate(2px, -1px) !important; }
    3% { filter: brightness(1) hue-rotate(0deg) !important; transform: translate(0) !important; }
    100% { filter: brightness(1) hue-rotate(0deg) !important; transform: translate(0) !important; }
}

.playing-video {
    animation: glitch 15s infinite !important;
}

/* Supreme Tilt Image compatibility */
.et_pb_supreme_image_wrapper {
    position: relative !important;
    z-index: 10 !important;
}

.et_pb_supreme_image_wrapper a {
    position: relative !important;
    z-index: 11 !important;
    display: block;
}

/* Make lightbox appear above all other elements */
#cnvl-lightbox {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999 !important; /* Extremely high z-index */
}

/* Lightbox content styling with EXTREME pulsing border animation */
.cnvl-content {
    position: relative !important;
    width: 80% !important;
    max-width: 900px !important;
    background-color: #000 !important;
    border-radius: 5px !important;
    padding: 20px !important;
    border: 2px solid #0f0 !important;
    box-shadow: 0 0 20px #0f0, 0 0 30px rgba(0, 255, 0, 0.3) !important;
    z-index: 2 !important;
    color: #0f0 !important;
    animation: mega-pulse-border 1.5s infinite !important, mega-background-flash 1.5s infinite !important;
    transition: all 0.1s ease-out !important;
    will-change: transform, box-shadow, border-width, filter !important;
    overflow: hidden !important;
}

/* Add glow overlay to increase effect */
.cnvl-content::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(circle, rgba(currentColor, 0) 60%, rgba(currentColor, 0.1) 100%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    animation: mega-pulse-glow 1.5s infinite !important;
}

/* Border color variations - each with specific border and EXTREME glow effect */
.cnvl-content.border-pink {
    border: 2px solid #ff00ff !important;
    box-shadow: 0 0 20px #ff00ff, 0 0 30px rgba(255, 0, 255, 0.3) !important;
    animation: mega-pulse-border 1.5s infinite !important, mega-background-flash 1.5s infinite !important;
    color: #ff00ff !important;
}

.cnvl-content.border-blue {
    border: 2px solid #0000ff !important;
    box-shadow: 0 0 20px #0000ff, 0 0 30px rgba(0, 0, 255, 0.3) !important;
    animation: mega-pulse-border 1.5s infinite !important, mega-background-flash 1.5s infinite !important;
    color: #0000ff !important;
}

.cnvl-content.border-red {
    border: 2px solid #ff0000 !important;
    box-shadow: 0 0 20px #ff0000, 0 0 30px rgba(255, 0, 0, 0.3) !important;
    animation: mega-pulse-border 1.5s infinite !important, mega-background-flash 1.5s infinite !important;
    color: #ff0000 !important;
}

.cnvl-content.border-yellow {
    border: 2px solid #ffff00 !important;
    box-shadow: 0 0 20px #ffff00, 0 0 30px rgba(255, 255, 0, 0.3) !important;
    animation: mega-pulse-border 1.5s infinite !important, mega-background-flash 1.5s infinite !important;
    color: #ffff00 !important;
}

.cnvl-content.border-purple {
    border: 2px solid #800080 !important;
    box-shadow: 0 0 20px #800080, 0 0 30px rgba(128, 0, 128, 0.3) !important;
    animation: mega-pulse-border 1.5s infinite !important, mega-background-flash 1.5s infinite !important;
    color: #800080 !important;
}

.cnvl-content.border-orange {
    border: 2px solid #ffa500 !important;
    box-shadow: 0 0 20px #ffa500, 0 0 30px rgba(255, 165, 0, 0.3) !important;
    animation: mega-pulse-border 1.5s infinite !important, mega-background-flash 1.5s infinite !important;
    color: #ffa500 !important;
}

.cnvl-content.border-white {
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 20px #ffffff, 0 0 30px rgba(255, 255, 255, 0.3) !important;
    animation: mega-pulse-border 1.5s infinite !important, mega-background-flash 1.5s infinite !important;
    color: #ffffff !important;
}

.cnvl-content.border-cyan {
    border: 2px solid #00ffff !important;
    box-shadow: 0 0 20px #00ffff, 0 0 30px rgba(0, 255, 255, 0.3) !important;
    animation: mega-pulse-border 1.5s infinite !important, mega-background-flash 1.5s infinite !important;
    color: #00ffff !important;
}

.cnvl-content.border-magenta {
    border: 2px solid #ff00ff !important;
    box-shadow: 0 0 20px #ff00ff, 0 0 30px rgba(255, 0, 255, 0.3) !important;
    animation: mega-pulse-border 1.5s infinite !important, mega-background-flash 1.5s infinite !important;
    color: #ff00ff !important;
}

/* Typewriter text styling */
.cnvl-typewriter {
    font-family: 'Courier New', monospace !important;
    color: #0f0 !important;
    margin-bottom: 20px !important;
    text-shadow: 0 0 5px #0f0 !important;
    letter-spacing: 1px !important;
}

/* Special handling for Supreme Tilt Image compatibility */
body .et_pb_supreme_image_wrapper a[href*="border="],
body .et_pb_supreme_image_wrapper a[href*="typewriter="],
body .et_pb_supreme_image_wrapper a[href*="description="] {
    position: relative !important;
    z-index: 100 !important;
    display: block !important;
}

/* Ensure lightbox shows above Divi modules */
#cnvl-lightbox.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 999999 !important;
}

/* Color indicator with EXTREME pulsing for Supreme Tilt Images */
.cnvl-color-indicator {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    border: 1px solid white !important;
    box-shadow: 0 0 3px rgba(0,0,0,0.5) !important;
    z-index: 100 !important;
    animation: mega-pulse-glow 1s infinite !important;
}

/* Fix video visibility issues */
#cnvl-video {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Make sure videos aren't hidden when paused */
#cnvl-video:paused {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Ensure play button disappears when video is playing */
.cnvl-manual-play {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    cursor: pointer !important;
    animation: mega-pulse-glow 2s infinite !important;
}

.playing-video ~ .cnvl-manual-play,
.playing-video + .cnvl-manual-play,
#cnvl-video:not(:paused) ~ .cnvl-manual-play {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Style for hover indicator */
.cnvl-hover-indicator {
    position: absolute !important;
    width: 2px !important;
    height: 100% !important; 
    background-color: rgba(255, 255, 255, 0.7) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    box-shadow: 0 0 3px #fff !important;
}

/* Additional fixes to ensure video is always visible */
#cnvl-lightbox.active video,
#cnvl-lightbox.active #cnvl-video {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    min-height: 100px !important; /* Ensure a minimum height is always shown */
    min-width: 100px !important;  /* Ensure a minimum width is always shown */
}

/* Ensure video container is visible */
.cnvl-video-container {
    background-color: #000 !important;
    background-image: linear-gradient(rgba(0, 255, 0, 0.1) 1px, transparent 1px), 
                      linear-gradient(90deg, rgba(0, 255, 0, 0.1) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
    min-height: 300px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Additional styling for the play button to make it more visible */
.cnvl-manual-play {
    animation: mega-pulse-glow 2s infinite !important;
    z-index: 100 !important; /* Ensure it's above other elements */
    pointer-events: auto !important; /* Make sure it's clickable */
}

/* Ensure the video element doesn't have its visibility inadvertently changed */
#cnvl-video:not([style*="visibility"]),
#cnvl-video[style*="visibility: hidden"] {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Handle video in any state */
#cnvl-video.paused,
#cnvl-video:paused,
#cnvl-video.waiting,
#cnvl-video.loading {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Improve poster image display */
#cnvl-video {
    background-color: transparent !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Create pulsing loading indicator until video is ready */
.cnvl-loading {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 60px !important;
    height: 60px !important;
    border: 3px solid rgba(0, 255, 0, 0.3) !important;
    border-top: 3px solid #0f0 !important;
    border-radius: 50% !important;
    animation: cnvl-spin 1s linear infinite, mega-pulse-glow 2s infinite !important;
    z-index: 10 !important;
}

@keyframes cnvl-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg) !important; }
    100% { transform: translate(-50%, -50%) rotate(360deg) !important; }
}

/* Ensure video with poster shows immediately */
#cnvl-video[poster] {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    object-fit: contain !important;
    background-color: transparent !important;
}

/* Create a shimmering effect during video load */
.cnvl-video-container::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 255, 0, 0.2),
        transparent
    ) !important;
    animation: cnvl-shimmer 1.5s infinite !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

@keyframes cnvl-shimmer {
    0% { left: -100% !important; }
    100% { left: 150% !important; }
}

/* Chrome specific optimizations - ONLY for lightbox videos */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    /* Remove overlays in Chrome - no brightness changes */
    .cnvl-lightbox .cnvl-video-container::before,
    .cnvl-lightbox .cnvl-video-container::after {
        display: none !important;
        content: none !important;
    }
    
    .cnvl-lightbox .cnvl-scanlines {
        display: none !important;
    }
    
    .cnvl-lightbox .cnvl-overlay {
        background-image: none !important;
        background-color: rgba(0, 0, 0, 0.7) !important;
    }
    
    /* Remove any box shadows that might darken */
    .cnvl-lightbox .cnvl-video-container {
        box-shadow: none !important;
        background: transparent !important;
    }
}

/* Edge specific optimizations (Chromium-based) */
@supports (-ms-ime-align:auto) {
    /* NO brightness changes for any browser */
}

/* Additional Chrome fixes for extreme darkness */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    /* Remove cumulative darkness from nested elements */
    .cnvl-video-container {
        background-color: transparent !important;
    }
    
    /* Ensure video element itself is not darkened */
    #cnvl-video {
        opacity: 1 !important;
        background-color: transparent !important;
    }
    
    /* Reduce border glow intensity that might affect perceived brightness */
    .cnvl-video-container {
        box-shadow: inset 0 0 5px #0f0 !important;
    }
}

/* Chrome on Windows specific (often renders darker) */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    /* Windows Chrome detection via font rendering */
    @media (min--moz-device-pixel-ratio:0) and (max--moz-device-pixel-ratio:999) {
        /* This won't match, leaving Chrome-only rules */
    }
    
    @supports (-webkit-appearance:none) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
        /* NO video brightness changes for any browser */
    }
}