.ftw-faq-widget {
	width: 100%;
}

/* ---------- Tabs ---------- */
.ftw-tabs-outer {
	display: flex;
	width: 100%;
	margin-bottom: 40px;
}

.ftw-tabs-wrapper {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	background: #ffffff;
	border: 1px solid #2a2a9c;
	border-radius: 12px;
	padding: 6px;
	max-width: 100%;
}

.ftw-tab-btn {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: none;
	cursor: pointer;
	color: #2a2aa0;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.2;
	padding: 12px 24px;
	border-radius: 8px;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ftw-tab-btn.is-active {
	background: #2a2aa0;
	color: #ffffff;
}

/* No hover styling — state only changes on click/active */
.ftw-tab-btn:hover {
	background: transparent;
	color: #2a2aa0;
}
.ftw-tab-btn.is-active:hover {
	background: #2a2aa0;
	color: #ffffff;
}
.ftw-tab-btn:focus,
.ftw-tab-btn:active {
	outline: none;
	box-shadow: none;
}

/* ---------- List ---------- */
.ftw-list {
	width: 100%;
	counter-reset: ftw-counter;
}

.ftw-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	column-gap: 16px;
	align-items: start;
	border-bottom: 1px solid #e7e7ef;
	padding: 28px 0;
}

.ftw-item:first-child {
	border-top: 1px solid #e7e7ef;
}

.ftw-item[style*="display: none"] {
	border: none !important;
	padding: 0 !important;
}

/* The header is a plain wrapper: its children become direct grid items of
   .ftw-item so the number / question / icon sit on row 1 in their own
   columns, and the answer (row 2) can align its start to the question's
   column instead of the number's. */
.ftw-item-header {
	display: contents;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* No hover background/highlight on the row */
.ftw-item-header:hover .ftw-item-question,
.ftw-item-header:hover .ftw-item-number,
.ftw-item-header:hover .ftw-item-icon {
	background: transparent;
}
.ftw-item:hover,
.ftw-item-header:active,
.ftw-item-header:focus {
	background: transparent;
	outline: none;
	box-shadow: none;
}
.ftw-item-header:focus-visible .ftw-item-question {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.ftw-item-number {
	grid-column: 1;
	grid-row: 1;
	font-size: 18px;
	color: #1a1a2e;
	margin-right: 32px;
	min-width: 32px;
}

/* Numbers are generated (not hard-coded) so each filtered tab restarts at 1.
   Items hidden via display:none (JS filtering) are skipped automatically —
   the counter only increments for items that are actually visible. */
.ftw-item-number::before {
	counter-increment: ftw-counter;
	content: counter( ftw-counter );
}

.ftw-list.ftw-numfmt-padded .ftw-item-number::before {
	content: counter( ftw-counter, decimal-leading-zero );
}

.ftw-item-question {
	grid-column: 2;
	grid-row: 1;
	font-size: 22px;
	color: #2a2aa0;
	font-weight: 500;
	line-height: 1.35;
}

.ftw-item-icon {
	grid-column: 3;
	grid-row: 1;
	position: relative;
	width: 20px;
	height: 20px;
	color: #2a2aa0;
	align-self: center;
}

.ftw-icon-plus_minus::before,
.ftw-icon-plus_minus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
}
.ftw-icon-plus_minus::before {
	width: 16px;
	height: 2px;
}
.ftw-icon-plus_minus::after {
	width: 2px;
	height: 16px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.ftw-item.is-open .ftw-icon-plus_minus::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

.ftw-icon-chevron::before {
	content: "";
	position: absolute;
	top: 40%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
	transition: transform 0.25s ease;
}
.ftw-item.is-open .ftw-icon-chevron::before {
	transform: translate(-50%, -50%) rotate(225deg);
}

/* Body sits on row 2, starting at the question's column (col 2) and
   spanning through the icon column so long answers can wrap edge to edge,
   while still starting flush under the question text. */
.ftw-item-body {
	grid-column: 2 / -1;
	grid-row: 2;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.ftw-item.is-open .ftw-item-body {
	grid-template-rows: 1fr;
}

.ftw-item-body > .ftw-item-answer {
	overflow: hidden;
}

.ftw-item-answer {
	min-height: 0;
	font-size: 16px;
	line-height: 1.6;
	color: #5a5a6e;
	margin-top: 12px;
}

.ftw-item-answer p {
	margin: 0 0 0.75em;
}
.ftw-item-answer p:last-child {
	margin-bottom: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
	.ftw-tabs-outer {
		margin-bottom: 24px;
	}
	.ftw-tabs-wrapper {
		width: 100%;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
	}
	.ftw-tab-btn {
		padding: 10px 16px;
		font-size: 14px;
	}
	.ftw-item {
		padding: 20px 0;
		column-gap: 10px;
	}
	.ftw-item-number {
		font-size: 14px;
		margin-right: 12px;
		min-width: 24px;
	}
	.ftw-item-question {
		font-size: 17px;
	}
	.ftw-item-answer {
		font-size: 14px;
		margin-top: 8px;
	}
	.ftw-item-icon {
		width: 16px;
		height: 16px;
	}
}