/**
 * Staffeltabel op de productpagina.
 *
 * De kleuren komen als CSS-variabelen op de container binnen, gevuld vanuit de
 * instellingen. Wil je in een thema iets anders, overschrijf dan die
 * variabelen — dan hoeft er geen enkele regel hieronder aangepast te worden.
 */

.dde-bulk-table {
	--dde-radius: 4px;

	margin: 0 0 1.5em;
	max-width: 100%;
	overflow-x: auto;
}

.dde-bulk-table__title {
	color: var( --dde-table-color-text, #1d2327 );
	font-weight: 600;
	margin: 0 0 0.5em;
}

.dde-bulk-table table {
	border: 1px solid var( --dde-table-color-border, #dcdcde );
	border-collapse: collapse;
	border-radius: var( --dde-radius );
	color: var( --dde-table-color-text, #1d2327 );
	margin: 0;
	overflow: hidden;
	width: 100%;
}

.dde-bulk-table th,
.dde-bulk-table td {
	border: 1px solid var( --dde-table-color-border, #dcdcde );
	padding: 0.5em 0.85em;
	text-align: left;
	vertical-align: middle;
}

.dde-bulk-table thead th,
.dde-bulk-table tbody th {
	background: var( --dde-table-color-header-bg, #f4f4f5 );
	color: var( --dde-table-color-header-text, #1d2327 );
	font-weight: 600;
	white-space: nowrap;
}

.dde-bulk-table tbody tr {
	background: var( --dde-table-color-row-bg, #fff );
}

.dde-bulk-table--vertical tbody tr:nth-child( even ) {
	background: var( --dde-table-color-row-alt, #fafafa );
}

.dde-bulk-table .dde-col-price {
	font-weight: 600;
}

/* Vrije tekst boven en onder de tabel */

.dde-bulk-table__before,
.dde-bulk-table__after {
	color: var( --dde-table-color-text, #1d2327 );
}

.dde-bulk-table__before > :first-child,
.dde-bulk-table__after > :first-child {
	margin-top: 0;
}

.dde-bulk-table__before > :last-child {
	margin-bottom: 0.75em;
}

.dde-bulk-table__after > :last-child {
	margin-bottom: 0;
}

.dde-bulk-table__after {
	margin-top: 0.75em;
}

/* De gehaalde staffel, ook bij een statische tabel.
 *
 * Vier smaken, in te stellen bij Weergave. De richting van de tabel bepaalt
 * aan welke kant een streep hoort: bij een rij links en rechts, bij een kolom
 * boven en onder.
 */

.dde-bulk-table--active-bar .dde-tier.is-active {
	box-shadow: inset 3px 0 0 var( --dde-table-color-accent, #2271b1 );
}

.dde-bulk-table--horizontal.dde-bulk-table--active-bar .dde-tier.is-active {
	box-shadow: inset 0 3px 0 var( --dde-table-color-accent, #2271b1 );
}

.dde-bulk-table--active-bars .dde-tier.is-active {
	box-shadow:
		inset 6px 0 0 var( --dde-table-color-accent, #2271b1 ),
		inset -6px 0 0 var( --dde-table-color-accent, #2271b1 );
}

.dde-bulk-table--horizontal.dde-bulk-table--active-bars .dde-tier.is-active {
	box-shadow:
		inset 0 6px 0 var( --dde-table-color-accent, #2271b1 ),
		inset 0 -6px 0 var( --dde-table-color-accent, #2271b1 );
}

.dde-bulk-table--active-row .dde-tier.is-active,
.dde-bulk-table--active-row .dde-tier.is-active td,
.dde-bulk-table--active-row .dde-tier.is-active th {
	background: var( --dde-table-color-active-bg, #eaf3fb );
	color: var( --dde-table-color-active-text, #1d2327 );
	font-weight: 600;
}

.dde-bulk-table--active-row .dde-tier.is-active {
	box-shadow: inset 3px 0 0 var( --dde-table-color-accent, #2271b1 );
}

.dde-bulk-table--horizontal.dde-bulk-table--active-row .dde-tier.is-active {
	box-shadow: inset 0 3px 0 var( --dde-table-color-accent, #2271b1 );
}

/* Klikbare weergave */

.dde-bulk-table .dde-tier--clickable {
	cursor: pointer;
	transition: background-color 0.12s ease-in-out;
}

.dde-bulk-table .dde-tier--clickable:hover,
.dde-bulk-table .dde-tier--clickable:focus-visible {
	background: var( --dde-table-color-row-alt, #f0f0f1 );
	outline: none;
}

@supports ( background: color-mix( in srgb, red 10%, transparent ) ) {
	.dde-bulk-table .dde-tier--clickable:hover,
	.dde-bulk-table .dde-tier--clickable:focus-visible {
		background: color-mix( in srgb, var( --dde-table-color-accent, #2271b1 ) 12%, transparent );
	}
}

/* Voortgangsbalk voor de verzendkorting */

.dde-shipping-bar {
	color: var( --dde-bar-color-text, #1d2327 );
	margin: 0 0 1.25em;
}

.dde-shipping-bar__text {
	margin: 0 0 0.4em;
}

.dde-shipping-bar__track {
	background: var( --dde-bar-color-track, #eceff1 );
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
	width: 100%;
}

.dde-shipping-bar__fill {
	background: var( --dde-bar-color-fill, #2271b1 );
	border-radius: 999px;
	display: block;
	height: 100%;
	transform-origin: left center;
	transition: width 0.6s cubic-bezier( 0.22, 1, 0.36, 1 );
	width: 0;
}

.dde-shipping-bar--reached .dde-shipping-bar__fill {
	background: var( --dde-bar-color-reached, #1a7a3c );
}

/* Het nawiebertje wanneer de balk tot stilstand komt. */

.dde-shipping-bar__fill.is-wobbling {
	animation: dde-wobble 0.9s ease-out;
}

@keyframes dde-wobble {
	0%   { transform: scaleX( 1 ) scaleY( 1 ); }
	20%  { transform: scaleX( 1.015 ) scaleY( 1.45 ); }
	40%  { transform: scaleX( 0.995 ) scaleY( 0.8 ); }
	60%  { transform: scaleX( 1.006 ) scaleY( 1.18 ); }
	80%  { transform: scaleX( 0.999 ) scaleY( 0.93 ); }
	100% { transform: scaleX( 1 ) scaleY( 1 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.dde-shipping-bar__fill {
		transition: none;
	}

	.dde-shipping-bar__fill.is-wobbling {
		animation: none;
	}
}

/* Smalle schermen: de verticale tabel wordt een lijst met opschriften. */

@media ( max-width: 480px ) {
	.dde-bulk-table--vertical thead {
		clip: rect( 0 0 0 0 );
		clip-path: inset( 50% );
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.dde-bulk-table--vertical tbody tr {
		display: block;
		margin-bottom: -1px;
	}

	.dde-bulk-table--vertical tbody td {
		display: flex;
		justify-content: space-between;
	}

	.dde-bulk-table--vertical tbody td::before {
		content: attr( data-label );
		font-weight: 600;
		padding-right: 1em;
	}
}