/* =============================================================================================
   P48-53 · O DIÁLOGO DE PRÉ-CHECKOUT DA PÁGINA DO 48º (docs/368)
   ---------------------------------------------------------------------------------------------
   Carregada SÓ com `SALES_PAGE_48_PRECHECKOUT_ENABLED` ligada. Desligada, esta folha ⛔ é pedida
   e o HTML da página ⛔ tem um byte a mais.

   ⚠ NENHUMA COR NOVA e NENHUM TOKEN NOVO. Tudo vem do `:root` de `pagina-vendas-48-uau.css`,
   que já está carregada quando esta chega. O diálogo ⛔ é uma peça de outro sistema visual
   aparecendo por cima da página — é a MESMA página, um passo à frente.

   Onde a peça gasta ousadia: no botão âmbar, que é o único elemento de ação e o mesmo `.pv-cta`
   dos seis botões de compra. Todo o resto é quieto de propósito — quem está aqui já decidiu
   comprar, e a única coisa que a tela pode fazer é ⛔ atrapalhar.

   ⛔ CAIXA ALTA em lugar nenhum (direção de arte da 48, §5).
   ============================================================================================= */

/* ── A caixa ──────────────────────────────────────────────────────────────────────────────── */
/* O `<dialog>` é só o envelope: quem tem pele é o cartão. Assim o backdrop do UA continua
   sendo o backdrop, e a caixa ⛔ ganha borda dupla. */
.pv-pc {
  width: min(29rem, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}
.pv-pc::backdrop { background: rgba(22, 22, 27, .58); }

/* O papel. A borda é a MESMA régua fina do resto da página; a sombra é baixa e fria — uma
   folha pousada sobre a outra, ⛔ um cartão flutuando. */
.pv-pc__cartao {
  position: relative;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 30px 24px 22px;
  border: 1px solid var(--rule2);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 18px 44px rgba(22, 22, 27, .18);
}
@media (min-width: 600px) { .pv-pc__cartao { padding: 34px 32px 26px; } }

/* ── Fechar ───────────────────────────────────────────────────────────────────────────────── */
/* Alvo de 44px, contorno só no foco, sem círculo cinza permanente: ele ⛔ disputa atenção com
   o botão de continuar. */
.pv-pc__fechar {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--soft);
  font: 400 26px/1 var(--sans);
  cursor: pointer;
}
.pv-pc__fechar:hover { color: var(--ink); }

/* ── Cabeçalho ────────────────────────────────────────────────────────────────────────────── */
/* "Passo 1 de 2" é INFORMAÇÃO, ⛔ enfeite: a compra tem mesmo dois passos, e dizer em qual a
   pessoa está é o que impede a tela de parecer um cadastro surgido do nada. Por isso ele é
   pequeno, em caixa de frase, e ⛔ uma etiqueta espaçada em maiúsculas. */
.pv-pc__passo {
  margin: 0 0 6px;
  font: 500 13px/1.3 var(--sans);
  color: var(--soft);
}
.pv-pc__titulo {
  margin: 0 0 20px;
  max-width: 22ch;
  font: 400 clamp(23px, 5.4vw, 27px)/1.22 var(--serif);
  color: var(--ink);
  text-wrap: balance;
}

/* ── Campos ───────────────────────────────────────────────────────────────────────────────── */
.pv-pc__campo + .pv-pc__campo { margin-top: 14px; }
.pv-pc__campo label {
  display: block;
  margin-bottom: 5px;
  font: 600 15px/1.35 var(--sans);
  color: var(--ink);
}
.pv-pc__campo input {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 0 13px;
  border: 1px solid var(--ctl);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  /* 16px é o piso: abaixo disso o iOS dá zoom no campo e joga a página para o lado. */
  font: 400 16px/1.4 var(--sans);
}
.pv-pc__campo.is-invalid input { border-color: var(--alert); }

/* ⚠ O anel de foco ⛔ é redeclarado aqui. Ele é declarado UMA vez, lá na pele
   (`body.pv48 :focus-visible`, 3px em `--focus`), e é um PISO: repeti-lo por controle seria a
   mesma decisão escrita quinze vezes, e a décima sexta peça nasceria sem anel. */

/* A dica do WhatsApp fica JUNTO do campo, e ⛔ num parágrafo de aviso longe dali: explicar o
   motivo do telefone ao lado do campo é o que desfaz a desconfiança (Baymard). */
.pv-pc__dica { margin: 5px 0 0; font: 400 13.5px/1.45 var(--sans); color: var(--soft); }
.pv-pc__erro { margin: 5px 0 0; font: 400 13.5px/1.45 var(--sans); color: var(--alert); }
.pv-pc__erro:empty { display: none; }

/* ── Fecho ────────────────────────────────────────────────────────────────────────────────── */
/* A linha de confiança vem ANTES do botão porque é ali que a dúvida aparece: a barreira medida
   em quem tem 45+ ⛔ é preço, é confiar no site (Cielo 2025 — 37%). */
.pv-pc__confianca {
  margin: 20px 0 10px;
  font: 400 13.5px/1.45 var(--sans);
  color: var(--soft);
}
.pv-pc__enviar { width: 100%; cursor: pointer; }
.pv-pc__enviar[disabled] { cursor: default; opacity: .72; }
.pv-pc__consentimento {
  margin: 10px 0 0;
  font: 400 12.5px/1.5 var(--sans);
  color: var(--soft);
}
.pv-pc__consentimento a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .16em;
}

/* ── Estados (P48-25, item 1) ─────────────────────────────────────────────────────────────── */
/* A mesma gramática do resto da página, e ela é uma só: `:hover` reconhece a mão mudando
   BORDA, FUNDO ou SUBLINHADO, sem mover nada; `:active` CEDE 1px, que é o único movimento e é
   o mesmo em todo controle, porque a pressão é a mesma em todo controle. ⛔ cor nova.

   O botão de enviar ⛔ aparece aqui: ele é o `.pv-cta` dos seis botões de compra, byte a byte,
   e os estados dele já estão escritos onde ele nasceu. Repeti-los abriria a porta para os dois
   divergirem.

   ⚠ Seletor por seletor, sem lista com vírgula: a régua de `test_p48_25_acabamento` recusa
   seletor composto ao conferir estado, e ela está certa — uma lista esconde qual controle
   realmente ficou coberto. */
body.pv48 .pv-pc__campo input:hover { border-color: var(--ink); }
body.pv48 .pv-pc__campo input:active { transform: translateY(1px); }
body.pv48 .pv-pc__fechar:hover { background: var(--quiet); color: var(--ink); }
body.pv48 .pv-pc__fechar:active { background: var(--quiet); transform: translateY(1px); }
body.pv48 .pv-pc__consentimento a:hover { text-underline-offset: .28em; text-decoration-thickness: 2px; }
body.pv48 .pv-pc__consentimento a:active { color: var(--accent-escuro); transform: translateY(1px); }

/* A rampa é a da página: 140ms com a curva de saída que o resto da folha usa, e ⛔ `linear` —
   nada no mundo físico começa e para na mesma velocidade. Dentro do `no-preference`, sempre:
   com movimento reduzido os estados continuam EXISTINDO, só trocam sem rampa. */
@media (prefers-reduced-motion: no-preference) {
  body.pv48 .pv-pc__campo input,
  body.pv48 .pv-pc__fechar,
  body.pv48 .pv-pc__consentimento a {
    transition:
      background-color 140ms cubic-bezier(.2, .7, .2, 1),
      border-color 140ms cubic-bezier(.2, .7, .2, 1),
      color 140ms cubic-bezier(.2, .7, .2, 1),
      text-underline-offset 140ms cubic-bezier(.2, .7, .2, 1),
      text-decoration-thickness 140ms cubic-bezier(.2, .7, .2, 1),
      transform 140ms cubic-bezier(.2, .7, .2, 1);
  }
}

/* ── Rolagem do fundo ─────────────────────────────────────────────────────────────────────── */
html.pv-pc-lock, html.pv-pc-lock body { overflow: hidden; }

/* ── Movimento ────────────────────────────────────────────────────────────────────────────── */
/* UM momento, e só ele: a resposta ao gesto de quem clicou em comprar. Nada entra sozinho em
   lugar nenhum desta peça. */
@media (prefers-reduced-motion: no-preference) {
  .pv-pc[open] .pv-pc__cartao { animation: pv-pc-entra 180ms ease-out; }
  @keyframes pv-pc-entra {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}