/* Kortingscode-banner (productpagina) in de WC+-basisstijl: witte kaart met getint icoon, titel + uitleg, en de code
   in een gestippeld vak met kopieerknop. Tokens van WooCommerce Plus. */
.coupon-banner {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 1rem 0 0;
	padding: 0.85rem 1rem;
	border: var(--wcp-border-width) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background-color: var(--wcp-color-surface);
}
.coupon-banner__icon {
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wcp-color-primary) 12%, var(--wcp-color-surface));
	position: relative;
}
.coupon-banner__icon::before {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.2rem;
	height: 1.2rem;
	background: var(--wcp-color-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7' cy='7' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7' cy='7' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.coupon-banner__text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.coupon-banner__title { font-size: 0.9375rem; color: var(--wcp-color-dark); }
.coupon-banner__desc { font-size: 0.8125rem; color: var(--wcp-color-muted); }
.coupon-banner__code {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.5rem 0.45rem 0.85rem;
	border: 1.5px dashed color-mix(in srgb, var(--wcp-color-primary) 55%, var(--wcp-color-surface));
	border-radius: var(--wcp-radius);
	background: color-mix(in srgb, var(--wcp-color-primary) 6%, var(--wcp-color-surface));
	color: var(--wcp-color-primary);
	font: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.coupon-banner__code:hover { background: color-mix(in srgb, var(--wcp-color-primary) 12%, var(--wcp-color-surface)); }
.coupon-banner__code:focus-visible { outline: 2px solid var(--wcp-color-primary); outline-offset: 2px; }
.coupon-banner__value { font-weight: var(--wcp-font-weight-bold, 700); letter-spacing: 0.04em; }
.coupon-banner__copy { padding: 0.15rem 0.5rem; border-radius: calc(var(--wcp-radius) * 0.7); background: var(--wcp-color-surface); font-size: 0.75rem; font-weight: var(--wcp-font-weight-semibold, 600); }
.coupon-banner__code.is-copied .coupon-banner__copy { background: var(--wcp-color-success-soft); color: var(--wcp-color-success); }
@media (max-width: 575.98px) {
	.coupon-banner { flex-wrap: wrap; }
	.coupon-banner__code { flex: 1 1 100%; justify-content: space-between; }
}