/*
 * Gratis mueslibroodje – standaardopmaak.
 * Alle meldingen van de plugin hebben data-gratis-broodje="1" op het notice-element
 * en de tekst staat in .gratis-broodje-melding. Overschrijf gerust vanuit je thema.
 */

/* Meldingen (klassieke notices én block-notices) */
[data-gratis-broodje] {
	background: #fff8e1;
	padding: 1rem 1.2rem;
	font-family: 'Poppins';
	font-size: 14px;
	border-color: #fff8e1 !important;
	color: black !important;
	width: fit-content !important;
	margin-top: 12px;
}

.add-gift {
	color: black !important;
	display: block !important;
	margin-right: auto;
	background-color: unset !important;
	margin-top: 10px;
}

[data-gratis-broodje] {
	@media (min-width: 600px) {
		padding-left: .5rem !important;
	}

	.gratis-broodje-icoon {
		font-weight: 600;
		color: black;

		.info-btn {
			width: 22px;
			vertical-align: middle;
			margin-right: 1rem;

			@media(max-width: 600px) {
				display: none !important;
			}
		}
	}
}

/*.gratis-broodje-melding::before {*/
/*	content: "";*/
/*	display: inline-block;*/
/*	width: 1.5em;*/
/*	height: 1.5em;*/
/*	margin-right: .5em;*/
/*	vertical-align: middle;*/
/*	background: url(/wp-content/uploads/2024/10/info.svg) center/contain no-repeat;*/
/*}*/

.woocommerce-message[data-gratis-broodje]::before,
.woocommerce-info[data-gratis-broodje]::before {
	color: #e0a800;
	display: none !important;
}

.gratis-broodje-melding {
	vertical-align: top;
}
/* Claim-melding: tekst + knop netjes naast elkaar, wrapt vanzelf op smal scherm */
.gratis-broodje-melding:has(.gratis-broodje-knop) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em .9em;
}

/* Claim-knop in de melding */
.gratis-broodje-melding .gratis-broodje-knop {
	display: inline-block;
	margin: 0;
	padding: .6em 1.25em;
	border: 0;
	border-radius: 999px;
	background: #2e7d32;
	color: #fff;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease;
}

.gratis-broodje-melding .gratis-broodje-knop:hover,
.gratis-broodje-melding .gratis-broodje-knop:focus {
	background: #256428;
	color: #fff;
}

/* Op heel smalle schermen de knop volle breedte */
@media (max-width: 480px) {
	.gratis-broodje-melding:has(.gratis-broodje-knop) { gap: .6em; }
	.gratis-broodje-melding .gratis-broodje-knop { display: block; width: 100%; text-align: center; }
}

/* "Gratis"-label achter productnaam en in prijs-/subtotaalkolom */
.gratis-broodje-label {
	display: inline-block;
	margin-left: .35em;
	padding: .1em .6em;
	border-radius: 999px;
	background: #4F9F30;
	color: white !important;
	font-size: .75em;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.6;
	text-transform: uppercase;
	vertical-align: middle;
}

td.product-price .gratis-broodje-label,
td.product-subtotal .gratis-broodje-label {
	margin-left: 0;
}