/*
 * ICG - bestellingsoverzicht (winkelwagen, afrekenen, bedankpagina, Mijn account).
 * Alleen indeling: kaartgegevens naast elkaar, een nette bedragkolom rechts,
 * gelijke opvulling. Kleur van de tabel zelf, rand en afronding blijven van het thema.
 * Geladen door ICG_Dropoff_Totals; alles hangt aan de tabellen van WooCommerce.
 */

/* ---------- Kaartgegevens: label (grijs) naast waarde ---------- */

/* Winkelwagen en afrekenen: dl.variation (dt/dd) */
.woocommerce-checkout-review-order-table dl.variation,
.woocommerce-cart-form dl.variation,
.woocommerce-table--order-details dl.variation {
	display: grid !important;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: .75rem;
	row-gap: .2rem;
	align-items: baseline;
	margin: .45rem 0 0 !important;
	padding: 0 !important;
	font-size: 13px;
	line-height: 1.45;
}

.woocommerce-checkout-review-order-table dl.variation dt,
.woocommerce-cart-form dl.variation dt,
.woocommerce-table--order-details dl.variation dt {
	grid-column: 1;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-indent: 0;
	color: #9a9a9a;
	font-size: 13px;
	font-weight: 400;
}

.woocommerce-checkout-review-order-table dl.variation dd,
.woocommerce-cart-form dl.variation dd,
.woocommerce-table--order-details dl.variation dd {
	grid-column: 2;
	margin: 0 !important;
	padding: 0 !important;
	color: #e8e8e8;
	font-size: 13px;
	font-weight: 400;
	overflow-wrap: anywhere;
}

/* Woo zet de waarde in een <p>; die mag niet op een eigen regel met marge */
.woocommerce-checkout-review-order-table dl.variation dd p,
.woocommerce-cart-form dl.variation dd p,
.woocommerce-table--order-details dl.variation dd p {
	display: inline;
	margin: 0 !important;
	padding: 0 !important;
}

/* Bedankpagina en Mijn account: ul.wc-item-meta (li > strong.label + p) */
.woocommerce-table--order-details ul.wc-item-meta {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: .75rem;
	row-gap: .2rem;
	align-items: baseline;
	list-style: none !important;
	margin: .45rem 0 0 !important;
	padding: 0 !important;
	font-size: 13px;
	line-height: 1.45;
}

.woocommerce-table--order-details ul.wc-item-meta li {
	display: contents;
	margin: 0;
	padding: 0;
}

.woocommerce-table--order-details ul.wc-item-meta li .wc-item-meta-label {
	grid-column: 1;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	color: #9a9a9a;
	font-size: 13px;
	font-weight: 400;
}

.woocommerce-table--order-details ul.wc-item-meta li p {
	grid-column: 2;
	margin: 0 !important;
	padding: 0 !important;
	color: #e8e8e8;
	font-size: 13px;
	overflow-wrap: anywhere;
}

/* ---------- Tabellen: gelijke opvulling, bedragen rechts ---------- */

.woocommerce-checkout-review-order-table,
.woocommerce-table--order-details,
.cart_totals table.shop_table {
	width: 100%;
	font-variant-numeric: tabular-nums;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td,
.woocommerce-table--order-details th,
.woocommerce-table--order-details td,
.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	padding: .8rem 1rem;
	vertical-align: middle;
	line-height: 1.4;
}

/* Bedragkolom: een smalle kolom rechts, het product krijgt de rest */
.woocommerce-checkout-review-order-table thead th:last-child,
.woocommerce-checkout-review-order-table tbody td.product-total,
.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-table--order-details thead th:last-child,
.woocommerce-table--order-details tbody td.product-total,
.woocommerce-table--order-details tfoot td {
	width: 1%;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.woocommerce-checkout-review-order-table thead th:first-child,
.woocommerce-checkout-review-order-table tbody td.product-name,
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-table--order-details thead th:first-child,
.woocommerce-table--order-details tbody td.product-name,
.woocommerce-table--order-details tfoot th {
	width: auto;
	text-align: left;
}

/* De uitleg bij de PSA-verzendkosten is een doorlopende tekstregel over beide kolommen */
.woocommerce-checkout-review-order-table tfoot tr.icg-psa-fee-note td,
.cart_totals table.shop_table tr.icg-psa-fee-note td {
	width: auto;
	text-align: left;
	white-space: normal;
}

/* Cart-totalen: op brede schermen dezelfde bedragkolom (op mobiel zet Woo de rijen onder elkaar) */
@media (min-width: 769px) {
	.cart_totals table.shop_table td {
		width: 1%;
		text-align: right;
		white-space: nowrap;
	}

	.cart_totals table.shop_table th {
		text-align: left;
	}

	.cart_totals table.shop_table tr.icg-psa-fee-note td {
		white-space: normal;
		text-align: left;
	}
}

/* ---------- Totalen ---------- */

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-table--order-details tfoot th,
.cart_totals table.shop_table th {
	font-weight: 400;
}

.woocommerce-checkout-review-order-table tr.icg-totals-excl th,
.woocommerce-checkout-review-order-table tr.icg-totals-excl td,
.woocommerce-checkout-review-order-table tr.icg-totals-tax th,
.woocommerce-checkout-review-order-table tr.icg-totals-tax td,
.cart_totals table.shop_table tr.icg-totals-excl th,
.cart_totals table.shop_table tr.icg-totals-excl td,
.cart_totals table.shop_table tr.icg-totals-tax th,
.cart_totals table.shop_table tr.icg-totals-tax td {
	color: #bdbdbd;
	font-weight: 400;
}

.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout-review-order-table tr.order-total td,
.cart_totals table.shop_table tr.order-total th,
.cart_totals table.shop_table tr.order-total td {
	font-weight: 700;
}

/* Subtotaal is overbodig: de bedragen staan al op de productregels en het totaal eronder. */
.woocommerce-checkout-review-order-table tr.cart-subtotal,
.cart_totals table.shop_table tr.cart-subtotal {
	display: none !important;
}