/* Signing up by buying a plan: details -> payment -> password.
   Layered on chatbiq-auth.css, whose palette and form styles these pages
   inherit; only the pieces those pages do not have live here. */

.co-steps { display: flex; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: co-step; }
.co-steps li { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding-top: 10px; border-top: 3px solid #e3e9f4; color: #8a94ab; font-size: 13px; font-weight: 600; counter-increment: co-step; }
.co-steps li::before { content: counter(co-step); flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eef2f9; color: #6b7690; font-size: 12px; font-weight: 700; }
.co-steps li.is-done { border-top-color: #1159e8; color: #33405d; }
.co-steps li.is-done::before { content: "\2713"; background: #1159e8; color: #fff; }
.co-steps li.is-current { border-top-color: #1159e8; color: #182243; }
.co-steps li.is-current::before { background: #e5eeff; color: #1159e8; }

.co-summary { margin: 0 0 22px; padding: 16px 18px; border: 1px solid #d5e3ff; border-radius: 12px; background: #f6f9ff; }
.co-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.co-summary-row + .co-summary-row { margin-top: 6px; }
.co-summary-plan { color: #182243; font-size: 16px; font-weight: 700; }
.co-summary-price { color: #182243; font-size: 22px; font-weight: 800; white-space: nowrap; }
.co-summary-price small { color: #68738c; font-size: 13px; font-weight: 600; }
.co-summary-meta { color: #68738c; font-size: 13px; }
.co-summary a { color: #155eea; font-size: 13px; font-weight: 600; }
.co-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #dfe8fb; font-size: 14px; }
.co-summary dt { color: #68738c; }
.co-summary dd { margin: 0; color: #26314b; font-weight: 600; overflow-wrap: anywhere; }

.co-notice { margin: 0 0 18px; padding: 12px 14px; border-radius: 9px; background: #fff6e5; color: #7a4b00; font-size: 14px; }
.co-fineprint { margin: 14px 0 0; color: #7a849b; font-size: 13px; line-height: 1.5; text-align: center; }
.co-verified { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 22px; padding: 14px 16px; border-radius: 12px; background: #e9f8ef; color: #1d5b36; font-size: 14px; }
.co-verified svg { flex: none; width: 20px; height: 20px; color: #19924a; }
.auth-form button[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }

@media (max-width: 480px) {
  .co-steps li { font-size: 12px; }
}