/**
 * Truck Quote — Wizard styles.
 *
 * Mobile-first, modern CSS (variables + grid + flexbox). No frameworks.
 * All styles are namespaced under .tq-wizard to avoid clashing with the theme.
 * "JM Wilson" identity: corporate blue as the primary color.
 *
 * Rebranding: tweak the variables in :root / .tq-wizard.
 */

/* -------------------------------------------------------------------------
 * 1. Design tokens (variables)
 * ---------------------------------------------------------------------- */
.tq-wizard {
	--tq-primary: #283d75;          /* Brand primary */
	--tq-primary-dark: #1e2e58;
	--tq-primary-darker: #141f3c;
	--tq-primary-light: #eaedf6;
	--tq-primary-200: #b7c0dc;

	--tq-secondary: #b49532;        /* Brand secondary (gold) */
	--tq-secondary-dark: #8a701d;
	--tq-secondary-light: #f7f0dc;
	--tq-secondary-200: #e6d5a3;

	--tq-accent: #cd5c54;           /* Brand accent (coral) */
	--tq-accent-dark: #b3453d;
	--tq-accent-light: #fbeae8;

	--tq-ink: #1a2433;              /* Primary text */
	--tq-ink-soft: #5a6b80;         /* Secondary text */
	--tq-muted: #8a97a8;
	--tq-line: #dbe3ec;             /* Borders */
	--tq-bg: #ffffff;
	--tq-bg-soft: #f4f7fb;
	--tq-bg-card: #ffffff;

	--tq-success: #1f9d55;
	--tq-danger: #cd5c54;           /* = accent: errors / required */
	--tq-danger-light: #fbeae8;
	--tq-warning: #8a701d;          /* = secondary-dark: info/status */
	--tq-warning-light: #f7f0dc;

	--tq-radius: 14px;
	--tq-radius-sm: 9px;
	--tq-radius-pill: 999px;

	--tq-shadow-sm: 0 1px 2px rgba(20, 31, 60, .06);
	--tq-shadow: 0 6px 22px rgba(20, 31, 60, .10);
	--tq-shadow-lg: 0 18px 48px rgba(20, 31, 60, .16);

	--tq-gap: 18px;
	--tq-focus: 0 0 0 3px rgba(40, 61, 117, .28);

	--tq-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Sit above stray theme overlays/pseudo-elements so nothing invisible can
	   capture taps on top of the wizard (common cause of "can't tap" on mobile). */
	position: relative;
	z-index: 1;

	max-width: 860px;
	margin: 0 auto;
	color: var(--tq-ink);
	font-family: var(--tq-font);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* Minimal local reset so we don't inherit theme quirks. */
.tq-wizard *,
.tq-wizard *::before,
.tq-wizard *::after {
	box-sizing: border-box;
}

.tq-wizard h2,
.tq-wizard h3,
.tq-wizard h4,
.tq-wizard p {
	margin: 0;
}

/*
 * The `hidden` attribute must always win. Author `display` rules (e.g. the
 * flex buttons below) otherwise override the user-agent `[hidden]` style, so
 * JS-toggled elements (next/prev/submit buttons, empty states...) would never
 * actually hide.
 */
.tq-wizard [hidden] { display: none !important; }

/* -------------------------------------------------------------------------
 * 2. Intro
 * ---------------------------------------------------------------------- */
.tq-wizard__intro {
	text-align: center;
	margin-bottom: 22px;
}

.tq-wizard__title {
	font-size: clamp(1.4rem, 4vw, 2rem);
	font-weight: 700;
	color: var(--tq-primary-dark);
	letter-spacing: -0.01em;
}

.tq-wizard__lead {
	margin-top: 6px;
	color: var(--tq-ink-soft);
}

/* -------------------------------------------------------------------------
 * 3. Progress bar
 * ---------------------------------------------------------------------- */
.tq-progress {
	margin-bottom: 16px;
}

.tq-progress__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
	font-size: .9rem;
	color: var(--tq-ink-soft);
}

.tq-progress__label strong {
	color: var(--tq-primary);
}

.tq-progress__percent {
	font-weight: 700;
	color: var(--tq-primary);
	font-variant-numeric: tabular-nums;
}

.tq-progress__track {
	height: 8px;
	background: var(--tq-bg-soft);
	border-radius: var(--tq-radius-pill);
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(20, 31, 60, .08);
}

.tq-progress__fill {
	height: 100%;
	width: 0;
	border-radius: var(--tq-radius-pill);
	background: linear-gradient(90deg, var(--tq-primary), var(--tq-secondary));
	transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

/* -------------------------------------------------------------------------
 * 4. Stepper (navigation chips)
 * ---------------------------------------------------------------------- */
.tq-stepper {
	margin-bottom: 20px;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.tq-stepper__list {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 4px 2px;
	min-width: max-content;
}

.tq-stepper__btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--tq-bg-soft);
	border: 1px solid var(--tq-line);
	border-radius: var(--tq-radius-pill);
	padding: 7px 14px 7px 8px;
	cursor: pointer;
	font-family: inherit;
	font-size: .82rem;
	color: var(--tq-ink-soft);
	white-space: nowrap;
	transition: background .2s, border-color .2s, color .2s;
}

.tq-stepper__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--tq-bg);
	border: 1px solid var(--tq-line);
	font-weight: 700;
	font-size: .8rem;
	color: var(--tq-ink-soft);
	transition: inherit;
}

.tq-stepper__item.is-active .tq-stepper__btn {
	background: var(--tq-primary);
	border-color: var(--tq-primary);
	color: #fff;
}

.tq-stepper__item.is-active .tq-stepper__num {
	background: #fff;
	border-color: #fff;
	color: var(--tq-primary);
}

.tq-stepper__item.is-complete .tq-stepper__btn {
	background: var(--tq-primary-light);
	border-color: var(--tq-primary-200);
	color: var(--tq-primary-dark);
}

.tq-stepper__item.is-complete .tq-stepper__num {
	background: var(--tq-primary);
	border-color: var(--tq-primary);
	color: #fff;
}

.tq-stepper__item.is-complete .tq-stepper__num::after {
	content: "✓";
}

.tq-stepper__item.is-complete .tq-stepper__num { font-size: 0; }
.tq-stepper__item.is-complete .tq-stepper__num::after { font-size: .85rem; }

.tq-stepper__btn:focus-visible {
	outline: none;
	box-shadow: var(--tq-focus);
}

/* On small screens hide the long text, keep the number. */
@media (max-width: 640px) {
	.tq-stepper__title { display: none; }
	.tq-stepper__btn { padding: 6px; }
}

/* -------------------------------------------------------------------------
 * 5. Step card + transitions
 * ---------------------------------------------------------------------- */
.tq-form {
	background: var(--tq-bg-card);
	border: 1px solid var(--tq-line);
	border-radius: var(--tq-radius);
	box-shadow: var(--tq-shadow);
	overflow: hidden;
}

.tq-steps {
	padding: clamp(18px, 4vw, 34px);
}

.tq-step[hidden] { display: none; }

.tq-step.is-active {
	animation: tq-step-in .4s cubic-bezier(.22, .61, .36, 1);
}

@keyframes tq-step-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.tq-step__head {
	margin-bottom: 22px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--tq-line);
}

.tq-step__eyebrow {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--tq-primary);
	background: var(--tq-primary-light);
	padding: 3px 10px;
	border-radius: var(--tq-radius-pill);
	margin-bottom: 10px;
}

.tq-step__title {
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	font-weight: 700;
	color: var(--tq-primary-dark);
}

.tq-step__subtitle {
	margin-top: 4px;
	color: var(--tq-ink-soft);
	font-size: .95rem;
}

/* -------------------------------------------------------------------------
 * 6. Grid + fields
 * ---------------------------------------------------------------------- */
.tq-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--tq-gap);
}

.tq-grid + .tq-grid,
.tq-grid + .tq-fieldset-title,
.tq-fieldset-title + .tq-grid { margin-top: 6px; }

.tq-col--full    { grid-column: span 12; }
.tq-col--half    { grid-column: span 6; }
.tq-col--third   { grid-column: span 4; }
.tq-col--quarter { grid-column: span 3; }

@media (max-width: 640px) {
	.tq-col--half,
	.tq-col--third,
	.tq-col--quarter { grid-column: span 12; }
}

.tq-fieldset-title {
	grid-column: span 12;
	font-size: 1rem;
	font-weight: 700;
	color: var(--tq-primary-dark);
	margin: 18px 0 2px;
}

.tq-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tq-field__label {
	font-size: .88rem;
	font-weight: 600;
	color: var(--tq-ink);
	margin-bottom: 6px;
}

.tq-req { color: var(--tq-danger); }

.tq-input {
	width: 100%;
	font-family: inherit;
	font-size: 1rem;
	color: var(--tq-ink);
	background: var(--tq-bg);
	border: 1.5px solid var(--tq-line);
	border-radius: var(--tq-radius-sm);
	padding: 12px 14px;
	min-height: 48px;                /* comfortable touch target */
	transition: border-color .18s, box-shadow .18s, background .18s;
	appearance: none;
	touch-action: manipulation;
}

.tq-textarea {
	min-height: 96px;
	resize: vertical;
	line-height: 1.5;
}

.tq-input::placeholder { color: var(--tq-muted); }

.tq-input:hover { border-color: var(--tq-primary-200); }

.tq-input:focus {
	outline: none;
	border-color: var(--tq-primary);
	box-shadow: var(--tq-focus);
	background: #fff;
}

.tq-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
	cursor: pointer;
}

/*
 * Date inputs: the whole field is clickable (JS opens the picker), and the
 * native calendar indicator is forced visible with a branded glyph — some
 * themes render it transparent/white so users can't see it.
 */
.tq-input[type="date"] { cursor: pointer; }

.tq-input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 1;
	cursor: pointer;
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23283d75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}

.tq-field__help {
	margin-top: 6px;
	font-size: .8rem;
	color: var(--tq-muted);
}

.tq-field__error {
	display: none;
	margin-top: 6px;
	font-size: .8rem;
	font-weight: 600;
	color: var(--tq-danger);
}

/* Error state */
.tq-field.is-invalid .tq-input,
.tq-field.is-invalid .tq-radios {
	border-color: var(--tq-danger);
	background: var(--tq-danger-light);
}

.tq-field.is-invalid .tq-field__error { display: block; }

.tq-field.is-invalid .tq-input:focus {
	box-shadow: 0 0 0 3px rgba(205, 92, 84, .22);
}

/* Valid state (subtle feedback) */
.tq-field.is-valid .tq-input {
	border-color: var(--tq-success);
}

/* Autofilled state (Phase 2): gold highlight = "review this value".
   Cleared as soon as the user edits the field. */
.tq-field.is-autofilled .tq-input,
.tq-field.is-autofilled .tq-select {
	border-color: var(--tq-secondary);
	background: var(--tq-secondary-light);
	animation: tq-autofill .6s ease;
}

@keyframes tq-autofill {
	0%   { box-shadow: 0 0 0 0 rgba(180, 149, 50, .55); }
	100% { box-shadow: 0 0 0 8px rgba(180, 149, 50, 0); }
}

/* Radios */
.tq-radios {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	border: 1.5px solid transparent;
	border-radius: var(--tq-radius-sm);
}

.tq-radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	border: 1.5px solid var(--tq-line);
	border-radius: var(--tq-radius-sm);
	cursor: pointer;
	background: var(--tq-bg);
	font-size: .95rem;
	transition: border-color .18s, background .18s;
	min-height: 46px;
}

.tq-radio:hover { border-color: var(--tq-primary-200); }

.tq-radio input { accent-color: var(--tq-primary); width: 18px; height: 18px; }

.tq-radio:has(input:checked) {
	border-color: var(--tq-primary);
	background: var(--tq-primary-light);
	font-weight: 600;
	color: var(--tq-primary-dark);
}

/* Checkbox */
.tq-check {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	cursor: pointer;
	font-size: .95rem;
	color: var(--tq-ink);
	line-height: 1.45;
}

.tq-check input {
	margin-top: 2px;
	width: 20px;
	height: 20px;
	accent-color: var(--tq-primary);
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
 * 7. Buttons
 * ---------------------------------------------------------------------- */
.tq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	padding: 13px 22px;
	min-height: 48px;
	border-radius: var(--tq-radius-sm);
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform .12s, background .2s, border-color .2s, box-shadow .2s, color .2s;
	touch-action: manipulation;
}

.tq-btn:active { transform: translateY(1px); }

.tq-btn:focus-visible { outline: none; box-shadow: var(--tq-focus); }

.tq-btn--primary {
	background: var(--tq-primary);
	color: #fff;
	box-shadow: var(--tq-shadow-sm);
}

.tq-btn--primary:hover { background: var(--tq-primary-dark); }

.tq-btn--secondary {
	background: var(--tq-secondary-light);
	color: var(--tq-secondary-dark);
	border-color: var(--tq-secondary-200);
}

.tq-btn--secondary:hover { background: #f0e6c8; }

.tq-btn--ghost {
	background: transparent;
	color: var(--tq-ink-soft);
	border-color: var(--tq-line);
}

.tq-btn--ghost:hover { background: var(--tq-bg-soft); color: var(--tq-ink); }

.tq-btn[disabled],
.tq-btn.is-loading {
	opacity: .7;
	cursor: not-allowed;
	pointer-events: none;
}

/* Loading spinner (autofill buttons) — prepended before the label. */
.tq-btn.is-loading::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	animation: tq-spin .6s linear infinite;
}

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

/* Add / remove */
.tq-btn--add {
	background: transparent;
	color: var(--tq-primary);
	border: 1.5px dashed var(--tq-primary-200);
	width: 100%;
	margin-top: 14px;
}

.tq-btn--add:hover { background: var(--tq-primary-light); border-style: solid; }

.tq-btn--remove {
	background: transparent;
	color: var(--tq-danger);
	border: 1.5px solid transparent;
	padding: 8px;
	min-height: 40px;
	min-width: 40px;
	font-size: 1.2rem;
}

.tq-btn--remove:hover { background: var(--tq-danger-light); }

.tq-btn--remove-text {
	font-size: .85rem;
	padding: 6px 12px;
	min-height: 36px;
}

/* "Coming soon" badge */
.tq-badge {
	font-size: .62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 3px 7px;
	border-radius: var(--tq-radius-pill);
}

.tq-badge--soon {
	background: var(--tq-warning-light);
	color: var(--tq-warning);
}

/* -------------------------------------------------------------------------
 * 8. Lookup block (Step 1 "Complete")
 * ---------------------------------------------------------------------- */
.tq-lookup {
	background: var(--tq-bg-soft);
	border: 1px solid var(--tq-line);
	border-radius: var(--tq-radius);
	padding: 18px;
	margin-bottom: 20px;
}

.tq-lookup__action {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}

.tq-lookup__hint {
	font-size: .82rem;
	color: var(--tq-muted);
}

.tq-lookup__status,
.tq-vin__status {
	font-size: .82rem;
	font-weight: 600;
}

.tq-lookup__status.is-info,
.tq-vin__status.is-info { color: var(--tq-warning); }

.tq-lookup__status.is-error,
.tq-vin__status.is-error { color: var(--tq-danger); }

.tq-lookup__status.is-success,
.tq-vin__status.is-success { color: var(--tq-success); }

/* -------------------------------------------------------------------------
 * 9. Repeater (dynamic grids)
 * ---------------------------------------------------------------------- */
.tq-repeater { margin-top: 6px; }

.tq-repeater__head {
	display: grid;
	grid-template-columns: 1.2fr 1.4fr 1fr 1fr 44px;
	gap: 10px;
	padding: 0 4px 8px;
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tq-muted);
}

.tq-repeater__head--drivers {
	grid-template-columns: 1.4fr 1fr 1fr .8fr .7fr 44px;
}

.tq-repeater__rows { display: flex; flex-direction: column; gap: 10px; }

.tq-repeater__row {
	display: grid;
	grid-template-columns: 1.2fr 1.4fr 1fr 1fr 44px;
	gap: 10px;
	align-items: center;
	padding: 10px;
	background: var(--tq-bg-soft);
	border: 1px solid var(--tq-line);
	border-radius: var(--tq-radius-sm);
	animation: tq-step-in .28s ease;
}

.tq-repeater__row--drivers {
	grid-template-columns: 1.4fr 1fr 1fr .8fr .7fr 44px;
}

.tq-repeater__cell { min-width: 0; }
.tq-repeater__cell .tq-input { min-height: 44px; padding: 9px 11px; }

.tq-repeater__cell--action {
	display: flex;
	justify-content: center;
}

.tq-repeater__empty {
	padding: 16px;
	text-align: center;
	color: var(--tq-muted);
	font-size: .9rem;
	background: var(--tq-bg-soft);
	border: 1px dashed var(--tq-line);
	border-radius: var(--tq-radius-sm);
}

/* Responsive repeater: rows become stacked cards with labels */
@media (max-width: 720px) {
	.tq-repeater__head { display: none; }

	.tq-repeater__row,
	.tq-repeater__row--drivers {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		position: relative;
		padding: 14px;
	}

	.tq-repeater__cell::before {
		content: attr(data-label);
		display: block;
		font-size: .72rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: var(--tq-muted);
		margin-bottom: 4px;
	}

	.tq-repeater__cell--action {
		position: absolute;
		top: 8px;
		right: 8px;
	}

	.tq-repeater__cell--action::before { display: none; }
}

/* -------------------------------------------------------------------------
 * 10. Unit card (Step 6)
 * ---------------------------------------------------------------------- */
.tq-repeater--cards .tq-repeater__rows { gap: 16px; }

.tq-unit-card {
	background: var(--tq-bg-soft);
	border: 1px solid var(--tq-line);
	border-radius: var(--tq-radius);
	padding: 18px;
	animation: tq-step-in .28s ease;
}

.tq-unit-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}

.tq-unit-card__title {
	font-weight: 700;
	color: var(--tq-primary-dark);
}

/* VIN + decode */
.tq-vin { display: flex; gap: 10px; align-items: stretch; }

.tq-vin__input {
	text-transform: uppercase;
	letter-spacing: .04em;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.tq-vin .tq-btn--decode { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 540px) {
	.tq-vin { flex-direction: column; }
}

/* -------------------------------------------------------------------------
 * 11. Dropzones (Step 9)
 * ---------------------------------------------------------------------- */
.tq-uploads { display: grid; gap: 22px; }

.tq-upload-block__label {
	font-size: 1rem;
	font-weight: 700;
	color: var(--tq-primary-dark);
}

.tq-upload-block__desc {
	font-size: .85rem;
	color: var(--tq-ink-soft);
	margin: 2px 0 10px;
}

.tq-dropzone { position: relative; }

.tq-dropzone__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 28px 18px;
	background: var(--tq-bg-soft);
	border: 2px dashed var(--tq-primary-200);
	border-radius: var(--tq-radius);
	color: var(--tq-ink-soft);
	cursor: pointer;
	font-family: inherit;
	text-align: center;
	transition: background .2s, border-color .2s;
}

.tq-dropzone__inner:hover,
.tq-dropzone.is-dragover .tq-dropzone__inner {
	background: var(--tq-primary-light);
	border-color: var(--tq-primary);
}

.tq-dropzone__icon { color: var(--tq-primary); }

.tq-dropzone__text strong { display: block; color: var(--tq-ink); font-size: .95rem; }
.tq-dropzone__text span { font-size: .85rem; }
.tq-dropzone__hint { color: var(--tq-muted); font-size: .76rem; }

.tq-dropzone__previews {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.tq-preview {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	background: var(--tq-bg);
	border: 1px solid var(--tq-line);
	border-radius: var(--tq-radius-sm);
	animation: tq-step-in .25s ease;
}

.tq-preview__thumb {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
	background: var(--tq-bg-soft);
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tq-primary);
	font-size: .7rem;
	font-weight: 700;
	overflow: hidden;
}

.tq-preview__meta { flex: 1 1 auto; min-width: 0; }

.tq-preview__name {
	display: block;
	font-size: .88rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tq-preview__size { font-size: .78rem; color: var(--tq-muted); }

.tq-preview__remove {
	flex: 0 0 auto;
	border: none;
	background: transparent;
	color: var(--tq-danger);
	cursor: pointer;
	font-size: 1.2rem;
	line-height: 1;
	padding: 6px;
	border-radius: 6px;
}

.tq-preview__remove:hover { background: var(--tq-danger-light); }

/* -------------------------------------------------------------------------
 * 12. Info note + review
 * ---------------------------------------------------------------------- */
.tq-note {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px 16px;
	background: var(--tq-primary-light);
	border: 1px solid var(--tq-primary-200);
	border-radius: var(--tq-radius-sm);
	color: var(--tq-primary-darker);
	font-size: .88rem;
	margin-bottom: 20px;
}

.tq-note__icon { font-weight: 700; }

.tq-review {
	border: 1px solid var(--tq-line);
	border-radius: var(--tq-radius);
	overflow: hidden;
	margin-bottom: 22px;
}

.tq-review__placeholder { padding: 20px; color: var(--tq-muted); text-align: center; }

.tq-review__group { border-bottom: 1px solid var(--tq-line); }
.tq-review__group:last-child { border-bottom: none; }

.tq-review__group-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: var(--tq-bg-soft);
	font-weight: 700;
	font-size: .9rem;
	color: var(--tq-primary-dark);
}

.tq-review__edit {
	border: none;
	background: transparent;
	color: var(--tq-primary);
	font-size: .8rem;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}

.tq-review__items { padding: 8px 16px 14px; }

.tq-review__item {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 5px 0;
	font-size: .88rem;
}

.tq-review__key { color: var(--tq-ink-soft); }
.tq-review__val { font-weight: 600; text-align: right; word-break: break-word; }

/* Submission success screen (replaces the wizard after submit). */
.tq-success {
	text-align: center;
	padding: clamp(28px, 6vw, 56px) 24px;
	background: var(--tq-bg-card);
	border: 1px solid var(--tq-line);
	border-radius: var(--tq-radius);
	box-shadow: var(--tq-shadow);
	animation: tq-step-in .4s ease;
}

.tq-success__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--tq-primary-light);
	color: var(--tq-success);
	font-size: 2rem;
	font-weight: 700;
}

.tq-success__title {
	font-size: clamp(1.2rem, 3vw, 1.6rem);
	font-weight: 700;
	color: var(--tq-primary-dark);
	max-width: 34ch;
	margin: 0 auto;
}

.tq-success__ref {
	margin-top: 10px;
	color: var(--tq-ink-soft);
}

.tq-success__ref strong {
	color: var(--tq-primary);
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	letter-spacing: .03em;
}

/* -------------------------------------------------------------------------
 * 13. Navigation (footer)
 * ---------------------------------------------------------------------- */
.tq-wizard__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 18px clamp(18px, 4vw, 34px);
	border-top: 1px solid var(--tq-line);
	background: var(--tq-bg-soft);
}

.tq-wizard__nav-right {
	display: flex;
	gap: 10px;
	margin-left: auto;
}

.tq-form__hint {
	margin: 0;
	padding: 12px clamp(18px, 4vw, 34px);
	background: var(--tq-danger-light);
	color: var(--tq-danger);
	font-size: .88rem;
	font-weight: 600;
	text-align: center;
}

@media (max-width: 480px) {
	.tq-wizard__nav { flex-wrap: wrap; }
	.tq-btn { width: 100%; }
	.tq-wizard__nav-right { flex-direction: column; width: 100%; }
	.tq-btn--add { width: 100%; }
}

/* Single-step variant (standalone step shortcode) */
.tq-wizard--single .tq-form,
.tq-wizard--single .tq-steps { border: none; box-shadow: none; padding: 0; }

.tq-wizard--single .tq-steps {
	background: var(--tq-bg-card);
	border: 1px solid var(--tq-line);
	border-radius: var(--tq-radius);
	box-shadow: var(--tq-shadow);
	padding: clamp(18px, 4vw, 30px);
}

/* -------------------------------------------------------------------------
 * 14. Accessibility: reduce motion
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.tq-wizard *,
	.tq-wizard *::before,
	.tq-wizard *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}