/* Fanki — FAQ page. Depends on tokens.css + base.css. Behavior:
   assets/js/faq.js toggles aria-expanded + the [hidden] attribute; this
   file is purely the visual state driven by that attribute. */

.fanki-faq-layout {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fanki-space-8);
	align-items: flex-start;
	padding-bottom: var(--fanki-space-9);
}

.fanki-faq-main {
	flex: 1 1 480px;
}

.fanki-faq-list {
	/* Same bordered/Primary-Color-tinted card language as checkout's
	   .woocommerce-billing-fields/#order_review (checkout.css) — reuses the
	   exact same token/Customizer setting (Fanki: Pages > Checkout Page >
	   Form Background Color Transparency) so this page's design genuinely
	   matches checkout's, not just visually resembles it. */
	border: 1px solid var(--fanki-color-primary);
	border-radius: var(--fanki-radius-md);
	padding: var(--fanki-space-5);
	background: var(--fanki-checkout-form-bg);
}

.fanki-faq-item {
	border-bottom: 1px solid var(--fanki-color-border);
}

.fanki-faq-item:last-child {
	border-bottom: 0;
}

.fanki-faq-item h3 {
	margin: 0;
}

.fanki-faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fanki-space-4);
	width: 100%;
	padding: var(--fanki-space-5) 0;
	background: none;
	border: 0;
	text-align: left;
	font-size: var(--fanki-font-size-base);
	font-weight: var(--fanki-font-weight-semibold);
	color: var(--fanki-color-text);
	cursor: pointer;
}

/* Avoids doubling the card's own top padding with the first question's
   own padding-top. */
.fanki-faq-item:first-child .fanki-faq-item__question {
	padding-top: 0;
}

.fanki-faq-item__icon {
	flex-shrink: 0;
	color: var(--fanki-color-text-muted);
	transition: transform var(--fanki-transition-fast);
}

.fanki-faq-item__question[aria-expanded="true"] .fanki-faq-item__icon {
	transform: rotate(180deg);
	color: var(--fanki-color-primary);
}

.fanki-faq-item__answer {
	padding-bottom: var(--fanki-space-5);
	color: var(--fanki-color-text-muted);
	font-size: var(--fanki-font-size-sm);
	line-height: var(--fanki-line-height-relaxed);
}

.fanki-faq-item__answer p {
	margin: 0;
}

/* "Still need help?" sidebar card — mirrors checkout's #order_review:
   same card treatment, same sticky-under-the-header behavior. */

.fanki-faq-sidebar {
	flex: 0 0 360px;
}

.fanki-faq-support-card {
	border: 1px solid var(--fanki-color-primary);
	border-radius: var(--fanki-radius-md);
	padding: var(--fanki-space-5);
	background: var(--fanki-checkout-form-bg);
	position: sticky;
	top: calc(var(--fanki-header-height) + var(--fanki-space-4));
}

.fanki-faq-support-card h2 {
	font-size: var(--fanki-font-size-lg);
	margin-bottom: var(--fanki-space-2);
}

.fanki-faq-support-card p {
	color: var(--fanki-color-text-muted);
	font-size: var(--fanki-font-size-sm);
	line-height: var(--fanki-line-height-relaxed);
	margin-bottom: var(--fanki-space-4);
}

@media (max-width: 1024px) {
	.fanki-faq-sidebar {
		flex-basis: 100%;
	}

	.fanki-faq-support-card {
		position: static;
	}
}