/* ==========================================================================
   Cubes Web — forms: shared controls, validation & status messages.
   Markup: <label class="form-field"><span>Label</span><input …><small class="field-error"></small></label>
   ========================================================================== */

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.form-grid .span-all { grid-column: 1 / -1; }

/* Wrapping flex: the label text and its «*» share the first line, controls take full rows. */
.form-field { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: baseline; gap: 6px 4px; font-size: 0.875rem; font-weight: 600; color: var(--c-text); }
.form-field > :is(input, select, textarea, small, div, label, span:not(.req)) { flex: 1 0 100%; min-width: 0; }
.form-field .req { color: var(--c-primary); }
.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	min-height: 50px;
	padding: 0 14px;
	border: 1px solid var(--c-border);
	border-radius: 12px;
	background-color: var(--c-surface);
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--c-text);
	transition: border-color 0.2s, box-shadow 0.2s;
}
.form-field textarea { min-height: 110px; padding-block: 12px; resize: vertical; }
.form-field select {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: 38px;
	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='%235b6470' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 14px center;
}
.form-field input[dir="ltr"] { text-align: right; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent); }
.form-field [aria-invalid="true"] { border-color: #dc2626; }
.form-field .hint { font-size: 0.8rem; font-weight: 500; color: var(--c-muted); }
.field-error { font-size: 0.8rem; font-weight: 600; color: #b91c1c; }
.field-error:empty { display: none; }

/* Dark variant (forms on a dark card) */
.form-dark .form-field { color: #fff; }
.form-dark .form-field input,
.form-dark .form-field select,
.form-dark .form-field textarea { background-color: var(--c-dark-2); border-color: rgb(255 255 255 / 0.16); color: #fff; }
.form-dark .field-error { color: #fca5a5; }

/* Choice pills (radio / yes-no), keyboard accessible: real inputs, visually replaced */
.pill-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pill span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 12px;
	border: 1px solid var(--c-border);
	background: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.pill:hover span { border-color: var(--c-primary); }
.pill input:checked + span { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary); font-weight: 700; }
.pill input:focus-visible + span { outline: 3px solid var(--c-primary); outline-offset: 2px; }

.check-field { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; line-height: 1.7; }
.check-field input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; accent-color: var(--c-primary); }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields) */
.hp-field { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Submit state & result */
.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.btn[aria-busy="true"]::before {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	animation: spinSlow 0.8s linear infinite;
}
.form-status { margin: 0; padding: 10px 14px; border-radius: 10px; font-size: 0.875rem; font-weight: 600; }
.form-status.is-success { background: #e8f7ee; color: #166534; }
.form-status.is-error { background: #fdecec; color: #b91c1c; }

/* ==========================================================================
   Financing wizard (/financing) & tracking (/track)
   ========================================================================== */
.fin-page { padding-block: 36px 80px; background: var(--c-surface); }
.fin-head { display: grid; gap: 8px; justify-items: center; margin-bottom: 26px; text-align: center; }
.fin-head h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 800; }
.fin-head p { margin: 0; color: var(--c-muted); }
.fin-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--c-muted); }

.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 860px; margin: 0 auto 26px; }
.stepper li { display: grid; justify-items: center; gap: 8px; text-align: center; }
.stepper li::after { content: ""; width: 100%; height: 4px; border-radius: 4px; background: var(--c-border); }
.stepper-mark {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--c-border);
	color: var(--c-muted);
	font-weight: 800;
}
.stepper small { font-size: 0.8rem; color: var(--c-muted); }
.stepper .is-current .stepper-mark { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.stepper .is-current small { color: var(--c-text); font-weight: 700; }
.stepper .is-current::after { background: var(--c-primary); }
.stepper .is-done .stepper-mark { background: #16a34a; border-color: #16a34a; color: #fff; }
.stepper .is-done::after { background: #16a34a; }
.stepper .is-skipped { opacity: 0.45; }
.stepper .is-skipped small { text-decoration: line-through; }

.fin-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.fin-card { padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--c-border); min-width: 0; }
.fin-form { display: grid; gap: 22px; }
.fin-step { display: grid; gap: 18px; margin: 0; padding: 0; border: 0; min-width: 0; }
.fin-step + .fin-step { padding-top: 22px; border-top: 1px solid var(--c-border); } /* stacked (no JS) */
.fin-step[hidden] + .fin-step { padding-top: 0; border-top: 0; }
.fin-step-head { display: grid; gap: 4px; padding: 0; margin-bottom: 18px; }
.fin-step-head strong { font-size: 1.35rem; }
.fin-step-head small { color: var(--c-muted); }
.choice-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.choice-group legend,
.method-cards legend { padding: 0; margin-bottom: 8px; }
.method-cards { margin: 0; padding: 0; border: 0; min-width: 0; }
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.method-card {
	position: relative;
	display: grid;
	justify-items: start;
	gap: 8px;
	padding: 20px;
	border-radius: 18px;
	border: 2px solid var(--c-border);
	background: #fff;
	cursor: pointer;
	font-weight: 400;
	transition: border-color 0.2s, background-color 0.2s;
}
.method-card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.method-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--c-surface); }
.method-card strong { font-size: 1.05rem; }
.method-card small { color: var(--c-muted); line-height: 1.7; }
.method-card:has(input:checked) { border-color: var(--c-primary); background: #fff7f8; }
.method-card:has(input:checked) .method-icon { background: var(--c-primary); color: #fff; }
.method-card:has(input:focus-visible) { outline: 3px solid var(--c-primary); outline-offset: 2px; }

.finance-extra { display: grid; gap: 18px; margin: 0; padding: 0; border: 0; min-width: 0; }
.credit-list { display: grid; gap: 10px; }
.credit-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--c-surface); }
.credit-row legend { float: right; padding: 0; font-weight: 600; font-size: 0.95rem; } /* float: legend joins the flex row */
.credit-row .pill-group { grid-template-columns: repeat(2, minmax(64px, auto)); }

.dropzone {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 26px;
	border-radius: 18px;
	border: 2px dashed #d9dde3;
	background: #fafbfc;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
}
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone:focus-within { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.dropzone-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--c-primary-soft); color: var(--c-primary); }
.dropzone small { color: var(--c-muted); font-weight: 500; }
.dropzone.is-dragging { border-color: var(--c-primary); background: #fff7f8; }
.dropzone.has-file { border-color: #16a34a; border-style: solid; }
.dropzone.has-file small { color: #166534; }
.dropzone.has-error { border-color: #dc2626; }
.dropzone.has-error small { color: #b91c1c; }

.fin-nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--c-border); }
.fin-nav [data-next] { margin-inline-start: auto; }

.fin-success { display: grid; justify-items: center; gap: 14px; padding: 30px 10px; text-align: center; }
.fin-success:focus { outline: none; }
.fin-success-icon { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: #e8f7ee; color: #16a34a; }
.fin-success h2 { margin: 0; font-size: 1.75rem; font-weight: 800; }
.fin-success p { margin: 0; max-width: 460px; color: var(--c-muted); line-height: 1.8; }
.fin-success p strong { color: var(--c-text); }
.fin-success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 8px; }

/* Status timeline (success screen, track page) */
.timeline { display: grid; gap: 10px; width: 100%; max-width: 420px; text-align: start; }
.timeline li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--c-surface); }
.timeline li::before { content: ""; width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; background: #c9ced6; }
.timeline li span { flex: 1; font-weight: 600; }
.timeline li small { color: var(--c-muted); }
.timeline .is-done { background: #e8f7ee; }
.timeline .is-done::before { background: #16a34a; }
.timeline .is-current { background: #fff7e6; }
.timeline .is-current::before { background: #f5a623; }
.timeline .is-closed { background: #fdecec; }
.timeline .is-closed::before { background: #dc2626; }

.fin-aside { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 16px; min-width: 0; }
.fin-summary { overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid var(--c-border); }
.fin-summary-media { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; background: #eef1f5; }
.fin-summary-media img { width: 100%; height: 100%; object-fit: cover; }
.fin-summary-media .car-silhouette { width: 70%; }
.fin-summary-body { display: grid; gap: 4px; padding: 18px; }
.fin-summary-body small { color: var(--c-muted); }
.fin-summary-price { color: var(--c-primary); font-size: 1.25rem; }
.fin-eligibility { --level: var(--c-muted); display: grid; gap: 10px; padding: 22px; border-radius: 22px; background: var(--c-dark); color: #fff; }
.fin-eligibility[data-level="good"] { --level: #22c55e; }
.fin-eligibility[data-level="fair"] { --level: #f5a623; }
.fin-eligibility[data-level="high"] { --level: #f87171; }
.eligibility-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.875rem; }
.eligibility-row span { color: rgb(255 255 255 / 0.72); }
.eligibility-bar { height: 10px; border-radius: 10px; background: #26262c; overflow: hidden; }
.eligibility-bar span { display: block; width: 0; height: 100%; border-radius: 10px; background: var(--level); transition: width 0.3s ease; }
.eligibility-label { color: var(--level); font-weight: 600; }
.fin-eligibility[data-level=""] .eligibility-label { color: rgb(255 255 255 / 0.65); }
.eligibility-monthly { padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 0.1); }
.eligibility-note { color: rgb(255 255 255 / 0.6); font-size: 0.75rem; }
.fin-help { display: grid; gap: 10px; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid var(--c-border); }

@media (max-width: 991px) {
	.fin-layout { grid-template-columns: minmax(0, 1fr); }
	.fin-aside { position: static; }
}
@media (max-width: 575px) {
	.fin-card { padding: 20px 16px; }
	.stepper-mark { width: 36px; height: 36px; }
	.stepper small { font-size: 0.7rem; }
	.fin-nav .btn { flex: 1; }
}

/* Track page */
.track-card { display: grid; gap: 22px; max-width: 640px; margin: 0 auto; padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--c-border); }
.track-result { display: grid; justify-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--c-border); }
.track-result:focus { outline: none; }
.track-result p { margin: 0; font-size: 1.05rem; }
.track-help { margin: 20px 0 0; text-align: center; color: var(--c-muted); }
.track-help a { color: var(--c-primary); font-weight: 700; }
@media (max-width: 575px) { .track-card { padding: 20px 16px; } }