.kp-faq {
	--kp-faq-title: #16121C;
	--kp-faq-q: #3A1140;
	--kp-faq-q-hover: #6B1E63;
	--kp-faq-a: #5C5766;
	--kp-faq-line: #E4DCE8;
	--kp-faq-line-w: 1px;
	--kp-faq-icon: #6B1E63;
	--kp-faq-icon-size: 18px;
	--kp-faq-pad: 22px;
	width: 100%;
}

.kp-faq__title {
	margin: 0 0 8px;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.25;
	text-align: center;
	color: var(--kp-faq-title, #16121C);
}

.kp-faq__item {
	border-top: var(--kp-faq-line-w, 1px) solid var(--kp-faq-line, #E4DCE8);
}

.kp-faq__item:last-child {
	border-bottom: var(--kp-faq-line-w, 1px) solid var(--kp-faq-line, #E4DCE8);
}

.kp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	margin: 0;
	padding: var(--kp-faq-pad, 22px) 4px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	color: var(--kp-faq-q, #3A1140) !important;
	cursor: pointer;
	transition: color 0.2s ease;
}

/*
 * Pytanie jest znacznikiem `button`, a reset Hello Elementor daje wszystkim
 * przyciskom `white-space: nowrap`. Dłuższe pytania nie łamały się więc na
 * telefonie i rozpychały całą stronę — przy ekranie 375 px sekcja FAQ miała
 * 725 px szerokości i dawało się przewijać w bok. Przywracamy zawijanie.
 *
 * Do tego `min-width: 0` na treści pytania: element flex domyślnie ma
 * `min-width: auto`, czyli nie zwęża się poniżej swojej zawartości, więc samo
 * odblokowanie zawijania by nie wystarczyło.
 */
.kp-faq__q {
	white-space: normal;
}

.kp-faq__q > span:not(.kp-faq__icon) {
	min-width: 0;
	overflow-wrap: break-word;
}

.kp-faq__q:hover {
	color: var(--kp-faq-q-hover, #6B1E63);
}

.kp-faq__q:focus-visible {
	outline: 2px solid var(--kp-faq-icon, #6B1E63);
	outline-offset: 3px;
	border-radius: 4px;
}

.kp-faq__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--kp-faq-icon, #6B1E63);
	transition: transform 0.3s ease;
}

.kp-faq__icon svg {
	width: var(--kp-faq-icon-size, 18px);
	height: var(--kp-faq-icon-size, 18px);
	display: block;
}

.kp-faq__item.is-open .kp-faq__icon {
	transform: rotate(180deg);
}

.kp-faq__a {
	overflow: hidden;
}

.kp-faq--js .kp-faq__a {
	max-height: 0;
	transition: max-height 0.3s ease;
}

.kp-faq__a-inner {
	display: block;
	padding: 0 4px var(--kp-faq-pad, 22px);
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--kp-faq-a, #5C5766);
}

.kp-faq__a-inner > :first-child {
	margin-top: 0;
}

.kp-faq__a-inner > :last-child {
	margin-bottom: 0;
}

.kp-faq__empty {
	padding: 16px;
	border: 1px dashed #c3c4c7;
	border-radius: 8px;
	color: #646970;
	font-size: 13px;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.kp-faq__icon,
	.kp-faq--js .kp-faq__a {
		transition: none;
	}
}