/**
 * The import request form, under the import calculator.
 *
 * A third card below the two the calculator renders, full width: here is the
 * price, here is how you ask for it. The calculator's own grid supplies the gap
 * above it.
 */

@layer components {
	.hauto-import-request {
		padding: var(--wp--preset--spacing--50);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--hauto-radius-lg);
		background-color: var(--wp--preset--color--base);
		box-shadow: var(--wp--preset--shadow--card);
	}

	.hauto-import-request__title {
		margin: 0;
		font-size: var(--wp--preset--font-size--large);
	}

	.hauto-import-request__intro {
		max-width: 60ch;
		margin: var(--wp--preset--spacing--20) 0 0;
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--small);
	}

	.hauto-import-request__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--surface-light);
		font-size: var(--wp--preset--font-size--small);
	}

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

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

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

	.hauto-import-request__form {
		display: grid;
		gap: var(--wp--preset--spacing--40);
		margin-block-start: var(--wp--preset--spacing--50);
	}

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

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

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

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

	/* The wrapper exists for the budget field's currency sign; every other field
	   has nothing in it but the input. */
	.hauto-import-request__control {
		display: flex;
		gap: var(--wp--preset--spacing--20);
		align-items: center;
		min-width: 0;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--hauto-radius-sm);
		background-color: var(--wp--preset--color--base);

		&:focus-within {
			border-color: var(--wp--preset--color--primary);
		}
	}

	.hauto-import-request__currency {
		color: var(--wp--preset--color--muted);
	}

	.hauto-import-request__input {
		width: 100%;
		min-width: 0;
		padding: 0;
		border: 0;
		background: none;

		/* The spinners are noise on a figure the visitor types in full. */
		appearance: textfield;

		&:focus {
			outline: none;
		}
	}

	.hauto-import-request__input--textarea {
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--hauto-radius-sm);
		background-color: var(--wp--preset--color--base);
		resize: vertical;
	}

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

		& label {
			min-width: 0;
		}
	}

	.hauto-import-request__actions {
		margin: 0;
	}

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