/* ============================================================
 * 康灵wp统计 · 音视频模块样式
 *   1) 当前受键盘控制的播放器高亮
 *   2) 原生音频播放器（WordPress mediaelement / 裸 <audio>）美化皮肤
 *
 * 强调色：后台「播放器强调色」设置 → JS 写到 html 上的 --klbk-audio-color；
 *         没设置则回退到子比主题强调色，再回退到 #00a63e。
 *         想改皮肤外观，直接改下面的数值即可。
 * 不想要美化皮肤：后台把「原生播放器美化」关掉即可（关掉后不会加载本文件的样式）。
 * ============================================================ */

/* ---------- 1. 当前受键盘控制的播放器高亮 ---------- */
.klbk-media-active {
    outline: 2px solid rgba(34, 113, 177, .9) !important;
    outline-offset: 2px;
}

/* ---------- 2. 原生播放器美化皮肤 ---------- */
/* WordPress 音频短代码（mediaelement）：
   控制条保持深色（官方图标是浅色，改浅背景会导致图标看不见），
   只做圆角、阴影、间距与进度条配色，亮色/暗色主题下都正常。 */
.mejs-container.mejs-audio.klbk-audio-skin {
    width: 100% !important;
    height: 40px !important;
    border-radius: var(--main-radius, 10px) !important;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
    background: #2b2f36 !important;
}

.mejs-container.mejs-audio.klbk-audio-skin .mejs-controls {
    height: 40px !important;
    padding: 0 8px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .07)) !important;
}

.mejs-container.mejs-audio.klbk-audio-skin .mejs-controls .mejs-time-rail {
    padding-top: 17px !important;
}

.mejs-container.mejs-audio.klbk-audio-skin .mejs-time-rail .mejs-time-total,
.mejs-container.mejs-audio.klbk-audio-skin .mejs-time-rail .mejs-time-loaded,
.mejs-container.mejs-audio.klbk-audio-skin .mejs-time-rail .mejs-time-current,
.mejs-container.mejs-audio.klbk-audio-skin .mejs-time-rail .mejs-time-buffering {
    height: 6px !important;
    border-radius: 3px;
}

.mejs-container.mejs-audio.klbk-audio-skin .mejs-time-rail .mejs-time-total {
    background: rgba(255, 255, 255, .18) !important;
}

.mejs-container.mejs-audio.klbk-audio-skin .mejs-time-rail .mejs-time-loaded {
    background: rgba(255, 255, 255, .30) !important;
}

.mejs-container.mejs-audio.klbk-audio-skin .mejs-time-rail .mejs-time-current {
    background: var(--klbk-audio-color, #00a63e) !important;
}

.mejs-container.mejs-audio.klbk-audio-skin .mejs-time-rail .mejs-time-handle-content {
    top: -5px !important;
    background: var(--klbk-audio-color, #00a63e) !important;
    border-color: var(--klbk-audio-color, #00a63e) !important;
}

.mejs-container.mejs-audio.klbk-audio-skin .mejs-time,
.mejs-container.mejs-audio.klbk-audio-skin .mejs-time span {
    color: rgba(255, 255, 255, .85) !important;
    font-size: 12px !important;
}

.mejs-container.mejs-audio.klbk-audio-skin .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    background: rgba(255, 255, 255, .22) !important;
    border-radius: 3px;
}

.mejs-container.mejs-audio.klbk-audio-skin .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background: var(--klbk-audio-color, #00a63e) !important;
    border-radius: 3px;
}

/* 浏览器原生播放器（没走 mediaelement 的裸 <audio>）：
   内部控件由浏览器绘制，能改的只有整体外框与面板底色。 */
audio.klbk-audio-skin {
    width: 100%;
    border-radius: var(--main-radius, 10px);
    background: var(--muted-bg-color, rgba(125, 125, 125, .08));
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

audio.klbk-audio-skin::-webkit-media-controls-panel {
    background: #2b2f36;
}