/* Só o que o app do lojista não desenha: código em 6 casas, comissão grande
   e a lista de e-mails. Tamanhos de botão, cartão e menu vêm do app.css. */

.code-slots {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 4px;
}

.code-slots input {
  width: 100%;
  min-height: 52px;
  text-align: center;
  border-radius: 14px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.fee-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fee-hero .label {
  justify-content: center;
}

.fee-hero .fee-num {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: center;
  color: var(--ink);
}

.email-line {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  border-bottom: 1px solid var(--line);
}

.email-line span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-btn.quiet {
  color: var(--muted);
}

.screen > form {
  flex: 1 1 auto;
  min-height: 0;
}

.fee-hero {
  flex: 1 1 auto;
  justify-content: center;
}

.screen-pin {
  margin-top: auto;
}

.login-copy {
  margin: 0;
}

.login-copy strong {
  font-weight: 600;
}

/* A página inteira rola. Nenhuma tela tem rolagem própria.
   A tela continua pelo menos da altura da janela, para o botão
   com screen-pin ficar no pé quando o conteúdo é curto. */
html,
body {
  height: auto;
  min-height: 100%;
  /* overflow-x: hidden faz o Chrome ignorar a roda do mouse na página. */
  overflow: auto;
}

html body .app,
html body .app > .screen,
html body .app > .screen.screen-scroll,
html.kb:not(.sheet-lock) body .app > .screen,
html body .history {
  height: auto;
  max-height: none;
  overflow: visible;
  min-height: 0;
}

html body .app {
  min-height: 100dvh;
}

html body .app > .screen {
  flex: 1 0 auto;
  min-height: 100dvh;
}

.screen > form {
  min-height: auto;
  flex: 1 0 auto;
}