/**
 * The insurance request form, placed with [hauto_insurance_form].
 *
 * The card, its fields, notices and consent line are the contact card's own
 * (inquiry-form.css): this is the same form asking a different question, not a
 * second form component — the same arrangement the financing tab uses. What is
 * here is only what insurance has and the contact card does not: an intro line,
 * and the VIN field.
 */

@layer components {
	.hauto-insurance__intro {
		margin-block-start: var(--wp--preset--spacing--20);
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--small);
	}

	/* The VIN and the message each take the full width of the field grid. */
	.hauto-insurance__field--vin {
		grid-column: 1 / -1;
	}

	/*
	 * A VIN is written in capitals wherever it is printed, and the field is
	 * stored upper-cased, so it is shown that way as it is typed. The value
	 * itself is untouched — the server is what normalises it.
	 */
	.hauto-insurance__vin {
		text-transform: uppercase;
	}

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