/* ShopexHub Onboarding — premium light redesign
 * Scoped to body.onboarding-page so the shared, dark-themed styles.css
 * (used across the rest of the marketing site) is left untouched.
 * Loaded after styles.css / tailwindoutput.css so these rules win.
 */

body.onboarding-page {
    /* Palette */
    --ob-bg: #fafafb;
    --ob-surface: #ffffff;
    --ob-surface-alt: #f6f7f9;
    --ob-border: #e6e8ec;
    --ob-border-strong: #d6d9df;
    --ob-text: #16181d;
    --ob-text-secondary: #55585f;
    --ob-text-muted: #8a8d96;
    --ob-text-disabled: #b4b7bf;
    --ob-accent: #3b5bfd;
    --ob-accent-hover: #2c46e0;
    --ob-accent-dim: rgba(59, 91, 253, 0.08);
    --ob-success: #17a34a;
    --ob-success-dim: rgba(23, 163, 74, 0.1);
    --ob-error: #e0333f;
    --ob-error-dim: rgba(224, 51, 63, 0.08);
    --ob-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
    --ob-shadow-md: 0 4px 16px rgba(16, 24, 40, 0.06);
    --ob-shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, 0.12);
    --ob-radius-sm: 8px;
    --ob-radius-md: 12px;
    --ob-radius-lg: 16px;

    background: var(--ob-bg);
    color: var(--ob-text);
}

body.onboarding-page,
body.onboarding-page input,
body.onboarding-page select,
body.onboarding-page textarea,
body.onboarding-page button {
    font-family: 'Sora', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body.onboarding-page h1,
body.onboarding-page h2,
body.onboarding-page h3,
body.onboarding-page h4 {
    font-family: 'Space Grotesk', 'Sora', sans-serif;
    color: var(--ob-text);
}

body.onboarding-page ::selection { background: var(--ob-accent-dim); }

body.onboarding-page *:focus-visible {
    outline: 2px solid var(--ob-accent);
    outline-offset: 2px;
}

/* ── Top navigation ───────────────────────────────────────────── */
.onboarding-page .landing-header {
    /* styles.css sets position:fixed on the base .landing-header — override it
       explicitly since a property this rule doesn't mention still falls through. */
    position: static;
    background: var(--ob-surface);
    border-bottom: 1px solid var(--ob-border);
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.onboarding-page .landing-header__logo {
    color: var(--ob-text);
    gap: 10px;
}

.onboarding-page .landing-header__logo-text {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.ob-header__right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ob-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--ob-border);
    background: var(--ob-surface);
    color: var(--ob-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ob-lang svg { width: 14px; height: 14px; opacity: 0.7; }

.ob-header__step {
    font-size: 0.82rem;
    color: var(--ob-text-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Page shell ───────────────────────────────────────────────── */
.ob-shell {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* Bottom padding clears the fixed .ob-nav bar so content never scrolls under it. */
    padding: 32px 24px 130px;
}

.ob-eta {
    color: var(--ob-text-muted) !important;
    font-size: 0.85rem !important;
    font-weight: 500;
}

/* ── Progress stepper ─────────────────────────────────────────── */
.onboarding-page .progress-bar {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin: 4px auto 32px;
    max-width: 720px;
}

.onboarding-page .progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.onboarding-page .step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ob-surface);
    border: 2px solid var(--ob-border-strong);
    color: var(--ob-text-disabled);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.25s ease;
}

.onboarding-page .step-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ob-text-disabled);
    letter-spacing: 0.01em;
    transition: color 0.25s ease;
    white-space: nowrap;
}

.onboarding-page .progress-step.active .step-num {
    background: var(--ob-accent);
    border-color: var(--ob-accent);
    color: #fff;
    box-shadow: 0 0 0 4px var(--ob-accent-dim);
}

.onboarding-page .progress-step.active .step-label { color: var(--ob-text); }

.onboarding-page .progress-step.completed .step-num {
    background: var(--ob-surface);
    border-color: var(--ob-success);
    color: var(--ob-success);
}

.onboarding-page .progress-step.completed .step-label { color: var(--ob-text-secondary); }

.onboarding-page .progress-step.completed:hover .step-num {
    background: var(--ob-success-dim);
    transform: scale(1.06);
}

.onboarding-page .step-line {
    width: 56px;
    height: 2px;
    background: var(--ob-border);
    margin: 17px 4px 0;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.onboarding-page .step-line.completed { background: var(--ob-success); }

@media (max-width: 700px) {
    .onboarding-page .progress-bar { gap: 0; }
    .onboarding-page .step-line { width: 20px; margin-top: 13px; }
    .onboarding-page .step-num { width: 28px; height: 28px; font-size: 0.75rem; }
    .onboarding-page .step-label { display: none; }
}

/* ── Step content / typography ────────────────────────────────── */
.onboarding-page .step-content {
    display: none;
    max-width: 620px;
    margin: 0 auto;
}
.onboarding-page .step-content.active { display: block; animation: obFadeIn 0.35s ease; }
.onboarding-page .step-content--wide { max-width: 1140px; }

@keyframes obFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.onboarding-page .step-content h1 {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 10px;
}

.onboarding-page .step-content .subtitle {
    text-align: center;
    color: var(--ob-text-secondary);
    font-size: 1.02rem;
    max-width: 460px;
    margin: 0 auto 28px;
}

/* ── Card ──────────────────────────────────────────────────────── */
.ob-card {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-lg);
    box-shadow: var(--ob-shadow-md);
    padding: 40px;
}

@media (max-width: 640px) {
    .ob-card { padding: 24px; border-radius: var(--ob-radius-md); }
}

/* Step 1 is a single field — the full-size card padding used by the later,
   content-heavy steps just pushes it further off-screen. */
#step1-email .ob-card { padding: 24px 32px; }

/* ── Forms ─────────────────────────────────────────────────────── */
.onboarding-page .form-group { margin-bottom: 22px; }

.onboarding-page .form-group > label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ob-text);
    margin-bottom: 7px;
}

.onboarding-page .form-row { gap: 18px; }

.onboarding-page .form-input,
.onboarding-page select.form-input,
.onboarding-page textarea.form-input {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border-strong);
    border-radius: var(--ob-radius-sm);
    color: var(--ob-text);
    padding: 12px 14px;
    font-size: 0.95rem;
    min-height: 46px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.onboarding-page textarea.form-input { min-height: 96px; resize: vertical; }

.onboarding-page .form-input:hover { border-color: var(--ob-text-disabled); }

.onboarding-page .form-input:focus {
    outline: none;
    border-color: var(--ob-accent);
    box-shadow: 0 0 0 4px var(--ob-accent-dim);
}

.onboarding-page .form-input::placeholder { color: var(--ob-text-disabled); }

.onboarding-page .form-input--hero {
    padding: 16px 18px;
    font-size: 1.1rem;
    border-radius: var(--ob-radius-md);
}

.onboarding-page select.form-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #9199a8 50%), linear-gradient(135deg, #9199a8 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

/* Business-name availability badge; JS overrides background/color inline once checked */
#businessNameStatus {
    font-weight: 700;
    border: 1px solid var(--ob-border);
    background: var(--ob-surface-alt);
    color: var(--ob-text-disabled);
}
#businessNameStatusText { font-weight: 500; color: var(--ob-text-muted); }

.ob-optional {
    font-weight: 500;
    color: var(--ob-text-disabled);
    font-size: 0.82em;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.onboarding-page .btn {
    border-radius: var(--ob-radius-sm);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 11px 20px;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.onboarding-page .btn--secondary {
    background: var(--ob-surface);
    border-color: var(--ob-border-strong);
    color: var(--ob-text);
}
.onboarding-page .btn--secondary:hover:not(:disabled) {
    background: var(--ob-surface-alt);
    border-color: var(--ob-text-disabled);
}

.ob-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ob-accent);
    color: #fff;
    border: none;
    border-radius: var(--ob-radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 13px 26px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: var(--ob-shadow-sm);
}
.ob-btn-primary:hover:not(:disabled) { background: var(--ob-accent-hover); box-shadow: var(--ob-shadow-md); }
.ob-btn-primary:active:not(:disabled) { transform: translateY(1px); }
.ob-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.ob-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--ob-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: var(--ob-radius-sm);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ob-btn-ghost:hover { background: var(--ob-surface-alt); color: var(--ob-text); }
.ob-btn-ghost svg { width: 15px; height: 15px; }

.ob-btn-text {
    background: none;
    border: none;
    color: var(--ob-text-muted);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    padding: 10px 8px;
}
.ob-btn-text:hover { color: var(--ob-text); }

/* Skip is a legitimate way to finish the wizard, not an afterthought - give it a
   visible outline instead of the plain muted-text style so it doesn't get missed
   on the steps (menu, subdomain) where most people are expected to use it. Back
   gets the same outline so the nav bar reads as a consistent set of buttons
   instead of Back/Skip looking like disabled text next to a solid Continue. */
#navSkip, #navBack {
    border: 1.5px solid var(--ob-border-strong);
    border-radius: var(--ob-radius-sm);
    color: var(--ob-text);
    padding: 10px 18px;
}
#navBack {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#navSkip:hover, #navBack:hover { background: var(--ob-surface-alt); color: var(--ob-text); }

.ob-skip-callout {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--ob-surface-alt);
    border: 1px dashed var(--ob-border-strong);
    border-radius: var(--ob-radius-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: var(--ob-text-muted);
}
.ob-skip-callout__link {
    background: none;
    border: none;
    padding: 0;
    color: var(--ob-accent);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}
.ob-skip-callout__link:hover { text-decoration: underline; }

/* ── Bottom action bar ─────────────────────────────────────────── */
.ob-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--ob-border);
    padding: 16px 28px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ob-nav__utility { display: flex; align-items: center; gap: 4px; }
.ob-nav__spacer { flex: 1; }

@media (max-width: 560px) {
    .ob-nav { padding: 12px 16px; }
    .ob-nav__utility { display: none; }
}

/* ── Data sheet (products) ────────────────────────────────────── */
.onboarding-page .menu-sheet-toolbar {
    margin-bottom: 14px;
}
.onboarding-page .menu-sheet-note { color: var(--ob-text-muted); font-size: 0.88rem; }

.onboarding-page .menu-sheet-wrap {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-md);
    box-shadow: var(--ob-shadow-sm);
}

.onboarding-page .menu-sheet th,
.onboarding-page .sheet-header-cell {
    background: var(--ob-surface-alt);
    color: var(--ob-text-secondary);
    border-bottom: 1px solid var(--ob-border);
    border-right: 1px solid var(--ob-border);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.onboarding-page .menu-sheet td {
    border-bottom: 1px solid var(--ob-border);
    border-right: 1px solid var(--ob-border);
}

.onboarding-page .menu-sheet td input {
    background: transparent;
    color: var(--ob-text);
    font-size: 0.92rem;
}

.onboarding-page .menu-sheet td input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--ob-accent);
    background-color: var(--ob-accent-dim);
}

/* :placeholder-shown only matches while the field is empty (showing the "e.g. ..."
   hint) and stops matching the moment real text is typed — marks example values
   as example values without needing JS to track it. */
.onboarding-page .menu-sheet td input:placeholder-shown {
    margin: 4px;
    width: calc(100% - 8px);
    border: 1px dashed var(--ob-accent);
    border-radius: 6px;
    background-color: var(--ob-accent-dim);
}

.onboarding-page .menu-remove-btn,
.onboarding-page .menu-row-actions .menu-remove-btn {
    color: var(--ob-text-muted);
    border-radius: var(--ob-radius-sm);
}
.onboarding-page .menu-remove-btn:hover { background: var(--ob-error-dim); color: var(--ob-error); }

.onboarding-page .sheet-resizer { background: transparent; }
.onboarding-page .sheet-resizer.active,
.onboarding-page .sheet-resizer:hover { background: var(--ob-accent); }

/* ── Website / domain step ────────────────────────────────────── */
.onboarding-page .subdomain-input-wrap {
    background: var(--ob-surface-alt);
    border: 1px solid var(--ob-border-strong);
    border-radius: var(--ob-radius-md);
}
/* The base .subdomain-input-wrap span has no white-space/overflow rules, so at
   narrow widths the flex row shrinks it by wrapping the URL prefix onto a second
   line instead of truncating it — which then collides with the value in the input
   next to it. Truncate with an ellipsis instead; the prefix is fixed boilerplate,
   the tenant name in the input is the part that actually matters. */
.onboarding-page .subdomain-input-wrap span {
    color: var(--ob-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}
.onboarding-page .subdomain-input-wrap input { color: var(--ob-text); font-weight: 600; flex-shrink: 0; }
.onboarding-page .subdomain-help { color: var(--ob-text-muted); }

.onboarding-page .info-box {
    background: var(--ob-accent-dim);
    border: 1px solid rgba(59, 91, 253, 0.16);
    border-radius: var(--ob-radius-md);
    padding: 16px 18px;
    color: var(--ob-text);
}
.onboarding-page .info-box strong { color: var(--ob-accent); }

/* ── Summary / next steps ─────────────────────────────────────── */
.onboarding-page .summary-section {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-lg);
    box-shadow: var(--ob-shadow-sm);
    padding: 28px 32px;
    margin-bottom: 20px;
}
.onboarding-page .summary-section h3 { font-size: 1.05rem; margin-bottom: 16px; }
.onboarding-page .summary-item { color: var(--ob-text-secondary); font-size: 0.94rem; }
.onboarding-page .summary-item strong { color: var(--ob-text); font-weight: 600; }
/* styles.css sets grid-template-columns on the base .summary-grid — redeclare it
   explicitly rather than relying on that fallthrough, same gotcha as .landing-header. */
.onboarding-page .summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.onboarding-page .summary-item--wide { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .onboarding-page .summary-grid { grid-template-columns: 1fr; }
}

.onboarding-page .next-steps {
    background: var(--ob-surface-alt);
    border-radius: var(--ob-radius-lg);
    padding: 26px 32px;
}
.onboarding-page .next-steps h4 { font-size: 0.95rem; margin-bottom: 14px; }
.onboarding-page .next-steps ul { list-style: none; display: grid; gap: 10px; }
.onboarding-page .next-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ob-text-secondary);
    font-size: 0.92rem;
}
.onboarding-page .next-steps__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ob-success-dim);
    box-shadow: inset 0 0 0 1px rgba(23,163,74,0.3);
    color: var(--ob-success);
}
.onboarding-page .next-steps__icon svg { width: 11px; height: 11px; }

/* ── Success screen ────────────────────────────────────────────── */
.onboarding-page #successScreen.step-content.active { max-width: 620px; }
.onboarding-page .success-screen__icon {
    width: 72px; height: 72px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: var(--ob-success-dim);
    display: flex; align-items: center; justify-content: center;
    color: var(--ob-success);
    animation: obPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.onboarding-page .success-screen__icon svg { width: 32px; height: 32px; }
@keyframes obPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.onboarding-page .success-screen h1 { margin-bottom: 8px; }

.onboarding-page .site-url-box {
    background: var(--ob-surface-alt);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-md);
    padding: 16px 20px;
    text-align: left;
}
.onboarding-page .site-url-box p { color: var(--ob-text-muted); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.onboarding-page .site-url { color: var(--ob-accent); font-weight: 600; }

.ob-success-actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

.onboarding-page .dashboard-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ob-accent);
    color: #fff;
    border-radius: var(--ob-radius-sm);
    padding: 13px 28px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: var(--ob-shadow-sm);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.onboarding-page .dashboard-btn:hover { background: var(--ob-accent-hover); box-shadow: var(--ob-shadow-md); }

.ob-secondary-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ob-surface);
    color: var(--ob-text);
    border: 1px solid var(--ob-border-strong);
    border-radius: var(--ob-radius-sm);
    padding: 13px 26px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.15s ease;
}
.ob-secondary-cta:hover { background: var(--ob-surface-alt); }

/* ── Misc utility ──────────────────────────────────────────────── */
.onboarding-page .hidden { display: none !important; }