/*
 * Gebruik zoveel mogelijk nested CSS
 * Meer informatie: https://www.w3schools.com/cssref/sel_nesting.php
 */

/* ──────────────────────────────────────────────────────────────
 * Verzendrij over de volle breedte — winkelwagen én afrekenen
 * (5 augustus 2026, gelijkgetrokken met candle-cover)
 *
 * De template-override woocommerce/cart/cart-shipping.php rendert de verzendrij als
 * één cel met colspan="2" in plaats van los <th> + <td>, met de "Verzending"-kop in
 * een <span class="shipping-package-name">. Daardoor worden de verzendopties niet
 * meer geknepen in de smalle prijskolom en kunnen de bedragen uitlijnen met
 * Subtotaal en Totaal.
 *
 * De cel blijft bewust een ECHTE tabelcel (geen display:block-hack — die zou hem
 * terugbrengen naar zijn min-width in plaats van de volle breedte).
 *
 * Alleen uitlijning: kleuren en lettertypes komen uit style.css en Elementor en worden
 * hier expres niet overschreven. (candle-cover zet labels/bedragen op #fff omdat het
 * daar een donker blok is; signs-usa heeft juist een witte tabelachtergrond — dat zou
 * wit-op-wit worden.)
 * ────────────────────────────────────────────────────────────── */
.woocommerce-shipping-totals.shipping {
	display: table-row !important;
	width: auto !important;
	min-width: 0 !important;

	td {
		display: table-cell !important;
		width: auto !important;
		max-width: none !important;
		padding-left: 0 !important;
		text-align: left !important;
	}

	/* "Verzending"-kop boven de opties. Verving het losse <th>, inclusief de suffix
	   die op th:after stond (die regel in style.css is nu dood, maar blijft staan). */
	.shipping-package-name {
		display: block;
		font-weight: 600;
		margin-bottom: 6px;

		&::after {
			font-size: 12px;
			font-weight: 400;
			content: ' schatting, (incl. BTW)';
		}
	}

	#shipping_method {
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none;
		text-align: left !important;
	}
}

/* ──────────────────────────────────────────────────────────────
 * Afrekenen: elke optie = grid van 3 kolommen (radio | naam | prijs)
 *
 * De prijskolom is 30% breed, gelijk aan de prijskolom van de andere totaalrijen, en de
 * prijs staat links in die kolom (self-start) — op verzoek, zodat hij begint waar de
 * bedragen van Subtotaal/Totaal beginnen. Elementor knijpt hier de cel met
 * `.woocommerce-shipping-totals td { max-width: 70px }`; die is hierboven al
 * geneutraliseerd.
 * ────────────────────────────────────────────────────────────── */
.e-checkout__order_review .woocommerce-shipping-totals.shipping #shipping_method li {
	display: grid;
	grid-template-columns: max-content 1fr 30%;
	align-items: baseline;
	column-gap: 6px;
	row-gap: 8px;
	margin: 8px 0;

	> input[type="radio"] {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		margin: 0;
	}

	/* Het label krijgt geen eigen box, zodat de naam en de prijs los in het grid van
	   de <li> vallen en de prijs in kolom 3 kan staan. */
	> label {
		display: contents;

		.woocommerce-Price-amount {
			grid-column: 3;
			grid-row: 1;
			justify-self: self-start;
			white-space: nowrap;
		}
	}

	/* SendCloud-servicepunt: knop en gekozen punt onder de naam. */
	> #sendcloudshipping_service_point_select {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		margin: 0;
	}

	> #sendcloudshipping_service_point_selected_label {
		grid-column: 2;
		grid-row: 3;
		justify-self: start;
	}
}

/* ──────────────────────────────────────────────────────────────
 * Winkelwagen: naam links, bedrag tegen de rechterrand
 *
 * Hier is geen aparte prijskolom zoals op de afrekenpagina: de cel is de volle
 * tabelbreedte, dus het bedrag lijnt uit met Subtotaal/Totaal door het rechts in de
 * cel te zetten en de cel dezelfde padding-right (12px) te geven als de andere
 * totaalrijen. Zowel Elementor (`padding-inline-end: 0` op de verzend-td) als
 * style.css zetten die padding op 0, vandaar !important.
 *
 * Het oude beeld kwam van `.cart_totals .shipping td li/p/form { text-align: right }`
 * in style.css — daar hing alles rechts, inclusief de adresregel en het
 * adres-wijzigen-formulier. Die regels worden hier overruled.
 * ────────────────────────────────────────────────────────────── */
.cart_totals .woocommerce-shipping-totals.shipping {
	td {
		padding-right: 12px !important;
	}

	#shipping_method li {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		column-gap: 6px;
		margin: 8px 0;
		padding-right: 0;

		/* Het label vult de rest van de regel en duwt de prijs naar rechts. */
		> label {
			flex: 1 1 auto;
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			gap: 8px;
			max-width: none;

			.woocommerce-Price-amount {
				white-space: nowrap;
			}
		}

		/* SendCloud-servicepunt: knop en gekozen punt op een eigen regel eronder. */
		> #sendcloudshipping_service_point_select,
		> #sendcloudshipping_service_point_selected_label {
			flex: 0 0 100%;
			margin: 4px 0 0;
		}
	}

	/* Adresregel en het "Adres wijzigen"-formulier links uitlijnen. */
	.woocommerce-shipping-destination,
	.woocommerce-shipping-calculator {
		text-align: left !important;
		padding-right: 0 !important;
	}

	.woocommerce-shipping-destination {
		font-size: 13px;
		margin: 4px 0 0;
	}
}

/* ──────────────────────────────────────────────────────────────
 * "Servicepunt selecteren"-knop in de huisstijl
 *
 * SendCloud rendert die knop client-side als <button class="button alt">, dus hij
 * krijgt de standaard WooCommerce-knopkleuren. Hier gelijkgetrokken met de
 * "Bestelling plaatsen"-knop uit de Elementor-kit: donkerblauwe achtergrond met beige
 * tekst. !important is nodig omdat .button.alt zelf al kleuren meebrengt.
 *
 * Bewust NIET onder de regels hierboven genest: die gaan uit van de knop als direct
 * kind van de <li>, en de knop wordt door een extern script geplaatst. Zo pakken de
 * kleuren ook als die plek ooit verschuift.
 * ────────────────────────────────────────────────────────────── */
#sendcloudshipping_service_point_select {
	background-color: var(--e-global-color-5de86b3, #031930) !important;
	color: var(--e-global-color-primary, #E6D7BF) !important;
	border: none !important;

	&:hover,
	&:focus {
		background-color: var(--e-global-color-5de86b3, #031930) !important;
		color: var(--e-global-color-primary, #E6D7BF) !important;
		filter: brightness(1.25);
	}
}
.buckaroo-express-payments .applepay-button-container{
	display: none !important
}