@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --ob-bg:#f5f7fb; --ob-surface:#fff; --ob-text:#101528; --ob-muted:#69748c;
  --ob-line:#e5eaf3; --ob-blue:#246bfe; --ob-blue2:#22b5ff; --ob-violet:#8358ff;
  --ob-green:#16b981; --ob-red:#ef5261; --ob-amber:#f2a51a; --ob-navy:#0d1530;
  --ob-shadow:0 18px 55px rgba(27,43,83,.08); --ob-radius:24px;

  /* Legacy aliases — several step views still reference these var() names
     inline (from before custom.css was dropped from this layout); mapping
     them here keeps that markup correct under the new palette without
     having to touch every inline style. */
  --primary: var(--ob-blue); --primary-dark: var(--ob-blue); --primary-light: rgba(36,107,254,.08);
  --success: var(--ob-green); --danger: var(--ob-red); --warning: var(--ob-amber); --gold: var(--ob-amber);
  --border: var(--ob-line); --text: var(--ob-text); --text-muted: var(--ob-muted); --text-dim:#8a94a8;
  --card: #fff; --accent: var(--ob-blue); --accent-dim: rgba(36,107,254,.08); --border-accent: rgba(36,107,254,.25);
  --navy-mid: #eef3fb;
}

body.onboarding-body { margin:0; background:var(--ob-bg); color:var(--ob-text); font-family:"DM Sans",sans-serif; }
.onboarding-body a { text-decoration:none; color:inherit; }
.onboarding-body button, .onboarding-body input, .onboarding-body select { font:inherit; }
.onboarding-body button { cursor:pointer; }

/* ── Topbar (premium light gradient header) ─────────── */
.topbar {
  height:56px; position:sticky; top:0; z-index:50; border-bottom:1px solid #dfe9f5;
  display:flex; align-items:center; padding:0 24px; justify-content:space-between;
  background:
    radial-gradient(circle at 8% 35%, rgba(95,157,255,.22), transparent 28%),
    radial-gradient(circle at 22% 0%, rgba(184,220,255,.28), transparent 32%),
    linear-gradient(105deg, #e6f2ff 0%, #f2f8ff 32%, #ffffff 55%, #ffffff 100%);
}
/* Decorative glow lives in its own clipped layer so it never clips the
   profile dropdown, which needs to hang below the header's own box. */
.topbar-glow { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.topbar-glow:before {
  content:""; position:absolute; width:420px; height:160px; left:-80px; top:-75px;
  background:linear-gradient(135deg, rgba(255,255,255,.65), rgba(94,151,255,.08));
  transform:rotate(8deg); border-radius:50%;
}
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; color:var(--ob-text); position:relative; z-index:2; }
.brand img { max-height:32px; width:auto; }
.header-separator { height:30px; width:1px; background:#cbd9ea; margin:0 22px; position:relative; z-index:2; }
.top-actions { display:flex; align-items:center; gap:17px; color:#435570; font-size:12px; position:relative; z-index:2; }
.header-help { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.header-help i { font-size:17px; color:#19365e; }
.header-util { height:26px; width:1px; background:#d7e2ef; }
.header-icon { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; color:#314968; position:relative; cursor:pointer; transition:.15s; }
.header-icon:hover { background:rgba(20,107,234,.08); }
.header-icon .notification-dot { position:absolute; width:7px; height:7px; right:3px; top:3px; border-radius:50%; background:#ef3340; border:1.5px solid #fff; }
.profile { position:relative; }
.profile-trigger { display:flex; align-items:center; gap:9px; color:#1a2740; font-weight:600; cursor:pointer; padding:6px 8px; border-radius:10px; transition:.15s; }
.profile-trigger:hover { background:rgba(20,107,234,.06); }
.avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#ffd6c6,#e5c5ff); font-size:12px; font-weight:700; color:#5a3a6a; flex-shrink:0; border:2px solid rgba(255,255,255,.85); box-shadow:0 2px 7px rgba(26,54,89,.13); }
.profile-chevron { transition:transform .2s; color:#445976; }
.profile-trigger.open .profile-chevron { transform:rotate(180deg); }
.profile-dropdown { position:absolute; right:0; top:calc(100% + 10px); width:220px; background:#fff; border:1px solid var(--ob-line); border-radius:16px; box-shadow:0 20px 50px rgba(20,30,60,.14); padding:8px; opacity:0; pointer-events:none; transform:translateY(-6px); transition:.15s; z-index:60; }
.profile-dropdown.open { opacity:1; pointer-events:auto; transform:none; }
.profile-drop-header { padding:10px 12px 8px; }
.profile-drop-name { font-weight:700; font-size:13px; color:#101528; }
.profile-drop-email { font-size:12px; color:#8791a6; margin-top:2px; word-break:break-all; }
.profile-drop-divider { height:1px; background:var(--ob-line); margin:6px 0; }
.profile-drop-item { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:9px 12px; border-radius:10px; font-size:13px; color:#3d4a63; background:none; border:0; }
.profile-drop-item:hover { background:#f4f7fc; }
.profile-drop-item.logout { color:var(--ob-red); }

/* ── Shell ──────────────────────────────────────────── */
.shell { max-width:1360px; margin:auto; padding:0 18px 24px; }

/* ── Step progress (connected-circle stepper) ────────── */
.progress-nav { padding:20px 4px; display:flex; align-items:center; position:sticky; top:56px; z-index:45; background:var(--ob-bg); }
.steps { width:100%; display:flex; align-items:center; overflow-x:auto; scrollbar-width:none; }
.steps::-webkit-scrollbar { display:none; }
.step-wrap { display:flex; align-items:center; flex:1; min-width:0; }
.step {
  height:50px; width:100%; border:1px solid transparent; background:transparent; border-radius:11px;
  display:flex; align-items:center; justify-content:center; gap:9px; color:#8791a6; position:relative; z-index:2;
  cursor:pointer; text-decoration:none; padding:0 6px; transition:.2s;
}
.step:hover { background:#eef3fa; }
.step .circle {
  width:27px; height:27px; border-radius:50%; background:#eef1f7; border:1px solid var(--ob-line); color:#7d879a;
  display:grid; place-items:center; font-size:11.5px; font-weight:700; flex:none;
}
.step .copy { display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; min-width:0; }
.step .num { font-size:9.5px; font-weight:700; margin-bottom:2px; }
.step .label { font-size:11px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.step.done { color:#18a874; background:linear-gradient(90deg,#effdf8,#f8fffc); }
.step.done .circle { background:#42d89e; border-color:#42d89e; color:#fff; box-shadow:0 3px 8px rgba(24,185,128,.2); }
.step.active { color:#0e4fdb; background:#eaf1ff; border-color:#c7dbff; box-shadow:0 5px 16px rgba(20,90,235,.10); }
.step.active .circle { background:linear-gradient(135deg,#1558e0,#22c0ff); border-color:transparent; color:#fff; box-shadow:0 4px 12px rgba(20,90,235,.28); }
.connector { height:2px; flex:0 0 18px; background:#d7e0ef; position:relative; z-index:1; }
.connector.done { background:#2ac78c; }
.connector.active { background:linear-gradient(90deg,#2ac78c,#1558e0); }

.progress-mobile { display:none; }

/* ── Main: two independent cards ─────────────────────── */
.main { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; align-items:start; }
.left-card, .right-card { background:#fff; border:1px solid var(--ob-line); border-radius:18px; box-shadow:var(--ob-shadow); }
.left-card { padding:32px 36px; min-height:560px; display:flex; flex-direction:column; min-width:0; animation:obFadeIn .35s ease; }
@keyframes obFadeIn { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.right-card { overflow:hidden; }
.hero-img { height:160px; position:relative; background:#eaf1ff; overflow:hidden; }
.hero-img img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-img:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(20,60,120,.12)); }
.progress-body { padding:18px 20px 16px; }
.progress-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.progress-title strong { font-size:13px; color:var(--ob-text); }
.progress-title span { font-size:11px; color:var(--ob-muted); }
.track { height:7px; border-radius:99px; background:#e7edf5; overflow:hidden; }
.track span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--ob-blue),var(--ob-blue2)); transition:.35s; }

.step-info-body { padding:16px 20px 4px; }
.step-info-body strong { display:block; font-size:14px; font-weight:800; color:var(--ob-text); margin-bottom:6px; }
.step-info-body p { margin:0; color:var(--ob-muted); font-size:12px; line-height:1.55; }

.help-box { margin:16px 20px 20px; border:1px solid var(--ob-line); border-radius:12px; padding:12px; display:flex; align-items:center; gap:11px; background:#f8faff; }
.help-icon { width:36px; height:36px; border-radius:50%; background:#eaf1ff; color:var(--ob-blue); display:grid; place-items:center; flex:none; }
.help-box strong { font-size:11.5px; color:var(--ob-text); margin:0; }
.help-box p { margin:2px 0 0; color:var(--ob-muted); font-size:10.5px; line-height:1.35; }

/* ── Step header ────────────────────────────────────── */
.step-header { margin-bottom:0; }
.eyebrow, .step-badge {
  display:inline-flex; align-items:center; gap:7px; width:max-content; padding:7px 14px 7px 11px;
  border-radius:999px; background:linear-gradient(115deg,#e4edff,#dcf0ff); border:1px solid #c7dbff;
  color:#1454e0; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 4px 14px rgba(20,84,224,.10);
}
.eyebrow:before, .step-badge:before {
  content:""; width:6px; height:6px; border-radius:50%; background:#246bfe; flex-shrink:0;
  box-shadow:0 0 0 3px rgba(36,107,254,.18); animation:badgePulse 1.8s ease-in-out infinite;
}
@keyframes badgePulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(.75); } }
.step-title, h1.ob-h1 { font:700 clamp(23px,3.2vw,32px)/1.15 "Space Grotesk"; letter-spacing:-.03em; margin:14px 0 10px; color:var(--ob-text); position:relative; }
.step-title:after {
  content:""; display:block; width:44px; height:3px; margin-top:12px; border-radius:3px;
  background:linear-gradient(90deg,#246bfe,#8358ff);
}
.step-subtitle, .subtitle { color:var(--ob-muted); font-size:13.5px; line-height:1.6; max-width:680px; margin:14px 0 20px; }
.step-body { flex:1; }

/* ── Actions ────────────────────────────────────────── */
.btn-row, .actions {
  position:sticky; bottom:0; z-index:5; background:#fff;
  border-top:1px solid var(--ob-line); padding:16px 0 calc(16px + env(safe-area-inset-bottom));
  margin-top:20px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.action-right { display:flex; gap:10px; }
.btn, .btn-outline-secondary {
  height:40px; border:1px solid #d7e1ee; background:#fff; border-radius:9px; padding:0 17px;
  font-weight:800; font-size:11px; color:#526783; transition:.2s cubic-bezier(.2,.8,.2,1);
  display:inline-flex; align-items:center; gap:8px; text-decoration:none !important;
}
.btn:hover, .btn-outline-secondary:hover {
  transform:translateY(-1px); color:var(--ob-blue); background:#eaf1ff; border-color:#b9cdfb;
}
.btn-primary, .btn-confirm-cta, .btn-dashboard, .btn-pay {
  border:0 !important; color:#fff !important; border-radius:9px;
  background:#1268ed !important;
  box-shadow:0 7px 17px rgba(18,104,237,.18) !important;
  position:relative; overflow:hidden;
}
.btn-primary:hover, .btn-confirm-cta:hover, .btn-dashboard:hover, .btn-pay:hover {
  box-shadow:0 10px 22px rgba(18,104,237,.28) !important;
  transform:translateY(-2px); color:#fff !important;
}
.btn-primary:active, .btn-confirm-cta:active, .btn-dashboard:active, .btn-pay:active {
  transform:translateY(0) scale(.99);
}
.btn:disabled, .btn-primary:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none !important; }

/* ── Form fields ────────────────────────────────────── */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-row.full { grid-template-columns:1fr; }
@media (max-width:560px) { .form-row { grid-template-columns:1fr; } }
.onboard-main .form-label, .form-label { font-size:12.5px; font-weight:700; color:var(--ob-text); margin-bottom:6px; display:inline-block; }
.onboard-main .req, .req { color:var(--ob-red); }
.onboard-main .form-control, .onboard-main .form-select, .form-control, .form-select {
  height:42px; border:1px solid #dce3ef !important; border-radius:10px !important; padding:0 13px; outline:0;
  background:#fff; color:#172037; font-size:13.5px;
}
.onboard-main .form-control:focus, .onboard-main .form-select:focus, .form-control:focus, .form-select:focus {
  border-color:#5b91ff !important; box-shadow:0 0 0 4px rgba(36,107,254,.10) !important;
}
.hint { font-size:11px; color:#929caf; }
.invalid-feedback { color:var(--ob-red); font-size:12px; }
.is-invalid { border-color:var(--ob-red) !important; }

/* ── Option / select cards (purpose, background, purpose-style pickers) ── */
.cards-grid, .option-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
.cards-grid.two { grid-template-columns:1fr 1fr; }
@media (max-width:900px) { .cards-grid, .option-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .cards-grid, .cards-grid.two, .option-grid { grid-template-columns:1fr; } }

.select-card, .option {
  position:relative; border:1px solid var(--ob-line); background:#fff; border-radius:15px;
  padding:16px; min-height:0; text-align:left; transition:.2s; cursor:pointer;
}
.select-card:hover, .option:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(30,55,100,.08); border-color:#aac8ff; }
.select-card.selected, .option.selected {
  border:2px solid #1768ef; background:linear-gradient(145deg,#eef4ff,#fff); box-shadow:0 14px 32px rgba(20,90,235,.16);
}
.select-card::after, .option .check {
  content:''; position:absolute; right:11px; top:11px; width:19px; height:19px; border-radius:50%;
  display:none; place-items:center; background:linear-gradient(135deg,#1558e0,#22c0ff); color:#fff; font-size:11px;
}
.select-card.selected::after, .option.selected .check { display:grid; }
.select-card.selected::after { content:'✓'; }
.card-icon, .option .icon { font-size:22px; margin-bottom:9px; }
.card-title, .option h3 { margin:0 0 4px; font:700 15px "Space Grotesk"; color:var(--ob-text); }
.card-desc, .option p { margin:0; color:var(--ob-muted); font-size:11.5px; line-height:1.5; }

/* ── Store type cards ───────────────────────────────── */
.store-types { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (max-width:700px) { .store-types { grid-template-columns:1fr; } }
.store-card, .select-card.store-select { border:1px solid var(--ob-line); border-radius:15px; padding:16px; background:#fff; cursor:pointer; transition:.2s; }
.store-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(30,55,100,.08); border-color:#aac8ff; }
.store-card.selected { border:2px solid var(--ob-blue); background:#f7faff; }
.card-modules, .store-checklist { margin-top:14px !important; border-top:1px solid var(--ob-line) !important; padding-top:12px !important; display:grid; gap:7px; font-size:11px; color:#5f6a80; }
.card-modules-label { font-size:11px; font-weight:700; color:#8791a6; text-transform:uppercase; letter-spacing:.06em; margin:6px 0 3px; }
.card-module-item.base, .card-module-item::before { color:#5f6a80; }
.card-module-item.base::before { content:'✓'; color:var(--ob-green); font-weight:800; margin-right:7px; }
.card-module-item.addon::before { content:'+'; color:var(--ob-violet); font-weight:800; margin-right:7px; }

/* ── Modules (store setup) ──────────────────────────── */
.setup-module, .module { border:1px solid var(--ob-line); border-radius:13px; background:#fff; overflow:hidden; margin-bottom:9px; transition:.2s; }
.setup-module.addon-on, .module.open { border-color:var(--ob-blue); background:#f6faff; box-shadow:0 4px 16px rgba(36,107,254,.10); }
.module-header { padding:12px 14px; display:flex; align-items:center; gap:10px; }
.module-header.is-addon { cursor:pointer; user-select:none; }
.module-header.is-addon:hover { background:#f6faff; }
.mod-check-circle, .module-icon-wrap { width:32px; height:32px; border-radius:9px; flex-shrink:0; display:grid; place-items:center; font-size:13px; }
.mod-check-circle { width:21px; height:21px; border-radius:50%; font-size:10px; font-weight:700; }
.mod-check-circle.base-circle { background:var(--ob-blue); color:#fff; }
.mod-check-circle.addon-circle { background:transparent; border:2px solid #dce3ef; color:#99a3b7; font-size:14px; font-weight:400; }
.setup-module.addon-on .addon-circle { background:var(--ob-blue); color:#fff; border-color:var(--ob-blue); font-size:10px; font-weight:700; }
.module-icon { font-size:17px; flex-shrink:0; width:32px; height:32px; border-radius:9px; background:#eef4ff; display:grid; place-items:center; color:var(--ob-blue); }
.module-header-info { flex:1; min-width:0; }
.module-header-name { font-size:13px; font-weight:700; color:var(--ob-text); }
.module-header-sub { font-size:10.5px; color:#8a94a8; margin-top:2px; }
.module-badge, .badge { font-size:10px; border-radius:999px; padding:5px 9px; font-weight:700; }
.badge-default, .module-badge.badge-default { background:#ddf7ed; color:#11986b; }
.badge-paid, .module-badge.badge-paid, .price-badge { background:#f0ebff; color:#7653d9; }

.features-panel { border-top:1px solid var(--ob-line); padding:6px 10px 8px; display:flex; flex-direction:column; gap:1px; background:#fafbfe; }
.feature-row { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:7px; cursor:pointer; transition:background .15s; }
.feature-row:hover { background:#f6faff; }
.feature-row.feat-on { background:#e5f0ff; }
.feat-checkbox-ui { width:18px; height:18px; border-radius:4px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; border:2px solid #dce3ef; color:var(--ob-blue); transition:.15s; }
.feature-row.feat-on .feat-checkbox-ui { background:var(--ob-blue); color:#fff; border-color:var(--ob-blue); }
.feat-name { flex:1; font-size:13px; color:#333; }
.feat-price-tag { font-size:11px; white-space:nowrap; }
.feat-price-tag.free { color:var(--ob-green); font-weight:700; }
.feat-price-tag.paid { color:#8a94a8; }
.section-sep { font-size:11px; font-weight:700; color:#8791a6; text-transform:uppercase; letter-spacing:.07em; margin:20px 0 10px; display:flex; align-items:center; gap:10px; }
.section-sep::after { content:''; flex:1; height:1px; background:var(--ob-line); }
.hidden-cb { display:none; }

/* ── Domain ─────────────────────────────────────────── */
.domain-options, .domain-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
@media (max-width:640px) { .domain-options, .domain-grid { grid-template-columns:1fr; } }
.domain-card { border:1px solid var(--ob-line); border-radius:16px; padding:16px; background:#fff; cursor:pointer; transition:.2s; }
.domain-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(30,55,100,.08); border-color:#aac8ff; }
.domain-card.selected { border:2px solid var(--ob-blue); background:#f6f9ff; }
.domain-type-icon { font-size:22px; margin-bottom:9px; }
.domain-type-title { font:700 15px "Space Grotesk"; margin-bottom:4px; color:var(--ob-text); }
.domain-type-desc { font-size:11.5px; color:var(--ob-muted); line-height:1.5; }
.domain-panel { background:#f8faff; border:1px solid var(--ob-line); border-radius:13px; padding:15px; margin-bottom:13px; }
.subdomain-row, .existing-row, .domain-input { display:flex; align-items:stretch; }
.subdomain-row .form-control, .existing-row .form-control { border-radius:12px 0 0 12px !important; flex:1; border-right:0 !important; min-width:0; }
.subdomain-suffix, .suffix { background:#eef3fb; border:1px solid #dce3ef; padding:0 14px; font-size:12px; color:var(--ob-blue); font-weight:700; white-space:nowrap; display:flex; align-items:center; }
.subdomain-regen, .regen { background:#fff; border:1px solid #dce3ef; border-left:0; border-radius:0 12px 12px 0; padding:0 14px; cursor:pointer; font-size:18px; color:var(--ob-muted); transition:color .2s; display:flex; align-items:center; }
.subdomain-regen:hover, .regen:hover { color:var(--ob-blue); }
.check-btn { background:#e9f2ff; border:1px solid #cfe0ff; border-left:0; border-radius:0 12px 12px 0; color:var(--ob-blue); font-size:13px; font-weight:700; padding:0 18px; cursor:pointer; white-space:nowrap; transition:background .2s; }
.check-btn:hover { background:#dbeaff; }
.check-btn:disabled { opacity:.5; cursor:not-allowed; }
.domain-status { font-size:12px; margin-top:8px; min-height:18px; }
.domain-status.ok { color:var(--ob-green); }
.domain-status.err { color:var(--ob-red); }
.domain-status.checking { color:var(--ob-muted); }
.dns-info-box, .info, .dns { display:flex; align-items:flex-start; gap:12px; background:#eaf8f2; border:1px solid #cdeedd; border-radius:12px; padding:12px 16px; margin-top:12px; font-size:11px; line-height:1.55; color:#16805d; }
.dns-info-box.info-blue, .dns { background:#edf4ff; border-color:#d6e6ff; color:#2e5ba9; }
.dns-info-box .dns-icon { font-size:18px; flex-shrink:0; margin-top:1px; }
.dns-info-box p { font-size:12px; margin:0; line-height:1.5; }
.dns-info-box strong { color:inherit; }

/* ── Billing switch + plans ─────────────────────────── */
.billing-switcher, .billing-switch { display:inline-flex; background:#eef1f6; border-radius:999px; padding:4px; gap:3px; margin-bottom:32px; }
.billing-opt, .switch button { border:none; background:transparent; border-radius:999px; padding:9px 20px; font-size:13px; font-weight:700; color:#8791a6; cursor:pointer; transition:.2s; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.billing-opt.active, .switch button.active { background:#fff; color:var(--ob-blue); box-shadow:0 2px 8px rgba(0,0,0,.10); }
.save-tag, .save { background:linear-gradient(135deg,var(--ob-green),#2ecc71); color:#fff; font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; }

.plan-cards, .plans { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:900px) { .plan-cards, .plans { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .plan-cards, .plans { grid-template-columns:1fr; } }
.plan-card, .plan { border:1px solid var(--ob-line); border-radius:16px; padding:16px; background:#fff; position:relative; cursor:pointer; transition:.2s; }
.plan-card.selected, .plan.selected { border:2px solid var(--ob-blue); box-shadow:0 14px 35px rgba(36,107,254,.10); }
.plan-select-ring { position:absolute; top:14px; right:14px; width:19px; height:19px; border-radius:50%; border:2px solid #dde5ef; display:flex; align-items:center; justify-content:center; font-size:10px; color:transparent; transition:.2s; }
.plan-card.selected .plan-select-ring { background:var(--ob-blue); border-color:var(--ob-blue); color:#fff; }
.plan-type-badge { font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--ob-blue); background:#e9f2ff; display:inline-block; padding:3px 9px; border-radius:20px; margin-bottom:8px; }
.plan-card.popular .plan-type-badge { background:rgba(243,156,18,.12); color:#b87800; }
.plan-name { font:700 16px "Space Grotesk" !important; color:#0a0a0a !important; margin-bottom:10px !important; text-transform:none !important; letter-spacing:0 !important; }
.plan-price-row { display:flex; align-items:baseline; gap:6px; margin-bottom:4px; }
.plan-price { font:800 28px "Space Grotesk"; color:#0a0a0a; letter-spacing:-1px; }
.plan-price sup { font-size:13px; vertical-align:top; margin-top:5px; font-weight:600; color:#666; }
.plan-cycle-stack { display:flex; flex-direction:column; gap:1px; }
.cycle-label { font-size:12px; color:#999; font-weight:500; }
.plan-mo-note { font-size:10.5px; color:#bbb; }
.plan-savings { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; color:var(--ob-green); background:rgba(22,185,129,.08); border:1px solid rgba(22,185,129,.18); border-radius:20px; padding:3px 9px; margin-top:5px; }
.plan-divider { height:1px; background:#eef1f6; margin:13px 0; }
.plan-features, .plan ul { margin:0 !important; padding:0 !important; list-style:none; }
.plan-feature, .plan li { font-size:13px !important; color:#444 !important; padding:7px 0 !important; display:flex !important; gap:9px; align-items:flex-start; border-top:1px solid #f3f6f9 !important; }
.plan-feature:first-child, .plan li:first-child { border-top:none !important; }
.feat-icon { color:var(--ob-green); font-size:13px; margin-top:1px; flex-shrink:0; }

/* ── Checkout ───────────────────────────────────────── */
.checkout-grid, .checkout { display:grid; grid-template-columns:1fr 360px; gap:20px; align-items:start; }
@media (max-width:860px) { .checkout-grid, .checkout { grid-template-columns:1fr; } }
.co-card, .panel { background:#fff; border:1px solid var(--ob-line); border-radius:19px; padding:24px; box-shadow:0 2px 16px rgba(0,0,0,.05); }
.co-section-label, .panel h3 { font-size:16px; font-weight:700; font-family:"Space Grotesk"; color:var(--ob-text); margin-bottom:18px; }
.co-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:#b0bec5; font-family:inherit; }
.co-plan-icon { background:#e9f2ff; }
.co-billing-badge.badge-yearly { background:rgba(22,185,129,.10); color:var(--ob-green); }
.co-billing-badge.badge-monthly { background:rgba(36,107,254,.10); color:var(--ob-blue); }
.co-savings-line { background:rgba(22,185,129,.08); border:1px solid rgba(22,185,129,.20); color:var(--ob-green); border-radius:10px; }
.co-total-price, .summary-row.total strong { color:var(--ob-blue); }
.co-feat-icon, .feat-icon { color:var(--ob-green); }
.co-price-hero, .payment-hero { text-align:center; }
.co-secure-bar, .trust { background:#f4f8ff; border:1px solid #dce9ff; border-radius:12px; }
.co-admin-warning { background:rgba(242,165,26,.10); border:1px solid rgba(242,165,26,.30); color:#8a5c0a; }
.co-admin-warning strong { color:#7a5205; }
.summary-row { display:flex; justify-content:space-between; padding:9px 0; font-size:13px; border-bottom:1px solid #f0f2f6; }
.summary-row.total { font-weight:800; font-size:17px; border:0; padding-top:16px; }
.payment-hero { background:linear-gradient(135deg,var(--ob-navy),#1d2f67); color:#fff; border-radius:16px; padding:22px; margin-bottom:16px; }
.payment-hero small { color:#aeb9d5; }
.payment-hero strong { font:700 36px "Space Grotesk"; display:block; margin-top:4px; }
.trust { display:flex; gap:8px; margin-top:15px; flex-wrap:wrap; padding:8px; }
.trust span, .co-trust-item { font-size:10px; padding:7px 9px; border-radius:9px; background:#f3f6fb; color:#667188; display:flex; align-items:center; gap:5px; }

/* ── Confirmed ──────────────────────────────────────── */
.confirmed-hero, .confirm-hero { border-radius:20px; padding:25px; background:linear-gradient(135deg,#e8fbf2,#f6fffb); border:1px solid #cdeedd; text-align:center; }
.confirm-hero.admin { background:linear-gradient(135deg,#edf4ff,#f7f9ff); border-color:#d9e6ff; }
.confirmed-title, .confirm-title { font:700 28px "Space Grotesk"; margin-bottom:5px; color:var(--ob-text); }
.confirmed-subtitle, .confirm-sub { color:#5f6d83; font-size:13px; line-height:1.6; }
.confirmed-icon-wrap { background:linear-gradient(135deg,var(--ob-green),#2ecc71); box-shadow:0 8px 24px rgba(22,185,129,.30); }
.confirmed-grid, .confirm-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:18px; }
@media (max-width:640px) { .confirmed-grid, .confirm-grid { grid-template-columns:1fr; } }
.receipt-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #f3f6f9; font-size:13px; }
.receipt-row:last-child { border-bottom:none; }
.receipt-val.accent { color:var(--ob-blue); }
.receipt-val.success { color:var(--ob-green); }
.pill-paid, .pill { background:rgba(22,185,129,.10); color:var(--ob-green); }
.next-steps-card { background:linear-gradient(135deg,#f6fbff,#eef6fb); border:1px solid #d6e6ff; border-radius:16px; padding:24px; margin-top:18px; }
.next-step-num { background:var(--ob-blue); }
.next-step-num.done { background:var(--ob-green); }
.timeline { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
@media (max-width:700px) { .timeline { grid-template-columns:1fr; } }
.timeline-item { padding:15px; border:1px solid var(--ob-line); border-radius:15px; background:#fff; }
.timeline-item b { display:block; font-size:12px; margin-bottom:5px; }
.timeline-item span { font-size:10px; color:var(--ob-muted); }

/* ── Provisioning ───────────────────────────────────── */
.prov-header-card, .prov-steps-card, .prov-info-card { background:#fff; border:1px solid var(--ob-line); border-radius:18px; box-shadow:0 2px 16px rgba(0,0,0,.06); }
.prov-title .spin-dot, .pulse { background:var(--ob-green); animation:obPulse 1.6s infinite; }
@keyframes obPulse { 50% { box-shadow:0 0 0 11px rgba(22,185,129,0); } }
.prov-pct, .percent { font:700 28px "Space Grotesk"; color:var(--ob-blue); }
.prov-pct.done { color:var(--ob-green); }
.prov-bar-track, .bar { height:9px; background:#edf0f5; border-radius:99px; overflow:hidden; }
.prov-bar-fill, .bar > i { background:linear-gradient(90deg,#246bfe,#8b5cff); transition:.4s; }
.prov-bar-fill.done { background:linear-gradient(90deg,var(--ob-green),#2ecc71); }
.prov-step, .pipeline-row { border-bottom:1px solid #f0f2f6; }
.prov-step.running, .pipeline-row.running { background:#f6faff; }
.prov-step-icon.s-done, .stage-dot { background:#eef1f6; color:#8490a5; }
.prov-step-icon.s-running { background:#e9f2ff; color:var(--ob-blue); }
.running .stage-dot { background:#e9f2ff; color:var(--ob-blue); }
.prov-step-icon.s-done { background:rgba(22,185,129,.12); color:var(--ob-green); }
.done .stage-dot { background:#dff8ed; color:#11976b; }
.prov-step-icon.s-failed { background:rgba(239,82,97,.10); color:var(--ob-red); }
.failed .stage-dot { background:#fdebed; color:#df4454; }
.badge-done, .prov-step-badge.badge-done { background:rgba(22,185,129,.10); color:var(--ob-green); }
.badge-running, .prov-step-badge.badge-running { background:rgba(36,107,254,.10); color:var(--ob-blue); }
.badge-failed, .prov-step-badge.badge-failed { background:rgba(239,82,97,.08); color:var(--ob-red); }
.prov-step-desc.success { color:var(--ob-green); }
.prov-step-desc.running { color:var(--ob-blue); }
.prov-step-desc.failed { color:var(--ob-red); }
.prov-terminal, .terminal { background:#0b1020; border-radius:18px; color:#aab7d1; font:11px/1.8 "Courier New",monospace; box-shadow:0 15px 35px rgba(6,10,25,.15); }
.prov-terminal-bar, .terminal-top { display:flex; gap:6px; align-items:center; }
.term-dot, .tdot { width:8px; height:8px; border-radius:50%; background:#4c566c; }
.term-dot-r { background:#ff5f57; } .term-dot-y { background:#ffbd2e; } .term-dot-g { background:#28c840; }
.t-ok, .terminal .ok { color:#58d7a5; }
.t-run, .terminal .run { color:#73a5ff; }
.t-cur, .cursor { display:inline-block; width:7px; height:13px; background:#8ba7ff; vertical-align:-2px; animation:obBlink .9s infinite; }
@keyframes obBlink { 50% { opacity:0; } }
.prov-info-val.accent, .detail strong { color:var(--ob-blue); }

/* ── OTP grid (verify step) ─────────────────────────── */
.otp-grid { display:flex; gap:10px; }
.otp-input { width:48px; height:56px; text-align:center; font-size:22px; font-weight:700; border:1px solid #dce3ef; border-radius:12px; outline:0; }
.otp-input:focus, .otp-input.filled { border-color:var(--ob-blue); box-shadow:0 0 0 4px rgba(36,107,254,.10); }

/* ── Responsive shell ───────────────────────────────── */
@media (max-width:1050px) {
  .main { grid-template-columns:1fr; }
  .right-card { order:-1; }
  .hero-img { height:130px; }
}
@media (max-width:720px) {
  .topbar { height:48px; padding:0 12px; }
  .header-separator, .header-help, .header-util { display:none; }
  .brand { font-size:14px; gap:6px; }
  .brand img { max-height:24px; }
  .brand span { display:none; }
  .top-actions { gap:10px; }
  .profile-trigger span { display:none; }
  .avatar { width:28px; height:28px; font-size:11px; }
  .shell { padding:0 0 18px; }
  .progress-mobile { display:flex; justify-content:space-between; align-items:center; margin:4px 12px 6px; font-size:10.5px; color:#778198; }
  .progress-mobile strong { font-weight:700; color:#44516a; }
  .progress-line { height:4px; background:#e8edf5; border-radius:9px; flex:1; margin-left:10px; overflow:hidden; }
  .progress-line i { display:block; height:100%; background:linear-gradient(90deg,#246bfe,#22b4ff); border-radius:inherit; transition:width .3s ease; }
  .progress-nav { padding:8px 4px; position:sticky; top:48px; z-index:45; }
  .steps { min-width:max-content; }
  .step-wrap { min-width:78px; }
  .step { height:46px; padding:0 5px; }
  .step .label { font-size:9px; }
  .step .num { font-size:8.5px; }
  .step .circle { width:22px; height:22px; font-size:10px; }
  .connector { flex-basis:10px; }
  .left-card { padding:20px; min-height:auto; }
  .right-card { border-radius:14px; }
  .eyebrow, .step-badge { font-size:9.5px; padding:5px 9px; }
  .step-title, h1.ob-h1 { font-size:21px; line-height:1.2; margin:10px 0 6px; }
  .step-subtitle, .subtitle { font-size:12.5px; line-height:1.5; margin-bottom:14px; }
  .form-row, .cards-grid, .cards-grid.two, .option-grid, .domain-options, .domain-grid, .plan-cards, .plans,
  .confirmed-grid, .confirm-grid, .timeline, .checkout-grid, .checkout, .store-types { grid-template-columns:1fr; gap:10px; }
  .form-row { gap:12px; }
  .form-control, .form-select, .onboard-main .form-control, .onboard-main .form-select { height:42px; font-size:13px; }
  .form-label, .onboard-main .form-label { font-size:12px; margin-bottom:5px; }

  .select-card, .option, .domain-card, .store-card { min-height:0; padding:14px; border-radius:14px; }
  .card-icon, .option .icon, .domain-type-icon { font-size:21px; margin-bottom:8px; }
  .card-title, .option h3, .domain-type-title { font-size:14.5px; margin-bottom:3px; }
  .card-desc, .option p, .domain-type-desc { font-size:11px; line-height:1.45; }

  .setup-module { margin-bottom:8px; border-radius:12px; }
  .module-header { padding:11px 12px; gap:9px; }
  .module-icon, .mod-check-circle.base-circle { width:30px; height:30px; }
  .module-header-name { font-size:13px; }
  .module-header-sub { font-size:10px; }
  .features-panel { padding:5px 8px 6px; }

  .billing-switcher, .billing-switch { margin-bottom:16px; }
  .billing-opt, .switch button { padding:7px 14px; font-size:11.5px; }
  .plan-card, .plan { padding:14px; border-radius:14px; }
  .plan-price, .price { font-size:26px; }
  .plan-name { font-size:16px !important; margin-bottom:8px !important; }

  .co-card, .panel, .confirmed-hero, .confirm-hero, .next-steps-card,
  .prov-header-card, .prov-info-card { padding:15px; border-radius:14px; }
  .co-section-label, .panel h3 { font-size:14px; margin-bottom:10px; }
  .co-price-amount { font-size:36px !important; }
  .payment-hero { padding:15px; }
  .payment-hero strong { font-size:26px !important; }
  .prov-terminal-body, .terminal { font-size:10px; min-height:120px; padding:12px; }
  .prov-step, .pipeline-row { padding:11px 14px; gap:10px; }
  .prov-step-icon, .stage-dot { width:28px; height:28px; }

  .actions, .btn-row { padding:12px 0 calc(12px + env(safe-area-inset-bottom)); }
  .action-right { flex:1; justify-content:flex-end; }
}

@media (max-width:380px) {
  .left-card { padding-left:14px; padding-right:14px; }
  .step-title, h1.ob-h1 { font-size:19px; }
  .step-wrap { min-width:64px; }
  .step .label { font-size:8px; }
  .action-right .btn { min-width:0; flex:1; justify-content:center; }
}