/* 
    Created on : 05.01.2016
    Author     : DFD
	Styles for : Pricing block
*/
.dfd-pricing-block {
	.rel();
	text-align: center;
	.rounded(10px);
	margin: 30px 0;
	.transform(translateY(0));
	.transition(~"-webkit-box-shadow .3s ease, -moz-box-shadow .3s ease, -o-box-shadow .3s ease, box-shadow .3s ease, transform .3s ease, border-color .3s ease, border-radius .3s ease, border-style .3s ease");
	.block-head {
		.rel();
		padding: 0 35px;
		padding-top: 30px;
		border-top-left-radius: inherit;
		border-top-right-radius: inherit;
		z-index: 1;
		.feat-mark {
			.abs();
			top: 10px;
			right: 10px;
			color: @white-color;
			background: #fa6047;
			padding: 10px 15px;
			.rounded(4px);
		}
		.icon-wrap {
			padding-top: 25px;
			img {
				.block();
				margin: 0 auto;
			}
			span {
				line-height: 1;
			}
			i {
				font-size: 30px;
			}
		}
		.block-title,
		.block-subtitle {
			.feature-title,
			.subtitle {
				font-family: inherit;
				font-size: inherit;
				font-weight: inherit;
				letter-spacing: inherit;
				line-height: inherit;
				color: inherit;
				text-transform: inherit;
				font-style: inherit;
				word-spacing: inherit;
			}
			p {
				margin: 0;
			}
		}
		.block-subtitle {
			padding-top: 10px;
		}
		.price-wrap {
			padding-top: 25px;
			line-height: 1;
			letter-spacing: -4px;
			.currency-symbol,
			.time-interval {
				font-size: 25px;
			}
			.payment-amount {
				font-size: 55px;
			}
			.currency-symbol {
				.rel();
				vertical-align: top;
				top: 5px;
				margin-right: 10px;
			}
			.time-interval {
				
			}
		}
		.content-desc {
			line-height: 25px;
			font-size: 14px;
			padding-top: 25px;
			padding-bottom: 35px;
		}
	}
	.block-bottom {
		.rel();
		border-bottom-left-radius: inherit;
		border-bottom-right-radius: inherit;
		padding: 0 20px;
		padding-bottom: 15px;
		z-index: 1;
		.options-list {
			padding: 15px 0;
			margin: 0 15px;
			.option {
				.rel();
				border-bottom: 1px solid;
				line-height: 1;
				padding: 19px 0;
				&:last-child {
					border-bottom-width: 0;
				}
				.option-icon {
					.inline-block();
				}
				i {
					padding: 0 5px;
					.inline-block();
					vertical-align: middle;
				}
			}
		}
		.pricing-dots-alignment {
			.block();
			min-height: 10px;
			padding: 3px 0;
		}
		.price-block-dot {
			.block();
			width: 9px;
			height: 9px;
			margin: 0 auto;
			background: @border-color;
			.rounded(50%);
		}
		.pricing-feature-description {
			.inline-block();
			padding: 0 5px;
			line-height: 1;
		}
		.dfd-button-click-animated {
			line-height: .5;
		}
		.pricing-button {
			.rel();
			.block();
			overflow: hidden;
			.rounded(22px);
			.dfd-button-svg-wrap {
				pointer-events: none;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				overflow: hidden;
				border-radius: inherit;
				-webkit-mask-image: -webkit-radial-gradient(circle,white 100%,black 100%);
				z-index: 3;
				svg {
					width: 100%;
					use {
						opacity: 0;
					}
				}
			}
		}
	}
	.shadow-box {
		.abs();
		top: 20px;
		left: 20px;
		right: 20px;
		bottom: 20px;
		.box-shadow(0px 15px 50px 0px transparent);
		.transition(box-shadow .3s ease);
		z-index: 0;
	}
	&.style-01 {
		border: 1px solid @border-color;
		.block-head {
			background: @white-color;
			border-bottom: 1px solid @border-color;
		}
		.block-bottom {
			background: @white-color;
		}
		.options-list {
			.option {
				border-color: @border-color;
			}
		}
		.icon-wrap {
			color: @border-color;
		}
		&:hover {
			border-color: transparent;
		}
	}
	&.style-02 {
		.block-head {
			background: #f0f0f0;
			border-bottom: 1px solid @border-color;
		}
		.block-bottom {
			background: @white-color;
			border: 1px solid @border-color;
			border-top-left-radius: 0 !important;
			border-top-right-radius: 0 !important;
			border-top-width: 0 !important;
			.transition(border-color .3s ease);
			.options-list {
				.option {
					border-color: @border-color;
				}
			}
		}
		.icon-wrap {
			color: @main-site-light-color;
		}
		&:hover {
			.block-bottom {
				border-color: transparent;
			}
		}
	}
	&.style-03 {
		.block-head {
			background: @main-site-light-color;
			border-bottom: 1px solid rgba(255,255,255,.2);
			.price-wrap,
			.feature-title {
				color: @white-color;
			}
			.content-desc,
			.subtitle {
				color: rgba(255,255,255,.4);
			}
		}
		.block-bottom {
			background: @main-site-light-color;
			.pricing-button {
				background: #323232;
				&:hover {
					background: fade(#323232, 90%);
				}
			}
			.options-list {
				.option {
					border-color: rgba(255,255,255,.2);
					color: @white-color;
					.pricing-feature-description {
						color: inherit;
					}
				}
			}
			.price-block-dot {
				background: rgba(255,255,255,.4);
			}
		}
		.icon-wrap {
			color: @white-color;
		}
	}
	&:hover {
		.transform(translateY(-2px));
		.shadow-box {
			.box-shadow(0px 15px 50px 0px rgba(0,0,0,0.5));
		}
	}
}