/* Tela do celular reserva — so o que nao existe no tema/style. Nenhuma classe
   daqui e' lida por app.js: esta pagina nao carrega o app.js. */

.reserva-lista { display: flex; flex-direction: column; gap: 8px; }

/* Linha inteira e' o alvo: 52px, acima do piso de 44px do campo.css. */
.reserva-opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.reserva-opcao:hover:not(:disabled) { background: var(--hover); border-color: var(--brand-50); }
.reserva-opcao-marca { margin-left: auto; font-size: var(--t-xs); font-weight: 600; color: var(--ink); }

/* O selecionado se destaca: fundo de marca com tinta --ink, NUNCA --brand-ink —
   ambar 15% com tinta de marca da 4,37:1 e reprova em AA (ja pegou duas vezes). */
.reserva-opcao.reserva-selecionado { border-color: var(--brand-40); background: var(--brand-15); font-weight: 600; }
/* Desabilitado tambem durante o envio — por isso o destaque vai por classe, nao por :disabled. */
.reserva-opcao:disabled { cursor: default; }

.reserva-lista + .mensagem { margin-top: 14px; }