/* Loan application form ([qn_apply]). Controls use the shared .qn-* classes and tokens from the qn-child theme. */

.qn-apply { scroll-margin-top: calc(var(--qn-header-h) + 16px); }
/* On the children: the theme's .entry-content rule sets max-width on direct children of the content. */
.qn-apply > * { max-width: 720px; margin-left: auto; margin-right: auto; }

/* Step 1 asks its question in the heading; its legend stays for screen readers only. */
.qn-apply__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.qn-apply__bar {
	height: 6px;
	margin-bottom: 16px;
	border-radius: 999px;
	background: var(--qn-line);
	overflow: hidden;
}
.qn-apply__bar > span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--qn-primary);
	transition: width .25s ease;
}

.qn-apply__title { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 0 0 20px; }

/* After the contact step: the visitor knows the call is coming whether or not they finish. */
.qn-apply__saved { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 12px 14px; border-radius: var(--qn-radius-sm); background: var(--qn-primary-soft); color: var(--qn-ink); font-size: .95rem; line-height: 1.45; }
.qn-apply__saved svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--qn-ok); }
.qn-apply__title:focus { outline: none; }

.qn-apply__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.qn-apply__f { min-width: 0; grid-column: 1 / -1; }
/* First and last name are short: side by side even on a phone, so the contact step fits one screen. */
.qn-apply [data-field="first_name"],
.qn-apply [data-field="last_name"] { grid-column: auto; }
.qn-apply__f > .qn-field,
.qn-apply__f > .qn-seg { margin-bottom: 0; }
.qn-apply__f > .qn-error { margin: 6px 0 0; }
@media (min-width: 600px) {
	.qn-apply__f--half { grid-column: auto; }
}
/* .qn-btn and other shared classes set display, which would beat the hidden attribute. */
.qn-apply [hidden] { display: none !important; }

/* Invalid choice groups: same red border the theme gives invalid inputs. */
.qn-apply__f.is-invalid .qn-seg label,
.qn-apply__f.is-invalid .qn-select { border-color: var(--qn-danger); }

/* Range choices have short labels: fit more per row. */
.qn-apply [data-field="credit"] .qn-seg,
.qn-apply [data-field="income_monthly"] .qn-seg,
.qn-apply [data-field="cash_available"] .qn-seg { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.qn-apply [data-field="income_monthly"] .qn-seg span,
.qn-apply [data-field="cash_available"] .qn-seg span { white-space: nowrap; }

.qn-apply .qn-check { margin: 0; color: var(--qn-ink); }
.qn-apply [data-field="consent"] .qn-check { color: var(--qn-muted); font-size: .88rem; }

.qn-apply__nav .qn-btn { white-space: nowrap; }
.qn-apply__nav { display: flex; gap: 12px; justify-content: space-between; margin-top: 24px; }
.qn-apply__nav [data-next] { margin-left: auto; min-width: 160px; }
.qn-apply__done .qn-apply__nav { justify-content: flex-start; flex-wrap: wrap; }
.qn-apply__formerr { margin: 16px 0 0; }

/* Honeypot: off-screen, not display:none, so simple bots still see and fill it. */
.qn-apply__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 599px) {
	.qn-apply__nav .qn-btn { flex: 1; }
	.qn-apply__nav [data-next] { min-width: 0; flex: 2; }
	.qn-apply__done .qn-apply__nav { position: static; flex-direction: column; }
}