/* checkout form */
/*
form.checkout.woocommerce-checkout
	div#customer_details
		div.col-1
			div.woocommerce-billing-fields
				h3
				div
					p
						label
						span
							input
			div.woocommerce-account-fields
		div.col-2
			div.woocommerce-shipping-fields
				h3
			div.woocommerce-additional-fields

	div#order_review
		table.shop_table woocommerce-checkout-review-order-table
		div#payment
			ul
			div

	h3

	div.order_review


*/
form.checkout.woocommerce-checkout {
	display: block;
	margin: 1rem 0;
}

form.checkout.woocommerce-checkout > h3 {
	margin: 1rem 0;
	color: var(--mainColor);
}

form.checkout.woocommerce-checkout div#customer_details {
	display: flex;
	gap: 2%;
}

form.checkout.woocommerce-checkout div#customer_details > div {
	width: 100%;
}

form.checkout.woocommerce-checkout div#customer_details > div > div > h3 {
	margin: 2rem 0;
	color: var(--mainColor);
}

form.checkout.woocommerce-checkout div#customer_details > div p > label {
	display: block;
}

form.checkout.woocommerce-checkout div#customer_details > div p > label > abbr {
	color: red;
}

form.checkout.woocommerce-checkout div#customer_details > div p > span > input {
	display: block;
	width: 100%;
	margin: 0.3rem 0 1rem;
	border: solid thin var(--lightGray);
	color: var(--darkGray);
}

form.checkout.woocommerce-checkout div#customer_details > div p > span > textarea#order_comments {
	width: 100%;
	height: 5rem;
	border: solid thin var(--lightGray);
	font-size: 1rem;
	color: var(--darkGray);
}

form.checkout.woocommerce-checkout div#customer_details > div p {
	font-size: 1rem;
	margin: 0.5rem 0 1rem;
}

/* order review  */
form.checkout.woocommerce-checkout > div#order_review {
	width: 100%;
}

form.checkout.woocommerce-checkout > div#order_review > table {
	border: var(--lightGray);
	width: fit-content;
	width: 100%;
	max-width: 720px;
	margin: 1rem 0;
}

form.checkout.woocommerce-checkout > div#order_review > table th,
form.checkout.woocommerce-checkout > div#order_review > table td {
	padding: 0.7rem;
}

form.checkout.woocommerce-checkout > div#order_review > table > thead {
	background-color: var(--lightGray);
}

form.checkout.woocommerce-checkout > div#order_review > table > tfoot th {
	text-align: left;
}

/* payment  */
form.checkout.woocommerce-checkout > div#order_review > div#payment > ul > li > label {
	font-weight: bold;
}

form.checkout.woocommerce-checkout > div > div > div > button {
	min-width: fit-content;
	width: 100%;
	max-width: 20rem;
}


/* media */
@media (max-width: 720px) {
	form.checkout.woocommerce-checkout > div#customer_details {
        flex-wrap: wrap;
    }
}