/* =========================================================================
   Vendor Onboarding — Singair Mart  (.vo-* namespace)
   Registration form, limited dashboard, checklist + setup wizard.
   Reuses .vd-* primitives (buttons, cards, modal) from vendor-dashboard.css
   when on the dashboard; carries its own fallbacks for the register page.
   ========================================================================= */

:root {
	--vo-primary: var(--singair-primary, #ff6a21);
	--vo-ink:     #111827;
	--vo-muted:   #6b7280;
	--vo-line:    #eef0f3;
	--vo-border:  1px solid #e5e7eb;
	--vo-radius:  14px;
	--vo-radius-sm: 10px;
	--vo-shadow:  0 1px 3px rgba(17,24,39,.06), 0 1px 2px rgba(17,24,39,.04);
	--vo-green:   #16a34a;
	--vo-red:     #dc2626;
	--vo-amber:   #d97706;
	--vo-blue:    #2563eb;
}

/* ── Shared primitives (register page has no vendor-dashboard.css) ───────── */
.vo-card {
	background: #fff; border: var(--vo-border); border-radius: var(--vo-radius);
	box-shadow: var(--vo-shadow); padding: 1.5rem;
}
.vo-card--notice { display: flex; align-items: center; gap: .6rem; max-width: 560px; margin: 2rem auto; }
.vo-card--notice i { color: var(--vo-green); }

.vo-input {
	width: 100%; height: 44px; padding: 0 .9rem;
	border: var(--vo-border); border-radius: var(--vo-radius-sm);
	background: #fff; font-size: .9rem; color: var(--vo-ink); font-weight: 400;
	transition: border-color .18s ease;
}
textarea.vo-input { height: auto; padding: .65rem .9rem; resize: vertical; }
.vo-input:focus { outline: none; border-color: var(--vo-primary); box-shadow: 0 0 0 3px rgba(255,106,33,.12); }
.vo-input--color { padding: .2rem; height: 44px; cursor: pointer; }

.vo-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; font-size: .84rem; font-weight: 600; color: #374151; }
.vo-field em { color: var(--vo-red); font-style: normal; }
.vo-field__label { font-size: .84rem; font-weight: 600; color: #374151; display: block; margin-bottom: .35rem; }
.vo-field__label em { color: var(--vo-red); font-style: normal; }
.vo-field__error { display: none; color: var(--vo-red); font-weight: 500; font-size: .76rem; }
.vo-field__error.is-visible { display: block; }
.vo-field.has-error .vo-input { border-color: var(--vo-red); }

.vo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 640px) { .vo-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   REGISTRATION PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.vo-register { max-width: 560px; margin: 2.5rem auto 4rem; padding: 0 1rem; }
.vo-register__title { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .4rem; text-align: center; }
.vo-register__sub { color: var(--vo-muted); text-align: center; margin: 0 0 1.1rem; }
.vo-register__perks { display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; list-style: none; margin: 0 0 1.75rem; padding: 0; font-size: .82rem; font-weight: 600; }
.vo-register__perks i { color: var(--vo-green); margin-right: .3rem; }

.vo-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 560px) { .vo-form__row { grid-template-columns: 1fr; } }
.vo-form__submit { width: 100%; height: 48px; font-size: .95rem; margin-top: .5rem; }
.vo-form__login { text-align: center; font-size: .84rem; color: var(--vo-muted); margin: 1rem 0 0; }
.vo-form__login a { color: var(--vo-primary); font-weight: 600; }

/* Honeypot — visually removed, still in the DOM for bots */
.vo-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Password strength */
.vo-strength { display: flex; align-items: center; gap: .55rem; margin-top: .35rem; }
.vo-strength__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--vo-line); overflow: hidden; }
.vo-strength__bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--vo-red); transition: width .25s ease, background .25s ease; }
.vo-strength__label { font-size: .72rem; font-weight: 700; color: var(--vo-muted); min-width: 46px; text-align: right; }
.vo-strength.is-weak   .vo-strength__bar i { width: 33%; background: var(--vo-red); }
.vo-strength.is-fair   .vo-strength__bar i { width: 66%; background: var(--vo-amber); }
.vo-strength.is-strong .vo-strength__bar i { width: 100%; background: var(--vo-green); }

.vo-check { display: flex; align-items: flex-start; gap: .55rem; font-size: .84rem; margin: .25rem 0 1rem; font-weight: 400; }
.vo-check input { margin-top: .2rem; accent-color: var(--vo-primary); }
.vo-check a { color: var(--vo-primary); font-weight: 600; }

/* Verify-email notice */
.vo-verify { text-align: center; margin-top: 1.5rem; }
.vo-verify__icon {
	width: 62px; height: 62px; margin: 0 auto .9rem; border-radius: 50%;
	background: #fff1e9; color: var(--vo-primary); font-size: 1.5rem;
	display: flex; align-items: center; justify-content: center;
}
.vo-verify h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.vo-verify p { margin: 0 0 .5rem; color: var(--vo-muted); }
.vo-verify__hint { font-size: .82rem; }
.vo-verify .vd-btn, .vo-verify button { margin-top: .6rem; }

/* ══════════════════════════════════════════════════════════════════════════
   ONBOARDING DASHBOARD
   ══════════════════════════════════════════════════════════════════════════ */
/* The onboarding shell has no sidebar — cancel .vd-app's 2-column grid so
   .vd-content doesn't collapse into the 266px sidebar track. */
.vd-app--onboarding { display: block !important; }
.vd-app--onboarding .vd-content { max-width: 1100px; margin: 0 auto; width: 100%; }
.vo-topbar { gap: .7rem; }

/* Status banners */
.vo-banner {
	display: flex; gap: .8rem; align-items: flex-start;
	padding: 1rem 1.15rem; border-radius: var(--vo-radius-sm);
	font-size: .88rem; margin-bottom: 1.25rem; border: 1px solid transparent;
}
.vo-banner i { font-size: 1.1rem; margin-top: .1rem; }
.vo-banner strong { display: inline-block; margin-right: .3rem; }
.vo-banner__reason { margin: .4rem 0; font-style: italic; }
.vo-banner--green { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.vo-banner--green i { color: var(--vo-green); }
.vo-banner--amber { background: #fffbeb; border-color: #fde68a; color: #713f12; }
.vo-banner--amber i { color: var(--vo-amber); }
.vo-banner--red { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.vo-banner--red i { color: var(--vo-red); }
.vo-banner--blue { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.vo-banner--blue i { color: var(--vo-blue); }

/* Layout: checklist rail + wizard */
.vo-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .vo-layout { grid-template-columns: 1fr; } }
.vo-side { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 90px; }
@media (max-width: 900px) { .vo-side { position: static; } }

/* Progress card */
.vo-progress-card { padding: 1.4rem; }
.vo-progress__head { display: flex; align-items: baseline; gap: .5rem; }
.vo-progress__pct { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: var(--vo-primary); }
.vo-progress__cap { color: var(--vo-muted); font-size: .82rem; font-weight: 600; }
.vo-progress__bar { height: 9px; border-radius: 5px; background: var(--vo-line); overflow: hidden; margin: .7rem 0; }
.vo-progress__bar span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #ff8a4c, var(--vo-primary)); transition: width .4s ease; }
.vo-progress__eta { font-size: .78rem; color: var(--vo-muted); margin: 0 0 .5rem; }
.vo-progress__eta i { margin-right: .3rem; }

.vo-checklist { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.vo-checklist li { display: flex; align-items: center; gap: .55rem; font-size: .84rem; font-weight: 500; color: #374151; }
.vo-checklist li i { color: #d1d5db; font-size: .8rem; }
.vo-checklist li.is-done { color: var(--vo-muted); }
.vo-checklist li.is-done i { color: var(--vo-green); }
.vo-checklist li small { margin-left: auto; font-size: .68rem; color: #9ca3af; font-weight: 600; text-transform: uppercase; }

.vo-help { padding: 1.25rem; text-align: center; }
.vo-help i { font-size: 1.3rem; color: var(--vo-primary); margin-bottom: .4rem; }
.vo-help p { margin: 0 0 .7rem; font-size: .85rem; }

/* Step nav (horizontal pills) */
.vo-stepnav { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.25rem; }
.vo-stepnav__item {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .45rem .8rem; border-radius: 999px; cursor: pointer;
	border: var(--vo-border); background: #fff; font-size: .78rem; font-weight: 600; color: #4b5563;
	transition: all .18s ease;
}
.vo-stepnav__item:hover { border-color: var(--vo-primary); color: var(--vo-primary); }
.vo-stepnav__item.is-active { background: var(--vo-primary); border-color: var(--vo-primary); color: #fff; }
.vo-stepnav__item.is-done:not(.is-active) { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }
.vo-stepnav__num {
	width: 20px; height: 20px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,.06); font-size: .68rem; font-weight: 800;
}
.vo-stepnav__item.is-active .vo-stepnav__num { background: rgba(255,255,255,.25); }

/* Wizard step cards */
.vo-step { display: none; padding: 1.5rem; }
.vo-step.is-active { display: block; }
.vo-step__title { font-size: 1.15rem; font-weight: 800; margin: 0 0 1.1rem; }
.vo-step__title small { font-weight: 500; color: var(--vo-muted); font-size: .8rem; }
.vo-step__hint { font-size: .84rem; color: var(--vo-muted); margin: -0.6rem 0 1.1rem; }
.vo-step__foot {
	display: flex; align-items: center; gap: .75rem; justify-content: flex-end;
	margin-top: .5rem; padding-top: 1.1rem; border-top: var(--vo-line) solid 1px;
}
.vo-step__foot .vo-back { margin-right: auto; }
.vo-autosave { font-size: .76rem; color: var(--vo-muted); }
.vo-autosave.is-saved { color: var(--vo-green); }

/* Uploads */
.vo-upload { margin-bottom: 1rem; }
.vo-upload__drop {
	position: relative; border: 2px dashed #d1d5db; border-radius: var(--vo-radius-sm);
	min-height: 130px; display: flex; align-items: center; justify-content: center;
	background: #fafafa; cursor: pointer; transition: border-color .18s ease; overflow: hidden;
}
.vo-upload__drop:hover { border-color: var(--vo-primary); }
.vo-upload__drop.has-file { border-style: solid; background: #fff; }
.vo-upload__drop.is-uploading { opacity: .6; pointer-events: none; }
.vo-upload__cta { text-align: center; color: var(--vo-muted); font-size: .82rem; font-weight: 600; pointer-events: none; }
.vo-upload__cta i { display: block; font-size: 1.4rem; margin-bottom: .3rem; color: #9ca3af; }
.vo-upload__preview { pointer-events: none; }
.vo-upload__preview img { max-height: 120px; width: auto; border-radius: 8px; display: block; }
.vo-upload__file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.vo-upload__tools { display: flex; gap: .8rem; margin-top: .45rem; }
.vo-upload__tools button {
	background: none; border: 0; padding: 0; cursor: pointer;
	font-size: .76rem; font-weight: 600; color: var(--vo-muted);
}
.vo-upload__tools button:hover { color: var(--vo-primary); }
.vo-upload__tools .vo-upload__remove:hover { color: var(--vo-red); }

/* Review & submit */
.vo-review-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; }
.vo-review-list li { display: flex; align-items: center; gap: .6rem; padding: .7rem 0; border-bottom: var(--vo-line) solid 1px; font-size: .88rem; font-weight: 500; }
.vo-review-list li:last-child { border-bottom: 0; }
.vo-review-list li.is-done i { color: var(--vo-green); }
.vo-review-list li.is-missing i { color: var(--vo-amber); }
.vo-review-list li.is-optional i { color: #d1d5db; }
.vo-review-edit { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--vo-primary); font-weight: 600; font-size: .78rem; }
.vo-review-edit:hover { text-decoration: underline; }
.vo-submit-wrap { text-align: center; padding-top: .5rem; }
.vo-submit-wrap .vd-btn { min-width: 240px; height: 48px; font-size: .95rem; }
.vo-submit-wrap .vd-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.vo-submit-hint { font-size: .8rem; color: var(--vo-amber); margin: .6rem 0 0; }

/* Confirm modal */
.vo-confirm { max-width: 420px; text-align: center; }
.vo-confirm__icon { font-size: 1.8rem; color: var(--vo-primary); margin-bottom: .6rem; }
.vo-confirm h3 { margin: 0 0 .4rem; }
.vo-confirm p { color: var(--vo-muted); font-size: .88rem; }
.vo-confirm__actions { display: flex; gap: .7rem; justify-content: center; margin-top: 1.1rem; }

.vo-locked { text-align: center; padding: 3rem 1.5rem; color: var(--vo-muted); }
.vo-locked i { font-size: 1.6rem; display: block; margin-bottom: .6rem; }

/* ── .vd-* fallbacks for pages without vendor-dashboard.css (register page) ──
   Identical declarations to vendor-dashboard.css, so double-loading is a no-op. */
.vd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
	height: 40px; padding: 0 1rem; border-radius: 10px;
	font-weight: 600; font-size: .82rem; cursor: pointer; border: 1px solid #e5e7eb;
	background: #fff; color: #111827; text-decoration: none;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.vd-btn:hover { transform: translateY(-1px); }
.vd-btn--primary { background: var(--vo-primary); border-color: var(--vo-primary); color: #fff; }
.vd-btn--primary:hover { background: #e85d13; }
.vd-btn--sm { height: 34px; padding: 0 .8rem; font-size: .78rem; }
.vd-btn--block { width: 100%; }
.vd-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: var(--vo-shadow); }
.vd-modal {
	position: fixed; inset: 0; z-index: 1000; display: none;
	align-items: center; justify-content: center; padding: 1rem;
	background: rgba(17,24,39,.5); backdrop-filter: blur(2px);
}
.vd-modal.is-open { display: flex; }
.vd-modal__box { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(17,24,39,.12); }
.vd-modal__body { padding: 1.5rem; }