/* ==========================================================================
   FAQ Accordion Pro — Frontend Styles
   Every design token comes from CSS variables injected from admin settings.
   ========================================================================== */

.fap-wrap,
.fap-wrap * {
	box-sizing: border-box;
}

.fap-wrap {
	width: 100%;
	max-width: var(--fap-container-max, 1280px);
	margin: 0 auto;
	padding: 0;
	background: var(--fap-bg, #fff);
	color: var(--fap-text, #1a1a1a);
	font-family: var(--fap-font-body, system-ui, sans-serif);
	letter-spacing: var(--fap-letter-spacing, 0);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---------- Search ---------- */
.fap-search {
	margin-bottom: 28px;
}

.fap-search-input {
	width: 100%;
	max-width: 480px;
	padding: 14px 20px;
	font-family: inherit;
	font-size: 15px;
	color: var(--fap-text);
	background: transparent;
	border: 1px solid var(--fap-divider);
	border-radius: var(--fap-tab-radius, 16px);
	outline: none;
	transition: border-color 200ms ease;
}

.fap-search-input:focus {
	border-color: var(--fap-accent);
}

/* ---------- Container ---------- */
.fap-container {
	display: grid;
	gap: var(--fap-col-gap, 80px);
}

.fap-layout-two-column .fap-container {
	grid-template-columns: minmax(260px, 1fr) minmax(0, 1.8fr);
	align-items: start;
}

.fap-layout-single .fap-container {
	grid-template-columns: 1fr;
}

/* ---------- Tabs (left column) ---------- */
.fap-tabs-col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: sticky;
	top: 32px;
}

.fap-tab {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: var(--fap-tab-py, 18px) var(--fap-tab-px, 22px);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--fap-tab-radius, 16px);
	cursor: pointer;
	text-align: left;
	font-family: var(--fap-font-category, var(--fap-font-body, inherit));
	font-size: var(--fap-fs-category, 16px);
	font-weight: var(--fap-fw-category, 500);
	color: var(--fap-text);
	transition:
		background-color var(--fap-anim-speed, 450ms) var(--fap-anim-easing, cubic-bezier(0.22, 1, 0.36, 1)),
		border-color var(--fap-anim-speed, 450ms) var(--fap-anim-easing, cubic-bezier(0.22, 1, 0.36, 1)),
		color 200ms ease,
		transform 200ms ease;
}

.fap-tab:hover {
	background: color-mix(in srgb, var(--fap-active-bg) 50%, transparent);
}

.fap-tab.is-active {
	background: var(--fap-active-bg);
	border-color: var(--fap-active-border);
}

.fap-tab-dot {
	width: var(--fap-tab-dot, 8px);
	height: var(--fap-tab-dot, 8px);
	border-radius: 50%;
	background: var(--fap-muted);
	flex-shrink: 0;
	transition: background-color var(--fap-anim-speed) var(--fap-anim-easing);
}

.fap-tab.is-active .fap-tab-dot {
	background: var(--fap-accent);
}

.fap-tab-label {
	flex: 1;
}

.fap-tab-count {
	font-family: var(--fap-font-number, var(--fap-font-display, serif));
	font-size: var(--fap-fs-number, 15px);
	color: var(--fap-muted);
	font-weight: 400;
	transition: color var(--fap-anim-speed) var(--fap-anim-easing);
}

.fap-count-italic-dash,
.fap-count-parens,
.fap-count-plain {
	font-style: italic;
}

.fap-tab.is-active .fap-tab-count {
	color: var(--fap-number-color, var(--fap-accent));
}

.fap-tab:focus-visible {
	outline: 2px solid var(--fap-accent);
	outline-offset: 2px;
}

/* ---------- Content (right column) ---------- */
.fap-content-col {
	min-width: 0;
}

.fap-panel {
	display: none;
}

.fap-panel.is-active {
	display: flex;
	flex-direction: column;
	gap: var(--fap-item-spacing, 14px);
}

/* ---------- Accordion Items ---------- */
.fap-item {
	background: var(--fap-item-bg, transparent);
	border: var(--fap-item-border-width, 1px) solid var(--fap-item-border-color, #ececec);
	border-radius: var(--fap-item-radius, 22px);
	margin-block: var(--fap-item-margin-y, 0px);
	overflow: hidden;
	transition:
		background-color var(--fap-anim-speed, 450ms) var(--fap-anim-easing, cubic-bezier(0.22, 1, 0.36, 1)),
		border-color var(--fap-anim-speed, 450ms) var(--fap-anim-easing, cubic-bezier(0.22, 1, 0.36, 1)),
		box-shadow var(--fap-anim-speed, 450ms) var(--fap-anim-easing, cubic-bezier(0.22, 1, 0.36, 1));
}

.fap-item:hover {
	background: var(--fap-item-bg-hover, #fafafa);
	border-color: var(--fap-item-border-hover, #dddddd);
}

.fap-item.is-open {
	background: var(--fap-item-bg-active, var(--fap-item-bg, #fff));
	border-color: var(--fap-item-border-active, var(--fap-active-border, #f5d5dc));
}

/* ---------- Question ---------- */
.fap-question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--fap-icon-gap, 24px);
	width: 100%;
	padding: var(--fap-item-py, 22px) var(--fap-item-px, 30px);
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--fap-font-question, var(--fap-font-body, inherit));
	font-size: var(--fap-fs-question, 19px);
	font-weight: var(--fap-fw-question, 500);
	line-height: 1.4;
	color: var(--fap-text);
	transition: color 200ms ease;
}

.fap-item:hover .fap-question,
.fap-question:hover {
	color: var(--fap-accent);
}

.fap-item:hover .fap-icon,
.fap-question:hover .fap-icon {
	color: var(--fap-icon-color-hover, var(--fap-accent));
}

/* Open-state: question + icon adopt the active color. */
.fap-item.is-open .fap-question {
	color: var(--fap-question-active, var(--fap-accent));
}

.fap-item.is-open .fap-icon {
	color: var(--fap-icon-color-active, var(--fap-question-active, var(--fap-accent)));
}

.fap-question:focus-visible {
	outline: 2px solid var(--fap-accent);
	outline-offset: -2px;
	border-radius: inherit;
}

.fap-question-text {
	flex: 1;
}

/* ---------- Icon ---------- */
.fap-icon {
	width: var(--fap-icon-size, 18px);
	height: var(--fap-icon-size, 18px);
	flex-shrink: 0;
	color: var(--fap-icon-color, var(--fap-text));
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 4px;
	transition: color 200ms ease;
}

.fap-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.fap-icon-closed,
.fap-icon-open {
	position: absolute;
	inset: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		opacity var(--fap-anim-speed, 450ms) var(--fap-anim-easing, cubic-bezier(0.22, 1, 0.36, 1)),
		transform var(--fap-anim-speed, 450ms) var(--fap-anim-easing, cubic-bezier(0.22, 1, 0.36, 1));
}

.fap-icon-closed {
	opacity: 1;
	transform: rotate(0deg);
}

.fap-icon-open {
	opacity: 0;
	transform: rotate(-90deg);
}

.fap-item.is-open .fap-icon-closed {
	opacity: 0;
	transform: rotate(90deg);
}

.fap-item.is-open .fap-icon-open {
	opacity: 1;
	transform: rotate(0deg);
}

/* ---------- Answer ----------
   No CSS transitions here on purpose. The JS drives height + opacity together
   through a single Web Animations API call so the two properties stay
   frame-locked — no desync, no jumps, no lag.
*/
.fap-answer {
	overflow: hidden;
	height: 0;
	opacity: 0;
	will-change: height, opacity;
}

.fap-item.is-open .fap-answer {
	height: auto;
	opacity: 1;
}

.fap-answer[hidden] {
	display: none;
}

.fap-answer-inner {
	font-family: var(--fap-font-answer, var(--fap-font-body, system-ui, sans-serif));
	padding:
		var(--fap-answer-pt, 4px)
		var(--fap-answer-px, 30px)
		var(--fap-answer-pb, 8px);
	font-size: var(--fap-fs-answer, 15px);
	line-height: var(--fap-lh-answer, 1.65);
	color: var(--fap-muted);
	max-width: 65ch;
}

.fap-answer-inner p:first-child {
	margin-top: 0;
}

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

.fap-answer-inner a {
	color: var(--fap-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.fap-answer-inner ul,
.fap-answer-inner ol {
	padding-left: 22px;
	margin: 12px 0;
}

.fap-answer-inner li {
	margin-bottom: 6px;
}

/* ---------- Stagger entrance animation ---------- */
.fap-wrap[data-stagger="1"] .fap-panel.is-active .fap-item {
	animation: fapFadeIn 500ms var(--fap-anim-easing, ease) backwards;
}

.fap-wrap[data-stagger="1"] .fap-panel.is-active .fap-item:nth-child(1) { animation-delay: 0ms; }
.fap-wrap[data-stagger="1"] .fap-panel.is-active .fap-item:nth-child(2) { animation-delay: 60ms; }
.fap-wrap[data-stagger="1"] .fap-panel.is-active .fap-item:nth-child(3) { animation-delay: 120ms; }
.fap-wrap[data-stagger="1"] .fap-panel.is-active .fap-item:nth-child(4) { animation-delay: 180ms; }
.fap-wrap[data-stagger="1"] .fap-panel.is-active .fap-item:nth-child(5) { animation-delay: 240ms; }
.fap-wrap[data-stagger="1"] .fap-panel.is-active .fap-item:nth-child(n+6) { animation-delay: 300ms; }

@keyframes fapFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- Empty states ---------- */
.fap-empty,
.fap-no-faqs {
	padding: 40px 0;
	color: var(--fap-muted);
	font-style: italic;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.fap-layout-two-column .fap-container {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.fap-tabs-col {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 4px;
	}

	.fap-tab {
		padding: 12px 18px;
		flex: 1 1 auto;
	}

	.fap-question {
		font-size: 17px;
		padding: calc(var(--fap-item-py, 22px) * 0.85) calc(var(--fap-item-px, 30px) * 0.8);
		gap: 16px;
	}

	.fap-answer-inner {
		padding-left: calc(var(--fap-answer-px, 30px) * 0.8);
		padding-right: calc(var(--fap-answer-px, 30px) * 0.8);
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.fap-wrap {
		padding: 0 16px;
	}

	.fap-tab {
		font-size: 15px;
	}

	.fap-tab-count {
		display: none;
	}

	.fap-question {
		font-size: 16px;
		gap: 12px;
	}

	.fap-item {
		border-radius: calc(var(--fap-item-radius, 22px) * 0.8);
	}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.fap-wrap *,
	.fap-wrap *::before,
	.fap-wrap *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}