/**
 * The financing request — the second tab of the contact card.
 *
 * Fields, labels, notices and the consent line are the card's own
 * (inquiry-form.css): this is the same form asking different questions, not a
 * second form component. What is here is what only financing has — the
 * applicant toggle, and the two rules that decide which half of the form a
 * company sees.
 *
 * The toggle is the filter bar's plug-in hybrid flag in every respect but the
 * input type: a bordered control with a real radio in it, tinted when chosen.
 * Which half of the form shows is read off the checked radio, so nothing but
 * the radio holds that state.
 */

@layer components {
	.hauto-finance__form {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--40);
		margin-block-start: var(--wp--preset--spacing--50);
	}

	.hauto-finance__fields {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
		gap: var(--wp--preset--spacing--40);
	}

	/*
	 * Two fields on one line even in the 400px card column, where the grid
	 * above only ever resolves to a single track. It stacks below about 300px,
	 * which is narrower than the card ever gets.
	 */
	.hauto-finance__pair {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
		gap: var(--wp--preset--spacing--40);
	}

	.hauto-finance__types {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.hauto-finance__legend {
		padding: 0;
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--small);
	}

	/*
	 * The two answers sit inline and only as wide as they read. Their own
	 * element rather than the fieldset, because a legend is laid out outside
	 * its fieldset's formatting context and would take a slot in the row.
	 */
	.hauto-finance__type-options {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--20);
		margin-block-start: var(--wp--preset--spacing--10);
	}

	.hauto-finance__type {
		display: flex;
		flex: 1;
		gap: var(--wp--preset--spacing--20);
		align-items: center;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--hauto-radius-sm);
		background-color: var(--wp--preset--color--base);
		font-size: var(--wp--preset--font-size--small);
		cursor: pointer;
		transition:
			border-color 140ms ease-out,
			background-color 140ms ease-out;

		&:hover {
			border-color: var(--wp--preset--color--contrast);
		}

		&:has(:checked) {
			border-color: var(--wp--preset--color--primary);
			background-color: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
			color: var(--wp--preset--color--primary-strong);
		}

		& input {
			width: 1rem;
			height: 1rem;
			margin: 0;
			accent-color: #c76233;
		}
	}

	/*
	 * The company fields, and the label a field carries for a company. Hidden
	 * rather than removed, because the markup is server-rendered once and the
	 * radio is what switches between the two. Nothing hidden here is `required`
	 * in the markup — a required hidden field makes a form the browser refuses
	 * to submit without saying why; inc/finance-form.php enforces them instead.
	 */
	.hauto-finance__form:has(.hauto-finance__type-input--personal:checked)
		.hauto-finance__company-only,
	.hauto-finance__form:has(.hauto-finance__type-input--personal:checked)
		.hauto-finance__label-text--company,
	.hauto-finance__form:has(.hauto-finance__type-input--company:checked)
		.hauto-finance__label-text--personal {
		display: none;
	}

	.hauto-finance__small-print {
		margin: 0;
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--x-small);
	}

	@media (prefers-reduced-motion: reduce) {
		.hauto-finance__type {
			transition: none;
		}
	}
}