/* =========================================================================
   CAFÉ COM PIZZA — CARRINHO E CHECKOUT
   A página que fecha o pedido. Reaproveita .linha-item, .qtd, .vazio e
   .toast de cardapio.css e .campo/.input/.btn de componentes.css; aqui ficam
   só o layout de duas colunas e as peças próprias do checkout.
   ========================================================================= */

.pedido { padding-block: clamp(24px, 4vw, 44px) clamp(56px, 8vw, 96px); }

/* `[hidden]` do navegador é display:none com especificidade zero — qualquer
   display:flex/grid nosso (o estado vazio, a grade, as linhas condicionais)
   venceria e mostraria os dois estados ao mesmo tempo. Esta linha devolve a
   `hidden` a autoridade que o HTML pressupõe. */
.pedido [hidden] { display: none !important; }
.pedido .sec-head { margin-bottom: clamp(20px, 3vw, 32px); }
.pedido .sec-head h1 {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: var(--peso-black);
  letter-spacing: -.028em;
  line-height: 1.04;
  margin: 0;
}
.pedido .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-size: .72rem;
  font-weight: var(--peso-semi);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cor-primaria-tipo);
  margin-bottom: 8px;
}
.pedido .eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--cor-primaria); }

/* ---- duas colunas: itens à esquerda, resumo/checkout à direita ---- */
.pedido__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}
@media (min-width: 861px) {
  .pedido__grade { grid-template-columns: 1.4fr 1fr; }
  .pedido__lado { position: sticky; top: 88px; }
}

.bloco-cartao {
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-xl);
  padding: clamp(16px, 2.4vw, 24px);
}
.bloco-cartao + .bloco-cartao { margin-top: 16px; }
.bloco-cartao > h2 {
  font-size: 1.1rem;
  font-weight: var(--peso-black);
  letter-spacing: -.01em;
  margin: 0 0 14px;
}

/* A lista de itens usa .linha-item de cardapio.css; aqui só o respiro. */
.pedido .linha-item { padding: 14px 0; }
.pedido .linha-item:first-child { padding-top: 0; }

/* ---- escolha de modo e pagamento: pílulas de rádio ---- */
.escolha { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.escolha--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 480px) { .escolha--3 { grid-template-columns: 1fr; } }

.escolha label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1.5px solid var(--cor-borda);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-weight: var(--peso-semi);
  transition: border-color var(--t-rapido) var(--ease-saida), background var(--t-rapido) var(--ease-saida);
}
.escolha label:hover { border-color: var(--cor-controle); }
.escolha input { position: absolute; opacity: 0; width: 0; height: 0; }
.escolha label:has(input:checked) { border-color: var(--cor-primaria); background: hsl(var(--primary) / .08); }
.escolha label:has(input:focus-visible) { box-shadow: var(--anel-foco); }
.escolha label svg, .escolha label .icone { width: 18px; height: 18px; flex: none; color: var(--cor-primaria-tipo); }
.escolha label small { display: block; font-weight: var(--peso-normal); font-size: var(--txt-xs); color: var(--cor-suave-texto); }

/* ---- seções que aparecem conforme a escolha (entrega/dinheiro) ---- */
.condicional { margin-top: 14px; }
.condicional[hidden] { display: none; }

.grade-2 { display: grid; gap: var(--e-4); grid-template-columns: 1fr 1fr; }
.grade-2 .col-inteira { grid-column: 1 / -1; }
@media (max-width: 520px) { .grade-2 { grid-template-columns: 1fr; } }

/* ---- resumo de valores ---- */
.resumo { display: flex; flex-direction: column; gap: 8px; }
.resumo__linha { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--txt-md); }
.resumo__linha span:last-child { font-variant-numeric: tabular-nums; }
.resumo__linha--suave { color: var(--cor-suave-texto); }
.resumo__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--cor-borda);
  font-size: 1.25rem;
  font-weight: var(--peso-black);
}
.resumo__total span:last-child { font-variant-numeric: tabular-nums; }

.retirada-info {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--cor-suave);
  font-size: var(--txt-sm);
  line-height: 1.5;
}
.retirada-info svg, .retirada-info .icone { flex: none; color: var(--cor-primaria-tipo); }

.pedido__enviar { margin-top: 16px; }
.pedido__nota { margin: 10px 0 0; font-size: var(--txt-xs); color: var(--cor-suave-texto); text-align: center; line-height: 1.5; }

/* Aviso de mínimo não atingido, abaixo do botão */
.alerta-min { margin-top: 12px; }

/* ---- carrinho vazio ocupa a página inteira ---- */
.pedido .vazio { padding: 64px 20px; }
.pedido .vazio .btn { margin-top: 4px; }