/* Estilo do CARDÁPIO DO CLIENTE — as medidas saem do canvas de design (design_cardapio/).
 *
 * ─── POR QUE NÃO É O `/shared/styles.css` ──────────────────────────────────────────────────────
 * Aquele é a moldura do OPERADOR: fundo quase preto, raio zero, escala pensada para ser lida a três
 * metros num monitor de balcão, por quem passa oito horas ali. Esta tela é de quem está com fome no
 * sofá, no celular, e nunca viu o sistema. São dois produtos.
 *
 * ⚠️ **O fundo é `#FBF1EE`, e isso já esteve errado.** A primeira versão usou `#ECE2E0`, que no canvas
 * é a cor ATRÁS do celular — o fundo da mesa de trabalho, não da tela. A tela do artboard é a mais
 * clara. Errar isso deixou o app inteiro com um tom sujo que não era o do design.
 *
 * ⚠️ O laranja (#F2521E) é o do design, um tom acima do laranja da marca do Pontto (#FE6204). Se um
 * dia a casa quiser os dois idênticos, o lugar de mudar é este bloco `:root` — e só ele.
 */

:root {
  --bg: #FBF1EE;          /* a TELA (não o canvas atrás dela) */
  --card: #FFFFFF;
  --tile: #101014;        /* o ladrilho da categoria, e a pílula preta do preço */
  --ink: #1F2A44;
  --mut: #7A8299;
  --acc: #F2521E;
  --acc-hi: #C93E12;
  --acc-soft: rgba(242, 82, 30, .12);
  --grn: #1FA463;
  --grn-soft: rgba(31, 164, 99, .12);
  --amarelo: #FFD34E;     /* a pílula "Ver todos" */
  --red: #D93025;
  --linha: rgba(31, 42, 68, .08);
  --sombra: 0 4px 16px rgba(31, 42, 68, .06);
  --r: 20px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Satoshi', 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Zoom LIBERADO, ao contrário da cozinha: lá o pinch acidental atrapalha quem trabalha com a mão
     ocupada; aqui quem lê pode precisar ampliar, e este app é para qualquer pessoa. */
}

/* A coluna. 390px é o alvo do artboard; no desktop ela não estica — cardápio esticado em monitor
   vira linha de texto de 1600px, que ninguém lê. O padding de baixo abre espaço para a nav fixa. */
.pagina { max-width: 480px; margin: 0 auto; padding: 0 20px 132px; }

/* Sangra até a borda: o card cortado é o que conta ao polegar que há mais para o lado. */
.rolagem-h {
  display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -20px; padding: 0 20px 4px;
}
.rolagem-h::-webkit-scrollbar { display: none; }

/* ── Cabeçalho ────────────────────────────────────────────────────────────────────────────────── */
.topo { display: flex; align-items: center; gap: 10px; padding: 18px 0 0; }

/* Quadrado ARREDONDADO (raio 14), não círculo — e a sigla é LARANJA sobre o carvão. */
.marca {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 14px; background: var(--tile);
  color: var(--acc); display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
.marca-nome { font-size: 16px; font-weight: 700; white-space: nowrap; }
.marca-linha { display: flex; align-items: center; gap: 6px; margin-top: 2px; }

.selo-aberto, .selo-fechado {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 700;
}
.selo-aberto { background: var(--grn-soft); color: var(--grn); }
.selo-fechado { background: rgba(31, 42, 68, .08); color: var(--mut); }
.ponto { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.tempo { font-size: 12px; font-weight: 500; color: var(--mut); white-space: nowrap; }

.saudacao { padding: 18px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

/* ── Busca ───────────────────────────────────────────────────────────────────────────────────── */
.busca {
  display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 8px 0 18px;
  border-radius: 999px; background: var(--card); box-shadow: var(--sombra); margin-top: 14px;
}
.busca input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 500; outline: none;
}
.busca input::placeholder { color: var(--mut); font-weight: 500; }
.busca-limpar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px; background: var(--acc-soft);
  color: var(--acc); display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; cursor: pointer;
}
/*
 * ⚠️ **`display` de AUTOR mata o atributo `hidden`, e o sintoma é mudo.** O `hidden` do HTML esconde
 * pela folha do NAVEGADOR (`[hidden] { display: none }`), e qualquer `display` declarado aqui vence
 * essa folha — não é questão de especificidade, é de origem. O `cardapio.js` sempre fez a parte dele
 * (nasce com `hidden` sem texto, e `digitou` alterna `limpar.hidden`), mas o ✕ ficava aceso no campo
 * vazio assim mesmo: o desenho dizia uma coisa e a cascata fazia outra (prova de campo de 21/09).
 *
 * Quem declarar `display` numa classe que também usa `hidden` precisa desta linha junto.
 */
.busca-limpar[hidden] { display: none; }

/* ── Banner: a ARTE que a loja sobe (0032) ───────────────────────────────────────────────────── */
/*
 * ⚠️ **A PROPORÇÃO É FIXA — 15:8 — e é exigência do dono**, não escolha de estilo. Ele desenha a
 * arte fora do sistema, e a arte precisa saber em que moldura vai cair. O número sai do artboard
 * (`design_cardapio/`): 350 × ~187 px na tela de 390 = 1,871, e 15/8 = 1,875.
 *
 * O lar único é `packages/domain/loja/banner.ts` (`BANNER_ASPECT_RATIO`): é de lá que a tela de
 * gestão tira o "1200 × 640 px" que ensina ao dono. Mudar aqui sem mudar lá deixa a gestão ensinando
 * um tamanho e a tela cortando outro — e quem descobre é ele, com a arte torta no ar.
 *
 * O `aspect-ratio` reserva a altura ANTES de a imagem chegar. Sem ele o bloco nasce com zero e
 * empurra o cardápio para baixo no meio da leitura.
 */
.banner {
  position: relative;
  margin-top: 20px;
  aspect-ratio: 15 / 8;
  border-radius: var(--r);
  /* O laranja fica como cor de espera: enquanto a arte carrega, o espaço é o bloco do design, e não
     um retângulo cinza. */
  background: var(--acc);
  overflow: hidden;
}
/* `cover` porque a moldura é fixa e a arte pode vir com alguns pixels de diferença: melhor um corte
   simétrico nas bordas que a arte esticada. Fora da proporção, o dono vê o corte e sobe outra. */
.banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Categorias em ladrilho ──────────────────────────────────────────────────────────────────── */
.cat { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; width: 84px; cursor: pointer; }
.cat-ladrilho {
  width: 74px; height: 74px; border-radius: 22px; background: var(--tile);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cat-ladrilho img { width: 100%; height: 100%; object-fit: cover; }
.cat.on .cat-ladrilho { background: var(--acc); }
/* Duas linhas, centrado, sem invadir o vizinho (17/09): "Frango c/ Cobertura" não cabe numa. */
.cat-nome {
  font-size: 12px; font-weight: 500; line-height: 1.2; text-align: center; width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat.on .cat-nome { font-weight: 700; color: var(--acc); }

/* ── Cabeçalho de seção ──────────────────────────────────────────────────────────────────────── */
.secao {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 26px 0 0;
}
.secao-titulo { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.ver-todos {
  flex: 0 0 auto; background: var(--amarelo); color: var(--ink);
  font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 999px;
  border: 0; font-family: inherit; cursor: pointer;
}

/* ── Card do carrossel ("Mais pedidos") ──────────────────────────────────────────────────────── */
.destaque {
  flex: 0 0 auto; width: 268px; background: var(--card); border-radius: var(--r);
  padding: 8px; box-shadow: var(--sombra); border: 0; font-family: inherit;
  color: inherit; text-align: left; cursor: pointer;
}
.destaque.esgotado { opacity: .45; }
.destaque-foto { position: relative; height: 150px; border-radius: 16px; overflow: hidden; background: var(--bg); }
.destaque-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.coracao {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 999px;
  background: #FFF; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pill-tempo {
  position: absolute; bottom: 10px; left: 10px; display: flex; align-items: center; gap: 5px;
  background: #FFF; border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 700;
}
.selo-esgotado {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(16, 16, 20, .35); pointer-events: none;
}
.selo-esgotado span {
  background: var(--red); color: #FFF; font-size: 13px; font-weight: 700;
  padding: 7px 14px; border-radius: 999px;
}

.destaque-corpo { padding: 12px 8px 6px; display: flex; flex-direction: column; gap: 5px; }
.destaque-nome { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.destaque-cat { font-size: 13px; font-weight: 500; color: var(--mut); }
.destaque-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.linha-frete { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: var(--acc); }

/* A pílula PRETA do preço — não é texto solto. */
.preco-pill {
  flex: 0 0 auto; white-space: nowrap; background: var(--tile); color: #FFF;
  font-size: 14px; font-weight: 700; padding: 7px 13px; border-radius: 999px;
}
.preco-pill.off { background: rgba(31, 42, 68, .08); color: var(--mut); }

/* ── Card da lista ───────────────────────────────────────────────────────────────────────────── */
.lista { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
.item {
  display: flex; align-items: center; gap: 14px; background: var(--card);
  border-radius: var(--r); padding: 12px; box-shadow: var(--sombra);
  border: 0; width: 100%; font-family: inherit; color: inherit; text-align: left; cursor: pointer;
}
.item-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.item-nome { font-size: 16px; font-weight: 700; }
.item-desc {
  font-size: 13px; font-weight: 400; color: var(--mut); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.item-rodape { display: flex; align-items: center; gap: 10px; margin-top: 6px; }

/* O quadro da foto fica VAZIO quando não há imagem: um `<img>` para caminho inexistente desenha o
   ícone de imagem quebrada, que parece defeito do sistema. */
.foto { width: 88px; height: 88px; flex: 0 0 auto; border-radius: 16px; overflow: hidden; background: var(--bg); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto.esgotado { opacity: .45; }

/* ── Detalhe ─────────────────────────────────────────────────────────────────────────────────── */
.detalhe-topo { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 0; }
.circulo {
  width: 44px; height: 44px; border-radius: 999px; background: var(--card); box-shadow: var(--sombra);
  display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; color: var(--ink);
}
.detalhe-foto {
  position: relative; height: 260px; margin-top: 16px; border-radius: var(--r);
  overflow: hidden; background: var(--card);
}
.detalhe-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detalhe-preco {
  position: absolute; right: 14px; bottom: 14px; padding: 9px 16px; border-radius: 999px;
  background: var(--acc); color: #FFF; font-size: 16px; font-weight: 700;
}
.detalhe-nome { padding-top: 20px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }

.bloco { margin-top: 20px; padding: 18px; border-radius: var(--r); background: var(--card); box-shadow: var(--sombra); }
.bloco-titulo { font-size: 15px; font-weight: 700; }
.bloco-texto { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--mut); line-height: 1.55; }
.adicional {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-top: 1px solid var(--linha); font-size: 14px; font-weight: 600;
}
.adicional span:first-child { flex: 1; min-width: 0; }
.adicional-preco { color: var(--mut); font-weight: 700; }

/* ── Avisos, vazio ───────────────────────────────────────────────────────────────────────────── */
.aviso { display: flex; gap: 12px; margin-top: 16px; padding: 16px 18px; border-radius: var(--r); background: var(--acc-soft); }
.aviso-titulo { font-size: 15px; font-weight: 700; color: var(--acc-hi); }
.aviso-texto { margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.5; }
.aviso.frio { background: rgba(31, 42, 68, .06); }
.aviso.frio .aviso-titulo { color: var(--ink); }

.vazio { padding: 64px 8px; text-align: center; }
.vazio-titulo { font-size: 19px; font-weight: 700; }
.vazio-texto { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--mut); line-height: 1.55; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; margin-top: 20px;
  height: 52px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--acc);
  color: #FFF; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.botao:hover { background: var(--acc-hi); }

.rodape { padding: 32px 0 8px; text-align: center; font-size: 12px; font-weight: 500; color: var(--mut); }

/* ── Nav de baixo: pílula + círculos ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center; padding: 24px 20px 16px;
  background: linear-gradient(180deg, rgba(251, 241, 238, 0) 0%, var(--bg) 55%);
  pointer-events: none;
}
.nav-tiras { display: flex; align-items: center; gap: 10px; max-width: 440px; width: 100%; pointer-events: auto; }
.aba {
  display: flex; align-items: center; justify-content: center; height: 56px; width: 56px;
  border-radius: 999px; background: var(--card); box-shadow: var(--sombra);
  border: 0; font-family: inherit; color: var(--tile); cursor: pointer; flex: 0 0 auto;
}
.aba.on {
  width: auto; gap: 9px; padding: 0 22px 0 18px; background: var(--acc); color: #FFF;
}
.aba-nome { font-size: 15px; font-weight: 700; white-space: nowrap; }

/* ── O pedido (ADR-041): montar, carrinho, checkout, acompanhamento ──────────────────────────── */
/* O stepper do artboard: dois círculos e o número. `mini` é o do adicional, dentro da linha. */
.stepper { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.stepper-btn {
  width: 36px; height: 36px; border-radius: 999px; border: 0; background: var(--acc-soft); color: var(--acc-hi);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit;
}
.stepper-btn:disabled { opacity: .35; cursor: default; }
.stepper-qtd { min-width: 18px; text-align: center; font-size: 16px; font-weight: 700; }
.stepper.mini { gap: 6px; }
.stepper.mini .stepper-btn { width: 30px; height: 30px; }
.stepper.mini .stepper-qtd { font-size: 14px; }
.adicional.on { color: var(--acc-hi); }
.adicional .stepper { margin-left: 8px; }
.bloco-titulo .tempo { margin-left: 6px; font-weight: 500; }

/* O rodapé do detalhe: quantidade + "Adicionar ao carrinho". */
.montar { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.montar-botao { flex: 1; margin-top: 0; padding: 0 18px; }

.botao:disabled { opacity: .4; cursor: default; }
.botao:disabled:hover { background: var(--acc); }
.botao.largo { width: 100%; margin-top: 16px; text-decoration: none; }
.botao.claro { background: var(--card); color: var(--acc-hi); box-shadow: var(--sombra); }
.botao.claro:hover { background: var(--card); }
.botao-texto {
  display: block; width: 100%; margin-top: 12px; padding: 12px; border: 0; background: transparent;
  color: var(--mut); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}

/* A bolinha da nav: contagem de itens, nunca dinheiro. */
.aba { position: relative; }
.aba-bolinha {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--tile); color: #FFF; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.aba.on .aba-bolinha { background: var(--tile); }

/* ── Carrinho ── */
.carrinho-lista { display: flex; flex-direction: column; gap: 12px; }
.carrinho-linha {
  display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: var(--r);
  padding: 14px; box-shadow: var(--sombra);
}
.carrinho-linha.recusada { outline: 2px solid var(--red); }
.carrinho-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.carrinho-nome { font-size: 16px; font-weight: 700; }
.carrinho-extras { font-size: 13px; font-weight: 500; color: var(--mut); }
.carrinho-obs { font-size: 13px; font-weight: 500; color: var(--acc-hi); }
.carrinho-aviso { font-size: 13px; font-weight: 700; color: var(--red); }
.carrinho-rodape { margin-top: 6px; display: flex; align-items: center; gap: 10px; }

.bloco-total { margin-top: 16px; padding: 16px 18px; border-radius: var(--r); background: var(--card); box-shadow: var(--sombra); }
.total-linha { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 15px; font-weight: 600; }
.total-linha.muda { color: var(--mut); font-weight: 500; }
.total-linha.forte { font-size: 18px; font-weight: 700; border-top: 1px solid var(--linha); margin-top: 6px; padding-top: 12px; }

/* ── Checkout: campos e escolhas ── */
.campo { display: block; margin-top: 12px; }
.campo-rotulo { display: block; font-size: 12px; font-weight: 700; color: var(--mut); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid var(--linha); border-radius: 14px;
  background: var(--bg); color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 500; outline: none;
}
.campo textarea { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.4; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--acc); background: #FFF; }
.campo.invalido input, .campo.invalido select { border-color: var(--red); }
.campos-lado { display: flex; gap: 10px; }
.campos-lado .campo { flex: 1; min-width: 0; }
.escolhas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.escolha {
  flex: 1; min-width: 96px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 14px; border: 1.5px solid var(--linha); border-radius: 14px; background: var(--card);
  font-family: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.escolha.on { border-color: var(--acc); background: var(--acc-soft); }
.escolha-rotulo { font-size: 15px; font-weight: 700; }
.escolha-sub { font-size: 12px; font-weight: 500; color: var(--mut); }
.detalhe-topo .secao-titulo { flex: 1; text-align: center; font-size: 18px; }

/* ── Acompanhamento: a linha do tempo e o código ── */
.pedido-codigo { margin-top: 16px; text-align: center; }
.pedido-numero { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.linha-tempo { margin-top: 20px; padding: 18px; border-radius: var(--r); background: var(--card); box-shadow: var(--sombra); }
.etapa { display: flex; gap: 14px; position: relative; padding-bottom: 18px; }
.etapa:last-child { padding-bottom: 0; }
.etapa::before {
  content: ''; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 2px; background: var(--linha);
}
.etapa:last-child::before { display: none; }
.etapa-ponto { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 999px; background: var(--linha); margin-top: 2px; }
.etapa.feita .etapa-ponto { background: var(--grn); }
.etapa.agora .etapa-ponto { background: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); }
.etapa-texto { flex: 1; min-width: 0; }
.etapa-titulo { font-size: 15px; font-weight: 700; color: var(--mut); }
.etapa.feita .etapa-titulo, .etapa.agora .etapa-titulo { color: var(--ink); }
.etapa-sub { margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--acc-hi); }
.resumo-linha { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linha); font-size: 14px; font-weight: 600; }
.resumo-qtd { flex: 0 0 auto; color: var(--mut); }
.resumo-nome { flex: 1; min-width: 0; }
.resumo-valor { flex: 0 0 auto; color: var(--mut); font-weight: 700; }
.perfil-linha { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--linha); font-size: 15px; font-weight: 600; }
.perfil-linha:first-child { border-top: 0; padding-top: 0; }

/* O aviso no canto ("Xis no carrinho") — vive fora do #root, como no ui.js do operador. */
.aviso-canto {
  position: fixed; left: 50%; bottom: 104px; transform: translate(-50%, 12px); z-index: 20;
  display: flex; align-items: center; gap: 14px; white-space: nowrap; max-width: calc(100% - 40px);
  padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--tile); color: #FFF;
  font-size: 14px; font-weight: 700; box-shadow: 0 8px 24px rgba(31, 42, 68, .18);
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
}
.aviso-canto.visivel { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.aviso-canto-acao {
  border: 0; border-radius: 999px; padding: 6px 12px; background: var(--acc); color: #FFF;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}

/* ── O detalhe no desenho do legado (17/09): opções em cartão, bolinha na escolha única, −/+ cheios ── */
.bloco-regra { margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--mut); line-height: 1.4; }
.opcoes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.opcao {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px;
  border: 2px solid transparent; border-radius: 16px; background: var(--bg);
  font-family: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.opcao.on { border-color: var(--acc); background: var(--acc-soft); }
.opcao.sem-toque { cursor: default; }
.opcao:disabled { opacity: .5; cursor: default; }
.opcao-bolinha {
  width: 20px; height: 20px; flex: 0 0 auto; border-radius: 999px; border: 2px solid rgba(31, 42, 68, .25);
  display: inline-flex; align-items: center; justify-content: center;
}
.opcao.on .opcao-bolinha { border-color: var(--acc); background: var(--acc); }
.opcao.on .opcao-bolinha::after { content: ''; width: 8px; height: 8px; border-radius: 999px; background: #FFF; }
.opcao-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.opcao-nome { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.opcao-preco { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--acc-hi); }
.opcao-dica { font-size: 12px; font-weight: 600; color: var(--acc-hi); }
.stepper-btn.cheio { background: var(--acc); color: #FFF; }
.stepper-btn.cheio:disabled { background: var(--acc-soft); color: var(--acc-hi); opacity: 1; }
.opcao .stepper.mini { background: var(--card); border-radius: 999px; padding: 3px; box-shadow: var(--sombra); }
.opcao .stepper.mini .stepper-btn { width: 30px; height: 30px; }

/* ── O pagamento no desenho do legado (17/09): cartões com bolinha à direita e as pílulas ── */
.pagamentos { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pagamento-card {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px;
  border: 2px solid transparent; background: var(--card); box-shadow: var(--sombra);
}
/* Desde o Pix pelo app (0071) os cartões são BOTÕES — sem a cara de botão do navegador. */
button.pagamento-card { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.pagamento-card.on { border-color: var(--acc); background: var(--acc-soft); box-shadow: none; }
.pagamento-card.off { opacity: .5; }
.pagamento-emoji { font-size: 18px; line-height: 1; }
.pagamento-emoji.grande { font-size: 26px; }
.pagamento-card.off .pagamento-emoji { filter: grayscale(1); }
.pagamento-texto { flex: 1; min-width: 0; }
.pagamento-nome { font-size: 15px; font-weight: 700; }
.pagamento-hint { font-size: 12px; font-weight: 500; color: var(--mut); margin-top: 2px; }
.pagamento-hint.alerta { color: #B7791F; font-weight: 600; }
.pagamento-radio {
  width: 20px; height: 20px; flex: 0 0 auto; border-radius: 999px; border: 2px solid rgba(31, 42, 68, .25);
  display: inline-flex; align-items: center; justify-content: center;
}
.pagamento-radio.on { border-color: var(--acc); background: var(--acc); }
.pagamento-radio.on::after { content: ''; width: 8px; height: 8px; border-radius: 999px; background: #FFF; }
.pagamento-subs { margin-left: 12px; padding-left: 10px; border-left: 2px solid var(--acc-soft); display: flex; flex-direction: column; gap: 8px; }
.pagamento-linha { display: flex; gap: 8px; }
.pagamento-sub {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px;
  border: 2px solid transparent; border-radius: 16px; background: var(--card); box-shadow: var(--sombra);
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--mut); cursor: pointer;
}
.pagamento-sub.on { border-color: var(--acc); background: var(--acc-soft); color: var(--ink); box-shadow: none; }
.campo-dica { margin-top: -6px; font-size: 12px; font-weight: 500; color: var(--mut); padding-left: 4px; }

/* ── O carrossel de banners (0052): até três artes, as barrinhas embaixo ── */
.banner-arte { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.banner-arte.no-ar { opacity: 1; }
.banner-barras {
  position: absolute; left: 14px; right: 14px; bottom: 10px; display: flex; gap: 6px; z-index: 2;
}
.banner-barra {
  flex: 1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .45); overflow: hidden; cursor: pointer;
}
.banner-barra i { display: block; height: 100%; width: 0; background: #FFF; border-radius: 999px; }
.banner-barra.no-ar i { animation: banner-enche 7s linear forwards; }
@keyframes banner-enche { from { width: 0; } to { width: 100%; } }

/* O "x" do próprio navegador no campo de busca não aparece: o nosso é o que tem o desenho da casa. */
.busca input::-webkit-search-cancel-button, .busca input::-webkit-search-decoration { -webkit-appearance: none; display: none; }