/**
 * Builder Extension - FAQ Accordion Widget Styles
 * Text Domain: bl_ex
 */

.be-faq-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.be-faq-item {
	background-color: #6C5C8C;
	border-radius: 14px;
	overflow: hidden;
	transition: background-color 0.25s ease;
}

.be-faq-question {
	display: flex;
	align-items: center;
	padding: 18px 22px;
	margin: 0;
	cursor: pointer;
	user-select: none;
	list-style: none;
	font-size: 16px;
	line-height: 1.4;
	outline: none;
}

.be-faq-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-inline-end: 10px;
	color: #C9BEE0;
	font-size: 16px;
}

.be-faq-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.be-faq-question-text {
	flex: 1 1 auto;
	color: #ffffff;
	font-weight: 500;
}

.be-faq-toggle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-inline-start: 16px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.be-faq-toggle i,
.be-faq-toggle svg {
	width: 13px;
	height: 13px;
	font-size: 13px;
	fill: currentColor;
}

.be-faq-toggle-close {
	display: none;
}

.be-faq-item.be-faq-active .be-faq-toggle-open {
	display: none;
}

.be-faq-item.be-faq-active .be-faq-toggle-close {
	display: inline-flex;
}

.be-faq-answer {
	max-height: 500px;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.be-faq-answer-inner {
	padding: 0 22px 22px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	line-height: 1.7;
}

.be-faq-answer-inner p {
	margin: 0 0 10px;
}

.be-faq-answer-inner p:last-child {
	margin-bottom: 0;
}

.be-faq-item.be-faq-active {
	background-color: #584A75;
}

.be-faq-item.be-faq-active .be-faq-toggle {
	background-color: #ffffff;
	color: #584A75;
}

/* Close-button style variant used for the initially expanded item, per design */
.be-faq-item .be-faq-question:focus-visible {
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}
