/* ==========================================================================
   内置主题播放器 - 移动端适配、防下载与美化样式
   作用范围：所有页面（含 PC + 移动端）的防下载加固
   移动端美化仅在小屏幕（< 768px）生效
   ========================================================================== */

/* ==========================================================================
   一、防下载加固样式（全局生效，不限于移动端）
   ========================================================================== */

/* 隐藏浏览器原生视频下载按钮 */
video::-internal-media-controls-download-button,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-overlay-download-button,
video::-webkit-media-controls-download-button {
    display: none !important;
}

/* WebKit 控制面板不渲染下载按钮 */
video::-webkit-media-controls-panel {
    -webkit-user-select: none;
    user-select: none;
}

/* video.js 自带的下载按钮组件 */
.video-js .vjs-download-button,
.video-js .vjs-control.vjs-download-button,
.video-js .vjs-control-bar [class*="download"],
.video-js button[aria-label*="Download" i],
.video-js button[title*="Download" i] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* 隐藏浏览器原生全屏时弹出的下载提示 */
video::-webkit-media-controls-fullscreen-button {
    -webkit-appearance: none;
}

/* 禁止视频元素文本/媒体选择 */
.video-js,
.video-js video,
.video-js .vjs-tech {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* 防下载遮罩层样式 */
.video-js .vp-shield {
    background: transparent !important;
    cursor: default !important;
}

/* 防止长按弹出菜单 */
.ri-video-warp,
.video-hero-container,
.archive-media-preview,
.ri-video-shortcode {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ==========================================================================
   二、播放器容器响应式
   ========================================================================== */
.video-hero .video-hero-container {
    padding: 0;
}

.ri-video-warp {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    background: #000;
}

.video-js {
    width: 100% !important;
    max-width: 100% !important;
    background: #000;
}

.video-js.vjs-16-9 {
    padding-top: 56.25% !important;
}

.video-js.vjs-16-2 {
    padding-top: 12.5% !important;
    height: auto !important;
}

/* ==========================================================================
   三、移动端美化（< 768px）
   ========================================================================== */
@media (max-width: 767.98px) {

    /* 控制栏触控优化（44px 触控目标，符合 Apple HIG） */
    .video-js .vjs-control-bar {
        height: 46px !important;
        font-size: 14px !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .video-js .vjs-control {
        width: 44px !important;
        height: 46px !important;
        line-height: 46px !important;
    }

    .video-js .vjs-button > .vjs-icon-placeholder {
        font-size: 1.7em !important;
        opacity: 0.95;
    }

    /* 进度条更粗，易于触控 */
    .video-js .vjs-progress-holder {
        height: 6px !important;
        margin: 0 8px !important;
        border-radius: 6px !important;
        background: rgba(255, 255, 255, 0.2) !important;
    }

    .video-js .vjs-play-progress,
    .video-js .vjs-load-progress {
        height: 6px !important;
        border-radius: 6px !important;
    }

    .video-js .vjs-play-progress {
        background: linear-gradient(90deg, var(--player-theme-color, #6366f1), #8b5cf6) !important;
        box-shadow: 0 0 6px rgba(99, 102, 241, 0.6);
    }

    .video-js .vjs-progress-holder:hover .vjs-play-progress,
    .video-js .vjs-progress-holder:active .vjs-play-progress {
        height: 8px !important;
    }

    /* 音量控制：移动端默认隐藏 */
    .video-js .vjs-volume-panel {
        display: none !important;
    }

    /* 时间显示更紧凑 */
    .video-js .vjs-time-display {
        font-size: 12px !important;
        letter-spacing: 0.5px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    }

    /* ==========================================================================
       选集列表移动端优化
       ========================================================================== */
    .ri-video-list {
        border-radius: 12px;
        margin-top: 14px;
        padding: 12px !important;
        background: linear-gradient(180deg, #1f2030, #2a2b3d) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .ri-video-list .video-title {
        font-size: 0.95rem !important;
        padding: 6px 0 !important;
        color: rgba(255, 255, 255, 0.95) !important;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .ri-video-list .video-nav {
        gap: 6px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    }

    .ri-video-list .video-nav .switch-video {
        width: 100% !important;
        height: 38px !important;
        margin: 0 !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.06) !important;
        color: rgba(255, 255, 255, 0.85) !important;
        font-weight: 600;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .ri-video-list .video-nav .switch-video:active {
        transform: scale(0.92);
        background: rgba(99, 102, 241, 0.18) !important;
    }

    .ri-video-list .video-nav .switch-video.active {
        background: linear-gradient(135deg, var(--player-theme-color, #6366f1), #8b5cf6) !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45);
        transform: translateY(-1px);
    }

    /* ==========================================================================
       购买/解锁区域移动端优化
       ========================================================================== */
    .ri-video-warp .video-buy-warp {
        padding: 20px 16px;
        background: linear-gradient(180deg, #2a2b3d, #1f2030);
        color: #fff;
    }

    .ri-video-warp .video-buy-warp .buy-title {
        font-size: 1.05rem !important;
        margin-bottom: 0.85rem !important;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .ri-video-warp .video-buy-warp .buy-btns {
        margin-top: 8px;
    }

    .ri-video-warp .video-buy-warp .buy-btns .btn {
        min-height: 46px;
        font-size: 0.95rem;
        padding: 0.55rem 1.4rem;
        border-radius: 12px !important;
        box-shadow: 0 6px 16px rgba(220, 53, 69, 0.35);
        font-weight: 600;
    }

    .ri-video-warp .video-buy-warp .buy-desc {
        font-size: 0.85rem !important;
        margin-top: 12px;
    }

    .ri-video-warp .video-buy-warp .prices-info {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .ri-video-warp .video-buy-warp .prices-info .price-item {
        font-size: 0.82rem;
        padding: 6px 10px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .ri-video-warp .video-buy-warp .buy-count {
        font-size: 0.8rem;
        margin-top: 10px;
        opacity: 0.75;
    }

    /* ==========================================================================
       音频 CD 动画移动端缩放
       ========================================================================== */
    .video-js .centered-html-cd {
        transform: translate(-50%, -50%) scale(0.65) !important;
    }

    .video-js .centered-html-cd .souse-img {
        width: 280px !important;
        height: 280px !important;
        background-size: contain !important;
    }

    /* ==========================================================================
       列表页媒体预览
       ========================================================================== */
    .archive-media-preview {
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }

    .archive-media-preview .preview-text {
        font-size: 0.78rem;
        padding: 5px 12px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.55));
        color: #fff;
        border-radius: 0 0 10px 10px;
        position: relative;
        z-index: 2;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        letter-spacing: 0.5px;
        font-weight: 500;
    }

    /* ==========================================================================
       视频 LOGO 移动端缩放
       ========================================================================== */
    .video-js-logo > img {
        width: 70px !important;
        padding: 8px !important;
        opacity: 0.85;
    }

    /* ==========================================================================
       大播放按钮 + 加载动画
       ========================================================================== */
    .video-js .vjs-loading-spinner {
        border-color: rgba(99, 102, 241, 0.4) !important;
        border-top-color: var(--player-theme-color, #6366f1) !important;
        border-width: 4px !important;
    }

    .video-js .vjs-big-play-button {
        width: 68px !important;
        height: 68px !important;
        line-height: 68px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, var(--player-theme-color, #6366f1), #8b5cf6) !important;
        background-color: var(--player-theme-color, #6366f1) !important;
        border: 2px solid rgba(255, 255, 255, 0.9) !important;
        top: 50% !important;
        left: 50% !important;
        margin-top: -34px !important;
        margin-left: -34px !important;
        box-shadow: 0 10px 30px rgba(99, 102, 241, 0.45), 0 0 0 6px rgba(255, 255, 255, 0.08) !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 2 !important;
    }

    .video-js .vjs-big-play-button:active {
        transform: scale(0.88);
        box-shadow: 0 6px 16px rgba(99, 102, 241, 0.6) !important;
    }

    .video-js:hover .vjs-big-play-button,
    .video-js .vjs-big-play-button:focus {
        background: linear-gradient(135deg, #818cf8, #a78bfa) !important;
        background-color: #818cf8 !important;
        transform: scale(1.05);
    }

    /* ==========================================================================
       全屏模式适配
       ========================================================================== */
    .video-js.vjs-fullscreen .vjs-control-bar {
        height: 52px !important;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .video-js.vjs-fullscreen .vjs-control {
        width: 50px !important;
        height: 52px !important;
        line-height: 52px !important;
    }

    .video-js.vjs-fullscreen .vjs-button > .vjs-icon-placeholder {
        font-size: 2em !important;
    }

    /* iOS 全屏自动下载提示抑制 */
    video::-webkit-media-controls-fullscreen-button {
        display: inline-flex;
    }

    /* ==========================================================================
       超小屏（< 480px）进一步优化
       ========================================================================== */
    .ri-video-list .video-nav {
        grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    }

    .ri-video-list .video-nav .switch-video {
        height: 34px !important;
        font-size: 0.8rem !important;
    }

    .ri-video-warp .video-buy-warp .buy-title {
        font-size: 0.95rem !important;
    }

    .video-js .centered-html-cd .souse-img {
        width: 220px !important;
        height: 220px !important;
    }

    .video-js .vjs-time-display {
        font-size: 11px !important;
    }

    .video-js .vjs-big-play-button {
        width: 60px !important;
        height: 60px !important;
        line-height: 60px !important;
        margin-top: -30px !important;
        margin-left: -30px !important;
    }
}

/* 超小屏媒体查询结束 */

/* ==========================================================================
   四、横屏模式优化
   ========================================================================== */
@media (max-width: 991.98px) and (orientation: landscape) {
    .video-hero .video-hero-container .row {
        flex-direction: row;
    }

    .ri-video-list {
        max-height: 45vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .video-js {
        max-height: 80vh;
    }
}

/* ==========================================================================
   五、暗色主题适配
   ========================================================================== */
[data-bs-theme="dark"] .ri-video-list {
    background: linear-gradient(180deg, #1a1b2b, #232436) !important;
}

[data-bs-theme="dark"] .ri-video-list .video-nav .switch-video {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-bs-theme="dark"] .ri-video-warp .video-buy-warp {
    background: linear-gradient(180deg, #1a1b2b, #0f1018);
}