/* ============================================================
   Checkout em etapas
   ============================================================ */

#registration .clic-passos {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin: 0 0 26px;
}


#registration .clic-passo { padding-bottom: 13px; }


#registration .clic-passo[data-p="1"],
#registration .clic-passo.feito { cursor: pointer; }


#registration .clic-passo[data-p="1"] .clic-barra,
#registration .clic-passo.feito .clic-barra,
#registration .clic-passo.ativo .clic-barra { width: 100%; }



#registration .clic-rotulo {
  font-family: var(--clic-display); font-size: 15px; letter-spacing: .06em;
  color: var(--clic-suave); display: flex; align-items: center; gap: 7px; line-height: 1;
}


#registration .clic-passo.ativo .clic-rotulo { color: var(--clic-roxo); }


#registration .clic-passo[data-p="1"] .clic-rotulo,
#registration .clic-passo.feito .clic-rotulo { color: var(--clic-titulo); }


#registration .clic-passo.ativo .clic-num { background: var(--clic-roxo); color: #fff; }


#registration .clic-passo[data-p="1"] .clic-num,
#registration .clic-passo.feito .clic-num { background: var(--clic-titulo); color: #fff; }



@media (max-width: 620px) {
  #registration .clic-rotulo span:last-child { display: none; }
  #registration .clic-passos { gap: 6px; }
}



/* ---------- telas ---------- */
#registration .clic-tela { display: none; }


#registration .clic-tela.on {
  display: block;
  animation: clicEntra .3s cubic-bezier(.4,0,.2,1);
}



/* ---------- campo inválido ---------- */
#registration .clic-invalido input,
#registration .clic-invalido select {
  border-color: #d3243c !important;
}


body.clic-login  #registration .clic-passos,
body.clic-login  #registration .clic-tela { display: none !important; }



@media (prefers-reduced-motion: reduce) {
  #registration .clic-tela.on { animation: none; }
  #registration .clic-barra { transition: none; }
  #registration .clic-btn:hover { transform: none; }
}



#registration .clic-erro {
  display: block; font-size: 12.5px; color: #d3243c;
  font-weight: 500; margin-top: 4px;
}


#registration .clic-invalido input,
#registration .clic-invalido select,
#registration .clic-invalido textarea {
  border-color: #d3243c !important;
  box-shadow: 0 0 0 3px rgba(211,36,60,.12) !important;
}



/* ============================================================
   Seletor Pessoa Física / Jurídica e avisos de campo
   ============================================================ */

#registration .clic-tipo { margin: 0 0 20px; }


#registration .clic-tipo-rot {
  display: block; font-family: var(--clic-display);
  font-size: 15px; letter-spacing: .07em; color: var(--clic-suave); margin-bottom: 9px;
}


#registration .clic-tipo-op { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }


@media (max-width: 560px) { #registration .clic-tipo-op { grid-template-columns: 1fr; } }



#registration .clic-tp {
  appearance: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 11px;
  background: var(--clic-superficie);
  border: 1.5px solid var(--clic-borda); border-radius: 14px;
  padding: 12px 15px; font-family: inherit;
  transition: border-color .16s, box-shadow .16s;
}


#registration .clic-tp:hover { border-color: var(--clic-borda-forte); }


#registration .clic-tp.sel { border-color: var(--clic-roxo); box-shadow: var(--clic-sombra-alta); }


#registration .clic-tp:focus-visible { outline: 2px solid var(--clic-roxo); outline-offset: 2px; }


#registration .clic-tp b {
  display: block; font-family: var(--clic-display); font-weight: 400;
  font-size: 19px; letter-spacing: .03em; color: var(--clic-titulo); line-height: 1.15;
}


#registration .clic-tp small { display: block; font-size: 12px; color: var(--clic-suave); line-height: 1.3; }


#registration .clic-mk {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2px solid var(--clic-borda-forte); display: grid; place-items: center;
  transition: border-color .16s;
}


#registration .clic-tp.sel .clic-mk { border-color: var(--clic-roxo); }


#registration .clic-mk i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--clic-roxo);
  transform: scale(0); transition: transform .16s cubic-bezier(.34,1.56,.64,1);
}


#registration .clic-tp.sel .clic-mk i { transform: scale(1); }



/* ---------- avisos abaixo do campo ---------- */
#registration .clic-dica {
  display: block; font-size: 12.5px; margin-top: 4px; line-height: 1.35;
}


#registration .clic-dica-info { color: var(--clic-roxo); font-weight: 600; }


#registration .clic-dica-erro { color: #d3243c; font-weight: 500; }


#registration .clic-dica-ok   { color: #129d6a; font-weight: 500; }



#registration .clic-valido input { border-color: #129d6a !important; }



@media (prefers-reduced-motion: reduce) {
  #registration .clic-carregando { animation-duration: 2s; }
  #registration .clic-mk i { transition: none; }
}
/* ==========================================================================
   Cadastro (/register.php) — o que o carrinho não cobria
   --------------------------------------------------------------------------
   As regras acima vieram do formulário de pedido, reescopadas de
   #order-standard_cart para #registration. Abaixo só o que falta: a variável
   de sombra que o tema da área do cliente não define e as peças que existem
   apenas nesta tela.
   ========================================================================== */

#registration {
  --clic-sombra-alta: 0 2px 4px rgba(14,28,54,.06), 0 14px 34px -16px rgba(107,72,237,.34);
}

#registration .clic-tela-cab { margin: 0 0 18px; }
#registration .clic-tela-cab h3 {
  font-family: var(--clic-display);
  font-size: 26px;
  letter-spacing: .5px;
  color: var(--clic-titulo);
  margin: 0 0 4px;
}
#registration .clic-tela-cab p {
  font-size: 14px;
  color: var(--clic-suave);
  margin: 0;
}

#registration .clic-nav {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--clic-borda);
}
/* sem o botão "voltar" na primeira etapa, "continuar" iria para a esquerda */
#registration .clic-nav:has(> .clic-btn-seguir:only-child) { justify-content: flex-end; }

#registration .clic-btn-seguir,
#registration .clic-btn-voltar {
  border: 0;
  border-radius: 10px;
  padding: 12px 30px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
#registration .clic-btn-seguir {
  background: var(--clic-roxo);
  color: #fff;
}
#registration .clic-btn-seguir:hover { background: var(--clic-roxo-hover); }
#registration .clic-btn-voltar {
  background: transparent;
  color: var(--clic-suave);
  border: 1px solid var(--clic-borda-forte);
}
#registration .clic-btn-voltar:hover {
  background: var(--clic-fundo);
  color: var(--clic-titulo);
}

/* o passo já concluído é clicável — o cursor precisa dizer isso */
#registration .clic-passo.feito { cursor: pointer; }

/* O tema da área do cliente envolve o formulário num cartão com padding
   próprio; a barra de etapas precisa respirar dentro dele. */
#registration .clic-passos { margin-bottom: 26px; }

@media (max-width: 560px) {
  #registration .clic-nav { flex-direction: column-reverse; }
  #registration .clic-btn-seguir,
  #registration .clic-btn-voltar { width: 100%; }
  #registration .clic-tela-cab h3 { font-size: 22px; }
}


/* o CEP abre o endereço; a frase ao lado explica por que ele vem primeiro */
#registration .clic-cep-ajuda {
  margin: 0;
  padding-top: 12px;
  font-size: 13px;
  color: var(--clic-suave);
  line-height: 1.4;
}
@media (max-width: 576px) {
  #registration .clic-cep-dica-col { display: none; }
}