/* Assinar (/assinar, js/assinar.js): o formulário de entrar e começar (css/porta.css) com o que é só daqui: os
   planos como escolha (o escolhido vira o bloco vinho do sistema), a escolha "pra mim" ou "pra turma" e o Pix (QR,
   copia e cola, esperando). Só tokens; peça no chão sem sombra. Prefixo as-. */

/* ===== os planos: dois cartões de escolha lado a lado (no celular estreito, um embaixo do outro) ===== */
/* nome, preço e nota em linhas comuns aos dois cartões (subgrid): com a etiqueta quebrando embaixo do nome, o preço
   dos dois continua na mesma altura */
.as-planos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0 12px; }
.escolha.as-plano {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 4px;
  min-height: 108px;
  padding: 14px 14px 13px;
  border-radius: var(--raio-3);
  text-align: left;
  white-space: normal;
}
@supports (grid-template-rows: subgrid) { .escolha.as-plano { grid-row: span 3; grid-template-rows: subgrid; } }
@media (max-width: 359px) {
  .as-planos { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 12px; }
  .escolha.as-plano { grid-row: auto; grid-template-rows: none; }
}
.as-plano-topo { display: flex; flex-wrap: wrap; align-self: start; align-items: center; gap: 6px 8px; min-height: 26px; }
.as-plano-topo b { font-size: 17px; font-weight: 600; }
.as-plano .etiqueta { font-size: 12.5px; }
.as-preco { font-size: 25px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.as-plano small { color: var(--texto-3); font-family: var(--fonte-texto); font-size: 13.5px; font-weight: 400; line-height: 1.35; }
/* escolhido: o vinho do sistema; a nota e a etiqueta acompanham a letra clara */
.as-plano[aria-checked="true"] small { color: inherit; opacity: .86; }
.as-plano[aria-checked="true"] .etiqueta { border-color: color-mix(in srgb, var(--sobre-vinho) 40%, transparent); background: transparent; color: inherit; }

.as-pra-quem > button { min-width: 0; white-space: nowrap; }
.as-turma-nota { margin-top: -4px; color: var(--texto-2); font-size: 14.5px; line-height: 1.45; text-wrap: pretty; }

.as-conta { align-items: flex-start; }
.as-conta p { color: var(--texto); overflow-wrap: anywhere; }
.as-conta .link-botao { min-height: 44px; margin-left: -4px; }

/* ===== Pix ===== */
.as-pix { display: grid; justify-items: center; gap: 16px; text-align: center; }
.as-resumo { font-size: 21px; letter-spacing: -.015em; }
/* o QR precisa de fundo branco pra ler, nos dois temas */
.as-qr-moldura { padding: 12px; border: var(--bw) solid var(--linha-media); border-radius: var(--raio-4); background: var(--papel-fixo); }
.as-qr { display: block; width: 220px; height: 220px; image-rendering: pixelated; }
.as-qr[hidden], .as-qr-moldura[hidden] { display: none; }
.as-dica { max-width: 34ch; color: var(--texto-2); font-size: 15px; text-wrap: balance; }
.as-copia-campo { width: 100%; text-align: left; }
.as-copia { min-height: 88px; font-family: var(--fonte-titulo); font-size: 13.5px; line-height: 1.45; resize: none; word-break: break-all; }
.as-esperando { display: inline-flex; align-items: center; gap: 10px; color: var(--texto-2); font-size: 15px; }
.as-esperando small { display: block; color: var(--texto-3); font-size: 13.5px; }
.as-esperando .girando { flex: none; }