/* --- VCS Loader --- */
@keyframes vcs-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.vcs-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    /* Use accent color if available, else white */
    border-top-color: var(--accent-color, #ffffff); 
    border-radius: 50%;
    animation: vcs-spin 1s linear infinite;
    z-index: 10;
    /* Initial state before animation */
    transform: translate(-50%, -50%); 
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    will-change: opacity;
    pointer-events: none;
}

.vcs-loader--visible {
    opacity: 1;
}
/* --- End VCS Loader --- */

/* --- VCS Title Card --- */
.vcs-title-card {
    background-color: var(--accent-color, #333333); /* Use accent color if available, else dark gray */
    color: #ffffff;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; /* Consistent font */
    padding: 10px 15px;
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    margin-top: 0; /* Sits flush against the bottom of the player */
    width: 100%;
    box-sizing: border-box; /* Ensures padding is included in the width */
}
/* --- End VCS Title Card --- */

.plyr__control--overlaid, .plyr__control--overlaid:hover {
    background:var(--accent-color) !important;
}

.plyr--full-ui input[type=range]    {
    color:var(--accent-color) !important;
}

video, iframe {
    /* visibility: hidden; */
}

iframe[src*="vimeo.com"], iframe[src*="video-content-server.php"], video[src*="vimeo.com"], video[src*="video-content-server.php"] {
    /* visibility: hidden; */
}

.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
    background:var(--accent-color) !important;
    background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,var(--accent-color)))) !important;
}

.plyr__controls .btn:focus, .plyr__controls button:focus{
    -webkit-box-shadow: 0 0 5px var(--accent-color);
    box-shadow: 0 0 5px var(--accent-color);
    outline: 1px solid var(--accent-color);
}

.plyr__captions{
    pointer-events: none;
}

.vcs-player {
    visibility: visible !important;
}

.vl-frame{
    visibility: visible !important;
}

.plyr button {
    margin: 0;
}

.plyr__video-wrapper {
    pointer-events: none;
}

.plyr {
    border-radius: 0 !important;
    box-shadow: none !important;
    margin:0 !important;
    background: black !important;
}