/* ==========================================================================
   Reviewpagina — waar de QR-code op het bedankkaartje naartoe gaat
   MOBILE FIRST.
   ========================================================================== */

.bc-review {
	box-sizing: border-box;
	max-width: 560px;
	margin: 0 auto;
	padding: 8px 0 32px;
	text-align: center;
	font-family: var(--bc-font);
	color: var(--bc-body);
}

.bc-review *,
.bc-review *::before,
.bc-review *::after {
	box-sizing: border-box;
}

.bc-review__titel {
	margin: 0 0 10px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--bc-bruin);
}

.bc-review__tekst {
	margin: 0 auto 24px;
	max-width: 420px;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--bc-body);
}


/* --- De twee knoppen ---------------------------------------------------- */

.bc-review__knoppen {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 28px;
}

.bc-review__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 14px 22px;
	border: 2px solid transparent;
	border-radius: var(--bc-radius-pill);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bc-review__knop--primair {
	background: var(--bc-oranje);
	border-color: var(--bc-oranje);
	color: var(--bc-wit);
}

.bc-review__knop--primair:hover,
.bc-review__knop--primair:focus-visible {
	background: var(--bc-oranje-hover);
	border-color: var(--bc-oranje-hover);
	color: var(--bc-wit);
}

.bc-review__knop--rand {
	background: var(--bc-wit);
	border-color: var(--bc-oranje);
	color: var(--bc-oranje-tekst);
}

.bc-review__knop--rand:hover,
.bc-review__knop--rand:focus-visible {
	background: var(--bc-creme);
	color: var(--bc-oranje-tekst);
}


/* --- De kortingscode ---------------------------------------------------- */

.bc-review__code {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 18px 20px;
	border: 2px dashed var(--bc-rand);
	border-radius: 16px;
	background: var(--bc-creme);
}

.bc-review__code-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bc-meta);
}

.bc-review__code-waarde {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.1;
	color: var(--bc-oranje-tekst);
}


/* --- Slotregel ---------------------------------------------------------- */

/* Hoe je een product beoordeelt, vlak onder de knoppen. */
.bc-review__uitleg {
	margin: -14px auto 26px;
	max-width: 420px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--bc-meta);
}

.bc-review__slot {
	margin: 22px auto 0;
	max-width: 420px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--bc-meta);
}


/* ==========================================================================
   Opschalen naar grotere schermen
   ========================================================================== */

@media (min-width: 700px) {

	.bc-review {
		padding: 16px 0 48px;
	}

	.bc-review__titel {
		font-size: 36px;
	}

	.bc-review__tekst {
		font-size: 17px;
	}

	.bc-review__knoppen {
		flex-direction: row;
		justify-content: center;
	}

	.bc-review__knop {
		flex: 0 1 auto;
		min-width: 230px;
	}
}