/* Custom Plyr Colors - StreamPrime Brand */
:root {
    --plyr-color-main: #0200d6 !important;
    --plyr-focus-visible-color: #0200d6 !important;
    --plyr-range-fill-background: #0200d6 !important;
    --plyr-control-toggle-checked-background: #0200d6 !important;
    --plyr-audio-control-background-hover: #0200d6 !important;
    --plyr-video-control-background-hover: #0200d6 !important;
}

/* Override specific elements that might not use CSS variables */
.plyr__control:focus-visible {
    outline-color: #0200d6 !important;
}

.plyr__control--overlaid {
    background: #0200d6 !important;
}

.plyr--audio .plyr__control:focus-visible,
.plyr--audio .plyr__control:hover,
.plyr--audio .plyr__control[aria-expanded=true] {
    background: #0200d6 !important;
}

.plyr--video .plyr__control:focus-visible,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] {
    background: #0200d6 !important;
}

/* Progress bar color - played portion */
.plyr--full-ui input[type=range] {
    color: #0200d6 !important;
}

/* Buffered/loaded portion color - white */
.plyr__progress__buffer {
    color: #ffffff !important;
}

/* Menu radio button checked state */
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before {
    background: #0200d6 !important;
}

/* Focus visible outlines */
.plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track,
.plyr--full-ui input[type=range]:focus-visible::-moz-range-track,
.plyr--full-ui input[type=range]:focus-visible::-ms-track {
    outline-color: #0200d6 !important;
}

/* StreamPrime Logo in Bottom Right Corner */
.plyr::after {
    content: '';
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 120px;
    height: 60px;
    background-image: url('/static/img/streamprime.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
    pointer-events: none;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.plyr:hover::after {
    opacity: 1;
}

/* Hide logo when controls are hidden */
.plyr--hide-controls::after {
    opacity: 0;
}

/* Responsive logo sizing */
@media (min-width: 768px) {
    .plyr::after {
        width: 160px;
        height: 80px;
        bottom: 25px;
        right: 25px;
    }
}

@media (min-width: 1024px) {
    .plyr::after {
        width: 200px;
        height: 100px;
        bottom: 30px;
        right: 30px;
    }
}