.snow-monkey-form {
	width: 100%;
	max-width: var(--wp--custom--container--lv-0);
	margin-block-start: var(--wp--preset--spacing--60);
	margin-inline-start: auto;
	margin-inline-end: auto;
	accent-color: var(--wp--preset--color--secondary);

	.screen-reader-text {
		position: absolute;
		overflow: hidden;
		clip-path: inset(50%);
		width: 1px;
		height: 1px;
		margin-block-start: -1px;
		margin-block-end: -1px;
		margin-inline-start: -1px;
		margin-inline-end: -1px;
		padding-block-start: 0;
		padding-block-end: 0;
		padding-inline-start: 0;
		padding-inline-end: 0;
		white-space: nowrap;
		border: 0;
	}

	.smf-progress-tracker {
		display: flex;
		align-items: flex-start;
		margin-block-end: var(--wp--preset--spacing--50);
		padding-block-start: 0;
		padding-block-end: 0;
		padding-inline-start: 0;
		padding-inline-end: 0;
		list-style: none;
		counter-reset: none;
	}

	.smf-progress-tracker__item {
		position: relative;
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		margin-block-start: 0;
		padding-block-start: 0;
		padding-inline-start: 0.5rem;
		padding-inline-end: 0.5rem;
		color: var(--wp--preset--color--dark-03);
		font-weight: 400;
		text-align: center;

		&::before {
			display: none;
		}

		&:not(:last-child)::after {
			position: absolute;
			inset-block-start: var(--wp--preset--spacing--20);
			inset-inline-start: calc(50% + 1.4rem);
			z-index: 0;
			inline-size: calc(100% - 2.8rem);
			block-size: 2px;
			background-color: var(--wp--preset--color--border);
			content: "";
		}
	}

	.smf-progress-tracker__item__number {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2rem;
		block-size: 2rem;
		margin-block-end: 0.6rem;
		color: var(--wp--preset--color--dark-02);
		font-weight: 600;
		font-size: var(--wp--preset--font-size--normal);
		line-height: 1;
		background-color: var(--wp--preset--color--white);
		border: 2px solid var(--wp--preset--color--border);
		border-radius: 50%;
	}

	.smf-progress-tracker__item__text {
		max-width: 8rem;
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.4;
		letter-spacing: 0.04em;
	}

	&[data-screen="confirm"] .smf-progress-tracker__item--input,
	&[data-screen="complete"] .smf-progress-tracker__item--input,
	&[data-screen="complete"] .smf-progress-tracker__item--confirm {
		color: var(--wp--preset--color--secondary);

		&::after {
			background-color: var(--wp--preset--color--secondary);
		}

		.smf-progress-tracker__item__number {
			color: var(--wp--preset--color--white);
			background-color: var(--wp--preset--color--secondary);
			border-color: var(--wp--preset--color--secondary);
		}
	}

	&[data-screen="input"] .smf-progress-tracker__item--input,
	&[data-screen="loading"] .smf-progress-tracker__item--input,
	&[data-screen="confirm"] .smf-progress-tracker__item--confirm,
	&[data-screen="complete"] .smf-progress-tracker__item--complete,
	.smf-progress-tracker__item[aria-current="true"],
	.smf-progress-tracker__item[aria-current="step"] {
		color: var(--wp--preset--color--secondary);
		font-weight: 600;

		.smf-progress-tracker__item__number {
			inline-size: 2.25rem;
			block-size: 2.25rem;
			color: var(--wp--preset--color--white);
			font-size: var(--wp--preset--font-size--normal);
			background-color: var(--wp--preset--color--secondary);
			border-color: var(--wp--preset--color--secondary);
			box-shadow: 0 0 0 4px rgba(var(--wp--preset--color--secondary), 0.15);
		}
	}

	.smf-form,
	.smf-item + .smf-item {
		margin-block-start: 0;
	}

	.smf-item {
		display: flex;
		align-items: stretch;
		margin-block-start: 0;
		border-block-start: 1px solid var(--wp--preset--color--white);
		background-color: var(--wp--preset--color--light-01);

		@media (width < 768px) {
			flex-direction: column;
		}

		&:focus-within {
			background-color: rgba(var(--wp--preset--color--primary), 0.1);
		}
	}

	.smf-item__col--label {
		display: flex;
		flex: 0 0 30%;
		align-items: center;
		padding-block-start: var(--wp--preset--spacing--20);
		padding-block-end: var(--wp--preset--spacing--20);
		padding-inline-start: var(--wp--preset--spacing--20);
		padding-inline-end: var(--wp--preset--spacing--20);
		font-weight: 600;
		background-color: var(--wp--preset--color--alto-05);

		@media (width < 768px) {
			flex-basis: auto;
			width: 100%;
		}
	}

	.smf-item__col--controls {
		flex: 1;
		padding-block-start: var(--wp--preset--spacing--20);
		padding-block-end: var(--wp--preset--spacing--20);
		padding-inline-start: var(--wp--preset--spacing--20);
		padding-inline-end: var(--wp--preset--spacing--20);
	}

	.smf-item__label,
	.smf-item__controls {
		width: 100%;
	}

	.smf-item__controls {
		h2 {
			display: inline-flex;
			align-items: center;
			flex-wrap: wrap;
			margin-block-start: 0;
			font-weight: 600;
			font-size: var(--wp--preset--font-size--large);
		}

		* + h2 {
			margin-block-start: var(--wp--preset--spacing--40);
		}

		h2 + * {
			margin-block-start: 0.5rem;
		}
	}

	.required {
		display: inline-flex;
		align-items: center;
		margin-inline-start: 0.5rem;
		padding-block-start: 0.5rem;
		padding-block-end: 0.5rem;
		padding-inline-start: var(--wp--preset--spacing--20);
		padding-inline-end: var(--wp--preset--spacing--20);
		color: var(--wp--preset--color--white);
		font-size: var(--wp--preset--font-size--small);
		line-height: 1;
		background-color: var(--wp--preset--color--secondary);
		border-radius: 3px;
	}

	.smf-text-control__control,
	.smf-textarea-control__control,
	.smf-select-control__control {
		width: 100%;
		max-width: 100%;
		min-block-size: 3rem;
		padding-block-start: 0.5rem;
		padding-block-end: 0.5rem;
		padding-inline-start: 0.5rem;
		padding-inline-end: 0.5rem;
		font-size: var(--wp--preset--font-size--normal);
		line-height: 1.5;
		color: var(--wp--preset--color--dark-01);
		background-color: var(--wp--preset--color--white);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 3px;
		box-shadow: none;
		outline: none;

		&:focus-visible {
			outline: 2px solid var(--wp--preset--color--secondary);
			outline-offset: 2px;
		}

		@media (pointer: coarse) {
			min-block-size: 3.25rem;
		}
	}

	.smf-textarea-control__control {
		min-block-size: 8rem;
		resize: vertical;
	}

	.smf-select-control {
		position: relative;
		width: 100%;
	}

	.smf-select-control__control {
		appearance: none;
		padding-inline-end: 2.5rem;
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%20294.1L383%20167c9.4-9.4%2024.6-9.4%2033.9%200s9.3%2024.6%200%2034L273%20345c-9.1%209.1-23.7%209.3-33.1.7L95%20201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3%207-17c9.4-9.4%2024.6-9.4%2033.9%200l127.1%20127z%22%2F%3E%3C%2Fsvg%3E");
		background-repeat: no-repeat;
		background-position: right center;
		background-size: 1.5rem;
		background-origin: padding-box;
	}

	.smf-select-control__toggle {
		display: none;
	}

	.checkbox .smf-checkboxes-control__control {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;

		@media (width < 768px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.radio .smf-radio-buttons-control__control {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		max-width: max-content;
	}

	.smf-label {
		margin-block-start: 0;
	}

	.smf-checkbox-control,
	.smf-radio-button-control {
		display: flex;
		width: 100%;
	}

	.smf-checkbox-control__control,
	.smf-radio-button-control__control {
		position: absolute;
		overflow: hidden;
		clip-path: inset(50%);
		width: 1px;
		height: 1px;
		margin-block-start: -1px;
		margin-block-end: -1px;
		margin-inline-start: -1px;
		margin-inline-end: -1px;
		padding-block-start: 0;
		padding-block-end: 0;
		padding-inline-start: 0;
		padding-inline-end: 0;
		white-space: nowrap;
		border: 0;
	}

	.smf-checkbox-control__label,
	.smf-radio-button-control__label {
		display: block;
		width: 100%;
		margin-block-start: 0;
		padding-block-start: 0.5rem;
		padding-block-end: 0.5rem;
		padding-inline-start: var(--wp--preset--spacing--20);
		padding-inline-end: var(--wp--preset--spacing--20);
		text-align: center;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 5px;
		background-color: var(--wp--preset--color--white);
		transition: 0.3s;
	}

	.smf-radio-button-control__label {
		padding-inline-start: var(--wp--preset--spacing--40);
		padding-inline-end: var(--wp--preset--spacing--40);
	}

	.smf-checkbox-control__control:checked + .smf-checkbox-control__label,
	.smf-radio-button-control__control:checked + .smf-radio-button-control__label {
		color: var(--wp--preset--color--light-01);
		background-color: var(--wp--preset--color--secondary);
		border-color: var(--wp--preset--color--secondary);
	}

	.smf-checkbox-control__control:focus-visible + .smf-checkbox-control__label,
	.smf-radio-button-control__control:focus-visible + .smf-radio-button-control__label {
		outline: 2px solid var(--wp--preset--color--secondary);
		outline-offset: 2px;
	}

	.smf-checkbox-control__label:hover,
	.smf-radio-button-control__label:hover {
		border-color: var(--wp--preset--color--secondary);
	}

	.file {
		display: flex;
		align-items: center;

		+ .file {
			margin-block-start: 0.5rem;
		}
	}

	.smf-file-control {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem;
	}

	.smf-file-control__control {
		position: absolute;
		overflow: hidden;
		clip-path: inset(50%);
		width: 1px;
		height: 1px;
		white-space: nowrap;
		border: 0;
	}

	.smf-file-control__label,
	.smf-file-control__clear {
		display: inline-flex;
		align-items: center;
		min-block-size: 3rem;
		padding-block-start: 0.5rem;
		padding-block-end: 0.5rem;
		padding-inline-start: var(--wp--preset--spacing--20);
		padding-inline-end: var(--wp--preset--spacing--20);
		color: var(--wp--preset--color--dark-01);
		font-size: var(--wp--preset--font-size--normal);
		line-height: 1;
		background-color: var(--wp--preset--color--white);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 3px;
		cursor: pointer;
	}

	.smf-file-control__label:hover,
	.smf-file-control__clear:hover {
		border-color: var(--wp--preset--color--secondary);
	}

	.smf-file-control__control:focus-visible + .smf-file-control__label {
		outline: 2px solid var(--wp--preset--color--secondary);
		outline-offset: 2px;
	}

	.date {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;

		.smf-placeholder,
		.smf-text-control,
		.smf-select-control {
			flex: 1 1 12rem;
			margin-block-start: 0;
		}
	}

	.smf-action {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--wp--preset--spacing--20);
		margin-block-start: var(--wp--preset--spacing--50);
		text-align: center;
	}

	.smf-button-control {
		display: flex;
		justify-content: center;
	}

	.smf-action button,
	.smf-button-control .smf-button-control__control,
	.smf-button-control__control[type="button"],
	.smf-button-control__control[type="submit"] {
		display: inline-block;
		appearance: none;
		min-block-size: 3rem;
		padding-block-start: 0.5rem;
		padding-block-end: 0.5rem;
		padding-inline-start: var(--wp--preset--spacing--50);
		padding-inline-end: var(--wp--preset--spacing--50);
		color: var(--wp--preset--color--white) !important;
		font-size: var(--wp--preset--font-size--medium-large);
		line-height: 1.2;
		background: var(--wp--preset--color--secondary) !important;
		background-image: none !important;
		border: 0 !important;
		border-radius: 5px;
		box-shadow: none !important;
		transition: 0.3s;

		&:hover {
			opacity: 0.7;
		}

		&:focus-visible {
			outline: 2px solid var(--wp--preset--color--secondary);
			outline-offset: 2px;
		}
	}

	.smf-button-control__control[data-action="back"] {
		color: var(--wp--preset--color--dark-01) !important;
		background: var(--wp--preset--color--white) !important;
		border: 1px solid var(--wp--preset--color--border) !important;
	}

	.smf-error-messages,
	[class*="smf-system-error"] {
		margin-block-start: var(--wp--preset--spacing--20);
		padding-block-start: 0.75rem;
		padding-block-end: 0.75rem;
		padding-inline-start: var(--wp--preset--spacing--20);
		padding-inline-end: var(--wp--preset--spacing--20);
		color: var(--wp--preset--color--white);
		font-size: var(--wp--preset--font-size--normal);
		background-color: var(--wp--preset--color--required);
		border-radius: 3px;
	}
}
