/*******************************************************
  Module Style
********************************************************/
//-- SP User Info
.spuserinfo-block{
	display: inline-block;
	vertical-align: top;
	line-height: 42px;
	position: relative;
	&:hover{
		cursor: pointer;
	}
	
	.user-info {
		div.login, div.logout {
			position: relative;
			text-transform: capitalize;
			color:#ccc;
			font-size: 93%;
			cursor: pointer;
			display: block;
			.fa{
				color: $linkColor;
			}
			a{
				color: #ccc;
				display: inline-block;
				&.login, &.logout{
					font-weight: 400;
				}
				&:hover{
					color:$linkColor;
				}
			}
		}
		a.register{
			color: #ccc;
			font-weight: 400;
			&:hover{
				color: $linkColor;
			}
		}
	}
	
	.custom-modal-loading{
		font-size: 36px;
		text-align: center;
		color: $linkColor;
	}
	
	.close-user {
		display: block;
		height: 34px;
		width: 34px;
		line-height: 29px;
		text-align: center;
		font-weight: 400;
		font-size: 14px;
		color: #fff;
		border-radius: 50%;
		position: absolute;
		top: -20px;
		right: -20px;
		left: auto;
		opacity: 1;
		cursor: pointer;
		transition: all 0.3s ease 0s;
		background: $background url(../../assets/img/icon_close.png) no-repeat center center;
		&:hover{
			background-color: darken($background, 10%);
		}
	}
	
	.modal-header{
		border-bottom: none;
		text-align: center;
		margin-bottom: 18px;
		margin-top: 10px;
		h3{
			font-size: 200%;
			font-weight: 600;
			text-transform: uppercase;
			color: #222;
			position: relative;
			&:before{
				content: '';
				position: absolute;
				height: 2px;
				width: 50px;
				background: $background;
				top: auto;
				bottom: -17px;
				left: calc(50% - 30px);
			}
		}
	}
	
	.js-modal-content{
		padding: 0 30px 30px;
		.form-group{
			margin-bottom: 0px;
			label{
				text-align: left;
				color: #222;
				width: 100%;
				.lang-rtl &{
					text-align: right;
				}
			}
			.popup-login-col{
				width: 100%;
				.input-group-btn{
					display: none;
				}
			}
			.form-control{
				background: #fff;
				border: 1px solid #ddd;
				border-radius: 3px;
			}
			.input-group .input-group-btn > .btn{
				height: 38px;
			}
		}
		
		.forgot-password{
			margin: 15px 0 20px;
		}
		
		.form-footer .btn-primary{
			display: block;
			background: $background;
			width: 100%;
		}
	}
	
	hr{
		display: none;
	}
	.no-account{
		display: none;
	}
	
}

//-- SP Currency
#sp-currency{
	vertical-align: top;
    position: relative;
	cursor: pointer;
	height: 42px;
    line-height: 42px;
	z-index: 4;
	&:after {
		content: "";
		width: 1px;
		height: 14px;
		position: absolute;
		top: 13px;
		right: 0px;
		left: auto;
		background: rgba(255,255,255,0.2);
	}
}

.currency-selector {
	.sp-currency-title {
		padding: 0 15px 0 0;
		span {
			display: inline-block;
			vertical-align: middle;
			color: #ccc;
			font-size: 93%;
			text-transform: uppercase;
			font-weight: 400;
			transition: all 0.3s ease 0s;
			margin: 0 5px 0 0;
			.lang-rtl &{
				margin: 0 0 0 5px;
			}
		}
		span.text{
			font-size: 85.7%;
			color: #ccc;
		}
		i {
			font-size: 14px;
			color: #ccc;
			margin: 0;
			line-height: 40px;
			display: inline-block;
			vertical-align: top;
			transition: all 0.3s ease 0s;
		}
		&:hover{
			span, .fa{
				color: $linkColor;
			}
		}
	}
	
	.sp-currency-list li {
		margin-bottom: 15px;
		a{
			color: #fff;
			font-size: 100%;
			display: block;
		}
		&:hover{
			a{
				color: $linkColor;
			}
		}
	}
	
	.dropdown-menu {
			margin: 0;
			background: #fff;
			right: auto;
			left: 0;
			padding: 5px 0 0;
			z-index: 9;
			width: 100%;
			min-width: 0;
			border: 1px solid #ebebeb;
			border-radius: 3px;
			box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
			-ms-box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
			-moz-box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
			-webkit-box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
			.lang-rtl &{
				left: auto;
				right: 0;
			}
		li {
			line-height: 35px;
			border-bottom: 1px solid #eee;
			a {
				display:block;
				text-transform: capitalize;
				font-size: 12px;
				padding: 0 15px;
				font-weight:400;
				color: #222;
				i {
					display: inline-block;
					width: 25px;
					height: 25px;
					color: #373a48;
					font-size: 16px;
					border-radius: 50%;
					text-align: center;
					margin-right: 5px;
					font-style: inherit;
				}
			}
			&:hover a {
				color: $linkColor;
			}
		}
	}
	.sp-currency-select {padding: 2px 15px;height: 30px;border: 1px solid #eee;}
}

//-- SP Language

#sp-language{
	vertical-align: top;
    position: relative;
	cursor: pointer;
	height: 42px;
    line-height: 42px;
	z-index: 4;
}

.language-selector {
	.sp-language-title {
		cursor: pointer;
		span {
			vertical-align: middle;
			color: #ccc;
			font-size: 93%;
			font-weight: 400;
			text-transform: uppercase;
			transition: all 0.3s ease 0s;
			margin: 0 10px 0 13px;
		}
		span.text{
			font-size: 93%;
			color: #373a48;
		}
		.fa {
			color: #ccc;
			font-size: 13px;
			margin: 0;
			float: right;
			line-height: 40px;
			vertical-align: middle;
			transition: all 0.3s ease 0s;
		}
		&:hover{
			span, .fa{
				color: $linkColor;
			}
		}
	}
	
	.sp-language-list li {
		margin-bottom: 15px;
		a{
			color: #464646;
			font-size: 100%;
			display: block;
		}
		&:hover{
			a{
				color: $linkColor;
			}
		}
	}
	
	.dropdown-menu {
		width: 100%;
		padding: 5px 0 0;
		margin: 0;
		background: #fff;
		left: 0;
		right: auto;
		border: 1px solid #ebebeb;
		z-index: 9;
		min-width: 0;
		border-radius: 3px;
		box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
		-ms-box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
		-moz-box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
		-webkit-box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
		.lang-rtl &{
			left: auto;
			right: 0;
		}
		li{
			line-height: 35px;
			border-bottom: 1px solid #eeeeee;
			&:hover a {
				color: $linkColor;
			}
		}
		.language-item {
			display: block;
			padding: 0 13px;
			color: #222;
			font-size: 12px;
			text-transform: capitalize;
		}
	}
	
	.sp-language-select {
		padding: 2px 15px;
		height: 30px;
		border: 1px solid #eee;
	}
}

//-- SP Block Cart
._desktop_cart{
	min-width: 200px;
	float: right;
}

.spblockcart {
    cursor: pointer;
	display:block;
	margin: 0;
	vertical-align: top;
	border: 2px solid #e5e5e5;
    border-radius: 5px;
	.shopping_cart {
		position: relative;
		vertical-align: middle;
	}
	
	.cart-content{
		margin: 0;
		padding: 0 3px 0 53px;
		line-height: 40px;
	}
	
	.cart-icon {
		float: left;
		width: 43px;
		height: 41px;
		line-height: 41px;
		border-right: 2px solid #e5e5e5;
		margin: 0;
		text-align: center;
		padding: 0;
		transition: all 0.3s ease 0s;
		position: relative;
		font-size: 16px;
		color: #282828;
	}
	
	.cart-products-count {
		padding: 0;
		color: #fff;
		font-size: 12px;
		font-weight: 400;
		display: inline-block;
		line-height: 24px;
		position: absolute;
		text-align: center;
		left: 30px;
		top: -13px;
		width: 23px;
		font-weight: 500;
		height: 23px;
		background: $background;
		border-radius: 50%;
	}
	
	span.shopping-cart-title_layout4{
		display: none;
	}
	
	span.shopping-cart-title{
		vertical-align: middle;
		color: #282828;
		font-size: 13px;
		margin: 0;
		padding: 0;
		position: relative;
		font-weight: 400;
		text-transform:capitalize;
		line-height: 18px;
	}
	
	span.cart-products-total{
		color: $linkColor;
		font-weight: 600;
		font-size: 107%;
	}
}


//-- Layout 2
.header_v2, .header_v4, .header_v5, .header_v6{
	.spuserinfo-block{
		margin: 0 12px 0 0;
		padding: 0 15px 0 0;
		&:after{
			content: '';
			position: absolute;
			height: 14px;
			width: 1px;
			background: rgba(255, 255, 255, 0.2);
			top: 13px;
			left: auto;
			right: 0;
		}
		.lang-rtl &{
			margin: 0 0 0 12px;
			padding: 0 0 0 15px;
			&:after{
				left: 0;
				right: auto;
			}
		}
	}
}

//-- Layout 4
.header_v4{
	.spblockcart{
		background: $background;
		border: none;
		border-radius: 0;
		padding-top: 44px;
		padding-bottom: 17px;
		
		min-width: 0;
		width: 100px;
		float: none;
		position: absolute;
		left: auto;
		right: 15px;
		top: -80px;
		.lang-rtl &{
			left: 15px;
			right: auto;
			float: none;
		}
		
		.cart-icon {
			float: none;
			width: 100%;
			height: 41px;
			line-height: 41px;
			border: none;
			margin: 0;
			text-align: center;
			padding: 0;
			transition: all 0.3s ease 0s;
			position: relative;
			font-size: 30px;
			color: #fff;
			display: block;
			margin-bottom: 5px;
			background: transparent;
			border-radius: 0;
			.lang-rtl &{
				float: none;
				border: none;
			}
		}
		.cart-content {
			padding: 0;
			text-align: center;
			line-height: normal;
			.lang-rtl &{
				padding: 0;
			}
		}
		span.shopping-cart-title_layout4{
			color: #fff;
			display: block;
			text-transform: uppercase;
			font-size: 14px;
			font-weight: 500;
		}
		span.shopping-cart-title{
			display: none;
		}
		span.cart-products-total{
			display: none;
		}
		.cart-products-count {
			padding: 0;
			color: #fff;
			font-size: 12px;
			font-weight: 400;
			display: inline-block;
			line-height: 24px;
			position: relative;
			left: auto;
			top: auto;
			width: auto;
			font-weight: 500;
			height: 23px;
			background: #ff2d37;
			border-radius: 50%;
			.lang-rtl &{
				left: auto;
				right: auto;
			}
		}
	}
}

//-- Layout 5
.header_v5{
	.spblockcart{
		border-color: #fff;
		.cart-content{
			background: #fff;
		}
	}
}

//-- Layout 6
.header_v6{
	._desktop_cart{
		text-align: center;
		background: #f5f5f5;
		min-width: 80px;
		position: relative;
		transition: all 0.3s ease 0s;
		&:before, &:after{
			content: '';
			position: absolute;
			height: 24px;
			width: 100%;
			background: #f5f5f5;
			left: 0;
			right: 0;
			transition: all 0.3s ease 0s;
		}
		&:before{
			top: -20px;
			bottom: auto;
		}
		&:after{
			top: auto;
			bottom: -23px;
		}
		&:hover{
			background: #e5e5e5;
			cursor: pointer;
			&:before, &:after{
				background: #e5e5e5;
			}
		}
	}
	.spblockcart{
		border: none;
		border-radius: 0;
		display: inline-block;
		.cart-icon {
			border: none;
			height: 45px;
			line-height: 45px;
			font-size: 24px;
			background: transparent;
			.lang-rtl &{
				border: none;
			}
		}
		.cart-content {
			padding: 0;
			text-align: center;
			line-height: normal;
			.lang-rtl &{
				padding: 0;
			}
		}
		span.shopping-cart-title_layout4{
			color: #fff;
			display: block;
			text-transform: uppercase;
			font-size: 14px;
			font-weight: 500;
			display: none;
		}
		span.shopping-cart-title{
			display: none;
		}
		span.cart-products-total{
			display: none;
		}
	}
}

.header_v1, .header_v2, .header_v3, .header_v7, .header_v8 {
	.spblockcart{
		transition: all 0.3s ease 0s;
		&:hover{
			border-color: #272727;
			.cart-icon{
				border-color: #272727;
			}
		}
	}
}

.header_v8 {
	.spblockcart{
		background: #fff;
	}
	.spuserinfo-block .user-info div.login, .spuserinfo-block .user-info div.logout{
		a{
			color: #fff;
		}
		&:hover{
			a{
				color: $linkColor;
			}
		}
	}
	.currency-selector .sp-currency-title, .language-selector .sp-language-title{
		span{
		   color: #fff;
		}
		&:hover{
			span{
				color: $linkColor;
			}
		}
	}
}

//-- Layout 8
@media (min-width: 992px) {
	.header_v8 ._desktop_cart{
		min-width: 188px;
	}
}