/* Shared field-state styling for public registration forms (webinar, roundtable).
   Requires each field's input to sit inside a ".field-wrap" wrapper div, followed
   by two Font Awesome <i class="field-icon icon-error|icon-success"> icons, and a
   sibling <small class="field-error" id="err_<field_id>"><span></span></small>. */
.contact-form .field-wrap {
    position: relative;
}
.form-group input[type="text"],
.form-group input[type="email"] {
    border: 1px solid #ccc !important;
    padding-right: 38px;
    transition: border-color 0.15s ease;
}
.form-group input.field-neutral { border-color: #ccc !important; }
.form-group input.field-valid   { border-color: #28a745 !important; }
.form-group input.field-invalid { border-color: #dc3545 !important; }
.field-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    font-size: 1em;
}
.field-icon.icon-error   { color: #dc3545; }
.field-icon.icon-success { color: #28a745; }
input.field-invalid ~ .icon-error   { display: block; }
input.field-valid   ~ .icon-success { display: block; }
.field-error {
    display: none;
    color: #dc3545;
    font-size: 0.85em;
    margin-top: 4px;
}
.field-error.show { display: block; }