/* FarmTab Seller Onboarding — signup wizard
 *
 * Every rule is scoped under .fso-wrap on purpose. The theme's info-page
 * reset (.ft-info-page *, margin/padding 0) sits at the same specificity as
 * a bare single-class selector, so ties were being decided by load order.
 * Scoping puts us at 0-2-0 and takes load order out of it.
 */
.fso-wrap.fso-wrap {
	/* Inherits the FarmTab palette when the theme is present, falls back
	   to its own values anywhere else. */
	--fso-green: var(--ft-green, #2f6f3e);
	--fso-green-dark: var(--ft-green-dark, #1a3a22);
	--fso-green-light: var(--ft-green-light, #e8f2ea);
	--fso-ink: var(--ft-text, #1a2e1c);
	--fso-body: var(--ft-text-mid, #3d5c42);
	--fso-muted: var(--ft-text-light, #6a8a6e);
	--fso-line: var(--ft-border, #dde8df);
	--fso-bg: var(--ft-green-xlight, #f2f7f3);
	--fso-radius: var(--ft-radius, 12px);
	--fso-radius-sm: var(--ft-radius-sm, 8px);
	--fso-shadow: var(--ft-shadow-md, 0 4px 32px rgba(26,58,34,0.12));

	max-width: 720px;
	margin: 0 auto;
	font-family: var(--ft-font-body, inherit);
	color: var(--fso-body);
}

.fso-wrap .fso-card {
	background: #fff;
	border: 1px solid var(--fso-line);
	border-radius: var(--fso-radius);
	box-shadow: var(--fso-shadow);
	padding: 32px;
	margin-bottom: 20px;
}

.fso-wrap .fso-card--notice {
	background: #fdf7e8;
	border-color: #e8dcbd;
}

.fso-wrap .fso-card h2 {
	margin: 0 0 8px;
	font-family: var(--ft-font-display, var(--font-display, inherit));
	font-size: clamp(1.4rem, 3vw, 1.85rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--fso-ink);
}

.fso-wrap .fso-eyebrow {
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--fso-green);
	margin-bottom: 10px;
}

.fso-wrap .fso-lede {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.6;
}

/* ── Step rail ─────────────────────────────────────────────────────────── */

.fso-wrap .fso-steps {
	display: flex;
	gap: 6px;
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	counter-reset: fso;
}

.fso-wrap .fso-steps li {
	flex: 1;
	counter-increment: fso;
	font-size: 12px;
	font-weight: 600;
	color: var(--fso-muted);
	padding-top: 10px;
	border-top: 3px solid var(--fso-line);
	transition: color .2s, border-color .2s;
}

.fso-wrap .fso-steps li::before {
	content: counter(fso) ". ";
}

.fso-wrap .fso-steps li.is-active,
.fso-wrap .fso-steps li.is-done {
	color: var(--fso-green);
	border-top-color: var(--fso-green);
}

/* ── Panels ────────────────────────────────────────────────────────────── */

.fso-wrap .fso-panel { display: none; }
.fso-wrap .fso-panel.is-active { display: block; }

/* ── Fields ────────────────────────────────────────────────────────────── */

.fso-wrap .fso-field { margin-bottom: 18px; }

.fso-wrap .fso-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--fso-ink);
	margin-bottom: 6px;
}

.fso-wrap .fso-optional {
	font-weight: 400;
	color: var(--fso-muted);
	text-transform: none;
}

.fso-wrap .fso-field input[type="text"],
.fso-wrap .fso-field input[type="email"],
.fso-wrap .fso-field input[type="url"],
.fso-wrap .fso-field input[type="tel"],
.fso-wrap .fso-field input[type="password"],
.fso-wrap .fso-field textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--fso-line);
	border-radius: var(--fso-radius-sm);
	font-size: 15px;
	font-family: inherit;
	background: var(--fso-bg);
	color: var(--fso-ink);
	box-sizing: border-box;
}

.fso-wrap .fso-field input:focus,
.fso-wrap .fso-field textarea:focus {
	outline: none;
	border-color: var(--fso-green);
	background: #fff;
}

.fso-wrap .fso-field input.fso-invalid {
	border-color: #c0392b;
	background: #fdf4f3;
}

.fso-wrap .fso-grid { display: grid; gap: 14px; }
.fso-wrap .fso-grid--2 { grid-template-columns: 1fr 1fr; }
.fso-wrap .fso-grid--3 { grid-template-columns: 2fr 1fr 1fr; }

@media (max-width: 560px) {
	.fso-wrap .fso-grid--2,
.fso-wrap .fso-grid--3 { grid-template-columns: 1fr; }
	.fso-wrap .fso-card { padding: 22px; }
}

/* ── Slug preview ──────────────────────────────────────────────────────── */

.fso-wrap .fso-slug {
	margin-top: 8px;
	font-size: 13px;
	min-height: 20px;
	color: var(--fso-muted);
}

.fso-wrap .fso-slug code {
	background: #f1f0ea;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 13px;
}

.fso-wrap .fso-slug--ok { color: #2c7a2c; }
.fso-wrap .fso-slug--bad { color: #c0392b; }

/* ── Hours ─────────────────────────────────────────────────────────────── */

.fso-wrap .fso-hours-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--fso-line);
}

.fso-wrap .fso-hours-row:last-child { border-bottom: none; }

.fso-wrap .fso-hours-day {
	width: 96px;
	font-size: 14px;
	font-weight: 600;
	color: var(--fso-ink);
}

.fso-wrap .fso-closed {
	font-size: 12px;
	color: var(--fso-muted);
	display: flex;
	align-items: center;
	gap: 5px;
	width: 78px;
}

.fso-wrap .fso-hours-row input[type="time"] {
	padding: 7px 9px;
	border: 1px solid var(--fso-line);
	border-radius: 7px;
	background: var(--fso-bg);
	font-size: 14px;
	color: var(--fso-ink);
}

.fso-wrap .fso-dash { font-size: 13px; color: var(--fso-muted); }

.fso-wrap .fso-hours-row.is-closed input[type="time"],
.fso-wrap .fso-hours-row.is-closed .fso-dash { opacity: .35; pointer-events: none; }

@media (max-width: 560px) {
	.fso-wrap .fso-hours-row { flex-wrap: wrap; }
	.fso-wrap .fso-hours-day { width: 100%; }
}

/* ── Products ──────────────────────────────────────────────────────────── */

.fso-wrap .fso-product {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--fso-line);
	border-radius: 10px;
	margin-bottom: 8px;
	background: var(--fso-bg);
}

.fso-wrap .fso-product.is-on {
	background: var(--fso-green-light);
	border-color: var(--fso-green);
}

.fso-wrap .fso-product-check {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	color: var(--fso-ink);
	cursor: pointer;
	flex: 1;
}

.fso-wrap .fso-product-fields {
	display: flex;
	align-items: center;
	gap: 6px;
}

.fso-wrap .fso-currency { color: var(--fso-muted); font-size: 14px; }

.fso-wrap .fso-product-price {
	width: 82px;
	padding: 7px 9px;
	border: 1px solid var(--fso-line);
	border-radius: 7px;
	font-size: 14px;
	background: #fff;
}

.fso-wrap .fso-product-unit,
.fso-wrap .fso-product-name-input {
	width: 110px;
	padding: 7px 9px;
	border: 1px solid var(--fso-line);
	border-radius: 7px;
	font-size: 14px;
	background: #fff;
}

.fso-wrap .fso-product-name-input { width: 100%; }

.fso-wrap .fso-remove {
	background: none;
	border: none;
	color: #b3563f;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	padding: 4px 6px;
}

@media (max-width: 560px) {
	.fso-wrap .fso-product { flex-wrap: wrap; }
	.fso-wrap .fso-product-fields { width: 100%; }
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.fso-wrap .fso-actions {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 26px;
}

.fso-wrap .fso-actions .fso-btn:only-child { margin-left: auto; }

.fso-wrap .fso-btn {
	appearance: none;
	font-family: inherit;
	border: 1px solid transparent;
	border-radius: 9px;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, opacity .15s;
}

.fso-wrap .fso-btn--primary {
	background: var(--fso-green);
	color: #fff;
	font-family: inherit;
}

.fso-wrap .fso-btn--primary:hover { background: var(--fso-green-dark); }

.fso-wrap .fso-btn--ghost {
	background: transparent;
	border-color: var(--fso-line);
	color: var(--fso-body);
}

.fso-wrap .fso-btn--sm { padding: 8px 14px; font-size: 13px; }

.fso-wrap .fso-btn[disabled] { opacity: .55; cursor: default; }

/* ── Messages ──────────────────────────────────────────────────────────── */

.fso-wrap .fso-msg {
	margin-top: 14px;
	font-size: 14px;
	line-height: 1.5;
	min-height: 20px;
}

.fso-wrap .fso-msg--error { color: #c0392b; }
.fso-wrap .fso-msg--ok { color: #2c7a2c; }

.fso-wrap .fso-terms {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: 13px;
	line-height: 1.5;
	margin-top: 6px;
}

.fso-wrap .fso-captcha { margin: 6px 0 18px; }

/* ── Progress ──────────────────────────────────────────────────────────── */

.fso-wrap .fso-progress-list {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.fso-wrap .fso-progress-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	font-size: 15px;
	border-bottom: 1px solid var(--fso-line);
	color: var(--fso-muted);
}

.fso-wrap .fso-progress-list li:last-child { border-bottom: none; }
.fso-wrap .fso-progress-list li.is-done { color: var(--fso-ink); }

.fso-wrap .fso-dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--fso-line);
	flex: 0 0 18px;
}

.fso-wrap .is-done .fso-dot {
	background: var(--fso-green);
	border-color: var(--fso-green);
}

.fso-wrap .is-running .fso-dot {
	border-color: var(--fso-green);
	border-top-color: transparent;
	animation: fso-spin .8s linear infinite;
}

@keyframes fso-spin { to { transform: rotate(360deg); } }