@import '../../node_modules/mod-style-bootstrap/src/styles/icons/fill';

$color-purple-dark: #2849CA;
$color-purple-light: #E5E8F9;
$color-white: #FFF;
$color-black: #000;
$color-gray: #888;
$color-red: #E97158;

.contact-us {
	&__thankyou {
		display: none;
		text-align: center;
	}

	&__thankyou-title {
		color: $color-purple-dark;
		font-size: 38px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	&__thankyou-img {
		margin: 30px auto;
		width: auto;
	}

	.step {
		display: none;

		&--active {
			display: block;
		}

		&__header {
			background-color: $color-purple-light;
			color: $color-purple-dark;
			display: flex;
			font-size: 14px;
			margin-bottom: 20px;
		}

		&__header-number {
			align-items: center;
			background-color: $color-purple-dark;
			color: $color-white;
			display: flex;
			font-weight: bold;
			justify-content: center;
			padding: 10px 15px;
			width: 30%;
		}

		&__header-text {
			padding: 10px 15px;
			width: 70%;
		}

		&__content-item {
			text-align: center;
		}

		&__image {
			margin: 15px auto;
			width: auto;
		}

		&__error {
			color: $color-red;
			font-weight: bold;
			text-align: center;
		}

		&__list {
			list-style-type: none;
			margin: 0;
			text-align: left;

			li {
				border: 1px solid $color-gray;
				margin-bottom: 15px;
				padding: 10px;
			}

			a {
				color: $color-black;
				display: block;
				text-decoration: underline;

				+ a {
					margin-top: 5px;
				}
			}
		}
	}

	.field {
		border: 1px solid $color-gray;
		display: flex;
		margin-bottom: 15px;
		padding: 10px;
		text-align: left;

		label {
			cursor: pointer;
			display: block;
			font-weight: 400;
			margin: 0;
			padding-left: 35px;
			position: relative;
			width: 100%;

			&::before {
				background-color: $color-purple-light;
				content: '';
				height: 22px;
				left: 0;
				position: absolute;
				top: 50%;
				transform: translate(0, -50%);
				width: 22px;
			}
		}

		input {
			&:checked + label {
				&::before {
					@include icon-fill;
					align-items: center;
					background-color: $color-purple-dark;
					color: $color-white;
					content: '\e920';
					display: flex;
					font-size: 18px;
					justify-content: center;
				}
			}
		}
	}

	.form-group {
		label {
			color: $color-gray;
			font-size: 14px;
			font-weight: 400;
			margin-bottom: 0;
		}

		textarea {
			max-width: 100%;
		}
	}

	.form-controls {
		display: flex;
		justify-content: space-between;
		margin: 15px auto;
	}

	.btn-back {
		border-radius: 100%;
	}

	.btn-submit {
		background-color: transparent;
		border: 2px solid $color-purple-dark;
		border-radius: 30px;
		color: $color-purple-dark;
		display: block;
		font-weight: 500;
		max-width: 300px;

		&:active,
		&:focus,
		&:hover {
			background-color: $color-purple-dark;
			color: $color-white;
		}
	}

	.btn {
		&__spinner {
			&::after {
				border: 4px solid $color-purple-dark;
				border-right-color: $color-white;
				border-top-color: $color-white;
			}
		}
	}
}

.g-recaptcha {
	display: flex;
	justify-content: center;
	margin: 20px 0;
}