/* 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;
}

/* UI Accent Alignment — Adjust hex values below to match your Xplay theme colors exactly */
:root {
    --xplay-theme-color: #ff3366;       /* Main Branding Accent (e.g. Neon Pink / Orange) */
    --xplay-hover-color: #ff5588;
}

.video-js.xplay-theme-accent .vjs-play-progress,
.video-js.xplay-theme-accent .vjs-volume-level {
    background-color: var(--xplay-theme-color) !important; /* FIXED: Changed from !class to !important */
}

/* The Big Play Button Container */
.video-js.xplay-theme-accent .vjs-big-play-button {
    background-color: rgba(0, 0, 0, 0.65) !important;
    border-color: var(--xplay-theme-color) !important;
    border-radius: 50% !important;
    
    /* Box Sizing Specifications */
    width: 2.5em !important;
    height: 2.5em !important;
    line-height: 2.5em !important;
    margin-left: -1.25em !important; /* Dynamic half-width negative margin offsets for true CSS centering */
    margin-top: -1.25em !important;
    
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* FIXED: Forces the actual play icon character to scale up and position nicely inside your custom round dimensions */
.video-js.xplay-theme-accent .vjs-big-play-button .vjs-icon-placeholder:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 1.4em; /* Scales the inner icon up slightly so it fits beautifully in the circle */
}

/* Hover States */
.video-js.xplay-theme-accent:hover .vjs-big-play-button {
    background-color: var(--xplay-theme-color) !important;
    border-color: var(--xplay-hover-color) !important;
}