/* 联系方式-两次确认
 * 确认输入框本体是"克隆主题自己的联系方式输入框"，外观由主题决定，这里一概不碰；
 * 本文件只负责三件事：出现/收起的动画、比对状态的光晕、状态提示行。
 * 颜色继承主题的 --bs-success / --bs-danger，站长可用 --acg-cv-ok / --acg-cv-bad 覆盖。 */

.acg-cv {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
    transition: grid-template-rows .3s cubic-bezier(.2, .7, .3, 1), opacity .22s ease, margin-top .3s cubic-bezier(.2, .7, .3, 1);
}

.acg-cv.acg-cv--on {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 10px;
}

.acg-cv__inner {
    overflow: hidden;
    min-height: 0;
    /* 光晕不被 overflow 裁掉 */
    padding: 4px;
    margin: -4px;
}

/* 状态光晕：box-shadow 会沿输入框自己的圆角走，任何主题都贴合 */
.acg-cv input[name=confirm_contact] {
    transition: box-shadow .18s ease;
}

.acg-cv--ok input[name=confirm_contact] {
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acg-cv-ok, var(--bs-success, #16a34a)) 18%, transparent);
}

.acg-cv--bad input[name=confirm_contact] {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .16);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acg-cv-bad, var(--bs-danger, #dc2626)) 16%, transparent);
}

/* 状态提示行：默认零高度，不占版面；出现时轻轻浮上来 */
.acg-cv__status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.6;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-2px);
    transition: max-height .24s ease, opacity .2s ease, transform .2s ease;
}

.acg-cv--ok .acg-cv__status,
.acg-cv--bad .acg-cv__status {
    max-height: 2.4em;
    opacity: 1;
    transform: none;
    margin-top: 6px;
}

.acg-cv--ok .acg-cv__status {
    color: var(--acg-cv-ok, var(--bs-success, #16a34a));
}

.acg-cv--bad .acg-cv__status {
    color: var(--acg-cv-bad, var(--bs-danger, #dc2626));
}

.acg-cv__status svg {
    flex: none;
    width: 14px;
    height: 14px;
}

/* 输错时轻微摇头示意，幅度克制 */
@keyframes acg-cv-nudge {
    20% { transform: translateX(-3px); }
    45% { transform: translateX(3px); }
    70% { transform: translateX(-2px); }
    100% { transform: none; }
}

.acg-cv--nudge input[name=confirm_contact] {
    animation: acg-cv-nudge .3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .acg-cv,
    .acg-cv__status,
    .acg-cv input[name=confirm_contact] {
        transition: none;
    }

    .acg-cv--nudge input[name=confirm_contact] {
        animation: none;
    }
}