@import "variables";
.compatibleProductB {
	background: #FFFFCA;
	position: relative;
	margin-bottom: 24px;
	padding: 16px;
	font-size: 14px;
	@media(max-width: 575px){
		margin-left: -12px;
		margin-right: -12px;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	& > .closer {
		background: $color_gray_30;
		position: absolute; top: 0; right: 0;
		display: none;
		width: 18px;
		height: 18px;
		opacity: 1;
		&:before, &:after {
			background: $white;
			width: 70%;
		}
		&:hover {
			background: $red;
		}
	}
	.compatibleProductB-head {
		display: flex;
		align-items: center;
		.compatibleProductB-head__text {
			flex-grow: 1;
			line-height: 1.25;
			.dash-link {
				border-bottom-color: #b3b3b3;
				color: #9b9b9b;
			}
		}
		.compatibleProductB-head__image {
			padding-left: 16px;
			img {
				display: block;
				width: 24px;
			}
		}
		&.show {
			display: flex;
		}
		&.hide {
			display: none;
		}
	}
	.compatibleProductB-button {
		margin-top: 12px;
		a:not(.btn) {
			border-bottom-color: #b3b3b3;
			color: #9b9b9b;
		}
	}
	.compatibleProductB-body {
		display: none;
		margin-top: 12px;
	}

	&.in {
		padding: 16px 16px 56px;
		@media(max-width: 575px){
			padding: 16px 12px 32px;
		}
		& > .closer {
			display: block;
		}

		.compatibleProductB-head {
			&.show {
				display: none !important;
			}
			&.hide {
				display: flex !important;
			}
		}

		.compatibleProductB-button {
			display: none;
		}
		.compatibleProductB-body {
			display: block;
		}
	}

	&.compatibleProductB_error {
		background: #FFEAEA;
		&.in, .in & {
			background: #FFFFCA;
		}
	}
	&.compatibleProductB_success {
		background: rgba(222,255,190,1);
		&.in, .in & {
			background: #FFFFCA;
		}
	}

	//modifications
	.w-viewedCars {
		.w-viewedCars__head {
			margin-bottom: 8px;
			font-size: 16px;
		}
	}
	.form-autopartsbynumber {
		padding-left: 0;
		@media(max-width: 449px){
			background: none !important;
			margin: 0 !important;
			padding: 0 !important;
		}
		.form-autopartsbynumber__head {
			margin-bottom: 4px;
			font-size: 16px;
			font-weight: bold;
			color: $blue;
		}
		.limiter {
			max-width: none;
			& > ul {
				display: flex;
				margin: 0 -4px !important;
				& > li {
					max-width: 180px;
					margin: 0;
					padding: 4px;
				}
			}
		}
		.search-error {
			background: none;
			position: relative;
			margin: 0 !important;
			padding: 0 0 0 40px !important;
			@include box-shadow(none);
			.closer {
				display: none;
				top: 0;
				right: 0;
			}
			.icon-arrow {
				position: absolute; top: 50%; left: 12px;
				display: block;
				max-width: 20px;
				max-height: 20px;
				@include transform(translateY(-50%));
			}
		}
		.fan__input-group {
			width: auto;
			.form-control {
				height: 48px;
				padding: 8px 8px 8px 48px;
				font-size: 24px;
				//text-align: center;
			}
		}
		.fan-dropdown {
			left: 0 !important;
			right: auto !important;
			width: 400px !important;
			font-size: 13px;
			@media (max-width: 1199px) {
				width: 340px !important;
			}
			@media (max-width: 575px) {
				width: 300px !important;
			}
			.fan-dropdown__body {
				.media {
					.media-left {
						img {
							width: 80px;
						}
					}
					.media-body {
						.fs-18 {
							font-size: 16px !important;
						}
					}
				}
			}
		}
		.form-btn {
			.btn {
				width: auto !important;
				min-width: 150px;
				padding: 12px 16px 12px 44px !important;
				font-size: 24px;
				line-height: 1;
				@media(max-width: 575px){
					min-width: auto;
					padding: 12px 16px 12px 44px !important;
				}
				.btn__ico {
					left: 16px;
				}
				&.btn-ico-loading {
					width: 48px !important;
					height: 48px !important;
					min-width: auto;
					padding: 0 !important;
				}
			}
		}
	}
}

.w-selectCar {
	.w-selectCar__head {
		margin-bottom: 6px;
		font-size: 16px;
		font-weight: bold;
		color: $blue;
	}
	.w-selectCar__body {
		&.loading {
			background: none;
		}
		& + .w-selectCar__body {
			margin-top: 16px;
		}
	}
	.form-control {
		background: #ffffff url('https://pics1.alpics.info/web/public/images/icons/i-sorting.png') no-repeat center right 8px / auto 14px;
		border-color: #aaa;
		height: 40px;
		-webkit-appearance: none !important;
		-moz-appearance: none !important;
		-ms-appearance: none !important;
		appearance: none !important;
		@include border-radius(4px);
		&.selected {
			background-color: #ffe180;
			option {
				background: #fff;
			}
		}
		&.highlight {
			border-color: $blue;
			@include box-shadow(0 0 8px $blue);
		}
	}
	.text-xs-center {
		@media(max-width: 575px){
			text-align: center;
		}
	}
	.btn {
		padding: 10px 40px;
	}
}

.compatibleProductBox {
	margin-bottom: 24px;
	.compatibleProductB {
		position: relative;
		z-index: 6;
		margin-bottom: 0;
	}
	.compatibleProduct-backdrop {
		background: #000;
		position: fixed; top: 0; right: 0; bottom: 0; left: 0;
		z-index: 5;
		//display: none;
		visibility: hidden;
		opacity: 0;
		@include transition();
	}

	.compatibleProductB.in + .compatibleProduct-backdrop {
		visibility: visible;
		opacity: .6;
	}
	&.in {
		.overlink.compatibleProductB-toggle {
			display: none;
		}
		.compatibleProductB {
			padding: 16px 16px 56px;
			& > .closer {
				display: block;
			}
			.compatibleProductB-button {
				display: none;
			}
		}
		.compatibleProduct-backdrop {
			visibility: visible;
			opacity: .6;
		}
	}
}

.w-licensePlate {
	.w-licensePlate__head {
		margin-bottom: 8px;
		font-size: 22px;
		font-weight: bold;
		color: $blue;
		@media(max-width: 767px){
			font-size: 20px;
		}
	}
	.w-licensePlate__body {
		display: flex;
		.w-licensePlate__input {
			flex-grow: 1;
			max-width: 172px;
			.form-group {
				background: $white;
				border: 1px solid $blue;
				position: relative;
				display: flex;
				@include border-radius(4px);
				.form-group__icon {
					img, svg {
						display: block;
						width: auto;
						height: 48px;
					}
				}
				.form-group__field {
					flex-grow: 1;
					input {
						background: none;
						border: 0;
						position: relative; z-index: 2;
						display: block;
						width: 100% !important;
						max-width: 100% !important;
						min-width: auto !important;
						height: 48px;
						padding: 8px 12px;
						font-size: 24px;
						text-transform: uppercase;
					}
					.state {
						position: absolute; top: 0; right: 0; bottom: 0; left: 0;
						z-index: 1;
						display: none;
						@include border-radius(3px);
						@include box-shadow(unquote("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6)"));
						animation: fan-animate 3s linear 0s infinite alternate;
					}
					input:focus + .state {
						display: block;
					}
				}
			}
		}
		.w-licensePlate__button {
			margin-left: 8px;
			.btn {
				display: block;
				height: 50px !important;
				padding: 0 20px 0 48px !important;
				font-size: 24px;
				line-height: 48px;
				@include transition(none);
				@include border-radius(4px);
				.btn__ico {
					position: absolute; top: 50%; left: 16px;
					width: 20px !important;
					height: 20px !important;
					margin-top: -9px !important;
				}
				&.btn-ico-loading {
					width: 50px !important;
					padding: 0 !important;
					@include border-radius(50%);
					.btn__ico {
						margin-left: -9px !important;
					}
				}
			}
		}
	}
	.w-licensePlate__result {
		margin-top: 8px;
		display: none;
		&.in {
			display: block;
		}
	}
	.w-licensePlate__error {
		position: relative;
		padding: 0 0 0 40px;
		color: $red;
		line-height: 1.4;
		.arrow {
			position: absolute; top: 50%; left: 7px;
			@include transform(translateY(-47%));
			img {
				display: block;
				height: 30px;
			}
		}
	}

	&.has-error {
		.w-licensePlate__body {
			.w-licensePlate__input {
				.form-group {
					border-color: $red;
					.form-group__field {
						input {
							color: $red;
						}
					}
				}
			}
		}
	}
}