/* Controles nativos do site (mantêm a aparência de sempre do site). */
.oculto { display: none !important; }

/* botão de opção */
.radio-grupo { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 20px }
.radio { display: block; position: relative; margin: 0 0 16px; white-space: nowrap; cursor: pointer; color: rgba(0,0,0,.87); font-size: inherit; font-weight: normal; user-select: none }
.radio input { position: absolute; opacity: 0; width: 0; height: 0 }
.radio-marca { position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: inline-block; box-sizing: border-box; width: 20px; height: 20px; border: 2px solid rgba(0,0,0,.54); border-radius: 50%; transition: border-color .28s ease }
.radio-marca::after { content: ''; position: absolute; left: 3px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary-button-color); transform: scale(0); transition: transform .28s ease }
.radio input:checked + .radio-marca { border-color: var(--primary-button-color) }
.radio input:checked + .radio-marca::after { transform: scale(1) }
.radio input:focus-visible + .radio-marca { box-shadow: 0 0 0 8px rgba(62,141,92,.26) }
.radio-texto { position: relative; display: inline-block; margin-left: 30px; margin-right: 0; vertical-align: middle; white-space: normal }
.radio-texto > span { font-size: 20px }

/* as opções não herdam o estilo dos rótulos dos campos (negrito, 16px, alinhado à esquerda) */
#resultado .formas-pagamento .radio { display: block; width: auto; font-size: 20px; font-weight: normal; line-height: normal; color: rgba(0,0,0,.87); text-align: left; margin-bottom: 8px }

/* espaçamento das opções na tela de pagamento */
#resultado .pagamento .radio-grupo { margin: 0 }
#resultado .pagamento .radio { margin-bottom: 8px }
#resultado .pagamento .radio ~ .radio { margin-left: 50px }
/* ---- Controles do formulário de pagamento: um sistema só (ação em verde escuro, foco visível, 16 px de base) ---- */
:root { --verde-acao: #2f7d4f; --verde-acao-escuro: #276b43 }

/* Opções (rádio) viram um controle segmentado: uma linha só, a escolhida preenchida. O texto de cada opção nunca quebra. */
#resultado .radio-grupo { display: inline-flex; flex-wrap: nowrap; justify-content: center; gap: 2px; min-width: 0; max-width: 100%; margin: 0; padding: 3px; box-sizing: border-box; border: 0; border-radius: 12px; background: #eceeed; font-size: 16px }
#resultado .radio-grupo.tipo-pessoa { padding-top: 0; justify-content: center }
#resultado .pagador .radio-grupo { min-width: 0 }   /* a regra antiga de 300 px mínimos nos blocos do formulário não vale para o controle */
#resultado .radio-grupo .radio { flex: 1 1 auto; margin: 0; width: auto; white-space: nowrap; text-align: center; font-size: 16px; font-weight: 600; line-height: 1; color: #5b5d60 }
#resultado .radio-grupo .radio:not(.oculto) ~ .radio:not(.oculto) { margin-left: 0; border: 0 }
#resultado .radio-grupo .radio-marca { display: none }
#resultado .radio-grupo .radio-texto { display: flex; align-items: center; justify-content: center; margin: 0; min-height: 42px; padding: 0 14px; border-radius: 9px; white-space: nowrap; transition: background .15s ease, color .15s ease }
#resultado .radio-grupo .radio-texto > span { font-size: 16px; font-weight: 600 }
#resultado .radio-grupo .radio input:checked ~ .radio-texto { background: #fff; color: var(--verde-acao-escuro); box-shadow: 0 1px 3px rgba(0,0,0,.18) }
#resultado .radio-grupo .radio:hover input:not(:checked) ~ .radio-texto { color: #2f3133 }
#resultado .radio-grupo .radio input:focus-visible ~ .radio-texto { outline: 3px solid rgba(47,125,79,.4); outline-offset: -3px }
@media (max-width: 340px) { #resultado .radio-grupo .radio-texto { padding: 0 10px } #resultado .radio-grupo .radio-texto > span { font-size: 15px } }

/* Perguntas e títulos de seção numa escala só (antes: 17, 20 e 25 px em maiúsculas). */
#resultado .pagador h1 { font-size: 16px; line-height: 1.35; font-weight: 600; margin-bottom: 12px; text-wrap: balance }
#resultado .pagamento h2, #resultado .valores h2, #resultado .qtd-passagens h3 { font-size: 18px; line-height: 1.3; font-weight: 700; text-transform: none; margin-bottom: 12px }
#resultado .pagamento h2 span, #resultado .valores h2 span, #resultado .qtd-passagens h3 span { width: 40px; height: 3px; margin: 8px auto 0; border-radius: 2px; background: var(--verde-acao) }

/* Rótulos e campos: rótulo pequeno em negrito leve, campo com o mesmo arredondamento dos botões. */
#resultado .formas-pagamento > div > div label { font-size: 14px; line-height: 1.3; font-weight: 600; margin-bottom: 6px }
#resultado .formas-pagamento > div > div input, #resultado .formas-pagamento > div > div select { min-height: 46px; border-radius: 8px }

/* Botão principal: proporcional, frase normal, sem a borda "3D". */
#resultado .botao-pagamento { margin: 20px 0; text-align: center }
#resultado .botao-pagamento > button { display: block; width: 100%; max-width: 380px; min-height: 52px; margin: 16px auto 0; padding: 0 24px; border: 0; border-radius: 10px; background: var(--verde-acao); font-family: inherit; font-size: 17px; line-height: 1.2; font-weight: 700; letter-spacing: .01em; text-transform: none; color: #fff; transition: background .15s ease }
#resultado .botao-pagamento .btn-continuar-pagamento { font-size: 17px; line-height: 1.2; padding: 0 24px }
#resultado .botao-pagamento > button:hover:not(:disabled) { background: var(--verde-acao-escuro) }
#resultado .botao-pagamento > button:focus-visible { outline: 3px solid rgba(47,125,79,.4); outline-offset: 2px }
#resultado .botao-pagamento > button:disabled { opacity: .6; cursor: default }
@media (prefers-reduced-motion: reduce) { #resultado .botao-pagamento > button { transition: none } }
/* carregando */
.carregando { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.32) }
.loader-tela { display: flex; align-items: center; justify-content: center; padding: 18px 34px; background: #fff; border-radius: 8px }
.loader-tela .giro { animation: girar 1.4s linear infinite }
@keyframes girar { to { transform: rotate(360deg) } }



/* Rodapé: celular empilhado e centralizado (link, logos, direitos); desktop em uma linha com três blocos. Entra no fluxo da página (antes era absoluto e sobreporia o conteúdo ao crescer). */
footer { position: static; padding: 28px 0 24px; border-top: 1px solid #e3e3e3 }
main { min-height: 0; padding-bottom: 48px }   /* sem forçar a altura da tela: o rodapé vem logo depois do conteúdo */
footer div.central { flex-direction: column; gap: 18px; padding: 0 16px; box-sizing: border-box }
footer div.central .politica { order: 1; margin: 0; font-size: 15px; font-weight: 600; color: var(--verde-acao); text-decoration: underline; text-underline-offset: 3px }
footer div.central .politica:hover { color: var(--verde-acao-escuro) }
footer div.central .politica:focus-visible { outline: 3px solid rgba(47,125,79,.4); outline-offset: 3px; border-radius: 2px }
footer .telmesh { order: 2; display: flex; align-items: center; justify-content: center; gap: 28px; width: auto; margin: 0; float: none; overflow: visible }
footer .telmesh img { display: block; height: 30px; width: auto; max-width: 100% }
footer div.central p { order: 3; margin: 0; float: none; max-width: 340px; font-size: 13px; line-height: 1.5; text-wrap: balance }
@media screen and (min-width: 980px) {
	footer { padding: 28px 0 }
	footer div.central { flex-direction: row; justify-content: space-between; gap: 24px; padding: 0 }
	footer div.central p { order: 1; flex: 1 1 0; max-width: none; text-align: left; text-wrap: pretty }
	footer div.central .politica { order: 2; flex: 0 0 auto }
	footer .telmesh { order: 3; flex: 1 1 0; justify-content: flex-end; margin: 0 }
}

/* Menu do topo: lista suspensa no celular, links em linha a partir de 640 px. */
header nav { display: flex; margin: 0 16px 0 auto }
header nav .desktop { display: none }
header nav .mobile select { min-height: 42px; max-width: 168px; padding: 0 12px; border: 1.5px solid #cfd6d2; border-radius: 10px; background: #fff; font: inherit; font-size: 15px; font-weight: 600; color: var(--verde-acao-escuro) }
header nav .mobile select:focus-visible, header nav .desktop a:focus-visible { outline: 3px solid rgba(47,125,79,.4); outline-offset: 2px }
@media screen and (min-width: 640px) {
	header nav .mobile { display: none }
	header nav .desktop { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px }
	header nav .desktop a { float: none; width: auto; padding: 8px 9px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--verde-acao); text-decoration: none; transition: background .15s ease }
	header nav .desktop a:hover { background: #eef5f0; text-decoration: none }
}

/* espaço acima do botão de pagar */

/* a pergunta do pagador cabe na largura do bloco (no celular ficava cortada na direita) */
#resultado .pagador h1 { width: 100%; text-align: center; overflow-wrap: break-word }