/**
 * MxChat Advanced Content — FAQ block (plan-mxchat-20260521-f3e61e).
 *
 * Front-end accordion styling for the dynamic mxchat/faq block plus a little
 * editor chrome. Pure CSS / no-JS accordion via <details>/<summary>. Neutral
 * surface colors with the MxChat brand purple (#7873f5) as the single accent so
 * it sits cleanly inside any theme without fighting it.
 */

/* ── Front end ───────────────────────────────────────────────────── */
.mxchat-faq-block {
	margin: 1.5em 0;
}

.mxchat-faq-item {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	margin: 0 0 10px;
	background: #fff;
	overflow: hidden;
}

.mxchat-faq-item > summary {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding: 14px 44px 14px 16px;
	font-weight: 600;
	color: #1a1a2e;
	line-height: 1.4;
}

.mxchat-faq-item > summary::-webkit-details-marker {
	display: none;
}

.mxchat-faq-item > summary::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid #7873f5;
	border-bottom: 2px solid #7873f5;
	transform: translateY(-65%) rotate(45deg);
	transition: transform 0.2s ease;
}

.mxchat-faq-item[open] > summary::after {
	transform: translateY(-35%) rotate(225deg);
}

.mxchat-faq-item > summary:hover {
	background: #f7f7fd;
}

.mxchat-faq-answer {
	padding: 0 16px 16px;
	color: #4a5568;
	line-height: 1.65;
}

/* ── Editor ──────────────────────────────────────────────────────── */
.mxchat-faq-editor-help {
	margin: 0 0 12px;
	color: #64748b;
	font-style: italic;
}

.mxchat-faq-row {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 12px 12px 8px;
	margin: 0 0 12px;
	background: #fff;
}

.mxchat-faq-row .mxchat-faq-remove {
	margin-top: 4px;
}

.mxchat-faq-block-editor .mxchat-faq-add {
	margin-top: 4px;
}