/**
 * Chairueng Video Player Stylesheet & Custom Video.js Cinema Skin
 *
 * @package Chairueng\Player
 * @author Ly Komry
 */

/* ==========================================================================
   1. Universal Zero-Black-Frame Video Display
   "មិនត្រូវមាន fram ខ្មៅនោះទេ គឺ Video ពេញតែម្តង"
   ========================================================================== */

.video-js.vjs-chairueng-skin {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    color: #ffffff;
    background-color: transparent !important;
    width: 100% !important;
    height: 100% !important;
    position: relative;
    overflow: hidden;
}

.video-js .vjs-tech {
    background-color: transparent !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* 9:16 Vertical Video: Video fills the 9:16 card 100% without letterbox/pillarbox */
.cr-aspect-9-16 .vjs-tech,
.cr-aspect-9-16 video,
.cr-vertical-video .vjs-tech,
.cr-vertical-video video {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

/* 16:9 Landscape Video: Video fills the 16:9 card */
.cr-aspect-16-9 .vjs-tech,
.cr-aspect-16-9 video,
.cr-landscape-video .vjs-tech,
.cr-landscape-video video {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
}

/* ==========================================================================
   2. Big Center Play Button (Glassmorphic Red Glow)
   ========================================================================== */

.video-js.vjs-chairueng-skin .vjs-big-play-button {
    width: 76px !important;
    height: 76px !important;
    line-height: 76px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.95) 0%, rgba(184, 7, 16, 0.9) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 0 35px rgba(229, 9, 20, 0.65), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(8px);
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease, background 0.25s ease !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

.video-js.vjs-chairueng-skin .vjs-big-play-button .vjs-icon-placeholder:before {
    content: '' !important;
    display: block;
    width: 28px;
    height: 28px;
    margin: 24px auto 0 27px;
    background-color: #ffffff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.video-js.vjs-chairueng-skin:hover .vjs-big-play-button {
    background: linear-gradient(135deg, #ff1f2d 0%, #d10813 100%) !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
    box-shadow: 0 0 45px rgba(229, 9, 20, 0.85), 0 12px 30px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   3. Modern Cinema Control Bar (Glassmorphic Floating Bar)
   ========================================================================== */

.video-js.vjs-chairueng-skin .vjs-control-bar {
    background: linear-gradient(180deg, transparent 0%, rgba(10, 15, 29, 0.4) 25%, rgba(10, 15, 29, 0.95) 100%) !important;
    backdrop-filter: blur(8px);
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px 6px 12px !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    z-index: 15 !important;
}

.video-js.vjs-chairueng-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
    opacity: 0 !important;
    pointer-events: none;
    transform: translateY(8px);
}

/* ==========================================================================
   4. Glowing Progress & Scrubber Bar
   ========================================================================== */

.video-js.vjs-chairueng-skin .vjs-progress-control {
    position: absolute !important;
    top: -6px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 12px !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.video-js.vjs-chairueng-skin .vjs-progress-control .vjs-progress-holder {
    height: 4px !important;
    margin: 4px 12px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    transition: height 0.15s ease, background-color 0.15s ease !important;
}

.video-js.vjs-chairueng-skin .vjs-progress-control:hover .vjs-progress-holder {
    height: 7px !important;
    background: rgba(255, 255, 255, 0.3) !important;
}

.video-js.vjs-chairueng-skin .vjs-play-progress {
    background: linear-gradient(90deg, #ff3b47 0%, #e50914 100%) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.7) !important;
}

.video-js.vjs-chairueng-skin .vjs-play-progress:before {
    display: block !important;
    content: '' !important;
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 2px solid #e50914 !important;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.9) !important;
    top: -4px !important;
    right: -6px !important;
    transition: transform 0.15s ease !important;
}

.video-js.vjs-chairueng-skin .vjs-progress-control:hover .vjs-play-progress:before {
    transform: scale(1.25) !important;
}

.video-js.vjs-chairueng-skin .vjs-load-progress {
    background: rgba(255, 255, 255, 0.4) !important;
    border-radius: 4px !important;
}

/* ==========================================================================
   5. Bulletproof Vector SVG Mask Icons (No Missing Glyph Squares [ ])
   ========================================================================== */

/* Universal button reset */
.video-js.vjs-chairueng-skin .vjs-button {
    width: 38px !important;
    height: 38px !important;
    cursor: pointer !important;
    outline: none !important;
}

/* Play Icon */
.video-js.vjs-chairueng-skin .vjs-play-control .vjs-icon-placeholder:before,
.video-js.vjs-chairueng-skin.vjs-paused .vjs-play-control .vjs-icon-placeholder:before {
    content: '' !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 10px auto 0 auto !important;
    background-color: #ffffff !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / contain !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / contain !important;
    transition: background-color 0.15s ease, transform 0.15s ease !important;
}

/* Pause Icon */
.video-js.vjs-chairueng-skin.vjs-playing .vjs-play-control .vjs-icon-placeholder:before {
    content: '' !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 10px auto 0 auto !important;
    background-color: #ffffff !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E") no-repeat center / contain !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

.video-js.vjs-chairueng-skin .vjs-play-control:hover .vjs-icon-placeholder:before {
    background-color: #e50914 !important;
    transform: scale(1.15) !important;
}

/* Volume High Icon */
.video-js.vjs-chairueng-skin .vjs-mute-control .vjs-icon-placeholder:before {
    content: '' !important;
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    margin: 10px auto 0 auto !important;
    background-color: #ffffff !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' 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 / contain !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' 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 / contain !important;
    transition: background-color 0.15s ease, transform 0.15s ease !important;
}

/* Volume Muted Icon */
.video-js.vjs-chairueng-skin.vjs-muted .vjs-mute-control .vjs-icon-placeholder:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' 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") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' 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") !important;
}

.video-js.vjs-chairueng-skin .vjs-mute-control:hover .vjs-icon-placeholder:before {
    background-color: #e50914 !important;
}

/* Fullscreen Enter Icon */
.video-js.vjs-chairueng-skin .vjs-fullscreen-control .vjs-icon-placeholder:before {
    content: '' !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 10px auto 0 auto !important;
    background-color: #ffffff !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E") no-repeat center / contain !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E") no-repeat center / contain !important;
    transition: background-color 0.15s ease, transform 0.15s ease !important;
}

/* Fullscreen Exit Icon */
.video-js.vjs-chairueng-skin.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'/%3E%3C/svg%3E") !important;
}

.video-js.vjs-chairueng-skin .vjs-fullscreen-control:hover .vjs-icon-placeholder:before {
    background-color: #e50914 !important;
    transform: scale(1.15) !important;
}

/* Picture-in-Picture Icon */
.video-js.vjs-chairueng-skin .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
    content: '' !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 10px auto 0 auto !important;
    background-color: #ffffff !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z'/%3E%3C/svg%3E") no-repeat center / contain !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z'/%3E%3C/svg%3E") no-repeat center / contain !important;
    transition: background-color 0.15s ease !important;
}

.video-js.vjs-chairueng-skin .vjs-picture-in-picture-control:hover .vjs-icon-placeholder:before {
    background-color: #e50914 !important;
}

/* Playback Speed Pill Button */
.video-js.vjs-chairueng-skin .vjs-playback-rate .vjs-playback-rate-value {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    line-height: 38px !important;
    color: #ffffff !important;
    transition: color 0.15s ease !important;
}
.video-js.vjs-chairueng-skin .vjs-playback-rate:hover .vjs-playback-rate-value {
    color: #e50914 !important;
}

/* ==========================================================================
   6. Volume Slider & Digital Time
   ========================================================================== */

.video-js.vjs-chairueng-skin .vjs-volume-panel {
    display: flex !important;
    align-items: center !important;
}

.video-js.vjs-chairueng-skin .vjs-volume-bar.vjs-slider-horizontal {
    height: 4px !important;
    width: 50px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    margin: 0 8px 0 0 !important;
}

.video-js.vjs-chairueng-skin .vjs-volume-level {
    background-color: #e50914 !important;
    border-radius: 4px !important;
}

.video-js.vjs-chairueng-skin .vjs-time-control {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    line-height: 38px !important;
    padding: 0 4px !important;
    color: #e2e8f0 !important;
    letter-spacing: 0.02em;
}

.video-js.vjs-chairueng-skin .vjs-time-divider {
    color: #64748b !important;
    min-width: 8px !important;
    text-align: center;
}

/* ==========================================================================
   7. Pop-up Menus (Playback Rate, Subtitles, Quality)
   ========================================================================== */

.video-js.vjs-chairueng-skin .vjs-menu-button-popup .vjs-menu {
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 14px !important;
}

.video-js.vjs-chairueng-skin .vjs-menu-content {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(229, 9, 20, 0.35) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75) !important;
    padding: 6px 0 !important;
}

.video-js.vjs-chairueng-skin .vjs-menu-item {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 7px 16px !important;
    color: #e2e8f0 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.video-js.vjs-chairueng-skin .vjs-menu-item:hover {
    background: rgba(229, 9, 20, 0.2) !important;
    color: #ffffff !important;
}

.video-js.vjs-chairueng-skin .vjs-menu-item.vjs-selected {
    background: #e50914 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   8. Server Switcher Pills
   ========================================================================== */

.cr-server-pill {
    transition: all 0.2s ease;
}
.cr-server-pill:hover:not(.active) {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* ==========================================================================
   9. Overlays & Buttons
   ========================================================================== */

.cr-skip-intro-btn:hover {
    background: rgba(229, 9, 20, 0.9) !important;
    border-color: #e50914 !important;
}

.cr-embed-responsive {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cr-embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
}

/* ==========================================================================
   10. Dynamic Aspect Ratio (16:9 Landscape & 9:16 Vertical Shorts)
   "មិនត្រូវមាន fram ខ្មៅនោះទេ គឺ Video ពេញតែម្តង"
   ========================================================================== */

/* 16:9 Landscape Mode */
.cr-aspect-16-9.cr-player-wrapper,
.cr-landscape-video.cr-player-wrapper {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    background: #080c14 !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 9:16 Vertical Mode (Full Frame, Phone-like Center Display, ZERO Black Side Bars) */
.cr-aspect-9-16.cr-player-wrapper,
.cr-vertical-video.cr-player-wrapper,
.watch-player-aspect.cr-aspect-9-16,
.watch-player-aspect.cr-vertical-video {
    aspect-ratio: 9 / 16 !important;
    width: 100% !important;
    max-width: 440px !important;
    max-height: 84vh !important;
    margin: 0 auto !important;
    background: #080c14 !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    overflow: hidden !important;
}

/* Center Stage for Vertical Video */
.cr-vertical-video.cr-player-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

/* Fix Video.js fluid in vertical 9:16 */
.cr-aspect-9-16 .video-js.vjs-fluid,
.cr-vertical-video .video-js.vjs-fluid {
    padding-top: 177.78% !important;
    height: 100% !important;
}
.cr-aspect-16-9 .video-js.vjs-fluid,
.cr-landscape-video .video-js.vjs-fluid {
    padding-top: 56.25% !important;
}

/* Overlay adjustments in 9:16 Vertical Mode */
.cr-aspect-9-16 .cr-skip-intro-btn,
.cr-vertical-video .cr-skip-intro-btn {
    bottom: 58px !important;
    right: 14px !important;
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
}

.cr-aspect-9-16 .cr-resume-toast,
.cr-vertical-video .cr-resume-toast {
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    font-size: 0.78rem !important;
    padding: 8px 12px !important;
}

.cr-aspect-9-16 .cr-next-episode-overlay,
.cr-vertical-video .cr-next-episode-overlay,
.cr-aspect-9-16 .cr-vip-lock-overlay,
.cr-vertical-video .cr-vip-lock-overlay {
    padding: 1.25rem !important;
}

/* Mobile full-frame responsiveness */
@media (max-width: 768px) {
    .cr-aspect-9-16.cr-player-wrapper,
    .cr-vertical-video.cr-player-wrapper {
        max-width: 100% !important;
        max-height: 82vh !important;
        border-radius: 12px !important;
    }
}