/**
 * VAL-ORD-007 — a folha das duas telas públicas do pedido (fechar e comprovante).
 *
 * Folha PRÓPRIA, e não a do painel: quem lê isto é um cliente final com fome, no
 * celular, e não um dono logado. Por isso ela é curta, mobile-first e não carrega
 * nenhum token do `client-panel`.
 *
 * Regras da casa cumpridas aqui:
 *  - **Zero `!important`.** A cascata é resolvida na origem; não há nada
 *    concorrendo com esta folha, porque estas páginas não herdam o CSS do site.
 *  - **Nenhum SVG inline.** Os ícones são máscaras sobre `public/assets/icons/`,
 *    o mesmo mecanismo do `client-panel.css`, e por isso herdam `currentColor`.
 *  - **A cara do SITE do cliente**, não a de fábrica: os tokens saem de
 *    `--color-*`, que o `/css/theme-vars.css` publica, com o valor antigo como
 *    reserva para quem não tem tema. Esta folha já teve claro e escuro pelo
 *    `prefers-color-scheme` — saiu em 05/09, ver a seção logo abaixo dos
 *    tokens.
 */

:root {
  --oc-bg: var(--color-background, #f6f7f9);
  --oc-surface: var(--color-surface, #ffffff);
  --oc-border: var(--color-border, #e2e5ea);
  --oc-text: var(--color-text, #16181d);
  --oc-muted: var(--color-muted, #5b6472);
  --oc-accent: var(--color-primary, #1d4ed8);
  --oc-accent-text: #ffffff;
  --oc-warn-bg: #fff7e6;
  --oc-warn-border: #f0c674;
  /* O cartão de "falta pouco" era azul-claro, e azul não é a marca de ninguém
     por acaso — era o resto do azul de fábrica. Vira um véu da própria cor do
     cliente: no vinho da Luzzi, um rosa-claro que pertence à página. O `7%` e o
     `25%` são os mesmos que o cartão de escolha do cardápio usa, para os dois
     tons de "isto está selecionado" combinarem entre as telas. */
  --oc-ok-bg: color-mix(in srgb, var(--color-primary, #1d4ed8) 7%, #ffffff);
  --oc-ok-border: color-mix(in srgb, var(--color-primary, #1d4ed8) 25%, #ffffff);
  --oc-error-bg: #fdecec;
  --oc-error-border: #e9a8a8;
  --oc-error-text: #8c1f1f;
  --oc-radius: 14px;
  --oc-gap: 16px;
}

/* ---------------------------------------------------------------------------
   O MODO ESCURO SAIU (05/09/2026)

   Aqui morava um `@media (prefers-color-scheme: dark)` que pintava a tela de
   `#12141a` — quase preto — com detalhe azul. Era ele o "carrinho preto" que o
   proprietário viu: *"o carrinho fica preto, nada haver com o site"*. Ele
   estava no celular com tema escuro, e a página de pedido virava outra coisa
   enquanto o site continuava vinho, laranja e creme.

   O erro não é ter modo escuro — é o CHECKOUT ter um que o SITE não tem. O site
   publicado não muda de cor com o tema do sistema: ele usa os tokens que o dono
   escolheu. Uma página de pedido que inventa uma segunda identidade visual, no
   meio da compra, faz a pessoa achar que saiu do site.

   Se um dia o produto ganhar modo escuro, ele nasce no TEMA (onde o dono
   decide), e esta folha o herda pelas `--color-*` como herda o resto — não numa
   media query só dela.
   ------------------------------------------------------------------------ */


.oc-body {
  margin: 0;
  padding: 0 0 48px;
  background: var(--oc-bg);
  color: var(--oc-text);
  font-family: var(--font-sans, Inter), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* A fonte do SITE, não a de fábrica: o cardápio é DM Sans e o checkout
     era Inter. Duas fontes na mesma compra é a mesma quebra que a cor. */
  font-size: 16px;
  line-height: 1.5;
}

.oc-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 0;
  display: flex;
  flex-direction: column;
  gap: var(--oc-gap);
}

/* ------------------------------------------------------------------ cabeçalho */

.oc-head { margin: 0; }

.oc-eyebrow {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--oc-muted);
}

.oc-title {
  margin: 0 0 6px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
}

.oc-lead {
  margin: 0;
  color: var(--oc-muted);
}

/* ---------------------------------------------------------------- avisos */

.oc-state {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--oc-ok-border);
  border-radius: var(--oc-radius);
  background: var(--oc-ok-bg);
}

.oc-state--atencao {
  border-color: var(--oc-warn-border);
  background: var(--oc-warn-bg);
}

.oc-state__title { margin: 0 0 2px; font-weight: 600; }
.oc-state__text { margin: 0; color: var(--oc-muted); font-size: 15px; }

.oc-errors {
  padding: 14px 16px;
  border: 1px solid var(--oc-error-border);
  border-radius: var(--oc-radius);
  background: var(--oc-error-bg);
  color: var(--oc-error-text);
}

.oc-errors__title { margin: 0 0 6px; font-weight: 600; }
.oc-errors__list { margin: 0; padding-left: 20px; }

.oc-notice {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--oc-warn-border);
  border-radius: var(--oc-radius);
  background: var(--oc-warn-bg);
  font-size: 15px;
}

.oc-coverage {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--oc-ok-border);
  border-radius: 10px;
  background: var(--oc-ok-bg);
  font-size: 15px;
}

.oc-coverage[data-oc-tone="atencao"] {
  border-color: var(--oc-warn-border);
  background: var(--oc-warn-bg);
}

/* ------------------------------------------------------------------ cartões */

.oc-card {
  padding: 18px 16px;
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius);
  background: var(--oc-surface);
}

.oc-card__title {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
}

.oc-form {
  display: flex;
  flex-direction: column;
  gap: var(--oc-gap);
}

/* ------------------------------------------------------------------- campos */

.oc-field {
  display: block;
  margin-bottom: 14px;
}

.oc-field:last-child { margin-bottom: 0; }

.oc-field__label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 600;
}

.oc-field__help {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--oc-muted);
}

.oc-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid var(--oc-border);
  border-radius: 10px;
  background: var(--oc-bg);
  color: var(--oc-text);
  font: inherit;
}

.oc-input:focus-visible {
  outline: 2px solid var(--oc-accent);
  outline-offset: 1px;
}

.oc-input--area { resize: vertical; }

.oc-input--code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  word-break: break-all;
}

.oc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.oc-row > .oc-field { flex: 1 1 160px; margin-bottom: 14px; }
.oc-row > .oc-field--wide { flex: 3 1 220px; }
.oc-row > .oc-field--narrow { flex: 1 1 90px; }
.oc-row > .oc-field--cep { flex: 1 1 150px; }

/* ------------------------------------------------------------------ escolhas */

.oc-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oc-choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--oc-border);
  border-radius: 12px;
  cursor: pointer;
}

.oc-choice:focus-within { border-color: var(--oc-accent); }
.oc-choice:has(input:checked) { border-color: var(--oc-accent); background: var(--oc-ok-bg); }

.oc-choice input { margin-top: 4px; accent-color: var(--oc-accent); }
.oc-choice__body { display: block; }
.oc-choice__label { display: block; font-weight: 600; }
.oc-choice__help { display: block; margin-top: 2px; font-size: 13px; color: var(--oc-muted); }

/* ---------------------------------------------------------------------------
   O `hidden` DO `data-oc-only` PRECISA VENCER A CLASSE (05/09/2026)

   O `order-checkout.js` esconde pondo o atributo `hidden`. Isso funciona porque
   a folha do NAVEGADOR traz `[hidden] { display: none }` — e uma classe nossa
   com `display` ganha dela, porque especificidade de classe (0,1,0) vence
   especificidade de atributo do agente.

   Medido no ar hoje, num 390x844: as três frases de RETIRADA das formas de
   pagamento estavam com `hidden` no DOM e `display: block` na tela. Quem
   escolhia "Entregar no meu endereço" lia, em cada opção, as duas frases:

       Você paga em dinheiro quando o pedido chegar.
       Você paga em dinheiro quando for buscar o pedido.

   Duas instruções opostas em cima da mesma escolha, mais 117px de rolagem. O
   defeito está no ar desde 20/08, quando as frases por modo entraram — e passou
   despercebido porque o `.oc-change__text`, que é o vizinho e o que eu conferi
   na época, NÃO tem `display` nenhum e some certinho. **Conferir o irmão que
   funciona não prova o irmão que não funciona.**

   A regra é do ATRIBUTO, e não de cada classe: escrever `.oc-choice__help[hidden]`
   consertaria o caso de hoje e deixaria o próximo `data-oc-only` com display
   quebrado do mesmo jeito. Especificidade (0,2,0) resolve sem `!important`.
   Esta é a mesma cicatriz que o `.oc-remember[hidden]` já carrega neste arquivo.
   ------------------------------------------------------------------------ */
[data-oc-only][hidden] { display: none; }

.oc-change {
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed var(--oc-border);
  border-radius: 12px;
}

.oc-change__title { margin: 0 0 4px; font-weight: 600; }
.oc-change__text { margin: 0 0 12px; font-size: 14px; color: var(--oc-muted); }

.oc-areas { margin-top: 14px; font-size: 14px; }
.oc-areas summary { cursor: pointer; color: var(--oc-muted); }
.oc-areas__list { margin: 10px 0 0; padding: 0; list-style: none; }

.oc-areas__list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--oc-border);
}

.oc-areas__fee { color: var(--oc-muted); }

/* -------------------------------------------------------------------- pedido */

.oc-cart__list { margin: 0 0 14px; padding: 0; list-style: none; }

.oc-cart__item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--oc-border);
}

.oc-cart__qty { font-weight: 700; color: var(--oc-muted); }
.oc-cart__body { flex: 1 1 auto; }
.oc-cart__name { margin: 0; font-weight: 600; }
.oc-cart__choice { margin: 2px 0 0; font-size: 14px; color: var(--oc-muted); }
.oc-cart__note { margin: 4px 0 0; font-size: 14px; font-style: italic; color: var(--oc-muted); }
.oc-cart__price { font-weight: 600; white-space: nowrap; }

.oc-cart__foot,
.oc-total__line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
}

.oc-total {
  padding: 16px;
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius);
  background: var(--oc-surface);
}

.oc-total__line--big {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--oc-border);
  font-size: 19px;
}

.oc-total__note { margin: 8px 0 0; font-size: 13px; color: var(--oc-muted); }

.oc-cart__back {
  display: inline-block;
  margin-top: 4px;
  color: var(--oc-accent);
  font-size: 14px;
}

/* --------------------------------------------------------------- comprovante */

.oc-code { text-align: center; }
.oc-code__label { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--oc-muted); }

.oc-code__value {
  margin: 6px 0;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.oc-code__help { margin: 0; font-size: 14px; color: var(--oc-muted); }

.oc-steps { margin: 0; padding-left: 20px; }
.oc-steps li { margin-bottom: 6px; }

.oc-pix__text { margin: 0 0 12px; color: var(--oc-muted); }
.oc-pix__amount { margin: 0 0 14px; font-size: 26px; font-weight: 700; }
.oc-pix__receipt-title { margin: 16px 0 4px; font-weight: 600; }

.oc-pix__qr {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.oc-pix__qr img,
.oc-pix__qr canvas { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------- botões */

.oc-btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  border: 1px solid var(--oc-border);
  border-radius: 12px;
  background: var(--oc-surface);
  color: var(--oc-text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.oc-btn--primary {
  border-color: var(--oc-accent);
  background: var(--oc-accent);
  color: var(--oc-accent-text);
}

.oc-btn--inline { flex: 0 0 auto; margin-bottom: 14px; }

.oc-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.oc-btn:focus-visible {
  outline: 2px solid var(--oc-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ promessas */

.oc-promises {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.oc-promise__title { margin: 0 0 2px; font-weight: 600; font-size: 15px; }
.oc-promise__text { margin: 0; font-size: 14px; color: var(--oc-muted); }

/* --------------------------------------------------------------------- ícones */

.oc-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--oc-icon) no-repeat center / contain;
  mask: var(--oc-icon) no-repeat center / contain;
}

.oc-icon--clock { --oc-icon: url("/assets/icons/clock.svg"); }
.oc-icon--pin   { --oc-icon: url("/assets/icons/map-pin.svg"); }
.oc-icon--send  { --oc-icon: url("/assets/icons/send.svg"); }
.oc-icon--copy  { --oc-icon: url("/assets/icons/copy.svg"); }
.oc-icon--arrow { --oc-icon: url("/assets/icons/arrow-left.svg"); }

/* ------------------------------------------------------------------ cupom
 * 26/08/2026. O bloco vive ENTRE o resumo do carrinho e o formulário do
 * pedido — HTML não aninha <form>, e o "Aplicar" dentro dele enviaria o
 * pedido pela metade. Sem !important: a cascata é resolvida pela ordem.
 */
.oc-coupon {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px dashed rgba(120, 130, 150, 0.45);
    border-radius: 12px;
}

.oc-coupon__title { margin: 0 0 10px; font-size: 15px; font-weight: 650; }

.oc-coupon__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.oc-coupon__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.oc-coupon__input {
    flex: 1 1 160px;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid rgba(120, 130, 150, 0.4);
    border-radius: 9px;
    font: inherit;
    font-size: 15px;
    text-transform: uppercase;
    background: transparent;
    color: inherit;
}

.oc-coupon__apply { flex: 0 0 auto; }

.oc-coupon__error { margin: 8px 0 0; font-size: 14px; color: #9c2b20; }
.oc-coupon__note { margin: 8px 0 0; font-size: 13px; opacity: 0.8; }

.oc-coupon__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }

.oc-coupon__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.oc-coupon__name { flex: 1 1 auto; min-width: 0; }
.oc-coupon__amount { font-weight: 650; color: #176941; white-space: nowrap; }

.oc-coupon__drop {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    opacity: 0.75;
}

.oc-coupon__drop:hover { opacity: 1; }

.oc-total__line--discount strong { color: #176941; }

@media (max-width: 520px) {
    .oc-coupon__apply { width: 100%; }
}

/* --------------------------------------------------- "é você de novo?"
 * 26/08/2026. O aviso de que a tela veio preenchida com o último pedido
 * GUARDADO NO APARELHO da pessoa, mais a saída para quem não é ela.
 *
 * ⚠️ A regra `[hidden]` logo abaixo não é sobra. O bloco nasce com o atributo
 * `hidden` e só o JavaScript o mostra; `display: flex` numa classe vence o
 * `[hidden] { display: none }` do navegador, que é regra de folha do agente.
 * Sem a linha, o aviso apareceria para TODO visitante — inclusive o de primeira
 * viagem, a quem ele mentiria. Sem `!important`: especificidade resolve.
 */
.oc-remember {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--oc-ok-border);
    border-radius: 10px;
    background: var(--oc-ok-bg);
    font-size: 14px;
}

.oc-remember[hidden] { display: none; }

.oc-remember__text { flex: 1 1 200px; min-width: 0; }

.oc-remember__clear {
    flex: 0 0 auto;
    /* 44px é alvo de toque, não estética: esta é a saída de quem pegou o
     * celular emprestado e precisa tirar os dados do outro no meio de um
     * checkout. Medido em 26/08/2026 com 6px de respiro: 33px de altura. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 2px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
    opacity: 0.85;
}

.oc-remember__clear:hover { opacity: 1; }

/* ---------------------------------------------------------------------------
   FALAR COM A LOJA (05/09/2026)

   Queixa do proprietário: "alguma opção pra contatar o estabelecimento". Não
   havia nenhuma no fluxo de pedido — nem `tel:` nem `wa.me`. O verde é o do
   WhatsApp e NÃO vem do tema de propósito: é a cor que faz a pessoa reconhecer
   o canal antes de ler a frase. Vestir esse botão com a marca da casa
   economizaria coerência e custaria reconhecimento.
   ------------------------------------------------------------------------ */
.oc-talk {
  display: block;
  margin: var(--oc-gap) 0 0;
  padding: 14px 16px;
  border: 1px solid #cfe8d6;
  border-radius: var(--oc-radius);
  background: #f2faf5;
  color: #176941;
  text-decoration: none;
}

.oc-talk__title {
  display: block;
  font-weight: 700;
  font-size: 15px;
}

.oc-talk__text {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.5;
  color: #3d7a58;
}

.oc-talk:hover {
  border-color: #a8d5ba;
}

/* ---------------------------------------------------------------------------
   O FORMULÁRIO MAIS CURTO (05/09/2026)

   "esta ruim o form pra compra, poderia ser mais simples" — o proprietário.
   Medido antes: 3.794px de rolagem num 390x844, com 17 campos visíveis.
   ------------------------------------------------------------------------ */

/* O endereço que o CEP achou, em uma linha, com a saída do lado. Ele SUBSTITUI
   três perguntas na tela e nenhuma no formulário: rua, bairro e cidade
   continuam preenchidos e enviados. */
.oc-found {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--oc-ok-border);
  border-radius: 10px;
  background: var(--oc-ok-bg);
  font-size: 15px;
}

.oc-found[hidden] { display: none; }

.oc-found__text {
  flex: 1 1 200px;
  min-width: 0;
  font-weight: 600;
}

/* Mesma régua do `.oc-remember__clear`: 44px de alvo, porque é a saída de quem
   o CEP levou para a rua errada. */
.oc-found__edit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.85;
}

.oc-found__edit:hover { opacity: 1; }

/* A dobra dos campos que quase ninguém usa (cupom, ponto de referência).
   `<details>` nativo: abre sem JavaScript e o navegador já sabe anunciar o
   estado para o leitor de tela. */
.oc-fold {
  margin: 0;
}

.oc-fold__summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
}

.oc-fold__summary::-webkit-details-marker { display: none; }

.oc-fold__summary::after {
  content: "";
  margin-left: 8px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.6;
}

.oc-fold[open] > .oc-fold__summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

/* O rótulo repetido dentro da dobra existe para o leitor de tela: o `summary`
   não é `<label>` e não amarra no campo. Some da vista, não da leitura. */
.oc-field__label--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   DUAS COLUNAS NO COMPUTADOR (05/09/2026)

   "8: pode ser" — o proprietário, aprovando a coluna dupla do mockup.

   No celular a compra é uma coluna e continua sendo. Num monitor, a coluna
   única de 640px deixava o resumo do pedido lá em cima e o total lá embaixo,
   com meia tela em branco dos dois lados: quem confere o que vai pagar
   precisava rolar para cima e voltar.

   A quebra é 1024px porque abaixo disso o resumo grudado roubaria altura de um
   formulário que ainda é o assunto principal — num tablet em pé, duas colunas
   deixam as duas apertadas.
   ------------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .oc-shell {
    max-width: 1040px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 32px;
  }

  /* O cabeçalho, o estado, os erros e os recados atravessam: são recado da
     tela inteira, não de um lado dela. */
  .oc-head,
  .oc-state,
  .oc-errors,
  .oc-notice,
  .oc-promises {
    flex: 0 0 100%;
  }

  /* O `order` inverte só o que se VÊ. Na ordem do documento — que é a que o
     teclado e o leitor de tela seguem — o resumo continua vindo antes do
     formulário, que é a leitura certa: primeiro o que você está levando,
     depois os seus dados. */
  .oc-form {
    flex: 1 1 0;
    min-width: 0;
    order: 1;
  }

  .oc-aside {
    flex: 0 0 340px;
    order: 2;
    display: flex;
    flex-direction: column;
    gap: var(--oc-gap);
    /* Acompanha a rolagem: é o que ela confere enquanto digita o endereço. */
    position: sticky;
    top: 24px;
  }

  .oc-promises {
    order: 3;
  }

  /* Sem o `gap` da coluna única, cada bloco do formulário carrega o próprio
     respiro. */
  .oc-form > * + * {
    margin-top: var(--oc-gap);
  }
}

/* ==========================================================================
   O COMPROVANTE — 10/09/2026
   A tela era uma pilha de cartões do mesmo tamanho, e nenhum respondia a única
   pergunta de quem acabou de pedir: quando chega. A previsão virou o título e o
   andamento virou linha do tempo com a hora de cada passo — é a hora que mostra
   que a loja não parou.
   ========================================================================== */

.oc-hero {
    padding: 22px 20px 18px;
    border: 1px solid var(--oc-line);
    border-radius: 16px;
    background: var(--oc-accent-soft, #f9ece3);
}

.oc-hero--atencao { background: var(--oc-warn-soft, #fbf0dd); }

.oc-hero .oc-eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.oc-hero .oc-title { margin: 0; line-height: 1.25; }
.oc-hero .oc-lead { margin: 8px 0 0; }

.oc-vivo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--oc-muted);
}

.oc-vivo__ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--oc-ok-text, #146c43);
}

.oc-linha {
    list-style: none;
    margin: 16px 0 0;
    padding: 0 4px;
}

.oc-linha__passo {
    position: relative;
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 12px;
    padding-bottom: 18px;
}

.oc-linha__passo:last-child { padding-bottom: 0; }

/* O fio que liga os passos nasce depois da marca e morre no próximo item. */
.oc-linha__passo::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: var(--oc-line);
}

.oc-linha__passo:last-child::before { display: none; }

.oc-linha__marca {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--oc-line);
    background: var(--oc-surface, #fff);
}

.oc-linha__passo--feito .oc-linha__marca {
    background: var(--oc-ok-soft, #e6f2ea);
    border-color: var(--oc-ok-line, #9fd3b4);
}

.oc-linha__passo--feito::before { background: var(--oc-ok-line, #9fd3b4); }

.oc-linha__passo--agora .oc-linha__marca {
    background: var(--oc-accent, #b8511a);
    border-color: var(--oc-accent, #b8511a);
}

.oc-linha__texto b { display: block; font-size: 15px; }
.oc-linha__texto span { font-size: 13px; color: var(--oc-muted); }
.oc-linha__passo--agora .oc-linha__texto b { color: var(--oc-accent-strong, #9d4315); }
.oc-linha__passo--futuro .oc-linha__texto b { color: var(--oc-muted); font-weight: 500; }

/* ---- "Precisa de troco?" como PERGUNTA (20/09/2026) -----------------------
   As duas respostas ficam lado a lado, em pílula, para caberem numa linha no
   celular e parecerem o que são: uma escolha rápida, não mais um formulário.
   O campo do valor mora abaixo e só aparece para quem respondeu que precisa. */
.oc-choices--inline {
  /* Grade de duas colunas, e não flex-wrap: as duas respostas são um par e
     precisam dividir a linha em partes iguais. Com `flex: 1 1 0` a largura
     MÍNIMA do conteúdo ainda estourava o container de 324px no celular e as
     pílulas empilhavam — medido em 420px de viewport. A grade não negocia. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 12px;
}
.oc-choice--pill {
  justify-content: center;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 999px;
  text-align: center;
}
.oc-choice--pill .oc-choice__body { min-width: 0; }
.oc-choice--pill .oc-choice__label { font-size: 14px; }
/* O ponto do rádio some: numa pílula que já muda de cor ao ser escolhida, ele
   é ruído — e sem ele as duas opções cabem lado a lado no celular. */
.oc-choice--pill input { position: absolute; opacity: 0; pointer-events: none; }
.oc-choice--pill:has(input:focus-visible) { outline: 2px solid var(--oc-accent); outline-offset: 2px; }