/**
 * Customer Form Validation Styles
 * Ensures validation error messages are visible and properly styled
 */

/* Error message styling */
.form-create-account div.mage-error {
    color: #e02b27;
    font-size: 12px;
    margin-top: 5px;
    display: block !important;
    line-height: 1.4;
    font-weight: 400;
}

/* Error state for input fields */
.form-create-account input.mage-error,
.form-create-account textarea.mage-error,
.form-create-account select.mage-error {
    border-color: #e02b27 !important;
    background-color: #fff8f8 !important;
}

/* Focus state for error fields */
.form-create-account input.mage-error:focus,
.form-create-account textarea.mage-error:focus,
.form-create-account select.mage-error:focus {
    border-color: #e02b27 !important;
    box-shadow: 0 0 0 1px rgba(224, 43, 39, 0.2);
    outline: none;
}

/* Required field indicator */
.form-create-account .field.required > .label:after,
.form-create-account .field._required > .label:after {
    content: '*';
    color: #e02b27;
    margin-left: 5px;
    font-weight: 700;
}

/* Field wrapper */
.form-create-account .field {
    margin-bottom: 20px;
    position: relative;
}

.form-create-account .field._error {
    margin-bottom: 15px;
}

/* Control wrapper */
.form-create-account .control {
    position: relative;
}

/* Ensure error messages are visible */
.form-create-account .field .control .mage-error {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Password field specific */
.form-create-account .field.password .mage-error,
.form-create-account .field.confirmation .mage-error {
    display: block !important;
    margin-top: 5px;
}

/* Email field specific */
.form-create-account .field.required .mage-error {
    display: block !important;
}

/* Company name field */
.form-create-account .field-company-name .mage-error {
    display: block !important;
}

/* Animation for error messages */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-create-account div.mage-error {
    animation: slideDown 0.3s ease-out;
}

/* Valid state (optional positive feedback) */
.form-create-account input.valid,
.form-create-account textarea.valid,
.form-create-account select.valid {
    border-color: #79a22e;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .form-create-account div.mage-error {
        font-size: 11px;
    }
}