/* Primeiros passos (public/first-steps.js): the card of a new account in the bottom corner, a sheet on the phone. Tokens of public/ds/tokens.css. */
.first-steps {
  position: fixed;
  /* Above the support launcher (public/support-widget.css), which keeps the corner. */
  right: max(24px, env(safe-area-inset-right, 0px));
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  font-family: var(--font-texto, Manrope, sans-serif);
  color: var(--texto-forte, #f2f2f4);
}
.first-steps[data-collapsed="true"] { width: auto; }
.fs-card {
  display: grid;
  gap: var(--space-12, 12px);
  padding: var(--space-16, 16px);
  border-radius: var(--radius-16, 16px);
  background: linear-gradient(180deg, var(--casca-topo, #1d1d20), var(--casca-base, #121214));
  border: 1px solid var(--casca-filete, rgba(255,255,255,.07));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45), inset 0 1px 0 var(--casca-filete-topo, rgba(255,255,255,.22));
}
.fs-head { display: flex; align-items: center; gap: var(--space-8, 8px); }
.fs-head h2 { margin: 0; flex: 1; font: 600 1rem/1.2 var(--font-display, "Space Grotesk", sans-serif); }
.fs-count { font-size: .78rem; color: var(--texto-apoio, #9a9aa0); font-variant-numeric: tabular-nums; }
.fs-icon {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-8, 8px);
  background: transparent; color: var(--texto-apoio, #9a9aa0); cursor: pointer;
}
.fs-icon:hover { background: var(--modulo-hover-topo, rgba(255,255,255,.065)); color: var(--texto-forte, #f2f2f4); }
.fs-icon .icon svg, .fs-pill .icon svg, .fs-marker .icon svg { width: 16px; height: 16px; }
.fs-progress { height: 4px; border-radius: 2px; background: var(--poco, #0b0b0c); overflow: hidden; }
.fs-progress span { display: block; height: 100%; background: var(--lima, #d7ff3f); border-radius: 2px; transition: width .4s ease; }
.fs-lede { margin: 0; font-size: .86rem; color: var(--texto-apoio, #9a9aa0); }
.fs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8, 8px); }
.fs-step {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--space-12, 12px);
  padding: 10px var(--space-12, 12px); border-radius: var(--radius-12, 12px);
  background: var(--modulo-topo, rgba(255,255,255,.042));
}
.fs-step[data-state="done"] { opacity: .62; }
.fs-step[data-state="locked"] { opacity: .5; }
.fs-marker {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font: 600 .8rem/1 var(--font-display, "Space Grotesk", sans-serif);
  background: var(--tecla-base, #232327); color: var(--texto-apoio, #9a9aa0);
}
.fs-step[data-state="next"] .fs-marker { background: var(--lima-envio, rgba(215,255,63,.11)); color: var(--lima, #d7ff3f); box-shadow: inset 0 0 0 1px var(--lima-envio-borda, rgba(215,255,63,.4)); }
.fs-step[data-state="done"] .fs-marker { background: var(--lima, #d7ff3f); color: #0a0a0b; }
.fs-text { display: grid; gap: 2px; min-width: 0; }
.fs-text b { font-weight: 600; font-size: .9rem; }
.fs-text small { font-size: .78rem; color: var(--texto-apoio, #9a9aa0); }
.fs-free { font-style: normal; font-weight: 600; color: var(--lima, #d7ff3f); }
.fs-status { font-size: .74rem; color: var(--texto-apoio, #9a9aa0); }
.fs-go {
  border: 0; cursor: pointer; white-space: nowrap; padding: 8px 12px; border-radius: 999px;
  font: 600 .8rem/1 var(--font-texto, Manrope, sans-serif);
  background: var(--tecla-base, #232327); color: var(--texto-forte, #f2f2f4);
}
.fs-go:hover { background: var(--tecla-hover-base, #2a2a2f); }
.fs-go.is-next { background: var(--lima, #d7ff3f); color: #0a0a0b; }
.fs-go.is-next:hover { background: var(--lima-topo, #e8ff80); }
.fs-go:focus-visible, .fs-icon:focus-visible, .fs-pill:focus-visible { outline: 2px solid var(--anel-foco, #d7ff3f); outline-offset: 2px; }
.fs-pill {
  display: inline-flex; align-items: center; gap: var(--space-8, 8px); padding: 10px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--lima-envio-borda, rgba(215,255,63,.4)); color: var(--texto-forte, #f2f2f4);
  background: linear-gradient(180deg, var(--casca-topo, #1d1d20), var(--casca-base, #121214));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4); font: 600 .84rem/1 var(--font-texto, Manrope, sans-serif);
}
.fs-pill .icon { color: var(--lima, #d7ff3f); }
.fs-pill-count { color: var(--texto-apoio, #9a9aa0); font-variant-numeric: tabular-nums; }

/* The Gerar of the page the card opened: a lime halo until the person touches it (body[data-first-step], set by public/app.js). A halo and
   no balloon: the row above the button keeps its controls visible. */
body[data-first-step] #produto-cta .fk-cta:not([disabled]) {
  position: relative;
  box-shadow: 0 0 0 3px var(--lima-envio-borda, rgba(215,255,63,.4)), 0 0 24px var(--lima-brilho, rgba(215,255,63,.3));
}
@media (prefers-reduced-motion: no-preference) {
  body[data-first-step] #produto-cta .fk-cta:not([disabled]) { animation: fs-pulse 1.8s ease-in-out infinite; }
  @keyframes fs-pulse { 50% { box-shadow: 0 0 0 6px var(--lima-envio, rgba(215,255,63,.11)), 0 0 32px var(--lima-brilho, rgba(215,255,63,.3)); } }
}

@media (max-width: 760px) {
  .first-steps {
    left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(var(--mobile-tabbar, 72px) + 12px + env(safe-area-inset-bottom, 0px)); width: auto;
  }
  .first-steps[data-collapsed="true"] { left: auto; }
  .fs-step { grid-template-columns: 28px minmax(0, 1fr); }
  .fs-step > :last-child { grid-column: 2; justify-self: start; }
}