/**
 * 93-signup-progress.css
 *
 * Two things, both additions to the auth pages (register/onboarding),
 * neither of which exists anywhere in the TaxiCRM theme package:
 *
 * 1. .signup-progress — the 3-step wizard indicator. Confirmed by
 *    searching the entire theme for "wizard"/"stepper"/"step-indicator"
 *    — nothing exists. #14b474 (done state) is the theme's own real
 *    value from .sm-form-design's success state
 *    (assets/css/15-inputStyles.css). The active-step color is
 *    #00B8F5 — the Paytm-reference cyan used for the left brand panel
 *    in 94-auth-split.css — so the active step matches the page's own
 *    accent color instead of the theme's unrelated default blue.
 *
 *    Width: stretched to fill the full form-wrapper width (space-
 *    between instead of a centered cluster) with bigger circles/lines,
 *    now that the form panel itself is 34rem wide (94-auth-split.css)
 *    — the original compact size was sized for the old 27rem panel and
 *    looked small and off-center in the wider one.
 *
 * 2. .sm-form-design.password-input — the theme's real "Styled Form"
 *    floating-label component (.sm-form-design) has no built-in
 *    password-visibility-toggle variant in any of its documented
 *    examples. This mirrors the *existing*, already-shipped
 *    .login-form .form-floating.password-input rules in
 *    41-loginV1.css exactly, just re-measured for sm-form-design's
 *    real input height (3rem, vs form-floating's 2.875rem) so the
 *    toggle button sits inside the new input style correctly.
 */

/* ---- 1. Signup wizard progress ---- */
.signup-progress {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.signup-progress__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.signup-progress__circle {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  font-weight: 700;
  border: 2px solid #e3e3e6;
  color: #5E6C84;
  background: #ffffff;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.signup-progress__step--active .signup-progress__circle {
  border-color: #00B8F5;
  color: #00B8F5;
}
.signup-progress__step--done .signup-progress__circle {
  border-color: #14b474;
  background: #14b474;
  color: #ffffff;
}
.signup-progress__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5E6C84;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.signup-progress__step--active .signup-progress__label {
  color: #00B8F5;
}
.signup-progress__step--done .signup-progress__label {
  color: #14b474;
}
.signup-progress__line {
  flex: 1;
  height: 3px;
  background: #e3e3e6;
  margin: 1.3125rem 0.75rem 0;
  transition: background-color 0.3s ease;
}
.signup-progress__line--done {
  background: #14b474;
}

/* ---- 2. Password toggle on .sm-form-design (Styled Form) fields ---- */
.sm-form-design.password-input .form-control {
  padding-right: 3rem;
}
.sm-form-design.password-input .password-toggle {
  position: absolute;
  right: 0;
  top: 0;
  height: 3rem;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #5E6C84;
  cursor: pointer;
  z-index: 5;
}
.sm-form-design.password-input .password-toggle:hover {
  color: #333333;
}