/**
 * Form Feedback Styles
 * Styles for form validation and feedback messages
 */

/* Form message styles */
.form-message {
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.success-message {
    background-color: rgba(0, 200, 83, 0.1);
    color: #00a854;
    border-left: 4px solid #00a854;
}

.error-message {
    background-color: rgba(255, 77, 79, 0.1);
    color: #f5222d;
    border-left: 4px solid #f5222d;
}

/* Field error styles */
.field-error {
    color: #f5222d;
    font-size: 0.875rem;
    margin-top: 4px;
    display: block;
}

.error-field {
    border-color: #f5222d !important;
}

.error-field:focus {
    box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2) !important;
    border-color: #f5222d !important;
}

/* Loading spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Required field indicator */
.required-field::after {
    content: '*';
    color: #f5222d;
    margin-left: 4px;
}