/* Mani Simple Accordion 2026 — one file for RTL and LTR (logical properties) */
.msacc {
	--msacc-accent: var(--manisoft-accordion-accent, var(--bs-primary, #2563eb));
	--msacc-ink: var(--bs-emphasis-color, #1f2937);
	--msacc-q-bg: var(--bs-body-bg, #fff);
	--msacc-q-fg: var(--msacc-ink);
	--msacc-a-bg: var(--msacc-q-bg);
	--msacc-a-fg: color-mix(in srgb, var(--msacc-ink) 78%, transparent);
	--msacc-line: color-mix(in srgb, var(--msacc-ink) 12%, transparent);
	--msacc-soft: color-mix(in srgb, var(--msacc-accent) 8%, var(--msacc-q-bg));
	--msacc-radius: 14px;
	--msacc-gap: 12px;
	--msacc-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 26px -16px rgba(15, 23, 42, .25);
	--msacc-max: none;
	--msacc-ease: cubic-bezier(.2, .8, .2, 1);
	display: grid;
	gap: var(--msacc-gap);
	max-inline-size: var(--msacc-max);
	margin: 1.5rem auto;
	padding: 0;
	border: 0;
	background: none;
}
.msacc .msacc__item { position: relative; margin: 0 !important; border: 0 !important; background: none; border-radius: var(--msacc-radius) !important; overflow: visible; }
.msacc .msacc__q { margin: 0 !important; padding: 0 !important; font-size: inherit; line-height: inherit; border: 0; }

/* question button */
.msacc .msacc__btn {
	position: relative; display: flex; align-items: center; gap: 12px;
	inline-size: 100%; margin: 0; padding: 17px 20px; padding-inline-end: 56px;
	border: 0; border-radius: var(--msacc-radius); background: var(--msacc-q-bg);
	color: var(--msacc-q-fg); font: inherit; font-size: 16.5px; font-weight: 700; line-height: 1.7; text-align: start;
	cursor: pointer; box-shadow: none;
	transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, border-radius .25s ease;
}
.msacc .msacc__btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--msacc-accent) 45%, transparent); outline-offset: 2px; }
.msacc .msacc__title { flex: 1; min-inline-size: 0; }
.msacc .msacc__icon { flex: none; font-size: .95em; color: var(--msacc-accent); }
.msacc .msacc__dot { flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--msacc-accent); }

/* toggle: plus that turns into × , or a chevron */
.msacc .msacc__toggle {
	position: absolute; inset-inline-end: 16px; inset-block-start: 50%;
	display: grid; place-items: center; inline-size: 30px; block-size: 30px; margin-block-start: -15px;
	border-radius: 50%; background: var(--msacc-soft); color: var(--msacc-accent);
	transition: transform .3s var(--msacc-ease), background-color .25s ease, color .25s ease;
}
.msacc .msacc__toggle::before, .msacc .msacc__toggle::after { content: ""; position: absolute; inline-size: 12px; block-size: 2px; border-radius: 2px; background: currentColor; }
.msacc .msacc__toggle::after { transform: rotate(90deg); }
.msacc .msacc__btn:not(.collapsed) .msacc__toggle { transform: rotate(45deg); background: var(--msacc-accent); color: #fff; }
.msacc--toggle-chevron .msacc__toggle::after { display: none; }
.msacc--toggle-chevron .msacc__toggle::before {
	inline-size: 8px; block-size: 8px; background: none; border-radius: 1px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}
.msacc--toggle-chevron .msacc__btn:not(.collapsed) .msacc__toggle { transform: rotate(180deg); }
.msacc--toggle-chevron .msacc__btn:not(.collapsed) .msacc__toggle::before { transform: translateY(-2px) rotate(45deg); }

/* answer */
.msacc .msacc__a {
	padding: 4px 22px 22px; color: var(--msacc-a-fg); background: none;
	font-size: 15.5px; line-height: 2; border: 0 !important; margin: 0 !important;
}
.msacc .msacc__a > :first-child { margin-top: 0; }
.msacc .msacc__a > :last-child { margin-bottom: 0; }
.msacc .msacc__a a { color: var(--msacc-accent); text-decoration: underline; text-underline-offset: 3px; }
.msacc .msacc__a img { max-inline-size: 100%; height: auto; border-radius: calc(var(--msacc-radius) * .7); }

/* ================= templates ================= */

/* card (default): soft card, the open one gets an accent ring */
.msacc--card .msacc__item { background: var(--msacc-q-bg); border: 1px solid var(--msacc-line) !important; box-shadow: var(--msacc-shadow); transition: border-color .25s ease, box-shadow .25s ease; }
.msacc--card .msacc__item:has(.msacc__btn:not(.collapsed)) { border-color: color-mix(in srgb, var(--msacc-accent) 45%, transparent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--msacc-accent) 10%, transparent), var(--msacc-shadow); }
.msacc--card .msacc__a { background: var(--msacc-a-bg); border-radius: 0 0 var(--msacc-radius) var(--msacc-radius); }

/* classic (old «integrated» look): one box, accent bar on the start side */
.msacc--classic .msacc__item { background: var(--msacc-q-bg); border: 1px solid var(--msacc-line) !important; border-inline-start: 4px solid var(--msacc-accent) !important; box-shadow: var(--msacc-shadow); }
.msacc--classic .msacc__a { background: var(--msacc-a-bg); border-radius: 0 0 var(--msacc-radius) var(--msacc-radius); }

/* separated (old «question and answer apart») */
.msacc--separated .msacc__btn { border: 1px solid var(--msacc-line); box-shadow: var(--msacc-shadow); }
.msacc--separated .msacc__a {
	margin-top: 10px !important; padding: 20px 22px !important; background: var(--msacc-a-bg);
	border: 1px solid var(--msacc-line) !important; border-inline-start: 4px solid var(--msacc-accent) !important;
	border-radius: var(--msacc-radius); box-shadow: var(--msacc-shadow);
}

/* minimal: no boxes, thin lines between the questions */
.msacc--minimal { gap: 0; }
.msacc--minimal .msacc__item { border-radius: 0 !important; border-bottom: 1px solid var(--msacc-line) !important; }
.msacc--minimal .msacc__item:first-child { border-top: 1px solid var(--msacc-line) !important; }
.msacc--minimal .msacc__btn { background: none; border-radius: 0; padding-inline-start: 4px; padding-block: 20px; }
.msacc--minimal .msacc__btn:hover .msacc__title { color: var(--msacc-accent); }
.msacc--minimal .msacc__a { padding-inline: 4px; }

/* numbered: 01 02 03 circles */
.msacc--numbered .msacc__item { background: var(--msacc-q-bg); border: 1px solid var(--msacc-line) !important; box-shadow: var(--msacc-shadow); }
.msacc .msacc__num {
	flex: none; display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 12px;
	background: var(--msacc-soft); color: var(--msacc-accent); font-size: 14px; font-weight: 800; letter-spacing: .02em;
	transition: background-color .25s ease, color .25s ease;
}
.msacc--numbered .msacc__btn:not(.collapsed) .msacc__num { background: var(--msacc-accent); color: #fff; }
.msacc--numbered .msacc__a { padding-inline-start: 72px; }
@media (max-width: 575px) { .msacc--numbered .msacc__a { padding-inline-start: 22px; } }

/* pill: rounded question, soft answer panel */
.msacc--pill .msacc__btn { border-radius: 999px; background: var(--msacc-soft); }
.msacc--pill .msacc__btn:not(.collapsed) { background: var(--msacc-accent); color: #fff; }
.msacc--pill .msacc__btn:not(.collapsed) .msacc__icon { color: inherit; }
.msacc--pill .msacc__btn:not(.collapsed) .msacc__toggle { background: rgba(255, 255, 255, .22); }
.msacc--pill .msacc__a { margin: 10px 14px 4px !important; padding: 18px 22px !important; background: var(--msacc-a-bg); border-radius: var(--msacc-radius); border: 1px solid var(--msacc-line) !important; }

/* glass: for photo / dark backgrounds */
.msacc--glass .msacc__item {
	background: color-mix(in srgb, var(--msacc-q-bg) 55%, transparent); border: 1px solid rgba(255, 255, 255, .25) !important;
	-webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), var(--msacc-shadow);
}
.msacc--glass .msacc__btn { background: none; }

/* accent: the open question is filled with the accent colour */
.msacc--accent .msacc__item { background: var(--msacc-q-bg); border: 1px solid var(--msacc-line) !important; overflow: hidden; }
.msacc--accent .msacc__btn:not(.collapsed) { background: var(--msacc-accent); color: #fff; border-radius: var(--msacc-radius) var(--msacc-radius) 0 0; }
.msacc--accent .msacc__btn:not(.collapsed) .msacc__icon { color: inherit; }
.msacc--accent .msacc__btn:not(.collapsed) .msacc__toggle { background: rgba(255, 255, 255, .22); color: #fff; }
.msacc--accent .msacc__a { padding-top: 18px; background: var(--msacc-a-bg); }

/* hover */
.msacc .msacc__btn:hover .msacc__toggle { background: color-mix(in srgb, var(--msacc-accent) 18%, var(--msacc-q-bg)); }
.msacc .msacc__btn:not(.collapsed):hover .msacc__toggle { background: var(--msacc-accent); }
.msacc--pill .msacc__btn:not(.collapsed):hover .msacc__toggle, .msacc--accent .msacc__btn:not(.collapsed):hover .msacc__toggle { background: rgba(255, 255, 255, .3); }

/* dark sites */
@media (prefers-color-scheme: dark) {
	[data-bs-theme="dark"] .msacc { --msacc-ink: #eef1f4; --msacc-q-bg: #171b21; }
}
@media (max-width: 575px) {
	.msacc .msacc__btn { font-size: 15.5px; padding: 15px 16px; padding-inline-end: 52px; }
	.msacc .msacc__a { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) { .msacc * { transition: none !important; } }