/* Text Field Validation Styles */
.text-field-error-message {
    color: #e02b27;
    font-size: 0.75em;
    margin-top: 0.25em;
    display: block;
    line-height: 1.4;
}

.text-field-error-message.mage-error {
    display: block;
}

/* Input field error state */
input[type="text"].mage-error {
    border-color: #e02b27;
    box-shadow: 0 0 0 1px rgba(224, 43, 39, 0.3);
}

input[type="text"].mage-error:focus {
    border-color: #e02b27;
    box-shadow: 0 0 0 2px rgba(224, 43, 39, 0.2);
}

/* Validation mode indicators (for debugging - can be removed in production) */
/* Future: Add visual indicators for different validation modes if needed */

/* Responsive design */
@media (max-width: 768px) {
    .text-field-error-message {
        font-size: 0.8em;
    }
}