/*
 * BlueSleuth Sell My Boat — public intake wizard.
 * EVERYTHING is scoped under `.bs-smb` so it can never collide with the broker's theme. All colours
 * come from CSS variables: the per-broker brand palette (--bs-accent primary, --bs-gold secondary)
 * is injected inline on the wrapper from Settings; the neutral ground/surface/ink/border tokens are
 * defined here for light and dark. System font stack only — no external font is loaded.
 */

.bs-smb {
	--bs-accent: #1a5aa6;              /* primary — overridden inline per broker */
	--bs-gold: #cf9f34;               /* secondary — overridden inline per broker */
	--bs-ground: #eef2f6;
	--bs-surface: #ffffff;
	--bs-surface-2: #f7f9fb;
	--bs-ink: #14202b;
	--bs-ink-2: #5b6b7a;
	--bs-border: #dfe4ea;
	--bs-error: #d63638;
	--bs-error-bg: #fbeaea;
	--bs-error-bd: #f0c2c2;
	--bs-radius: 12px;

	color-scheme: light dark;
	max-width: 940px;
	margin: 0 auto;
	color: var(--bs-ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	box-sizing: border-box;
}
.bs-smb *, .bs-smb *::before, .bs-smb *::after { box-sizing: inherit; }

@media (prefers-color-scheme: dark) {
	.bs-smb:not([data-theme="light"]) {
		--bs-ground: #10161d;
		--bs-surface: #161d25;
		--bs-surface-2: #1c2530;
		--bs-ink: #e8edf2;
		--bs-ink-2: #9fb0bf;
		--bs-border: #2a3540;
		--bs-error: #ff6b6d;
		--bs-error-bg: #2a1618;
		--bs-error-bd: #542a2c;
	}
}

.bs-smb .smb-form {
	background: var(--bs-surface);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	padding: 26px;
}
.bs-smb .smb-title { margin: 0 0 20px; font-size: 1.55rem; color: var(--bs-ink); line-height: 1.2; }
.bs-smb .smb-req { color: var(--bs-error); font-weight: 700; }

/* ---- Numbered progress bar --------------------------------------------- */
.bs-smb .smb-steps { display: flex; list-style: none; margin: 0 0 24px; padding: 0; }
.bs-smb .smb-steps-item {
	flex: 1 1 0; min-width: 0; position: relative;
	display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.bs-smb .smb-steps-item::before {
	content: ""; position: absolute; top: 17px; right: 50%; left: -50%; height: 3px;
	background: var(--bs-border); z-index: 0; border-radius: 3px;
}
.bs-smb .smb-steps-item:first-child::before { display: none; }
.bs-smb .smb-steps-item.is-done::before { background: var(--bs-gold); }
.bs-smb .smb-steps-item.is-current::before { background: var(--bs-accent); }

.bs-smb .smb-steps-num {
	position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%;
	display: grid; place-items: center; background: var(--bs-surface);
	border: 2px solid var(--bs-border); color: var(--bs-ink-2); font-weight: 700; font-size: .95rem;
	transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.bs-smb .smb-steps-num .smb-steps-check { display: none; font-size: 1.05rem; }
.bs-smb .smb-steps-item.is-current .smb-steps-num {
	border-color: var(--bs-accent); color: var(--bs-accent); background: var(--bs-surface);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-accent) 18%, transparent);
}
.bs-smb .smb-steps-item.is-done .smb-steps-num {
	background: var(--bs-gold); border-color: var(--bs-gold); color: #1b1b1b;
}
.bs-smb .smb-steps-item.is-done .smb-steps-n { display: none; }
.bs-smb .smb-steps-item.is-done .smb-steps-check { display: block; }

.bs-smb .smb-steps-text { display: flex; flex-direction: column; }
.bs-smb .smb-steps-label { font-weight: 700; font-size: .88rem; color: var(--bs-ink); }
.bs-smb .smb-steps-sub { font-size: .72rem; color: var(--bs-ink-2); }
.bs-smb .smb-steps-item:not(.is-current):not(.is-done) .smb-steps-label { color: var(--bs-ink-2); font-weight: 600; }

/* ---- Steps + fields ---------------------------------------------------- */
.bs-smb .smb-step[hidden] { display: none; }
.bs-smb .smb-step-head { margin: 0 0 18px; }
.bs-smb .smb-step-title { margin: 0; font-size: 1.2rem; color: var(--bs-ink); outline: none; }
.bs-smb .smb-step-sub { margin: 4px 0 0; color: var(--bs-ink-2); font-size: .9rem; }

.bs-smb .smb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.bs-smb .smb-field { display: flex; flex-direction: column; min-width: 0; }
.bs-smb .smb-field-wide { grid-column: 1 / -1; }
.bs-smb .smb-field label { font-weight: 600; margin-bottom: 5px; font-size: .86rem; color: var(--bs-ink); }
.bs-smb .smb-field input,
.bs-smb .smb-field select,
.bs-smb .smb-field textarea {
	width: 100%; min-height: 44px; padding: 10px 12px; font-size: 1rem; font-family: inherit;
	color: var(--bs-ink); background: var(--bs-surface);
	border: 1px solid var(--bs-border); border-radius: 9px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.bs-smb .smb-field textarea { min-height: 96px; resize: vertical; }
.bs-smb .smb-field input:focus,
.bs-smb .smb-field select:focus,
.bs-smb .smb-field textarea:focus {
	outline: none; border-color: var(--bs-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-accent) 22%, transparent);
}
.bs-smb .smb-field input.smb-invalid,
.bs-smb .smb-field select.smb-invalid,
.bs-smb .smb-field textarea.smb-invalid { border-color: var(--bs-error); background: var(--bs-error-bg); }
.bs-smb .smb-help { color: var(--bs-ink-2); font-size: .78rem; margin-top: 4px; }

.bs-smb .smb-field-inline { flex-direction: row; align-items: center; gap: 12px; }
.bs-smb .smb-field-inline label { margin: 0; white-space: nowrap; }
.bs-smb .smb-field-inline select { width: auto; min-width: 90px; }

/* Sub-headings inside a step (Engines, Tanks, Photos, Video, Documents). */
.bs-smb .smb-subhead {
	display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	margin: 26px 0 12px; padding-top: 16px; border-top: 1px solid var(--bs-border);
}
.bs-smb .smb-subhead:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }
.bs-smb .smb-subhead h4 { margin: 0; font-size: 1.02rem; color: var(--bs-ink); }

.bs-smb .smb-engine { border: 1px solid var(--bs-border); border-radius: 10px; padding: 14px; margin-top: 12px; background: var(--bs-surface-2); }
.bs-smb .smb-engine h5 { margin: 0 0 10px; font-size: .95rem; color: var(--bs-accent); }
.bs-smb .smb-tanks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bs-smb .smb-tank { border: 1px solid var(--bs-border); border-radius: 10px; padding: 14px; background: var(--bs-surface-2); }
.bs-smb .smb-tank h5 { margin: 0 0 10px; font-size: .92rem; color: var(--bs-ink); }
.bs-smb .smb-tank .smb-field { margin-bottom: 10px; }
.bs-smb .smb-tank .smb-field:last-child { margin-bottom: 0; }

/* ---- Buttons ----------------------------------------------------------- */
.bs-smb .smb-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 11px 22px; font-size: 1rem; font-weight: 600; font-family: inherit;
	border: 0; border-radius: 9px; cursor: pointer; color: #fff; background: var(--bs-accent);
	transition: filter .15s ease, background .15s ease;
}
.bs-smb .smb-btn:hover { filter: brightness(.93); }
.bs-smb .smb-primary { background: var(--bs-accent); color: #fff; }
.bs-smb .smb-btn-ghost {
	background: var(--bs-surface-2); color: var(--bs-ink); border: 1px solid var(--bs-border);
}
.bs-smb .smb-btn-ghost:hover { background: var(--bs-border); filter: none; }
.bs-smb .smb-btn:disabled { opacity: .6; cursor: default; filter: none; }
.bs-smb .smb-btn:focus-visible,
.bs-smb .smb-field input:focus-visible,
.bs-smb .smb-field select:focus-visible,
.bs-smb .smb-check input:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--bs-accent) 55%, transparent); outline-offset: 2px;
}

/* ---- Footer nav (Back · dots · continue) ------------------------------- */
.bs-smb .smb-nav { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.bs-smb .smb-nav .smb-next { margin-left: auto; }
.bs-smb .smb-dots { display: flex; gap: 8px; margin: 0 auto; }
.bs-smb .smb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bs-border); transition: background .2s ease, transform .2s ease; }
.bs-smb .smb-dot.is-active { background: var(--bs-accent); transform: scale(1.25); }

/* ---- Messages ---------------------------------------------------------- */
.bs-smb .smb-messages { margin: 0 0 16px; }
.bs-smb .smb-messages:empty { display: none; }
.bs-smb .smb-messages.smb-error {
	padding: 11px 13px; background: var(--bs-error-bg); border: 1px solid var(--bs-error-bd);
	color: var(--bs-error); border-radius: 9px;
}
.bs-smb .smb-notice.smb-error {
	padding: 14px; background: var(--bs-error-bg); border: 1px solid var(--bs-error-bd);
	color: var(--bs-error); border-radius: 9px;
}

/* ---- Photos ------------------------------------------------------------ */
.bs-smb .smb-photo-add,
.bs-smb .smb-video-add,
.bs-smb .smb-doc-add { display: inline-block; margin: 6px 0 12px; cursor: pointer; }
.bs-smb .smb-photo-add input[type="file"],
.bs-smb .smb-video-add input[type="file"],
.bs-smb .smb-doc-add input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.bs-smb .smb-photo-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.bs-smb .smb-photo { position: relative; border: 2px solid var(--bs-border); border-radius: 10px; overflow: hidden; background: var(--bs-surface-2); cursor: grab; }
.bs-smb .smb-photo.is-hero { border-color: var(--bs-accent); }
.bs-smb .smb-photo.is-dragging { opacity: .4; }
.bs-smb .smb-photo img { display: block; width: 100%; height: 104px; object-fit: cover; }
.bs-smb .smb-hero-badge { position: absolute; top: 6px; left: 6px; background: var(--bs-accent); color: #fff; font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.bs-smb .smb-photo-ctrls { display: flex; justify-content: center; gap: 5px; padding: 7px; background: var(--bs-surface); }
.bs-smb .smb-photo-ctrls button { border: 1px solid var(--bs-border); background: var(--bs-surface); color: var(--bs-ink); border-radius: 6px; min-width: 34px; height: 32px; cursor: pointer; font-size: .82rem; line-height: 1; }
.bs-smb .smb-photo-ctrls button:disabled { opacity: .35; cursor: default; }
.bs-smb .smb-photo-ctrls .smb-remove { color: var(--bs-error); }

/* ---- Video + Documents lists ------------------------------------------ */
.bs-smb .smb-video-upload { margin-top: 6px; }
.bs-smb .smb-video-list,
.bs-smb .smb-doc-list { list-style: none; margin: 8px 0 0; padding: 0; }
.bs-smb .smb-video-item,
.bs-smb .smb-doc {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 10px 12px; border: 1px solid var(--bs-border); border-radius: 8px; margin-bottom: 8px; background: var(--bs-surface-2);
}
.bs-smb .smb-video-name,
.bs-smb .smb-doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bs-ink); }
.bs-smb .smb-remove.smb-doc-remove,
.bs-smb .smb-remove.smb-video-remove { border: none; background: none; cursor: pointer; font-size: 16px; color: var(--bs-error); min-height: 32px; min-width: 32px; }

/* ---- Attestation + success -------------------------------------------- */
.bs-smb .smb-attest { margin-top: 16px; }
.bs-smb .smb-check { display: flex; align-items: flex-start; gap: 11px; font-weight: 500; color: var(--bs-ink); cursor: pointer; }
.bs-smb .smb-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--bs-accent); flex: 0 0 auto; }
.bs-smb .smb-success { text-align: center; padding: 34px 12px; }
.bs-smb .smb-success h3 { color: var(--bs-accent); margin-top: 0; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 640px) {
	.bs-smb .smb-form { padding: 16px; }
	.bs-smb .smb-tanks { grid-template-columns: 1fr; }
	.bs-smb .smb-steps-text { display: none; }              /* keep the bar to numbered circles on phones */
	.bs-smb .smb-steps-num { width: 32px; height: 32px; }
	.bs-smb .smb-steps-item::before { top: 15px; }
	.bs-smb .smb-nav .smb-next { padding-left: 16px; padding-right: 16px; }
	.bs-smb .smb-photo-list { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* Respect reduced-motion — no smooth scroll, no transitions. */
@media (prefers-reduced-motion: reduce) {
	.bs-smb *, .bs-smb *::before, .bs-smb *::after { transition: none !important; scroll-behavior: auto !important; }
}