/* order.css — engine de pedido, compartilhada entre a demo embutida (www)
   e a página de tenant. Estiliza a árvore que ui.js produz (TDD.md §9).
   Visibilidade de passo é feita só por seletor `.ordem[data-passo]`, nunca
   por style.display escrito em JS. */

/* Rótulo da moldura da demo, só no www (defeito 5) — main-www.js escreve o
   nó antes de #demo-mount; a classe não pertence à árvore de .ordem. */

.demo__endereco {
  color: var(--color-ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.ordem {
  background-color: var(--color-surface);
  color: var(--color-ink);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-hairline);
  display: flex;
  flex-direction: column;
  font-size: 1.0625rem;
}

.ordem--embutida {
  max-height: 720px;
  overflow-y: auto;
}

.ordem--cheia {
  min-height: 100vh;
  border: 0;
  border-radius: var(--radius-none);
}

/* Cabeçalho da ordem */

.ordem__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-hairline);
  position: sticky;
  top: 0;
  background-color: var(--color-surface-raised);
  z-index: 2;
}

.ordem__marca {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--brand);
}

.ordem__estado {
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
}

/* Não há para onde voltar no primeiro passo (defeito 4) — mostrar/esconder
   segue a mesma regra do resto do arquivo: só CSS, movido por data-passo. */

.ordem[data-passo="vitrine"] .ordem__voltar {
  display: none;
}

/* Aviso de demonstração — persistente, informativo (não é erro) */

.ordem__aviso-demo {
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-accent-soft);
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
}

/* Passos — mostrar/esconder é puramente CSS, movido por data-passo */

.ordem__vitrine,
.ordem__item,
.ordem__resumo,
.ordem__confirmado {
  display: none;
  padding: var(--space-md);
}

.ordem__confirmado {
  text-align: center;
}

/* Barra do carrinho — elevação 3: sombra larga, sem fio (Regra de Um Recurso Só) */

.ordem__barra {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
  background-color: var(--color-surface-panel);
  box-shadow: var(--shadow-3);
  margin-top: auto;
}

.ordem[data-passo="vitrine"] .ordem__vitrine {
  display: block;
}

.ordem[data-passo="item"] .ordem__item {
  display: block;
}

.ordem[data-passo="resumo"] .ordem__resumo {
  display: block;
}

.ordem[data-passo="confirmado"] .ordem__confirmado {
  display: block;
}

/* A barra fica visível em todos os passos; o conteúdo de cada passo vem de barra() em ui.js */

/* Vitrine */

.ordem__busca {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-md);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  color: var(--color-ink);
  font-size: 1rem;
}

.ordem__busca::placeholder {
  color: var(--color-ink-muted);
}

.ordem__abas {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  margin-top: var(--space-md);
}

.ordem__aba {
  min-height: 48px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-pill);
  color: var(--color-ink-muted);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.ordem__aba[aria-pressed="true"] {
  background-color: var(--color-accent-soft);
  color: var(--color-ink);
}

.ordem__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* .produto reaproveita o motivo visual do ticket-card (DESIGN.md) */

.produto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  width: 100%;
  text-align: left;
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  min-height: 48px;
  cursor: pointer;
}

.produto__nome {
  font-weight: 700;
}

.produto__desc {
  color: var(--color-ink-muted);
  font-size: 0.9375rem;
}

.produto__preco {
  font-weight: 700;
  color: var(--color-ink);
}

/* Folha do item */

.ordem__item-titulo {
  margin-bottom: var(--space-md);
}

.grupo {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-lg);
}

.grupo__titulo {
  font-weight: 700;
  padding: 0;
  margin-bottom: var(--space-xs);
}

.grupo__ajuda {
  display: block;
  color: var(--color-ink-muted);
  font-size: 0.875rem;
  margin-bottom: var(--space-sm);
}

[role="radiogroup"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* .chip — DESIGN.md component chip-option / chip-option-selected */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-hairline);
  color: var(--color-ink);
  cursor: pointer;
}

.chip[aria-checked="true"] {
  background-color: var(--color-accent-soft);
  border-color: var(--color-accent);
  font-weight: 700;
}

.chip[aria-checked="true"]::before {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 1.75px solid var(--color-accent);
  border-bottom: 1.75px solid var(--color-accent);
  transform: rotate(-45deg);
}

.ordem__obs {
  width: 100%;
  min-height: 88px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  resize: vertical;
}

/* Resumo */

.linhas {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.linha__nome {
  font-weight: 700;
}

.linha__qtd {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.linha__qtd button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline);
  background-color: var(--color-surface);
  cursor: pointer;
}

.linha__preco {
  font-weight: 700;
}

fieldset.entrega,
fieldset.cliente,
fieldset.pagamento {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-lg);
}

fieldset.entrega legend,
fieldset.cliente legend,
fieldset.pagamento legend {
  font-weight: 700;
  padding: 0;
  margin-bottom: var(--space-sm);
}

.ordem__resumo input,
.ordem__resumo select {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-md);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  color: var(--color-ink);
  font-size: 1rem;
  margin-bottom: var(--space-sm);
}

.erros {
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  color: var(--color-danger);
}

.erros:empty {
  display: none;
}

/* Dinheiro — DESIGN.md: sempre tabular, sempre à direita */

.dinheiro {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.barra__resumo {
  font-weight: 700;
}

.barra__acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 24px;
  border-radius: var(--radius-md);
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.barra__acao:hover,
.barra__acao:focus-visible,
.barra__acao:active {
  background-color: var(--color-ink-deep);
}

/* Esqueleto — HTML estático em t/index.html (defeito de performance: sem
   isto a página fica em branco até 3 idas à rede). main-tenant.js apaga
   este bloco antes de montar a árvore real; formas neutras só, nenhum dado
   do tenant é inventado aqui (COPY.md). */

.esqueleto__linha {
  display: inline-block;
  border-radius: var(--radius-sm);
  background-color: var(--color-hairline);
}

.esqueleto__linha--marca {
  width: 128px;
  height: 1.125rem;
}

.esqueleto__linha--estado {
  width: 96px;
  height: 0.8125rem;
}

.esqueleto__linha--aba {
  width: 84px;
  min-height: 48px;
  border-radius: var(--radius-pill);
}

.esqueleto__linha--resumo {
  width: 120px;
  height: 1rem;
}

.esqueleto__linha--acao {
  width: 140px;
  min-height: 56px;
  border-radius: var(--radius-md);
}

.esqueleto__busca {
  display: flex;
  align-items: center;
  color: var(--color-ink-muted);
}

.esqueleto__produto {
  min-height: 96px;
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
}

/* Aviso <noscript> (COPY.md "Sem JavaScript") — mostrado nas duas páginas
   (www e tenant) quando o navegador interpreta o conteúdo de <noscript>, ou
   seja, quando o JS está desligado. A CSP (style-src 'self') não permite
   style="" nem <noscript>\3c style>, então não há como alternar via inline; em
   vez disso, :has() detecta que o parágrafo abaixo existe de verdade no DOM
   — com JS ligado, o navegador nunca chega a criar esse nó, então a regra
   nunca casa e nada é escondido. No tenant, isto some com o esqueleto
   estático para não deixar um cardápio falso na tela; no www, some com a
   área reservada da demo (vazia sem JS) para não sobrar um vão embaixo do
   aviso. */

.aviso-no-js {
  background-color: var(--color-surface-panel);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-weight: 700;
}

html:has(.aviso-no-js) #tenant-mount .ordem {
  display: none;
}

html:has(.aviso-no-js) #demo-mount {
  display: none;
}

@media (min-width: 48rem) {
  .ordem--embutida {
    max-height: 800px;
  }
}