@import "../settings";

.woocommerce-checkout {

	.entry-content .woocommerce {
		max-width: 1275px;
		position: relative;
		margin: 0 auto;
	}

	.hmu-hook#woocommerce_checkout_before_order_review {
		width: 37.8%;
	    float: right;
	    margin-top: 45px;

		@media #{$large-down} {
			float: none;
			width: 100%;
		}
	}

	.checkout_coupon_box {

		text-align: center;

		> .row {
			margin: 0 7px;
			display: flex;
			flex-direction: column;

			@media #{$large-down} {
				margin: 0;
			}

			.woocommerce-error,
			.woocommerce-notice,
			.woocommerce-info,
			.woocommerce-message {
				margin-top: 45px;
				margin-bottom: -45px;
				padding-bottom: 1rem;
				order: 2;

				@media #{$large-down} {
					margin-top: 30px;
					margin-bottom: 0;
				}
			}

			form.checkout_coupon {
				order: 1;
				border: none;
				text-align: center;
				margin: 0;

				@media #{$large-down} {
					padding: 20px 0;
				}

				.blockUI.blockOverlay::before {
					margin-top: -0.35em;
				}

				#coupon_code {
					transition: all .3s;
					margin: 0;
					font-size: 13px;
					width: 100%;
					height: 49px;
					display: block;
					background: none;
					padding: 13px 90px 10px 55px;
					border: 1px dashed;

					&::-webkit-input-placeholder {
						font-weight: 600;
					}

					&::-moz-placeholder {
						font-weight: 600;
					}

					&:-ms-input-placeholder {
						font-weight: 600;
					}
				}

				input[type="submit"],
				button[type="submit"] {
					position: absolute;
					right: 0px;
					background: none !important;
					font-size: 0 !important;
					min-width: 0;
					top: 0px;
					z-index: 99999;
					height: 50px;
					transition: all .3s ease;
					padding: 15px 1rem !important;
					width: 70px !important;

					&:after {
						content: "\e902";
						font-family: 'Shopkeeper-Icon-Font';
						position: absolute;
						right: 17px;
						font-size: 20px;
						opacity: 1;
						transition: all .3s ease;
					}

					&:hover:after {
						opacity: .7;
					}

					&:active,
					&:focus {
						border: none;
						outline: none;
					}
				}

				.checkout_coupon_inner {
					display: block;
					width: 39%;
					min-width: 470px;
					margin: 0 auto;
					position: relative;

					@media #{$medium-down} {
						width: 100%;
						min-width: 100%;
					}

					&:before {
						content: "\e909";
						font-family: 'Shopkeeper-Icon-Font';
						position: absolute;
						left: 17px;
						top: 7px;
						font-size: 24px;
						line-height: 36px;
					}
				}
			}
		}
	}

	.checkout_login {
		form.login {
			border: 0;
			margin: 0 auto;
			padding: 0;
			width: 100%;

			@media #{$medium-up} {
				width: 500px;
				padding: 20px 20px 14px;
			}

			p:first-child {
				font-size: 13px;
				margin-bottom: 10px;
			}

			button[type="submit"] {
			    width: 100%;
				margin-bottom: 15px;
				margin-top: 12px;
			}
		}
	}

	.checkout_login form.login,
	.checkout_coupon_box form.checkout_coupon {
		opacity: 0;
		visibility: hidden;
		transition: opacity .85s ease, visibility .85s ease;
		-webkit-transform: translateZ(0);

		&.fade {
			opacity: 1;
			visibility: visible;
			-webkit-transform: translateZ(0);
		}
	}

	.shopkeeper_checkout_coupon,
	.shopkeeper_checkout_login {
		margin: 10px auto;
		display: inline-block;
		font-weight: 600;

		a.showcoupon,
		a.showlogin {
			text-transform: uppercase;
			font-weight: 600;
			font-size: 13px;
			margin-left: 8px;

			@media #{$xmedium-down} {
				display: block;
			}
		}
	}

	.shopkeeper_checkout_login {
		&:before {
			font-family: 'Shopkeeper-Icon-Font';
			content: "\e90a";
			font-size: 20px;
			padding-right: 10px;
			display: inline-block;
			vertical-align: middle;
			font-weight: normal;
		    top: -2px;
	    	position: relative;
		}

		+ form.woocommerce-form-login {
			p.lost_password {
				margin-top: 0;

				a {
					font-size: 13px;
					font-weight: 600;
					text-transform: uppercase;
				}
			}
		}
	}

	.shopkeeper_checkout_coupon {
		&:before {
			font-family: 'Shopkeeper-Icon-Font';
			content: "\e909";
			font-size: 24px;
			padding-right: 10px;
			display: inline-block;
			vertical-align: middle;
			font-weight: normal;
		    position: relative;
	    	top: -1px;
		}
	}

	form.checkout {

		margin-top: 45px;

		h3 {
			text-transform: uppercase;
		}

		&:after {
			content: '';
			display: block;
			clear: both;
		}

		#ship-to-different-address {
			margin-bottom: 0;
		}

		.button#place_order {
			float: none;
			width: 100%;
		}

		.col2-set {

			@media #{$large-up} {
				width: 62.2% !important;
				float: left;
				margin-top: 45px;
				padding: 0 90px 0 10px;
			}

			.col-1,
			.col-2 {
				clear: both;
				display: block;
				float: none;
				width: 100%;
			}

			.col-2 {
				margin-top: 30px;
			}
		}

		.woocommerce-billing-fields {

		}

		.woocommerce-account-fields {
			.form-row {
				span {
					font-size: 13px;
					text-transform: uppercase;
				}

				input[type=checkbox] {
					top: 1px;

					&:after {
						display: inline-block;
					}

					&:before {
						top: -4px;
					}
				}
			}
		}

		.woocommerce-shipping-fields {
			margin-bottom: 30px;
		}

		.woocommerce-additional-fields {
			#order_comments_field textarea {
				min-height: 100px;
				height: 100px
			}
		}

		h3#order_review_heading {
			display: none !important;
		}

		.woocommerce-checkout-review-order {
			background: rgba(84,84,84,0.05);
			padding: 20px 40px 40px;
			position: relative;

			@media #{$large-up} {
				width: 37.8%;
				float: right;
				margin-top: 45px;
			}

			@media #{$large-down} {
				margin-top: 50px;
				margin-left: calc( -100vw / 2 + 100% / 2);
				margin-right: calc( -100vw / 2 + 100% / 2);
				max-width: 100vw;
				padding: 20px 68px 50px;
			}

			@media #{$medium-down} {
				padding: 10px 38px 30px;
			}

			&:before {
				position: absolute;
				top: -10px;
				left: 0;
				content: "";
				display: block;
				height: 10px;
				width: 100%;
				background-color: transparent;
				background-size: 20px 20px;
				background-position: 0 10px, 40px 40px;
				background-image: radial-gradient(closest-side, transparent 9px, rgba(84,84,84,0.05) 100%);
			}

			&:after {
				position: absolute;
				bottom: -10px;
				left: 0;
				transform: rotate(180deg);
				content: "";
				display: block;
				height: 10px;
				width: 100%;
				background-color: transparent;
				background-size: 20px 20px;
				background-position: 0 10px, 40px 40px;
				background-image: radial-gradient(closest-side, transparent 9px, rgba(84,84,84,0.05) 100%);
			}

			.cart_item {
				.wc-gzd-product-name-left,
				.wc-gzd-product-name-right {
					float: none;
					display: inline-block;
					margin-left: -4px;
					vertical-align: middle;
				}

				.wc-gzd-product-name-right {
					width: 80%;
					font-weight: 600;
					font-size: 13px;
				}

				.product-desc {
					font-weight: normal;
				}
			}

			table.woocommerce-checkout-review-order-table {
				border-collapse: collapse;

				tfoot {
					tr {
						&.order-total strong .amount {
							font-size: 1.875rem;
							font-weight: 600;
						}

						&.order-total td > small {
							display: block;
							margin-top: 5px;
						}

						&:first-child {
							th, td {
								padding-top: 40px;
							}
						}
					}
				}

				td {
					line-height: 1.35;
					padding: 10px 0 10px 0;
				}

				th {
					text-transform: uppercase;
					font-weight: 600;
					line-height: 1.4;
					font-size: 13px!important;
				}

				thead,
				tfoot {
					td, th {
						border: none;
						vertical-align: top;
					}
				}

				.product-name {
					//font-weight: 600;
					font-size: 13px;
					width: 55%;

					span {
					    padding-right: 30px;
					}
				}

				.cart-subtotal {
					th, td {
						border-top: 1px solid;
					}
				}

				#shipping_method {
					li {
						padding-left: 20px;
					}
				}

				.product-total {
					text-align: right;
				}

				ul#shipping_method {
					li {
						margin: 0 0 7px;
						text-indent: -22px;
						list-style: none outside;
					}
				}
			}

			.input-checkbox {
				display: inline-block;
				vertical-align: initial;
				margin-top: 0;
			}
		}
	}
}
