/**
 * Frontend styling voor BBRebelle Prijslijst.
 * Neutraal gehouden zodat de plugin goed binnen bestaande thema's past.
 */

.bbr-prijslijst {
	width: 100%;
	margin: 0 0 30px;
}

.bbr-prijslijst-title {
	margin: 28px 0 14px;
	font-size: 1.35em;
	line-height: 1.3;
}

.bbr-prijslijst-text {
	margin: 12px 0 18px;
}

.bbr-prijslijst-text p {
	margin: 0 0 10px;
}

.bbr-prijslijst-row {
	padding: 8px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.bbr-prijslijst-row-main {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.bbr-prijslijst-row-name,
.bbr-prijslijst-row-price {
	flex-shrink: 0;
}

.bbr-prijslijst-row-dots {
	flex: 1;
	height: 6px;
	margin: 0 2px;
	background-image: radial-gradient(circle, currentColor 2px, transparent 2px);
	background-position: left center;
	background-repeat: repeat-x;
	background-size: 10px 6px;
	opacity: 0.8;
	transform: translateY(-2px);
}

/*
 * De standaard lijststijl houdt naam en prijs uitgelijnd zonder puntenlijn.
 * De dots-node blijft in de markup voor backwards compatibility met maatwerk-CSS.
 */
.bbr-prijslijst--list .bbr-prijslijst-row-main {
	justify-content: space-between;
}

.bbr-prijslijst--list .bbr-prijslijst-row-dots {
	display: none;
}

.bbr-prijslijst-row-price {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	font-weight: 600;
	white-space: nowrap;
}

.bbr-prijslijst-original-price {
	color: #777;
	font-size: 0.85em;
	font-weight: 400;
}

.bbr-prijslijst-row-subtext {
	margin-top: 3px;
	color: #777;
	font-size: 0.84em;
	line-height: 1.4;
}

@media (max-width: 600px) {
	.bbr-prijslijst-row-main {
		align-items: flex-start;
	}

	.bbr-prijslijst-row-dots {
		display: none;
	}

	.bbr-prijslijst-row-name {
		flex: 1;
	}
}