/* Dispatch and quote forms (concept A panel). Labels above inputs. */

.cvc-form {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
	border-radius: var(--cvc-radius-card);
	background-color: color-mix(in srgb, var(--wp--preset--color--surface) 88%, transparent);
	backdrop-filter: blur(14px);
}

body .cvc-form__title {
	--theme-font-size: var(--wp--preset--font-size--cvc-xl);
	margin: 0;
}

.cvc-form__sub,
.cvc-form__note,
.cvc-form__help {
	margin: 0;
	color: var(--wp--preset--color--mute);
	font-size: var(--wp--preset--font-size--cvc-s);
}

.cvc-form__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.cvc-form__chips legend {
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--mute);
	font-size: var(--wp--preset--font-size--cvc-s);
}

.cvc-form__chips .cvc-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.cvc-form__chips input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.cvc-form__chips .cvc-chip:has(input:checked) {
	border-color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.cvc-form__chips .cvc-chip:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--surface);
}

.cvc-form__field {
	display: grid;
	gap: 0.375rem;
}

.cvc-form__field label {
	color: var(--wp--preset--color--mute);
	font-size: var(--wp--preset--font-size--cvc-s);
}

.cvc-form :is(input[type="text"], input[type="tel"], input[type="date"], textarea) {
	min-height: 46px;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--cvc-radius-btn);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font: inherit;
}

.cvc-form :is(input, textarea):focus-visible {
	border-color: var(--wp--preset--color--ink);
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--surface);
}

.cvc-form :is(input, textarea):user-invalid {
	border-color: var(--wp--preset--color--error);
}

.cvc-form__field:has(:user-invalid) .cvc-form__help {
	color: var(--wp--preset--color--error);
}

.cvc-form__submit {
	width: 100%;
	min-height: 48px;
	border: 0;
	border-radius: var(--cvc-radius-btn);
	background-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
	font: 600 1rem var(--wp--preset--font-family--body);
	cursor: pointer;
}

.cvc-form__submit:hover,
.cvc-form__submit:focus-visible {
	background-color: var(--wp--preset--color--red-press);
	color: var(--wp--preset--color--white);
}

.cvc-form__notice {
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: var(--cvc-radius-btn);
	border: 1px solid currentColor;
}

.cvc-form__notice--ok {
	color: var(--wp--preset--color--ok);
}

.cvc-form__notice--error {
	color: var(--wp--preset--color--error);
}

/* Honeypot: off-screen for people, still in the DOM for bots. */
.cvc-form__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}