.formkit .form-row {
	margin-bottom: 1rem;
	display: grid;
	align-items: center;
	gap: 0.35rem;
}

@media(min-width: 30em) {
	.formkit .form-row.inline {
		grid-template-columns: auto 1fr;
		gap: 1rem;
		align-items: center;
	}
}

.formkit .form-row.inline:has([type="checkbox"]),
.formkit .form-row.inline:has([type="radio"]) {
	grid-template-columns: auto 1fr;
	gap: 0.5rem;
}

.formkit fieldset {
	margin-bottom: 1rem;
}

.formkit fieldset + fieldset {
	margin-bottom: 1.5rem;
}

.formkit label {
	display: block;
	font: var(--s);
	color: var(--black-80);
}

.formkit input {
	font: var(--m);
}

.formkit label > input {
	margin-top: 0.35rem;
}


.formkit label:not(.form-row label) {
	margin-bottom: 0.5rem;
}

.formkit input[aria-errormessage] {
	margin-bottom: 0.5rem;
}

input,
select,
textarea {
	padding: 0.5rem 0.75rem;
	text-align: left;
	color: var(--black);
	border-radius: 0;
	border: 2px solid var(--black-10);
	outline: 0;
}

[type="text"],
[type="email"],
[type="tel"],
[type="search"],
[type="file"],
[type="password"],
[type="date"],
[type="time"],
[type="url"],
[type="number"],
[type="range"],
textarea {
	width: 100%;
}

.formkit [type="email"] {
	padding-right: 2.5rem;
	background: url("/assets/icons/envelope.svg") no-repeat right 1rem center / 1.25rem;
}

.formkit [type="tel"] {
	padding-right: 2.5rem;
	background: url("/assets/icons/phone.svg") no-repeat right 1rem center / 1.25rem;
}

.formkit input.zip {
	padding-right: 2.5rem;
	background: url("/assets/icons/house.svg") no-repeat right 1rem center / 1.25rem;
}

.formkit [type="file"] {
	appearance: none;
}

input:focus,
select:focus,
textarea:focus {
	border:  2px solid var(--color-primary);
	outline: 0;
}

.formkit select {
	padding: 0.6rem 0.75rem;
	font: var(--l-bold);
	color: var(--color-primary);
	background:
		url("/assets/icons/caret-down--white.svg") no-repeat right 0.75rem center / 1.5rem,
		linear-gradient(
			to right,
			var(--white) 0,
			var(--white) calc(100% - 3rem),
			var(--color-primary) calc(100% - 3rem),
			var(--color-primary) 100%
		);
	-webkit-appearance: none;
	appearance: none;
}

.formkit [aria-invalid="true"] {
	color: var(--base-error);
	border: 2px solid var(--base-error);
	outline: 0;
}

.formkit [aria-invalid="true"]:focus {
	border: 2px solid var(--base-error);
}

.formkit .error-message {
	margin-top: -0.5rem;
	font: var(--m-bold);
	color: var(--base-error);
}

.formkit abbr {
	color: var(--color-primary);
	text-decoration: none;
}

.formkit :placeholder {
	color: var(--black-40);
}

.formkit label:has([type="checkbox"]) {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font: var(--m);
}

.formkit input[type="checkbox"] + label,
.formkit label:has( + input[type="checkbox"]) {
	font: var(--m);
}

.formkit input[type="checkbox"] {
	margin: 0;
	padding: 0;
	width: 1em;
	height: 1em;
	display: grid;
	place-content: center;
	border: 2px solid var(--black-80);
	background-color: var(--form-background);
	-webkit-appearance: none;
	appearance: none;
}

.formkit input[type="checkbox"]::before {
	content: "";
	width: 1em;
	height: 1em;
	border: 2px solid var(--black-80);
	background-color: var(--white);
}

.formkit input[type="checkbox"]:checked::before {
	transform: scale(1);
	background-color: var(--color-primary);
	background-size: 0.75em;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(/assets/icons/check-bold--white.svg);
}

.formkit input[type="checkbox"]:focus {
	outline: 1px solid var(--color-primary);
}

.formkit label:has([type="radio"]) {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font: var(--m);
}

.formkit input[type="radio"] + label,
.formkit label:has( + input[type="radio"]) {
	font: var(--m);
}

.formkit input[type="radio"] {
	margin: 0;
	padding: 0;
	width: 1em;
	height: 1em;
	display: grid;
	place-content: center;
	border-radius: 50%;
	border: 2px solid var(--black-80);
	background-color: transparent;
	-webkit-appearance: none;
	appearance: none;
}

.formkit input[type="radio"]::before {
	content: "";
	width: 1em;
	height: 1em;
	border-radius: 50%;
	border: 2px solid var(--black-80);
	background-color: var(--white);
}

.formkit input[type="radio"]:checked::before {
	transform: scale(1);
	background-color: var(--color-primary);
	border: 1px solid var(--black-80);
	outline: 3px solid var(--white);
	outline-offset: -4px;
}

.formkit input[type="radio"]:focus {
	outline: 1px solid var(--color-primary);
}

.formkit .custom-select li:has(input[type="radio"]:checked) {
	background-color: var(--blue-20);
}

.formkit .custom-select {
	position: relative;
}

.formkit .custom-select-button {
	padding: 0.5rem 0.75rem;
	width: 100%;
	color: var(--color-primary);
	text-align: left;
	background:
		url("/assets/icons/caret-down--white.svg") no-repeat right 0.75rem center / 1.5rem,
		linear-gradient(
			to right,
			var(--white) 0,
			var(--white) calc(100% - 3rem),
			var(--color-primary) calc(100% - 3rem),
			var(--color-primary) 100%
		);
}

.formkit .custom-select-button:focus,
.formkit .custom-select-button[aria-expanded="true"] {
	border: 2px solid var(--color-primary);
}

.formkit .custom-select-options {
	margin-top: 0.25rem;
	padding: 0.5rem;
	min-width: calc(100% - 3rem);
	position: absolute;
	z-index: 2;
	background-color: white;
	box-shadow: var(--box-shadow-default);
}

.formkit .custom-select .listbox label {
	width: 100%;
}

.formkit .custom-select-options ul {
	margin-bottom: 0;
}

.formkit .custom-select-options li {
	padding: 0.5rem;
}

.formkit .custom-select-options li:hover {
	background-color: var(--blue-20);
}

.formkit .custom-select-options button {
	margin-top: 0.5rem;
	margin-left: 0.5rem;
	margin-bottom: 1rem;
}