/* ==========================================================================
   Mi Wallet OmniPOS — register.css
   Styles for the two-step business registration page only.

   Every selector is prefixed .reg- so nothing here can reach into the rest
   of the template. Fold into custom.css as a numbered section if you would
   rather keep one stylesheet.

   CONTENTS
   1.  Card shell
   2.  Banner
   3.  Body
   4.  Step progress
   5.  Slider
   6.  Fields
   7.  Phone input
   8.  Callout
   9.  Navigation
   10. Footer
   11. Focus
   12. Reduced motion
   ========================================================================== */


/* 1. Card shell ----------------------------------------------------------- */

.auth-form-light {
  overflow: hidden;
  border-radius: 6px;
}


/* 2. Banner --------------------------------------------------------------- */

.reg-banner {
  line-height: 0;
  background: #f4f5f7;
}

.reg-banner img {
  display: block;
  width: 100%;
  height: auto;
}


/* 3. Body ----------------------------------------------------------------- */

.reg-body {
  padding: 2rem 1.5rem 2.25rem;
}

@media (min-width: 576px) {
  .reg-body {
    padding: 2.5rem 3rem 2.75rem;
  }
}


/* 4. Step progress -------------------------------------------------------- */

.reg-steps {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.5rem 0 1.75rem;
}

.reg-steps .reg-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: #9a9a9a;
  white-space: nowrap;
}

.reg-steps .reg-chip .reg-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  font-size: .75rem;
  font-weight: 600;
  background: #fff;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.reg-steps .reg-chip.is-active {
  color: #1f1f1f;
  font-weight: 500;
}

.reg-steps .reg-chip.is-active .reg-num {
  background: #0090e7;
  border-color: #0090e7;
  color: #fff;
}

.reg-steps .reg-chip.is-done .reg-num {
  background: #00d25b;
  border-color: #00d25b;
  color: #fff;
}

.reg-steps .reg-rule {
  flex: 1 1 auto;
  height: 1px;
  background: #e6e6e6;
}


/* 5. Slider --------------------------------------------------------------- */

.reg-wizard {
  overflow: hidden;
  transition: height .35s cubic-bezier(.4, 0, .2, 1);
}

.reg-track {
  display: flex;
  width: 200%;
  /* Without flex-start each panel is stretched to the height of the taller
     one, so measuring the short panel reports the tall panel's height and
     the card never shrinks. This is what leaves a gap above the buttons. */
  align-items: flex-start;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.reg-track[data-active="2"] {
  transform: translateX(-50%);
}

.reg-step {
  width: 50%;
  flex: 0 0 50%;
  padding-right: 2px;
}

/* The last field's bottom margin would otherwise collapse out of
   scrollHeight, making the measured height a few pixels short. */
.reg-step > :last-child {
  margin-bottom: 0;
}

.reg-step[inert] {
  opacity: .35;
}


/* 6. Fields --------------------------------------------------------------- */

.reg-hint {
  display: block;
  margin-top: .35rem;
  font-size: .75rem;
  color: #9a9a9a;
}

.reg-inline {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.reg-inline > * {
  flex: 1 1 180px;
  min-width: 0;
}


/* 7. Phone input ---------------------------------------------------------- */

.reg-phone {
  display: flex;
}

.reg-phone .form-control {
  border-radius: 0 2px 2px 0;
}

.reg-dial {
  display: flex;
  align-items: center;
  padding: 0 .9rem;
  background: #f4f5f7;
  border: 1px solid #e4e9f0;
  border-right: 0;
  border-radius: 2px 0 0 2px;
  font-size: .875rem;
  color: #6c7293;
  white-space: nowrap;
}


/* 8. Callout -------------------------------------------------------------- */

.reg-note {
  padding: .875rem 1rem;
  margin-bottom: 1.25rem;
  background: #f6fbff;
  border-left: 3px solid #0090e7;
  border-radius: 2px;
  font-size: .8125rem;
  line-height: 1.5;
  color: #4a4a4a;
}

.reg-note strong {
  color: #1f1f1f;
}


/* 9. Navigation ----------------------------------------------------------- */

.reg-nav {
  display: flex;
  gap: .75rem;
  margin-top: 1.5rem;
}

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

.reg-nav .btn-back {
  flex: 0 0 auto;
  min-width: 96px;
}


/* 10. Footer -------------------------------------------------------------- */

.reg-foot {
  margin-top: 1.5rem;
  font-size: .8125rem;
  color: #9a9a9a;
}


/* 11. Focus --------------------------------------------------------------- */

.reg-body :focus-visible {
  outline: 2px solid #0090e7;
  outline-offset: 2px;
}


/* 12. Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .reg-wizard,
  .reg-track,
  .reg-steps .reg-chip .reg-num {
    transition: none;
  }
}