@import '../css/blocks/woocommerce-buttons.css';


.woocommerce-page.woocommerce-checkout {
	.entry-content {
		margin-left: auto;
		margin-right: auto;
	}

	.wp-block-post-title,
	main .woocommerce,
	.woocommerce {
		max-width: var(--wp--style--global--wide-size);
	}

	.woocommerce {

		& .checkout {
			.form-row,
			.woocommerce-input-wrapper {
				margin: 0;
				padding-top: 0;
				padding-bottom: 0;
				padding-left: 0;
				padding-right: 0;
			}

			h3 {
				color: var(--wp--preset--color--custom-varm-gr-900-title);
			}

			.woocommerce-shipping-fields {
				h3:first-of-type {
					margin-top: 0;
				}
			}

			.col2-set {
				display: grid;
				grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.9fr);
				align-items: start;
				gap: var(--wp--preset--spacing--50);
				width: 100%;

				&::before,
				&::after {
					content: none;
					display: none;
				}

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

				.col-1 {
					h4 {
						margin-block-start: var(--wp--preset--spacing--60);
						margin-block-end: 0;
						font-weight: 600;
						font-size: var(--wp--preset--font-size--custom-3);
						line-height: 32px;
						color: var(--wp--preset--color--custom-varm-gr-900-title);
					}

					.first-row {
						h4 {
							margin-block-start: 0;
						}
					}
				}
				.col-2 {
					position: sticky;
					top: calc(var(--wp--preset--spacing--50) + var(--wp-admin--admin-bar--height, 0px));
					float: none;
					width: auto;
					min-width: 0;
					color: #1B1B1D;

					.woocommerce-terms-and-conditions-wrapper {
						margin-block-end: var(--wp--preset--spacing--40);
					}

					#order_review_heading {
						margin-block-start: 0;
						margin-block-end: var(--wp--preset--spacing--40);
						color: #1B1B1D;
						font-size: var(--wp--preset--font-size--custom-10);
						font-weight: 600;
						line-height: 1.3;
					}

					#order_review,
					.woocommerce-checkout-review-order {
						margin: 0;
						padding: 20px 24px;
						background: #DDE7ED;
						border: none;
						border-radius: 16px;
						overflow: hidden;
					}

					.shop_table.woocommerce-checkout-review-order-table {
						width: 100%;
						margin: 0;
						border: none;
						border-collapse: collapse;
						border-radius: 0;
						background: transparent;
						color: #1B1B1D;
						font-size: 1rem;

						th,
						td {
							padding: 12px 0;
							border: none;
							border-top: 1px solid #fff;
							background: transparent;
							vertical-align: middle;
							line-height: 1.5;
							font-weight: 400;
							color: #1B1B1D;
						}

						thead th {
							padding-top: 0;
							border-top: none;
							color: #5F6163;
							font-size: 0.875rem;
							font-weight: 600;
						}

						tbody tr:first-child {

							th,
							td {
								border-top: 1px solid #fff;
							}
						}

						.product-name {
							font-weight: 600;
							text-align: start;
						}

						.product-quantity {
							font-weight: 400;
							color: #5F6163;
						}

						.variation,
						.wc-item-meta {
							margin: 8px 0 0;
							padding: 0;
							list-style: none;
							color: #5F6163;
							font-size: 0.875rem;
							font-weight: 400;
						}

						.product-total {
							text-align: end;
							white-space: nowrap;
						}

						tfoot th {
							color: #5F6163;
							font-weight: 400;
							text-align: start;
						}

						tfoot td {
							text-align: end;
						}

						.cart-subtotal td,
						.order-total td {
							text-align: end;
						}

						.order-total th,
						.order-total td {
							color: #1B1B1D;
							font-size: var(--wp--preset--font-size--custom-5);
							font-weight: 600;
						}

						.woocommerce-remove-coupon {
							margin-left: 8px;
							color: #1B1B1D;
							font-size: 0.875rem;
							font-weight: 400;
						}
					}

					#shipping_method,
					.woocommerce-shipping-methods {
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						gap: 8px;
						margin: 0;
						padding: 0;
						list-style: none;

						li {
							display: flex;
							flex-wrap: wrap;
							align-items: center;
							justify-content: flex-end;
							gap: 8px;
							margin: 0;
							text-align: end;

							input {
								margin: 0;
							}

							label {
								margin: 0;
								color: #1B1B1D;
								font-size: 1rem;
								font-weight: 400;
								line-height: 1.4;
							}

							span,
							bdi {
								color: #1B1B1D;
								font-size: 1rem;
							}
						}
					}

					.woocommerce-shipping-destination,
					.woocommerce-shipping-calculator {
						margin-top: 8px;
						color: #5F6163;
						font-size: 0.875rem;
						font-weight: 400;
						text-align: end;
					}
				}
			}

			.col-2 #payment,
			#payment {
				margin-block-start: var(--wp--preset--spacing--40);
				padding: 0;
				background: #DDE7ED;
				border: none;
				border-radius: 16px;
				overflow: hidden;

				ul.payment_methods {
					margin: 0;
					padding: 20px 24px;
					border: none;
					list-style: none;

					li {
						display: grid;
						grid-template-columns: auto minmax(0, 1fr);
						align-items: center;
						column-gap: 8px;
						margin: 0;
						padding: 12px 0;
						border-top: 1px solid #fff;
						line-height: 1.4;

						&:first-child {
							padding-top: 0;
							border-top: none;
						}

						> input {
							grid-column: 1;
							grid-row: 1;
							margin: 0;
							z-index: 0;
						}

						> label {
							grid-column: 1 / -1;
							grid-row: 1;
							display: flex;
							flex-wrap: nowrap;
							align-items: center;
							gap: 8px;
							width: 100%;
							margin: 0;
							padding-inline-start: 1.75rem;
							color: #1B1B1D;
							font-size: 1rem;
							font-weight: 400;
							cursor: pointer;
							box-sizing: border-box;
						}

						> .payment_box {
							grid-column: 1 / -1;
						}

						.wc-payment-method-icons {
							display: flex;
							flex: 0 0 auto;
							align-items: center;
							gap: 4px;
							margin-inline-start: auto;
						}

						img {
							display: block;
							float: none;
							flex: 0 0 auto;
							width: auto;
							min-width: 24px;
							max-width: none;
							height: 24px;
							max-height: 24px;
							margin: 0;
							margin-inline-start: auto;
							padding: 0;
							vertical-align: middle;
							object-fit: contain;
						}

						img + img,
						.wc-payment-method-icons img {
							margin-inline-start: 0;
						}
					}
				}

				div.payment_box {
					margin: 12px 0 0;
					padding: 16px;
					background: #fff;
					border: none;
					border-radius: 12px;
					color: #1B1B1D;
					font-size: 0.875rem;
					line-height: 1.5;

					&::before {
						display: none;
					}

					p:first-child {
						margin-top: 0;
					}

					p:last-child {
						margin-bottom: 0;
					}
				}

				.place-order {
					padding: 20px 24px;

					.woocommerce-terms-and-conditions-wrapper {
						margin-block-end: var(--wp--preset--spacing--40);
						font-size: var(--wp--preset--font-size--custom-1);
						color: #1B1B1D;

						.woocommerce-terms-and-conditions-checkbox-text {
							font-size: 1rem;
						}
					}

					#place_order {
						width: 100%;
					}
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.woocommerce-page.woocommerce-checkout {
		.woocommerce {
			& .checkout {
				.col2-set {
					grid-template-columns: 1fr;

					.col-2 {
						position: static;
					}
				}
			}
		}
	}
}