/* Custom MediaElement.js YouTube Style Overhaul */
.mejs__container {
    font-family: 'Roboto', 'Inter', sans-serif !important;
    background: #000;
}
.mejs__controls {
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%) !important;
    height: 50px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    bottom: 0 !important;
    width: 100% !important;
    border: none !important;
    transition: opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) !important;
}
.mejs__player.mejs__hidecontrols .mejs__controls {
    opacity: 0 !important;
}

/* Base Slider Container */
.mejs__time-rail {
    position: absolute !important;
    bottom: 48px !important; /* Above the control icons */
    left: 10px !important;
    right: 10px !important;
    width: calc(100% - 20px) !important;
    height: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
    direction: ltr !important;
}

.mejs__time-total, .mejs__time-buffering, .mejs__time-loaded, .mejs__time-current, .mejs__time-hovered {
    height: 3px !important;
    border-radius: 0 !important;
    top: 1px !important;
    transition: transform 0.1s cubic-bezier(0.4,0.0,1,1), height 0.1s cubic-bezier(0.4,0.0,1,1) !important;
}
.mejs__time-rail:hover .mejs__time-total,
.mejs__time-rail:hover .mejs__time-buffering,
.mejs__time-rail:hover .mejs__time-loaded,
.mejs__time-rail:hover .mejs__time-current,
.mejs__time-rail:hover .mejs__time-hovered {
    height: 5px !important;
    top: 0 !important;
}

.mejs__time-total {
    background: rgba(255, 255, 255, 0.2) !important;
    width: 100% !important;
}
.mejs__time-loaded {
    background: rgba(255, 255, 255, 0.4) !important;
}
.mejs__time-current {
    background: #ff0000 !important;
}
.mejs__time-handle {
    display: none !important; 
}
.mejs__time-handle-content {
    background: #ff0000 !important;
    border: none !important;
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    top: -4px !important;
    left: -6.5px !important;
    transform: scale(0);
    transition: transform 0.1s cubic-bezier(0.4,0.0,1,1) !important;
}
.mejs__time-rail:hover .mejs__time-handle {
    display: block !important;
}
.mejs__time-rail:hover .mejs__time-handle-content {
    transform: scale(1);
}
.mejs__time-float {
    background: rgba(28,28,28,0.9) !important;
    border-radius: 3px !important;
    color: #fff !important;
    border: none !important;
    font-size: 13px !important;
    padding: 2px 6px !important;
    bottom: 25px !important;
}
.mejs__time-float-current { margin: 0 !important; }
.mejs__time-float-corner { display: none !important; }

/* Group controls into flex regions */
.mejs__playpause-button,
.mejs__volume-button,
.mejs__horizontal-volume-slider,
.mejs__time {
    display: flex !important;
    align-items: center !important;
}
.mejs__horizontal-volume-slider {
    width: 0 !important; 
    opacity: 0;
    transition: width 0.2s, opacity 0.2s !important;
    height: 30px !important;
}
.mejs__volume-button:hover + .mejs__horizontal-volume-slider,
.mejs__horizontal-volume-slider:hover {
    width: 60px !important;
    opacity: 1;
}
.mejs__horizontal-volume-total {
    background: rgba(255,255,255,0.2) !important;
    height: 3px !important;
    border-radius: 0 !important;
    top: 13px !important;
}
.mejs__horizontal-volume-current {
    background: #fff !important;
    height: 3px !important;
    border-radius: 0 !important;
    top: 13px !important;
}

.mejs__time {
    color: #ddd !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    margin-right: auto !important; /* Pushes the rest of controls to the right */
}
.mejs__time span {
    color: inherit !important;
    font-family: inherit !important;
}

/* Button SVGs overriding to crisp white icons */
.mejs__button > button {
    margin: 5px !important;
    width: 25px !important;
    height: 25px !important;
    background-image: none !important;
    color: white !important;
    font-size: 20px !important;
    background-color: transparent !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.mejs__button > button:hover {
    opacity: 0.8;
}

.mejs__playpause-button.mejs__play > button {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center !important;
}
.mejs__playpause-button.mejs__pause > button {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E") no-repeat center !important;
}
.mejs__volume-button.mejs__mute > button {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E") no-repeat center !important;
}
.mejs__volume-button.mejs__unmute > button {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E") no-repeat center !important;
}
.mejs__fullscreen-button.mejs__fullscreen > button {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E") no-repeat center !important;
}
.mejs__fullscreen-button.mejs__unfullscreen > button {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'/%3E%3C/svg%3E") no-repeat center !important;
}

/* Quality, Speed, Picture in Picture buttons */
.mejs__qualities-button > button {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z'/%3E%3C/svg%3E") no-repeat center !important;
}
.mejs__speed-button > button {
    background: none !important;
    font-size: 14px !important;
    font-weight: 600;
}
.mejs__chromecast-button > button {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M21 3H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11z'/%3E%3C/svg%3E") no-repeat center !important;
}

/* Modals for settings (Quality/Speed) */
.mejs__qualities-selector, .mejs__speed-selector {
    bottom: 55px !important;
    right: 5px !important;
    background: rgba(28,28,28,0.95) !important;
    padding: 10px 0 !important;
    border-radius: 4px !important;
    width: auto !important;
    min-width: 120px !important;
    border: none !important;
}
.mejs__qualities-selector-list-item, .mejs__speed-selector-list-item {
    padding: 8px 20px !important;
    color: #fff !important;
    font-size: 13px !important;
    cursor: pointer !important;
}
.mejs__qualities-selector-list-item:hover, .mejs__speed-selector-list-item:hover {
    background: rgba(255,255,255,0.1) !important;
}
.mejs__qualities-selector-input, .mejs__speed-selector-input {
    display: none !important;
}
.mejs__qualities-selector-label, .mejs__speed-selector-label {
    cursor: pointer !important;
    width: 100% !important;
    display: block !important;
}

/* Play/Pause Large Overlay Center */
.mejs__overlay-play {
    cursor: pointer !important;
}
.mejs__overlay-play .mejs__overlay-button {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center !important;
    background-color: rgba(0,0,0,0.6) !important;
    background-size: 50% !important;
    border-radius: 50% !important;
    width: 70px !important;
    height: 70px !important;
    transition: transform 0.2s cubic-bezier(0.0,0.0,0.2,1), background-color 0.2s !important;
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background-position: 55% center !important; /* visually center play triangle */
}
.mejs__overlay-play:hover .mejs__overlay-button {
    background-color: #ff0000 !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
}