/* ============================================================
   NationalRegionB — forms.css
   ============================================================ */

.auth-card .field { margin-bottom: 16px; }
.auth-card .btn { width: 100%; margin-top: 6px; }

.password-wrap { position: relative; }
.password-wrap .input { padding-right: 44px; }
.password-wrap .toggle-pw {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--muted); padding: 6px;
}

.input-group { display: flex; gap: 8px; }
.input-group .input, .input-group .select { flex: 1; }

/* amount field with currency */
.amount-field { position: relative; }
.amount-field .currency-tag {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-weight: 700; color: var(--text-2); font-size: 15px; pointer-events: none;
}
.amount-field .input { padding-right: 56px; font-size: 17px; font-weight: 700; }

/* checkbox list */
.check-list-inline { display: flex; flex-wrap: wrap; gap: 14px; }
.check-list-inline label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); cursor: pointer; }

/* range */
.range-row { display: flex; align-items: center; gap: 14px; }
.range-row input[type="range"] { flex: 1; accent-color: var(--primary); }

/* segmented */
.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; gap: 3px; }
.segmented button { border: none; background: none; padding: 7px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.segmented button.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }

/* otp / confirmation */
.confirm-input { font-size: 18px; text-align: center; letter-spacing: .3em; font-weight: 700; }

.field-required::after { content: " *"; color: var(--danger); }

/* ============================================================
   Security PIN
   ============================================================ */

.pin-inputs { display: flex; gap: 12px; justify-content: center; margin: 20px 0 6px; }
.pin-inputs .pin-digit {
  width: 56px; height: 64px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--text);
  caret-color: var(--primary);
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.pin-inputs .pin-digit:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.pin-inputs .pin-digit.is-filled { border-color: var(--primary); }
.pin-inputs.has-error .pin-digit { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.pin-inputs.is-shaking { animation: pin-shake .4s; }

@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.pin-modal { text-align: center; padding: 4px 0 8px; }
.pin-icon {
  width: 48px; height: 48px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--primary-soft, rgba(29, 161, 242, .12));
  color: var(--primary);
}
.pin-icon svg { width: 24px; height: 24px; }
.pin-desc { color: var(--text-2); font-size: 14px; margin: 0 0 4px; }
.pin-error { min-height: 20px; font-size: 13px; margin-top: 8px; }