/* buyer-journey.css — jornada de compra (rapidinhas + principal)
 * Componentes: .bj-steps (progresso), .bj-cta (botao Finalizar), [data-bj-stage] (CPF primeiro),
 * .bj-overlay (feedback de conclusao). Cor vem do tema da pagina (--theme-primary / --accent). */

:root{
  --bj-accent: var(--theme-primary, var(--accent, #ff5c2d));
  --bj-accent-2: color-mix(in srgb, var(--bj-accent) 72%, #c05000);
  --bj-ok: #22c55e;
  --bj-ease: cubic-bezier(.2,.8,.2,1);
}

/* ───────── Barra de progresso (Numeros › Seus dados › Pagamento) ───────── */
.bj-steps{
  list-style:none; margin:0 0 1rem; padding:0;
  display:flex; align-items:flex-start; gap:0; position:relative;
}
.bj-steps li{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.35rem;
  position:relative; font-size:.72rem; font-weight:700; letter-spacing:.2px;
  color:rgba(255,255,255,.45); text-align:center;
}
.bj-steps li::before{ /* trilho entre os passos */
  content:""; position:absolute; top:13px; left:-50%; width:100%; height:3px;
  background:rgba(255,255,255,.12); border-radius:3px; z-index:0;
}
.bj-steps li::after{ /* preenchimento do trilho */
  content:""; position:absolute; top:13px; left:-50%; width:100%; height:3px;
  background:linear-gradient(90deg,var(--bj-accent),var(--bj-accent-2)); border-radius:3px; z-index:0;
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--bj-ease);
}
.bj-steps li:first-child::before,.bj-steps li:first-child::after{ display:none; }
.bj-steps li.is-done::after,.bj-steps li.is-active::after{ transform:scaleX(1); }
.bj-dot{
  width:28px; height:28px; border-radius:50%; z-index:1;
  display:grid; place-items:center; font-size:.8rem; font-weight:800;
  background:#141a26; border:2px solid rgba(255,255,255,.18); color:rgba(255,255,255,.55);
  transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s var(--bj-ease),box-shadow .3s ease;
}
.bj-steps li.is-active{ color:#fff; }
.bj-steps li.is-active .bj-dot{
  background:linear-gradient(135deg,var(--bj-accent),var(--bj-accent-2)); border-color:transparent; color:#fff;
  transform:scale(1.12); box-shadow:0 0 0 5px color-mix(in srgb,var(--bj-accent) 25%,transparent);
}
.bj-steps li.is-done{ color:rgba(255,255,255,.8); }
.bj-steps li.is-done .bj-dot{ background:var(--bj-ok); border-color:transparent; color:#04210f; }
.bj-steps li.is-done .bj-dot > span{ display:none; }
.bj-steps li.is-done .bj-dot::before{ content:"\2713"; font-weight:900; }

/* ───────── CPF primeiro: painel 1 (CPF) e painel 2 (dados) ───────── */
[data-bj-stage] .bj-panel{
  display:grid; grid-template-rows:1fr; transition:grid-template-rows .45s var(--bj-ease),opacity .35s ease;
}
[data-bj-stage] .bj-panel > .bj-panel-in{ min-height:0; overflow:hidden; }
[data-bj-stage="1"] .bj-panel[data-bj-panel="2"],
[data-bj-stage="2"] .bj-panel[data-bj-panel="1"]{
  grid-template-rows:0fr; opacity:0; visibility:hidden; pointer-events:none;
  transition:grid-template-rows .45s var(--bj-ease),opacity .25s ease,visibility 0s linear .45s;
}
[data-bj-stage="1"] [data-bj-only="2"]{ display:none !important; }
[data-bj-stage="2"] [data-bj-only="1"]{ display:none !important; }

#buyer_cpf{ font-size:1.15rem; letter-spacing:.06em; }
.bj-cpf-row{ display:flex; gap:.5rem; align-items:stretch; }
.bj-cpf-row .form-control{ font-size:1.15rem; letter-spacing:.06em; }
.bj-cpf-row .bj-cta{ padding:.55rem 1.1rem; min-height:0; font-size:.95rem; white-space:nowrap; }

.bj-status{ margin-top:.6rem; font-size:.85rem; min-height:1.3rem; display:flex; align-items:center; gap:.45rem; }
.bj-status.is-error{ color:#fca5a5; }
.bj-status.is-info{ color:#cbd5e1; }
.bj-shake{ animation:bj-shake .4s ease; }
@keyframes bj-shake{ 20%,60%{ transform:translateX(-6px);} 40%,80%{ transform:translateX(6px);} }

.bj-chip{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.55rem .8rem; margin-bottom:.75rem; border-radius:.8rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-size:.9rem;
}
.bj-chip .bj-linkish{ background:none; border:0; color:var(--bj-accent); font-weight:700; padding:0; }
.bj-banner{
  display:flex; gap:.6rem; align-items:flex-start; padding:.65rem .8rem; margin-bottom:.9rem;
  border-radius:.8rem; font-size:.86rem; line-height:1.35;
}
.bj-banner.is-found{ background:color-mix(in srgb,var(--bj-ok) 14%,transparent); border:1px solid color-mix(in srgb,var(--bj-ok) 45%,transparent); color:#bbf7d0; }
.bj-banner.is-new,.bj-banner.is-warn{ background:rgba(148,163,184,.12); border:1px solid rgba(148,163,184,.3); color:#e2e8f0; }
.bj-banner .bi{ font-size:1.05rem; }
[data-bj-stage="2"] .bj-panel[data-bj-panel="2"] .bj-field{ animation:bj-rise .5s var(--bj-ease) both; }
[data-bj-stage="2"] .bj-panel[data-bj-panel="2"] .bj-field:nth-child(2){ animation-delay:.06s; }
[data-bj-stage="2"] .bj-panel[data-bj-panel="2"] .bj-field:nth-child(3){ animation-delay:.12s; }
[data-bj-stage="2"] .bj-panel[data-bj-panel="2"] .bj-field:nth-child(4){ animation-delay:.18s; }
@keyframes bj-rise{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
.bj-autofilled{ animation:bj-flash 1.4s ease; }
@keyframes bj-flash{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--bj-ok) 70%,transparent);} 60%{ box-shadow:0 0 0 6px transparent; } }

/* ───────── Botao Finalizar (.bj-cta) ─────────
 * Chamativo de proposito: maior, gradiente animado, halo pulsante, brilho varrendo, icone/seta em movimento,
 * "balanço" de atencao a cada poucos segundos, faiscas no clique e entrada do carrinho deslizando. */
.bj-cta{
  --bj-light: color-mix(in srgb, var(--bj-accent) 82%, #fff);
  --bj-idle: bj-halo 1.7s ease-out infinite, bj-grad 3.2s ease-in-out infinite alternate, bj-wiggle 5s ease-in-out 2s infinite;
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  border:0; color:#fff; cursor:pointer; white-space:nowrap; font-family:inherit;
  font-weight:900; font-size:1.1rem; letter-spacing:.3px; text-shadow:0 1px 2px rgba(0,0,0,.35);
  padding:.95rem 1.9rem; min-height:60px; border-radius:18px;
  background-image:linear-gradient(110deg,var(--bj-accent-2) 0%,var(--bj-accent) 30%,var(--bj-light) 50%,var(--bj-accent) 70%,var(--bj-accent-2) 100%) !important;
  background-size:240% 100% !important; background-color:var(--bj-accent) !important;
  box-shadow:0 12px 30px color-mix(in srgb,var(--bj-accent) 55%,transparent), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(0,0,0,.14);
  transition:transform .15s var(--bj-ease),filter .2s ease,opacity .2s ease;
}
.bj-cta:not(:disabled){ animation:var(--bj-idle); }
.bj-cta:disabled{ filter:grayscale(.55) opacity(.55); box-shadow:none; cursor:not-allowed; animation:none; }
.bj-cta:not(:disabled):hover{ transform:translateY(-3px) scale(1.04); filter:brightness(1.1) saturate(1.1); animation-play-state:running; }
.bj-cta:not(:disabled):active{ transform:translateY(2px) scale(.95); filter:brightness(.95); transition-duration:.06s; }
.bj-cta:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.bj-cta > .bi{ font-size:1.3em; display:inline-block; animation:bj-icon 1.5s ease-in-out infinite; }
.bj-cta > .bj-arrow{ animation:bj-nudge 1.1s ease-in-out infinite; }
.bj-cta:disabled > .bi{ animation:none; }

.bj-cta::before{ /* brilho que varre o botao */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.55) 50%,transparent 72%);
  transform:translateX(-130%); animation:bj-shine 2.4s ease-in-out .6s infinite;
}
.bj-cta:disabled::before,.bj-cta.is-busy::before{ animation:none; opacity:0; }

@keyframes bj-halo{ /* halo que expande e some (nao move o botao) */
  0%{ box-shadow:0 12px 30px color-mix(in srgb,var(--bj-accent) 55%,transparent), 0 0 0 0 color-mix(in srgb,var(--bj-accent) 70%,transparent), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(0,0,0,.14); }
  70%,100%{ box-shadow:0 12px 30px color-mix(in srgb,var(--bj-accent) 55%,transparent), 0 0 0 20px transparent, inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(0,0,0,.14); }
}
@keyframes bj-grad{ from{ background-position:0% 50%; } to{ background-position:100% 50%; } }
@keyframes bj-shine{ 0%,45%{ transform:translateX(-130%);} 100%{ transform:translateX(130%);} }
@keyframes bj-wiggle{ /* chama atencao: parado a maior parte do tempo, "sacode" rapidinho no fim */
  0%,86%,100%{ transform:none; }
  89%{ transform:rotate(-2.2deg) scale(1.06); } 92%{ transform:rotate(2.2deg) scale(1.06); }
  95%{ transform:rotate(-1.2deg) scale(1.03); } 98%{ transform:rotate(.8deg); }
}
@keyframes bj-icon{ 0%,100%{ transform:translateY(0) rotate(0);} 50%{ transform:translateY(-3px) rotate(-8deg);} }
@keyframes bj-nudge{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(6px);} }

.bj-cta.bj-ready{ animation:bj-pop .7s var(--bj-ease), var(--bj-idle); } /* JS: quando o carrinho passa a ter itens */
@keyframes bj-pop{
  0%{ transform:scale(.8) rotate(-4deg); }
  45%{ transform:scale(1.14) rotate(2deg); }
  70%{ transform:scale(.97); }
  100%{ transform:scale(1); }
}

.bj-ripple{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  width:12px; height:12px; margin:-6px 0 0 -6px; background:rgba(255,255,255,.6);
  transform:scale(0); animation:bj-ripple .6s ease-out forwards;
}
@keyframes bj-ripple{ to{ transform:scale(38); opacity:0; } }

.bj-spark{ /* faiscas no clique (JS) */
  position:fixed; z-index:2100; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  pointer-events:none; background:var(--c,#ffd166); box-shadow:0 0 8px var(--c,#ffd166);
  animation:bj-spark .65s cubic-bezier(.1,.7,.3,1) forwards;
}
@keyframes bj-spark{ to{ transform:translate(var(--dx),var(--dy)) scale(.2); opacity:0; } }

.bj-cta.is-busy{ pointer-events:none; animation:bj-busy 1s ease-in-out infinite; }
@keyframes bj-busy{ 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.18);} }
.bj-cta.is-busy > .bi{ display:none; }
.bj-spin{
  width:1.15em; height:1.15em; border-radius:50%;
  border:3px solid rgba(255,255,255,.35); border-top-color:#fff; animation:bj-rot .7s linear infinite;
}
@keyframes bj-rot{ to{ transform:rotate(360deg);} }

/* barra do carrinho (rapidinhas): entra deslizando e ganha halo na cor do tema */
#bottomCart{ animation:bj-slide-up .5s var(--bj-ease); }
#bottomCart .cart-box{
  border-color:color-mix(in srgb,var(--bj-accent) 65%,#111834) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 34px color-mix(in srgb,var(--bj-accent) 28%,transparent);
}
@keyframes bj-slide-up{ from{ transform:translateY(46px); opacity:0; } to{ transform:none; opacity:1; } }

@media (max-width:480px){
  .bj-cta{ padding:.85rem 1.2rem; font-size:1.02rem; min-height:54px; }
}

/* ───────── Overlay de conclusao ───────── */
.bj-overlay{
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:1rem;
  background:rgba(4,7,14,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transition:opacity .25s ease,visibility 0s linear .25s;
}
.bj-overlay.is-on{ opacity:1; visibility:visible; transition:opacity .25s ease; }
.bj-overlay-card{
  width:min(92vw,380px); text-align:center; padding:1.6rem 1.4rem;
  background:linear-gradient(180deg,#131a29,#0d121e); color:#fff;
  border:1px solid rgba(255,255,255,.12); border-radius:22px; box-shadow:0 30px 80px rgba(0,0,0,.55);
  transform:translateY(14px) scale(.96); transition:transform .4s var(--bj-ease);
}
.bj-overlay.is-on .bj-overlay-card{ transform:none; }
.bj-ring{
  width:76px; height:76px; margin:.2rem auto 1rem; border-radius:50%; position:relative;
  background:conic-gradient(var(--bj-accent),var(--bj-accent-2),transparent 70%); animation:bj-rot 1.1s linear infinite;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
}
.bj-overlay-title{ font-weight:800; font-size:1.1rem; margin-bottom:.25rem; }
.bj-overlay-msg{ color:rgba(255,255,255,.65); font-size:.9rem; min-height:1.3em; transition:opacity .25s ease; }
.bj-overlay .bj-steps{ margin:1.1rem 0 0; }
.bj-overlay-close{ margin-top:1rem; display:none; }
.bj-overlay.is-slow .bj-overlay-close{ display:inline-block; }

/* ───────── Acessibilidade: "reduzir movimento" ─────────
 * O botao continua chamativo por cor (gradiente) e halo pulsante — nao deslocam nada.
 * So o movimento espacial (balanço, icone/seta, brilho varrendo, pop, faiscas, ripple) e desligado. */
@media (prefers-reduced-motion: reduce){
  .bj-cta{ --bj-idle: bj-halo 2.2s ease-out infinite, bj-grad 5s ease-in-out infinite alternate; }
  .bj-cta::before,.bj-cta > .bi,.bj-cta > .bj-arrow,.bj-ripple,.bj-spark,.bj-shake,
  [data-bj-stage="2"] .bj-panel[data-bj-panel="2"] .bj-field,#bottomCart{ animation:none; }
  .bj-cta.bj-ready{ animation:var(--bj-idle); }
  .bj-cta,.bj-panel,.bj-overlay-card,.bj-dot{ transition-duration:.01ms !important; }
  .bj-cta:not(:disabled):hover{ transform:none; }
  .bj-ring{ animation-duration:2.4s; }
}

/* ───────── Modal "Identifique-se para pagar" (rapidinha) ─────────
 * Escopo: .bj-modal. Espacamento consistente, captcha na largura toda, consentimento em cartao,
 * aviso de privacidade discreto e rodape com Cancelar e CTA da mesma altura. */
.bj-modal .modal-dialog{ max-width:480px; margin:.75rem auto; }
.bj-modal .modal-content{
  background:#12161f; border:1px solid rgba(255,255,255,.1);
  border-radius:22px; box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.bj-modal .modal-header{ padding:1.15rem 1.4rem .35rem; align-items:center; }
.bj-modal .modal-title{ display:flex; align-items:center; gap:.55rem; font-size:1.12rem; font-weight:800; }
.bj-modal .modal-title .bi{ color:var(--bj-accent); font-size:1.25rem; }
.bj-modal .modal-body{ padding:.5rem 1.4rem 1rem; }
.bj-modal .bj-steps{ margin:.25rem 0 1.3rem; padding:0 .25rem; }

.bj-modal .form-label{ display:block; margin:0 0 .5rem; font-size:.95rem; font-weight:700; color:#fff; }
.bj-modal .form-control{
  background:#0c1018; color:#fff; border:1px solid rgba(255,255,255,.14); border-radius:14px;
}
.bj-modal .form-control:focus{
  border-color:var(--bj-accent); background:#0c1018; color:#fff;
  box-shadow:0 0 0 .2rem color-mix(in srgb,var(--bj-accent) 25%,transparent);
}
.bj-modal .form-control::placeholder{ color:rgba(255,255,255,.35); }
.bj-modal #buyer_cpf{ height:56px; padding:0 1rem; }
.bj-modal .form-text{ margin:.55rem 0 1rem !important; font-size:.85rem; color:rgba(255,255,255,.55); }
.bj-modal .bj-status{ margin-top:.45rem; min-height:0; }
.bj-modal .bj-status:empty{ display:none; }

.bj-modal .bj-captcha{ margin:0 0 1rem; min-height:65px; }
.bj-modal .bj-captcha .cf-turnstile{ width:100%; }

.bj-modal .bj-consent{
  display:flex; align-items:flex-start; gap:.75rem; margin:0 0 .9rem; padding:.85rem .95rem;
  border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(255,255,255,.04);
}
.bj-modal .bj-consent .form-check-input{ float:none; flex:none; margin:.1rem 0 0; width:1.15rem; height:1.15rem; }
.bj-modal .bj-consent .form-check-label{ font-size:.9rem; line-height:1.35; color:rgba(255,255,255,.88); }

.bj-modal .bj-note{
  display:flex; align-items:flex-start; gap:.6rem; margin:0; padding:0 .1rem;
  font-size:.78rem; line-height:1.4; color:rgba(255,255,255,.55);
}
.bj-modal .bj-note .bi{ flex:none; margin-top:.1rem; font-size:.95rem; color:var(--bj-accent); }
.bj-modal .bj-note.is-warn .bi{ color:#fbbf24; }
.bj-modal .bj-note b{ color:rgba(255,255,255,.8); }

.bj-modal .modal-footer{ padding:.25rem 1.4rem 1.35rem; gap:.75rem; flex-wrap:nowrap; }
.bj-modal .modal-footer > *{ margin:0; }
.bj-modal .modal-footer .btn-outline-light{
  min-height:56px; padding:0 1.1rem; border-radius:16px; white-space:nowrap;
  border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.8); font-weight:600;
}
.bj-modal .modal-footer .bj-cta{ flex:1; min-height:56px; padding:.7rem 1rem; font-size:1.02rem; }
@media (max-width:400px){
  .bj-modal .modal-header,.bj-modal .modal-body{ padding-left:1rem; padding-right:1rem; }
  .bj-modal .modal-footer{ padding:.25rem 1rem 1.1rem; }
}
.bj-banner:empty{ display:none; }