/**
 * The contact card on a car page: the inquiry form, and the tab switch that
 * puts the financing request beside it.
 *
 * The switch is a radio group. Which panel shows is read straight off the
 * checked radio, so open state has one source of truth and needs no script —
 * the same reasoning as the header menu's aria-expanded. The financing form's
 * own parts are in finance-form.css; the fields below are shared by both.
 */

@layer components {
	.hauto-inquiry {
		margin-block-start: var(--wp--preset--spacing--70);
		padding: var(--wp--preset--spacing--50);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--hauto-radius-md);
		background-color: var(--wp--preset--color--base);
	}

	.hauto-inquiry__title {
		font-size: var(--wp--preset--font-size--x-large);
	}

	/*
	 * The tab switch: two segments, each the same bordered control as a filter
	 * chip — soft rectangles, no pill and no shadow, so the card reads as part
	 * of the same control family as the filter bar. See DESIGN.md.
	 */
	.hauto-inquiry__switch {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--20);
		margin: 0;
		padding: 0;
		border: 0;
	}

	/*
	 * Taken out of flow rather than hidden: the radio still takes focus, still
	 * answers the arrow keys and still announces which tab is selected.
	 */
	.hauto-inquiry__switch-input {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.hauto-inquiry__switch-label {
		flex: 1 1 8rem;
		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);
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--small);
		text-align: center;
		cursor: pointer;
		transition:
			border-color 140ms ease-out,
			background-color 140ms ease-out,
			color 140ms ease-out;
	}

	.hauto-inquiry__switch-label:hover {
		border-color: var(--wp--preset--color--contrast);
	}

	.hauto-inquiry__switch-input:checked + .hauto-inquiry__switch-label {
		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);
	}

	.hauto-inquiry__switch-input:focus-visible + .hauto-inquiry__switch-label {
		outline: 2px solid var(--wp--preset--color--primary);
		outline-offset: 2px;
	}

	/* Only the tab whose radio is checked is in the card. */
	.hauto-inquiry:has(.hauto-inquiry__switch-input--message:checked)
		.hauto-inquiry__panel--finance,
	.hauto-inquiry:has(.hauto-inquiry__switch-input--finance:checked)
		.hauto-inquiry__panel--message {
		display: none;
	}

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

	.hauto-inquiry__notice {
		margin-block-start: var(--wp--preset--spacing--40);
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		border-left: 3px 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);
	}

	.hauto-inquiry__notice--success {
		border-left-color: var(--wp--preset--color--success);
	}

	.hauto-inquiry__notice--error {
		border-left-color: var(--wp--preset--color--danger);
	}

	.hauto-inquiry__errors {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--10);
		margin: 0;
	}

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

	.hauto-inquiry__field {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--10);
		min-width: 0;
	}

	/* The message, the consent line and the button each take the full width. */
	.hauto-inquiry__field:has(.hauto-inquiry__input--textarea),
	.hauto-inquiry__consent,
	.hauto-inquiry__actions {
		grid-column: 1 / -1;
	}

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

	.hauto-inquiry__required {
		color: var(--wp--preset--color--danger);
	}

	/* The same control as a filter field: sm radius, and the same focus ring. */
	.hauto-inquiry__input {
		width: 100%;
		min-width: 0;
		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);
		color: var(--wp--preset--color--contrast);
		font-size: var(--wp--preset--font-size--small);
		transition:
			border-color 140ms ease-out,
			box-shadow 140ms ease-out;

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

		/*
		 * The ring replaces the outline rather than sitting beside it, which is
		 * what keeps a focused field looking like a focused filter field.
		 */
		&:focus {
			border-color: var(--wp--preset--color--primary);
			box-shadow: 0 0 0 3px
				color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
			outline: none;
		}
	}

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

	.hauto-inquiry__input--textarea {
		resize: vertical;
	}

	.hauto-inquiry__consent {
		display: flex;
		gap: var(--wp--preset--spacing--20);
		align-items: baseline;
		font-size: var(--wp--preset--font-size--small);

		& label {
			min-width: 0;
		}
	}

	/*
	 * The honeypot. Not display:none — some bots skip fields that are, and a
	 * clipped field is still submitted by the browser.
	 */
	.hauto-inquiry__trap {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}