/* ==========================================================
   YOGERA — ONBOARDING PAGE-SPECIFIC STYLES
   Start Building wizard: role select, account creation,
   role-specific steps, pricing hand-off, payment vs
   no-payment confirmation, success, workspace provisioning.
   Depends on shared.css being loaded first (role-card,
   plan-card, field, checklist, progress-dots, etc. all live
   there so pricing.html and onboarding.html stay consistent).
   ========================================================== */

.cap-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.cap-chip{
  padding:9px 15px; border-radius:var(--radius-pill); border:1px solid var(--line); background:var(--bg-deep);
  font-size:12.5px; font-weight:600; color:var(--text-secondary); transition:all var(--dur-micro) var(--ease);
}
.cap-chip.is-active{ background:linear-gradient(135deg, var(--blue-soft), var(--purple-soft)); border-color:var(--blue-glow); color:var(--text-primary); }

.pay-methods{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; }
.pay-method{
  padding:18px; border-radius:var(--radius-md); border:1px solid var(--line); background:var(--bg-deep);
  text-align:left; cursor:pointer; transition:all var(--dur-micro) var(--ease);
}
.pay-method.is-selected{ border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); background:var(--surface-raised); }
.pay-method h5{ font-size:14px; font-weight:700; margin-bottom:4px; }
.pay-method p{ font-size:12.5px; color:var(--text-muted); }
@media (max-width:640px){ .pay-methods{ grid-template-columns:1fr; } }

.checkout-summary{ padding:20px; border-radius:var(--radius-md); border:1px solid var(--line); background:var(--bg-deep); margin-bottom:20px; }
.checkout-summary .checkout-summary-row{ display:flex; justify-content:space-between; font-size:13.5px; padding:6px 0; color:var(--text-secondary); }
.checkout-summary .checkout-summary-row.total{ border-top:1px solid var(--line); margin-top:8px; padding-top:12px; font-weight:700; color:var(--text-primary); font-size:15px; }

.eft-box{ display:none; padding:16px 18px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--line); font-size:13px; color:var(--text-secondary); line-height:1.7; margin-top:10px; }
.eft-box.is-visible{ display:block; }
.eft-ref{ font-family:var(--font-mono); font-weight:700; color:var(--blue); }

.tree-root-row{
  display:flex; align-items:center; gap:10px; padding:10px 0; font-size:14px; font-weight:600; color:var(--text-primary);
  border-bottom:1px solid var(--line); margin-bottom:8px;
}
.tree-root-row .add-btn{ margin-left:auto; }
.tree-line{ padding-left:0; }
.tree-node{ margin-top:2px; }
.tree-row{
  display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:var(--radius-sm);
  font-size:13.5px; color:var(--text-secondary); transition:background var(--dur-micro) var(--ease);
}
.tree-row:hover{ background:var(--surface-hover); }
.tree-row.lvl1{ margin-left:0; }
.tree-row.lvl2{ margin-left:24px; }
.tree-row.lvl3{ margin-left:48px; }
.tree-row.lvl4{ margin-left:72px; }
.tree-row .drag-handle{ color:var(--text-faint); cursor:grab; font-size:12px; }
.tree-row.is-dragging{ opacity:0.4; }
.tree-row .tree-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tree-row .tree-name-input{
  flex:1; min-width:0; background:var(--bg-deep); border:1px solid var(--blue); border-radius:6px;
  padding:5px 8px; font-size:13.5px; color:var(--text-primary); font-family:inherit;
}
.tree-row .tree-actions{ display:flex; align-items:center; gap:2px; flex-shrink:0; }
.tree-row .tree-icon-btn{
  width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:11.5px; transition:all var(--dur-micro) var(--ease);
}
.tree-row .tree-icon-btn:hover:not(:disabled){ background:var(--surface-hover); color:var(--text-primary); }
.tree-row .tree-icon-btn:disabled{ opacity:0.3; cursor:not-allowed; }
.tree-row .tree-icon-btn.danger:hover:not(:disabled){ color:var(--error); }
@media (max-width:640px){
  .tree-row{ flex-wrap:wrap; }
  .tree-row.lvl2{ margin-left:14px; }
  .tree-row.lvl3{ margin-left:24px; }
  .tree-row.lvl4{ margin-left:34px; }
  .tree-row .tree-name{ flex-basis:100%; white-space:normal; order:1; margin-top:2px; }
  .tree-row .tree-actions{ order:2; margin-left:auto; }
  .add-btn{ font-size:10.5px; padding:4px 8px; }
}
.add-btn{
  font-size:11.5px; font-weight:600; color:var(--blue); padding:5px 10px; border-radius:var(--radius-pill);
  border:1px solid var(--line-strong); white-space:nowrap; flex-shrink:0; transition:all var(--dur-micro) var(--ease);
}
.add-btn:hover{ background:var(--blue-soft); border-color:var(--blue-glow); }

.conditional-field{ display:none; }
.conditional-field.is-visible{ display:block; }