/* 表单验证样式 */

/* 错误状态 - 红色边框 */
.form-control.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-color: #fff5f5 !important;
}

.form-control.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* 成功状态 - 绿色边框 */
.form-control.is-valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
    background-color: #f8fff9 !important;
}

.form-control.is-valid:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

/* 错误提示文字样式 */
.invalid-feedback {
    display: block !important;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc3545 !important;
    font-weight: 500;
    line-height: 1.4;
}

/* 成功提示文字样式 */
.valid-feedback {
    display: block !important;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #28a745 !important;
    font-weight: 500;
    line-height: 1.4;
}

/* 表单组样式调整 */
.form-group {
    position: relative;
    margin-bottom: 1rem;
}

/* 输入框动画效果 */
.form-control {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}

/* 错误状态下的占位符颜色 */
.form-control.is-invalid::placeholder {
    color: #dc3545 !important;
    opacity: 0.6;
}

/* 成功状态下的占位符颜色 */
.form-control.is-valid::placeholder {
    color: #28a745 !important;
    opacity: 0.6;
}

/* 验证码输入框特殊样式 */
.p_input {
    position: relative;
}

.p_input .form-control.is-invalid {
    border-color: #dc3545 !important;
}

.p_input .form-control.is-valid {
    border-color: #28a745 !important;
}

/* 错误提示图标（可选） */
.form-control.is-invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem) !important;
}

/* 成功提示图标（可选） */
.form-control.is-valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='m2.3 6.73.13-.02L4.03 4.8a.1.1 0 0 1 .17.07v1.8a.1.1 0 0 1-.1.1h-1.8a.1.1 0 0 1-.07-.17L2.3 6.73z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem) !important;
}

/* 移动端样式调整 */
@media (max-width: 768px) {
    .invalid-feedback {
        font-size: 0.8rem;
        margin-top: 0.2rem;
    }
    
    .form-control.is-invalid,
    .form-control.is-valid {
        background-size: calc(0.6em + 0.3rem) calc(0.6em + 0.3rem);
        padding-right: calc(1.2em + 0.6rem) !important;
    }
}

/* 特殊情况：如果验证码输入框旁边有图片，调整样式 */
.p_input .form-control.is-invalid,
.p_input .form-control.is-valid {
    background-image: none !important;
    padding-right: 0.75rem !important;
}

/* 聚焦时的样式增强 */
.form-control:focus.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.form-control:focus.is-valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}