/* Custom player layout styling */
.xplay-clean-player-wrap {
    width: 100%;
    background-color: #000000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.xplay-clean-player-wrap .video-js {
    width: 100%;
    aspect-ratio: 16 / 9;
}

/*
 * Xplay Theme's .iframe-wrapper uses a height:0 + padding-bottom:56.25% trick
 * that only works when its child is an absolutely-positioned <iframe>. Since we
 * replace that iframe with a normal <video>, neutralize the hack here so the
 * wrapper doesn't collapse to zero height. (player.js applies the same fix
 * inline as a fallback for browsers without :has() support.)
 */
.iframe-wrapper:has(> .xplay-clean-player-wrap) {
    height: auto;
    padding-bottom: 0;
}

/*
 * No custom skin here on purpose — the theme's own direct-video player
 * (js/xplay-player.js) doesn't override Video.js's default-skin styling
 * either, so we match it exactly rather than fighting vjs-big-play-centered's
 * own positioning with extra margins (which is what was pushing the play
 * button out from under overflow:hidden and making it disappear).
 */