/* 滑动验证码：尺寸默认随母主题 .form-control，实际由 JS 同步同表单输入框 */

/* holder 自带 mb-3，不再额外加间距 */
.cm-slide-warp {
    margin-top: 0;
}

.cm-slide-cap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 39px;
    padding: 3px;
    background: #f1f3f7;
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

/* 进度条：默认 opacity:0，有拖动进度才出现 */
.cm-slide-cap .cm-slide-fill {
    position: absolute;
    left: 3px;
    top: 3px;
    bottom: 3px;
    z-index: 0;
    width: var(--cm-fill, 0px);
    border-radius: 4px;
    background: #d9e6ff;
    pointer-events: none;
    opacity: 0;
    transition: width .26s cubic-bezier(.32, .72, .36, 1), background-color .2s ease, opacity .18s ease;
}

/* 有进度或已出结果时可见 */
.cm-slide-cap.has-fill .cm-slide-fill,
.cm-slide-cap.is-ok .cm-slide-fill,
.cm-slide-cap.is-fail .cm-slide-fill {
    opacity: 1;
}

.cm-slide-cap.is-dragging .cm-slide-fill {
    transition: background-color .2s ease;
}

.cm-slide-cap .cm-slide-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    text-align: center;
    font-size: 13px;
    line-height: 1;
    color: #7c8698;
    pointer-events: none;
    transition: color .2s ease;
}

/* 已拖过的那段文字：同文案叠层，按进度裁切 */
.cm-slide-cap .cm-slide-text::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    color: #2f6bff;
    clip-path: inset(0 calc(100% - var(--cm-fill, 0px)) 0 0);
}

.cm-slide-cap.is-ok .cm-slide-text::after {
    display: none;
}

.cm-slide-cap .cm-slide-handle {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 46px;
    height: 33px;
    flex: none;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .16);
    color: #2f6bff;
    cursor: grab;
    transform: translateX(var(--cm-x, 0px));
    transition: transform .28s cubic-bezier(.32, .72, .36, 1), box-shadow .2s ease, color .2s ease;
}

.cm-slide-cap .cm-slide-handle svg {
    display: block;
}

/* 通过后箭头换成对勾 */
.cm-slide-cap .cm-slide-handle .cm-slide-ic-check {
    display: none;
}

.cm-slide-cap.is-ok .cm-slide-handle .cm-slide-ic-arrow {
    display: none;
}

.cm-slide-cap.is-ok .cm-slide-handle .cm-slide-ic-check {
    display: block;
}

.cm-slide-cap.is-dragging .cm-slide-handle {
    cursor: grabbing;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .22);
    transition: box-shadow .2s ease, color .2s ease;
}

.cm-slide-cap.is-ok .cm-slide-handle {
    color: #16a34a;
    cursor: default;
}

.cm-slide-cap.is-ok .cm-slide-fill {
    background: #e8f7ee;
}

.cm-slide-cap.is-ok .cm-slide-text {
    color: #16a34a;
}

/* 失败态 */
.cm-slide-cap.is-fail {
    background: #fdecec;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .28);
}

.cm-slide-cap.is-fail .cm-slide-fill {
    background: #f8bcbc;
}

.cm-slide-cap.is-fail .cm-slide-text {
    color: #b91c1c;
}

/* 失败时文案整体一色，不叠已拖过段 */
.cm-slide-cap.is-fail .cm-slide-text::after {
    display: none;
}

.cm-slide-cap.is-fail .cm-slide-handle {
    color: #b91c1c;
    box-shadow: 0 1px 3px rgba(185, 28, 28, .22);
}

/* 深色主题 */
[data-bs-theme="dark"] .cm-slide-cap {
    background: #23262b;
}

[data-bs-theme="dark"] .cm-slide-cap .cm-slide-fill {
    background: #2a3a55;
}

[data-bs-theme="dark"] .cm-slide-cap .cm-slide-text::after {
    color: #8fb4ff;
}

[data-bs-theme="dark"] .cm-slide-cap .cm-slide-text {
    color: #8f9aab;
}

[data-bs-theme="dark"] .cm-slide-cap .cm-slide-handle {
    background: #2f333a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    color: #6f9dff;
}

[data-bs-theme="dark"] .cm-slide-cap.is-ok .cm-slide-handle {
    color: #4ade80;
}

[data-bs-theme="dark"] .cm-slide-cap.is-ok .cm-slide-fill {
    background: #1d3a2b;
}

[data-bs-theme="dark"] .cm-slide-cap.is-ok .cm-slide-text {
    color: #4ade80;
}

[data-bs-theme="dark"] .cm-slide-cap.is-fail {
    background: #3a2222;
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .3);
}

[data-bs-theme="dark"] .cm-slide-cap.is-fail .cm-slide-fill {
    background: #5a2b2b;
}

[data-bs-theme="dark"] .cm-slide-cap.is-fail .cm-slide-text {
    color: #fca5a5;
}

[data-bs-theme="dark"] .cm-slide-cap.is-fail .cm-slide-handle {
    color: #fca5a5;
}