.cfaq {
	width: 100%;
	margin: 20px 0;
}

.cfaq-title {
	margin: 0 0 18px;
}

.cfaq-list {
	width: 100%;
}

.cfaq-row {
	border: 0;
	border-radius: 0;
	margin-bottom: var(--cfaq-gap);
	overflow: visible;
	background: var(--cfaq-question-bg);
}

.cfaq-row:last-child {
	margin-bottom: 0;
}

.cfaq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: var(--cfaq-question-padding-y) var(--cfaq-question-padding-x);
	border-top: var(--cfaq-question-border-top, 1px) var(--cfaq-border-style, solid) var(--cfaq-border-color);
	border-right: var(--cfaq-question-border-right, 1px) var(--cfaq-border-style, solid) var(--cfaq-border-color);
	border-bottom: var(--cfaq-question-border-bottom, 1px) var(--cfaq-border-style, solid) var(--cfaq-border-color);
	border-left: var(--cfaq-question-border-left, 1px) var(--cfaq-border-style, solid) var(--cfaq-border-color);
	border-top-left-radius: var(--cfaq-question-radius-top-left, 0px);
	border-top-right-radius: var(--cfaq-question-radius-top-right, 0px);
	border-bottom-right-radius: var(--cfaq-question-radius-bottom-right, 0px);
	border-bottom-left-radius: var(--cfaq-question-radius-bottom-left, 0px);
	background: var(--cfaq-question-bg);
	color: var(--cfaq-question-text);
	font-family: var(--cfaq-question-font);
	font-size: var(--cfaq-question-size);
	font-weight: var(--cfaq-question-weight);
	line-height: 1.45;
	text-align: left;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.cfaq-question:hover {
	background: var(--cfaq-question-hover-bg);
	color: var(--cfaq-question-hover-text);
}

.cfaq-question.is-open {
	background: var(--cfaq-question-active-bg);
	color: var(--cfaq-question-active-text);
}

.cfaq-question-text {
	flex: 1;
	min-width: 0;
}

.cfaq-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	min-width: 1.5em;
	height: 1.5em;
	color: var(--cfaq-icon-color);
	font-size: var(--cfaq-icon-size);
}

.cfaq-icon i {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
	transition: opacity .2s ease, transform .2s ease, color .2s ease;
}

.cfaq-icon-close {
	opacity: 1;
	transform: scale(1);
}

.cfaq-icon-open {
	opacity: 0;
	transform: scale(.8);
}

.cfaq-question.is-open .cfaq-icon-close {
	opacity: 0;
	transform: scale(.8);
}

.cfaq-question.is-open .cfaq-icon-open {
	opacity: 1;
	transform: scale(1);
}

.cfaq-question:hover .cfaq-icon,
.cfaq-question.is-open .cfaq-icon {
	color: currentColor;
}

.cfaq-answer-wrap {
	max-height: 0;
	overflow: hidden;
	background: var(--cfaq-answer-bg);
	border-top: var(--cfaq-answer-border-top, 0px) var(--cfaq-border-style, solid) var(--cfaq-border-color);
	border-right: var(--cfaq-answer-border-right, 1px) var(--cfaq-border-style, solid) var(--cfaq-border-color);
	border-bottom: var(--cfaq-answer-border-bottom, 1px) var(--cfaq-border-style, solid) var(--cfaq-border-color);
	border-left: var(--cfaq-answer-border-left, 1px) var(--cfaq-border-style, solid) var(--cfaq-border-color);
	border-top-left-radius: var(--cfaq-answer-radius-top-left, 0px);
	border-top-right-radius: var(--cfaq-answer-radius-top-right, 0px);
	border-bottom-right-radius: var(--cfaq-answer-radius-bottom-right, 0px);
	border-bottom-left-radius: var(--cfaq-answer-radius-bottom-left, 0px);
	transition: max-height .35s ease;
}


.cfaq-answer-content {
	padding: 16px 20px 20px;
	background: var(--cfaq-answer-bg);
	color: var(--cfaq-answer-text);
	font-family: var(--cfaq-answer-font);
	font-size: var(--cfaq-answer-size);
	font-weight: var(--cfaq-answer-weight);
	line-height: 1.6;
}

.cfaq-answer-content > :first-child {
	margin-top: 0;
}

.cfaq-answer-content > :last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.cfaq-question {
		padding: max(12px, calc(var(--cfaq-question-padding-y) * .85)) max(14px, calc(var(--cfaq-question-padding-x) * .8));
		gap: 12px;
	}

	.cfaq-answer-content {
		padding: 14px 15px 18px;
	}
}

/* Multiple FAQ collections / "Semua FAQ" mode */
.cfaq-collection > .cfaq:first-child {
	margin-top: 0;
}

.cfaq-collection > .cfaq:last-child {
	margin-bottom: 0;
}

.cfaq-elementor-widget > .cfaq:first-child {
	margin-top: 0;
}

.cfaq-elementor-widget > .cfaq:last-child {
	margin-bottom: 0;
}

/* v1.4.8 — isolate FAQ buttons from theme / Elementor global button states. */
.cfaq-question,
.cfaq-question:hover,
.cfaq-question:active,
.cfaq-question:focus {
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	box-shadow: none !important;
}

/*
 * A mouse click should never show the browser/theme blue focus state.
 * Keyboard users still get a visible focus indicator through :focus-visible.
 */
.cfaq-question:focus:not(:focus-visible) {
	outline: none !important;
	border-color: var(--cfaq-border-color) !important;
	background: var(--cfaq-question-bg) !important;
	color: var(--cfaq-question-text) !important;
}

.cfaq-question:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px;
	border-color: var(--cfaq-border-color) !important;
}

/* Keep the intended active appearance when the accordion is open. */
.cfaq-question.is-open:focus,
.cfaq-question.is-open:focus-visible {
	background: var(--cfaq-question-active-bg) !important;
	color: var(--cfaq-question-active-text) !important;
	border-color: var(--cfaq-border-color) !important;
}


/* Category tabs — separate visual system from accordion questions. */
.cfaq-category-tabs-wrap {
	width: 100%;
	margin: 20px 0;
}

.cfaq-category-tab-list {
	display: flex;
	align-items: center;
	justify-content: var(--cfaq-tab-align, flex-start);
	gap: var(--cfaq-tab-gap, 10px);
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.cfaq-category-tab {
	appearance: none;
	-webkit-appearance: none;
	border: var(--cfaq-tab-border-width, 1px) solid var(--cfaq-tab-border-color, #dddddd);
	background: var(--cfaq-tab-bg, #ffffff);
	color: var(--cfaq-tab-text, #172b4d);
	padding: var(--cfaq-tab-padding-y, 10px) var(--cfaq-tab-padding-x, 18px);
	border-radius: var(--cfaq-tab-radius, 6px);
	font-family: var(--cfaq-tab-font, inherit);
	font-size: var(--cfaq-tab-size, 16px);
	font-weight: var(--cfaq-tab-weight, 600);
	line-height: 1.3;
	cursor: pointer;
	box-shadow: none !important;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.cfaq-category-tab:hover {
	background: var(--cfaq-tab-hover-bg, #f7f7f7);
	color: var(--cfaq-tab-hover-text, #172b4d);
}

.cfaq-category-tab.is-active {
	background: var(--cfaq-tab-active-bg, #0d6efd);
	color: var(--cfaq-tab-active-text, #ffffff);
	border-color: var(--cfaq-tab-active-bg, #0d6efd);
}

.cfaq-category-tab:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

.cfaq-category-tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.cfaq-category-panel[hidden] {
	display: none !important;
}

.cfaq-category-panel {
	width: 100%;
}

@media (max-width: 600px) {
	.cfaq-category-tab-list {
		gap: max(8px, var(--cfaq-tab-gap, 10px));
		overflow-x: auto;
		flex-wrap: nowrap;
		justify-content: flex-start;
		padding-bottom: 4px;
	}

	.cfaq-category-tab {
		flex: 0 0 auto;
		padding: max(9px, calc(var(--cfaq-tab-padding-y, 10px) * .9)) max(14px, calc(var(--cfaq-tab-padding-x, 18px) * .8));
	}
}


/* v1.6.0 — Responsive controls. Desktop uses normal tabs; tablet/mobile can use a select. */
.cfaq-category-select-wrap {
	display: none;
	width: 100%;
	margin: 0 0 20px;
}

.cfaq-category-select {
	width: 100%;
	min-height: 44px;
	padding: 10px 40px 10px 14px;
	border: var(--cfaq-tab-border-width, 1px) solid var(--cfaq-tab-border-color, #dddddd);
	border-radius: var(--cfaq-tab-radius, 6px);
	background: var(--cfaq-tab-bg, #fff);
	color: var(--cfaq-tab-text, #172b4d);
	font-family: var(--cfaq-tab-font, inherit);
	font-size: var(--cfaq-tab-size, 16px);
	font-weight: var(--cfaq-tab-weight, 600);
	line-height: 1.3;
	cursor: pointer;
}

.cfaq-category-select:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (max-width: 1024px) {
	.cfaq[style*="--cfaq-responsive-enabled:1"],
	.cfaq-elementor-widget[style*="--cfaq-responsive-enabled:1"] .cfaq,
	.cfaq-faq-tabs[style*="--cfaq-responsive-enabled:1"] .cfaq,
	.cfaq-faq-tabs[style*="--cfaq-responsive-enabled:1"] {
		--cfaq-question-size: var(--cfaq-tablet-question-size);
		--cfaq-answer-size: var(--cfaq-tablet-answer-size);
		--cfaq-question-padding-y: var(--cfaq-tablet-question-padding-y);
		--cfaq-question-padding-x: var(--cfaq-tablet-question-padding-x);
		--cfaq-gap: var(--cfaq-tablet-item-gap);
		--cfaq-tab-size: var(--cfaq-tablet-tab-size);
		--cfaq-tab-gap: var(--cfaq-tablet-tab-gap);
		--cfaq-tab-padding-y: var(--cfaq-tablet-tab-padding-y);
		--cfaq-tab-padding-x: var(--cfaq-tablet-tab-padding-x);
	}

	.cfaq-faq-tabs[style*="--cfaq-responsive-enabled:1"] .cfaq-answer-content {
		padding: var(--cfaq-tablet-answer-padding-y) var(--cfaq-tablet-answer-padding-x) calc(var(--cfaq-tablet-answer-padding-y) + 4px);
	}

	.cfaq-faq-tabs[style*="--cfaq-responsive-enabled:1"] .cfaq-category-tab-list {
		gap: var(--cfaq-tablet-tab-gap);
	}

	/* Tablet default: select mode. The data attribute is toggled by JS so a
	 * setting change does not require separate markup. */
	.cfaq-faq-tabs[data-tablet-tab-mode="dropdown"][style*="--cfaq-responsive-enabled:1"] .cfaq-category-tab-list {
		display: none;
	}
	.cfaq-faq-tabs[data-tablet-tab-mode="dropdown"][style*="--cfaq-responsive-enabled:1"] .cfaq-category-select-wrap {
		display: block;
	}
}

@media (max-width: 767px) {
	.cfaq[style*="--cfaq-responsive-enabled:1"],
	.cfaq-elementor-widget[style*="--cfaq-responsive-enabled:1"] .cfaq,
	.cfaq-faq-tabs[style*="--cfaq-responsive-enabled:1"] .cfaq,
	.cfaq-faq-tabs[style*="--cfaq-responsive-enabled:1"] {
		--cfaq-question-size: var(--cfaq-mobile-question-size);
		--cfaq-answer-size: var(--cfaq-mobile-answer-size);
		--cfaq-question-padding-y: var(--cfaq-mobile-question-padding-y);
		--cfaq-question-padding-x: var(--cfaq-mobile-question-padding-x);
		--cfaq-gap: var(--cfaq-mobile-item-gap);
		--cfaq-tab-size: var(--cfaq-mobile-tab-size);
		--cfaq-tab-gap: var(--cfaq-mobile-tab-gap);
		--cfaq-tab-padding-y: var(--cfaq-mobile-tab-padding-y);
		--cfaq-tab-padding-x: var(--cfaq-mobile-tab-padding-x);
	}

	.cfaq-faq-tabs[style*="--cfaq-responsive-enabled:1"] .cfaq-answer-content {
		padding: var(--cfaq-mobile-answer-padding-y) var(--cfaq-mobile-answer-padding-x) calc(var(--cfaq-mobile-answer-padding-y) + 4px);
	}

	.cfaq-faq-tabs[data-mobile-tab-mode="dropdown"][style*="--cfaq-responsive-enabled:1"] .cfaq-category-tab-list {
		display: none;
	}
	.cfaq-faq-tabs[data-mobile-tab-mode="dropdown"][style*="--cfaq-responsive-enabled:1"] .cfaq-category-select-wrap {
		display: block;
	}

	.cfaq-question {
		gap: 10px;
	}

	.cfaq-question-text {
		overflow-wrap: anywhere;
	}
}

/* When responsive settings are disabled, keep the original desktop-style
 * presentation at every viewport size. */
@media (max-width: 600px) {
	.cfaq[style*="--cfaq-responsive-enabled:0"] .cfaq-question,
	.cfaq-elementor-widget[style*="--cfaq-responsive-enabled:0"] .cfaq-question,
	.cfaq-faq-tabs[style*="--cfaq-responsive-enabled:0"] .cfaq-question {
		padding: max(12px, calc(var(--cfaq-question-padding-y) * .85)) max(14px, calc(var(--cfaq-question-padding-x) * .8));
	}
	.cfaq[style*="--cfaq-responsive-enabled:0"] .cfaq-answer-content,
	.cfaq-elementor-widget[style*="--cfaq-responsive-enabled:0"] .cfaq-answer-content,
	.cfaq-faq-tabs[style*="--cfaq-responsive-enabled:0"] .cfaq-answer-content {
		padding: 14px 15px 18px;
	}
}