////////////////////////////////////////////////////////////////////
//															      //
//		E-COMMERCE  											  //
//																  //
////////////////////////////////////////////////////////////////////

// Shared Classes
// -----------------------------------------------------------------
.price { color:$accent; font-weight:bold;}
.sold { color:$orange;}
.discount { color:darken($green, 20%);}

.paid_green {color: $green;}
.paid_red {color: $red;}

// List Orders Filter
// -----------------------------------------------------------------
#app-ecommerce-order-admin-links + .list_action_toolbar { border-top: 1px solid $grayLight;}
.multi_actions {
	.count-selected { font-weight:bold; padding:5px 0;}
	ul {
		list-style:none; padding:0; display:inline; margin:0 10px 0 0;
		li, label { display:inline}
	}
}

// Add Products Popup
// -----------------------------------------------------------------
.ui-dialog {
	.container, .span12 { width:99%;}
}

/*  Add New Order -> 1. Products */
// -----------------------------------------------------------------
.sc {
	border-collapse: collapse;
	tfoot td { 
		background: #f2f2f2;
		color: $grayDarker;
		font-size: $baseFontSize + 1;    
	}
	.cell_quantity input {width: 40px;}
	.cell_image img { max-height:85px;}
	.cell_categories {
		color:$accent;
		.last { font-weight:bold;}
		span { color:$textColor;}
	}
	+ p {
		margin: $baseLineHeight 0 0;
		text-align: right;		
		.btn {margin-bottom: $baseLineHeight / 2;}	
	} 
}

/*  Add New Order -> 2. Customer Details -> 3. Payment and Shipping */
// -----------------------------------------------------------------
#ecommerce-form {
	margin-bottom: $baseLineHeight;
	#billing-element {
		width:48%; 
		float:left;
	}
	#shipping-element {
		width:48%; 
		float:right;
	}
	#billing-element, #shipping-element {
		.zip { width:80px;}
	}
	#serviceShipping-element { clear:both;}
	#fieldset-submitGroup {
		border: 0 none;
		margin: 0;
		padding: 0;
		text-align: center;
	}	
	> dl > dd > fieldset {
		@include box-sizing(border-box);
		border-width: 3px 1px 1px 1px;
		border-color: $accent $grayLighter $grayLighter $grayLighter;
		border-style: solid;
		margin-bottom: $baseLineHeight;
		padding: 20px 30px;
		legend {
			color: $black;
			padding: 0 10px;
		    font-size: $baseFontSize * 1.45;
			margin: 0;
			width: auto;
			border: none;
			&:before {
				display: block;
				float: left;
				width: 24px;
				height: 24px;
				margin: 12px 12px 0 0;
				text-align: center;
				background: $accent;
				color: $white;
				font-size: 14px;
				line-height: 24px;
				font-weight: bold;
				@include border-radius(12px);
			}
		}
	}
	#fieldset-servicePayment { margin:0;}
	#fieldset-billing legend:before { content: "1"}
	#fieldset-shipping legend:before { content: "2"}
	#fieldset-serviceShipping legend:before { content: "3"}
	#fieldset-servicePayment legend:before { content: "4"}

	#serviceShipping-type-label, 
	#servicePayment-type-label, 
	#servicePayment-usePromoCodeValue-label, 
	#servicePayment-useGiftCardValue-label { display:none;}	

	#submitGroup-element { clear:both;}

	textarea { width:100%; @include box-sizing (border-box);}
}

// Shipping Section
#fieldset-serviceShipping {
	> dl > dd {
		float: left;
		width: 30%;
		margin-left: 3%;
		&#serviceShipping-typeGroup-element {margin-left: 0;}		
		&#serviceShipping-rateGroup-element {
			float: right;
			.alert {
				font-weight: normal;
				margin-top: $baseLineHeight / 2;
			}
		}
		table.radiolist td label {margin-right: 5px;}
	}
	#serviceShipping-type-element {
		label { 
			display:block;
			height:33px; 
		}
		input { 
			margin:0; 
			padding:0;
			vertical-align: middle;
		}
		span {
			display:inline-block; 
			line-height:33px; 
			padding-left:50px; 
			margin-left: 10px;
			background-repeat: no-repeat;
			background-position: 0 center;
		}
		.ups { background-image: url('../images/ecommerce/ups.png');}
		.usps { background-image: url('../images/ecommerce/usps.png');}
		.fedEx { background-image: url('../images/ecommerce/fedex.png');}
		.manual { background-image: url('../images/ecommerce/manual.png');}
		br { display:none;}
	}	
	#serviceShipping-upsMethod-element, 
	#serviceShipping-fedExMethod-element { clear:left;}
}

// Payment Section
#fieldset-servicePayment {
	> dl > dd {
		float: left;
		width: 30%;
		margin-left: 3%;
		&#servicePayment-typeGroup-element {margin-left: 0;}
		&#servicePayment-additionalGroup-element { float: right;}
	}

	#servicePayment-authorizeNetCardCode, 
	#servicePayment-linkPointCardCode { 
		width:85px;
		margin-right: 5px;
	}
	.tooltip-inner { max-width: 450px;}
 }

#servicePayment-fieldset-authorizeNetMethods, 
#servicePayment-fieldset-linkPointMethods, 
#servicePayment-fieldset-PayPalStandardMethods, 
#servicePayment-fieldset-PayPalExpressCheckoutMethods {
	padding-top:50px;
	background-position: 0 0;
	background-repeat: no-repeat;
}
#servicePayment-fieldset-authorizeNetMethods, 
#servicePayment-fieldset-linkPointMethods {
	background-image:url('../images/ecommerce/payment_cc.png');
}
#servicePayment-fieldset-PayPalStandardMethods, 
#servicePayment-fieldset-PayPalExpressCheckoutMethods {
	background-image:url('../images/ecommerce/payment_cc_paypal.png');
}
#servicePayment-PayPalExpressCheckoutMethods-element, 
#servicePayment-PayPalStandardMethods-element { padding:0;}

#servicePayment-authorizeNetTitle-element { display:none;}
#helper-cc { 
	text-align: left; 
	width: 440px; 
	line-height: 18px;
	h3 { color: $white;}
	img { margin:0 15px 0 0;}
}

#servicePayment-additionalGroup-element { 
	dd {@include clearfix();}
	input.text, .btn {
		float: left;
		width: 120px;
	}
	input.text { margin-right: 5px;}
}

#servicePayment-additionalGroup-element { 
	fieldset { 
		padding: 15px 15px 3px;
		background-color: $grayLighter;
		@include border-radius(4px);
	}
	dd {@include clearfix();}
	input.text, .btn {
		float: left;
		width: 120px;
	}
	input.text { margin-right: 5px;}
}

#shipping-asBilling-element, 
#servicePayment-type-element, 
#servicePayment-usePromoCode-element, 
#servicePayment-useGiftCard-element {
	input {
		float: left;
		width: 16px;
		height: $baseLineHeight;
		position: relative;
	}
	label {
		display: block;
		@include clearfix();
		padding-left: 20px;
		margin-bottom: 10px;
		line-height: normal;
		input { margin-left: -20px;}
	}
	br { display:none;}
}

#servicePayment-promoCode-label, #servicePayment-usePromoCodeValue-label, #servicePayment-giftCardCode-label { display:none !important;}


/*  Add New Order -> 4. Summary */
// -----------------------------------------------------------------
.cart_sum {
	text-align: right;
	border-top: 1px solid $tableBorder;
	padding: 12px 8px;
	background-color: #f1f1f1;
	font-size: $baseFontSize + 1;
	color: $grayDarker;
	strong {
		display: inline-block;
		min-width: 90px;
	}
}

.cart_total {
	margin-bottom: $baseLineHeight;
	background-color: #e7e7e7;
	font-size: $baseFontSize + 3;	
}
// Cart Summary
// .cart_sum {
// 	div {
// 		display: table-row;
// 		.lbl-sum {
// 			text-align: left;
// 			width: 100%;
// 		}
// 		strong {white-space: nowrap;}
// 		.lbl-sum, strong { display: table-cell;}
// 		&.hidden { display:none;}
// 	}
// }
#noteGroup-element {float:left;}
#noteGroupAdmin-element {float:right;}
#noteGroup-element, #noteGroupAdmin-element { width:49%;
	fieldset { padding:0 !important; margin:0 !important; border:0 !important;}
}


#ecommerce-shippingprice-form {
	.autoNumeric { width:100px;}
}

// Gift Card & Promo Codes
// -----------------------------------------------------------------
#ecommerce-giftcard-form, #ecommerce-promo-form {
	#cardCode-element {
		@include clearfix();
		input, button {
			float: left;
			margin-right: 8px;
		}
		input {width: auto;}
	}
	.autoNumeric { width:100px;}
	.autocomplete { width:335px;}
}
// -----------------------------------------------------------------
#ecommerce-promo-form {
	#code-element {
		@include clearfix();
		input, button {
			float: left;
			margin-right: 8px;
		}
		input {width: auto;}
	}
	#fieldset-valueGroup {
		#type-label { display:none;}
		#value-element { float:left; width:100px; input{ width:90px;}}
		#type-element { float:left; width:100px;}
		dd { padding:0;}
	}
	#fieldset-productGroup, #fieldset-valueGroup {border:none; padding:0; margin:0;}
	.autoNumeric { width:100px;}
}

/* Categories */
// -----------------------------------------------------------------
#categories {
	#categories-element { padding: 10px 0 0;}
	.catrow { 
		.breadcrumb { margin-bottom: 10px;
			.last { font-weight: bold;}
		}
		.btn { margin: 7px 0 0 7px;}
	}
}
#categories-tree-content {
	padding: 15px;
	@include box-sizing(border-box);
	.categories-selector-submit { 
		text-align:center;
		button {margin: 0 2px;}
	}
	.tree-wrapper { 
		height:380px; 
		min-height: 370px; 
		-ms-overflow-x: hidden;
		overflow-x: hidden;
	}
	.nav { margin-bottom: 0;}
}
.tree-legend, .tree-icon { 
	span { font-size:14px; color:#555; margin-right:1px;}
	.icon-retweet:hover { color:#FFBB33;}
	.icon-plus:hover { color:#9C0;}
	.icon-edit:hover { color:#33B5E5;}
	.icon-remove:hover { color:#f44;}
	.icon-reorder:hover { color:#F80;}
	.icon-eye-open:hover { color:#09C;}
	.icon-eye-close { color:#c00}
	.icon-eye-close:hover { color:#93C;}
}
.tree-legend li, .categories.treeview div.row:hover { 
	.icon-retweet { color:#FFBB33;}
	.icon-plus { color:#9C0;}
	.icon-edit{ color:#33B5E5;}
	.icon-remove { color:#f44;}
	.icon-reorder{ color:#F80;}
	.icon-eye-open { color:#09C;}
	.icon-eye-close { color:#c00;}
}
.categories.treeview {
	a {line-height:16px;}
	a:hover { color:$accent;}
	a.category-name {display:block; float:left; min-width:1px; margin-right:10px; margin-bottom:5px;}
	a.cat-disabled { text-decoration:line-through;}
	li { white-space:normal;}
	li a { font-weight:bold; font-size:110%; color:$black;}
	li li a { font-weight:normal; font-size:100%; color:$gray;}
}
.list-legend { 
	padding:20px; background-color: #f5f5f5;
	@include border-radius($borderRadiusLarge);
	li {line-height:16px; margin: 6px 0; font-size: 14px;}
}

// Edit Product
// -----------------------------------------------------------------
#ecommerce-product-form {
	input#price, input#weight { width: auto;}
}
#settings-form {
	#analyticsCode, #headerPhone, 
	#senderStateCode, #senderZipCode, #orderPriceTax, 
	#deliveryHandlingUps, #deliveryHandlingFedEx, 
	#deliveryHandlingUsps, #deliveryHandlingManual {width: auto;}
}