:root{
  --nt-ok-bg: rgba(21, 210, 166, .16);
  --nt-bad-bg: rgba(239, 68, 68, .16);
}

/* Registration-only UI helpers (keeps smslogin.php untouched) */

.ntsl-stepper{
  /*
    Keep the step buttons side-by-side.
    Grid is more predictable than flex under zoom/scaling.
  */
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin: 0 0 12px;
}
.ntsl-step{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.62);
  border-radius: 18px;
  color: rgba(15,23,42,.64);
  font-weight: 900;
  font-size: 12px;
  user-select:none;
}
.ntsl-step .dot{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(15,23,42,.08);
  color: rgba(15,23,42,.55);
  font-weight: 900;
  flex: 0 0 22px;
}
.ntsl-step.is-active{
  border-color: rgba(21, 210, 166, .45);
  background: rgba(255,255,255,.88);
  color: rgba(15,23,42,.90);
  box-shadow: 0 0 0 4px rgba(21, 210, 166, .12);
}
.ntsl-step.is-active .dot{
  background: var(--nt-ok-bg);
  color: var(--nt-primary);
}
.ntsl-step.is-done{
  border-color: rgba(21, 210, 166, .25);
  background: rgba(255,255,255,.78);
  color: rgba(15,23,42,.78);
}
.ntsl-step.is-done .dot{
  background: var(--nt-ok-bg);
  color: var(--nt-primary);
}

.ntsl-inputwrap{ position: relative; }
.ntsl-inputwrap .ntsl-input{ padding-left: 48px; }
.ntsl-indicator,
.ntsl-ind{
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 900;
  font-size: 13px;
  background: rgba(15,23,42,.08);
  color: rgba(15,23,42,.55);
  opacity: 0;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
  pointer-events:none;
}
.ntsl-indicator.is-show,
.ntsl-ind.is-show{ opacity: 1; }
.ntsl-indicator.is-ok,
.ntsl-ind.is-ok{
  background: var(--nt-ok-bg);
  color: var(--nt-primary);
}
.ntsl-indicator.is-bad,
.ntsl-ind.is-bad{
  background: var(--nt-bad-bg);
  color: #ef4444;
}

.ntsl-choicegrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.ntsl-choice{
  font-family: inherit;
  cursor:pointer;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  border-radius: 18px;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 12px;
  text-align: right;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(15,23,42,.82);
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
  user-select:none;
}
.ntsl-choice:hover{ transform: translateY(-1px); }
.ntsl-choice.is-active{
  border-color: rgba(21, 210, 166, .55);
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 4px rgba(21, 210, 166, .12);
}

/* Rich choice content (SMS / Voice) */
.ntsl-choice__icon{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(21, 210, 166, .12);
  color: rgba(5, 150, 105, .95);
  flex: 0 0 auto;
  font-size: 18px;
}
.ntsl-choice__text{ display:flex; flex-direction:column; gap:2px; min-width: 0; }
.ntsl-choice__title{ font-weight: 900; font-size: 13px; color: rgba(15,23,42,.86); }
.ntsl-choice__desc{ font-weight: 800; font-size: 11px; color: rgba(15,23,42,.55); }

.ntsl-chips{ display:flex; gap:10px; flex-wrap: wrap; margin-top: 12px; }
.ntsl-chip{
  cursor:pointer;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(15,23,42,.78);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  user-select:none;
}
.ntsl-chip.is-active{
  border-color: rgba(21, 210, 166, .55);
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 4px rgba(21, 210, 166, .12);
}

.ntsl-grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ntsl-grid2 > div{ min-width: 0; }

.ntsl-inline-note{ margin-top: 10px; color: var(--nt-muted); font-size: 12px; line-height: 1.7; }

@media (max-width: 560px){
  .ntsl-choicegrid{ grid-template-columns: 1fr; }
  .ntsl-grid2{ grid-template-columns: 1fr; }
}