/* Legacy-parity text rendering: the old Creditas site sets
 * -webkit-font-smoothing: antialiased globally, which renders type
 * lighter/thinner on macOS. Webflow Code Components live in isolated
 * shadow roots, so this must be declared per-component on :host to
 * inherit into the shadow tree (the property does not cross the
 * shadow boundary). Without it, Blink defaults to subpixel smoothing
 * and identical 400-weight text looks heavier than the old site. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * StepIndicator — class naming: no BEM `__`; elements nested under
 * `.step-indicator`. Modifiers `--active`/`--completed` bared to `&.active`/
 * `&.completed` on `.step`.
 *
 * Tokens:
 *   Primary/color-40 (active)    = #8EDB00
 *   Secondary/Dark   (inactive)  = #d9d9d9
 *   Neutral/color-100            = #292929
 *   Body/3x-small--08/Medium     = 8px, medium, 12px line-height
 */

.step-indicator {
  display: block;

  .list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Item: step + connector */
  .item {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  /* Step: circle + label */
  .step {
    display: flex;
    align-items: center;
    gap: 9px;

    &.active .circle {
      background-color: #8edb00;
    }

    &.completed .circle {
      background-color: #8edb00;
      opacity: 0.6;
    }
  }

  /* Circle */
  .circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 100px;
    background-color: #d9d9d9;
    color: #292929;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-size: 8px;
    font-weight: 500;
    line-height: 12px;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
  }

  /* Label */
  .label {
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.3px;
    color: #292929;
    white-space: nowrap;
  }

  /* Connector line */
  .connector {
    width: 22px;
    height: 1px;
    background-color: #d9d9d9;
    flex-shrink: 0;
    /* symmetric gap so the line doesn't touch the next number */
    margin: 0 7px;
  }
}

/* Legacy-parity text rendering: the old Creditas site sets
 * -webkit-font-smoothing: antialiased globally, which renders type
 * lighter/thinner on macOS. Webflow Code Components live in isolated
 * shadow roots, so this must be declared per-component on :host to
 * inherit into the shadow tree (the property does not cross the
 * shadow boundary). Without it, Blink defaults to subpixel smoothing
 * and identical 400-weight text looks heavier than the old site. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * FormWizard — multi-step form container. Class naming: no BEM `__`; elements
 * nested under `.form-wizard`. Layout / success modifiers bared to `&.step-row`
 * / `&.step-column` / `&.success`. NOTE: the step-section element is `.step-panel`
 * (not `.step`) because a StepIndicator (block `.step-indicator`, which has its
 * own `.step`) renders inside this component's DOM — bare `.step` would collide.
 *
 * Tokens:
 *   Primary/color-40   = #8EDB00  (active step, primary button)
 *   Neutral/color-100  = #292929  (text, button text)
 *   Neutral/Lighter    = #f1f3f2  (input background)
 *   Neutral/Dark       = #52605a  (placeholder / muted text)
 *   Neutral/Light      = #d6dcd9  (borders, back button border)
 *   Error              = #e53935  (error state)
 */

:host,
.form-wizard {
  display: block;
}

.form-wizard,
.form-wizard *,
.form-wizard *::before,
.form-wizard *::after {
  box-sizing: border-box;
}

.form-wizard {
  width: 100%;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  color: #292929;

  /* Stepper */
  .stepper {
    margin-bottom: 32px;
  }

  /* Form */
  .form {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Steps (step-panel — see note above) */
  .step-panel {
    display: none;
    flex-direction: column;
    gap: var(--form-wizard-step-gap, 24px);

    &.active {
      display: flex;
    }
  }

  &.step-row .step-panel {
    flex-flow: row wrap;
    align-items: flex-start;
  }

  &.step-column .step-panel {
    flex-direction: column;
  }

  /* Actions */
  .actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
  }

  /* Buttons */
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 64px;
    padding: 18px 20px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.3px;
    text-align: center;
    white-space: nowrap;
    transition: opacity 0.15s ease, background-color 0.15s ease;

    &:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    /* Primary: next / submit */
    &.next,
    &.submit {
      background-color: #8edb00;
      color: #292929;

      &:hover:not(:disabled) {
        background-color: #7ec400;
      }
    }

    /* Secondary: back */
    &.back {
      background-color: transparent;
      color: #52605a;
      border: 1.5px solid #d6dcd9;

      &:hover:not(:disabled) {
        background-color: #f1f3f2;
      }
    }
  }

  /* Error message */
  .error-message {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 20px;
    color: #e53935;
  }

  /* Success state */
  &.success {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 40px 24px;
  }

  .success-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .success-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #292929;
    text-align: center;
  }

  .success-message {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: #292929;
    text-align: center;
  }
}

/* Slotted step fields (kept flat — ::slotted only resolves in the shadow tree). */
.form-wizard .step-panel ::slotted(*) {
  display: contents;
}