@import "variables";

.page-order-payment {
	max-width: 800px;
	margin: 0 auto;

	.pop-head {
		position: relative;
		margin-bottom: 32px;
		@media (max-width: 767px){
			margin-bottom: 16px;
		}
		h1 {
			margin-bottom: 4px;
			font-size: 38px;
			font-weight: normal;
			letter-spacing: 0.12px;
			line-height: 40px;
			@media (max-width: 767px){
				font-size: 24px;
				line-height: 1.25;
			}
		}
		h3 {
			margin-bottom: 4px;
			@media (max-width: 767px){
				font-size: 18px;
			}
		}

		.pop-head-total {
			.head {
				font-size: 16px;
				font-weight: bold;
				strong {
					margin-left: 12px;
					color: $blue;
				}
			}
			.vat {
				color: $color_gray_30;
				font-size: 13px;
			}
		}

		.pop-head-table {
			background: #f5f7fa;
			position: relative;
			max-width: 360px;
			margin-top: 12px;
			padding: 12px;
			font-size: 13px;
			@media (max-width: 767px){
				margin: -18px -12px 0 -12px;
				max-width: none;
			}
			table {
				width: 100%;
				td {
					padding: 4px;
					vertical-align: top;
					&:not(:first-child) {
						text-align: right;
						white-space: nowrap;
					}
				}
			}
		}

		.dropdown-nav-tabs {
			position: absolute; top: 5px; right: 0;
			& > a { border: none; }
			& > .fa { margin-left: 4px; color: $color_blue; }
			.dropdown-menu {
				li {
					& + li {
						border-top: 1px solid $color_gray_05;
					}
					&.active {
						a {
							background: $color_light_blue;
							color: $color_dark;
						}
					}
				}
				a {
					border: none;
					padding: 8px 16px;
				}
			}
		}
	}

	.pop-messages {
		margin-bottom: 32px;
		@media (max-width: 767px){
			margin-bottom: 16px;
		}
		.label {
			padding: 8px 12px;
			font-size: 100%;
			line-height: 1.5;
			@include border-radius(0);
		}
	}

	.pop-body {
		h6 {
			margin-bottom: 16px;
			font-size: 14px;
			font-weight: bold;
			color: $color_blue;
		}
	}

	.nav-tabs {
		margin-bottom: 32px;
		li {
			a {
				padding: 12px 16px;
				font-size: 14px;
				font-weight: normal;
			}
		}
	}

	.pop-button {
		background: $color_gray_20;
		background: -moz-linear-gradient(top, rgba(230,230,230,1) 0%, rgba(204,204,204,1) 100%);
		background: -webkit-linear-gradient(top, rgba(230,230,230,1) 0%,rgba(204,204,204,1) 100%);
		background: linear-gradient(to bottom, rgba(230,230,230,1) 0%,rgba(204,204,204,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#cccccc',GradientType=0 );
		border: none;
		display: block;
		padding: 12px 16px 8px;
		color: $color_dark;
		text-align: center;
		@include border-radius(2px);
		@include transition();
		.img-aligner {
			height: 32px;
			.img-aligner__img {
				max-width: 80%;
				max-height: 80%;
			}
		}
		.name {
			display: block;
			font-size: 14px;
			line-height: 20px;
		}
		@media (max-width: 449px){
			overflow: hidden;
			padding: 12px 16px;
			.img-aligner {
				float: left;
				width: 40%;
				height: 24px;
				.img-aligner__img {
					left: 0;
					max-width: 100%;
					max-height: 100%;
					@include transform(translateY(-50%));
				}
			}
			.name {
				float: right;
				font-size: 16px;
				font-weight: bold;
				line-height: 24px;
			}
		}
		&:hover {
			background: $color_gray_10;
			background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(217,217,217,1) 100%);
			background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(217,217,217,1) 100%);
			background: linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(217,217,217,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#d9d9d9',GradientType=0 );
		}

		&.pop-button_text {
			background: #ffe180 !important;
			font-size: 12px;
			line-height: 1.25;
			.aligner {
				position: absolute; top: 50%; left: 10%; right: 10%;
				@include transform(translateY(-50%));
				text-align: center;
			}
			&:hover {
				background: darken(#ffe180, 5%) !important;
			}
		}
	}

	.dropdown-relative {
		li.active {
			display: none;
		}
	}

	.back-to-cart {
		margin-top: 48px;
		text-align: center;
		@media(min-width: 768px){
			position: absolute; top: 16px; right: 16px;
			margin-top: 0;
		}
		a {
			border-bottom-color: transparent;
			&:hover {
				border-bottom-color: $blue;
			}
		}
	}

	&.ver2 {
		.pop-head {
			.pop-head-summ {
				//font-size: 16px;
				font-weight: bold;
				@media (max-width: 767px){
					font-size: 18px;
				}
			}
			.dropdown-nav-tabs {
				position: relative; top: auto; right: auto;
				display: inline-block;
				a[data-toggle="dropdown"]{
					color: $black;
				}
				.dropdown-state {
					.icobox {
						padding: 0 !important;
						.ico {
							display: none;
						}
					}
				}
			}
		}
		.pop-body {
			h6 {
				font-size: 14px;
				color: $blue;
				@media (max-width: 767px){
					font-size: 16px;
				}
			}
		}
		.pop-button {
			background: transparent;
			border: 1px solid $color_gray_10;
			position: relative;
			overflow: hidden;
			display: block;
			/*height: 110px;
			@media (max-width: 767px) {
				height: 90px;
			}
			@media (max-width: 449px) {
				height: 60px;
			}*/
			//padding: 12px 16px 8px;
			color: $color_dark;
			text-align: center;
			@include border-radius(3px);
			@include transition();
			@include box-shadow(0 2px 7px 0 rgba(0,0,0,0.1));
			.pop-button__logo {
				background-repeat: no-repeat;
				background-position: 50% 50%;
				background-size: contain;
				//position: absolute; top: 50%; left: 50%;
				display: block;
				max-width: 70%;
				margin: 20px auto;
				height: 44px;
				@media (max-width: 767px) {
					height: 36px;
				}
				@media (max-width: 449px) {
					height: 28px;
					margin: 4px auto;
				}
				//width: 100%;
				//height: 100%;
				//max-width: 70% !important;
				//max-height: 50% !important;
				//@include transform(translateX(-50%) translateY(-50%));
			}
			.pop-button__label {
				//position: absolute; bottom: 4px; left: 4px; right: 4px;
				position: relative;
				display: block;
				padding-bottom: 4px;
				font-size: 14px;
				line-height: 1.3;
				color: $blue;
				text-align: center;
				//white-space: nowrap;
			}
			img {
				position: absolute; top: 50%; left: 50%;
				display: block;
				width: auto;
				height: auto;
				max-width: 70%;
				max-height: 50%;
				@include transform(translateX(-50%) translateY(-50%));
				/*@media (max-width: 449px) {
					max-width: 60%;
					max-height: 60%;
				}*/
			}

			&:hover {
				background: transparent;
				@include box-shadow(0 0 15px 0 rgba(50, 50, 50, 0.3));
				/*background: $color_gray_10;
				background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(217,217,217,1) 100%);
				background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(217,217,217,1) 100%);
				background: linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(217,217,217,1) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#d9d9d9',GradientType=0 );*/
			}
		}
		//page-order-payment pop-tile-pane
		.pop-button-tile {
			position: relative;
			overflow: visible;
			&.active {
				background: lighten($color_water, 7%);
				&:before {
					content: '';
					border: 10px solid transparent;
					border-top-color: $blue;
					position: absolute; top: 100%; left: 50%;
					display: block;
					height: 16px;
					margin: 4px 0 0 -5px;
				}
			}
			&.pop-button-tile_wt {
				height: auto !important;
				.image {
					position: relative;
					display: block;
					min-height: 86px;
					@media (max-width: 767px) {
						min-height: 69px;
					}
					@media (max-width: 449px) {
						min-height: 48px;
					}
					img {
						max-width: 70%;
						max-height: 70%;
					}
				}
				.pop-button__label {
					//position: absolute; bottom: 4px; left: 4px; right: 4px;
					position: relative;
					display: block;
					padding-bottom: 4px;
					font-size: 14px;
					line-height: 1.3;
					color: $blue;
					text-align: center;
					//white-space: nowrap;
				}
				&.active {
					.pop-button__label {
						color: #7e93b2;
					}
				}
			}
		}
		.pop-tile-pane {
			display: none;
			.panel-body {
				background: lighten($color_water, 7%);
			}
			&.in {
				display: block;
			}
		}
	}
}