/*
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@author			Jacques Baars <j@w3d.co.za>
*
*	@notice			This is the property of W3Designs, W3Development, W3D,
*					it is illegal to use this source code without the required permission,
*					contact j@w3d.co.za for further advice or permissions.
*
*	@license		Copyright (c) 2016 W3Designs (PTY) Ltd. (http://www.w3d.co.za)
*/

/* Basket */
.basket{
	position: relative;
	display: inline-block;
}

	.basket .num{
		color: #fff;
		padding: 1px 5px;
		display: inline-block;
		background-color: var(--bgColor);
	}

	.basket .checkout-prompt{
		right: 0;
		top: 30px;
		color: #000;
		padding: 10px;
		z-index: 10000;
		text-align: center;
		position: absolute;
		background-color: #fff;
	}

	.basket .checkout-prompt:before{
		width: 0;
		height: 0;
		top: -8px;
		right: 25%;
		content: '';
		position: absolute;
		border-bottom: 8px solid #fff;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
	}

		.basket .checkout-prompt a{
			font-weight: bold;
			color: var(--bgColor) !important;
			text-decoration: underline !important;
		}
	
/* Promo Bar */
#promo-bar{
	width: 100%;
	height: 3px;
	background-color: var(--softBgColor);
}
	
	#promo-bar .bar{
		width: 0;
		height: 3px;
		background-color: var(--bgColor);
		
		-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
		transition: width 1s;
	}
	
/* Checkout Panel */
#checkout-panel{
	top: 0;
	right: 0;
	bottom: 0;
	width: 300px;
	display: none;
	z-index: 10000;
	position: fixed;
	background-color: #fff;
}

#checkout-panel.dark-mode{
	background-color: var(--darkModeContainerBgColor);
}

	#checkout-panel .heading{
		border-bottom: 1px solid var(--softBorderColor);
	}

	#checkout-panel.dark-mode .heading{
		border-bottom: 1px solid var(--darkModeBorderColor);
	}

		#checkout-panel .heading .title{
			font-weight: bold;
			padding: 10px 15px;
			font-size: var(--fontSize140);
		}

		#checkout-panel .heading .close{
			cursor: pointer;
		}

		#checkout-panel .heading .close:hover{
			background-color: var(--bgColor);
		}

			#checkout-panel .heading .close img{
				width: 20px;
			}

			#checkout-panel .heading .close:hover img{
				-webkit-animation: rotating 2s linear infinite;
				-moz-animation: rotating 2s linear infinite;
				-ms-animation: rotating 2s linear infinite;
				-o-animation: rotating 2s linear infinite;
				animation: rotating 2s linear infinite;
			}

	/* No Items */
	#checkout-panel .no-items{
		color: #444;
		padding: 15% 0;
		text-align: center;
	}

	/* Products */
	#checkout-panel .products{}

		#checkout-panel .products .loader{
			margin: 10% auto;
		}

		#checkout-panel .products .product{
			padding: 10px;
			border-bottom: 1px solid var(--softBorderColor);
		}

		#checkout-panel.dark-mode .products .product{
			border-bottom: 1px solid var(--darkModeBorderColor);
		}

		#checkout-panel .products .product:last-child{
			border-bottom: none;
		}

			/* Container */
			#checkout-panel .products .product .container{}

				/* Image */
				#checkout-panel .products .product .container .image{
					width: 80px;
					float: left;
					position: relative;
					background: #fff url('../images/ui/loading.gif') center center no-repeat;
				}

					#checkout-panel .products .product .container .image .tag{
						z-index: 100;
						overflow: hidden;
						position: absolute;
					}

					#checkout-panel .products .product .container .image .tag.sale{
						right: 0;
						bottom: 5px;
					}

					#checkout-panel .products .product .container .image .tag.new{
						left: 0;
						top: 5px;
					}

						#checkout-panel .products .product .container .image .tag .label{
							color: #fff;
							padding: 1px 3px;
							position: relative;
							font-size: var(--fontSize80);
						}

						#checkout-panel .products .product .container .image .tag.sale .label{
							background-color: var(--redColor);
						}

						#checkout-panel .products .product .container .image .tag.new .label{
							background-color: var(--greenColor);
						}

				/* Content */
				#checkout-panel .products .product .container .content{
					float: left;
					padding-left: 10px;
					width: calc(100% - 90px);
				}

					#checkout-panel .products .product .container .content > *{
						margin-top: 10px;
					}

					#checkout-panel .products .product .container .content > *:first-child{
						margin-top: 0;
					}

					/* Title */
					#checkout-panel .products .product .container .content .title{
						font-size: var(--fontSize80);
					}

						#checkout-panel .products .product .container .content .title a{
							color: #000;
						}

						#checkout-panel.dark-mode .products .product .container .content .title a{
							color: #fff;
						}

					/* Price */
					#checkout-panel .products .product .container .content .price{
						color: #888;
						text-align: right;
						font-size: var(--fontSize80);
					}

						#checkout-panel .products .product .container .content .price a{
							color: inherit;
						}

						#checkout-panel .products .product .container .content .price b{
							color: var(--redColor);
							font-size: var(--fontSize120);
						}

			/* Basket Bar */
			#checkout-panel .products .product .basket-bar{
				margin-top: 10px;
			}

				#checkout-panel .products .product .basket-bar .add-ons{
					margin-bottom: 10px;			
					font-size: var(--fontSize80);
				}

					#checkout-panel .products .product .basket-bar .add-ons .label{
						margin-bottom: 10px;
					}

				#checkout-panel .products .product .basket-bar .amend{}
				
					#checkout-panel .products .product .basket-bar .amend .panel{}
					
						#checkout-panel .products .product .basket-bar .amend .panel .qty input{
							padding: 5px;
						}
					
					#checkout-panel .products .product .basket-bar .amend .basket-btn{
						font-size: var(--fontSize80);
					}

	#checkout-panel .summary{
		padding: 10px;
		font-size: var(--fontSize90);
		border-top: 1px solid var(--softBorderColor);
	}

	#checkout-panel .buttons{
		padding: 10px;
		border-top: 1px solid var(--softBorderColor);
	}

	#checkout-panel.dark-mode .summary,
	#checkout-panel.dark-mode .buttons{
		border-top: 1px solid var(--darkModeBorderColor);
	}

		#checkout-panel .buttons .btn.checkout{
			width: 100%;
			padding-left: 0;
			padding-right: 0;
			text-align: center;
			display: inline-block;
		}

/* Checkout */
#checkout{}

	/* Steps */
	#checkout h2{
		text-align: center;
	}

	/* No Items */
	#checkout .no-items{
		color: #444;
		padding: 15% 0;
		text-align: center;
		font-size: var(--fontSize140);
	}

	/* Info */
	#checkout .info{
		color: #444;
		margin-top: 20px;
		text-align: center;
	}
	
	#checkout.dark-mode .info{
		color: #fff;
	}

	#checkout .or{
		margin-top: 20px;
		text-align: center;
		font-size: var(--fontSize180);
	}

	#checkout .text{
		font-size: var(--fontSize90);
	}

	#checkout .form{
		margin-top: 20px;
		text-align: left;
		padding: 0 15% 5%;
	}

	/* Btns */
	#checkout .buttons{
		margin-top: 20px;
		text-align: center;
	}

		#checkout .buttons .btn{
			margin: 0 5px;
		}

	/* Terms */
	#checkout .terms{
		margin-top: 20px;
		text-align: center;
	}
	
		#checkout .terms .checkbox{
			display: inline-block;
		}

	/* Review */
	#checkout .review{
		margin-top: 20px;
	}

		#checkout .review table{
			width: 100%;
			padding: 5px;
			border: 1px solid var(--softBorderColor);
		}

		#checkout.dark-mode .review table{
			border: 1px solid var(--darkModeBorderColor);
		}

		#checkout .review table td{
			padding: 5px;
		}

		#checkout .review table td:first-child{
			color: #888;
			width: 150px;
			text-align: right;
		}

		#checkout .review table td:last-child{
			text-align: left;
			font-weight: bold;
			padding: 5px 5px 5px 10px;
			background-color: var(--softBgColor);
		}

		#checkout.dark-mode .review table td:last-child{
			background-color: var(--darkModeBgColor);
		}

	/* Coupons */
	#checkout .coupons{
		padding: 0 0 10px;
		text-align: right;
		margin-bottom: 20px;
		border-bottom: 1px solid var(--softBorderColor);
	}
	
		#checkout .coupons .label{
			color: #fff;
			height: 41px;
			padding: 0 15px;
			line-height: 41px;
			display: inline-block;
			background-color: var(--bgColor);
		}
	
		#checkout .coupons input{
			display: inline-block;
		}

	/* Products */
	#checkout .products{
		margin-top: 20px;
	}

		#checkout .products .loader{
			width: 100px;
			display: block;
			margin: 10% auto;
		}

		#checkout .products .product{
			z-index: 0;
			margin-bottom: 20px;
			border-bottom: 1px solid var(--softBorderColor);
		}

		#checkout.dark-mode .products .product{
			border-bottom: 1px solid var(--darkModeBorderColor);
		}

			#checkout .products .product .container{}
				
				/* image */
				#checkout .products .product .container .image{
					width: 25%;
					float: left;
					position: relative;
					background: #fff url('../images/ui/loading.gif') center center no-repeat;
				}

					#checkout .products .product .container .image .tag{
						z-index: 100;
						overflow: hidden;
						position: absolute;
					}

					#checkout .products .product .container .image .tag.sale{
						right: 0;
						top: 10px;
					}

					#checkout .products .product .container .image .tag.new{
						left: 0;
						top: 10px;
					}

						#checkout .products .product .container .image .tag .label{
							color: #fff;
							padding: 3px 8px;
							position: relative;
							font-size: var(--fontSize80);
						}

						#checkout .products .product .container .image .tag.sale .label{
							background-color: var(--redColor);
						}

						#checkout .products .product .container .image .tag.new .label{
							background-color: var(--greenColor);
						}

					#checkout .products .product .container .image .img{}

						#checkout .products .product .container .image .img img{
							width: 100%;
						}
				
				/* Product Content */
				#checkout .products .product .container .content{
					float: left;
					width: calc(75% - 30px);
					padding: 10px 10px 10px 20px;
				}

					#checkout .products .product .container .content > *{
						margin-top: 10px;
					}

					#checkout .products .product .container .content > *:first-child{
						margin-top: 0;
					}

					/* Title */
					#checkout .products .product .container .content .title{
						font-size: var(--fontSize120);
					}

						#checkout .products .product .container .content .title a{
							color: #000;
						}

						#checkout.dark-mode .products .product .container .content .title a{
							color: #fff;
						}

					/* Description */
					#checkout .products .product .container .content .description{
						font-size: var(--fontSize90);
					}

						#checkout .products .product .container .content .description a{
							color: #888;
						}

					/* Price */
					#checkout .products .product .container .content .price{
						color: #888;
						text-align: right;
						font-size: var(--fontSize90);
					}

						#checkout .products .product .container .content .price a{
							color: inherit;
						}

						#checkout .products .product .container .content .price b{
							color: var(--redColor);
							font-size: var(--fontSize140);
						}

					/* Basket Bar */
					#checkout .products .product .container .content .basket-bar .add-ons{
						margin-bottom: 10px;
					}

						#checkout .products .product .container .content .basket-bar .add-ons .label{
							margin-bottom: 10px;
						}
	
/* Credit Description */
.credit-description{
	cursor: pointer;
	text-align: right;
}

/* Basket Bar */
.basket-bar{
	text-align: left;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

	/* Add Ons */
	.basket-bar:not(.products) .add-ons{}

		.basket-bar:not(.products) .add-ons .close{
			display: none;
		}

		.basket-bar:not(.products) .add-ons .list{
			padding: 0;
		}

	/* Add Ons */
	.basket-bar.products .add-ons{
		top: -1px;
		left: -1px;
		right: -1px;
		bottom: -1px;
		display: none;
		z-index: 1000;
		text-align: left;
		position: absolute;
		background-color: #fff;
	}
	
	.basket-bar.dark-mode.products .add-ons{
		background-color: var(--darkModeContainerBgColor);
	}
	
		.basket-bar.products .add-ons .label{
			color: #000;
			height: 22px;
			padding: 10px;
			border-bottom: 1px solid var(--softBorderColor);
		}
		
		.basket-bar.dark-mode.products .add-ons .label{
			color: #fff;
			border-bottom: 1px solid var(--darkModeBorderColor);
		}
	
		.basket-bar.products .add-ons .close{
			top: 9px;
			right: 9px;
			cursor: pointer;
			position: absolute;
		}
	
			.basket-bar.products .add-ons .close svg{
				width: 24px;
				fill: var(--bgColor);
			}
	
			.basket-bar.dark-mode.products .add-ons .close svg{
				fill: #fff;
			}
	
		.basket-bar.products .add-ons .list{
			padding: 10px;
			font-size: var(--fontSize90);
		}

			.basket-bar .add-ons .list .radio{
				margin-bottom: 3px;				
			}

			.basket-bar .add-ons .list .checkbox{
				margin-bottom: 5px;				
			}

			.basket-bar .add-ons .list .radio:last-child,
			.basket-bar .add-ons .list .checkbox:last-child{
				margin-bottom: 0;				
			}

	/* Amend */
	.basket-bar .amend{}
	
		.basket-bar .amend .panel{
			display: inline-block;
			background-color: var(--softBgColor);
		}

		.basket-bar.dark-mode .amend .panel{
			background-color: var(--darkModeBgColor);
		}

		.basket-bar.list .amend .panel{
			float: left;
		}

			.basket-bar .amend .panel .qty-btn{
				float: right;
				font-weight: bold;

				color: #000 !important;
				background-color: var(--softBgColor);
			}
				
				.basket-bar .amend .panel .qty-btn:hover{
					color: #fff !important;
					background-color: var(--btnBgHoverColor);
				}
		
			.basket-bar.dark-mode .amend .panel .qty-btn{
				color: #fff !important;
				background-color: var(--darkModeBgColor);
			}
		
			.basket-bar .amend .panel .qty{
				width: auto;
				float: right;
				border-left: 1px solid var(--softBorderColor);
				border-right: 1px solid var(--softBorderColor);
			}

				.basket-bar.dark-mode .amend .panel .qty{
					border-left: 1px solid var(--darkModeBorderColor);
					border-right: 1px solid var(--darkModeBorderColor);
				}

				.basket-bar .amend .panel .qty input{
					width: 30px;
					border: none;
					padding: 8px 5px;
					text-align: center;
					background-color: var(--softBgColor);
					
					-webkit-box-shadow: none;
					-moz-box-shadow: none;
					box-shadow: none;
				}

				.basket-bar.dark-mode .amend .panel .qty input{
					color: var(--darkModeColor) !important;
					background-color: var(--darkModeBgColor);
				}
		
		.basket-bar .amend .basket-btn,
		.basket-bar .quote-only .basket-btn{
			display: block;
			text-align: center;
		}
		
		.basket-bar.list .amend .basket-btn,
		.basket-bar.list .quote-only .basket-btn{
			float: right;
		}
		
		.basket-bar .amend .basket-btn.remove{
			margin-left: 5px;
		}
		
		.basket-bar.grid .amend .basket-btn{
			margin-top: 5px;
		}

	.basket-bar .quote-only{}

	.basket-bar .available{
		display: none;
	}

	.basket-bar .no-stock{
		color: #888;
		text-align: center;
	}
	
/* Basket Delivery Options */
#basket-delivery-options{
	margin: 10px;
    text-align: right;
}

	#basket-delivery-options > label{
		display: inline-block;
	}

	#basket-delivery-options > label:nth-child(2){
		margin-left: 10px;
	}
	
/* Basket Totals */
#basket-totals{
	text-align: right;
}

	#basket-totals table{
		width: 100%;
	}

		#basket-totals table td{
			padding: 5px;
		}

		#basket-totals table td:first-child{
			color: #888;
		}

		#basket-totals table td:last-child{
			width: 120px;
			text-align: left;
			font-weight: bold;
			padding: 5px 5px 5px 10px;
			background-color: var(--softBgColor);
		}

		#basket-totals.dark-mode table td:last-child{
			background-color: var(--darkModeBgColor);
		}

	#basket-totals .info{
		margin-top: 10px;
		text-align: center;
		font-size: var(--fontSize90);
	}
	
/* Shopping */
#shopping{}
	
	/* buttons */
	#shopping .buttons{
		margin: 2% 0 0;
		padding: 2% 0 0;
		border-top: 1px dashed var(--softBorderColor);
	}
	
		#shopping .buttons .btn{
			float: right;
			padding: 8px 12px;
			margin: 0 5px 0 0;
		}

	#shopping .pay{}

		#shopping .pay .panel{
			padding: 10px;
			border: 1px dashed var(--softBorderColor);
		}

		#shopping .pay.dark-mode .panel{
			border: 1px dashed var(--darkModeBorderColor);
		}

			#shopping .pay .panel .title{
				margin: 0 0 20px;
				padding: 0 10px 10px;
				font-size: var(--fontSize140);
				border-bottom: 1px solid var(--softBorderColor);
			}

			#shopping .pay.dark-mode .panel .title{
				color: var(--darkModeColor);
				border-bottom: 1px solid var(--darkModeBorderColor);
			}

			#shopping .pay .panel .content{}
					
				#shopping .pay .panel .content .summary{}
					
					#shopping .pay .panel .content .summary .row{
						padding: 5px;
						border-bottom: 1px dashed var(--softBorderColor);
					}
					
					#shopping .pay.dark-mode .panel .content .summary .row{
						border-bottom: 1px dashed var(--darkModeBorderColor);
					}
					
					#shopping .pay .panel .content .summary .row:last-child{
						border: none;
					}
					
			#shopping .pay .panel .content .info{
				color: #888;
				padding: 5px;
				text-align: center;
				font-size: var(--fontSize90);
			}
			
	#shopping > .info{
		color: #444;
		padding: 15% 0;
		font-weight: bold;
		text-align: center;
		font-size: var(--fontSize160);
	}
	
/* Mobile Basket */
#mobile-basket{
	width: 40px;
    height: 40px;
    cursor: pointer;
	margin-top: 8px;
	position: relative;
	
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-color: var(--bgColor);
	
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

	#mobile-basket:hover{
		background-color: var(--bgColor2);
	}

	#mobile-basket.tc{
		background-position: center 10px;
		background-image: url('../images/ui/tc.png');
	}

	#mobile-basket.cart{
		background-position: center 11px;
		background-image: url('../images/ui/cart.png');
	}

		#mobile-basket .num{
			top: 25px;
			left: 20px;
			color: #fff;
			padding: 1px 5px;
			position: absolute;
			display: inline-block;
			background-color: var(--bgColor2);
		}

/* 1380px */		
@media screen and (max-width: 1380px){
	#checkout .products .product .container .image .tag{
		width: 50px;
		height: 50px;
	}

		#checkout .products .product .container .image .tag .label{
			width: 70px;
			font-size: var(--fontSize80);
		}

		#checkout .products .product .container .image .tag.sale .label{
			left: 0;
			top: 7px;
			right: -2px;
		}

		#checkout .products .product .container .image .tag.new .label{
			top: 22px;
			left: -18px;
		}
}

/*600px*/		
@media screen and (max-width: 600px){
	#checkout .form{
		padding: 0;
	}

	#checkout .buttons .btn{
		width: 100%;
		display: block;
		margin: 0 0 5px;
		padding-left: 0;
		padding-right: 0;
	}
	
	#checkout .coupons{
		text-align: center;
	}
	
		#checkout .coupons .label{
			line-height: 42px;
		}

	#checkout .products .product .container .content{
		padding: 10px;
		width: calc(75% - 20px);
	}

	#checkout .products .product .basket-bar{
		margin: 10px 0;
	}

		#checkout .products .product .basket-bar .add-ons{
			margin-bottom: 10px;
		}

			#checkout .products .product .basket-bar .add-ons .label{
				margin-bottom: 10px;
			}

	#shopping .buttons .btn{
		width: 100%;
		padding: 8px 0;
		margin: 0 0 5px;
		text-align: center;
	}
		
	#shopping .pay .panel .content .gateways .gateway{
		float: none;
	}
}