/* ==========================================================================
   Cadastro (/assine) no visual novo
   Carregado depois do <style> embutido do assine.html e do styles-assine.css. O prefixo .wm-assine
   (classe do body) dá a especificidade para valer sobre as regras antigas; os tokens vêm do novo-visual.css.
   Fundos chapados, roxo só como destaque, uma fonte, botões com a mesma curva e o mesmo "aperto" da home.
   ========================================================================== */

body.wm-assine {
  font-family: var(--wm-font);
  background: var(--wm-bg-soft);
  color: var(--wm-text);
  -webkit-font-smoothing: antialiased;
}
body.wm-assine::before, body.wm-assine::after { display: none; }
.wm-assine .step-title, .wm-assine h1, .wm-assine h2, .wm-assine h3, .wm-assine h4, .wm-assine h5, .wm-assine h6 { font-family: var(--wm-font); }
.wm-assine .emoji { display: none; }

/* ---------- Cabeçalho enxuto ---------- */
.wm-assine-header { position: relative; z-index: 2; background: var(--wm-bg); border-bottom: 1px solid var(--wm-border); }
.wm-assine-header .wm-container { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.wm-assine-header .wm-btn { margin-left: auto; }
.wm-assine-seguro { display: none; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--wm-text-muted); }
@media (min-width: 640px) { .wm-assine-seguro { display: inline-flex; } }

/* ---------- Caixa do cadastro ---------- */
.wm-assine .wizard-container {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px;
  min-height: 0;
  display: block;
  background: var(--wm-bg);
  border: 1px solid var(--wm-border);
  border-radius: var(--wm-r-3xl);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (min-width: 640px) { .wm-assine .wizard-container { padding: 40px; } }

.wm-assine .progress-bar-container { height: 4px; margin-bottom: 12px; background: var(--wm-border); border-radius: var(--wm-r-full); }
.wm-assine .progress-fill { background: var(--wm-accent); box-shadow: none; border-radius: inherit; transition: width 300ms var(--wm-ease); }
.wm-assine .wm-etapa {
  display: flex; justify-content: space-between; gap: 16px;
  margin: 0 0 24px;
  font-size: 14px; line-height: 20px; font-weight: 600; color: var(--wm-accent);
  font-variant-numeric: tabular-nums;
}
.wm-assine .wm-etapa span + span { color: var(--wm-text-muted); font-weight: 500; }

.wm-assine .step-title {
  margin-bottom: 8px;
  font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--wm-text);
  background: none;
  -webkit-text-fill-color: currentColor;
  text-wrap: balance;
}
.wm-assine .step-title:focus { outline: none; }
@media (min-width: 640px) { .wm-assine .step-title { font-size: 30px; line-height: 36px; } }
.wm-assine .step-desc { margin-bottom: 24px; font-size: 16px; line-height: 24px; color: var(--wm-text-muted); text-wrap: pretty; }

/* Troca de passo: entra com opacidade e 8px, curta (animate.css fazia 1s) */
@keyframes wm-passo-entra { from { opacity: 0; transform: translateY(8px); } }
.wm-assine .step.animate__animated.animate__fadeInUp { animation: wm-passo-entra 250ms var(--wm-ease) both; }
@media (prefers-reduced-motion: reduce) {
  @keyframes wm-passo-aparece { from { opacity: 0; } }
  .wm-assine .step.animate__animated.animate__fadeInUp { animation: wm-passo-aparece 150ms var(--wm-ease) both; }
}

/* ---------- Campos ---------- */
.wm-assine .form-control, .wm-assine .form-select {
  border: 1px solid var(--wm-border-strong);
  border-radius: var(--wm-r-lg);
  font-size: 16px;
  color: var(--wm-text);
  transition: border-color var(--wm-dur-ui) var(--wm-ease), box-shadow var(--wm-dur-ui) var(--wm-ease);
}
.wm-assine .form-control:focus, .wm-assine .form-select:focus { border-color: var(--wm-accent); box-shadow: 0 0 0 1px var(--wm-accent); }
.wm-assine .form-floating > label { color: var(--wm-text-muted); font-weight: 400; }
.wm-assine #pesquisa-endereco { border-color: var(--wm-border-strong) !important; }
.wm-assine label[for="pesquisa-endereco"] i { color: var(--wm-accent) !important; }
.wm-assine .form-check-input:checked { background-color: var(--wm-accent); border-color: var(--wm-accent); }
.wm-assine .form-check-input:focus { box-shadow: 0 0 0 2px var(--wm-accent-soft); border-color: var(--wm-accent); }
.wm-assine .btn-outline-primary { border-color: var(--wm-border-strong); color: var(--wm-text); font-weight: 600; }
.wm-assine .btn-outline-primary:hover, .wm-assine .btn-outline-primary.active { background: var(--wm-accent); border-color: var(--wm-accent); color: #FFFFFF; }

/* ---------- Botões ---------- */
.wm-assine .btn-next {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px;
  margin-bottom: 8px;
  padding: 12px 24px;
  border: 0; border-radius: var(--wm-r-lg);
  background: var(--wm-accent); color: #FFFFFF;
  font-size: 16px; line-height: 24px; font-weight: 600;
  box-shadow: none;
  transition: background-color var(--wm-dur-ui) var(--wm-ease), transform var(--wm-dur-press) var(--wm-ease);
}
.wm-assine .btn-next:active:not(:disabled) { transform: scale(0.97); }
.wm-assine .btn-next:disabled, .wm-assine .btn-next[disabled] { background: #B9A6CC !important; opacity: 1; cursor: not-allowed; }
.wm-assine .btn-prev {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px;
  padding: 12px 24px;
  border: 0; border-radius: var(--wm-r-lg);
  background: transparent; color: var(--wm-text-muted);
  font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none;
  transition: color var(--wm-dur-ui) var(--wm-ease), background-color var(--wm-dur-ui) var(--wm-ease);
}
@media (hover: hover) and (pointer: fine) {
  .wm-assine .btn-next:hover:not(:disabled) { background: var(--wm-accent-hover); transform: none; box-shadow: none; }
  .wm-assine .btn-prev:hover { color: var(--wm-text); background: var(--wm-bg-soft); border-color: transparent; }
}
.wm-assine #btn-whats-fallback { border-radius: var(--wm-r-lg) !important; box-shadow: none !important; }

/* Pessoa física ou empresa: controle segmentado */
.wm-assine .doc-toggle-btn {
  min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--wm-border-strong); border-radius: var(--wm-r-full);
  background: var(--wm-bg); color: var(--wm-text-muted);
  font-size: 14px; line-height: 20px; font-weight: 600;
  box-shadow: none;
  transition: background-color var(--wm-dur-ui) var(--wm-ease), color var(--wm-dur-ui) var(--wm-ease), border-color var(--wm-dur-ui) var(--wm-ease);
}
.wm-assine .doc-toggle-btn.active { background: var(--wm-accent); border-color: var(--wm-accent); color: #FFFFFF; box-shadow: none; }

/* ---------- Planos: lista de escolha, um por linha, com marcador de seleção ---------- */
.wm-assine #grid-planos-pf, .wm-assine #grid-planos-cnpj { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 8px; }
.wm-assine .plan-box {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start;
  padding: 20px 16px 16px 56px;
  text-align: left;
  background: var(--wm-bg);
  border: 1px solid var(--wm-border-strong);
  border-radius: var(--wm-r-2xl);
  box-shadow: none;
  transform: none;
  transition: border-color var(--wm-dur-ui) var(--wm-ease), background-color var(--wm-dur-ui) var(--wm-ease), box-shadow var(--wm-dur-ui) var(--wm-ease);
}
.wm-assine .plan-box.featured, .wm-assine .plan-box.featured:hover { transform: none; background: var(--wm-bg); border: 1px solid var(--wm-border-strong); box-shadow: none; }
.wm-assine .plan-box::before {
  content: ""; position: absolute; left: 16px; top: 22px;
  width: 24px; height: 24px; border-radius: var(--wm-r-full);
  border: 2px solid var(--wm-border-strong); background: var(--wm-bg);
  font-family: inherit;
  transition: border-color var(--wm-dur-ui) var(--wm-ease), box-shadow var(--wm-dur-ui) var(--wm-ease), background-color var(--wm-dur-ui) var(--wm-ease);
}
.wm-assine .plan-box.active, .wm-assine .plan-box.featured.active {
  border-color: var(--wm-accent); background: var(--wm-accent-soft); box-shadow: 0 0 0 1px var(--wm-accent);
}
.wm-assine .plan-box.active::before { content: ""; border-color: var(--wm-accent); background: var(--wm-accent); box-shadow: inset 0 0 0 4px #FFFFFF; color: transparent; font-size: 0; top: 22px; right: auto; }
@media (hover: hover) and (pointer: fine) { .wm-assine .plan-box:not(.active):hover { border-color: var(--wm-accent); transform: none; box-shadow: none; } }
.wm-assine .plan-box > .badge-destaque {
  position: absolute; top: -12px; left: 56px; transform: none;
  padding: 4px 12px; border-radius: var(--wm-r-full);
  background: var(--wm-accent); color: #FFFFFF;
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0; text-transform: none;
  box-shadow: none; white-space: nowrap;
}
.wm-assine .plan-box > .plan-title { grid-column: 1; grid-row: 1; margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--wm-text); font-variant-numeric: tabular-nums; }
.wm-assine .plan-box > p { grid-column: 1; grid-row: 2; margin: 0; font-size: 14px; line-height: 20px; color: var(--wm-text-muted) !important; }
.wm-assine .plan-box > .price-highlight { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; text-align: right; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--wm-text); font-variant-numeric: tabular-nums; }
.wm-assine .plan-box > .price-highlight small { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--wm-text-muted); }
.wm-assine .plan-box > .plan-features { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; padding: 0; }
.wm-assine .plan-features li { margin: 0; font-size: 14px; line-height: 20px; color: var(--wm-text-muted); }
.wm-assine .plan-features li i { width: auto; height: auto; margin-right: 4px; background: none; color: var(--wm-accent); font-size: 12px; border-radius: 0; }

.wm-assine .wm-nota-instalacao {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 16px 0 0;
  font-size: 12px; line-height: 16px; color: var(--wm-text-muted);
}
.wm-assine .wm-nota-instalacao .wm-i { margin-top: 0; font-size: 16px; }

/* ---------- Vencimento ---------- */
.wm-assine #vencimento-section > p { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--wm-text) !important; margin-bottom: 8px !important; }
.wm-assine .vencimento-carousel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; overflow: visible; }
.wm-assine .vencimento-item {
  width: auto; min-width: 0; height: 48px;
  border: 1px solid var(--wm-border-strong); border-radius: var(--wm-r-xl);
  background: var(--wm-bg); color: var(--wm-text);
  font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: none; transform: none;
  transition: border-color var(--wm-dur-ui) var(--wm-ease), background-color var(--wm-dur-ui) var(--wm-ease), color var(--wm-dur-ui) var(--wm-ease), transform var(--wm-dur-press) var(--wm-ease);
}
.wm-assine .vencimento-item:active { transform: scale(0.97); }
.wm-assine .vencimento-item.active { background: var(--wm-accent); border-color: var(--wm-accent); color: #FFFFFF; box-shadow: none; transform: none; }
@media (hover: hover) and (pointer: fine) { .wm-assine .vencimento-item:not(.active):hover { border-color: var(--wm-accent); transform: none; } }

/* ---------- Cobertura, condomínio, instalação e resultado ---------- */
.wm-assine #resultado-cobertura-ok > i, .wm-assine #resultado-cobertura-manual > i { font-size: 48px !important; }
.wm-assine #resultado-cobertura-ok > i { color: var(--wm-ok) !important; }
.wm-assine .condominio-card { background: var(--wm-accent-soft); border: 1px solid var(--wm-border); border-radius: var(--wm-r-2xl); box-shadow: none; }
.wm-assine .instalacao-card {
  margin-bottom: 12px; padding: 16px;
  border: 1px solid var(--wm-border-strong); border-radius: var(--wm-r-2xl);
  background: var(--wm-bg); box-shadow: none; transform: none;
  transition: border-color var(--wm-dur-ui) var(--wm-ease), background-color var(--wm-dur-ui) var(--wm-ease);
}
.wm-assine .instalacao-card.active { border-color: var(--wm-accent); background: var(--wm-accent-soft); box-shadow: 0 0 0 1px var(--wm-accent); }
.wm-assine .instalacao-card .text-primary { color: var(--wm-text) !important; }
.wm-assine .text-primary { color: var(--wm-accent) !important; }
.wm-assine .rounded-4 { border-radius: var(--wm-r-2xl) !important; }

/* ---------- Carregamento ---------- */
.wm-assine #spinner-overlay { background: rgba(250, 248, 253, 0.92); }
.wm-assine #spinner-overlay .spinner-card { border: 1px solid var(--wm-border); border-radius: var(--wm-r-3xl) !important; box-shadow: var(--wm-shadow-lg) !important; animation: none; }
.wm-assine #spinner-bar { background: var(--wm-accent) !important; }
.wm-assine #spinner-title { color: var(--wm-text) !important; }

/* Uma fonte só: o <style> antigo pedia Space Grotesk e Inter, que não são mais carregadas */
.wm-assine .plan-title, .wm-assine .price-highlight, .wm-assine .badge-destaque, .wm-assine .doc-toggle-btn,
.wm-assine .btn-next, .wm-assine .btn-prev, .wm-assine .form-control, .wm-assine .form-select, .wm-assine .modal-content { font-family: var(--wm-font); }
/* A seleção do plano é o marcador à esquerda; o "check" antigo do canto sai */
.wm-assine .plan-box.active::after { display: none; }
.wm-assine-header .wm-logo { color: var(--wm-text); }
.wm-assine .doc-toggle-btn { white-space: nowrap; padding-inline: 12px; }