@import "variables";
@media(max-width: 767px){
	.w-categoryMenuContainer {
		.w-categoryMenu-overlay {
			overflow: hidden;
			flex-direction: column;
			.w-categoryMenu-overlay__head {}
			.w-categoryMenu-overlay__body {
				flex-grow: 1;
				overflow: hidden;
				overflow-y: auto;
			}
		}
	}
	.body-categoryMenu .w-categoryMenuContainer .w-categoryMenu-overlay {
		display: flex;
	}
}

.w-categoryMenuContainer {
	&.sticky {
		position: sticky; top: 0;
	}
}

.w-categoryMenuSearch-separate {
	@media (min-width: 768px) {
		display: none;
	}
}
.w-categoryMenuSearch {
	display: flex;
	padding: 12px 0;
	@media (min-width: 768px) {
		display: none;
	}
	.field {
		position: relative;
		flex-grow: 1;
		.form-control {
			height: 40px;
			padding: 4px 40px 4px 12px;
			font-size: 16px;
			line-height: 20px;
		}
		.closer {
			background: #bdbdbd;
			top: 50% !important;
			right: 8px !important;
			display: none;
			width: 20px !important;
			height: 20px !important;
			margin-top: -10px !important;
			opacity: 1;
			@include border-radius(50%);
			&:before, &:after {
				background: $white;
				width: 70%;
			}
			&:hover {
				background: $red;
			}
		}
		&.active {
			.closer {
				display: block;
			}
		}
	}
	.button {
		margin-left: 8px;
		.btn {
			min-width: 40px;
			padding: 10px 12px;
			font-size: 16px;
			line-height: 20px;
		}
	}

	&.fix {
		background: $white;
		position: fixed; top: 0; right: 0; left: 0;
		z-index: 990;
		padding: 12px;
	}
}

.w-categoryMenu {
	position: relative;
	z-index: 777;
	font-size: 14px;
	&.mobile-hidden {
		& > .w-categoryMenu__list {
			@media(max-width: 767px){
				display: none;
			}
		}
	}
	&:not(.w-categoryMenu_wide) {
		//start
		.w-categoryMenu__list {
			margin: 0;
			padding: 0;
			list-style: none;
			a {
				@include transition(none);
			}
			//desktop
			@media (min-width: 768px) {
				& > li {
					position: relative;
					&:not(:first-child){
						margin-top: 4px;
					}
					& > .w-categoryMenu__item {
						& > .w-categoryMenu__link {
							border: 0;
							position: relative;
							display: block;
							margin-left: -6px;
							padding: 1px 6px 2px;
							font-weight: bold;
							color: $color_dark;
							line-height: 1.5;
							.img-aligner {
								display: none;
							}
							.title {}
							.faw {
								display: none;
							}
							&:hover {
								background: $color_dark;
								color: $color_white;
							}
						}
						&:hover, &.hover {
							& > .w-categoryMenu__link {
								background: $color_dark;
								color: $color_white;
								.faw {
									background: $color_dark;
									position: absolute; top: 0; bottom: 0; left: 100%;
									display: block;
									width: 24px;
									&:before, &:after {
										content: '';
									}
									&:before {
										position: absolute; top: 100%; right: 0;
										z-index: 5;
										display: block;
										width: 48px;
										height: 24px;
									}
									&:after {
										position: absolute; top: 100%; right: 0;
										z-index: 5;
										display: block;
										width: 24px;
										height: 24px;
										margin-top: 24px;
									}
								}
							}
							.w-categoryMenu__wall {
								display: block;
							}
						}
					}

					.w-categoryMenu__drop {
						display: none !important;
						.drop-title {
							display: none;
						}
					}
					.w-categoryMenu__wall {
						background: $color_dark;
						position: absolute; top: 0; left: 100%;
						z-index: 999;
						width: 894px;
						@media( max-width: 1199px ){ width: 690px; }
						@media( max-width: 991px ){ width: 520px; }
						margin-left: 24px;
						padding: 16px;
						color: $white;
						display: none;
					}
					&.active {
						.w-categoryMenu__drop {
							display: block;
							@media(min-width: 768px){
								display: block !important;
							}
						}
					}
					&.shown {
						.w-categoryMenu__drop {
							display: block !important;
						}
					}
				}
			}

			//mobile
			@media (max-width: 767px) {
				& > li {
					position: relative;
					&:not(:first-child){
						margin-top: -1px;
						&:before {
							content: '';
							background: $color_gray_10;
							position: absolute; top: 0; left: 0; right: 0;
							height: 1px;
						}
					}
					& > .w-categoryMenu__item {
						& > .w-categoryMenu__link {
							border: 0;
							position: relative;
							display: block;
							margin-left: -6px;
							margin-right: -6px;
							padding: 12px 20px 12px 80px;
							font-weight: bold;
							color: $color_dark;
							line-height: 1.25;
							.img-aligner {
								position: absolute; top: 50%; left: 6px;
								width: 64px;
								height: 32px;
								margin-top: -16px;
								.img-aligner__bg {
									width: auto;
									height: 100%;
								}
							}
							.title {}
							.faw {
								position: absolute; top: 50%; right: 6px;
								display: block;
								margin-top: -8px;
								height: 16px;
								font-size: 14px;
								line-height: 16px;
							}
							&:hover {
								background: $blue_light;
							}
						}
					}
					.w-categoryMenu__drop {
						display: none;
						.drop-title {
							display: none;
						}
					}
					.w-categoryMenu__wall {
						display: none !important;
					}
					&.active {
						.w-categoryMenu__drop {
							display: block;
							@media(min-width: 768px){
								display: block !important;
							}
						}
					}
					&.shown {
						.w-categoryMenu__drop {
							display: block !important;
						}
					}
					&.open {
						& > .w-categoryMenu__item {
							& > .w-categoryMenu__link {
								.faw {
									@include transform(rotate(180deg));
								}
							}
						}
					}
				}
			}
		}

		.w-categoryMenu__drop {
			.w-categoryMenu__sublist {
				padding: 0;
				list-style: none;
				//desktop
				@media (min-width: 768px) {
					margin: 2px 0 8px 12px;
					& > li {
						position: relative;
						& > .w-categoryMenu__link {
							border: 0;
							display: block;
							padding: 1px 4px;
							color: $color_dark;
							.img-aligner {
								display: none;
							}
							.title {}
							.labels {
								display: none;
							}
							&:hover {
								background: $color_dark !important;
								color: $white !important;
							}
						}
						&.active {
							& > .w-categoryMenu__link {
								background: $blue_light;
							}
						}
						&:hover, &.hover {
							& > .w-categoryMenu__link {
								background: $color_dark;
								position: relative;
								color: $white;
								&:before {
									content: '';
									background: $color_dark;
									position: absolute; top: 0; bottom: 0; left: 100%;
									display: block; width: 24px;
								}
								.img-aligner {
									background: $white;
									border: 16px solid $color_dark;
									position: absolute; top: 0; left: 100%;
									display: block;
									width: 160px;
									height: 160px;
									margin-left: 24px;
								}
								.title {}
							}
						}
					}
				}
				//mobile
				@media (max-width: 767px) {
					margin: 2px -6px 8px;
					& > li {
						& > .w-categoryMenu__link {
							border: 0;
							position: relative;
							display: block;
							padding: 8px 8px 8px 80px;
							color: $color_dark;
							line-height: 1.25;
							.img-aligner {
								position: absolute; top: 50%; left: 30px;
								width: 40px;
								height: 32px;
								margin-top: -16px;
								.img-aligner__bg {
									width: auto;
									height: 100%;
								}
							}
							.title {}
							.labels {
								.label {
									padding: 2px 4px 3px;
									font-size: 12px;
									line-height: 1;
									@include border-radius(0);
								}
							}
							.faw {
								position: absolute; top: 50%; right: 6px;
								display: block;
								margin-top: -8px;
								height: 16px;
								font-size: 14px;
								line-height: 16px;
							}
							&:hover {
								background: $blue_light;
							}
						}
					}
				}
			}
		}

		.w-categoryMenu__wall {
			a { color: $white; }
			.drop-title {
				font-size: 18px;
				font-weight: bold;
			}
			.w-categoryMenu__sublist {
				position: relative;
				overflow: hidden;
				margin: 0 -8px;
				padding: 0;
				list-style: none;
				& > li {
					display: block;
					float: left;
					width: 20%;
					@media (max-width: 1199px){ width: 25%; }
					@media (max-width: 991px){ width: 33.3333%; }
					padding: 16px 8px 0;
					& > .w-categoryMenu__link {
						position: relative;
						border: 0;
						display: block;
						text-align: center;
						.img-aligner {
							background: $white;
							//display: none;
						}
						.title {
							position: relative;
							overflow: hidden;
							display: block;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.labels {
							position: absolute; top: -8px; right: 0;
							.label {
								display: inline-block;
								vertical-align: top;
								padding: 2px 4px 3px;
								font-size: 12px;
								line-height: 1;
								@include border-radius(0);
							}
						}
						&:hover {
							opacity: .75;
						}
					}
					&.active {
						& > .w-categoryMenu__link {
						}
					}
				}
			}
		}
		//stop
	}
	&.w-categoryMenu_wide {
		position: relative;
		display: flex;
		//start
		.w-categoryMenu__list {
			min-width: 48%;
			margin: 0;
			padding: 0;
			list-style: none;
			&:not(:first-child){
				margin-left: 4%;
			}
			a {
				@include transition(none);
			}

			& > li {
				position: relative;
				display: block;
				/*&:not(:first-child){
					margin-top: -1px;
					&:before {
						content: '';
						background: $color_gray_10;
						position: absolute; top: 0; left: 0; right: 0;
						height: 1px;
					}
				}*/
				& > .w-categoryMenu__item {
					& > .w-categoryMenu__link {
						border: 0;
						position: relative;
						display: flex;
						align-items: center;
						//margin-left: -6px;
						//margin-right: -6px;
						//padding: 12px 20px 12px 80px;
						padding: 4px;
						font-weight: bold;
						color: $color_dark;
						line-height: 1.25;
						.img-aligner {
							//position: absolute; top: 50%; left: 6px;
							width: 64px;
							height: 32px;
							margin-right: 12px;
							//margin-top: -16px;
							.img-aligner__bg {
								width: auto;
								height: 100%;
							}
						}
						.title {
							flex-grow: 1;
						}
						.faw {
							position: absolute; top: 50%; right: 6px;
							display: block;
							margin-top: -8px;
							height: 16px;
							font-size: 14px;
							line-height: 16px;
						}
						&:hover {
							background: $blue_light;
						}
					}
				}
				.w-categoryMenu__drop {
					display: none;
					.drop-title {
						display: none;
					}
				}
				.w-categoryMenu__wall {
					display: none !important;
				}
				&.active {
					.w-categoryMenu__drop {
						display: block;
						@media(min-width: 768px){
							display: block !important;
						}
					}
				}
				&.shown {
					.w-categoryMenu__drop {
						display: block !important;
					}
				}
				&.open {
					& > .w-categoryMenu__item {
						& > .w-categoryMenu__link {
							.faw {
								@include transform(rotate(180deg));
							}
						}
					}
				}
			}
		}

		.w-categoryMenu__drop {
			.w-categoryMenu__sublist {
				padding: 0;
				list-style: none;
				margin: 2px 0 8px;
				& > li {
					& > .w-categoryMenu__link {
						border: 0;
						position: relative;
						display: block;
						padding: 8px 8px 8px 80px;
						color: $color_dark;
						line-height: 1.25;
						.img-aligner {
							position: absolute; top: 50%; left: 30px;
							width: 40px;
							height: 32px;
							margin-top: -16px;
							.img-aligner__bg {
								width: auto;
								height: 100%;
							}
						}
						.title {}
						.labels {
							.label {
								padding: 2px 4px 3px;
								font-size: 12px;
								line-height: 1;
								@include border-radius(0);
							}
						}
						.faw {
							position: absolute; top: 50%; right: 6px;
							display: block;
							margin-top: -8px;
							height: 16px;
							font-size: 14px;
							line-height: 16px;
						}
						&:hover {
							background: $blue_light;
						}
					}
				}
			}
		}
		//stop
	}
}

//
.w-categoryMenu-overlay {
	background: $white;
	position: fixed; top: 0; right: 0; bottom: 0; left: 0;
	z-index: 9999;
	overflow-y: auto;
	display: none;
	.w-categoryMenu-overlay__head {
		position: relative;
		padding: 24px 24px 0;
		h2, .h2 {
			font-size: 16px;
		}
		.closer {
			top: 24px;
			right: 24px;
			width: 24px;
			height: 24px;
		}
	}
	.w-categoryMenu-overlay__body {
		padding: 0 24px 24px;
		.w-categoryMenu__list {
			& > li {
				&:not(:first-child){
					&:before {
						left: -24px; right: -24px;
					}
				}
				.w-categoryMenu__item {
					.w-categoryMenu__link {
						.title {
							font-size: 16px;
						}
						&:hover {
							background: none;
						}
					}
				}
			}
		}
	}
}
.body-categoryMenu {
	@media(max-width: 767px){
		overflow: hidden;
		.w-categoryMenu:not(.w-categoryMenu_wide) {
			z-index: 999;
		}
		.w-categoryMenu-overlay {
			display: block;
		}
	}
}
/*


.box-categoryMenu {
	.box-categoryMenu__head {
		@media(min-width: 768px){
			display: none;
		}
	}
	.box-categoryMenu__body {}
	.box-categoryMenu__search {
		display: flex;
		.field {
			flex-grow: 1;
			.form-control {

			}
		}
		.button {
			margin-left: 4px;
			.btn {

			}
		}
	}
}*/

.listing-selected-car-head {
	background: #EBFFD6;
	display: flex;
	padding: 8px;
	font-size: 13px;
	line-height: 1.25;
	.lsch__image {
		width: 72px;
		min-width: 72px;
		margin-right: 8px;
		img {
			display: block;
			width: 100%;
		}
	}
	.lsch__body {
		flex-grow: 1;
	}
	.lsch__links {
		display: flex;
		margin-top: 4px;
		a {
			border-bottom-color: transparent;
			&:not(:first-child){
				margin-left: auto;
			}
			&:hover {
				border-bottom-color: $blue;
			}
		}
	}
}