/* =====================================================================
 *  register.css — the membership registration flow
 *
 *  Kept apart from style.css on purpose.  This is the only page with a
 *  multi-step form, a progress rail, an OTP panel and a receipt, and none
 *  of it belongs in the shared sheet where every other page would carry it.
 * ===================================================================== */

.reg-wrap {
  max-width: 860px;
  margin: 0 auto;
}

/* ---------------- progress rail ---------------- */

.reg-steps {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  counter-reset: regstep;
}

.reg-steps li {
  position: relative;
  padding: 10px 8px 10px 34px;
  border-radius: 10px;
  background: #f3f5f9;
  color: #6b7280;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  counter-increment: regstep;
  transition: background .2s ease, color .2s ease;
}

.reg-steps li::before {
  content: counter(regstep);
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #d8dde7;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.reg-steps li[aria-current="step"] {
  background: #14264a;
  color: #fff;
}

.reg-steps li[aria-current="step"]::before { background: #f0a500; }

.reg-steps li.done {
  background: #e6f4ea;
  color: #166534;
}

.reg-steps li.done::before {
  background: #16a34a;
  content: "\2713";
  font-size: 11px;
}

/* ---------------- panels ---------------- */

.reg-panel {
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 16px;
  padding: 26px 26px 22px;
  box-shadow: 0 8px 26px rgba(20, 38, 74, .06);
}

.reg-panel[hidden] { display: none; }

.reg-panel > h2 {
  margin: 0 0 4px;
  font-size: 21px;
  color: #14264a;
}

.reg-panel > .panel-hint {
  margin: 0 0 20px;
  color: #6b7280;
  font-size: 14px;
}

.reg-section-title {
  margin: 22px 0 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #14264a;
  border-bottom: 1px solid #eef1f6;
  padding-bottom: 7px;
}

.reg-section-title:first-of-type { margin-top: 0; }

/* ---------------- required marker ---------------- */

label .req {
  color: #b91c1c;
  margin-left: 3px;
  font-weight: 700;
}

/* ---------------- photo picker ---------------- */

.reg-photo {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.reg-photo-drop {
  flex: 1 1 260px;
  min-height: 132px;
  border: 2px dashed #c9d2e0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 14px;
  color: #6b7280;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.reg-photo-drop:hover,
.reg-photo-drop:focus-visible {
  border-color: #14264a;
  background: #f7f9fc;
}

.reg-photo-drop input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.reg-photo-preview {
  width: 108px;
  height: 108px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid #e5e9f0;
  background: #f3f5f9;
  display: none;
}

.reg-photo-preview.shown { display: block; }

.reg-file-meta {
  margin-top: 8px;
  font-size: 12.5px;
  color: #6b7280;
}

/* Secondary line under a field — where a PIN code came from, or why the
   form could not work one out. */
.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: #6b7280;
}
.field-hint:empty { display: none; }
.field-hint.filled { color: #0f766e; }
.field-hint.stale { color: #b45309; }

/* The "not in the list, I'll type it" box. Shares the field styling of
   every other input; the `hidden` attribute is all that separates them. */
#block-custom, #police-custom {
  width: 100%;
  margin-top: 8px;
}

/* ---------------- OTP panel ---------------- */

.reg-otp {
  border: 1px solid #e5e9f0;
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0 0;
}

.reg-otp-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.reg-otp-row .form-group { margin-bottom: 0; min-width: 190px; }

.reg-otp-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: #6b7280;
}

.reg-otp-note.good { color: #166534; }

.reg-otp-note.bad { color: #b91c1c; }

/* ---------------- notice strips ---------------- */

.reg-notice {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  margin: 14px 0 0;
  line-height: 1.5;
}

.reg-notice.info { background: #eef4ff; color: #1e3a8a; }

.reg-notice.warn { background: #fff7ed; color: #9a3412; }

.reg-notice.bad  { background: #fef2f2; color: #991b1b; }

.reg-notice.good { background: #f0fdf4; color: #166534; }

.reg-notice[hidden] { display: none; }

/* ---------------- stepper buttons ---------------- */

.reg-nav {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  flex-wrap: wrap;
}

.reg-nav .spacer { flex: 1; }

.reg-progress-text {
  font-size: 12.5px;
  color: #6b7280;
  font-weight: 600;
}

/* ---------------- field errors ---------------- */

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #dc2626;
  background: #fff5f5;
}

.field-error {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: #b91c1c;
}

.field-error:empty { display: none; }

/* ---------------- declaration ---------------- */

.reg-declare {
  border: 1px solid #e5e9f0;
  border-radius: 12px;
  padding: 16px;
  background: #fbfcfe;
}

.reg-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 12px;
  cursor: pointer;
}

.reg-check:last-child { margin-bottom: 0; }

.reg-check input {
  margin-top: 3px;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  accent-color: #14264a;
}

/* ---------------- receipt ---------------- */

.reg-receipt {
  text-align: center;
  padding: 12px 0 6px;
}

.reg-receipt .tick {
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #f0fdf4;
  color: #16a34a;
  display: grid;
  place-items: center;
  font-size: 34px;
  line-height: 1;
}

.reg-appno {
  display: inline-block;
  margin: 12px 0 6px;
  padding: 10px 20px;
  border-radius: 10px;
  background: #14264a;
  color: #fff;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 21px;
  letter-spacing: .06em;
}

.reg-receipt p {
  color: #4b5563;
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 520px;
  margin: 6px auto 0;
}

/* ---------------- status lookup ---------------- */

.reg-status-out {
  margin-top: 18px;
  border-radius: 12px;
  border: 1px solid #e5e9f0;
  padding: 16px;
}

.reg-status-out[hidden] { display: none; }

.reg-status-out dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: 14px;
}

.reg-status-out dt { color: #6b7280; }

.reg-status-out dd { margin: 0; font-weight: 600; color: #14264a; }

.reg-badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}

.reg-badge.ok   { background: #f0fdf4; color: #166534; }
.reg-badge.warn { background: #fff7ed; color: #9a3412; }
.reg-badge.bad  { background: #fef2f2; color: #991b1b; }

/* ---------------- small screens ---------------- */

@media (max-width: 720px) {
  .reg-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .reg-panel {
    padding: 20px 16px 18px;
  }

  .reg-nav .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* The rail is decoration: a screen reader should hear the step, not the
 * animation of it. */
@media (prefers-reduced-motion: reduce) {
  .reg-steps li { transition: none; }
}