/**
 * Diensten Punten widget – basis styling.
 * Alle visuele instellingen (kleuren, ruimte, dikte, breedte) komen via
 * Elementor-controls binnen als inline-CSS of CSS custom properties.
 */

.bcjvd-icon-list-items {
	list-style: none;
	margin: 0;
	padding: 0;

	/* Defaults voor de scheidingslijn (overschreven door Elementor-controls). */
	--bcjvd-divider-style: solid;
	--bcjvd-divider-weight: 1px;
	--bcjvd-divider-color: #dddddd;
	--bcjvd-divider-width: 100%;
}

/* Layout: naast elkaar. */
.bcjvd-layout-inline .bcjvd-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.bcjvd-icon-list-item {
	position: relative;
	display: flex;
	align-items: center;
	font-size: inherit;
	line-height: 1.4;
}

.bcjvd-icon-list-item > a {
	display: flex;
	align-items: center;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.bcjvd-icon-list-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.bcjvd-icon-list-icon svg {
	display: block;
}

.bcjvd-icon-list-text {
	display: inline-block;
}

/* ---------------------------------------------------------------------
 * Scheidingslijn (divider) – getekend met een pseudo-element.
 * ------------------------------------------------------------------ */
.bcjvd-divider-yes .bcjvd-icon-list-item:not(:last-child)::after {
	content: "";
	position: absolute;
}

/* Onder elkaar: horizontale lijn onder elk punt. */
.bcjvd-divider-yes.bcjvd-layout-traditional .bcjvd-icon-list-item:not(:last-child)::after {
	left: 0;
	bottom: 0;
	width: var(--bcjvd-divider-width);
	border-bottom: var(--bcjvd-divider-weight) var(--bcjvd-divider-style) var(--bcjvd-divider-color);
}

/* Naast elkaar: verticale lijn tussen de punten. */
.bcjvd-divider-yes.bcjvd-layout-inline .bcjvd-icon-list-item:not(:last-child)::after {
	right: 0;
	top: 0;
	height: var(--bcjvd-divider-width, 100%);
	border-right: var(--bcjvd-divider-weight) var(--bcjvd-divider-style) var(--bcjvd-divider-color);
}

/* Editor: melding bij lege lijst. */
.bcjvd-icon-list-empty {
	padding: 12px 16px;
	border: 1px dashed #c3c4c7;
	border-radius: 4px;
	color: #646970;
	font-size: 13px;
	background: #f6f7f7;
}