/* ============================================================
   dk-probleem.css — zone 2 van /digitale-klantenservice/.
   1-op-1 uit de Claude Design-export van 01-09-2026
   (upgrade-klantenservice.css, blok "ZONE 2 — PROBLEEM").
   Gedeelde dk-basis: widgets/shared/bconnect-dk.css.
   ============================================================ */

.dk-prob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.dk-prob-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.dk-prob-list li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	font-size: 16px;
	line-height: 1.55;
	color: var(--c-navy);
	padding: 16px 18px;
	background: #fff;
	border: 1px solid rgba(20, 20, 100, .08);
	border-radius: 14px;
	box-shadow: 0 4px 14px rgba(20, 20, 100, .04);
}

/* ---- responsive --------------------------------------------- */
@media (max-width: 980px) {
	.dk-prob-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
}

/* ===== HARDENING — gradient/kleur tegen theme-resets ===== */
.elementor-widget-bconnect_dk_probleem .accent {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	display: inline-block;
}
.elementor-widget-bconnect_dk_probleem .btn-primary {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_dk_probleem .btn-primary:hover {
	background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%) !important;
	color: #fff !important;
}