:root {
	--primary-color: #ed7309;
	--secondary-color: #4a4a4a;

	--primary-font: 'UniNeueRegular', 'Arial', 'Helevtica', sans-serif;
}

body,
html {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	color: var(--secondary-color);
	font-size: 18px;
	line-height: 1.4;
	font-family: var(--primary-font);
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
.h1 {
	font-size: 56px;
	line-height: 1.15;
	font-weight: 700;
	text-transform: uppercase;
}

h2,
.h2 {
	font-size: 36px;
	line-height: 1.2;
	font-weight: 700;
	text-transform: uppercase;
}

h3,
.h3 {
	font-size: 24px;
	line-height: 1.3;
	font-weight: 700;
}

h4,
.h4 {
	font-size: 14px;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
}

b,
strong {
	font-weight: 700;
}

button,
input,
textarea {
	position: relative;
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	appearance: none;

	&:focus {
		outline: none;
	}
}

.textlink {
	display: inline-block;
	color: var(--primary-color);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;

	&:hover {
		color: var(--secondary-color);
	}
}

.form-container {
	position: relative;
	max-width: 790px;
	margin-left: auto;
	margin-right: auto;

	.tab-nav {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 60px;

		&:before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: calc(100% - 36px);
			height: 1px;
			background-color: var(--secondary-color);
			transform: translate(-50%, -50%);
		}

		>button {
			z-index: 2;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			padding-top: 3px;
			background-color: var(--secondary-color);
			color: #fff;
			font-size: 25px;
			font-family: var(--primary-family);
			font-weight: 700;
			cursor: pointer;

			&.active {
				background-color: var(--primary-color);
			}
		}
	}

	.button-nav {
		position: relative;
		display: flex;
		flex-direction: row;
		gap: 0 40px;
		margin-top: 40px;

		>div {
			flex: 0 1 calc(50% - 20px);

			>button {
				position: relative;
				width: 100%;
				height: 55px;
				display: block;
				padding: 11px 10px 9px;
				box-sizing: border-box;
				background-color: var(--secondary-color);
				color: #fff;
				font-size: 14px;
				font-family: var(--primary-family);
				font-weight: 700;
				text-transform: uppercase;
				cursor: pointer;

				&:hover {
					background-color: #000;
				}

				&.next,
				&.submit {
					background-color: var(--primary-color);

					&:hover {
						background-color: var(--secondary-color);
					}
				}

				&:disabled {
					opacity: 0.25;
					cursor: not-allowed;
				}
			}
		}
	}

	form {
		.tab {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 40px;

			>h2 {
				width: 100%;
				margin: 0;
			}

			&:not(.active) {
				display: none;
			}
		}

		.input-group,
		.select-group,
		.radio-group {
			flex: 0 1 calc(50% - 20px);

			label ,
			legend {
				display: block;
				margin-bottom: 5px;
				font-weight: 700;
			}

			span.desc {
				display: block;
				margin-top: 10px;
				font-size: 16px;
			}

			fieldset {
				position: relative;
				border: none;
				margin: 0;
				padding: 0;
			}

			&.large {
				flex-basis: 100%;
			}
		}

		.input-group {
			input {
				position: relative;
				width: 100%;
				height: 55px;
				display: block;
				border: 1px solid var(--secondary-color);
				padding: 11px 10px 9px;
				box-sizing: border-box;
				background-color: #fff;
				color: var(--secondary-color);
				font-size: 18px;
				font-family: var(--primary-family);
				font-weight: 500;

				&::placeholder,
				&:-ms-input-placeholder,
				&::-ms-input-placeholder {
					color: var(--secondary-color);
					opacity: 0.5;
				}
			}
		}
		
		.select-group {
			.fs-wrap {
				position: relative;

				.fs-label-wrap {
					position: relative;
					width: 100%;
					height: 55px;
					display: block;
					border: 1px solid var(--secondary-color);
					box-sizing: border-box;
					background-color: #fff;
					line-height: 33px;

					.fs-label {
						padding: 11px 35px 9px 10px;
						cursor: pointer;
					}

					.fs-arrow {
						pointer-events: none;
						
						&:before {
							content: '';
							position: absolute;
							top: 50%;
							right: 10px;
							width: 15px;
							height: 15px;
							background-image: url('img/arrow.svg');
							background-size: contain;
							background-position: 50% 50%;
							background-repeat: no-repeat;
							transform: translateY(-50%);
						}
					}
				}

				.fs-dropdown {
					position: absolute;
					z-index: 2;
					width: 100%;
					background-color: #fff;
					border-width: 0 1px 1px;
					border-style: solid;
					border-color: var(--secondary-color);
					box-sizing: border-box;

					.fs-options {
						max-height: 187.5px;
						display: flex;
						flex-direction: column;
						overflow: auto;
						padding: 5px 0;

						.fs-option {
							width: 100%;
							padding: 5px 10px;
							box-sizing: border-box;
							cursor: pointer;
							line-height: 25px;

							&[data-value=""] {
								font-style: italic;
							}

							&:hover {
								color: var(--primary-color);
							}
						}
					}
				}

				&.fs-open {
					.fs-label-wrap {
						.fs-arrow {
							&:before {
								transform: translateY(-50%)rotateZ(180deg);
							}
						}
					}
				}
			}

			select {
				&:not(.hidden) {
					height: 55px;
					opacity: 0;
				}
			}
		}

		.radio-group {
			label {
				position: relative;
				display: inline-block;
				margin-bottom: 0;
				padding-left: 30px;
				font-weight: 500;
				cursor: pointer;

				span {
					position: absolute;
					top: 0;
					left: 0;
					width: 20px;
					height: 20px;
					display: block;
					border: 1px solid var(--secondary-color);
					border-radius: 50%;
					box-sizing: border-box;

					&:before {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						width: 12px;
						height: 12px;
						display: none;
						background-color: var(--primary-color);
						border-radius: 50%;
						transform: translateY(-50%) translateX(-50%);
					}
				}

				input {
					display: none;

					&:checked {
						+span {
							border-color: var(--primary-color);

							&:before {
								display: block;
							}
						}
					}
				}
			}

			ul {
				height: 55px;
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 0 40px;
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
		}
	}

	&.submitted {
		* {
			user-select: none;
			pointer-events: none;
		}

		&:before {
			content: '';
			position: absolute;
			z-index: 11;
			top: 50%;
			left: 50%;
			width: 60px;
			height: 60px;
			background-image: url('img/loading-animation.svg');
			background-size: contain;
			background-position: center center;
			background-repeat: no-repeat;
			transform: translate(-50%, -50%);
		}

		&:after {
			content: '';
			position: absolute;
			z-index: 10;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: #fff;
			opacity: 0.8;
		}
	}
}

.results-container {
	display: flex;
	flex-direction: column;

	.results-container__headline {
		width: 100%;
		max-width: 790px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 40px;

		>h2 {
			margin: 0;
		}

		>.textlink {
			margin-top: 10px;
		}
	}

	.results-container__table {
		width: 100%;
		max-width: 790px;
		margin-left: auto;
		margin-right: auto;
		overflow: auto;

		table {
			width: 100%;
			min-width: 768px;
			border-spacing: 0;
			table-layout: fixed;

			td,
			th {
				border: none;
				padding: 8.5px 0 6.5px;
				text-align: left;
				box-sizing: border-box;

				&:nth-child(1) {
					width: 50%;
					padding-left: 0;
				}

				&:nth-child(2),
				&:nth-child(3) {
					width: 25%;
					padding-left: 40px;
				}

				span.desc {
					font-size: 14px;
					display: block;
				}
			}

			th {
				color: var(--primary-color);
				font-weight: 700;
			}

			tfoot {
				td {
					border-width: 5px 0;
					border-style: solid;
					padding-left: 45px !important;
					padding-right: 5px !important;
					background-color: var(--secondary-color);
					color: #fff;
					font-weight: 700;

					&:nth-child(1) {
						padding-left: 5px !important;
					}
				}
			}
		}
	}

	.results-container__tabs {
		margin-top: 100px;

		.tab-nav {
			width: 100;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			gap: 0 20px;
			margin-bottom: 40px;

			>button {
				flex: 0 1 calc(50% - 10px);
				height: 40px;
				border-width: 1px;
				border-style: solid;
				border-color: var(--secondary-color);
				padding-top: 2px;
				color: var(--secondary-color);
				font-size: 14px;
				font-family: var(--primary-family);
				font-weight: 700;
				cursor: pointer;
				text-transform: uppercase;

				&.active {
					border-color: var(--primary-color);
					color: var(--primary-color);
				}
			}
		}

		.tab {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			gap: 0 40px;

			>div {
				flex: 0 1 calc(50% - 20px);

				img {
					width: 100%;
				}

				h4 {
					margin: 0;
					text-align: center;
				}
			}

			&:not(.active) {
				display: none;
			}
		}
	}
}

.visible {
	display: block !important;
}

.hidden {
	display: none !important;
}

.visually-hidden {
	position: absolute;
	top: 0;
	left: -1000px;
	height: 0;
	width: 0;
	display: block;
	margin: 0;
	padding: 0;
	overflow: hidden;
}


@media (max-width: 768px) {
	h1,
	.h1 {
		font-size: 48px;
	}

	h2,
	.h2 {
		font-size: 24px;
	}

	h3,
	.h3 {
		font-size: 20px;
	}

	.form-container {
		.tab-nav {
			margin-bottom: 40px;
		}

		.button-nav {
			flex-direction: column;
			margin-top: 30px;
		}

		form {
			.tab {
				gap: 30px;
			}

			.input-group,
			.select-group,
			.radio-group {
				flex-basis: 100%;
			}

			.radio-group {
				gap: 0 30px;
			}
		}
	}

	.results-container {
		.results-container__tabs {
			margin-top: 60px;

			.tab-nav {
				gap: 10px 0;
				margin-bottom: 30px;

				>button {
					flex-basis: 100%;
				}
			}

			.tab {
				gap: 30px 0;

				>div {
					flex-basis: 100%;
				}
			}
		}
	}
}