JezK

Edit File: _checkout.scss

/**
 * Checkout
 */

.woocommerce-checkout {
	.col2-set {
		float: left;
		width: 66%;
		padding-right: 100px;

h2 {
			font-weight: 500;
			font-size: 20px;
			line-height: 29px;
			margin-top: 0;
			margin-bottom: 25px;
		}

}

.checkout-form-cols {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

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

.checkout-form-col {
		.woocommerce-info {
			background-color: #F5F5F5;
			color: var(--rz-text-color);
			font-size: 15px;
			font-weight: 500;
			margin-bottom: 0;

a {
				color: var(--rz-color-dark);
			}
		}

.woocommerce-form-login-toggle,
		.woocommerce-form-coupon-toggle {
			padding-bottom: 30px;
		}

form {
			border: 1px solid var(--rz-border-color);
			padding: 20px;

.woocommerce-button {
				margin-top: 20px;
				min-width: 200px;
			}
		}

.form-row {
			margin: 0 0 25px;
			label {
				display: block;
			}

.input-text {
				width: 100%;
			}
		}

.lost_password {
			margin-bottom: 0;
			font-weight: 500;
		}
	}

form.checkout {
		margin-top: 20px;

&:after {
			clear: both;
			content: "";
			display: block;
		}
		ul {
			list-style-type: none;
		}

h3 {
			font-weight: 500;
			font-size: 20px;
			line-height: 29px;
			margin-top: 0;
		}

.form-row {
			margin: 0 0 25px 0;

label {
				display: block;
				font-size: 15px;
				line-height: 22px;
				color: var(--rz-color-dark);
				margin-bottom: 5px;
			}

input[type="text"],
			textarea,
			input[type="tel"],
			input[type="email"],
			input[type="password"] {
				width: 100%;
			}

input.woocommerce-form__input-checkbox {
				width: auto;
			}

}

.woocommerce-terms-and-conditions-wrapper {
			label.woocommerce-form__label-for-checkbox span:before {
				top: 3px;
			}
		}

.woocommerce-account-fields {
			margin-top: 20px;
		}

}

.woocommerce-checkout-review-order {
		float: left;
		width: 34%;
		position: -webkit-sticky;
		position: sticky;
		top: 35px;

.woocommerce-shipping-totals {
			th {
				vertical-align: top;
			}

td {
				width: 45%;
				text-align: left;
			}

label {
				left: 0;
			}
		}
	}

.woocommerce-checkout-review-order-table {
		border: 1px solid var(--rz-border-color);
		border-collapse: separate;
		padding: 20px 30px;

.product-item {
            display: flex;
            align-items: center;

img {
                max-width: 50px;
                margin-right: 10px;
            }
        }
		th,
		td {
			background-color: transparent;
		}

thead {
			th {
				border-bottom: 1px solid #E2E2E2;
				padding: 0 0 10px 0;
			}
		}

tbody {
			tr {
				border: none;

&:first-child {
					td {
						padding-top: 20px;
					}
				}
			}

td {
				padding: 5px 0;
				font-size: 15px;
			}
		}

tfoot {

th {
				padding: 0 0 10px 0;
			}

td, th {
				padding: 20px 0 10px 0;
				font-size: 16px;
				font-weight: 500;
				border-bottom: 1px solid #E2E2E2;
				color: var(--rz-color-dark);
			}

td {
				text-align: right;
			}

.shipping-title {
				color: var(--rz-color-dark);
				font-size: 16px;
				font-weight: 500;
				padding: 0;
			}

.order-total {
				td, th {
					font-size: 18px;
					border: none;
					padding-bottom: 0;
				}

}
		}

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

.product-name {

strong {
				font-weight: 400;
			}
		}

.variation {
			color: var(--rz-text-color-gray);
			font-weight: 400;
			font-size: 15px;
			letter-spacing: 0;
			margin: 0;

dt {
				font-weight: 400;
			}

dd {
				margin: 0 0 5px;

&:last-child {
					margin: 0;
				}
			}

p {
				margin: 0;
			}
		}

@include razzi-input-radio();

input[type="radio"] + label {
			display: flex;
			justify-content: space-between;
			width: 100%;
		}

.woocommerce-shipping-totals {
			.select2-container {
				background-color: var(--rz-background-color-light);
			}
		}
	}

.woocommerce-shipping-methods label > .woocommerce-Price-amount {
        float: right;
    }

.woocommerce-checkout-payment {

@include razzi-input-radio();

.payment_methods {
			padding: 0;
			margin: 0 0 20px;

.wc_payment_method {
				border: 1px solid var(--rz-border-color);
				padding: 17px 20px;

&:not(:last-child) {
					border-bottom: none;
				}
			}

.payment_method_paypal {
				label {
					img {
						height: 25px;
						vertical-align: middle;
						margin-left: 5px;
					}

a {
						float: right;
					}
				}
			}
		}

label {
			font-size: 15px;
			color: var(--rz-text-color-gray);
			cursor: pointer;
		}

.place-order {
			width: 100%;
			padding: 0;

.form-row {
				width: 100%;
				padding: 0;
				margin: 0;

.woocommerce-form__label {
					font-size: 16px;
					color: var(--rz-text-color-gray);
				}
			}

button {
				width: inherit;
				margin-top: 20px;
			}
		}
	}

.woocommerce-order {
		.woocommerce-notice {
			font-size: 18px;
			color: var(--rz-color-dark);
		}

.woocommerce-order-overview {
			margin-bottom: 40px;
		}

.woocommerce-thankyou-order-details {
			display: none;
		}

> section {
			border: 1px solid var(--rz-border-color-gray);
			padding: 30px 40px 20px;
			margin-bottom: 20px;

> h2 {
				font-weight: 500;
				font-size: 20px;
				line-height: 29px;
				margin-top: 0;
			}

.woocommerce-column__title {
				font-size: 16px;
			}

table {
				margin: 0;
			}
		}

address {
			font-style: normal;
		}

.woocommerce-columns--addresses {
			display: flex;
			float: none;
			width: 100%;
			padding: 0;

> * {
				flex: 0 1 33%;
			}

.woocommerce-column__title {
				font-weight: 500;
				font-size: 16px;
				line-height: 23px;
				margin-top: 0;
				color: var(--rz-color-dark);
			}

address {
				font-size: 16px;
				line-height: 24px;
				font-style: normal;
			}

p {
				margin: 10px 0;
			}
		}
	}
}

@media screen and (min-width: 768px) {
	.col2-set {
		.form-row-first {
			float: left;
			margin-right: $columns__margin;
			padding-right: 15px;
		}

.form-row-last {
			float: right;
			margin-right: 0;
			padding-left: 15px;
		}

.form-row-first,
		.form-row-last {
			@include column-width(2);
		}
	}
}

.woocommerce-form-track-order {
	font-weight: 400;
	text-align: center;
	font-size: 16px;

.form-row {
		text-align: left;

label {
			display: block;
			margin-bottom: 5px;
		}

.input-text {
			width: 100%;
		}

.button {
			width: 100%;
		}

}

.woocommerce-checkout .wcf-embed-checkout-form label.woocommerce-form__label-for-checkbox input,
.woocommerce-checkout .wcf-embed-checkout-form .woocommerce-checkout-payment input[type="radio"]  {
	display: none !important;
}

.woocommerce-checkout .wcf-embed-checkout-form  .woocommerce-checkout-payment input[type="radio"] + label {
	padding-left: 33px !important;
}

.wp-block-woocommerce-checkout {
	h2 {
		font-weight: 500;
	}

.wc-block-components-checkout-place-order-button {
		line-height: 30px;
		width: auto;
	}

.wc-block-components-form .wc-block-components-text-input input[type=email], .wc-block-components-form .wc-block-components-text-input input[type=number], .wc-block-components-form .wc-block-components-text-input input[type=tel], .wc-block-components-form .wc-block-components-text-input input[type=text], .wc-block-components-form .wc-block-components-text-input input[type=url], .wc-block-components-text-input input[type=email], .wc-block-components-text-input input[type=number], .wc-block-components-text-input input[type=tel], .wc-block-components-text-input input[type=text], .wc-block-components-text-input input[type=url],
	.wc-block-components-textarea {
		color: var(--rz-color-dark);
		border: 1px solid var(--rz-border-color);

&:focus {
			color: var(--rz-color-dark);
			border-color: var(--rz-color-darker);
			outline: none;
		}
	}

.wc-block-cart-item__prices {
		@include font-size(14/16);
		color: #1d2128;
		font-weight: 500;
	}

.wc-block-components-product-price__value.is-discounted {
		background-color: transparent;
	}

.wc-block-components-product-metadata__description {
		display: none;
	}

.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
		color: #1d2128;
	}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
	.wc-block-components-totals-item__value {
		font-weight: 500;
	}

.wc-block-components-sidebar div.wc-block-components-totals-item {
		padding-left: 0;
		padding-right: 0;
	}

.wc-block-components-radio-control .wc-block-components-radio-control__option .wc-block-components-radio-control__input {
		left: 16px;
	}

.wc-block-components-checkbox label {
		font-size: 16px;
	}

.wc-block-components-form .wc-block-components-checkout-step {
		margin-bottom: 30px;
	}

.wc-block-checkout__terms.wc-block-checkout__terms--with-separator {
		padding-top: 30px;
		margin-bottom: 30px;
	}

.wc-block-components-form .wc-block-checkout__order-notes.wc-block-components-checkout-step {
		margin-bottom: 30px;
	}

.is-large .wp-block-woocommerce-checkout-order-summary-block {
		padding: 14px 30px 14px 30px;
	}

.wc-block-components-totals-wrapper {
		padding: 16px 0;
	}

.is-large .wc-block-components-sidebar .wc-block-components-panel,
	.is-large .wc-block-components-sidebar .wc-block-components-totals-coupon,
	.is-large .wc-block-components-sidebar .wc-block-components-totals-item {
		padding-left: 0;
		padding-right: 0;
	}

.wc-block-components-order-summary .wc-block-components-order-summary-item {
		padding-top: 0;
		padding-bottom: 16px;
	}

.wc-block-components-order-summary .wc-block-components-order-summary-item__image {
		padding-bottom: 0;
		margin-top: 0;
	}

.is-medium .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper, .is-mobile .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper, .is-small .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper {
		padding-left: 0;
		padding-right: 0;
	}
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:focus {
	outline: none;
}