@import "variables";
.body-installment {
	overflow: hidden;
	.w-installment-backdrop {
		display: block;
	}
	.w-installment-popup {
		display: block;
	}
}
.w-installment {
	position: relative;
	.w-installment-link {
		border-bottom: 1px dashed $blue;
		&:hover {
			border-bottom-color: transparent;
		}
	}
	.w-installment-backdrop {
		background: rgba(0,0,0,.75);
		position: fixed; top: 0; right: 0; bottom: 0; left: 0;
		z-index: 999;
		display: none;
	}
	.w-installment-popup {
		display: none;
		position: fixed; top: 0; right: 0; bottom: 0; left: 0;
		z-index: 9999;
		overflow-y: auto;
		font-size: 14px;
		text-align: center;
		.w-installment-popup__dialog {
			//background: #fff;
			position: relative;
			z-index: 2;

			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12px;
			min-height: calc(100% - 24px);
		}
		.w-installment-popup__content {
			background: #fff;
			display: flex;
			flex-direction: column;
			width: auto;
			max-width: 360px;
			flex-grow: 1;
			@include border-radius(4px);
			@include box-shadow(0 4px 16px rgba(0,0,0,.2));
			.w-installment-popup__content {
				@include border-radius(0);
				@include box-shadow(none);
			}
		}
	}

	&.in {
		.w-installment-backdrop {
			display: block;
		}
		.w-installment-popup {
			display: block;
		}
	}
	.w-installment-popup__tabs {
		background: #F0F0F0;
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		& > li {
			&.w-installment-popup__tab {
				flex-grow: 1;
				max-width: 120px;
				a {
					border: 0;
					display: block;
					height: 48px;
					line-height: 48px;
					padding: 0;
					text-align: center;
				}
				img {
					display: inline-block;
					vertical-align: middle;
					max-width: 80%;
					max-height: 28px;
					margin-top: -2px;
					filter: grayscale(100%);
					transition: 1s;
				}
				&.active {
					a {
						background: #fff;
						img {
							filter: grayscale(0);
						}
					}
				}
			}
			&.w-installment-closer {
				background: #E3E3E3;
				flex-grow: 0;
				width: 48px;
				min-width: 48px;
				a {
					border: 0;
					position: relative;
					display: block;
					width: 48px;
					height: 48px;
					.closer {
						position: absolute; top: 50%; left: 50%; right: auto;
						width: 24px;
						height: 24px;
						opacity: 1;
						@include transform(translateX(-50%) translateY(-50%));
					}
					&:hover {
						.closer {
							&:before, &:after {
								background: $red;
							}
						}
					}
				}
			}
		}
	}
	.w-installment-popup__content {
		.w-installment-popup__panel {
			display: none;
			&.active {
				display: block;
			}
		}
	}
	.w-installment-popup__body {
		padding: 16px;
		&.water {
			background: #F5F7F9;
		}
		&.min-h {
			min-height: 200px;
		}
	}
	.w-installment-popup__intro {
		max-width: 260px;
		margin: 0 auto;
		font-weight: bold;
		line-height: 1.25;
		&:not(:first-child){
			margin-top: 12px;
		}
	}
	.w-installment-popup__price {
		&:not(:first-child){
			margin-top: 12px;
		}
		.title {
			font-size: 16px;
			font-weight: bold;
		}
		.price {
			font-size: 14px;
			strong {
				font-size: 24px;
				font-weight: bold;
				color: $blue;
			}
		}
	}
	.w-installment-popup__control {
		.title {
			padding-bottom: 4px;
			font-size: 14px;
			color: #9B9B9B;
		}
		.btn {
			position: relative;
			padding: 9px 24px 12px 52px !important;
			font-size: 16px !important;
			font-weight: 500 !important;
			.icon, .btn__ico {
				position: absolute; top: 50%; left: 24px;
				display: block;
				line-height: normal;
				margin-top: -1px;
				@include transform(translateY(-50%));
			}
		}
	}

	//modify
	.cpd-pricebox & {
		.w-installment-toggle {}
	}

	.w-installment-trio {
		padding: 0 20px;
		@media (max-width: 459px) {
			padding: 0;
		}
		label {
			position: relative;
			display: block;
			font-size: 14px;
			text-align: left;
			&:not(:first-child){
				margin-top: 8px;
			}
			.arr {
				border: 2px solid #7e93b2;
				position: absolute; top: 50%; left: 12px;
				display: block;
				width: 20px;
				height: 20px;
				@include border-radius(50%);
				@include transform(translateY(-50%));
			}
			.data {
				border: 2px solid #7e93b2;
				display: flex;
				flex-wrap: wrap;
				padding: 8px 16px 8px 40px;
				color: #7e93b2;
				white-space: nowrap;
				@include border-radius(45px);
				.day {
					min-width: 30%;
				}
				.parts {
					flex-grow: 1;
				}
				.price {
					b {
						margin-left: 4px;
					}
				}
			}
			input {
				position: absolute; top: 0; right: 0;
				visibility: hidden;
				opacity: 0;
				&:checked {
					& ~ .arr {
						background: #0d61ab;
						border-color: #0d61ab;
					}
					& ~ .data {
						background: #d5e6f6;
						border-color: #0d61ab;
						color: #0d61ab;
					}
				}
			}
			&:hover {
				cursor: pointer;
				.data {
					background: #e1f0ff;
					//border-color: #0d61ab;
				}
			}
		}
	}

	.w-installment-liisi {
		padding: 12px 20px 0;
		text-align: left;
		@media (max-width: 459px) {
			padding: 12px 0 0;
		}
		.liisi-label {
			margin-bottom: 4px;
		}
		.liisi-row-sep {
			margin-bottom: 24px;
		}
		.liisi-row {
			display: flex;
			align-items: center;
			.liisi-select {
				width: 60%;
				select {
					background: #ffffff url('https://pics1.alpics.info/web/public/images/icons/i-sorting.png') no-repeat center right 8px / auto 14px;
					-webkit-appearance: none;
					-moz-appearance: none;
					-ms-appearance: none;
					appearance: none !important;
				}
			}
			.liisi-price {
				width: 40%;
				font-size: 14px;
				text-align: right;
				strong {
					font-size: 24px;
					line-height: normal;
					color: $blue;
				}
			}
		}
	}
}

.p-cart-installment {
	position: relative;
	max-width: 340px;
	margin-bottom: 24px;
	margin-left: auto;
	.i-mark {
		background: #fff;
		position: absolute; top: 50%; left: 16px;
		z-index: 2;
		display: block;
		width: 48px;
		height: 48px;
		margin-top: -24px;
		line-height: 48px;
		font-size: 16px;
		font-weight: bold;
		color: #2DB92D;
		text-align: center;
		@include border-radius(50%);
	}
	.w-installment {
		background: #B8E986;
		padding: 4px 16px;
	}
}