/* Complementos do checkout: só o que o CSS do PagFlow (pagflow/checkout.css) não cobre.
   Os arquivos em pagflow/ ficam idênticos ao original; ajuste aqui. */

/* Cores da marca MundoVita (tiradas da logo): azul-marinho #033186, azul #0D7DD8, laranja #FA8115.
   O "verde" do PagFlow vira o azul da marca; #0B6FCB é o azul da logo um pouco mais escuro
   para o texto branco dos botões passar no contraste AA (5:1). */
:root {
  --brand-navy: #033186;
  --brand-blue: #0B6FCB;
  --brand-orange: #FA8115;
  --green: var(--brand-blue);
  --green-dark: var(--brand-navy);
  --green-light: #E8F1FB;
}

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.error-msg:empty { display: none; }

/* h2 no lugar das divs do PagFlow: mesmo visual */
h2.step-title { margin-bottom: 3px; }
h2.step-title:focus { outline: none; } /* recebe foco ao trocar de etapa, só para leitor de tela */

/* Botão "Continuar" das etapas 1 e 2 */
.screen .card > .cta-btn { margin-top: 22px; }

/* Link "Não sei meu CEP" */
.cep-help { color: var(--green); font-weight: 700; }
#cep-status:empty { display: none; }

/* Aviso amarelo depois do CEP (no PagFlow é estilo inline) */
.cep-found {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin-bottom: 16px;
  background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: #92400e;
}

/* Número e complemento em destaque, amarelo vazio e verde preenchido (inline no PagFlow) */
input.hl-input { background: #fffbeb; border: 2px solid #fbbf24; font-weight: 600; }
input.hl-input.filled { background: var(--green-light); border: 2px solid var(--brand-blue); }

/* Imagem vazia do resumo */
.prod-img svg { width: 26px; height: 26px; color: var(--light); }

/* ---------- Seção 3: confirmação do pedido ----------
   Cantos retos como os campos e opções do PagFlow (--rsm não definido lá) */

/* Resumo ao vivo */
.ord-recap {
  margin: 0;
  padding: 2px 16px;
  background: #FAFAFA;
  border: 1.5px solid var(--border);
}
.ord-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.ord-row:last-child { border-bottom: none; }
.ord-row dt { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.ord-row dd { margin: 0; min-width: 0; text-align: right; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--black); overflow-wrap: anywhere; }
.ord-row dd small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.ord-row dd.is-empty { font-weight: 500; color: var(--light); }
.ord-total { align-items: center; }
.ord-total dt { color: var(--black); font-size: 13px; font-weight: 800; }
.ord-total dt small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.ord-total dd { font-size: 22px; font-weight: 800; letter-spacing: -.3px; white-space: nowrap; }
.ord-row dd .nowrap { white-space: nowrap; }

/* Celular: rótulo em cima, valor embaixo (alinhado à esquerda) */
@media (max-width: 480px) {
  .ord-recap { padding: 2px 14px; }
  .ord-row { flex-direction: column; align-items: stretch; gap: 3px; }
  .ord-row dd { text-align: left; }
  .ord-total { flex-direction: row; align-items: center; }
  .ord-total dd { font-size: 20px; }
}
@media (max-width: 360px) {
  .ord-total { flex-direction: column; align-items: stretch; }
}

/* Compromisso de pagamento: amarelo de atenção (o mesmo do aviso de CEP do PagFlow)
   enquanto não marcado, verde quando confirmado, vermelho se tentar enviar sem marcar */
.agree {
  display: block;
  margin: 14px 0 0;
  background: #FFFBEB;
  border: 2px solid #F59E0B;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.agree:hover { border-color: #D97706; }

.commit-flag {
  display: block;
  padding: 8px 16px;
  background: #FEF3C7;
  border-bottom: 1px solid #FCD34D;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #92400E;
  transition: background .15s, color .15s, border-color .15s;
}
.commit-flag > span { display: flex; align-items: center; gap: 7px; }
.commit-flag svg { width: 14px; height: 14px; flex: none; }
.commit-flag-on { display: none !important; }

.commit-body {
  display: flex; align-items: center; gap: 16px;
  padding: 16px;
  font-size: 15px; font-weight: 500; line-height: 1.5;
}
.agree strong { font-weight: 800; white-space: nowrap; }
.agree .commit-title { display: block; margin-bottom: 3px; font-size: 17px; letter-spacing: -.2px; color: var(--black); }

/* Quadrado de marcar grande (40px) */
.agree input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none;
  width: 40px; height: 40px; margin: 0; padding: 0;
  background: #fff center / 28px no-repeat;
  border: 3px solid var(--black);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.agree input[type="checkbox"]:checked {
  background-color: var(--green);
  border-color: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4L16 6'/%3E%3C/svg%3E");
}
.agree input[type="checkbox"]:focus-visible { outline: 3px solid rgba(30, 30, 30, .35); outline-offset: 2px; }

/* Confirmado */
.agree:has(input:checked) { border-color: var(--green); background: var(--green-light); }
.agree:has(input:checked) .commit-flag { background: var(--green); border-color: var(--green); color: #fff; }
.agree:has(input:checked) .commit-flag-off { display: none !important; }
.agree:has(input:checked) .commit-flag-on { display: flex !important; }
.agree:has(input:checked) .commit-title { color: var(--green-dark); }

/* Tentou enviar sem marcar */
.agree.is-invalid { border-color: var(--red); background: var(--red-light); }
.agree.is-invalid .commit-flag { background: var(--red); border-color: var(--red); color: #fff; }
.agree.is-invalid input[type="checkbox"] { border-color: var(--red); }

#err-agree { margin: 6px 0 0; }

@media (max-width: 380px) {
  .commit-body { gap: 12px; padding: 14px; font-size: 14px; }
  .agree .commit-title { font-size: 16px; }
}

#sec-confirm .cta-btn { margin-top: 16px; }
.cta-btn[disabled] { opacity: .75; cursor: progress; transform: none; }

.form-alert {
  margin-top: 12px; padding: 12px 14px; border-radius: 8px;
  background: var(--red-light); color: var(--red);
  font-size: 13px; font-weight: 700;
}
.form-alert:empty { display: none; }

/* "Por que é seguro comprar aqui": mesmo card da seção de avaliações do PagFlow (testimonials.css) */
.safe-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  color: var(--black);
}
.safe-list { list-style: none; margin: 0; padding: 0; }
.safe-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.safe-list li:last-child { border-bottom: none; padding-bottom: 0; }
.safe-icon {
  flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green-light); color: var(--green-dark);
}
.safe-icon { font-size: 18px; line-height: 1; }
.safe-list strong { display: block; font-size: 14px; font-weight: 800; line-height: 1.35; }
.safe-list span:not(.safe-icon) { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--muted); }

@media (max-width: 900px) {
  /* No celular o aside vira "display: contents": vem depois do formulário, antes das avaliações */
  .safe-section { order: 1; width: 100%; }
}

/* "Sem cartão": cartão riscado em vermelho */
.safe-icon.is-no { position: relative; }
.safe-icon.is-no::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%;
  height: 3px; border-radius: 2px; background: var(--red);
  transform: rotate(-45deg); box-shadow: 0 0 0 1.5px var(--green-light);
}

/* Botão principal: verde esmeralda #10B981, mais escuro no hover */
.cta-btn { background: #10B981; box-shadow: 0 4px 14px rgba(16, 185, 129, .28); }
.cta-btn:hover:not([disabled]) { background: #059669; filter: none; box-shadow: 0 8px 20px rgba(5, 150, 105, .32); }

/* Etapa atual da barra de progresso em marinho, concluídas em azul */
.prog-dot.active { background: var(--brand-navy); border-color: var(--brand-navy); }
.prog-lbl.active { color: var(--brand-navy); }

/* Estrelas no laranja do swoosh da logo */
.tst-stars svg.is-on { fill: var(--brand-orange); }
.tst-initials { background: var(--green-light); color: var(--brand-navy); }