/* ============================================================
   COMBINED FORM CSS (BASE + OVERRIDES)
   File: /index_files/form.css
   ============================================================ */

/* Theme */
:root{
  --primary: #b60014;
  --primary2:#e11d48;

  --text: #111827;
  --muted:#6b7280;

  --border:#d1d5db;
  --bg:#ffffff;
  --bgSoft:#f9fafb;

  --ok:#22c55e;
  --err:#ef4444;
  --errText:#b42318;
}

/* Layout helpers */
#register-section{ max-width:520px; margin:24px auto; padding:0 14px; }
.form-auth{
  background: var(--bg);
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  overflow:hidden;
}
.form-auth .header{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  padding:28px 26px;
}
.form-auth .header *{ color:#fff !important; }
.form-auth .body{ background:#fff; padding:18px 22px 22px; }

.field-label{
  display:block;
  margin:0 0 8px 0;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--primary);
  font-size:16px;
  text-transform:uppercase;
}

/* Input groups (icon + input) */
.input-group{
  display:flex;
  flex-wrap:wrap;            /* key: allows error below */
  align-items:stretch;
  border-radius:14px;
}
.input-group-addon{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 14px;
  min-height:54px;
  background: var(--bgSoft);
  border:1px solid var(--border);
  border-right:0;
  border-radius:14px 0 0 14px;
}
.form-control{
  flex:1 1 auto;
  min-width:0;
  min-height:54px;
  padding:0 14px;
  border:1px solid var(--border);
  border-left:0;
  border-radius:0 14px 14px 0;
  background:#fff !important;

  /* IMPORTANT: force readable text (fixes "white typed text") */
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;

  outline:none;
  box-shadow:none !important;
}
.form-control::placeholder{
  color: rgba(17,17,17,.45) !important;
  -webkit-text-fill-color: rgba(17,17,17,.45) !important;
}

/* Focus */
.form-control:focus{
  border-color: rgba(182,0,20,.55) !important;
  box-shadow: 0 0 0 4px rgba(182,0,20,.12) !important;
}

/* Kill competitor “valid/invalid background fills” */
.form-control.valid,
.form-control.error,
.form-control:valid,
.form-control:invalid{
  background:#fff !important;
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
}

/* Subtle state borders only */
.form-control.valid, .form-control:valid{ border-color: rgba(34,197,94,.75) !important; }
.form-control.error, .form-control:invalid{ border-color: rgba(239,68,68,.85) !important; }

/* Our JS-driven error class */
.form-control.is-error{ border-color: var(--err) !important; }

/* Per-field error under input */
.field-error{
  width:100%;
  margin-top:6px;
  color: var(--errText);
  font-size:12px;
  font-weight:700;
  line-height:1.25;
}

/* If old validator inserts label.error, style it too */
label.error{
  display:block !important;
  width:100% !important;
  margin:6px 0 0 0 !important;
  color: var(--errText) !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  position:static !important;
  float:none !important;
  text-align:left !important;
  white-space:normal !important;
}

/* Button */
.btn-submit{
  width:100%;
  height:62px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
  letter-spacing:.12em;
  color:#fff;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow:0 16px 30px rgba(182,0,20,.20);
}
.btn-submit:disabled{
  opacity:.75;
  cursor:not-allowed;
  box-shadow:none;
}

/* Note */
.form-note{
  margin:14px 2px 0;
  color: rgba(17,24,39,.65);
  font-size:14px;
  line-height:1.5;
}

/* Chrome/Edge autofill fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:#111 !important;
  box-shadow:0 0 0 1000px #fff inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Mobile */
@media (max-width: 420px){
  .form-auth .header{ padding:22px 18px; }
  .form-auth .body{ padding:16px 16px 18px; }
  .field-label{ font-size:15px; }
}