/**
 * Bellíssima — estilos exclusivos do checkout e do acompanhamento de pedido.
 *
 * A casca comum a todas as páginas (tokens, reset, cabeçalho, botões, faixa
 * de anúncio, rodapé) mora em css/base.css, carregado ANTES deste arquivo.
 * Aqui fica só o que existe nestas duas páginas: passos, painéis, formulário
 * e linha do tempo do pedido.
 */

:root {
  /* Os tokens da marca estao em base.css; aqui ficam so os que o
     checkout usa para estados de formulario. */
  --erro: #C0392B;
  --sucesso: #1E8449;
}

.btn:disabled { opacity: .5; cursor: not-allowed; transform: none }

/* No celular a faixa completa ocupava quatro linhas. Os trechos secundários
   somem abaixo de 720px e sobra o que de fato converte. */

.nav-link {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
}
.nav-link:hover { color: var(--gold-texto) }

/* ---------- passos ---------- */
.steps {
  display: flex; justify-content: center; gap: 0; padding: 34px 0 10px;
  flex-wrap: wrap;
}
.step { display: flex; align-items: center; gap: 10px; padding: 0 18px; opacity: .45 }
.step.ativo, .step.concluido { opacity: 1 }
.step-num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--gold-soft); font-size: .8rem; flex-shrink: 0;
}
/* Mesmas duas cores reprovadas dos botoes: --rose com branco dava 2,71:1 e
   --gold, 3,09:1. Alinhados a paleta nova dos botoes. */
.step.ativo .step-num { background: #87495A; border-color: #87495A; color: #fff }
.step.concluido .step-num { background: #8A6A3C; border-color: #8A6A3C; color: #fff }
.step-txt { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase }

/* ---------- layout do checkout ---------- */
.checkout-grid {
  display: grid; grid-template-columns: 1.35fr .65fr; gap: 44px;
  padding: 26px 0 90px; align-items: start;
}
.painel {
  background: var(--white); border: 1px solid rgba(176, 141, 87, .18);
  border-radius: 4px; padding: 34px;
}
.painel + .painel { margin-top: 22px }
.painel h2 { font-size: 1.6rem; margin-bottom: 6px }
.painel .sub { color: var(--ink-soft); font-size: .86rem; margin-bottom: 24px }

.resumo { position: sticky; top: 110px }
.resumo-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(176,141,87,.14) }
.resumo-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; flex-shrink: 0 }
.resumo-item .nome { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; line-height: 1.25 }
.resumo-item .meta { font-size: .7rem; color: var(--gold-texto); letter-spacing: .14em; text-transform: uppercase }
.linha-valor { display: flex; justify-content: space-between; font-size: .9rem; padding: 5px 0 }
.linha-valor.total {
  font-size: 1.15rem; font-weight: 500; border-top: 1px solid rgba(176,141,87,.25);
  margin-top: 10px; padding-top: 14px;
}
.linha-valor .gratis { color: var(--sucesso); font-weight: 500 }

/* ---------- comparativo PIX x cartão ----------
   O resumo mostrava um preço só até o frete ser cotado, então a etapa 1 — onde
   a cliente decide se continua — não dizia nada sobre o desconto do PIX. Aqui
   os dois valores ficam visíveis desde o início, com a forma escolhida em
   destaque. Os números são preenchidos por js/checkout.js. */
.pagamento-comparativo {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(176, 141, 87, .25);
}
.pagamento-comparativo[hidden] { display: none }
.pc-opcao {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid transparent; border-radius: 4px;
}
.pc-opcao + .pc-opcao { margin-top: 4px }
.pc-rotulo { font-size: .86rem; color: var(--ink-soft); line-height: 1.3 }
.pc-rotulo em { display: block; font-style: normal; font-size: .72rem }
.pc-valor { font-size: 1.02rem; font-weight: 500; white-space: nowrap }
.pc-opcao.ativa { border-color: rgba(176, 141, 87, .32); background: #FDF9F9 }
.pc-opcao.ativa .pc-rotulo { color: var(--ink) }
.pc-pix .pc-valor, .pc-pix .pc-rotulo em { color: var(--sucesso) }
.pc-pix.ativa { border-color: #A9DFBF; background: #F2FAF5 }
/* Alinhada à direita: fica sob o número que qualifica, não sob o rótulo. */
.linha-parcelas { font-size: .78rem; color: var(--ink-soft); text-align: right; margin-top: 3px }
.linha-parcelas[hidden] { display: none }

/* ---------- formulário ---------- */
.campos { display: grid; gap: 18px }
.campos.duas { grid-template-columns: 1fr 1fr }
.campos.tres { grid-template-columns: 2fr 1fr 1fr }

.campo { display: flex; flex-direction: column; gap: 6px }
.campo label {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.campo input, .campo select, .campo textarea {
  font-family: inherit; font-size: .95rem; color: var(--ink);
  padding: 12px 14px; border: 1px solid rgba(69, 53, 64, .22);
  border-radius: 2px; background: var(--white); outline: none;
  transition: border-color .3s;
}
.campo input:focus, .campo select:focus { border-color: var(--gold-texto) }
.campo input[readonly] { background: #F4F0ED; color: var(--ink-soft); cursor: default }
.campo.invalido input, .campo.invalido select { border-color: var(--erro) }

.ajuda { font-size: .76rem; color: var(--ink-soft) }
.erro-campo { font-size: .78rem; color: var(--erro); display: none }
.campo.invalido .erro-campo { display: block }

.sugestao {
  font-size: .82rem; background: #FDF6E7; border: 1px solid var(--gold-soft);
  border-radius: 2px; padding: 10px 12px; display: none;
}
.sugestao.visivel { display: block }
.sugestao button {
  color: var(--gold-texto); text-decoration: underline; font-size: .82rem; padding: 0 4px;
}

/* ---------- escolhas (frete e pagamento) ---------- */
.opcoes { display: grid; gap: 12px }
.opcao {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  border: 1px solid rgba(69, 53, 64, .18); border-radius: 4px; cursor: pointer;
  transition: all .25s;
}
.opcao:hover { border-color: var(--gold-soft) }
.opcao.selecionada { border-color: var(--rose); background: #FDF9F9 }
.opcao input { accent-color: var(--rose); width: 18px; height: 18px; flex-shrink: 0 }
.opcao .titulo { font-size: .95rem }
.opcao .desc { font-size: .78rem; color: var(--ink-soft) }
.opcao .preco { margin-left: auto; font-weight: 500; text-align: right }
.opcao .selo {
  display: inline-block; background: var(--sucesso); color: #fff; font-size: .64rem;
  letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 2px;
  margin-left: 8px;
}

/* ---------- revisão ---------- */
.bloco-revisao {
  border: 1px solid rgba(176, 141, 87, .2); border-radius: 4px;
  padding: 18px 20px; margin-bottom: 16px;
}
.bloco-revisao .cabeca {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.bloco-revisao .cabeca h3 {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  font-family: 'Jost', sans-serif; color: var(--gold-texto);
}
.bloco-revisao .editar { font-size: .74rem; color: var(--rose-texto); text-decoration: underline }
.bloco-revisao .destaque { font-size: 1.02rem; line-height: 1.5 }

/* ---------- avisos ---------- */
.aviso {
  padding: 14px 16px; border-radius: 4px; font-size: .88rem; margin-bottom: 20px;
  display: none;
}
.aviso.visivel { display: block }
.aviso-erro { background: #FDECEA; border: 1px solid #F5B7B1; color: #922B21 }
.aviso-info { background: #FDF6E7; border: 1px solid var(--gold-soft) }
.aviso-ok { background: #EAF7EF; border: 1px solid #A9DFBF; color: #145A32 }

.carregando { text-align: center; padding: 60px 20px; color: var(--ink-soft) }

/* ---------- linha do tempo do pedido ---------- */
.timeline { display: grid; gap: 0; margin: 26px 0 }
.tl-item { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding-bottom: 22px; position: relative }
.tl-item:not(:last-child)::before {
  content: ''; position: absolute; left: 14px; top: 26px; bottom: 0;
  width: 1px; background: rgba(176, 141, 87, .3);
}
.tl-bolinha {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gold-soft);
  display: grid; place-items: center; background: var(--cream); font-size: .8rem;
}
.tl-item.feito .tl-bolinha { background: var(--gold); border-color: var(--gold-texto); color: #fff }
.tl-item.atual .tl-bolinha { background: var(--rose); border-color: var(--rose); color: #fff }
.tl-item .quando { font-size: .78rem; color: var(--ink-soft) }

/* ---------- rodapé enxuto ---------- */
.rodape-simples {
  background: var(--ink-deep); color: rgba(242, 231, 224, .72); padding: 30px 0;
  text-align: center; font-size: .8rem;
}
.rodape-simples a { color: var(--gold-soft) }

/* ---------- responsivo ---------- */
@media (max-width: 980px) {
  .checkout-grid { grid-template-columns: 1fr; gap: 26px }
  .resumo { position: static; order: -1 }
}
@media (max-width: 640px) {
  .campos.duas, .campos.tres { grid-template-columns: 1fr }
  .painel { padding: 22px 18px }
  .step-txt { display: none }
  .step { padding: 0 10px }
}