/**
 * The vehicle import calculator.
 *
 * One card and nothing else: the title, the fields, the breakdown, the total
 * and the button all stand on a single dark panel, so the visitor reads
 * a form and its answer rather than two objects. Whatever explains the service
 * beside it is the page's own blocks — the shortcode goes in a column and the
 * copy in the other one.
 *
 * The title and subtitle come from Settings → Import calculator, so a page's
 * own heading blocks above the shortcode are still the page's, not the card's.
 */

@layer components {
	.hauto-calculator {
		display: grid;
		gap: var(--wp--preset--spacing--50);
	}

	.hauto-calculator__panel {
		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--contrast);
	}

	.hauto-calculator__header {
		margin-bottom: var(--wp--preset--spacing--50);
	}

	.hauto-calculator__title {
		margin: 0;
		font-size: var(--wp--preset--font-size--large);
		color: var(--wp--preset--color--base);
	}

	.hauto-calculator__subtitle {
		margin: var(--wp--preset--spacing--10) 0 0;
		color: var(--wp--preset--color--surface-light);
		font-size: var(--wp--preset--font-size--small);
	}

	/* A grid of one, for now: the price is the only input, and foreign VAT and
	   a down payment were named as later additions. */
	.hauto-calculator__fields {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
		gap: var(--wp--preset--spacing--40);
	}

	.hauto-calculator__label {
		display: block;
		margin-bottom: var(--wp--preset--spacing--20);
		color: var(--wp--preset--color--surface-strong);
		font-size: var(--wp--preset--font-size--small);
	}

	.hauto-calculator__input {
		display: flex;
		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--muted);
		border-radius: var(--hauto-radius-md);
		color: var(--wp--preset--color--base);
		background-color: color-mix(in srgb, var(--wp--preset--color--base) 10%, transparent);

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

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

	.hauto-calculator__price {
		width: 100%;
		padding: 0;
		border: 0;
		background: none;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 650;

		/* The spinners are noise on a price the visitor types in full, and they
		   crowd the field at the width this sits in. */
		appearance: textfield;

		&:focus {
			outline: none;
		}
	}

	.hauto-calculator__rows {
		display: grid;
		gap: var(--wp--preset--spacing--20);
		margin: var(--wp--preset--spacing--50) 0 0;
		font-size: var(--wp--preset--font-size--small);
	}

	.hauto-calculator__row {
		display: flex;
		gap: var(--wp--preset--spacing--40);
		align-items: baseline;
		justify-content: space-between;
	}

	.hauto-calculator__row-label {
		color: var(--wp--preset--color--surface-strong);
	}

	.hauto-calculator__row-amount {
		margin: 0;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
		color: var(--wp--preset--color--surface-light);
	}

	/* The answer the page exists to give: the amount is the one primary-coloured
	   figure on the dark card. */
	.hauto-calculator__total {
		display: flex;
		gap: var(--wp--preset--spacing--40);
		align-items: baseline;
		color: var(--wp--preset--color--base);
		justify-content: space-between;
		margin: var(--wp--preset--spacing--40) 0 0;
	}

	.hauto-calculator__total-label {
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--base);
	}

	.hauto-calculator__total-amount {
		font-size: var(--wp--preset--font-size--large);
		color: var(--wp--preset--color--primary);
		font-variant-numeric: tabular-nums;
		font-weight: 700;
		white-space: nowrap;
	}

	.hauto-calculator__cta {
		width: 100%;
		margin-top: var(--wp--preset--spacing--40);
	}

	.hauto-calculator__disclaimer {
		margin: var(--wp--preset--spacing--40) 0 0;
		color: var(--wp--preset--color--surface);
		font-size: var(--wp--preset--font-size--x-small);
	}
}