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

.dk-faq { max-width: 860px; margin: clamp(30px, 3.5vw, 44px) auto 0; display: flex; flex-direction: column; gap: 12px; }
.dk-faq-item { background: #fff; border: 1px solid rgba(20, 20, 100, .08); border-radius: 14px; overflow: hidden; transition: box-shadow .2s var(--ease); }
.dk-faq-item.is-open { box-shadow: 0 12px 30px rgba(20, 20, 100, .08); }
.dk-faq-q {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 22px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-head);
	font-weight: var(--fw-bold);
	font-size: 16.5px;
	line-height: 1.35;
	color: var(--c-navy);
}
.dk-faq-q:hover { color: var(--c-magenta); }
.dk-faq-ic { position: relative; width: 20px; height: 20px; flex: none; }
.dk-faq-ic::before,
.dk-faq-ic::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: var(--c-navy);
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.dk-faq-ic::before { width: 13px; height: 2px; }
.dk-faq-ic::after { width: 2px; height: 13px; }
.dk-faq-item.is-open .dk-faq-ic::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

.dk-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.dk-faq-item.is-open .dk-faq-a { max-height: 420px; }
.dk-faq-a-inner { padding: 0 22px 20px; }
.dk-faq-a-inner p { font-size: 15px; line-height: 1.65; color: var(--c-text-muted); margin: 0; text-wrap: pretty; }
.dk-faq-a-inner a { color: var(--c-navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(20, 20, 100, .28); text-underline-offset: 3px; }
.dk-faq-a-inner a:hover { color: var(--c-magenta); text-decoration-color: var(--c-magenta); }

/* ---- responsive --------------------------------------------- */
@media (max-width: 700px) {
	.dk-faq-q { font-size: 15.5px; padding: 16px 18px; }
	.dk-faq-item.is-open .dk-faq-a { max-height: 600px; }
}

/* ===== HARDENING — gradient/kleur tegen theme-resets ===== */
.elementor-widget-bconnect_dk_faq .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;
}
/* De vraagknop mag geen knop-opmaak van het thema krijgen: hij is een
   accordeon-trigger, geen call to action. */
.elementor-widget-bconnect_dk_faq .dk-faq-q {
	background: none !important;
	border: 0 !important;
	color: var(--c-navy) !important;
	box-shadow: none !important;
}
.elementor-widget-bconnect_dk_faq .dk-faq-q:hover { color: var(--c-magenta) !important; }
.elementor-widget-bconnect_dk_faq .btn-primary {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_dk_faq .btn-primary:hover {
	background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%) !important;
	color: #fff !important;
}