/**
 * validation.css — Universal Form Validation
 * Single source for all validation styles
 */

:root{--val-err:var(--red,#EF4444);--val-err-ring:#ef44441f;--val-err-bg:#FEF2F2;--val-err-border:#FCA5A5;--val-err-dark:#DC2626;--val-success:#22C55E;--val-success-ring:#22c55e26;--val-warn:#F59E0B;--val-warn-ring:#f59e0b26;--val-warn-bg:#FFFBEB;--val-warn-border:#FDE68A;--val-warn-text:#92400E;--val-focus:var(--p,var(--p));--val-focus-ring:#7c3aed1f;--val-input-bg:#F5F5FA;--val-input-border:#EBEBF5;--val-radius:10px;--val-text:#0F0A1E;}
.input-error,.is-invalid,[aria-invalid="true"]{border-color:var(--val-err)!important;box-shadow:0 0 0 3px var(--val-err-ring)!important;}
.input-success,.input-valid{border-color:var(--val-success);box-shadow:0 0 0 3px var(--val-success-ring);}
.input-warning{border-color:var(--val-warn)!important;box-shadow:0 0 0 3px var(--val-warn-ring)!important;}
.form-input,.auth-input,.rsvp-field-input,input,select,textarea{border:1.5px solid var(--val-input-border);border-radius:var(--val-radius);background:var(--val-input-bg);color:var(--val-text);transition:border-color .18s,box-shadow .18s,background .18s;}
.form-input:focus,.auth-input:focus,.rsvp-field-input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--val-focus);box-shadow:0 0 0 3px var(--val-focus-ring);background:#fff;}
input:disabled,select:disabled,textarea:disabled{opacity:.65;cursor:not-allowed;background:#F3F4F6;}
.req-star,.required-star{color:var(--val-err);font-weight:700;margin-left:2px;}
.phone-row,.rsvp-phone-wrap{display:flex;align-items:stretch;border:1.5px solid var(--val-input-border);border-radius:var(--val-radius);background:var(--val-input-bg);overflow:hidden;transition:border-color .18s,box-shadow .18s;}
.phone-row:focus-within,.rsvp-phone-wrap:focus-within{border-color:var(--val-focus);box-shadow:0 0 0 3px var(--val-focus-ring);}
.phone-row.input-error,.rsvp-phone-wrap.input-error{border-color:var(--val-err)!important;box-shadow:0 0 0 3px var(--val-err-ring)!important;}
.phone-row select{padding:0 10px;border:none;border-right:1.5px solid #E5E7EB;background:#EDEDF5;font-weight:700;font-size:.83rem;outline:none;min-width:100px;flex-shrink:0;}
.phone-row input,.rsvp-phone-input{padding:12px;flex:1;border:none;background:transparent;outline:none;font-family:inherit;}
select.input-error{border-color:var(--val-err)!important;}
input[type="checkbox"].input-error,input[type="radio"].input-error{outline:2px solid var(--val-err);outline-offset:2px;}
input[type="file"].input-error{border:1.5px dashed var(--val-err);background:var(--val-err-bg);}
.input-group.input-error,.field-wrap.input-error{border-color:var(--val-err)!important;box-shadow:0 0 0 3px var(--val-err-ring)!important;}
/* error messages */
.field-error,.form-error,.phone-err-msg,.auth-field-error{font-size:.75rem;font-weight:600;color:var(--val-err);margin-top:4px;line-height:1.4;}
.field-error,.auth-field-error{display:none;}
.field-error:not(:empty),.auth-field-error:not(:empty){display:block;}
.field-error{animation:valFade .2s ease;}
/* warning messages — same layout, amber colour */
.field-warning{font-size:.75rem;font-weight:600;color:var(--val-warn);margin-top:4px;line-height:1.4;display:none;}
.field-warning:not(:empty){display:block;}
.field-warning{animation:valFade .2s ease;}
/* success messages — same layout, green colour */
.field-success{font-size:.75rem;font-weight:600;color:var(--val-success);margin-top:4px;line-height:1.4;animation:valFade .2s ease;}
@keyframes valFade {
from{opacity:0;transform:translateY(-3px);}
to{opacity:1;transform:translateY(0);}
}
.form-error-banner{padding:10px 14px;display:flex;align-items:center;gap:8px;background:var(--val-err-bg);border:1px solid var(--val-err-border);color:var(--val-err-dark);border-radius:10px;font-size:.82rem;font-weight:600;margin-bottom:14px;}
.auth-spinner,.btn-spinner{display:inline-block;border-radius:50%;animation:spin .65s linear infinite;}
.auth-spinner{width:14px;height:14px;border:2.5px solid #fff6;border-top-color:#fff;}
.btn-spinner{width:12px;height:12px;border:2px solid #fff6;border-top-color:#fff;margin-right:4px;}
@keyframes spin {
to{transform:rotate(360deg);}
}
.eye-icon{display:inline-block;}
.eye-icon.eye-closed{display:none;}
input:-webkit-autofill{box-shadow:0 0 0 1000px #fff inset;}
.field-floating.input-error label{color:var(--val-err);}
.has-errors{scroll-margin-top:90px;}
.input-error:focus{box-shadow:0 0 0 3px var(--val-err-ring),0 0 0 1px var(--val-err);}