/* LJBW Beheer – frontend */

/* ---------------------------------------------------------------
 * Winkelbericht (WooCommerce store notice)
 * ------------------------------------------------------------- */

/* Gecentreerd; ruimte rechts voor de sluitknop */
.woocommerce-store-notice.ljbw-notice {
	text-align: center;
	justify-content: center;
}

.ljbw-notice .ljbw-notice__inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 100%;
}

.ljbw-notice .ljbw-notice__icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: #fff;
}

/* Standaard-bel van WooCommerce (icoonfont via ::before) en eventuele thema-iconen
   verbergen; ons icoon vervangt ze. Het icoon in de sluitknop blijft staan. */
.ljbw-notice.demo_store::before {
	content: none !important;
	display: none !important;
}
.ljbw-notice svg:not(.ljbw-notice__icon) {
	display: none;
}
.ljbw-notice :is(a, button) svg {
	display: inline-block;
}

/* Sluitknop duidelijker: lichte witte cirkel, groter klikvlak */
.ljbw-notice :is(.woocommerce-store-notice__dismiss-link, [class*="dismiss"], [class*="close"]) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0 !important;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22) !important;
	color: #fff !important;
	opacity: 1 !important;
	text-decoration: none;
	transition: background 0.15s;
}
.ljbw-notice :is(.woocommerce-store-notice__dismiss-link, [class*="dismiss"], [class*="close"]):hover,
.ljbw-notice :is(.woocommerce-store-notice__dismiss-link, [class*="dismiss"], [class*="close"]):focus-visible {
	background: rgba(255, 255, 255, 0.38) !important;
}
.ljbw-notice :is(.woocommerce-store-notice__dismiss-link, [class*="dismiss"], [class*="close"]) svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

@media (max-width: 689.98px) {
	.ljbw-notice .ljbw-notice__inner {
		gap: 8px;
		text-align: left;
	}
	.ljbw-notice .ljbw-notice__icon {
		width: 18px;
		height: 18px;
	}
}