@import "variables";

//cart table
.cart-table {
	width: 100%;
	font-size: 12px;
	tr {
		th {
			background: $color_gray_05;
			padding: 8px 8px 8px 0;
			font-size: 10px;
			font-weight: normal;
			white-space: nowrap;
			&:first-child { padding-left: 8px; }
		}
		td {
			background: $color_gray_05;
			border-top: 4px solid $color_white;
			padding: 8px 8px 8px 0;
			vertical-align: top;
			&:first-child { padding-left: 8px; }
		}
	}

	.cart-table__image {
		border: none;
		display: block;
		width: 75px;
		img {
			max-width: 100%;
		}
	}
	.cart-table__product {
		min-width: 250px;
	}
	.cart-table__price {
		font-size: 20px;
	}
}

//bill table
.cart-bill-table {
	width: 100%;
	tr {
		th {
			border-top: 1px solid $color_dark;
			padding: 4px 8px 4px 0;
			&:first-child { padding-left: 8px; }
		}
		td {
			border-top: 1px solid $color_dark;
			padding: 4px 8px 4px 0;
			&:first-child { padding-left: 8px; }
		}
	}
}

//q-counter
.q-counter {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 90px;
	padding: 0 24px;
	.q-counter__minus {
		position: absolute; top: 50%; left: 0;
		display: block; width: 20px; height: 20px;
		margin: -10px 0 0 0;
		&:before {
			content: '';
			background: $color_gray_30;
			position: absolute; top: 50%; left: 50%;
			display: block; width: 16px; height: 2px;
			@include transform(translateX(-50%) translateY(-50%));
		}
		&:not(.disabled):hover {
			background: lighten($color_red, 20%);
			cursor: pointer;
			&:before {
				background: $color_white;
			}
		}
		&.callToAction {
			background: $blue !important;
		}
	}
	.q-counter__plus {
		position: absolute; top: 50%; right: 0;
		display: block; width: 20px; height: 20px;
		margin: -10px 0 0 0;
		&:before {
			content: '';
			background: $color_gray_30;
			position: absolute; top: 50%; left: 50%;
			display: block; width: 16px; height: 2px;
			@include transform(translateX(-50%) translateY(-50%));
		}
		&:after {
			content: '';
			background: $color_gray_30;
			position: absolute; top: 50%; left: 50%;
			display: block; width: 16px; height: 2px;
			@include transform(translateX(-50%) translateY(-50%) rotate(90deg));
		}
		&:not(.disabled):hover {
			background: lighten($color_green, 20%);
			cursor: pointer;
			&:before, &:after {
				background: $color_white;
			}
		}
	}
	.q-counter__field {
		.form-control {
			height: 32px;
			padding: 4px 8px;
			text-align: center;
		}
	}

	&.rounded {
		width: 96px;
		padding-left: 28px;
		padding-right: 28px;
		.q-counter__minus, .q-counter__plus {
			background: $gray_light;
			width: 24px; height: 24px;
			margin-top: -12px;
			@include border-radius(50%);
			&:before, &:after {
				width: 12px;
			}
		}
	}

	&.v2--q-counter {
		.q-counter__field {
			.form-control {
				border-color: #e9e9e9;
				height: 32px;
				padding: 4px 8px;
				font-size: 16px;
				color: #9b9b9b;
				text-align: center;
				@include box-shadow(none);
				&:focus {
					border-color: $color_gray_30;
					color: #1a1a1a;
				}
			}
		}
	}
}

//pointer
.pointed {
	position: relative;
	.pointed-left-arrow {
		background: url("../images/pointer-left-arrow.png") no-repeat 0 0/100% auto;
		position: absolute; top: 50%; right: 100%;
		display: block; width: 50px; height: 16px;
		margin: -8px 10px 0 0;
	}
	.pointed-top-arrow {
		background: url("../images/pointer-top-arrow.png") no-repeat 0 0/100% auto;
		position: absolute; bottom: 100%; left: 50px;
		display: block; width: 45px; height: 25px;
		margin: 0 0 10px 0;
	}
	.pointed-bottom-arrow {
		background: url("../images/pointer-bottom-arrow.png") no-repeat 0 0/100% auto;
		position: absolute; top: 100%; left: -20px;
		display: block; width: 45px; height: 45px;
		margin: 10px 0 0 0;
	}

	.pointed-bracket-l {
		background: #2db92d;
		position: absolute; top: 0; bottom: 0; left: -8px;
		display: block; width: 4px;
		&:before {
			content: '';
			background: #2db92d;
			position: absolute; bottom: 100%; left: 0;
			display: block; width: 24px; height: 4px;
		}
		&:after {
			content: '';
			background: #2db92d;
			position: absolute; top: 100%; left: 0;
			display: block; width: 24px; height: 4px;
		}
	}
	.pointed-bracket-r {
		background: #2db92d;
		position: absolute; top: 0; bottom: 0; right: -8px;
		display: block; width: 4px;
		&:before {
			content: '';
			background: #2db92d;
			position: absolute; bottom: 100%; right: 0;
			display: block; width: 24px; height: 4px;
		}
		&:after {
			content: '';
			background: #2db92d;
			position: absolute; top: 100%; right: 0;
			display: block; width: 24px; height: 4px;
		}
	}

	&.pointed-underline {
		border-bottom: 4px solid #2db92d;
		/*background: $color_red;
		position: absolute; top: 100%; left: 0; right: 0;
		display: block; height: 4px;*/
	}
}

//table-totalsumm
.table-totalsumm {
	td {
		padding: 5px 0 5px 20px;
		text-align: right;
		&:first-child { padding-left: 0; }
	}
}


//jQuery UI fix
.js-datepicker-ico {
	color: $color_gray_50;
	&:hover {
		color: $color_blue;
		cursor: pointer;
	}
}
.ui-datepicker {
	z-index: 777 !important;
	.ui-datepicker-prev, .ui-datepicker-next {
		border: 1px solid transparent;
		&:hover {
			border-color: $color_gray_30;
		}
	}
}

//
//table sort
.js-table-sort, .js-link-sort {
	position: relative;
	display: inline-block;
	padding-right: 15px;
	.js-table-sort-arr, .js-link-sort-arr {
		position: absolute; top: 50%; right: 0;
		display: block; width: 10px; height: 14px;
		margin-top: -7px;
		//margin-top: .15em;
		&:before {
			content: '';
			border: 5px solid transparent;
			border-bottom-color: $color_gray_40;
			position: absolute; top: -5px; left: 0;
			display: block;
		}
		&:after {
			content: '';
			border: 5px solid transparent;
			border-top-color: $color_gray_40;
			position: absolute; bottom: -5px; left: 0;
			display: block;
		}
	}

	&.asc {
		color: $color_red;
		.js-table-sort-arr, .js-link-sort-arr {
			&:after {
				border-top-color: $color_red;
			}
		}
	}
	&.desc {
		color: $color_red;
		.js-table-sort-arr, .js-link-sort-arr {
			&:before {
				border-bottom-color: $color_red;
			}
		}
	}
	&:hover {
		cursor: pointer;
	}
}
.js-table-sort-arr, .js-link-sort-arr {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 10px; height: 14px;
	margin: -2px 0 0 4px;
}

//sticky
.js-sticky, .js-sticky-col {
	position: relative;
	//@include transition(all .1s linear 0s);
	@media (max-width: 767px){
		top: 0 !important;
		min-height: auto !important;
		//@include transform(translateY(0));
	}
}
.js-sticky:hover {
	z-index: 777;
}

//w-i-car
.w-i-car {
	background: #D5E6F6;
	position: relative;
	margin: 0 -12px 16px;
	padding: 8px;
	font-size: 14px;
	.w-i-car__head {
		margin-top: -4px;
		padding-bottom: 4px;
		font-size: 13px;
	}
	.w-i-car__body {
		.w-i-car__image {
			float: left;
			width: 72px;
			padding-top: 4px;
			img {
				display: block;
				width: 100%;
			}
		}
		.w-i-car__model {
			margin-left: 80px;
			font-size: 14px;
			line-height: 1.25;
			color: #2c2c2c;
			.title {
				font-weight: bold;
			}
		}
	}
	.w-i-car__footer {

		text-align: center;
		.title {
			padding: 8px 0;
			font-weight: bold;
		}
		.input-group {
			max-width: 170px;
			margin: 0 auto;
			.form-control {
				padding-left: 4px;
				padding-right: 4px;
				font-size: 18px;
				text-align: center;
			}
		}
		.more {
			padding-top: 8px;
			padding-bottom: 4px;
			a {
				border: none;
				font-weight: bold;
				color: inherit;
			}
		}
	}
}
.w-i-title {
	//border-bottom: 1px solid $color_gray_10;
	margin-bottom: 16px;
	//padding-bottom: 16px;
	font-size: 16px;
	h1, .h1 {
		margin-bottom: 0;
		font-size: 22px;
		span {
			font-weight: normal;
			color: $color_gray_50;
		}
	}
}

//pre-page-gallery
.pre-page-gallery {
	background: $gray_light;
}

//aimbox
.aimbox-link {
	&.hover {}
	&.click {
		cursor: pointer;
	}
	&.in {}
}

.aimbox {
	position: relative;
	visibility: hidden;
	opacity: 0;
	@media(min-width: 992px){
		touch-action: none;
		user-select: none;
		-ms-user-select: none;
		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
	}
	//@include transition(none !important);
	.aimbox-controls {
		//position: absolute; top: 32px; right: 32px;
		position: relative;
		z-index: 555;
		padding: 0 0 4px;
		list-style: none;
		text-align: right;
		a {
			background-color: rgba(255,225,255,0.6);
			background-position: 50% 50%;
			background-size: 75%;
			background-repeat: no-repeat;
			border: none;
			display: inline-block; width: 20px; height: 20px;
			margin-left: 8px;
			opacity: 1;
			@include border-radius(2px);
			&:hover { opacity: 1; }
			&.closer {
				background: $white;
				position: relative; top: 0; right: 0;
				&:before, &:after {
					background: $black;
					width: 85%;
				}
			}
			&.fullscreen {
				background-color: $white;
				//background-size: 100%;
				//background-image: url(../templates/images/full-screen.png);
				background-image: url(../images/icons/full-screen.png);
				position: absolute; top: 100%; right: 0;
				width: 24px; height: 24px;
				margin: 8px 8px 0 0;
			}

			&:hover {
				opacity: 1;
			}
		}
	}
	.aimbox-image {
		position: relative;
		overflow: hidden;
		& > img {
			display: block;
			//width: 100%;
		}
		//.catwalk { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
	}
	.aimbox-zoom {
		position: absolute; top: 0; right: 0; bottom: 0; left: 0;
		z-index: 777;
		overflow: hidden;
		cursor: zoom-out;
		img {
			position: absolute; top: 0; left: 0;
		}
	}
	&.preview {
		background: #1A1A1A;
		position: absolute; top: 0; left: 0;
		z-index: 9999;
		padding: 24px;
		.aimbox-controls {
			margin: -15px 0 0;
		}
	}
	&.overlay {
		background: $gray_dark;
		background: rgba(255,255,255,0.95);
		position: fixed; top: 0; right: 0; bottom: 0; left: 0;
		z-index: 9999;
		.aimbox-image {
			//position: absolute; top: 50%; left: 50%;
			position: absolute; top: 12px; right: 12px; bottom: 12px; left: 12px;
			display: block;
			overflow: visible;
			//@include transform(translateX(-50%) translateY(-50%));
			.closer {
				position: absolute; top: -12px; right: -12px; bottom: -12px; left: -12px;
				z-index: 1;
				display: block;
				width: auto;
				height: auto;
				&:before, &:after {
					display: none;
				}
			}
			img {
				position: absolute; top: 50%; left: 50%;
				z-index: 55;
				display: block;
				max-width: 100% !important;
				max-height: 100% !important;
				@include transform(translateX(-50%) translateY(-50%));
			}
		}
		.aimbox-controls {
			position: absolute; top: 16px; right: 16px;
			margin: 0;
			a {
				width: 24px;
				height: 24px;
				&.closer {
					background: $gray_dark;
					&:before, &:after { background: $white; }
				}
				&.fullscreen { display: none; }
			}
		}
		.overlay-tip {
			background: rgba(0,0,0,0.5);
			position: absolute; top: 16px; left: 50%;
			z-index: 888;
			display: block; padding: 8px 16px;
			color: $white;
			@include border-radius(50px);
			@include transform(translateX(-50%));
			@media(max-width: 991px){
				display: none !important;
			}
		}
		.overlay-closer {
			position: absolute; bottom: 32px; left: 50%;
			z-index: 888;
			display: block;
			@include transform(translateX(-50%));
			.btn {
				padding: 8px 20px 10px;
			}
		}
	}
	&.in {
		visibility: visible;
		opacity: 1;
	}
}

.catwalk {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	z-index: 77;
	@media(min-width: 992px){
		touch-action: none;
		user-select: none;
		-ms-user-select: none;
		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
	}
	.catwalk-loading {
		position: absolute; top: 24px; left: 24px;
		.cwl-number {
			position: relative; z-index: 5;
			display: block; width: 80px; height: 80px;
			font-size: 18px;
			line-height: 80px;
			text-align: center;
		}
		.cwl-progress {
			border: 6px solid $green;
			border-bottom-color: transparent;
			position: absolute; top: 50%; left: 50%;
			display: block; width: 80px; height: 80px;
			margin: -40px 0 0 -40px;
			@include border-radius(50%);
			animation: rotate 1.5s linear infinite;
			-webkit-animation: rotate 1.5s linear infinite;
			@keyframes rotate {
				0% { @include transform(rotate(0deg)); }
				100% { @include transform(rotate(360deg)); }
			}
			@-webkit-keyframes rotate {
				0% { @include transform(rotate(0deg)); }
				100% { @include transform(rotate(360deg)); }
			}
		}
	}
	.catwalk-tip {
		background: rgba(0,0,0,0.5);
		position: absolute; bottom: 16px; left: 50%;
		z-index: 888;
		display: block; padding: 8px 16px 8px 40px;
		color: $white;
		@include border-radius(50px);
		@include transform(translateX(-50%));
		&:before {
			content: '';
			background: url(../images/icons/catwalk-rotater.png) no-repeat -1em 0;
			background-size: auto 100%;
			position: absolute; top: 50%; left: 12px;
			display: block; width: 24px; height: 24px;
			margin-top: -12px;
			font-size: 24px;
		}
	}
	.catwalk-list {
		position: absolute; top: 0; right: 0; bottom: 0; left: 0;
		margin: 0;
		padding: 0;
		list-style: none;
		visibility: hidden;
		opacity: 0;
		&:before {
			content: '';
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			z-index: 444;
			@media (min-width: 992px){
				touch-action: none;
			}
		}
		li {
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			visibility: hidden;
			opacity: 0;
			img {
				display: block;
				width: 100%;
			}
			&.in {
				visibility: visible;
				opacity: 1;
				z-index: 333;
			}
		}
	}
	&.in {
		.catwalk-loading { display: none; }
		.catwalk-list {
			visibility: visible;
			opacity: 1;
		}
	}
	&.running {}

	&:not(.running){
		cursor: zoom-in;
	}
}
.catwalk-mark {
	background: $gray_dark;
	background: rgba(0, 0, 0, 0.6);
	position: absolute; bottom: 0; right: 0;
	z-index: 3;
	padding: 2px 8px;
	color: $white;
	@media (max-width: 767px){
		padding: 1px 4px;
		font-size: 11px;
	}
}

//covid-limitations
.covid-limitations {
	h6 {
		margin-bottom: 16px;
		font-size: 16px;
	}
	.dropix {
		.dropix-balloon {
			@media(min-width: 768px){
				width: 380px;
			}
		}
		.dropix-content {
			font-size: 16px;
			color: $color_dark;
			.help-block {
				font-size: 12px;
				line-height: 1.25;
				color: $color_gray_40;
			}
			.table-worktime {
				font-weight: bold;
				text-transform: uppercase;
			}
		}
	}

	.page-contacts & {
		background: #FFEFC1;
		display: inline-block;
		margin-left: -8px;
		margin-right: -8px;
		padding: 3px 8px 4px;
	}
	.section-footer__rows & {
		margin-top: 8px;
		line-height: 1.25;
		@media(min-width: 767px){
			max-width: 220px;
		}
		a {
			color: $color_yellow;
		}
	}
}

//Review on Google
.review-on-google {
	h1, h2 {
		font-size: 34px;
		line-height: 1.25;
		color: $black;
		@media (max-width: 991px) {
			font-size: 28px;
		}
		@media (max-width: 767px) {
			font-size: 24px;
		}
	}

	.rog-row {
		@media(max-width: 767px){
			margin-left: -12px;
			margin-right: -12px;
			margin-bottom: -12px;
		}
		.rog-row__body {
			background: #f5f5f5;
			padding: 24px;
		}
		.rog-row__side {
			img {
				display: block;
				max-width: 100%;
			}
		}
		@media (max-width: 767px) {
			.rog-row__body {
				padding: 16px 12px 60px;
			}
		}
		@media (min-width: 768px) {
			display: flex;
			align-items: flex-start;
			.rog-row__body {
				min-width: 75%;
				padding: 40px 100px 40px 40px;
				@media (min-width: 992px) {
					min-width: 60%;
				}
			}
			.rog-row__side {
				flex-grow: 1;
				margin: 60px 0 0 -80px;
			}
		}
	}
	.rog-description {
		margin-bottom: 60px;
	}
	.rog-arrows {
		display: flex;
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			flex-grow: 1;
			padding-right: 12px;
			img {
				display: block;
				width: 28px;
				max-width: 100%;
			}
		}
		@media (max-width: 1199px) {
			li:nth-child(n+4){
				display: none;
			}
		}
		@media (max-width: 575px) {
			li:nth-child(n+3){
				display: none;
			}
		}
	}
	.rog-link {
		background: #030b0e;
		border: 0;
		position: relative;
		display: block;
		padding: 12px 16px 12px 52px;
		color: $white;
		@include border-radius(3px);
		i {
			background: $white;
			position: absolute; top: 50%; left: 12px;
			display: block;
			width: 28px;
			height: 28px;
			padding: 4px;
			margin-top: -14px;
			@include border-radius(50%);
			img {
				display: block;
				max-width: 100%;
			}
		}
		&:hover {
			background: #2c2c2c;
		}
		@media(max-width: 767px){
			font-size: 13px;
			padding: 12px 12px 12px 40px;
			i {
				width: 20px;
				height: 20px;
				padding: 3px;
				margin-top: -10px;
			}
		}
	}
}