/* =============================================================================
   Grupo Axia — Formulário de Franquias

   Estilos EXCLUSIVOS deste formulário. Tudo que ele tem de igual ao
   formulário de serviços — caixa, modal, etapas, progresso, cards de escolha,
   rodapé, tela de fim — vem de ../formulario/css/style.css, que carrega antes
   deste e é o dono do visual dos dois.

   NÃO copie regras de lá para cá. Se um ajuste vale para os dois formulários,
   o lugar dele é no arquivo compartilhado; se valesse só para um, ele estaria
   aqui. Duplicar é o caminho para os dois saírem de sincronia sem ninguém
   perceber.

   O que existe aqui é uma coisa só: a opção de escolha com uma segunda linha
   de apoio. O formulário de serviços não tem nenhuma; o de franquias precisa
   dela nos planos.
   ========================================================================== */

/* ------------------------ O ponto de montagem -----------------------------
   O arquivo compartilhado dá largura ao `[data-lf-pagina]`, com um efe. O
   ponto de montagem daqui tem dois, então aquela regra não o alcança — e sem
   largura ele encolhe até o conteúdo, porque é item de um flex com
   `align-items: center`. A caixa saía com 409px em vez de 520px.

   Os valores são os mesmos de lá de propósito: as duas páginas de formulário
   precisam abrir com a mesma medida.
   ------------------------------------------------------------------------ */
.lf-pagina [data-lff-pagina] {
  width: 100%;
  max-width: 520px;
}

/* -------------------------- Dois numa linha -------------------------------
   Estado e cidade são uma pergunta só partida em dois controles: separá-los
   em linhas próprias faria a etapa parecer ter duas perguntas onde há uma.

   O estado é a coluna estreita porque o conteúdo dele é fixo — uma sigla —,
   enquanto o nome da cidade pode ser longo ("Santa Bárbara d'Oeste") e é quem
   precisa do espaço.

   `min-width: 0` nas duas colunas: itens de grid não encolhem abaixo do
   conteúdo por padrão, e sem isso um `<option>` comprido como "Rio Grande do
   Norte" empurraria a coluna e estouraria a caixa do formulário.
   ------------------------------------------------------------------------ */
.lf-dupla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 480px) {
  .lf-dupla {
    grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  }
}

.lf-dupla > .field {
  min-width: 0;
}

/* ---------------------- Opção com linha de apoio --------------------------
   "Start", "Business" e "Enterprise" não significam nada para quem chegou
   pelo hero e não rolou até a tabela de planos. A nota embaixo do nome é o
   que evita que a escolha seja um chute — e é a mesma descrição de porte que
   a página usa, para a pessoa não ler duas versões diferentes da mesma coisa.

   O `.lf-opcao` compartilhado é um flex na horizontal (marca + texto). Aqui o
   texto vira uma coluna, então o nome e a nota empilham dentro do mesmo item,
   sem mexer no alinhamento da marca ao lado.
   ------------------------------------------------------------------------ */
.lf-opcao__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* `min-width: 0` porque um item de flex não encolhe abaixo do conteúdo por
     padrão: sem ele, uma nota longa empurraria o card para fora da coluna em
     vez de quebrar em duas linhas. */
  min-width: 0;
}

.lf-opcao__nota {
  font-size: 12px;
  line-height: 17px;
  font-weight: 300;
  color: var(--ink-muted);
  /* A nota não acompanha o verde do estado escolhido: ela é apoio de leitura,
     e o realce pertence ao nome do plano. Sem esta linha ela herdaria o
     `color` do card marcado e as duas linhas ficariam com o mesmo peso. */
  transition: color 0.2s ease;
}

/* Escolhido, a nota só escurece um pouco — o suficiente para não parecer
   apagada sobre o fundo verde claro, sem disputar com o nome. */
.lf-opcao[aria-checked="true"] .lf-opcao__nota,
.lf-opcao[aria-pressed="true"] .lf-opcao__nota {
  color: var(--brand-400);
}

/* Com duas linhas, 56px de altura mínima apertam o card contra o texto. */
.lf-opcao:has(.lf-opcao__nota) {
  min-height: 64px;
}