/* Signup wizard — styles scoped to the multi-step self-service signup flow.
   Referenced only by app/Views/marketing/signup/*.php; app.css owns everything
   else on the marketing site. */

.sw-wrap { max-width: 760px; margin: 0 auto; padding: 40px 20px 64px; }

/* Stepper */
.sw-steps { display: flex; align-items: center; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.sw-step { display: flex; align-items: center; gap: 8px; flex: 1; }
.sw-step .sw-dot {
  width: 28px; height: 28px; border-radius: 999px; flex: 0 0 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; background: #e6e8ee; color: #6b7280;
}
.sw-step.on .sw-dot { background: #6d28d9; color: #fff; }
.sw-step.done .sw-dot { background: #22c55e; color: #fff; }
.sw-step .sw-label { font-size: 12.5px; color: #6b7280; white-space: nowrap; }
.sw-step.on .sw-label { color: #111827; font-weight: 600; }
.sw-step .sw-bar { flex: 1; height: 2px; background: #e6e8ee; border-radius: 2px; }
.sw-step.done .sw-bar { background: #22c55e; }
@media (max-width: 640px) { .sw-step .sw-label { display: none; } }

.sw-card { background: #fff; border: 1px solid #e6e8ee; border-radius: 16px; padding: 28px; }
.sw-h1 { font-size: 24px; margin: 0 0 6px; }
.sw-sub { color: #6b7280; margin: 0 0 22px; font-size: 14px; }
.sw-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.sw-actions .sw-spacer { flex: 1; }

/* Template / option cards */
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.sw-pick { position: relative; }
.sw-pick input { position: absolute; opacity: 0; pointer-events: none; }
.sw-pick label {
  display: block; cursor: pointer; border: 2px solid #e6e8ee; border-radius: 14px;
  overflow: hidden; transition: border-color .12s, box-shadow .12s; background: #fff;
}
.sw-pick input:checked + label { border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,.14); }
.sw-pick input:focus-visible + label { border-color: #6d28d9; }
.sw-pick .sw-pick-body { padding: 10px 12px; }
.sw-pick .sw-pick-name { font-weight: 700; font-size: 14px; }
.sw-pick .sw-pick-desc { color: #6b7280; font-size: 12px; margin-top: 2px; }

/* Template mini mockups */
.sw-thumb { height: 92px; display: flex; flex-direction: column; }
.sw-thumb .t-hero { flex: 1; display: flex; align-items: center; justify-content: center; }
.sw-thumb .t-bar { height: 12px; }
.sw-thumb .t-pill { width: 46%; height: 8px; border-radius: 4px; background: rgba(255,255,255,.85); }
.sw-thumb .t-line { height: 6px; border-radius: 3px; }
/* classic */
.tpl-classic .t-hero { background: #f3f4f6; flex-direction: column; gap: 6px; }
.tpl-classic .t-bar  { background: #111827; }
.tpl-classic .t-pill { background: #111827; }
.tpl-classic .t-line { width: 60%; background: #c7cad1; }
/* bold */
.tpl-bold .t-hero { background: #111827; }
.tpl-bold .t-bar  { background: #f59e0b; }
.tpl-bold .t-pill { background: #f59e0b; }
/* fresh */
.tpl-fresh .t-hero { background: linear-gradient(135deg, #34d399, #10b981); }
.tpl-fresh .t-bar  { background: #065f46; }
/* elegant */
.tpl-elegant .t-hero { background: #faf7f2; }
.tpl-elegant .t-bar  { background: #1f2937; }
.tpl-elegant .t-pill { background: #b08968; }
/* street */
.tpl-street .t-hero { background: repeating-linear-gradient(45deg, #18181b, #18181b 8px, #27272a 8px, #27272a 16px); }
.tpl-street .t-bar  { background: #ef4444; }
.tpl-street .t-pill { background: #ef4444; }
/* skip */
.tpl-skip .t-hero { background: #f9fafb; color: #9ca3af; font-size: 22px; }

/* Plan cards */
.sw-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.sw-plan label { display: block; cursor: pointer; border: 2px solid #e6e8ee; border-radius: 14px; padding: 18px; height: 100%; }
.sw-plan input { position: absolute; opacity: 0; pointer-events: none; }
.sw-plan input:checked + label { border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,.14); }
.sw-plan .sw-plan-name { font-weight: 700; font-size: 16px; }
.sw-plan .sw-plan-price { font-size: 22px; font-weight: 800; margin: 6px 0 2px; }
.sw-plan .sw-plan-price span { font-size: 12px; font-weight: 500; color: #6b7280; }
.sw-plan ul { list-style: none; padding: 0; margin: 12px 0 0; }
.sw-plan li { font-size: 13px; color: #374151; padding: 3px 0 3px 18px; position: relative; }
.sw-plan li::before { content: "✓"; position: absolute; left: 0; color: #22c55e; font-weight: 700; }
.sw-badge { display: inline-block; font-size: 11px; font-weight: 700; color: #6d28d9; background: #ede9fe; border-radius: 999px; padding: 2px 8px; margin-left: 6px; }

.sw-radio-row { display: flex; flex-direction: column; gap: 12px; }
.sw-radio-row label { display: flex; gap: 10px; align-items: flex-start; border: 2px solid #e6e8ee; border-radius: 12px; padding: 14px; cursor: pointer; }
.sw-radio-row input { margin-top: 3px; }
.sw-radio-row input:checked ~ * .sw-opt-name,
.sw-radio-row label:has(input:checked) { border-color: #6d28d9; }
.sw-opt-name { font-weight: 600; }
.sw-opt-desc { color: #6b7280; font-size: 13px; }

/* Paid-plan trial hint on the signup plan cards */
.sw-plan-trial{margin-top:6px;font-size:12px;font-weight:600;color:#16a34a}