.oie-enroll-google-authenticator {
  .google-authenticator-setup-info-title {
    text-align: center;
    margin-bottom: 15px;
  }

  .qrcode-info-container {
    display: flex;
  }

  .google-authenticator-setup-info {
    margin-right: 1rem;
  }

  .qrcode-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;

    .qrcode {
      display: block;
      border: $border-default;
      border-radius: $border-radius-default;
      max-width: 150px;
      margin-bottom: 5px;
    }
  }

  .google-authenticator-next {
    &.default-custom-button {
      margin-top: 0;
      margin-bottom: 25px;
    }
  }

  .shared-secret {
    display: block;
    text-align: center;
    // Open up the gap between the setup instructions and the secret (per Figma).
    margin-top: 20px;
    // Visual spacing only — the secret stays a single string (no literal spaces)
    // so it copies cleanly and a double-click selects the whole value.
    letter-spacing: 0.3em;
    // Compensate for the trailing letter-spacing so the text stays centered.
    text-indent: 0.3em;
  }
}