/**
 * Financing page. Registered by public/class-financing-page.php, enqueued
 * only on `/financing/`. Depends on public.css's design tokens/components -
 * the `.emobility-field`/`.emobility-input`/`.emobility-select` form
 * primitives are reused as-is, this file only adds the financing-specific
 * layout around them (same relationship checkout.css has to public.css).
 *
 * Breakpoints match public.css: sm: 576px  md: 768px  lg: 992px  xl: 1200px
 */

.emobility-financing__header {
	max-width: 42rem;
	margin-bottom: var(--emobility-space-10);
}

@media (min-width: 992px) {
	.emobility-financing__header {
		max-width: 50rem;
	}
}

.emobility-financing__lede {
	margin-bottom: var(--emobility-space-6);
}

.emobility-financing__external-note {
	margin-top: var(--emobility-space-3);
	margin-bottom: 0;
}

.emobility-financing__steps,
.emobility-financing__eligibility,
.emobility-financing__faqs {
	margin-bottom: var(--emobility-space-10);
	max-width: 46rem;
}

@media (min-width: 992px) {
	.emobility-financing__steps,
	.emobility-financing__eligibility,
	.emobility-financing__faqs {
		max-width: 52rem;
	}
}

.emobility-financing__step-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--emobility-space-5);
}

.emobility-financing__step-list li {
	display: flex;
	gap: var(--emobility-space-4);
}

.emobility-financing__step-number {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--emobility-radius-full);
	background: var(--emobility-primary-50);
	color: var(--emobility-primary-700);
	font-weight: var(--emobility-font-weight-bold);
	font-size: var(--emobility-text-sm);
}

.emobility-financing__step-list h3 {
	font-size: var(--emobility-text-base);
	margin-bottom: var(--emobility-space-1);
}

.emobility-financing__step-list p {
	margin-bottom: 0;
	color: var(--emobility-color-text-muted);
}

.emobility-financing__disclaimer {
	max-width: 46rem;
	padding-top: var(--emobility-space-6);
	border-top: var(--emobility-border-width) solid var(--emobility-color-border);
}

@media (min-width: 992px) {
	.emobility-financing__disclaimer {
		max-width: 52rem;
	}
}

/* ------------------------------------------------------------------ */
/* Application form.                                                   */
/* ------------------------------------------------------------------ */

.emobility-financing__form-section {
	max-width: 46rem;
	margin-bottom: var(--emobility-space-10);
}

@media (min-width: 992px) {
	.emobility-financing__form-section {
		max-width: 56rem;
	}
}

.emobility-financing-form__section {
	background: var(--emobility-color-surface);
	border: var(--emobility-border-width) solid var(--emobility-color-border);
	border-radius: var(--emobility-radius-lg);
	padding: var(--emobility-space-6);
	margin: 0 0 var(--emobility-space-6);
}

.emobility-financing-form__section legend {
	font-size: var(--emobility-text-lg);
	font-weight: var(--emobility-font-weight-semibold);
	color: var(--emobility-color-heading);
	padding: 0 0 var(--emobility-space-4);
	width: 100%;
}

.emobility-financing-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--emobility-space-4);
}

.emobility-financing-form__grid .emobility-field--wide {
	grid-column: 1 / -1;
}

@media (max-width: 575px) {
	.emobility-financing-form__grid {
		grid-template-columns: 1fr;
	}
}

/* Honeypot: visually and from-tab-order hidden (not `display:none`, which
   some bots skip when filling forms), while remaining in the DOM and marked
   aria-hidden so assistive tech never announces it. */
.emobility-financing-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.emobility-financing-form__provider-note {
	max-width: 46rem;
	margin-top: var(--emobility-space-4);
}

@media (min-width: 992px) {
	.emobility-financing-form__provider-note {
		max-width: 56rem;
	}
}