/**
 * Modern FAQ Builder - Base Frontend Styles (compact)
 */

.mfb-faq-wrapper {
	--mfb-title-color: #1a1a2e;
	--mfb-question-color: #16213e;
	--mfb-answer-color: #4a4a68;
	--mfb-bg-color: #ffffff;
	--mfb-border-color: #e2e8f0;
	--mfb-icon-color: #3b82f6;
	--mfb-hover-color: #2563eb;
	--mfb-font-size: 14px;
	--mfb-radius: 6px;
	--mfb-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
	--mfb-pad-y: 0.6rem;
	--mfb-pad-x: 0.85rem;
	--mfb-gap: 8px;
	margin: 1rem 0;
	font-size: var(--mfb-font-size);
	line-height: 1.5;
	max-width: 100%;
}

.mfb-faq-title {
	color: var(--mfb-title-color);
	font-size: clamp(1.05rem, 1.5vw + 0.65rem, 1.2rem);
	margin: 0 0 0.4rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.mfb-faq-description {
	color: var(--mfb-answer-color);
	font-size: 0.9em;
	margin-bottom: 0.75rem;
	line-height: 1.5;
}

.mfb-faq-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Responsive column layouts */
.mfb-faq-list.mfb-cols-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mfb-gap);
	align-items: start;
}

.mfb-faq-list.mfb-cols-2 > .mfb-faq-item {
	margin: 0;
	width: 100%;
	min-width: 0;
}

@media (max-width: 782px) {
	.mfb-faq-list.mfb-cols-2 {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

@media (max-width: 480px) {
	.mfb-faq-wrapper {
		--mfb-pad-y: 0.55rem;
		--mfb-pad-x: 0.75rem;
		--mfb-font-size: 13px;
	}
	.mfb-faq-list.mfb-cols-2 {
		gap: 6px;
	}
}

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

.mfb-faq-question-wrap {
	margin: 0;
}

.mfb-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--mfb-pad-y) var(--mfb-pad-x);
	background: var(--mfb-bg-color);
	border: none;
	cursor: pointer;
	text-align: left;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--mfb-question-color);
	gap: var(--mfb-gap);
	line-height: 1.4;
	transition: color 0.2s, background 0.2s;
}

.mfb-faq-question:hover,
.mfb-faq-question:focus {
	color: var(--mfb-hover-color);
	outline: 1px solid var(--mfb-icon-color);
	outline-offset: -1px;
}

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

.mfb-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--mfb-icon-color);
	position: relative;
}

.mfb-icon-plus,
.mfb-icon-minus {
	display: block;
	width: 11px;
	height: 2px;
	background: currentColor;
	position: absolute;
	transition: transform 0.22s ease, opacity 0.22s ease;
}

.mfb-icon-plus::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 11px;
	background: currentColor;
	left: 4.5px;
	top: -4.5px;
	transition: transform 0.22s ease, opacity 0.22s ease;
}

.mfb-icon-minus { opacity: 0; transform: rotate(90deg); }

.mfb-is-open .mfb-icon-plus { opacity: 0; transform: rotate(90deg); }
.mfb-is-open .mfb-icon-plus::after { opacity: 0; }
.mfb-is-open .mfb-icon-minus { opacity: 1; transform: rotate(0); }

.mfb-faq-answer {
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.mfb-no-animation .mfb-faq-answer {
	transition: none;
}

.mfb-faq-answer-inner {
	padding: 0 var(--mfb-pad-x) calc(var(--mfb-pad-y) + 0.1rem);
	color: var(--mfb-answer-color);
	font-size: 0.875rem;
	line-height: 1.55;
}

.mfb-faq-answer-inner p {
	margin: 0 0 0.5em;
	font-size: inherit;
	line-height: inherit;
}

.mfb-faq-answer-inner p:first-child { margin-top: 0; }
.mfb-faq-answer-inner p:last-child { margin-bottom: 0; }

.mfb-faq-answer[hidden] {
	display: block !important;
	max-height: 0 !important;
	padding: 0;
	visibility: hidden;
}

.mfb-faq-item.mfb-is-open .mfb-faq-answer {
	max-height: 2000px;
	visibility: visible;
}

.mfb-error {
	color: #b91c1c;
	padding: 0.65em 0.85em;
	font-size: 0.875rem;
	background: #fef2f2;
	border-radius: 4px;
}

/* Theme style - minimal interference */
.mfb-style-theme .mfb-faq-question {
	background: transparent;
	padding-left: 0;
	padding-right: 0;
	font-size: inherit;
}
.mfb-style-theme .mfb-faq-item { border-color: currentColor; opacity: 0.2; }
.mfb-style-theme .mfb-faq-answer-inner { padding-left: 0; padding-right: 0; }
.mfb-style-theme .mfb-faq-title { font-size: inherit; }

/* RTL */
.mfb-faq-wrapper.rtl .mfb-faq-question { text-align: right; }