/* Compra direta (24/10/2026) no visual Radar: a porta do base.html com a trilha "passo x de 3"
 * (telas/entrada.css), o plano escolhido num cartão, o pagamento que abre na InfinitePay e a espera
 * da confirmação (o mini-radar e o relógio de telas/plano.css). Carrega depois do entrada.css.
 */
.plano-escolhido { display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--sombra); }
.plano-escolhido.anual { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
.plano-escolhido > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.preco-compra { font: 700 1.45rem/1.15 var(--font-display); letter-spacing: -0.015em; }
.plano-escolhido .inclui { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.9rem; }
.plano-escolhido .inclui li { display: flex; gap: 8px; align-items: center; }
.plano-escolhido .inclui .ic { color: var(--teal); }
.troca-plano { font-size: 0.84rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.termo-compra { margin-top: 16px; }
.termo-compra .termo { margin-top: 10px; }
.aceite-compra { padding: 4px 6px; }
.form-porta > .dica-acao { justify-content: center; text-align: center; }

/* passo 2: abrindo a InfinitePay */
.abrindo { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.abrindo .espera-radar, .abrindo .espera-radar .mini-radar { width: 64px; height: 64px; }
.abrindo p { color: var(--muted); }
.abrindo b { color: var(--ink); }

/* passo 3: a espera e o recibo curto */
.compra-espera { display: grid; gap: 16px; padding: 18px; border-radius: 18px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--sombra); }
.compra-espera .abrir-provedor { margin-left: 0; }
.recibo-curto { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.84rem; color: var(--muted); }
.recibo-curto b { color: var(--ink); font: 500 0.88rem/1.3 var(--font-data); }
.indisponivel-compra { display: grid; gap: 12px; }