/* =========================================================
   Black Pro · pop-up de inscrição (#bp-inscricao)
   Markup: overlay nativo do Kodety (data-kodety-overlay="modal").
   No site publicado quem abre/fecha é o runtime do Kodety; fora
   dele (preview local) o js/main.js faz o mesmo papel.
   Sem !important: o Kodety não permite.
   ========================================================= */

.bpm { position: relative; /* kodety-display-restore:%7B%22version%22%3A1%2C%22previousValue%22%3A%22block%22%2C%22previousImportant%22%3Afalse%2C%22fallbackDisplay%22%3A%22block%22%2C%22hiddenImportant%22%3Afalse%7D */ display: none; }

/* fundo escurecido */
.bpm__backdrop {
  position: fixed; inset: 0; z-index: 9998;
  width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  background: rgba(9, 11, 11, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: default;
}

/* janela */
.bpm__surface {
  position: fixed; z-index: 9999; inset: auto;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  margin: 0; padding: 0; box-sizing: border-box; overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--borda-vidro); border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, var(--painel-topo) 0%, var(--painel-meio) 38%, var(--painel-base) 100%);
  color: var(--creme);
  box-shadow: var(--shadow-menu);
  font-family: var(--font-body);
  outline: none;
}
.bpm__surface[data-state="open"] { animation: bpm-in 380ms var(--ease-out) both; }
.bpm__backdrop[data-state="open"] { animation: bpm-fade 260ms ease-out both; }
@keyframes bpm-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(.97); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes bpm-fade { from { opacity: 0; } to { opacity: 1; } }

/* topo: logo + fechar */
.bpm__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 32px; border-bottom: 1px solid var(--borda-fina);
}
.bpm__head .bp-logo { height: 30px; width: auto; display: block; }
.bpm__close {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; padding: 0; border-radius: var(--radius-full);
  border: 1px solid var(--borda-vidro); background: var(--vidro-suave); color: var(--creme);
  cursor: pointer; transition: background-color .2s ease, border-color .2s ease;
}
.bpm__close:hover { background: var(--vidro-hover); border-color: var(--borda-vidro-foco); }
.bpm__close:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.bpm__close svg { width: 20px; height: 20px; }

.bpm__body { display: grid; gap: 20px; padding: 28px 32px 32px; }

/* etapas 01 → 02 */
.bpm__steps {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none;
  color: var(--neutro-400); font-size: 15px; line-height: 1.2;
}
.bpm__steps li { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.bpm__steps li + li::before {
  content: ""; flex: none; width: clamp(24px, 12vw, 160px); height: 1px; margin-right: 2px;
  background: var(--borda-vidro);
}
.bpm__steps span {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-full);
  border: 1px solid var(--borda-vidro); font-size: 13px; font-variant-numeric: tabular-nums;
}
.bpm__steps .is-current { color: var(--creme); }
.bpm__steps .is-current span { border-color: var(--borda-lima); background: var(--tinta-lima-forte); color: var(--lima); }

.bpm__title {
  margin: 4px 0 0; font-family: var(--font-display); font-weight: 400;
  font-size: min(28px, 5.8vw); line-height: 1.15; letter-spacing: -.01em; color: var(--creme);
  white-space: nowrap; /* título em uma linha só */
}
.bpm__title .bp-dim { color: var(--neutro-400); }
.bpm__text { margin: 0; color: var(--neutro-300); font-size: 17px; line-height: 1.6; }

/* formulário dentro do pop-up */
.bpm .bfc-kodety {
  --bfc-input-bg: rgba(250, 250, 250, .04);
  --bfc-input-border: var(--borda-vidro-foco);
  --bfc-label-color: var(--creme);
  --bfc-field-gap: 20px;
  --bfc-radius: 14px;
  --bfc-button-radius: var(--radius-sm);
  margin-top: 4px;
}
.bpm .bfc-kodety .bfc-field { gap: 10px; }
.bpm .bfc-kodety .bfc-field label { font-size: 15px; font-weight: 700; }
.bpm .bfc-kodety .bfc-input-shell > input,
.bpm .bfc-kodety .bfc-input-shell > .iti > input { min-height: 56px; font-size: 17px; }
.bpm .bfc-kodety .bfc-submit {
  position: relative; isolation: isolate;
  justify-content: space-between; gap: 16px; min-height: 60px; margin-top: 6px;
  padding: 16px 24px; font-size: 17px; text-align: left;
  /* mesma linha de luz dos botões .bp-btn (bundle.css + page.css) */
  border: 2px solid transparent;
  background:
    linear-gradient(171deg, var(--creme) 0%, var(--lima) 100%) padding-box,
    conic-gradient(from var(--bp-angle), transparent, rgba(224,251,172,0.8) 6%, var(--neutro-50) 9.6%, var(--neutro-50) 14.4%, rgba(224,251,172,0.8) 18%, transparent 24%) border-box;
  box-shadow: 1px 4px 20px 0 rgba(224,251,172,0.3);
  animation: bp-angle 3s linear infinite;
}
.bpm .bfc-kodety .bfc-submit:hover { filter: saturate(1.08) brightness(1.03); }
.bpm .bfc-kodety .bfc-submit::after {
  content: ""; flex: none; width: 22px; height: 22px; background: url("/wp-content/uploads/kodety/assets/img/arrow-01b9976203df.svg") center / contain no-repeat;
  transition: transform .25s var(--ease-out);
}
.bpm .bfc-kodety .bfc-submit:hover::after { transform: translateX(4px); }

.bpm__privacy {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  color: var(--neutro-400); font-size: 14px; line-height: 1.5;
}
.bpm__privacy img { flex: none; width: 18px; height: 18px; margin-top: 1px; }

@media (max-width: 480px) {
  .bpm__surface { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: var(--radius-xl); }
  .bpm__head { padding: 18px 20px; }
  .bpm__head .bp-logo { height: 24px; }
  .bpm__close { width: 42px; height: 42px; }
  .bpm__body { gap: 16px; padding: 22px 20px 24px; }
  .bpm__steps { font-size: 14px; gap: 8px; }
  .bpm__text { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .bpm__surface[data-state="open"], .bpm__backdrop[data-state="open"],
  .bpm .bfc-kodety .bfc-submit { animation: none; }
}