/* =============================================
   QPS Counter-sectie
   Volgorde per item: label → icoon → getal(+badge)
   Cijfers: groen #94c24a | Labels: wit | Geen geel
   ============================================= */

/* Grid */
.qps-counter-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px 24px;
}
@media (max-width: 991px) {
	.qps-counter-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (max-width: 575px) {
	.qps-counter-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Item */
.qps-counter-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 24px 12px 20px;
}

/* Label BOVEN het icoon — standaard paars (witte achtergrond) */
.qps-counter-label {
	color: #282154 !important;
	font-size: 1.3rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.3;
	margin: 0 0 14px;
	order: -1;
}
/* Op donkere achtergrond (base-bg) wit houden */
[class*="base-bg"] .qps-counter-label,
.section--base-bg .qps-counter-label {
	color: #fff !important;
}

/* Icoon */
.qps-counter-ico {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	flex-shrink: 0;
}
/* Standaard: paars filter (op witte achtergrond) */
.qps-counter-ico img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(14%) sepia(50%) saturate(600%) hue-rotate(220deg) brightness(80%);
}
/* Op donkere achtergrond: groen filter */
[class*="base-bg"] .qps-counter-ico img,
.section--base-bg .qps-counter-ico img {
	filter: brightness(0) saturate(100%) invert(72%) sepia(35%) saturate(500%) hue-rotate(55deg) brightness(90%);
}

/* Zelfde groene iconen als index, maar sectie zonder donkere achtergrond (bijv. about-pagina) */
.qps-counter-section--no-bg .qps-counter-ico img {
	filter: brightness(0) saturate(100%) invert(72%) sepia(35%) saturate(500%) hue-rotate(55deg) brightness(90%);
}
.qps-counter-section--no-bg .qps-counter-label {
	color: #282154 !important;
}
.qps-counter-section--no-bg .qps-counter-num {
	color: #282154 !important;
}

/* Body */
.qps-counter-body {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Getal-rij: relatief voor de badge */
.qps-counter-num {
	position: relative;
	display: inline-flex;
	align-items: flex-start;
	color: #94c24a;
	font-size: 4rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 0;
	white-space: nowrap;
}
@media (min-width: 576px)  { .qps-counter-num { font-size: 4.4rem; } }
@media (min-width: 992px)  { .qps-counter-num { font-size: 4.8rem; } }

[class*=base-bg] .qps-counter-num,
[class$=base-bg] .qps-counter-num {
	color: #94c24a !important;
}

.qps-count-prefix {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* Badge "+30/dag" klein rechtsboven bij het getal */
.qps-counter-badge {
	position: absolute;
	top: -4px;
	right: -8px;
	transform: translateX(100%);
	background-color: #94c24a;
	color: #1e2235;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	padding: 3px 7px 4px;
	border-radius: 20px;
	white-space: nowrap;
	letter-spacing: 0;
}