/*------------------------------------------------------------------
Woo Multi-Step Checkout
-------------------------------------------------------------------*/

// Configuration
@import "../config";

// Mixins
@import "../mixins";

#dpr-checkout-timeline {
	margin-bottom: 40px;

	li {
		float: left;
    	width: 33.33%;
	}

	&.step-4 li {
    	width: 25%;
	}

	.timeline-wrapper {
	    position: relative;
	    display: block;
	    padding: 10px 15px;
	    background-color: #f0f0f0;
	    color: $color-2;
	    font-size: 15px;
	    line-height: 40px;
	    @include transition( all .1s ease );
		margin-right:2px;
	}

	.active .timeline-wrapper {
	    background-color: $color-5;
	    color: $color-1;
		
	}

	.timeline-step {
	    display: inline-block;
	    font-size: 20px;
	    text-align: center;
	    width: 34px;
		margin-right: 5px;
	    height: 34px;
	    line-height: 34px;
	   	text-align:center;
	    background-color: rgba(0,0,0,0.2);
	    color: rgba(255,255,255,0.85);
		font-weight:900;
	    border-radius: 50%;
	}

	.timeline-label {
	    font-weight: 600;
	}

	&.arrow {
	padding-left:20px;
		li {
	    	padding-right: 50px;
		}

		.timeline-wrapper {
			&:before,
			&:after {
			    content: '';
			    position: absolute;
			    top: 0;
			    width: 0;
			    height: 0;
		    	@include transition( all .1s ease );
			}

		    &:before {
			    left: -20px;
			    border-top: 30px solid #f0f0f0;
			    border-bottom: 30px solid #f0f0f0;
			    border-left: 20px solid transparent;
			}

		    &:after {
			    right: -20px;
			    border-top: 30px solid transparent;
			    border-bottom: 30px solid transparent;
			    border-left: 20px solid #f0f0f0;
			    border-right-color: #f0f0f0;
			}
		}

		.active .timeline-wrapper {
		    &:before {
			    border-top-color: $color-5;
			    border-bottom-color: $color-5;
			}

		    &:after {
			    border-left-color: $color-5;
			    border-right-color: $color-5;
			}
		}
	}

	&.square {
		li {
	    	text-align: center;
		}
	}
}

#checkout-wrapper {
	#customer_shipping_details,
	#order_review,
	#customer_billing_details.show-login-reminder.not-logged-in,
	#checkout_coupon {
	    display: none;
	}

	#checkout_coupon,
	#checkout_login,
	form.checkout {
	    margin: 0 auto;
	}

	#order_review {
	    margin: 0 auto;
	}

	form.checkout {
		display: block;

		#billing_phone_field,
		#billing_email_field {
		    width: 48%;
		    clear: none;
		}

		#billing_phone_field {
			float: left;
		}

		#billing_email_field {
			float: right;
		}

	   	#order_review {
	    	float: none;
    		width: 100%;
	    }
	}

	form.login {
	    margin-bottom: 0;
	}

	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper {
		&:after {
			content: '';
		    display: block;
		    visibility: hidden;
		    clear: both;
		    zoom: 1;
		    height: 0;
		}
	}

	#form_actions {
		display: inline-block;
	    width: 100%;
	    margin-top: 35px;

	    p.form-row.notes {
	    	margin: 0;
	    }

	    a {
	    	float: left;
	    	font-size: 12px;
		    font-weight: 600;
		    padding-bottom: 1px;
		    border-bottom: 2px solid;
		    margin-top: 6px;
		    text-transform: uppercase;
		    letter-spacing: 0.6px;

		    i {
		    	font-size: 16px;
    			margin-right: 5px;
		    }
	    }

	    .buttons {
	    	float: right;

	    	input {
				border:none;
				&.prev {
					display: none;
				}

	    		&.next {
	    			margin-left: 10px;
	    		}
	    	}
	    }
	}
}
.woocommerce-billing-fields h3 , .woocommerce-additional-fields h3 {
	font-size:22px;
}

/* Responsive */
@media only screen and (max-width: 959px) {
	#dpr-checkout-timeline {
		li {
			padding: 0 !important;
			margin-bottom: 15px;
		}

		li,
		&.step-4 li {
			float: none;
    		width: 100%;
		}
	}
}