// Woo - Checkout
// Extracted from pp-woocommerce.css so a page using only this widget does not
// have to load the styles for every other WooCommerce widget. The values are
// carried over unchanged; vendor prefixes are left to autoprefixer.

// WooCommerce owns #customer_details and #place_order, so the underscores in
// those ids are not ours to rename.
/* stylelint-disable selector-id-pattern */

.elementor-widget-pp-woo-checkout {
	background-color: transparent;
	font-size: 14px;
	line-height: 21px;
	color: #818a91;

	a {
		color: var(--links-normal-color);

		&:hover {
			color: var(--links-hover-color);
		}
	}

	.woocommerce {

		// Every section box shares one set of custom properties, so the column
		// and per-section style controls can override them on a subtree.
		.pp-woocommerce-login-section,
		.pp-checkout__order_review,
		.pp-coupon-box,
		.woocommerce-checkout #payment,
		#customer_details .col-1,
		.shipping_address,
		.woocommerce-additional-fields {
			background: var(--sections-background, #fff);
			border-radius: var(--sections-border-radius, 3px);
			padding: var(--sections-padding, 26px 30px);
			margin-bottom: var(--sections-margin, 30px);
			border-style: var(--sections-border-type, none);
			border-color: var(--sections-border-color, #D4D4D4);
			border-width: var(--sections-border-width, 1px);
			display: block;
		}

		.form-row {

			.input-text,
			select,
			textarea {
				color: var(--forms-fields-normal-color, #818a91);
				background-color: #f7f7f7;
				border-radius: var(--forms-fields-border-radius, 0);
				padding: var(--forms-fields-padding, 16px);
				font-size: 14px;
				border: none;
				font-weight: 400;
			}

			label {
				color: var(--forms-labels-color, #818a91);
				margin-bottom: var(--forms-label-spacing, 3px);
			}
		}

		h3 {
			font-size: 14px;
			font-weight: 700;
			margin-top: 0;
			margin-bottom: var(--sections-title-spacing, 30px);
			color: var(--sections-title-color, #000);
		}

		// WooCommerce sizes .col2-set for its own two column layout. The widget
		// lays the columns out with grid instead, so the width is reset here.
		// pp-woocommerce.css sets the same thing globally for the other widgets.
		.col2-set {
			width: 100%;
		}

		// The order review table. Carried over from the unscoped rule in
		// pp-woocommerce.css, which this widget no longer loads.
		table.shop_table {
			border: 0 solid;
			border-collapse: collapse;
			margin: 0;
			overflow: visible;
		}

		// Likewise for the button transition, so the purchase and coupon buttons
		// keep animating on hover.
		a.button,
		button.button,
		input.button,
		#respond input#submit,
		#content input.button {
			transition: 0.3s ease-in-out;
		}
	}

	.woocommerce-checkout {

		.form-row > span {
			font-weight: 400;
			font-size: 14px;
			margin-bottom: 3px;
			color: #818a91;
		}

		.col2-set .col-1,
		.col2-set .col-2 {
			width: auto;
			float: none;
		}

		#payment {

			.payment_methods {
				border-bottom: none;
				padding: 0;
			}

			// A flex column, so align-items is what the Purchase Button
			// alignment control drives, including stretching it for Justify.
			.place-order {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				padding: 0;
				margin-bottom: 0;
				align-items: var(--place-order-title-alignment, stretch);
			}
		}
	}

	.select2-container--default .select2-selection--single {
		color: var(--forms-fields-normal-color, #818a91);
		background-color: #f7f7f7;
		border-radius: var(--forms-fields-border-radius, 0);
		border: none;
		height: auto;

		.select2-selection__rendered {
			color: var(--forms-fields-normal-color, #818a91);
			line-height: 45px;
			padding-left: 1rem;
			padding-right: 1rem;
		}
	}

	.woocommerce-form-coupon .button {
		padding: 1rem;
	}

	.pp-checkout-container {
		display: grid;
		flex-wrap: wrap;
		grid-template-columns: var(--first-column-width, 50%) auto;
		align-items: stretch;
		grid-column-gap: var(--checkout-columns-gap, 30px);
	}

	&.pp-checkout-layout-1 .pp-checkout-container {
		grid-template-columns: auto;
	}
}

// The checkout form and the customer detail columns float inside WooCommerce's
// own .woocommerce div, so that is the element that has to contain them.
.pp-woo-checkout .woocommerce::after {
	content: "";
	display: table;
	clear: both;
}

// Float fallbacks for the one column layout, and for the customer detail
// columns inside the grid. These are matched on the widget wrapper class rather
// than the Elementor widget class, so they are kept at the top level.
.pp-woo-checkout-col-2 .woocommerce .col2-set div[class|="col"] {
	float: left;
	width: 100%;
}

.pp-woo-checkout-col-1 .woocommerce-checkout {
	float: left;
	width: 100%;
}

.pp-woo-checkout-col-1 .woocommerce .col2-set,
.woocommerce-page.woocommerce-checkout .pp-woo-checkout-col-1 .woocommerce .col2-set,
.pp-woo-checkout-col-1 .woocommerce #customer_details.col2-set,
.woocommerce-page.woocommerce-checkout .pp-woo-checkout-col-1 .woocommerce #customer_details.col2-set,
.woocommerce-page.woocommerce-checkout .woocommerce .pp-woo-checkout-col-1 .woocommerce-checkout-review-order {
	float: left;
	margin: 0;
	width: 100%;
}

.pp-woo-checkout-button-full #place_order {
	margin-left: 0;
	margin-right: 0;
	text-align: center;
	width: 100%;
}

@media (max-width: 1024px) {

	.elementor-widget-pp-woo-checkout.pp-woo-cols-stack-tablet .pp-checkout-container {
		grid-template-columns: 100%;
	}
}

@media (max-width: 767px) {

	.elementor-widget-pp-woo-checkout.pp-woo-cols-stack-mobile .pp-checkout-container {
		grid-template-columns: 100%;
	}

	.pp-woo-checkout .woocommerce-checkout .form-row-first,
	.pp-woo-checkout .woocommerce-checkout .form-row-last {
		width: 100%;
	}
}
