/**
 * Account Form Field Validation Styles
 * Matches status-message styling from login form
 */

/* Error field styling */
.woocommerce-form-row input.has-error,
.woocommerce-form-row select.has-error,
.woocommerce-form-row textarea.has-error {
    border-color: #981420 !important;
    background-color: #fff5f5;
}

/* Error message text - matches status-message.is-error styling */
.woocommerce-form-field-error {
    display: block;
    color: white;
    background-color: #981420;
    font-size: 13px;
    font-weight: 500;
    /* margin-top: 10px;
    margin-bottom: 10px; */
    padding: 10px 20px;
    line-height: 20px;
}

/* Focus state for error fields */
.woocommerce-form-row input.has-error:focus,
.woocommerce-form-row select.has-error:focus,
.woocommerce-form-row textarea.has-error:focus {
    border-color: #981420 !important;
    box-shadow: 0 0 0 0.2rem rgba(152, 20, 32, 0.25);
    outline: none;
}



/* Accessibility - ensure error is announced to screen readers */
.woocommerce-form-field-error[role="alert"] {
    position: relative;
}

/**
 * Inline help text styling (for status messages)
 * This can be used to show helpful info below fields
 */
.woocommerce-form-field-help {
    display: block;
    color: #666;
    font-size: 12px;
    margin-top: 4px;
    font-style: italic;
}

/**
 * Success state styling (matches status-message.is-success)
 */
.woocommerce-form-row input.is-valid,
.woocommerce-form-row select.is-valid {
    border-color: #178240;
    background-color: #f5fff5;
}

.woocommerce-form-field-success {
    display: block;
    color: white;
    background-color: #178240;
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px 20px;
    line-height: 20px;
}