@import "variables";

.p-cart {
	.p-cart__head {
		position: relative;
		margin-bottom: 40px;
		font-size: 16px;
		h1, .h1 {
			margin-bottom: 16px;
			font-size: 24px;
		}
		.heading-number {
			display: flex;
			align-items: flex-start;
			h1 {
				line-height: 1.25;
			}
			.number {
				margin-left: 8px;
				font-size: 24px;
				line-height: 1.25;
				font-weight: bold;
				&.white {
					color: #fff;
				}
			}
		}
		.p-cart__data {
			margin: 0 0 16px 0;
			padding: 0;
			list-style: none;
			& > li {
				&:not(:first-child){
					margin-top: 2px;
				}
			}
		}
		.p-cart__info {
			.alert {
				padding: 10px 16px 12px;
				@include border-radius(0);
			}
		}
		.p-cart-info__btns {
			margin: 0;
			padding: 0;
			list-style: none;
			& > li {
				margin-top: 12px;
			}
			.btn {
				min-width: 180px;
				padding: 8px 20px;
				text-align: left;
				@include border-radius(50px);
				&.btn-info {
					border: 0;
				}
				.icobox.size_16 {
					padding-left: 24px;
				}
			}
		}
		.p-cart__topSummary {
			.summary {
				@media(min-width: 1200px){
					color: $color_light_green;
				}
				@media(max-width: 1199px){
					background: $color_red;
					display: inline-block;
					padding: 0 6px;
					font-weight: normal;
					color: $white;
				}
			}
		}
		.p-cart__return {
			@media (min-width: 768px) {
				position: absolute; top: 0; right: 0;
			}
		}
		&.with-return {
			@media (min-width: 768px) {
				padding-right: 240px;
			}
		}
		&.disabled {
			h1, .h1 {
				color: $gray;
			}
			.p-cart__data {
				color: $gray;
			}
		}
	}
	.p-cart__body {
		margin-bottom: 32px;
		@media(max-width: 767px){
			margin-bottom: 16px;
		}
	}
	.p-cart__footer {
		.p-cart-footer__row {
			display: flex;
			@media(max-width: 991px){
				flex-direction: column;
			}
			.p-cart-footer__body {
				flex-grow: 1;
				@media(min-width: 992px){
					padding-right: 40px;
				}
			}
			.p-cart-footer__side {}
			.p-cart__delivery {
				@media(min-width: 992px){
					max-width: 540px;
				}
			}
		}
	}

	.p-cart__summary {
		@media(min-width: 1200px){
			padding-right: 12px;
		}
		text-align: right;
		table {
			margin-left: auto;
			margin-bottom: 16px;
			td {
				vertical-align: bottom;
				padding: 0 0 8px 16px;
				line-height: 18px;
				strong {
					font-size: 16px;
				}
				&.big {
					font-size: 16px;
					font-weight: bold;
					strong {
						font-size: 22px;
					}
				}
			}
		}

		.color-gray {
			.dash-link {
				color: inherit !important;
				border-bottom: 1px dashed $color_gray_20;
				&:hover {
					color: $blue !important;
					border-bottom-color: $blue;
				}
			}
		}

		/* ANIMATE FOR BUTTON MARK
		.form-field-marker {
			@media(min-width: 768px){
				animation: wobble 5s ease-in-out 5s infinite;
				@keyframes wobble {
					0%   { transform: none; }                 //0%
					10%  { transform: translateX(-12px); }    //20%
					20%  { transform: translateX(4px); }      //40%
					27%  { transform: translateX(-8px); }     //55%
					32%  { transform: translateX(2px); }      //70%
					36%  { transform: translateX(-4px); }     //85%
					39% { transform: none; }                 //100%
				}
			}
		}*/

		&.v2--p-cart__summary {
			table {
				td {
					color: #a1a1a1;
					&:not(.big){
						.text-primary {
							color: #77a6d0 !important;
						}
					}
				}
			}
			.form-field-marker {
				&.responsive-xs {
					@media(max-width: 767px){
						margin-right: 36px;
						padding: 8px 12px;
						font-size: 14px;
						text-align: left;
					}
				}
			}
		}
	}
	.p-cart__fixButton {
		&.fix {
			.box {
				@media(max-width: 767px){
					background: rgba(255,255,255,.75);
					position: fixed; right: 0; bottom: 0; left: 0;
					z-index: 888;
					padding: 12px;
				}
			}
		}
	}
	.p-cart__freon {
		margin-bottom: 24px;
		.freon-purchase-error {
			background: $red_light;
			display: inline-block;
			padding: 8px 12px;
			font-size: 14px;
			.icobox {
				.ico {
					top: 3px !important;
					margin: 0 !important;
				}
			}
		}
		.p-cart-form {
			background: #ffefc1;
			max-width: 600px;
			padding: 8px 12px;
			.p-cart-form__back {
				margin-bottom: 8px;
				font-weight: bold;
				font-size: 14px;
				a {
					border-bottom-color: transparent;
					&:hover {
						border-bottom-color: $blue;
					}
				}
			}
			.p-cart-form__head {
				margin-bottom: 8px;
				font-size: 16px;
				.title {}
				small {
					font-size: 14px;
				}
			}
			.p-cart-form__body {
				font-size: 14px;
			}
			.p-cart-form__footer {
				margin-top: 16px;
				text-align: right;
				.btn {
					padding: 8px 20px 9px;
					font-size: 16px;
				}
			}
			&.has-error {
				.p-cart-form__head {
					.title {
						color: $red !important;
					}
				}
				.form-check {
					color: $red !important;
				}
			}
			&.license-success {
				background: #B8E986;
				display: flex;
				//max-width: 750px;
				.p-cart-form__head {
					order: 3;
					margin: 0;
					padding-left: 16px;
					font-size: 12px;
					a {
						border-bottom-color: transparent;
						color: #7E93B2;
						&:hover {
							border-bottom-color: $blue;
							color: $blue;
						}
					}
				}
				.p-cart-form__body {
					order: 2;
					flex-grow: 1;
				}
				@media (max-width: 767px){
					flex-direction: column;
					.p-cart-form__head {
						padding: 4px 0 0 0;
						text-align: right;
					}
				}
			}
			&.contract-success {
				background: #B8E986;
			}
		}
	}
}

.p-cart__delivery {
	background: lighten($yellow, 40%);
	border: 1px solid $yellow;
	position: relative;
	.delivery__row {
		@media(min-width: 992px){
			display: flex;
			.panel-body {
				flex-grow: 1;
			}
			.delivery__date {
				padding: 15px;
			}
		}
		@media(max-width: 991px){
			.panel-body {}
			.delivery__date {
				padding: 0 15px 15px;
			}
		}
	}
	.panel-body {
		.delivery__date {
			margin-top: 16px;
			@media (min-width: 1200px){
				position: absolute; top: 15px; right: 15px;
				margin: 0;
			}
		}
	}
	dl {
		margin: 0;
		padding: 0;
		list-style: none;
		dt, dd {
			margin: 0;
			padding: 0;
		}
		dt {
			font-size: 16px;
		}
		& + dl { margin-top: 16px; }
	}
	.p-cart-start-highlight {
		animation: highlight .75s ease-in-out .5s 3;
		-webkit-animation: highlight .75s ease-in-out .5s 3;
		@keyframes highlight {
			0%  { background: transparent; }
			45% { background: $yellow; }
			95% { background: transparent; }
		}
		@-webkit-keyframes highlight {
			0%  { background: transparent; }
			45% { background: $yellow; }
			95% { background: transparent; }
		}
	}

	.delivery__left {
		@media (min-width: 1200px) {
			float: left;
			max-width: 55%;
		}
	}
	.delivery__right {
		@media (min-width: 1200px){
			float: right;
			max-width: 45%;
		}
		.delivery__date {
			@media (min-width: 1200px){
				position: relative; top: auto; right: auto;
				text-align: right;
			}
		}
	}
	&.danger {
		border-color: $red;
	}
}

.p-cart-table {
	border-top: 1px solid $gray_light;
	.p-cart-table__th {
		background: $gray_light;
		padding: 4px 12px 6px;
		font-weight: bold;
		font-size: 11px;
		color: $gray;
		@media (max-width: 1199px){
			display: none;
		}
		.p-cart-table__data {
			font-size: 0;
		}
		.p-cart-table__data li {
			font-size: 11px !important;
		}
	}
	.p-cart-table__tr {
		border-bottom: 1px solid $gray_light;
		padding: 8px 12px;
		font-size: 14px;
		@include transition();
		@media (max-width: 1199px){
			padding-left: 0;
			padding-right: 0;
		}
		.p-cart-table__data {
			font-size: 0;
			li {
				padding-top: 4px;
				font-size: 16px;
				@media(max-width: 767px){
					font-size: 14px;
				}
			}
		}

		&.delivery {
			@media (max-width: 767px) {
				background: #fff6da;
			}
			&.hover {
				background: $blue_light;
			}
			$gray          : #a1a1a1;
			$gray_light    : #e9e9e9;
			color: $gray;
			@media(max-width: 1199px){
				margin-left: -24px;
				margin-right: -24px;
				padding-left: 24px;
				padding-right: 24px;
			}
			@media(max-width: 767px){
				margin-left: -12px;
				margin-right: -12px;
				padding-left: 12px;
				padding-right: 12px;
			}
			.p-cart-table__description {
				font-size: 14px;
				color: $color_dark;
				.list-delivery-data {
					margin: 0;
					padding: 0;
					list-style: none;
					& > li {
						&:not(:first-child){
							margin-top: 4px;
						}
						&.button {
							margin-top: 12px;
						}
					}
				}
				.change-data {
					a {
						border-bottom-color: transparent;
						color: $gray;
						&:hover {
							border-bottom-color: $gray;
						}
					}
				}
			}
			.p-cart-table__data {
				li {
					&.date {
						color: $color_dark !important;
						.date-label {
							width: 160px;
							font-size: 14px;
							color: $gray;
							white-space: normal;
							line-height: 1.25;
						}
						@media(max-width: 1199px){
							display: block !important;
							float: none;
							margin-bottom: 8px;
							text-align: left;
							.date-label {
								width: auto;
							}
						}
					}
					&.price {
						color: #a1a1a1;
					}
					&.quantity {}
					&.discount {}
					&.total {}
				}
			}
		}

		&.emphasis {
			-webkit-animation: flash linear 1s 3;
			animation: flash linear 1s 3;
			@keyframes flash {
				0% { background: transparent; }
				50% { background: lighten($red, 50%); }
				100% { background: transparent; }
			}
			@-webkit-keyframes flash {
				0% { background: transparent; }
				50% { background: lighten($red, 50%); }
				100% { background: transparent; }
			}
		}

		&.hasError {
			background: #FFE7E7;
			&.blinking {
				-webkit-animation: cartTrBlinking .75s ease-in-out 3;
				animation: cartTrBlinking .75s ease-in-out 3;
				@-webkit-keyframes cartTrBlinking {
					0% {
						background: #FFE7E7;
					}
					60% {
						background: #fbb2b2;
					}
				}
				@keyframes cartTrBlinking {
					0% {
						background: #FFE7E7;
					}
					60% {
						background: #fbb2b2;
					}
				}
			}
			@media(max-width: 1199px){
				margin-top: -1px;
				margin-left: -24px;
				margin-right: -24px;
				padding-left: 24px;
				padding-right: 24px;
			}
			@media(max-width: 767px){
				margin-left: -12px;
				margin-right: -12px;
				padding-left: 12px;
				padding-right: 12px;
			}
			.p-cart-table__data li.price,
			.p-cart-table__data li.total,
			.p-cart-table__data li.total .text-primary {
				color: #9B9B9B !important;
			}
			.p-cart-table__remove {
				a {
					@media(max-width: 1199px){
						font-weight: bold;
						color: #d70a0a !important;
						.fa {
							color: #d70a0a !important;
						}
					}
					@media(min-width: 1200px){
						background: #8A0707;
						background: -moz-linear-gradient(top, #D70A0A 0%, #8A0707 100%);
						background: -webkit-linear-gradient(top, #D70A0A 0%, #8A0707 100%);
						background: linear-gradient(to bottom, #D70A0A 0%, #8A0707 100%);
						filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D70A0A', endColorstr='#8A0707', GradientType=0 );
						display: block;
						padding: 3px 10px 5px;
						color: $white !important;
						@include transform(translateX(10px) translateY(-3px));
						.fa {
							color: $white !important;
						}
						&:hover {
							background: #BD0909;
							background: -moz-linear-gradient(top, #FF0D0D 0%, #BD0909 100%);
							background: -webkit-linear-gradient(top, #FF0D0D 0%, #BD0909 100%);
							background: linear-gradient(to bottom, #FF0D0D 0%, #BD0909 100%);
							filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0D0D', endColorstr='#BD0909', GradientType=0 );
						}
					}
				}
			}
		}
	}
	.p-cart-table__image {
		width: 120px;
		padding: 4px 0;
		@media (max-width: 767px){
			width: 80px;
		}
		@media (max-width: 575px){
			width: 60px;
		}
		img {
			display: block;
			max-width: 100%;
			max-height: 100px;
			margin: 0 auto;
		}
	}
	.p-cart-table__description {
		position: relative;
		padding: 4px 0;
		font-size: 12px;
		.title {
			margin-bottom: 4px;
			padding-right: 24px;
			font-size: 14px;
			//color: $blue;
			a {
				border-bottom-color: transparent;
				&:hover {
					border-bottom-color: rgba(13,97,171,0.3);
				}
			}
			.overallSize {
				position: relative;
				top: -2px;
				display: inline-block;
				max-height: 20px;
				margin-left: 1px;
			}
		}
		&.with-remover {
			@media(min-width: 992px) {
				//padding-right: 75px;
				.title {
					padding-right: 90px;
				}
			}
		}
		.p-cart-table__remove {
			@media(min-width: 1200px){
				position: absolute; top: 6px; right: 8px;
			}
			@media (max-width: 1199px) {
				position: absolute; top: 1px; right: 0;
				font-size: 16px;
				span { display: none; }
			}
			font-weight: bold;
			font-size: 12px;
			a {
				border: none;
				color: $color_gray_30;
				&:hover {
					.fa { color: $red; }
					color: $color_gray_50;
				}
			}
		}
	}
	.p-cart-table__special-order {
		color: #333;
		a {
			border-bottom: 1px dashed $red;
			font-weight: bold;
			color: $red;
			&:hover {
				border-bottom-color: transparent;
			}
		}
	}
	.p-cart-table__data {
		position: relative;
		overflow: hidden;
		margin: 0;
		padding: 0;
		list-style: none;
		@media (min-width: 992px){
			white-space: nowrap;
		}
		li {
			position: relative;
			//??? overflow: hidden;
			display: inline-block;
			vertical-align: top;
			//min-width: 80px;
			min-height: 1px;
			@media (max-width: 1199px){
				float: left;
				//width: 80px !important;
			}
			@media (max-width: 767px){
				width: auto !important;
				min-width: auto !important;
			}
			&:not(:first-child){
				margin-left: 16px;
			}
			&.date {
				width: auto !important;
				text-align: right;
				.date-highlight {
					background: $color_water;
					padding: 0 2px;
				}
				@media (max-width: 1199px){
					display: none;
				}
			}
			&.price {
				width: 120px;
				text-align: right;
				//color: #a1a1a1;
				@media (max-width: 1199px){
					display: none;
				}
			}
			&.quantity {
				width: 100px;
				margin-left: 32px;
				&.quantity_v2 {
					width: 148px;
				}
				&:not(.text-center){
					padding-top: 0;
				}
				.quantity__title {
					display: none;
				}
				.q-counter {
					margin-top: -4px;
				}
				@media (max-width: 1199px){
					width: auto;
					margin-left: 0;
					margin-right: 16px;
				}
				@media (max-width: 575px){
					//width: 40% !important;
					//display: block;
					//float: none;
					//margin: 0;
				}
			}
			&.discount {
				width: 70px;
				margin-left: 0;
				text-align: right;
				@media (max-width: 1199px){
					width: auto;
					//margin-left: 32px;
				}
				@media (max-width: 767px){
					float: left;
					margin: 0;
				}
				.label {
					padding-left: 6px;
					padding-right: 6px;
					font-weight: bold;
					@include border-radius(0 !important);
				}
				.old-price {
					display: inline-block;
					s {
						background: $color_gray_20;
						display: inline-block;
						padding: 0 8px;
						@media (max-width: 575px){
							padding: 0 4px;
						}
						color: $gray_dark;
					}
					span {
						background: $red;
						display: inline-block;
						padding: 0 8px;
						color: $white;
						@media (max-width: 575px){
							padding: 0 4px;
						}
					}
				}
			}
			&.total {
				width: 80px;
				text-align: right;
				@media (max-width: 1199px){
					float: right;
					width: auto !important;
					margin-left: 4px;
					white-space: nowrap;
				}
				@media (max-width: 767px){
					float: right;
					padding-top: 6px;
				}

				.old-price {
					display: inline-block;
					margin-right: 16px;
					s {
						background: $color_gray_20;
						display: inline-block;
						padding: 0 8px;
						@media (max-width: 575px){
							padding: 0 4px;
						}
						color: $gray_dark;
					}
					span {
						background: $red;
						display: inline-block;
						padding: 0 8px;
						color: $white;
						@media (max-width: 575px){
							padding: 0 4px;
						}
					}
				}
			}
		}
	}

	.media {
		margin: 0;
		.media-left {
			padding-right: 16px;
			@media (max-width: 767px){ padding-right: 8px; }
		}
		.media-right {
			padding-left: 16px;
			@media (max-width: 767px){ padding-left: 8px; }
		}
		.media {
			.media-right {
				//padding-top: 4px !important;
			}
		}
	}

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

	&.v2--p-cart-table {
		.p-cart-table__tr {
			$gray          : #a1a1a1;
			$gray_light    : #e9e9e9;
			color: $gray;
			.p-cart-table__data {
				li {
					&.date {
						color: $gray;
					}
					&.price {
						color: $gray;
					}
					&.quantity {}
					&.discount {}
					&.total {}
				}
			}
		}
		.p-cart-table__description {
			.title {
				padding-right: 0;
				@media(min-width: 992px) {
					padding-right: 90px;
				}
				& > a {
					margin-right: 4px;
				}
			}
			.p-cart-table__remove {
				@media (max-width: 1199px) {
					position: relative; top: auto; right: auto;
					display: inline-block;
					span { display: none; }
				}
			}
		}
	}
}

.p-cart-table__explanation {
	.explanation-head {
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			a {
				border-bottom: 1px dashed $color_gray_40;
				color: $color_gray_50;
				-moz-hyphens: auto;
				-webkit-hyphens: auto;
				-ms-hyphens: auto;
				word-wrap: break-word;
				//word-break: break-all;
			}
		}
	}
	.explanation-body {
		margin: 0;
		padding: 0;
		list-style: none;
		display: none;
		li {
			margin-top: 8px;
		}
		.explanation-default {
			a {
				color: $color_gray_50;
				border-bottom: 1px dashed $color_gray_20;
				&:hover {
					color: $blue;
					border-bottom-color: $blue;
				}
			}
		}
	}
	&.active {
		.explanation-head {
			display: none;
		}
		.explanation-body {
			display: block;
		}
	}
}

//empty
.p-cart-empty {
	position: relative;
	.p-cart-empty__side {
		@media(min-width: 992px){
			//float: right;
			position: absolute; top: 0; right: 0;
			width: 260px;
		}
		@media(max-width: 991px){
			max-width: 260px;
			margin: 24px auto 0;
		}
	}
	.p-cart-empty__body {
		@media(min-width: 992px) {
			margin-right: 300px;
		}
	}
	.empty-car {
		border: 1px solid #7e93b2;
		background-color: #dde4ec;
		display: block;
		padding: 12px;
		color: $red;
		i {
			display: block;
			img {
				display: block;
				width: 100%;
			}
		}
		span, strong {
			display: block;
			font-size: 1rem;
			&:not(:first-child){
				margin-top: 8px;
			}
		}
		&:hover {
			text-decoration: underline;
		}
	}
	.empty-categories {
		position: relative;
		margin-left: -8px;
		margin-right: -8px;
		.empty-categories__col {
			position: relative;
			float: left;
			width: 25%;
			margin-bottom: 16px;
			padding: 0 8px;
			@media (max-width: 1199px){
				width: 33.3333%;
			}
			@media (max-width: 575px){
				width: 50%;
			}
		}
		.empty-categories__item {
			position: relative;
			a {
				background: $white;
				border: 1px solid $color_gray_10;
				display: block;
				padding: 16px;
				.img-aligner {}
				.txt {
					position: relative;
					overflow: hidden;
					display: block;
					height: 44px;
					font-size: 16px;
					line-height: 22px;
				}
				@media (max-width: 575px){
					padding: 8px;
					.txt {
						height: 36px;
						font-size: 14px;
						line-height: 18px;
					}
				}
				&:hover {
					//@include box-shadow(0 0 10px 5px rgba(126,147,178,.75));
				}
				&.fix {
					position: absolute; top: 0; left: 0; right: 0;
					z-index: 55;
					min-height: 100%;
					@include box-shadow(0 0 10px 5px rgba(126,147,178,.75));
					.txt {
						height: auto;
					}
				}
			}
		}
	}
}

.tireCart-goto {
	margin: 0;
	padding: 0;
	list-style: none;
	& > li {
		display: inline-block;
		vertical-align: middle;
		padding: 4px 12px 4px 0;
		@media (max-width: 767px) {
			padding: 4px 8px 4px 0;
		}
	}
	.btn {
		padding: 10px 16px;
		font-size: 16px;
		@media (max-width: 767px) {
			padding: 8px 12px 10px;
			font-size: 14px;
		}
	}
}

.p-cart-boxDelivery {
	position: relative;
	margin-top: -1px;
	.p-cart-boxDelivery__where {
		background: $color_gray_03;
		padding: 24px 24px 0 160px;
		@media (max-width: 991px){
			padding-left: 120px;
		}
		@media (max-width: 767px){
			padding: 16px;
		}
		.characters {
			display: block;
			width: 200px;
			@media (max-width: 767px){
				width: 80px;
			}
		}
		.h1 {
			margin-bottom: 24px;
			padding-top: 24px;
			font-size: 22px;
			@media (max-width: 767px){
				margin-bottom: 16px;
				padding-top: 0;
				font-size: 18px;
			}
			strong {
				display: block;
				font-size: 42px;
				line-height: 1.25;
				@media (max-width: 767px){
					font-size: 22px;
				}
			}
		}
	}
	.p-cart-boxDelivery__error {
		background: $color_gray_03;
		padding: 48px 48px 48px 240px;
		// max-width: 800px;
		font-size: 16px;
		@media (max-width: 991px){
			padding-left: 160px;
		}
		@media (max-width: 767px){
			padding: 8px;
		}
		.media {
			padding: 16px;
			@media (max-width: 767px){
				padding: 16px 0;
			}
			.media-left {
				padding-right: 32px;
				@media (max-width: 767px){
					padding-right: 16px;
				}
			}
		}
		.image {
			position: relative;
			.fa {
				background: $white;
				position: absolute; top: -12px; right: -12px;
				display: none;
				width: 24px;
				height: 24px;
				font-size: 12px;
				line-height: 24px;
				text-align: center;
				@include border-radius(50%);
				@include box-shadow(0 0 4px rgba(0,0,0,.25));
			}
			img {
				display: block;
				width: 120px;
				@media (max-width: 767px){
					width: 64px;
				}
				@media (max-width: 575px){
					width: 44px;
				}
			}
			&.error {
				.fa {
					display: block;
					color: $red;
				}
				img {
					border: 1px solid $red;
				}
			}
		}
	}
	.p-cart-boxDelivery__waiting {
		//background: lighten($yellow_light, 15%);
		background: #ffffca;
		padding: 12px;
		font-size: 14px;
		@media (max-width: 1199px) {
			margin-left: -24px;
			margin-right: -24px;
			padding-left: 24px;
			padding-right: 24px;
		}
		@media (max-width: 767px) {
			margin-left: -12px;
			margin-right: -12px;
			padding-left: 12px;
			padding-right: 12px;
		}
		.title {
			margin-bottom: 16px;
			font-weight: bold;
			color: $blue;
		}
		.media {
			.media-left {
				padding-right: 16px;
				@media(max-width: 767px){
					padding-right: 8px;
				}
				img {
					width: 120px;
					@media(max-width: 767px){
						width: 80px;
					}
					@media(max-width: 575px){
						width: 60px;
					}
				}
			}
		}
	}
	.btn {
		padding: 8px 20px 12px;
		font-size: 16px;
		font-weight: bold;
		@media (max-width: 767px){
			padding: 6px 12px 8px;
			font-weight: normal;
		}
	}
}

.p-cart-was-sold {
	padding-top: 2px;
	font-size: 14px;
	.message {
		font-size: 14px;
		font-weight: bold;
		color: $red;
	}
	.btn {
		&:not(:first-child){
			margin-top: 8px;
		}
	}
}

.p-cart-countdown {
	.p-cart-countdown__body {
		background: #d8ffb2;
		display: inline-flex;
		align-items: center;
		padding: 12px 16px;
		font-size: 14px;
		.icon {
			padding-right: 12px;
			color: #489238;
			svg, img {
				display: block;
				width: 36px;
				height: 36px;
			}
		}
		.text {
			h6 {
				margin: 0;
				font-size: inherit;
				line-height: 1.25;
				span {
					font-size: 17px;
				}
			}
		}
	}
}

//
.animate-wobble {
	&.responsive-xs {
		@media(min-width: 768px){
			animation: animateWobble 5s ease-in-out 4s infinite;
		}
	}
	@keyframes animateWobble {
		0%   { transform: none; }                 //0%
		10%  { transform: translateX(-12px); }    //20%
		20%  { transform: translateX(4px); }      //40%
		27%  { transform: translateX(-8px); }     //55%
		32%  { transform: translateX(2px); }      //70%
		36%  { transform: translateX(-4px); }     //85%
		39% { transform: none; }                 //100%
	}
}
.animate-shake {
	&.responsive-xs {
		@media(min-width: 768px){
			animation: animateShake 5s ease-in-out 4s infinite;
		}
	}
	@keyframes animateShake {
		0%, 30% {
			-webkit-transform: translateZ(0);
			transform: translateZ(0)
		}
		5%, 15%, 25% {
			-webkit-transform: translate3d(-10px, 0, 0);
			transform: translate3d(-10px, 0, 0)
		}
		10%, 20% {
			-webkit-transform: translate3d(10px, 0, 0);
			transform: translate3d(10px, 0, 0)
		}
	}
}
.animate-headShake {
	&.responsive-xs {
		@media(min-width: 768px){
			animation: animateHeadShake 5s ease-in-out 4s infinite;
		}
	}
	@keyframes animateHeadShake {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}
		4% {
			-webkit-transform: translateX(-6px) rotateY(-9deg);
			transform: translateX(-6px) rotateY(-9deg)
		}
		8% {
			-webkit-transform: translateX(5px) rotateY(7deg);
			transform: translateX(5px) rotateY(7deg)
		}
		15% {
			-webkit-transform: translateX(-3px) rotateY(-5deg);
			transform: translateX(-3px) rotateY(-5deg)
		}
		20% {
			-webkit-transform: translateX(2px) rotateY(3deg);
			transform: translateX(2px) rotateY(3deg)
		}
		25% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}
	}
}

/** 12.10.2020 */
.p-cart-summary {
	font-size: 16px;
	text-align: right;
	.p-cart-summary__body {
		position: relative;
	}
	.p-cart-summary__total {
		font-weight: bold;
		strong {
			font-size: 22px;
			color: $blue;
		}
	}

	.p-cart-summary-backdrop {
		background: #000;
		z-index: 900;
		position: fixed; top: 0; right: 0; bottom: 0; left: 0;
		opacity: .6;
		display: none;
	}
	.p-cart-summary-popup {
		background: $white;
		position: absolute; right: 0; bottom: 0;
		z-index: 9999;
		display: none;
		width: 400px;
		@media(max-width: 575px){
			width: 320px;
		}
		@media(max-width: 359px){
			width: 300px;
		}
		padding: 16px 12px 12px;
		font-size: 14px;
		@include box-shadow(0 2px 12px rgba(0, 0, 0, 0.25));
		.closer {
			top: 4px;
			right: 4px;
		}
		.p-cart-summary-popup__head {
			border-bottom: 1px solid #E9E9E9;
			padding-bottom: 12px;
			padding-right: 8px;
			font-size: 14px;
			text-align: left;
			@media(max-width: 575px){
				font-size: 12px;
			}
			@media(max-width: 449px){
				font-size: 11px;
			}
		}
		.p-cart-summary-popup__body {
			&:not(:first-child){
				margin-top: 12px;
			}
			table {
				margin-left: auto;
				tr {
					td {
						font-weight: 600;
						strong {
							font-size: 16px;
						}
						&:not(:first-child){
							padding-left: 16px;
						}
						&.big {
							padding-top: 8px;
							font-size: 16px;
							font-weight: bold;
							strong {
								font-size: 22px;
								color: $blue;
							}
						}
					}
				}
			}
		}
	}
	.p-cart-summary__tax {
		font-size: 14px;
		a {
			border-bottom: 1px dashed #9B9B9B;
			font-weight: bold;
			color: #9B9B9B;
		}
	}
	.p-cart-summary__conditions {
		&:not(:first-child){
			margin-top: 12px;
		}
		font-size: 14px;
		line-height: 1.6;
		a {
			border-bottom: 1px dashed $blue;
			&:hover {
				border-bottom-color: transparent;
			}
		}
		.form-check {
			display: inline-block;
			margin-right: -8px;
			padding: 2px 8px 2px 6px;
			&.has-error {
				//background: rgba(0,0,0,.15);
				background: transparent;
				animation: blink-pink-background 1.75s ease-in-out infinite;
				//@include transition();
				@keyframes blink-pink-background {
					75% {
						background: #ffb3b3;
					}
					80% {
						background: #ffb3b3;
					}
				}
			}
		}
	}
	.p-cart-summary__paymethod {
		max-width: 400px;
		&:not(:first-child){
			margin-top: 24px;
		}
		.description {
			padding-top: 4px;
			font-size: 13px;
			text-align: left;
		}
	}

	&.in {
		.p-cart-summary-backdrop {
			@media(max-width: 575px){
				display: block;
			}
		}
		.p-cart-summary-popup {
			display: block;
		}
	}
}

#modal-cart-product {
	.fake-nav-tabs,
	.add-to-cart-button {
		display: none !important;
	}
	.btn-special {
		@media(min-width: 768px){
			background: $color_blue;
			background: -moz-linear-gradient(top, #2E75D1 0%, #002B81 100%);
			background: -webkit-linear-gradient(top, #2E75D1 0%, #002B81 100%);
			background: linear-gradient(to bottom, #2E75D1 0%, #002B81 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2E75D1', endColorstr='#002B81', GradientType=0 );
			border: 0 !important;
			display: inline-block;
			padding: 8px 16px;
			line-height: 24px;
			font-size: 16px;
			color: $white !important;
			text-decoration: none !important;
			white-space: normal;
			outline: none !important;
			@include border-radius(3px);
			&:hover {
				background: #2E75D1;
				background: -moz-linear-gradient(top, #388EFF 0%, #003CB5 100%);
				background: -webkit-linear-gradient(top, #388EFF 0%, #003CB5 100%);
				background: linear-gradient(to bottom, #388EFF 0%, #003CB5 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#388EFF', endColorstr='#003CB5', GradientType=0 );
			}
		}
		@media(max-width: 767px){
			border-bottom-color: transparent;
			font-size: 16px;
			font-weight: bold;
			&:hover {
				border-bottom-color: $blue;
			}
		}
	}
}

//p-cart-vinChecker
.p-cart-vinChecker {
	margin-top: 4px;
	font-size: 13px;
	.vinChecker__action {
		a {
			border-bottom: 1px dashed #818181;
			color: #818181;
			text-decoration: none;
			&:hover {
				border-bottom-color: transparent;
			}
		}
	}
	.vinChecker__form {
		background: #d5e6f6;
		padding: 8px;
		display: none;
		.form-controls {
			display: none;
			margin-bottom: 4px;
			text-align: right;
		}
		.form-head {
			margin-bottom: 4px;
			color: #333;
			line-height: 1.25;
			a {
				border-bottom-color: transparent;
				white-space: nowrap;
				&:hover {
					border-bottom-color: $blue;
				}
			}
		}
		.form-group {
			.form-field {}
			.help-block {
				font-size: 13px;
			}
			.form-history {
				display: flex;
				flex-wrap: wrap;
				margin: 0 -3px;
				padding: 0;
				font-size: 12px;
				list-style: none;
				line-height: normal;
				& > li {
					position: relative;
					margin-left: 3px;
					margin-right: 3px;
					padding-top: 4px;
					padding-right: 15px;
					& > span {
						border-bottom: 1px dashed #818181;
						display: inline-block;
						color: #818181;
						white-space: nowrap;
						&:hover {
							cursor: pointer;
							border-bottom-color: transparent;
						}
					}
					.closer {
						top: 6px;
						right: 0;
						width: 12px;
						height: 12px;
						margin: 0;
						opacity: 1;
						&:before, &:after {
							background: $red;
						}
						&:hover {
							&:before, &:after {
								background: #333;
							}
						}
					}
				}
			}
		}
	}
	.vinChecker__success {
		display: none;
		.success__vin {
			margin-right: 8px;
			font-size: 14px;
			font-weight: bold;
		}
		.success__message {
			white-space: nowrap;
			color: $green;
		}
		.success__link {
			a {
				border-bottom-color: transparent;
				&:hover {
					border-bottom-color: $blue;
				}
			}
		}
	}
	.vinChecker__controls {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 8px -4px 0;
		display: none;
		.control {
			margin-left: 4px;
			margin-right: 4px;
		}
		.control_send {}
		.control_save {
			//display: none;
		}
		.control_cancel {}
		.control_clear {
			display: none;
			margin-left: auto;
		}
	}

	&.in {
		.vinChecker__action {
			display: none;
		}
		.vinChecker__form {
			display: block;
		}
		.vinChecker__success {}
		.vinChecker__controls {
			display: flex;
		}
	}
	&.edit {
		.vinChecker__action {
			display: none;
		}
		.vinChecker__form {
			display: block;
			.form-controls {
				display: block;
			}
		}
		.vinChecker__success {}
		.vinChecker__controls {
			display: flex;
			.control_send {
				display: none;
			}
			.control_save {
				display: block;
			}
			.control_clear {
				display: block;
			}
		}
	}
	&.success {
		.vinChecker__action {
			display: none;
		}
		.vinChecker__form {
			display: none;
		}
		.vinChecker__success {
			display: block;
		}
		.vinChecker__controls {
			display: none;
		}
	}
}

//
.modal-cart-vinInfo {
	padding: 0;
	.panel-group {
		//border: 1px solid #dde4ec;
		margin: 0;
		.panel + .panel {
			border-top: 1px solid #dde4ec;
		}
	}
	.panel {
		margin: 0 !important;
		@include box-shadow(none);
		@include border-radius(0);
		.panel-head {
			padding: 0;
			& > a {
				border: 0;
				display: block;
				padding: 16px 0;
				font-size: 20px;
				font-weight: bold;
				.fa {
					margin-left: 4px;
				}
				&.collapsed {
					.fa {
						@include transform(rotate(180deg));
					}
				}
			}
		}
		.panel-body {
			padding: 0 0 16px;
		}
	}

	h6 {
		margin-bottom: 8px;
		font-size: 20px;
		line-height: 1.25;
	}
	p {
		img {
			max-width: 100%;
		}
	}
}

.p-cart-counter {
	display: flex;
	width: 148px;
	.counter {
		background: #e9e9e9;
		position: relative;
		width: 104px;
		height: 32px;
		padding: 1px 32px;
		@include border-radius(4px);
		.counter__field {
			position: relative;
			z-index: 2;
			input {
				background: $white;
				border: 0;
				display: block;
				width: 100%;
				height: 30px;
				text-align: center;
				@include border-radius(2px);
				@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
			}
		}
		.counter__plus {
			position: absolute; top: 1px; right: 1px;
			z-index: 3;
			width: 30px;
			height: 30px;
			@include border-radius(0 4px 4px 0);
			&:before {
				content: '';
				background: $color_gray_30;
				position: absolute; top: 50%; left: 50%;
				display: block; width: 12px; height: 2px;
				@include transform(translateX(-50%) translateY(-50%));
			}
			&:after {
				content: '';
				background: $color_gray_30;
				position: absolute; top: 50%; left: 50%;
				display: block; width: 12px; height: 2px;
				@include transform(translateX(-50%) translateY(-50%) rotate(90deg));
			}
			&:hover {
				background: $green;
				cursor: pointer;
				&:before, &:after {
					background: $color_white;
				}
				& ~ .counter__border {
					border: 1px solid $green;
				}
			}
		}
		.counter__minus {
			position: absolute; top: 1px; left: 1px;
			z-index: 3;
			width: 30px;
			height: 30px;
			@include border-radius(4px 0 0 4px);
			&:before {
				content: '';
				background: $color_gray_30;
				position: absolute; top: 50%; left: 50%;
				display: block; width: 12px; height: 2px;
				@include transform(translateX(-50%) translateY(-50%));
			}
			&:hover {
				background: $red;
				cursor: pointer;
				&:before {
					background: $color_white;
				}
				& ~ .counter__border {
					border: 1px solid $red;
				}
			}
		}
		.counter__border {
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			z-index: 1;
			@include border-radius(5px);
		}
	}
	.remove {
		position: relative;
		margin-left: auto;
		.remove__icon {
			background: #e9e9e9;
			position: relative;
			z-index: 2;
			display: block;
			width: 32px;
			height: 32px;
			color: $color_gray_50;
			text-align: center;
			line-height: 30px;
			@include border-radius(4px);
		}
		.remove__text {
			background: $red;
			position: absolute; top: 0; left: 0;
			z-index: 1;
			overflow: hidden;
			height: 32px;
			padding: 0 12px 0 4px;
			font-size: 13px;
			line-height: 32px;
			color: $white;
			opacity: 0;
			visibility: hidden;
			@include border-radius(0 4px 4px 0);
			@include transition();
		}
		&:hover {
			cursor: pointer;
			.remove__icon {
				background: $red;
				color: $white;
			}
			.remove__text {
				left: 28px;
				opacity: 1;
				visibility: visible;
			}
		}
	}
}

#modal-freon-preform {
	h1, .h1 {
		font-weight: 700;
		font-size: 24px;
	}
	h2, .h2 {
		font-weight: 700;
		font-size: 20px;
	}
	h3, .h3 {
		font-weight: 700;
		font-size: 16px;
	}
	.hr {
		background: #d7d7d7;
		height: 1px;
		margin-top: 32px;
		margin-bottom: 32px;
	}
	.modal-body {
		& + .modal-body {
			background: #f5f7f9;
		}
	}
	.form-group {
		& + .form-group {
			margin-top: 16px;
		}
		.form-label {
			opacity: .75;
		}
		.form-control {
			background: rgba(0,0,0,0.05);
		}
	}
	.form-control {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.pseudo-form-check {
		position: relative;
		padding-left: 24px;
		opacity: .7;
		.check-arrow {
			background: #ffffff url(../images/check-mark.png) no-repeat 50% 50% / 70% auto;
			border: 1px solid #aeaeae;
			position: absolute; top: 50%; left: 0;
			display: block;
			width: 16px;
			height: 16px;
			@include border-radius(3px);
			@include transform(translateY(-50%));
		}
	}
}