/**
* Plan classes
*
* @author splitfire - http://splitfire.fr
* @version 1.0
*
* Module des présentations des offres de CourtApp
*
*
*/

//Wrapper des plans

.plan_wrapper
{
	text-align: center;
	@extend %clearfloat;
	margin:10px 0 0 0;
	
	//Augmentation de la taille de l'icone 
	& .warning:before
	{
		//@include px2em($px : $fontSize * 2, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property : font-size) ;
		@include rem((
			font-size: $fontSize *2
		));
	}
	//décalage du bouton d'annulation
	& .warning .btn
	{
		margin-left:10px;
	}
}

//Liste des plans
.plan_item 
{
	float: left;
	width:25%;
	margin-top: 21px;
	box-shadow: -2px 0 rgba(0, 0, 0, 0.06);
	box-sizing : border-box;
	@include mq(phone,tablet){width:50%; };
	@include mq($to: phone){width:auto;float:none; margin-top: 0};	
	//Titre du plan
	& .plan_title 
	{
		color: #fff;
		//@include px2em($px : 24px, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property : font-size) ;
		@include rem((
			font-size: 24px			
		));
		padding: 21px 0;
		background-color:$toolbarActionColor;
		margin:0;
	}
	//Image du plan
	.plan_img
	{
		position:relative;
		padding:20px 0;
		
		& > [class*="icon-"]
		{
			position:relative;
			width: 100%;
			//@include px2em($px : $fontSize *  8.46, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property : height) ;
			//@include px2em($px : $fontSize *  8.46, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property : font-size) ;
			@include rem((
				height		:$fontSize * 8.46,
				font-size	:$fontSize * 8.46
			));
			opacity:1;
			color:$headerColor;
			color:$menuColor ;
			margin: 0 0;
		}
		//Bagde
		& .badge
		{
			position:absolute;
			//@include px2em($px :$fontSize +2px, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property : font-size) ;
			@include rem((
				font-size : $fontSize + 2px
			));
			color: #fff;
		}
		//Badge de remise
		& .discount
		{
			background-color:$dangerColor;
			right: 10px;
			top: - $fontSize - 2px;
		}
	}
	//Prix du plan
	& .plan_price 
	{
		position: relative;
		color: #222222;
		//@include px2em($px :$fontSize * 3.7, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property :font-size) ;
		@include rem((
			font-size: $fontSize * 3.7
		));
	}
	//Periode et ttc du plan
	& .plan_price--month 
	{
		color: #A9A9A9;
		//@include px2em($px :$fontSize + 3px, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property : font-size) ;
		@include rem((
			font-size: $fontSize + 3px
		));
		font-weight: normal;
	}
	//Lien de souscription
	& .plan_subscription
	{
		margin: 25px 0;
	}
	//Liste des features du plan
	& .plan_features 
	{
		min-height:125px;
		background-color: #F6F6F6;
		border-top: 1px solid #F0F0F0;
		//@include px2em($px :$fontSize + 1px, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property : font-size) ;
		@include rem((
			font-size: $fontSize + 1px
		));
		font-weight: bold;
		padding: 20px 0;
	}
	//Gestion du hover
	&:hover:not(.subscription)
	{
		//margin-top:0;
		& .plan_title 
		{
			background-color:#40B3D9;
		}
	}
	//Plan courant
	&.subscription
	{
		margin-top:0;
		& .plan_title 
		{
			background-color: $successColor;
		}
		& .btn
		{
			cursor:default;
		}
	}
	//Footer des plans avec inscription de la date d'abonnement
	.plan_date
	{
		height: 45px;
		line-height: 45px;
		background-color: #E9E9E9;
		color: $successColor;
		border-top:solid 1px #E4E4E4;
	}
}

//Liste des fonctionnalités du plan
.plan_features--list
{	
	display:inline-block;
	padding: 0 5px;
	.touch &
	{
		select
		{
			display: inline-block !important;
		}
	}
	& li 
	{
		padding-top:10px;
		padding-bottom:10px;
		//@include px2em($px :$fontSize +5px, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property : padding-right) ;
		//@include px2em($px :$fontSize +5px, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property : padding-left) ;
		@include rem((
			padding-right : $fontSize + 5px,
			padding-left  : $fontSize + 5px
		));
		text-align:left;
		position:relative;
	}
	& li:before
	{
		@extend %icon-style;
		position:absolute;
		left:-8px;
		top:11px;
	}
	& .icon_calendar:before
	{
		//content: "\e004";
		@extend .icon-calendar:before;
	}
	& .icon_cloud-upload:before
	{
		//content: "\e021";
		@extend .icon-cloud-upload:before;
	}
	& .icon_user:before
	{
		//content: "\e023";
		@extend .icon-user:before;
	}
}
//Affichage des plans dans la fancybox
.plan_subscribe
{
	position:relative;
	text-align: center;
	
	//Prix du plan
	.plan_price 
	{
		text-align:center;
		color: #222222;
		//@include px2em($px :$fontSize * 3, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property :font-size) ;
		@include rem((
			font-size: $fontSize * 3
		));
	}
	//Periode et ttc du plan
	.plan_price--month 
	{
		color: #A9A9A9;
		//@include px2em($px :$fontSize + 3px, $base-font-size: $base-font-size, $em : true, $rem: true, $percent: false, $property :font-size) ;
		@include rem((
			font-size : $fontSize + 3px
		));
		font-weight: normal;
	}
	.plan_compare
	{
		color:white;
		& > [class*="icon-"]
		{
			position: absolute;
			margin:0;
			left:46%;
			top:29%;
			color:$successColor;
			@include opacity(1);
			//@include px2em($px : $fontSize * 3, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : font-size) ;
			@include rem((
				font-size: $fontSize * 3
			));
		}
	}
}

//Lien de Résiliation du plan en dessous de la liste des plans
.plan_cancel
{
	margin:20px 0 0 0;
	text-align: center;
}
.plan_cancel-link
{
	text-decoration: none;
	//@include px2em($px : $fontSize +1px, $base-font-size:$base-font-size, $em : true, $rem: true, $percent: false, $property : font-size) ;
	@include rem((
		font-size: $fontSize + 1px
	));
	&:hover
	{
		color:#000;
	}
}