/* 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); }

/* ── 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; }