/*
  Pedido por conversa no visual v5 — /faca-seu-pedido e /pedido-simplificado
  (miolo em pages/faca-seu-pedido/conteudo-v5.njk).
  Paper: "S06 Faça seu pedido — robozin.ai" (desktop 1440). Celular seguindo
  a linguagem da home v5 celular.

  O chat (global/pedido-chat.njk) e o cartão do pedido (global/pedido-card.njk)
  são os mesmos da home e NÃO foram alterados: tudo aqui é sobrescrita escopada
  em .p5-ped, carregada depois do pedido-chat.css. Por isso vários seletores
  repetem o id do elemento — é o que garante vencer as regras de estado do
  pedido-chat.css sem mexer nelas.

  O que NÃO pode ser tocado daqui:
  - a folha de conversa do celular (#triagem-root.is-sheet): as regras dela
    têm id + classes e continuam ganhando, de propósito;
  - os modais do pedido (OTP e resultado), que moram fora do .p5-ped.
*/

.p5-ped {
  /* Com o cartão fechado a página é só a dobra: ela estica até o rodapé para
     não sobrar faixa branca embaixo em tela alta. 74px = topo, 54px = rodapé. */
  min-height: calc(100vh - 128px);
  background: var(--color-teal-50);
}
.p5-ped .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Dobra ---------- */
.p5-ped__hero {
  background: var(--color-teal-50);
  border-bottom: 2.5px solid var(--color-ink);
  padding: 64px 0 96px;
}
.p5-ped__grid {
  display: grid;
  grid-template-columns: minmax(0, 700fr) minmax(0, 444fr);
  gap: 56px;
  align-items: start;
}
.p5-ped__col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* Etapas */
.p5-ped__etapas {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.p5-ped__etapa {
  flex: none;
  padding: 6px 14px;
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700; line-height: 16px;
  color: var(--color-ink);
  transition: background-color .25s ease, color .25s ease;
}
.p5-ped__etapa.is-feita { background: var(--color-teal-100); }
.p5-ped__etapa.is-on { background: var(--color-ink); color: #fff; }
.p5-ped__traco { flex: none; width: 24px; height: 2px; background: var(--color-ink); }

/* Chamada. O gap da coluna é 24px: o pedido-chat.css recolhe o #hero-head
   com margem negativa de 1.5rem, que é exatamente esse vão. */
.p5-ped__head { display: flex; flex-direction: column; gap: 24px; }
.p5-ped__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 64px; font-weight: 800; letter-spacing: -0.05em; line-height: 64px;
  color: var(--color-ink);
}
.p5-ped__lead {
  margin: 0; max-width: 620px;
  font-family: var(--font-body);
  font-size: 19px; line-height: 30px; color: var(--color-ink);
}

/* ---------- Chat (global/pedido-chat.njk) ---------- */
.p5-ped #triagem-root { max-width: none; gap: 24px; }

/* "Você já é nosso cliente": no desktop a lateral já tem o "Já pediu antes?";
   no celular a lateral cai lá embaixo, então o banner continua valendo. */
@media (min-width: 900px) {
  .p5-ped #cliente-banner { display: none !important; }
}
.p5-ped #cliente-banner {
  border: 2px solid var(--color-ink); border-radius: 16px; box-shadow: none;
}

/* O cartão do compositor (busca e conversa). */
.p5-ped .triagem-shell {
  border: 2.5px solid var(--color-ink);
  border-radius: 20px;
  box-shadow: var(--color-ink) 5px 5px 0;
}
.p5-ped .triagem-shell:hover,
.p5-ped .triagem-shell:focus-within { border-color: var(--color-ink); box-shadow: var(--color-ink) 6px 6px 0; }
.p5-ped .triagem-shell.is-chat { border-radius: 20px; }

/* Antes da conversa: rótulo, campo e a prateleira numa linha só (Paper).
   Os blocos do compositor viram `display: contents` para os botões que moram
   em lugares diferentes do HTML (microfone e enviar ficam dentro do campo,
   arquivos na prateleira) poderem ser arrumados numa fila por `order`. Na
   conversa (`.is-chat`) nada disto vale e o arranjo do pedido-chat.css volta. */
.p5-ped .triagem-shell:not(.is-chat) .triagem-bar {
  display: flex; flex-flow: row wrap; align-items: center; gap: 8px;
  padding: 18px;
}
.p5-ped .triagem-shell:not(.is-chat) #triagem-form,
.p5-ped .triagem-shell:not(.is-chat) .triagem-tools,
.p5-ped .triagem-shell:not(.is-chat) .triagem-tools-group { display: contents; }
.p5-ped .triagem-shell:not(.is-chat) .triagem-composer-icon { display: none; }
/* O rótulo do campo existe só para leitor de tela; aqui ele é o título do
   cartão, como no Paper. */
.p5-ped .triagem-shell:not(.is-chat) label[for="triagem-input"] {
  position: static; width: auto; height: auto; margin: 0 0 6px; padding: 0;
  overflow: visible; clip: auto; white-space: normal;
  flex: 0 0 100%; order: 0;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 18px;
  color: var(--color-graphite);
}
.p5-ped .triagem-shell:not(.is-chat) #triagem-input {
  flex: 0 0 100%; order: 1;
  height: 26px; margin: 0 0 32px; padding: 0;
  font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 26px;
  color: var(--color-ink);
}
.p5-ped #triagem-input::placeholder { color: var(--color-graphite); opacity: .8; }

/* Pílulas da prateleira: Câmera, Arquivos, Áudio. */
.p5-ped .triagem-shell:not(.is-chat) .triagem-tool:not(.triagem-material),
.p5-ped .triagem-shell:not(.is-chat) #triagem-mic:not(.hidden) {
  order: 2;
  width: auto; height: auto;
  padding: 9px 12px;
  border: 0; border-radius: 12px;
  background: var(--color-mist);
  box-shadow: none;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 16px;
  color: var(--color-ink);
}
.p5-ped .triagem-shell:not(.is-chat) .triagem-tool.hidden { display: none; }
.p5-ped .triagem-shell:not(.is-chat) .triagem-tool:not(.triagem-material):hover,
.p5-ped .triagem-shell:not(.is-chat) #triagem-mic:not(.hidden):hover { background: var(--color-teal-50); color: var(--color-ink); }
.p5-ped .triagem-shell:not(.is-chat) .triagem-tool svg,
.p5-ped .triagem-shell:not(.is-chat) #triagem-mic svg,
.p5-ped .triagem-shell:not(.is-chat) #triagem-send svg { display: none; }
/* O microfone não tem rótulo no HTML (na conversa ele é só ícone), e mora
   antes da prateleira: o `order` põe ele depois de Arquivos, como no Paper. */
.p5-ped .triagem-shell:not(.is-chat) #triagem-mic::after { content: "Áudio"; }
.p5-ped .triagem-shell:not(.is-chat) #triagem-mic:not(.hidden) { order: 3; }

/* "Cotar material também": continua sendo só anúncio (aria-disabled). */
.p5-ped .triagem-shell:not(.is-chat) .triagem-material {
  order: 4;
  margin-left: 8px; padding: 9px 4px;
  border: 0; background: transparent; opacity: 1; cursor: default;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 16px;
  color: var(--color-ink);
}
.p5-ped .triagem-material-box {
  width: 18px; height: 18px; border: 2px solid var(--color-ink); border-radius: 5px;
}

/* Enviar: pílula teal com sombra dura, sempre visível antes da conversa
   (o pedido-chat.css a troca pelo microfone com o campo vazio). */
.p5-ped .triagem-shell:not(.is-chat) #triagem-send {
  display: inline-flex;
  order: 5; margin-left: auto;
  width: auto; height: auto;
  padding: 11px 20px;
  border: 2.5px solid var(--color-ink); border-radius: 999px;
  background: var(--color-teal);
  box-shadow: var(--color-ink) 3px 3px 0;
  font-family: var(--font-display); font-size: 15px; font-weight: 800; line-height: 18px;
  color: var(--color-ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.p5-ped .triagem-shell:not(.is-chat) #triagem-send::after { content: "Enviar →"; }
.p5-ped .triagem-shell:not(.is-chat) #triagem-send:hover { transform: translate(-1px, -1px); box-shadow: var(--color-ink) 4px 4px 0; }

/* Durante a conversa: só a cor do v5 nos botões redondos e nas bolhas. */
.p5-ped .triagem-shell.is-chat .triagem-primary {
  background: var(--color-teal); color: var(--color-ink);
  border: 2px solid var(--color-ink); box-shadow: none;
}
.p5-ped .triagem-shell.is-chat .triagem-primary svg { color: var(--color-ink); }
.p5-ped .triagem-bubble-user { background: var(--color-ink); color: #fff; }
.p5-ped .triagem-bubble-ai { background: var(--color-mist); color: var(--color-ink); }
.p5-ped .triagem-quick { border: 2px solid var(--color-ink); color: var(--color-ink); font-weight: 700; }
.p5-ped .triagem-quick:hover { background: var(--color-teal-50); }
.p5-ped .triagem-quick.is-primary { background: var(--color-teal); border-color: var(--color-ink); color: var(--color-ink); }
.p5-ped .triagem-progress-label { font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em; color: var(--color-teal-700); }
.p5-ped .triagem-progress-fill { background: var(--color-teal); }

/* Buscas populares */
.p5-ped .triagem-chips { gap: 10px; padding-top: 0; border-top: 0; }
.p5-ped .triagem-chips-title {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; line-height: 16px; color: var(--color-teal-700);
}
.p5-ped .triagem-chips-list { gap: 8px; }
.p5-ped .triagem-chip {
  padding: 7px 14px;
  border: 2px solid var(--color-ink); border-radius: 999px;
  background: var(--color-paper);
  font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 18px;
  color: var(--color-ink);
}
.p5-ped .triagem-chip svg { display: none; }
.p5-ped .triagem-chip:hover { border-color: var(--color-ink); background: var(--color-teal-50); color: var(--color-ink); }

/* Saídas do assistente: links de texto alinhados à esquerda. Quem mostra o
   quê continua sendo o pedido-chat.css (classes do #triagem-root). */
.p5-ped .triagem-actions { justify-content: flex-start; gap: 4px 20px; }
.p5-ped .triagem-link {
  padding: 8px 0; border: 0; border-radius: 0; background: transparent;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 18px;
  color: var(--color-ink);
}
.p5-ped .triagem-link:hover { background: transparent; color: var(--color-teal-700); text-decoration: underline; text-underline-offset: 3px; }
.p5-ped .triagem-link svg { display: none; }
.p5-ped .triagem-link.triagem-clear { color: var(--color-graphite); }

/* ---------- Lateral ---------- */
.p5-ped__lado { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.p5-ped__ja {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px;
  background: var(--color-paper);
  border: 2px solid var(--color-ink); border-radius: 20px;
}
.p5-ped__mono {
  margin: 0;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; line-height: 16px; text-transform: uppercase;
  color: var(--color-graphite);
}
.p5-ped__ja-txt { margin: 0; font-size: 15px; line-height: 22px; color: var(--color-ink); }
.p5-ped__ja-btn {
  align-self: flex-start;
  padding: 8px 16px;
  border: 2px solid var(--color-ink); border-radius: 999px;
  font-family: var(--font-display); font-size: 14px; font-weight: 800; line-height: 16px;
  color: var(--color-ink);
}
.p5-ped__ja-btn:hover { background: var(--color-teal-50); }
.p5-ped__selo {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px;
  background: var(--color-ink);
  border: 2.5px solid var(--color-ink); border-radius: 20px;
  box-shadow: var(--color-teal) 5px 5px 0;
}
.p5-ped__selo-tit {
  margin: 0;
  font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 26px;
  color: #fff;
}
.p5-ped__selo-lista {
  display: flex; flex-direction: column; gap: 14px;
  margin: 0; padding: 0; list-style: none;
  font-size: 15px; font-weight: 500; line-height: 22px; color: #E4E4E7;
}

/* ---------- Etapas 2 e 3: cartão do pedido (global/pedido-card.njk) ----------
   A seção só existe na tela quando o cartão está aberto (o JS tira o
   `hidden` do #home-pedido-root). Navegador sem :has() mostra só o respiro. */
.p5-ped__pedido { padding: 96px 0 120px; background: var(--color-paper); }
.p5-ped__pedido:has(#home-pedido-root.hidden) { display: none; }
/* A linha que liga o chat ao cartão não faz sentido com o cartão noutra seção. */
.p5-ped .pedido-bridge,
.p5-ped .pedido-bridge.is-visible { display: none; }

.p5-ped #home-pedido-root {
  max-width: none; margin: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  overflow: visible;
  scroll-margin-top: 24px;
}
.p5-ped #home-pedido-root.hidden { display: none; }
/* Os dois cartões são embrulhos que o faca-seu-pedido-v5.js cria dentro do
   próprio #home-pedido-form (os campos não saem do formulário). Sem o JS,
   o formulário fica numa coluna só, ainda com o visual abaixo. */
.p5-ped #home-pedido-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;
  padding: 0;
}
.p5-ped #home-pedido-form > * + * { margin-top: 0 !important; }
.p5-ped__cartao {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  min-width: 0;
  padding: 28px;
  background: var(--color-paper);
  border: 2.5px solid var(--color-ink); border-radius: 24px;
  box-shadow: var(--color-ink) 6px 6px 0;
}
.p5-ped__cartao > * + * { margin-top: 0 !important; }

/* Cabeçalho do cartão "Confirme": selo da etapa + a fala (triagem ou manual). */
.p5-ped .pedido-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: 0; background: transparent; color: var(--color-ink);
}
.p5-ped .pedido-head::before,
.p5-ped .pedido-section:has(#modal-nome) .pedido-section-head::before {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; line-height: 16px; text-transform: uppercase;
  color: var(--color-teal-700);
}
.p5-ped .pedido-head::before { content: "Etapa 2 · Confirme seu pedido"; }
.p5-ped .pedido-head-avatar,
.p5-ped .pedido-head-sub,
.p5-ped .pedido-head-step { display: none; }
.p5-ped .pedido-head-title,
.p5-ped .pedido-section:has(#modal-nome) .pedido-section-head::after {
  margin: 0;
  font-family: var(--font-display); font-size: 30px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 34px; color: var(--color-ink);
}
.p5-ped .pedido-head-title .pedido-only-triage::after,
.p5-ped .pedido-head-title .pedido-only-manual::after { content: "."; }

/* Blocos do cartão: sem a régua entre eles (cada cartão já separa). */
.p5-ped .pedido-section + .pedido-section { padding-top: 0; border-top: 0; }
.p5-ped .pedido-section { display: flex; flex-direction: column; gap: 14px; }
.p5-ped .pedido-section-head { margin: 0; }
.p5-ped .pedido-section > .space-y-3 > * + *,
.p5-ped #pedido-fields-chat > * + * { margin-top: 0 !important; }
.p5-ped #pedido-fields-chat { display: flex; flex-direction: column; gap: 14px; }
.p5-ped .pedido-section-title {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: 0; line-height: 16px; text-transform: none; color: var(--color-ink);
}
.p5-ped .pedido-section-optional { font-size: 13px; color: var(--color-ink); font-weight: 600; }
.p5-ped .pedido-section-hint { display: none; }

/* Bloco 1 (o que a conversa resolveu): o título vira o cabeçalho do cartão,
   então aqui sobra só o "Editar", no canto de cima como no Paper. */
.p5-ped .pedido-section:has(#pedido-triage-summary) > .pedido-section-head .pedido-section-title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);
}
.p5-ped .pedido-section:has(#pedido-triage-summary) > .pedido-section-head { position: static; }
.p5-ped .pedido-section-action {
  position: absolute; top: 26px; right: 28px;
  padding: 2px 0;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 18px;
  color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px;
}
.p5-ped .pedido-section-action svg { display: none; }
.p5-ped .pedido-section-action:hover { color: var(--color-teal-700); }

.p5-ped #home-pedido-root.is-from-triage.is-summary .pedido-summary {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  border: 2px solid var(--color-ink); border-radius: 14px; background: var(--color-paper);
}
.p5-ped .pedido-summary::before {
  content: "Que profissional precisa?";
  font-size: 12px; font-weight: 500; line-height: 16px; color: var(--color-graphite);
}
.p5-ped .pedido-summary-role { font-size: 16px; font-weight: 700; line-height: 22px; color: var(--color-ink); }
.p5-ped .pedido-summary-role svg { display: none; }
.p5-ped .pedido-summary-desc { margin: 0; font-size: 14px; line-height: 20px; color: var(--color-graphite); }

#pedido-add-service.hidden { display: none; }
.p5-ped #pedido-add-service {
  font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 18px;
  color: var(--color-teal-700);
}

/* "Como você quer receber os orçamentos?" (pedido-multi.js) */
.p5-ped #pedido-multi-mode { padding: 0; border: 0; border-radius: 0; }
.p5-ped #pedido-multi-mode:not(.hidden) { display: flex; flex-wrap: wrap; gap: 10px; }
.p5-ped #pedido-multi-mode > p:first-child {
  flex: 0 0 100%; margin: 0;
  font-size: 15px; font-weight: 700; line-height: 20px;
  text-transform: none; letter-spacing: 0; color: var(--color-ink);
}
.p5-ped #pedido-multi-mode > label {
  flex: 1 1 200px; padding: 14px;
  border: 2px solid var(--color-hairline); border-radius: 14px; background: var(--color-paper);
}
.p5-ped #pedido-multi-mode > label.hidden { display: none; }
.p5-ped #pedido-multi-mode > label:has(input:checked) {
  border: 2.5px solid var(--color-ink); background: var(--color-teal-50);
}
.p5-ped #pedido-multi-mode > label .text-sm { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--color-ink); }
.p5-ped #pedido-multi-coverage-hint { flex: 0 0 100%; margin: 0; }

/* Campos do cartão */
.p5-ped #home-pedido-root label.block {
  margin-bottom: 6px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 16px;
  text-transform: none; letter-spacing: 0; color: var(--color-ink);
}
.p5-ped #home-pedido-root input[type="text"],
.p5-ped #home-pedido-root input[type="tel"],
.p5-ped #home-pedido-root input[type="email"],
.p5-ped #home-pedido-root input[type="date"],
.p5-ped #home-pedido-root select,
.p5-ped #home-pedido-root textarea {
  height: auto; min-height: 46px;
  padding: 11px 12px;
  border: 2px solid var(--color-ink); border-radius: 12px;
  background: var(--color-paper);
  font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 20px;
  letter-spacing: 0; color: var(--color-ink);
}
.p5-ped #home-pedido-root input::placeholder,
.p5-ped #home-pedido-root textarea::placeholder { color: var(--color-graphite); }
.p5-ped #home-pedido-root input:focus,
.p5-ped #home-pedido-root select:focus,
.p5-ped #home-pedido-root textarea:focus { outline: 3px solid var(--color-teal); outline-offset: 1px; border-color: var(--color-ink); }
.p5-ped #home-pedido-root textarea { min-height: 72px; }
.p5-ped #home-pedido-root #modal-whatsapp { padding-right: 36px; }
.p5-ped #home-pedido-root #home-honeypot { position: absolute; }

/* Seus dados: Nome | WhatsApp, CEP | E-mail. A dupla WhatsApp+CEP do HTML
   vira `contents` para os quatro campos dividirem a mesma grade. */
.p5-ped .pedido-section:has(#modal-nome) > .space-y-3 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px;
}
.p5-ped .pedido-section:has(#modal-nome) .grid:has(#modal-whatsapp) { display: contents; }
.p5-ped .pedido-section:has(#modal-nome) .pedido-section-title { display: none; }
.p5-ped .pedido-section:has(#modal-nome) .pedido-section-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.p5-ped .pedido-section:has(#modal-nome) .pedido-section-head::before { content: "Etapa 3 · Falta só isso"; }
.p5-ped .pedido-section:has(#modal-nome) .pedido-section-head::after { content: "Seus dados"; }

/* Quando precisa? Pílulas no lugar dos dois botões largos. O estado vem do
   aria-checked que o pedido-card.js já mantém; a caixinha some porque a cor
   já diz o que está marcado. */
.p5-ped #agendar-fields-wrapper { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.p5-ped #agendar-fields-wrapper .grid.grid-cols-2 { display: flex; flex-wrap: wrap; gap: 8px; }
.p5-ped #home-pedido-root .timing-chip {
  height: auto; padding: 6px 12px;
  border: 2px solid var(--color-ink); border-radius: 999px;
  background: var(--color-paper); box-shadow: none;
  font-family: var(--font-body); font-size: 13px; font-weight: 700; line-height: 16px;
  color: var(--color-ink);
}
.p5-ped #home-pedido-root .timing-chip > span,
.p5-ped #home-pedido-root .timing-chip > svg { display: none; }
.p5-ped #home-pedido-root #btn-imediato { border-color: var(--color-danger-700); background: var(--color-danger-50); color: var(--color-danger-700); }
.p5-ped #home-pedido-root #btn-imediato[aria-checked="true"] { background: var(--color-danger-700); color: #fff; }
.p5-ped #home-pedido-root #btn-agendar-ts[aria-checked="true"] { background: var(--color-ink); color: #fff; }
.p5-ped #dates-container .text-\[11px\] { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.p5-ped #btn-add-date { font-size: 13px; font-weight: 600; color: var(--color-graphite); }

.p5-ped #home-pedido-root details {
  margin: 0; border: 2px solid var(--color-hairline); border-radius: 14px; background: var(--color-paper);
}
.p5-ped #home-pedido-root details > summary {
  font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--color-ink);
}

/* Compartilhar conversa e aceite dos termos: caixas teal, texto de 13px. */
.p5-ped #share-chat-wrap { padding: 0; border: 0; background: transparent; gap: 10px; }
.p5-ped #share-chat-wrap.hidden { display: none; }
.p5-ped #share-chat-wrap > span { font-size: 13px; line-height: 18px; color: var(--color-ink); }
.p5-ped #share-chat-wrap > span .font-bold { font-weight: 600; }
.p5-ped #home-pedido-root input[type="checkbox"] {
  width: 18px; height: 18px; flex: none; margin-top: 0; accent-color: var(--color-teal);
}
.p5-ped #home-pedido-root div:has(> #terms) { justify-content: flex-start; gap: 10px; padding-top: 0; }
.p5-ped #home-pedido-root label[for="terms"] { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--color-ink); }
.p5-ped #home-pedido-root label[for="terms"] a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }

/* Comparar preços + a frase do "100% gratuito" ao lado. */
.p5-ped__cartao--dados { flex-flow: row wrap; align-items: center; column-gap: 16px; }
.p5-ped__cartao--dados > * { flex: 0 0 100%; min-width: 0; }
.p5-ped #home-pedido-root #btn-confirmar-modal {
  flex: none; width: auto; height: auto;
  padding: 13px 24px;
  border: 2.5px solid var(--color-ink); border-radius: 999px;
  background: var(--color-teal); box-shadow: var(--color-ink) 4px 4px 0;
  font-family: var(--font-display); font-size: 16px; font-weight: 800; line-height: 20px;
  text-transform: none; letter-spacing: 0; color: var(--color-ink);
}
.p5-ped #home-pedido-root #btn-confirmar-modal::after { content: " →"; }
.p5-ped #home-pedido-root #btn-confirmar-modal:hover { background: var(--color-teal); transform: translate(-1px, -1px); }
.p5-ped #btn-confirmar-modal + p {
  flex: 1 1 200px; max-width: 240px; margin: 0;
  text-align: left; font-size: 13px; font-weight: 400; line-height: 18px; color: var(--color-graphite);
}
/* O selo "Verificados Robozin" já está na lateral da dobra. */
.p5-ped #btn-confirmar-modal + p + div { display: none; }

/* "Pronto" do resumo aberto */
.p5-ped #home-pedido-root.is-from-triage:not(.is-summary) .pedido-summary-done {
  align-self: flex-start;
  padding: 12px 22px;
  border: 2.5px solid var(--color-ink); border-radius: 999px;
  background: var(--color-teal); box-shadow: var(--color-ink) 3px 3px 0;
  font-family: var(--font-display); font-size: 15px; font-weight: 800; line-height: 18px;
  color: var(--color-ink);
}
.p5-ped .pedido-summary-done svg { display: none; }
.p5-ped .pedido-summary-done::after { content: " →"; }

/* ---------- Telas intermediárias (900–1199) ---------- */
@media (max-width: 1199.98px) {
  .p5-ped__h1 { font-size: 54px; line-height: 56px; }
  .p5-ped__grid { gap: 40px; }
}

/* O cartão do pedido em duas colunas só cabe com folga acima de ~1000px. */
@media (max-width: 999.98px) {
  .p5-ped #home-pedido-form { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; gap: 24px; }
}

/* ---------- Celular ---------- */
@media (max-width: 899.98px) {
  .p5-ped__hero { padding: 24px 0 48px; }
  .p5-ped__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .p5-ped__col { gap: 20px; }
  .p5-ped #triagem-root { gap: 20px; }
  .p5-ped__head { gap: 12px; }
  /* O pedido-chat.css recolhe a chamada com margem de -1.5rem (o vão do
     desktop); aqui o vão é 20px. */
  .p5-ped #hero-head.is-hidden { margin-bottom: -20px; }
  .p5-ped__h1 { font-size: 34px; line-height: 36px; letter-spacing: -0.045em; }
  .p5-ped__lead { font-size: 16px; line-height: 24px; }
  .p5-ped__etapas { gap: 6px; }
  .p5-ped__etapa { padding: 5px 10px; font-size: 12px; }
  .p5-ped__traco { width: 12px; }
  .p5-ped .triagem-shell:not(.is-chat) .triagem-bar { padding: 16px; }
  .p5-ped .triagem-shell:not(.is-chat) #triagem-input { font-size: 16px; margin-bottom: 18px; }
  /* Enviar ganha a linha inteira: é o alvo de toque principal. */
  .p5-ped .triagem-shell:not(.is-chat) #triagem-send { flex: 1 0 100%; justify-content: center; margin: 8px 0 0; padding: 13px 20px; }
  .p5-ped .triagem-shell:not(.is-chat) .triagem-material { margin-left: 0; }
  .p5-ped .triagem-actions { gap: 0 16px; }
  .p5-ped__selo { margin-right: 5px; }

  .p5-ped__pedido { padding: 40px 0 56px; }
  .p5-ped__cartao { padding: 20px 16px; border-radius: 20px; box-shadow: var(--color-ink) 4px 4px 0; margin-right: 4px; }
  .p5-ped .pedido-head-title,
  .p5-ped .pedido-section:has(#modal-nome) .pedido-section-head::after { font-size: 24px; line-height: 28px; }
  .p5-ped .pedido-section-action { top: 18px; right: 16px; }
  .p5-ped .pedido-section:has(#modal-nome) > .space-y-3 { grid-template-columns: minmax(0, 1fr); }
  /* 16px é o mínimo para o Safari do iPhone não dar zoom ao focar. */
  .p5-ped #home-pedido-root input:not([type="checkbox"]):not([type="radio"]),
  .p5-ped #home-pedido-root select,
  .p5-ped #home-pedido-root textarea { font-size: 16px; }
  .p5-ped #home-pedido-root #btn-confirmar-modal { flex: 1 0 100%; }
  .p5-ped #btn-confirmar-modal + p { max-width: none; }
}