.eco-widget {
	$self: &;
	padding: 40px 15px;
	background-color: $red;
	color: $black;
	box-sizing: border-box;
	font-family: $base-font-sans-serif;
	position: relative;
	z-index: 9999;

	&--horizontal {
		padding-top: 25px;
		padding-bottom: 30px;

		#{$self}__help-block {
			@include media ('>=desktop') {
				margin-top: 9px;
				padding-bottom: 0;
				margin-bottom: -22px;
			}
		}

		#{$self}__holder {
			@include media ('>=desktop') {
				max-width: 1362px;
				min-height: 0;
				padding: 11px 12px 10px 15px;
			}
		}

		#{$self}__form {
			&-head {
				&-holder {
					@include media ('>=desktop') {
						max-width: none;
					}
				}

				&-title {
					@include media ('>=desktop') {
						max-width: none;
						margin-bottom: 8px;
					}
				}
			}

			&-group {
				@include media ('>=desktop') {
					margin-right: 8px;
				}

				&--lg {
					@include media ('>=desktop') {
						width: calc(47% - 98px);
					}

					#{$self}__form {
						&-control {
							@include media ('>=desktop') {
								width: 100%;
								margin-right: 0;
							}
						}
					}
				}
			}

			&-control {
				@include media ('>=desktop') {
					margin-bottom: 0;
					margin-right: 8px;
					width: calc(30.2% - 98px);
				}

				&--lg {
					@include media ('>=desktop') {
						width: calc(47% - 98px);
					}
				}
			}

			&-info {
				@include media ('>=desktop') {
					display: block;
					width: 50%;
					text-align: right;
					margin-left: auto;
				}
			}

			&-body {
				@include media ('>=desktop') {
					width: 100%;
					flex-wrap: nowrap;
					align-items: flex-start;
					justify-content: space-between;
				}
			}

			&-btn {
				@include media ('>=desktop') {
					width: 22.8%;
					padding-top: 20px;
					flex-shrink: 0;
				}
			}
		}

		#{$self}__popup {
			@include media ('>=desktop') {
				width: 406px;
			}
		}

		#{$self}__help-list {
			@include media ('>=desktop') {
				display: flex;
				margin: 0 -10px;
			}

			li {
				@include media ('>=desktop') {
					padding: 0 10px;
					width: 50%;
				}

				& + li {
					@include media ('>=desktop') {
						margin-top: 0;
					}
				}
			}
		}

		.jcf-select {
			@include media ('>=desktop') {
				width: 134px;
				flex-shrink: 0;
				margin-bottom: 0;
				margin-right: 24px;
			}

			@include media ('>=widescreen') {
				margin-right: 54px;
			}
		}
	}

	*, *::before, *::after {
		box-sizing: inherit;
	}

	a {
		@include animate(color);

		color: $red;
		text-decoration: none;

		&:hover,
		&:focus {
			color: $black;
			text-decoration: none;
		}
	}

	&__holder {
		background-color: $white;
		border-radius: 8px;
		padding: 20px 20px 24px;
		box-shadow: 4px 4px 4px rgba($black, .3);
		margin: 0 auto;
		max-width: 682px;

		@include media ('>=tablet') {
			padding: 24px 30px 25px;
			min-height: 276px;
		}
	}

	&__switcher {
		font-family: $base-font-sans-serif;
		display: inline-flex;
		align-items: center;
		justify-content: flex-start;
		flex-shrink: 0;
		position: relative;
		border: 2px solid $black;
		border-radius: 3em;

		@include media ('>=tablet-sm') {
			margin-top: 4px;
		}

		@include media ('>=desktop') {
			margin-left: 10px;
		}

		&-fake-label {
			@include animate(color background-color);

			display: inline-block;
			padding: 10px 28px;
			color: $black;
			border-radius: 3em;
			font-weight: 600;
			font-size: 14px;
			margin: 0;
			cursor: pointer;
			text-transform: uppercase;
			min-width: 105px;
			text-align: center;
		}

		&-item {
			margin: -1px;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			user-select: none;
		}

		input {
			position: absolute;
			left: -9999px;
			top: auto;

			&:checked ~ .eco-widget__switcher-fake-label {
				background-color: $black;
				color: $white;
			}
		}
	}

	&__form {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0;
		border: none;

		select {
			-webkit-border-radius: 0;
		}

		&-body {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		&-control {
			@include animate(border-color);
			@include placeholder {
				color: $black;
			}

			-webkit-appearance: none;
			border: 1px solid $black;
			border-radius: 6px;
			text-transform: uppercase;
			color: $black;
			font-weight: 600;
			font-size: 16px;
			line-height: 1.2;
			padding: 15px 15px 13px;
			margin-bottom: 13px;
			border-radius: 5px;
			display: block;
			width: 100%;

			@include media ('>=tablet') {
				font-size: 20px;
				padding-top: 17px;
				padding-bottom: 17px;
			}

			&:focus {
				border-color: $black;
				text-shadow: none;
				outline: none;
			}

			&--lg {
				@include media ('>=phone') {
					width: calc(70% - 5px);
				}

				@include media ('>=tablet') {
					width: calc(77% - 8px);
				}
			}
		}

		&-info {
			color: $gray-200;
			display: block;
			padding-top: 9px;
			font: 400 11px/1.2 $font-family-roboto;
		}

		&-group {
			margin-bottom: 0;
			width: 100%;

			&--lg {
				@include media ('>=phone') {
					width: calc(70% - 5px);
				}

				@include media ('>=tablet') {
					width: calc(77% - 8px);
				}
			}
		}

		&-head {
			font: 500 14px/1.2 $font-family-roboto;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
			padding-bottom: 15px;
			width: 100%;

			@include media ('>=tablet-sm') {
				flex-wrap: nowrap;
				padding-bottom: 7px;
			}

			@include media ('>=tablet', '<desktop') {
				flex-wrap: wrap;
			}

			&-holder {
				padding-bottom: 10px;
				width: 100%;

				@include media ('>=tablet-sm') {
					padding-right: 10px;
					width: auto;
				}

				@include media ('>=tablet') {
					max-width: 60%;
					padding-bottom: 0;
				}
			}

			&-title {
				font: 600 18px/1.2 $base-font-sans-serif;
				margin: 0 0 6px;

				@include media ('>=tablet-sm') {
					max-width: 80%;
				}

				@include media ('>=tablet') {
					max-width: 308px;
					font-size: 23px;
					line-height: 1.2174;
				}
			}

			p {
				flex-grow: 1;
				margin: 0;
			}
		}

		&-btn {
			@include animate(background-color);

			text-transform: uppercase;
			font-size: 18px;
			line-height: 1;
			font-weight: 600;
			border-radius: 5px;
			padding: 19px 15px;
			background-color: $gray-100;
			border: none;
			-webkit-appearance: none;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			cursor: pointer;
			display: block;
			width: 100%;

			@include media ('>=tablet') {
				letter-spacing: -1px;
				font-size: 21px;
			}

			&:hover {
				background-color: darken($gray-100, 10%);
			}
		}
	}

	&__help-block {
		margin-top: -4px;
		padding-bottom: 10px;
		font: 400 11px/1.2 $font-family-roboto;
		z-index: 20;
		position: relative;
	}

	&__popup-active {
		.eco-widget__popup {
			opacity: 1;
			visibility: visible;
		}
	}

	&__popup {
		@include animate(opacity visibility);

		display: block;
		position: absolute;
		left: 34px;
		top: calc(100% + 4px);
		opacity: 0;
		visibility: hidden;
		background-color: $black;
		color: $white;
		width: 210px;
		border-radius: 5px;
		padding: 10px 6px 2px;
		box-shadow: 0 0 10px rgba($black, .5);
		font-family: $base-font-sans-serif;
		font-size: 9px;

		&::before {
			@include size(7px);

			content: '';
			position: absolute;
			left: 20px;
			top: -3px;
			transform: rotate(45deg);
			background-color: $black;
		}

		&-close {
			@include size(14px);

			position: absolute;
			right: 5px;
			top: 5px;
			color: $white;
			font-size: 0;
			line-height: 0;

			&:hover {
				&::after,
				&::before {
					background-color: $white;
				}
			}

			&::after,
			&::before {
				@include animate(background-color);

				content: '';
				width: 14px;
				height: 2px;
				background-color: $red;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%) rotate(45deg);
				border-radius: 2px;
			}

			&::after {
				transform: translate(-50%, -50%) rotate(-45deg);
			}
		}

		&-opener {
			display: inline-block;
			vertical-align: top;
		}

		&-title {
			font-size: 12px;
			line-height: 1.2;
			font-weight: 700;
			margin: 0 0 2px;
			padding-right: 20px;
			color: $white;
		}

		p {
			margin: 0 0 6px;
		}
	}

	&__help-list {
		@extend %listreset;

		li {
			& + li {
				margin-top: 15px;
			}
		}

		img {
			border: 1px solid $white;
			display: block;
			width: 100%;
			margin-bottom: 5px;
		}
	}
}

.jcf-select {
	@include animate(border-color);

	border-radius: 5px;
	text-transform: uppercase;
	display: block;
	position: relative;
	border: 1px solid $black;
	background: $white;
	color: $black;
	height: 50px;
	width: 100%;
	cursor: pointer;
	margin-bottom: 13px;

	@include media ('>=phone') {
		width: calc(30% - 5px);
	}

	@include media ('>=tablet') {
		height: 60px;
		width: calc(23% - 8px);
	}

	&.jcf-drop-active {
		.jcf-select-opener {
			&::before {
				transform: translate(-50%, -50%) rotate(-180deg);
			}
		}
	}

	.jcf-select-text {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		display: block;
		cursor: pointer;
		font-weight: 600;
		font-size: 16px;
		line-height: 1;
		margin: 16px 35px 15px 15px;

		@include media ('>=tablet') {
			margin-top: 19px;
			margin-bottom: 20px;
			font-size: 20px;
		}
	}

	.jcf-select-opener {
		position: absolute;
		text-align: center;
		width: 30px;
		bottom: 0;
		right: 0;
		top: 0;

		&::before {
			@include animate(transform);
			@include triangle(16px, $red, down);

			position: absolute;
			content: '';
			background: none;
			right: auto;
			bottom: auto;
			left: 40%;
			top: 50%;
			transform: translate(-50%, -50%);

			@include media ('>=tablet') {
				border-width: 9px 9px 0;
			}
		}
	}

	select {
		z-index: 1;
		left: 0;
		top: 0;
	}
}


body>.jcf-select-drop {
	position: absolute;
	margin: -1px 0 0;
	z-index: 9999;
}

body>.jcf-select-drop.jcf-drop-flipped {
	margin: 1px 0 0;
}

.jcf-select .jcf-select-drop {
	position: absolute;
	margin-top: 0px;
	z-index: 9999;
	top: 100%;
	left: -1px;
	right: -1px;
}

.jcf-select-drop-content {
	border: 1px solid $black;
	border-radius: 5px;
	overflow: hidden;
}

.jcf-select .jcf-drop-flipped {
	bottom: 100%;
	top: auto;
}

/* multiple select styles */

.jcf-list-box {
	overflow: hidden;
	display: inline-block;
	border: 1px solid #b8c3c9;
	min-width: 200px;
	margin: 0 15px;
}

/* select options styles */

.jcf-list {
	display: inline-block;
	vertical-align: top;
	position: relative;
	background: $white;
	font-size: 18px;
	line-height: 1.2;
	font-weight: 600;
	width: 100%;

	ul {
		@extend %listreset;

		li {
			overflow: hidden;
			display: block;
		}
	}

	.jcf-option {
		@include animate(color background-color);
		overflow: hidden;
		cursor: pointer;
		display: block;
		padding: 10px 15px;
		color: $black;
		height: 1%;
		text-transform: uppercase;
	}

	.jcf-disabled {
		background: #fff !important;
		color: #aaa !important;
	}

	.jcf-option-hideme {
		display: none !important;
	}

	.jcf-overflow {
		overflow: auto;
	}
}

.jcf-list .jcf-list-content {
	vertical-align: top;
	display: inline-block;
	overflow: auto;
	width: 100%;
}

.jcf-select-drop .jcf-hover,
.jcf-list-box .jcf-selected {
	color: $white;
	background-color: $red;
}