/**
 * 表单验证样式
 * 小白提示：这些CSS显示字符计数和错误提示
 */

/* 字符计数器 */
.char-counter {
    font-size: 0.8rem;
    color: var(--text-gray, #666);
    margin-top: 6px;
    text-align: right;
    transition: color 0.3s;
}

.char-counter.success {
    color: #4ade80; /* 绿色 */
}

.char-counter.error {
    color: #f87171; /* 红色 */
}

/* 输入框错误状态 */
input.error,
textarea.error,
select.error {
    border-color: #f87171 !important;
    background: rgba(248, 113, 113, 0.05) !important;
}

/* 输入框成功状态 */
input.success,
textarea.success,
select.success {
    border-color: #4ade80 !important;
}

/* 表单错误提示 */
.form-error {
    color: #f87171;
    font-size: 0.85rem;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-error::before {
    content: '⚠️';
}

/* 表单成功提示 */
.form-success {
    color: #4ade80;
    font-size: 0.85rem;
    margin-top: 6px;
}

/* 必填标记 */
.required-mark::after {
    content: '*';
    color: #f87171;
    margin-left: 4px;
}

/* 表单帮助文字 */
.form-help {
    font-size: 0.8rem;
    color: var(--text-gray, #666);
    margin-top: 6px;
}

/* 输入框获得焦点时的提示 */
.form-group:focus-within .char-counter {
    color: var(--text-secondary, #a0a0a0);
}

/* 禁用状态的样式优化 */
input:disabled,
textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 评论框的字符计数特殊位置 */
#guest-message + .char-counter {
    text-align: right;
    margin-top: -24px;
    margin-bottom: 8px;
    padding-right: 8px;
    pointer-events: none;
}