/* ═══════════════════════════════════════════════════════
   register-validation.css
   Add these rules to your existing register.css
   No layout / style changes — only validation feedback.
═══════════════════════════════════════════════════════ */

/* ── Required asterisk ─────────────────────────────── */
.req {
  color: #d9534f;
  margin-left: 2px;
  font-size: 0.8em;
  font-weight: 700;
  vertical-align: middle;
}

/* ── Error message span (injected by jQuery Validate) ─ */
span.field-error {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: #d9534f;
  letter-spacing: 0.01em;
  font-weight: 400;
  text-transform: none;
}

/* ── Input / select border turns red on error ───────── */
input.input-error,
select.input-error,
textarea.input-error {
  border-color: #d9534f !important;
  box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.12) !important;
}

/* ── Remove red border once the field is corrected ──── */
input:not(.input-error):focus,
select:not(.input-error):focus,
textarea:not(.input-error):focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(196, 113, 79, 0.12);
}

/* ── Photo upload slot — error state ────────────────── */
.photo-slot.has-error .photo-upload {
  border-color: #d9534f;
}
.photo-slot .field-error {
  text-align: center;
  margin-top: 6px;
}

.field-error{
    color:red !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    font-size:13px;
    margin-top:4px;
    position:relative !important;
    z-index:9999;
}

.input-error{
    border:1px solid red !important;
}