/* -----------------------------------------------------------------------------
   Cart and checkout.

   WooCommerce ships these as bare tables. On a shop selling one or two digital
   licences at a time that reads as a spreadsheet, so they are restyled into
   cards with the totals and the pay button given the weight they deserve.
   -------------------------------------------------------------------------- */

/* Cart ---------------------------------------------------------------------- */

.woocommerce-cart .l4u-main,
.woocommerce-checkout .l4u-main {
	background: var(--l4u-surface);
}

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
	display: grid;
	gap: clamp(1rem, 3vw, 2rem);
	align-items: start;
}

@media (min-width: 1000px) {
	.woocommerce-cart .woocommerce {
		grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	}

	/*
	 * WooCommerce prints a notices wrapper as the first child. Left alone it claims the
	 * first cell, pushing the cart to the right column and the totals onto a second row.
	 * Place all three explicitly instead of relying on source order.
	 */
	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.woocommerce-cart .woocommerce > .woocommerce-cart-form {
		grid-column: 1;
		grid-row: 2;
	}

	.woocommerce-cart .woocommerce > .cart-collaterals {
		grid-column: 2;
		grid-row: 2;
	}
}

/* WooCommerce floats the totals block; inside a grid cell that only makes it narrow. */
.cart-collaterals,
.cart-collaterals .cart_totals {
	width: 100%;
	float: none;
}

.woocommerce table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--l4u-white);
	overflow: hidden;
	box-shadow: 0 1px 2px rgb(0 0 0 / .05);
}

.woocommerce table.shop_table th {
	padding: 1rem 1.25rem;
	background: var(--l4u-surface);
	color: var(--l4u-black);
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-align: start;
	border: 0;
}

.woocommerce table.shop_table td {
	padding: 1.15rem 1.25rem;
	border: 0;
	border-block-start: 1px solid var(--l4u-border);
	vertical-align: middle;
}

.woocommerce table.cart img {
	width: 72px;
	height: auto;
	border-radius: var(--l4u-radius);
	mix-blend-mode: multiply;
}

.woocommerce table.cart .product-name a {
	color: var(--l4u-black);
	font-weight: 500;
	text-decoration: none;
}

.woocommerce table.cart .product-name a:hover {
	color: var(--l4u-blue);
}

.woocommerce table.cart .product-price,
.woocommerce table.cart .product-subtotal {
	font-weight: 600;
	white-space: nowrap;
}

.woocommerce table.cart td.product-remove {
	width: 2.5rem;
	padding-inline-end: 0;
}

.woocommerce a.remove {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--l4u-surface);
	color: var(--l4u-muted) !important;
	font-size: 1.1rem;
	line-height: 1;
	text-decoration: none;
}

.woocommerce a.remove:hover {
	background: #d62828;
	color: var(--l4u-white) !important;
}

.woocommerce table.cart td.actions {
	padding: 1rem 1.25rem;
	background: var(--l4u-surface);
}

.woocommerce .quantity input.qty {
	width: 3.5rem;
	padding: .5rem .25rem;
	text-align: center;
	font: inherit;
	border: 1px solid var(--l4u-border);
	border-radius: var(--l4u-radius);
	background: var(--l4u-white);
}

/* Coupon -------------------------------------------------------------------- */

.woocommerce table.cart td.actions .coupon {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	float: none;
}

.woocommerce table.cart td.actions .coupon input[type="text"] {
	flex: 1 1 12rem;
	min-width: 0;
	padding: .65rem .85rem;
	font: inherit;
	border: 1px solid var(--l4u-border);
	border-radius: var(--l4u-radius);
	background: var(--l4u-white);
}

.woocommerce table.cart td.actions > .button {
	float: none;
	margin-block-start: .75rem;
}

/* Totals -------------------------------------------------------------------- */

.cart_totals,
.woocommerce-checkout-review-order {
	position: sticky;
	inset-block-start: 6rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--l4u-white);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgb(0 0 0 / .05);
}

.cart_totals h2,
.woocommerce-checkout-review-order h3 {
	margin-block-start: 0;
	font-size: 1.15rem;
}

.cart_totals table.shop_table {
	box-shadow: none;
	border-radius: 0;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	padding-inline: 0;
	background: transparent;
	text-transform: none;
	font-size: 1rem;
}

/* Label left, amount right. Without this the two cells sit flush and read as
   "Subtotaal€ 139,94". */
.cart_totals table.shop_table th {
	text-align: start;
	padding-inline-end: 1rem;
	white-space: nowrap;
}

.cart_totals table.shop_table td {
	text-align: end;
}

.cart_totals .order-total th,
.cart_totals .order-total td {
	padding-block-start: 1rem;
	font-size: 1.15rem;
}

.cart_totals .order-total .amount {
	color: var(--l4u-blue);
}

.wc-proceed-to-checkout {
	margin-block-start: 1rem;
	padding: 0;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	padding-block: .95rem;
	font-size: 1.05rem;
	text-align: center;
	background: #178a4a;
	border-color: #178a4a;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
	background: #12703b;
	border-color: #12703b;
}

/* Reassurance under the totals, so the promises are visible while deciding. */
.l4u-cart-trust {
	margin-block-start: 1rem;
}

/* Empty cart ---------------------------------------------------------------- */

.cart-empty {
	font-size: 1.15rem;
	text-align: center;
}

.return-to-shop {
	text-align: center;
}

/* Winkelwagen op een telefoon -----------------------------------------------
   WooCommerce stapelt de tabel onder 768px tot rijen en verbergt daarbij de productfoto.
   Wat overblijft is een lege eerste rij met alleen het kruisje. In een winkel waar mensen
   dozen herkennen aan hun beeld is die foto juist nuttig, dus we zetten hem terug. */

@media (max-width: 768px) {
	.woocommerce table.shop_table_responsive tr td.product-thumbnail,
	.woocommerce-page table.shop_table_responsive tr td.product-thumbnail {
		display: block;
		text-align: center;
		border-block-start: 0;
		padding-block-end: 0;
	}

	/* De responsieve tabel zet het kolomlabel voor elke cel; bij een foto is dat niet nodig. */
	.woocommerce table.shop_table_responsive tr td.product-thumbnail::before,
	.woocommerce-page table.shop_table_responsive tr td.product-thumbnail::before {
		content: '';
		display: none;
	}

	.woocommerce table.cart td.product-thumbnail img {
		width: 110px;
		margin-inline: auto;
	}

	/* Het kruisje hoort rechtsboven, niet op een eigen lege regel. */
	.woocommerce table.cart td.product-remove {
		width: auto;
		padding-block-end: 0;
		text-align: end;
	}

	.woocommerce table.cart td.product-remove a.remove {
		margin-inline-start: auto;
	}
}

/* Checkout ------------------------------------------------------------------ */

@media (min-width: 1000px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		gap: 1rem clamp(1.5rem, 3vw, 2.5rem);
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		align-items: start;
	}

	/*
	 * The heading and the order table are two separate elements, so they land in two grid
	 * rows. Without spanning the billing block across both, the second row only starts
	 * below it and the order summary drops far down the page.
	 */
	.woocommerce-checkout #customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.woocommerce-checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin-block-start: 0;
	}

	.woocommerce-checkout #order_review {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
	}
}

.woocommerce-checkout #customer_details {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--l4u-white);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgb(0 0 0 / .05);
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	width: 100%;
	float: none;
}

.woocommerce-billing-fields h3,
#order_review_heading {
	font-size: 1.15rem;
}

.woocommerce form .form-row {
	padding: 0;
	margin-block-end: 1rem;
}

.woocommerce form .form-row label {
	display: block;
	margin-block-end: .3rem;
	font-size: .9rem;
	font-weight: 500;
}

.woocommerce form .form-row .optional {
	color: var(--l4u-muted);
	font-weight: 400;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	width: 100%;
	padding: .7rem .85rem;
	font: inherit;
	border: 1px solid var(--l4u-border);
	border-radius: var(--l4u-radius);
	background: var(--l4u-white);
	line-height: 1.4;
	height: auto;
}

.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row select:focus-visible {
	outline: 2px solid var(--l4u-blue);
	outline-offset: -1px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.4;
	padding: 0;
	color: var(--l4u-black);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
}

/* Notices -------------------------------------------------------------------
   WooCommerce's own notice styling draws a coloured rule across the whole width and
   leaves the icon floating over the text. Rebuild them as proper cards. */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1rem;
	align-items: center;
	margin: 0 0 1.25rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--l4u-border);
	border-inline-start: 4px solid var(--l4u-blue);
	border-radius: var(--l4u-radius);
	background: var(--l4u-white);
	color: var(--l4u-black);
	list-style: none;
	box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}

.woocommerce-message {
	border-inline-start-color: #178a4a;
}

.woocommerce-error {
	border-inline-start-color: #d62828;
}

/* WooCommerce draws its icon with a ::before that overlaps the text at this padding. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before {
	content: none;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-inline-start: auto;
	padding: .55rem 1.1rem;
}

.woocommerce-notices-wrapper:empty {
	display: none;
}

/* Coupon toggle ------------------------------------------------------------- */

.woocommerce-form-coupon-toggle .woocommerce-info {
	font-size: .95rem;
}

.checkout_coupon {
	margin: 0 0 1.25rem;
	padding: 1.25rem;
	border: 1px solid var(--l4u-border);
	border-radius: var(--l4u-radius);
	background: var(--l4u-white);
}

.checkout_coupon .form-row {
	margin-block-end: .75rem;
}

#payment {
	background: transparent;
	border-radius: 0;
}

#payment ul.payment_methods {
	padding: 0;
	border: 0;
}

#payment ul.payment_methods li {
	margin-block-end: .5rem;
	padding: .9rem 1rem;
	list-style: none;
	background: var(--l4u-white);
	border: 1px solid var(--l4u-border);
	border-radius: var(--l4u-radius);
}

#payment ul.payment_methods li.active,
#payment ul.payment_methods li:has(input:checked) {
	border-color: var(--l4u-blue);
	box-shadow: 0 0 0 1px var(--l4u-blue);
}

#payment div.payment_box {
	margin: .75rem 0 0;
	padding: .75rem;
	background: var(--l4u-surface);
	border-radius: var(--l4u-radius);
	font-size: .92rem;
}

#payment div.payment_box::before {
	content: none;
}

#payment .place-order {
	padding: 1rem 0 0;
}

#payment #place_order {
	width: 100%;
	padding-block: 1rem;
	font-size: 1.1rem;
	background: #178a4a;
	border-color: #178a4a;
}

#payment #place_order:hover {
	background: #12703b;
	border-color: #12703b;
}