/*
 * De bon na een kortingscode of cadeaubon in het codeveld. Zie code-bon.php.
 *
 * Dezelfde bon als na een kortingslink (kortingscode-melding.css), maar op de
 * plek van de melding en rustiger: hij komt zacht binnen, met een kleine
 * plof confetti, en blijft staan.
 */

.nrd-code-bon {
	--nrd-code-bon-petrol: var(--theme-palette-color-10, #31545b);
	--nrd-code-bon-donker: #24403f;
	--nrd-code-bon-geel: var(--theme-palette-color-5, #fbefcc);
	--nrd-code-bon-mint: var(--theme-palette-color-7, #eef5f2);
	--nrd-code-bon-wit: var(--theme-palette-color-8, #fff);
	--nrd-code-bon-strook: 88px;

	position: relative;
	display: grid;
	grid-template-columns: var(--nrd-code-bon-strook) minmax(0, 1fr);
	box-sizing: border-box;
	max-width: 460px;
	margin: 0 0 18px;
	font-family: Quicksand, var(--theme-font-family, sans-serif);
	filter: drop-shadow(0 1px 2px rgba(18, 23, 35, 0.1)) drop-shadow(0 8px 16px rgba(36, 64, 63, 0.18));
	animation: nrd-code-bon-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Bij afrekenen staat hij onder het veld, in een smalle kolom. */
.nrd-kassa-code__melding .nrd-code-bon {
	--nrd-code-bon-strook: 76px;
	max-width: none;
	margin: 0;
}

/* In de winkelmand onder het codeveld (code-bon.js). */
.actions .nrd-code-bon {
	margin: 12px 0 0;
	text-align: left;
}

/* Al een keer binnengekomen: niet nog eens, en geen confetti. */
.nrd-code-bon.is-gezien {
	animation: none;
}

.nrd-code-bon.is-gezien .nrd-code-bon__confetti {
	display: none;
}

@keyframes nrd-code-bon-in {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.97);
	}
}

/*
 * De bon zelf: strook en tekst, met een hapje uit de boven- en onderrand op
 * de perforatie. Het masker zit op een eigen laag, zodat de confetti er
 * buiten mag vallen.
 */
.nrd-code-bon__strook,
.nrd-code-bon__tekst {
	position: relative;
}

.nrd-code-bon::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
	background:
		linear-gradient(to right, var(--nrd-code-bon-geel) var(--nrd-code-bon-strook), var(--nrd-code-bon-petrol) 0);
	-webkit-mask:
		radial-gradient(circle 8px at var(--nrd-code-bon-strook) 0, transparent 7.5px, #000 8px) top / 100% 51% no-repeat,
		radial-gradient(circle 8px at var(--nrd-code-bon-strook) 100%, transparent 7.5px, #000 8px) bottom / 100% 51% no-repeat;
	mask:
		radial-gradient(circle 8px at var(--nrd-code-bon-strook) 0, transparent 7.5px, #000 8px) top / 100% 51% no-repeat,
		radial-gradient(circle 8px at var(--nrd-code-bon-strook) 100%, transparent 7.5px, #000 8px) bottom / 100% 51% no-repeat;
}

.nrd-code-bon__strook {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 1px;
	padding: 12px 6px;
	border-right: 2px dashed rgba(49, 84, 91, 0.4);
	color: var(--nrd-code-bon-donker);
	text-align: center;
}

.nrd-code-bon__strook strong {
	font-family: Acme, var(--theme-font-family, sans-serif);
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
}

.nrd-code-bon__strook span {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}

.nrd-code-bon__tekst {
	align-self: center;
	padding: 12px 16px 13px;
}

.nrd-code-bon__tekst p {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--nrd-code-bon-mint);
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.nrd-code-bon__tekst .nrd-code-bon__kop {
	margin-bottom: 2px;
	font-family: Acme, var(--theme-font-family, sans-serif);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.15;
	color: var(--nrd-code-bon-wit);
	text-wrap: balance;
}

.nrd-code-bon__tekst b {
	font-weight: 700;
	color: var(--nrd-code-bon-wit);
	overflow-wrap: normal;
	white-space: nowrap;
}

/*
 * Confetti: een kleine plof uit de strook, omhoog en dan uitdovend naar
 * beneden. Het <i> gaat opzij, het stukje zelf (::before) omhoog en omlaag.
 */
.nrd-code-bon__confetti {
	position: absolute;
	top: 50%;
	left: calc(var(--nrd-code-bon-strook) / 2);
	z-index: 1;
	width: 0;
	height: 0;
	pointer-events: none;
}

.nrd-code-bon__confetti i {
	position: absolute;
	top: 0;
	left: 0;
	animation: nrd-code-bon-opzij var(--d) cubic-bezier(0.15, 0.6, 0.3, 1) var(--w) both;
}

.nrd-code-bon__confetti i::before {
	content: "";
	display: block;
	width: 7px;
	height: 10px;
	margin: -5px 0 0 -3.5px;
	border-radius: 2px;
	background: var(--k);
	opacity: 0;
	animation: nrd-code-bon-val var(--d) linear var(--w) both;
}

.nrd-code-bon__confetti i:nth-child(3n)::before {
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
}

@keyframes nrd-code-bon-opzij {
	to {
		transform: translateX(var(--x));
	}
}

@keyframes nrd-code-bon-val {
	0% {
		opacity: 0;
		transform: translateY(0) rotate(0deg);
		animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
	}

	10% {
		opacity: 1;
	}

	38% {
		opacity: 1;
		transform: translateY(var(--op)) rotate(calc(var(--r) * 0.45));
		animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
	}

	70% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translateY(var(--neer)) rotate(var(--r));
	}
}

@media (max-width: 420px) {
	.nrd-code-bon {
		--nrd-code-bon-strook: 74px;
	}

	.nrd-code-bon__strook strong {
		font-size: 23px;
	}

	.nrd-code-bon__tekst {
		padding-left: 14px;
		padding-right: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nrd-code-bon {
		animation: nrd-code-bon-rustig 0.2s linear both;
	}

	.nrd-code-bon__confetti {
		display: none;
	}
}

@keyframes nrd-code-bon-rustig {
	from {
		opacity: 0;
	}
}