@import "variables";

.form-autopartsbynumber {
	h2, .h2 {
		color: $blue;
		line-height: 1.25;
		@media (max-width: 449px){
			text-align: center;
		}
	}
	@media (min-width: 992px){ padding-left: 24px; }
	@media (max-width: 449px){
		background: url(../images/examples/car-number-search__bg.jpg) no-repeat 50% 50%;
		background-size: cover;
		margin: -12px -12px 0 -12px;
		padding: 36px 12px 48px;
		@media (max-width: 360px){
			padding-left: 24px;
			padding-right: 24px;
		}
		.limiter {
			max-width: 240px;
			margin: 0 auto;
		}
		h4 {
			font-size: 26px;
			font-weight: bold;
			color: $color_dark;
		}
	}
	.fan__input-group {
		position: relative;
		display: block;
		@media (min-width: 450px) {
			width: 140px;
		}
		.fan__input-group-img {
			position: absolute; top: 0; left: 0;
			display: block; height: 100%;
			@include border-radius(3px 0 0 3px);
		}
		.form-control {
			border-color: $color_blue;
			display: block;
			padding-left: 36px;
			padding-right: 6px;
			font-size: 20px;
			text-transform: uppercase;
			@media (max-width: 449px){
				height: 52px;
				padding: 10px 10px 10px 55px;
				font-size: 34px;
			}
			&:focus {
				//box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
				@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;
			}
			@keyframes fan-animate {
				0%   { @include box-shadow(unquote("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6)")); }
				50%  { @include box-shadow(unquote("inset 0 1px 1px rgba(0,0,0,.075), 0 0 16px rgba(13,97,171,.9)")); }
				100% { @include box-shadow(unquote("inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6)")); }
			}
		}
	}

	.search-error {
		position: relative;
		display: block;
		margin-top: 10px;
		margin-bottom: 15px;
		padding-right: 50px;
		@media (min-width: 1200px){ padding-right: 90px; }
		color: $color_red;
		display: none;
		.closer {
			@media (min-width: 450px) {
				display: none;
			}
		}
		.arrow {
			background: url(../images/svg/arrow-to-selects.svg) no-repeat 0 0 / 100% auto;
			position: absolute; top: -30px; right: -20px;
			width: 98px; height: 54px;
			margin: 0 0 0 30px;
			@media (min-width: 1200px){ @include transform(rotate(10deg)); }
			@media (max-width: 1199px){ top: -20px; right: -25px; width: 70px; height: 50px; margin: 0 0 0 -5px; }
			@media (max-width: 991px){ display: none; }
		}

		@media(max-width: 449px){
			background: $color_white;
			position: relative;
			//display: block;
			margin: 0 -12px -46px;
			padding: 12px 24px;
			font-size: 14px;
			line-height: 1.5em;
			@include box-shadow(0 2px 3px $color_gray_30);
			/*&:before {
				content: '';
				position: absolute; top: 100%; left: 0; right: 0;
				display: block; height: 5px;
				//@include linear-gradient(0deg, transparent, $color_gray_30);
			}*/
			.arrow {
				position: absolute; top: 100%; left: 48px; z-index: 3;
				display: block; width: 20px; height: 10px;
				&:before {
					content: '';
					border: 10px solid transparent;
					border-top-color: $color_gray_20;
					position: absolute; top: 2px; left: 0; z-index: 1;
					display: block;
				}
				&:after {
					content: '';
					border: 10px solid transparent;
					border-top-color: $color_white;
					position: absolute; top: 0; left: 0; z-index: 2;
					display: block;
				}
			}
		}
		@media(max-width: 360px) {
			margin: 0 -24px -46px;
			font-size: 13px;
			line-height: 1.5em;
		}
	}
	&.has-error {
		.search-error {
			display: block;
			//@media(min-width: 450px){ display: block; }
		}
		.form-control { color: $color_red; @include placeholder(lighten($color_red, 20%)); }
	}

	.list-inline {
		li {
			position: relative;
			.fan-dropdown { left: 5px; }
		}
	}

	.fan-viewed {
		position: relative;
		z-index: 333;
		max-width: 450px;
		@media (max-width: 449px) { display: none; }
		ul {
			margin: 0; padding: 0; list-style: none;
			li {
				position: relative;
				margin: 0 -4px;
				padding: 4px;
				padding-right: 40px;
				text-transform: uppercase;
				white-space: nowrap;
				.preview {
					background: $color_water;
					position: absolute; top: 0; left: 100%;
					z-index: 555;
					width: 200px;
					padding: 12px;
					padding-top: 29px;
					display: none;
					@media (max-width: 767px) {
						top: 100%; right: 0; left: auto;
					}
					.img {
						margin-bottom: 8px;
						img { display: block; width: 100%; }
					}
					.caption {
						text-align: center;
					}
				}
				.number {
					display: inline-block;
					vertical-align: top;
					min-width: 68px;
					min-height: 1px;
					.ico-auto-brands {
						display: block;
						width: 20px;
						height: 20px;
						margin-left: auto;
						margin-right: 8px;
						font-size: 20px;
						line-height: 20px;
					}
					img {
						display: block;
						height: 20px;
						margin-left: auto;
						margin-right: 8px;
					}
				}
				.number.text-right ~ .brand {
					padding: 0 8px;
					.ico-auto-brands {
						margin-left: auto;
						margin-right: auto;
					}
				}
				.brand {
					display: inline-block;
					vertical-align: top;
					min-width: 20px;
					.ico-auto-brands {
						display: block;
						width: 20px;
						height: 20px;
						margin-left: auto;
						margin-right: 8px;
						font-size: 20px;
						line-height: 20px;
					}
					img {
						display: block;
						height: 20px;
						margin-left: auto;
						margin-right: 8px;
					}
				}
				.model {
					position: relative;
					overflow: hidden;
					display: inline-block;
					vertical-align: top;
					margin-right: 12px;
					max-width: 250px;
					text-overflow: ellipsis;
					@media(min-width: 768px){
						max-width: 380px;
					}
					@media(min-width: 992px){
						max-width: 260px;
					}
					@media(min-width: 1200px){
						max-width: 340px;
					}
				}
				.remove {
					position: relative;
					z-index: 777;
					display: none;
					white-space: nowrap;
					&:hover {
						color: $color_red;
					}
				}
				&:hover {
					background: $color_water;
					.preview { display: block; }
					.remove { display: inline-block; }
				}
			}

			&.disabled {
				margin-top: 16px;
				& > li {
					opacity: .5;
					.number {
						filter: grayscale(100%);
					}
					&:hover {
						opacity: 1;
						.number {
							filter: grayscale(0);
						}
					}
				}
			}
		}
	}

	.form-btn {
		.btn {
			-webkit-transition-property: none;
			-moz-transition-property: none;
			-o-transition-property: none;
			transition-property: none;
			@include transition(none !important);
			@media (min-width: 450px){
				min-width: 175px;
				padding: 5px 8px 8px 32px;
				font-size: 16px;
				line-height: 17px;
				.btn__ico {
					left: 10px;
					width: 20px;
					height: 20px;
					margin-top: -10px;
				}
			}
			@media (max-width: 449px){
				overflow: hidden;
				display: block; width: 100%;
				margin: 0 auto;
				padding: 5px 10px 7px;
				font-size: 24px;
				line-height: 1.5em;
				white-space: nowrap;
				.btn__ico {
					left: 16px;
					width: 20px; height: 20px;
					margin-top: -10px;
				}
			}
			&.btn-ico-loading {
				min-width: auto;
				.btn__ico {
					left: 16px;
					width: 20px; height: 20px;
					margin-top: -10px;
				}
			}
		}
	}
}

.fan-dropdown {
	background: $color_mystic;
	position: absolute; top: 100%; left: 0;
	z-index: 555;
	width: 450px;
	margin-top: 4px;
	@include box-shadow(0 2px 4px 0 rgba(0,0,0,.5));
	@include border-radius(0 3px 3px 3px);
	@media (max-width: 767px){
		width: 420px;
	}
	@media (max-width: 449px){
		//width: 98%;
		width: auto;
		right: 5px;
	}
	.fan-dropdown__head {
		padding: 24px;
		font-size: 22px;
		line-height: normal;
		&.p-b-0 {
			padding-bottom: 0;
		}
		&.p-b-8 {
			padding-bottom: 8px;
		}
		& + .fan-dropdown__body {
			padding-top: 0;
		}
	}
	.fan-dropdown__body {
		padding: 24px;
		.list-links {
			li {
				position: relative;
				padding: 12px 24px;
				//& + li { padding-top: 0; }
				&:hover {
					background: lighten($color_wildblue, 25%);
				}
			}
		}
		.media {
			position: relative;
			.media-left {
				padding-right: 12px;
				img { display: block; width: 120px; }
			}
			@media (max-width: 449px){
				.media-left {
					img { width: 75px; }
				}
				.media-body {
					font-size: 13px;
					.fs-18 { font-size: 14px; }
				}
			}
		}
		&.p-0 {
			padding: 0;
		}
	}
}

.form-autopartsbymodel {
	@media (max-width: 449px){
		background: #f4f6f9;
		position: relative;
		margin: -20px -12px -10px;
		padding: 20px 12px;
	}
	.bootstrap-select.disabled { display: none !important; }
	.bootstrap-select.active {
		.btn-default {
			background: #ffe17f !important;
			border-color: #b38225 !important;
			@include box-shadow(0 0 3px #ecbb5e);
		}
	}
	.car-model-search {
		background: $color_white url(../images/icons/select-arrow-down.png) no-repeat center right;
		border-color: $color_gray_50;
		height: auto !important;
		padding: 8px;
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		&[disabled]{
			background: $color_gray_05;
			border-color: $color_gray_20;
		}
	}

	.btn.btn-default, .btn.disabled {
		border-color: $color_gray_50 !important;
	}
}

.catalog-popular-list {
	position: relative;
	margin: 0 -4px; padding: 0; list-style: none;
	font-size: 12px;
	line-height: 16px;
	& > li {
		display: inline-block;
		vertical-align: top;
		//width: 12.5%;
		width: 11.1111%;
		padding: 0 4px 30px;
		zoom: 1;
		@media (max-width: 991px){
			width: 16.6666%;
		}
		@media (max-width: 767px){
			width: 20%;
		}
		@media (max-width: 599px){
			width: 25%;
		}
		@media (max-width: 449px){
			//border-top: 1px solid $color_gray_10;
			display: block;
			width: auto;
			padding: 0;
			& + li { border-top: 1px solid $color_gray_10; }
		}
		&.more {
			@media (max-width: 449px){
				display: none;
				padding-top: 10px;
				text-align: center;
			}
		}
	}

	.product-preview {
		@include transition();
		.product-preview__head {
			border-color: $color_gray_10;
			@include transition();
		}
		.product-preview__body {
			padding: 2px 8px 8px;
		}
		.name {
			font-weight: normal;
			text-align: left;
			@include transition();
		}
		&:hover {
			background: $color_wildblue;
			.product-preview__head { border-color: $color_wildblue; }
			.name { color: $color_white; }
		}

		@media (max-width: 449px) {
			padding: 12px 0 12px 50px;
			.product-preview__head {
				position: absolute; top: 50%; left: 4px;
				display: block;
				width: 30px;
				margin-top: -15px;
			}
			.product-preview__body {
				padding: 0;
			}
			.product-preview__marks {
				display: none;
			}
			.name { padding: 0; }
		}
	}

	.cpl-item {
		position: relative;
		@media (max-width: 449px) {
			padding: 8px 0 8px 50px;
		}
		.cpl-img {
			@media (min-width: 450px) {
				border: 1px solid #dde4ec;
				@include transition(all 0.15s linear 0s);
			}
			@media (max-width: 449px) {
				position: absolute; top: 50%; left: 8px;
				display: block;
				width: 30px;
				margin-top: -15px;
			}
			img { display: block; width: 100%; }
		}
		.cpl-description {
			@media (min-width: 450px) {
				padding: 6px 8px 8px;
				@include transition(all 0.15s linear 0s);
			}
			@media (max-width: 449px) {
				display: inline-block;
				vertical-align: middle;
			}
			&::first-letter { text-transform: uppercase; }
		}
		&:hover {
			@media (min-width: 450px) {
				.cpl-img { border-color: #7e93b2; }
				.cpl-description { background: #7e93b2; color: $color_white; }
			}
			@media (max-width: 449px) {
				background: $color_gray_05;
			}
		}
	}

	.more-link {
		background: #dde4ec;
		border: none;
		display: inline-block;
		padding: 8px;
		color: $color_dark;
		white-space: nowrap;
		&:hover {
			background: #7e93b2;
			color: $color_white;
		}
	}
}

.widget-order-steps {
	margin: 0; padding: 0; list-style: none;
	& > li {
		background: #f1f4f6;
		position: relative;
		padding: 4px 24px 4px 30px;
		& + li { margin-top: 2px; }
		&:nth-child(1) {
			background: #e4e9ed;
			&:before {
				content: '';
				background: url(../images/examples/order-steps-1-arrow.png) no-repeat 0 0 / 100% 100%;
				position: absolute; top: 0; right: 100%;
				width: 45px; height: 100%;
				@media (max-width: 991px) { display: none; }
			}
		}
		&:nth-child(2) { background: #ebeff2; }

		.number {
			position: absolute; top: 50%; left: 24px;
			display: block; height: 36px;
			margin-top: -18px;
			font-size: 24px;
			font-weight: bold;
			line-height: 36px;
			color: #82979d;
		}
		.media {
			margin: 0;
		}
		.media-left {
			min-width: 140px;
			height: 75px;
			img {
				display: block;
				height: 75px;
			}
		}
	}
	@media (max-width: 449px){
		& > li {
			padding: 4px 24px 4px 20px;
			font-size: 14px;
			line-height: 1.25;
			.number { left: 12px; }
			.media-left {
				min-width: 96px;
				height: 48px;
				img {
					//width: 75px;
					height: 48px;
				}
			}
		}
	}
}

.list-autobrands-container {
	.autobrands__popular {
		display: none;
		@media (max-width: 599px) {
			display: block;
		}
	}
	.autobrands__all {
		@media (max-width: 599px) {
			display: none;
		}
	}

	/*.list-autobrands {
		li {
			@media (max-width: 449px) {
				&:not(.spec){
					display: none;
				}
			}
		}
	}*/
	.list-autobrands-more {
		padding-top: 24px;
		text-align: center;
		@media (min-width: 599px){ display: none; }
	}

	&.show-all {
		.autobrands__popular {
			@media (max-width: 599px) {
				display: none;
			}
		}
		.autobrands__all {
			@media (max-width: 599px) {
				display: block;
			}
		}
		.list-autobrands {
			li { display: block !important; }
		}
		.list-autobrands-more { display: none; }
	}
}

.list-autobrands {
	margin: 0; padding: 0; list-style: none;
	li {
		& + li {
			margin-top: 10px;
			@media (max-width: 449px) {
				margin-top: 15px !important;
			}
		}
	}
	a {
		border: none;
		color: $black;
		text-decoration: none;
		&:hover {
			color: $blue;
		}
	}
	.icobox {
		@media (min-width: 768px) {
			font-size: 18px;
			line-height: 1.5;
		}
		white-space: nowrap;
	}

	&.xl {
		li {
			& + li {
				margin-top: 16px;
				@media (max-width: 449px) {
					margin-top: 20px !important;
				}
			}
		}
	}

	&.lg {
		@media (max-width: 449px) {

		}
	}
}

//
.p-home-brands {
	padding-bottom: 48px;
	.col-xxs-12 {
		@media (max-width: 575px) {
			width: auto !important;
			float: none !important;
		}
	}
	& > .nav-tabs {
		@media (max-width: 575px){
			display: none;
		}
	}
	& > .tab-content {
		.tab-pane {
			.tab-pane__title {
				margin-bottom: 16px;
				font-size: 20px;
				font-weight: bold;
				@media (min-width: 576px){
					display: none;
				}
			}
			@media (max-width: 575px){
				display: block;
				&:not(:first-child){
					margin-top: 48px;
				}
			}
		}
	}
	.list-autobrands-container {
		.autobrands__popular {
			display: none !important;
			@media (max-width: 575px) {
				display: block !important;
			}
		}
		.autobrands__all {
			display: block !important;
			@media (max-width: 575px) {
				display: none !important;
			}
		}
		&.show-all {
			.autobrands__popular { display: none !important; }
			.autobrands__all { display: block !important; }
		}

		.autobrands__popular {
			.list-autobrands {
				& > li {
					&:not(:first-child){
						border-top: 1px solid #dde4ec;
						margin-top: 16px;
						padding-top: 16px;
					}
				}
				.icobox {
					padding-left: 64px;
					font-size: 24px;
					font-weight: bold;
				}
			}
		}
		.autobrands__all {
			& > .col {
				.list-autobrands {
					& > li {
						@media (max-width: 575px){
							border-top: 1px solid #dde4ec;
							margin-top: 12px !important;
							padding-top: 12px;
						}
					}
				}
				&:first-child{
					.list-autobrands {
						& > li {
							@media (max-width: 575px){
								&:first-child {
									border-top: 0;
								}
							}
						}
					}
				}
			}
		}
	}
	#tab-truck {
		@media (max-width: 575px){
			background: $color_gray_03 url(../images/examples/truck.png) no-repeat 0 0 / 100% auto;
			margin-left: -12px;
			margin-right: -12px;
			padding: 12px;
			.col-xxs-12 {
				.list-autobrands {
					& > li {
						border-top: 1px solid #dde4ec;
						margin-top: 12px !important;
						padding-top: 12px;
					}
				}
				&:first-child {
					.list-autobrands {
						& > li:first-child {
							border: 0;
							margin-top: 0 !important;
							padding-top: 0 !important;
						}
					}
				}
			}
		}
	}
}

.home-spg-categories {
	max-width: 740px;
	@media(min-width: 1200px){
		max-width: 900px;
	}
	margin-bottom: 80px;
}