/* ── benecaster-faq shortcode ─────────────────────────────────────────── */

.benecaster-faq {
	max-width: 768px;
}

/* Filter chips */

.benecaster-faq__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.benecaster-faq__chip {
	padding: 6px 18px;
	border: 1px solid #d1d5db;
	border-radius: 20px;
	background: #fff;
	color: #374151;
	cursor: pointer;
	font-size: 0.875rem;
	line-height: 1.5;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.benecaster-faq__chip:hover {
	border-color: #1a56db;
	color: #1a56db;
}

.benecaster-faq__chip--active {
	background: #1a56db;
	border-color: #1a56db;
	color: #fff;
}

.benecaster-faq__chip--active:hover {
	color: #fff;
}

/* Item visibility (toggled by JS) */

.benecaster-faq__item--hidden {
	display: none;
}

/* FAQ list */

.benecaster-faq__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Accordion mode */

.benecaster-faq__details {
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	overflow: hidden;
}

.benecaster-faq__details summary.benecaster-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	user-select: none;
}

.benecaster-faq__details summary.benecaster-faq__question::-webkit-details-marker {
	display: none;
}

.benecaster-faq__details summary.benecaster-faq__question::after {
	content: '+';
	flex-shrink: 0;
	margin-left: 12px;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
}

.benecaster-faq__details[open] > summary.benecaster-faq__question::after {
	content: '\2212'; /* − */
}

.benecaster-faq__details .benecaster-faq__answer {
	padding: 0 20px 16px;
}

/* Flat (expanded) mode */

.benecaster-faq__flat {
	padding: 20px 0;
	border-bottom: 1px solid #e5e7eb;
}

.benecaster-faq__flat:last-child {
	border-bottom: none;
}

.benecaster-faq__flat .benecaster-faq__question {
	margin: 0 0 8px;
	font-size: 1.0625rem;
	font-weight: 600;
}

.benecaster-faq__flat .benecaster-faq__answer {
	margin: 0;
}

/* ── Search mode (feature/docs-search item 4) ───────────────────────────── */

.benecaster-faq--search-mode {
	position: relative;
}

.benecaster-faq__search-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 14px;
}

.benecaster-faq__search-input {
	width: 100%;
	padding: 10px 14px;
	font-size: 16px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
	margin-bottom: 16px;
}

.benecaster-faq__search-input:focus {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
	border-color: #2563eb;
}

.benecaster-faq--search-mode .benecaster-faq__results {
	position: relative;
	min-height: 40px;
	margin-top: 16px;
}

.benecaster-faq__results--loading {
	opacity: 0.5;
	pointer-events: none;
}

.benecaster-faq__noscript,
.benecaster-faq__empty {
	color: #6b7280;
	font-size: 14px;
	margin: 12px 0;
}

.benecaster-faq__clear {
	background: none;
	border: 0;
	color: #2563eb;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	font: inherit;
}

.benecaster-faq__clear:hover,
.benecaster-faq__clear:focus {
	color: #1d4ed8;
}

.benecaster-faq__error {
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	padding: 10px 14px;
	margin: 12px 0;
}

.benecaster-faq__question-link {
	color: inherit;
	text-decoration: none;
}

.benecaster-faq__question-link:hover,
.benecaster-faq__question-link:focus {
	text-decoration: underline;
}

.benecaster-faq__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.benecaster-faq__spinner-inner {
	display: block;
	width: 24px;
	height: 24px;
	border: 3px solid #e5e7eb;
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: benecaster-faq-spin 0.8s linear infinite;
}

@keyframes benecaster-faq-spin {
	to { transform: rotate(360deg); }
}

/* ⚠⚠ **RESTORES `hidden` ON THIS PAGE'S OWN MARKUP, BECAUSE THE BROWSER'S RULE
 * CAN BE BEATEN BY A SINGLE LINE IN A THEME.** `[hidden] { display: none }` is a
 * *user-agent* rule, so ANY author rule setting `display` on the same element
 * outranks it outright and the element renders with the attribute still set.
 * The theme's `.bc-page .bc-form__field { display: flex }` did exactly that on
 * `/checkout/`, painting four empty boxes onto a live payment page; see the long
 * note in `checkout.css` for that instance.
 *
 * ⚠⚠ **THIS PAGE IS NOT AFFECTED TODAY, AND THAT IS WHY THE RULE IS HERE.** Its
 * toggled elements (the search spinner) happen to carry classes the theme does not
 * style — which is luck, not design, and one class rename away from the same
 * defect. **There is no runtime signal when it happens**: nothing throws, no
 * PHP test can observe computed style, and there is no vitest config in this
 * repository, so the only way it surfaces is somebody looking at the page.
 *
 * ⚠ **`!important` is deliberate.** Our selector and a theme's can have
 * identical specificity, so the winner would otherwise be decided by stylesheet
 * order between a theme and a plugin — which neither side controls and which
 * changes silently. `hidden` means *not rendered in any presentation*, so there
 * is no legitimate rule for this to override.
 *
 * ⚠ **Pinned by `tests/Architecture/HiddenAttributeRestoredTest.php`**, which
 * fails the build if this rule goes, and which also fails on a NEW page of this
 * plugin's own that hides markup without carrying the same line. **Do not delete
 * it if the theme is ever fixed** — this is what stops the plugin-side rules
 * being dropped as redundant, which would put the whole thing back the moment a
 * theme is changed or replaced. */
.benecaster-faq [hidden] {
	display: none !important;
}