/**
 * 课程播放器样式（自绘控件，完全独立，不依赖 Aliplayer / layui 图标）
 * 前缀 ckcp-；任务播放器请使用 assignment-player.css，两套互不引用。
 */

.ckcp,
.ckcp * { box-sizing: border-box; }
.ckcp {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 13px;
    line-height: 1.4;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
/* 父容器用 padding-bottom 撑高度、自身高度为 0 时的兜底 */
.ckcp.ckcp-fluid { height: auto; aspect-ratio: 16 / 9; min-height: 200px; }
.ckcp-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    outline: none;
}
.ckcp.ckcp-fullscreen { width: 100vw; height: 100vh; }

/* 大播放按钮 / 加载 / 提示 */
.ckcp-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
}
.ckcp-center-btn {
    width: 64px; height: 64px;
    border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .2s;
}
.ckcp-center-btn:hover { background: rgba(0, 150, 136, .85); transform: scale(1.06); }
.ckcp-center-btn svg { width: 28px; height: 28px; fill: currentColor; }
.ckcp.ckcp-playing .ckcp-center { display: none; }

.ckcp-spinner {
    position: absolute; top: 50%; left: 50%;
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ckcp-spin .8s linear infinite;
    z-index: 4; display: none;
}
.ckcp.ckcp-loading .ckcp-spinner { display: block; }
@keyframes ckcp-spin { to { transform: rotate(360deg); } }

.ckcp-error {
    position: absolute; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    padding: 24px; text-align: center;
    background: rgba(0, 0, 0, .82);
    color: #ffb4a8; z-index: 6;
}
.ckcp.ckcp-has-error .ckcp-error { display: flex; }
.ckcp.ckcp-has-error .ckcp-center,
.ckcp.ckcp-has-error .ckcp-ui { display: none; }

.ckcp-toast {
    position: absolute; top: 14px; left: 50%;
    transform: translateX(-50%);
    padding: 7px 14px; border-radius: 4px;
    background: rgba(0, 0, 0, .7);
    font-size: 12px; white-space: nowrap;
    opacity: 0; transition: opacity .25s;
    z-index: 7; pointer-events: none;
}
.ckcp-toast.ckcp-show { opacity: 1; }

/* 控制条 */
.ckcp-ui {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 5;
    padding: 26px 10px 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .45) 55%, transparent);
    opacity: 0;
    transition: opacity .22s;
}
.ckcp:hover .ckcp-ui,
.ckcp.ckcp-paused .ckcp-ui,
.ckcp.ckcp-ui-lock .ckcp-ui { opacity: 1; }
.ckcp.ckcp-hide-progress .ckcp-timeline { display: none; }

.ckcp-timeline { height: 18px; display: flex; align-items: center; cursor: pointer; margin-bottom: 2px; }
.ckcp-track {
    position: relative;
    width: 100%; height: 4px;
    background: rgba(255, 255, 255, .28);
    border-radius: 3px;
    transition: height .15s;
}
.ckcp-timeline:hover .ckcp-track { height: 6px; }
.ckcp-buffer,
.ckcp-played {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 0; border-radius: 3px;
}
.ckcp-buffer { background: rgba(255, 255, 255, .4); }
.ckcp-played { background: #009688; }
.ckcp-handle {
    position: absolute; top: 50%; left: 0;
    width: 12px; height: 12px; margin: -6px 0 0 -6px;
    border-radius: 50%; background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, .6);
    opacity: 0; transition: opacity .15s;
}
.ckcp-timeline:hover .ckcp-handle { opacity: 1; }
.ckcp-tip {
    position: absolute; bottom: 22px; left: 0;
    transform: translateX(-50%);
    padding: 3px 6px; border-radius: 3px;
    background: rgba(0, 0, 0, .8);
    font-size: 11px; white-space: nowrap;
    display: none; pointer-events: none;
}
.ckcp-timeline:hover .ckcp-tip { display: block; }

.ckcp-bar { display: flex; align-items: center; gap: 6px; height: 32px; }
.ckcp-btn {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    padding: 0; border: 0; border-radius: 3px;
    background: transparent; color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: .9;
}
.ckcp-btn:hover { background: rgba(255, 255, 255, .16); opacity: 1; }
.ckcp-btn svg { width: 18px; height: 18px; fill: currentColor; }
.ckcp-btn.ckcp-text-btn { width: auto; min-width: 44px; padding: 0 6px; font-size: 12px; }
.ckcp-btn[disabled] { opacity: .35; cursor: not-allowed; }
.ckcp-btn.ckcp-autonext { min-width: 58px; font-size: 11px; white-space: nowrap; }
.ckcp-btn.ckcp-autonext-on { color: #40c4b2; font-weight: 600; background: rgba(0, 150, 136, .18); }
.ckcp-time { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0 2px; }
.ckcp-grow { flex: 1 1 auto; min-width: 4px; }

.ckcp-vol { display: flex; align-items: center; gap: 2px; }
.ckcp-vol-range {
    width: 62px; height: 3px; margin: 0 4px 0 0;
    -webkit-appearance: none; appearance: none;
    background: rgba(255, 255, 255, .4); border-radius: 3px; cursor: pointer;
}
.ckcp-vol-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 10px; height: 10px; border-radius: 50%; background: #fff;
}
.ckcp-vol-range::-moz-range-thumb {
    width: 10px; height: 10px; border: 0; border-radius: 50%; background: #fff;
}

.ckcp-menu-wrap { position: relative; }
.ckcp-menu {
    position: absolute; right: 0; bottom: 36px;
    min-width: 104px; padding: 5px 0;
    background: rgba(20, 20, 20, .94);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
    display: none; z-index: 8;
    max-height: 260px; overflow-y: auto;
}
.ckcp-menu.ckcp-open { display: block; }
.ckcp-menu-item {
    display: block; width: 100%;
    padding: 7px 14px; border: 0;
    background: transparent; color: #eee;
    font-size: 12px; text-align: left; cursor: pointer;
    white-space: nowrap;
}
.ckcp-menu-item:hover { background: rgba(255, 255, 255, .12); }
.ckcp-menu-item.ckcp-active { color: #40c4b2; font-weight: 600; }

/* 观看检测弹窗 */
.ckcp-modal-mask {
    position: absolute; inset: 0; z-index: 10;
    background: rgba(0, 0, 0, .72);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
}
.ckcp.ckcp-verify-open .ckcp-modal-mask { display: flex; }
.ckcp-modal {
    width: 100%; max-width: 320px;
    padding: 22px 20px;
    background: #fff; color: #333;
    border-radius: 6px; text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
.ckcp-modal-title { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.ckcp-modal-text { font-size: 13px; color: #666; line-height: 1.7; margin-bottom: 18px; }
.ckcp-modal-btn {
    min-width: 118px; padding: 9px 18px;
    border: 0; border-radius: 4px;
    background: #009688; color: #fff;
    font-size: 14px; cursor: pointer;
}
.ckcp-modal-btn:hover { background: #008477; }

.ckcp:fullscreen .ckcp-video { object-fit: contain; }
.ckcp:fullscreen .ckcp-ui { padding-bottom: 14px; }

/* 课程目录右侧进度标签（详情页也会单独引入本文件） */
.ckp-progress-label { float: right; margin-left: 8px; font-size: 12px; color: #009688; white-space: nowrap; }
.ckp-progress-label.ckp-done { color: #00b22d; font-weight: 600; }

@media (max-width: 640px) {
    .ckcp-ui { padding: 20px 6px 6px; }
    .ckcp-bar { gap: 2px; height: 30px; }
    .ckcp-btn { width: 28px; height: 28px; }
    .ckcp-btn svg { width: 16px; height: 16px; }
    .ckcp-vol-range { display: none; }
    .ckcp-btn.ckcp-autonext { min-width: 48px; padding: 0 3px; font-size: 10px; }
    .ckcp-time { font-size: 11px; }
    .ckcp-center-btn { width: 52px; height: 52px; }
    .ckcp-center-btn svg { width: 22px; height: 22px; }
}