/*
 * FAQ under the page text (meta box "FAQ" on pages and posts).
 * Same look as the bookmakers list: white cards, 1px hairlines, 16px corners, dark number tiles,
 * and yellow for the open question. Font weights: 600 for questions, 400-500 for the rest.
 * Built on native <details>, so it works without JavaScript. The shared name attribute
 * keeps one answer open at a time.
 */

.brs-faq {
	--brs-dark: #262626;
	--brs-yellow: #ffff00;
	--brs-yellow-soft: #fffbd6;
	--brs-red-dark: #b80000;
	--brs-text: #212529;
	--brs-line: #e7e7ec;
	--brs-soft: #f4f4f6;

	color: var(--brs-text);
}

.brs-faq *,
.brs-faq *::before,
.brs-faq *::after {
	box-sizing: border-box;
}

.brs-faq__title {
	margin: 0 0 16px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--brs-text);
}

.brs-faq__list {
	display: grid;
	gap: 10px;
}

.brs-faq__item {
	background: #fff;
	border: 1px solid var(--brs-line);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(38, 38, 38, 0.04), 0 6px 20px rgba(38, 38, 38, 0.06);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.brs-faq__item:hover {
	border-color: #d6d6dd;
}

.brs-faq__item[open] {
	border-color: #d6d6dd;
	box-shadow: 0 2px 4px rgba(38, 38, 38, 0.06), 0 14px 32px rgba(38, 38, 38, 0.1);
}

/* The question row is the clickable summary */
.brs-faq__q {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	cursor: pointer;
	list-style: none;
	border-radius: 16px;
}

.brs-faq__q::-webkit-details-marker {
	display: none;
}

.brs-faq__q:focus-visible {
	outline: 2px solid var(--brs-dark);
	outline-offset: 2px;
}

.brs-faq__num {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 28px;
	height: 28px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: var(--brs-dark);
	border-radius: 8px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.brs-faq__text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

/* Chevron: a rotated corner inside a soft circle */
.brs-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	background: var(--brs-soft);
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.brs-faq__icon::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 11px;
	width: 7px;
	height: 7px;
	border: solid var(--brs-dark);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform 0.25s ease, top 0.25s ease;
}

.brs-faq__item[open] .brs-faq__icon::before {
	top: 13px;
	transform: rotate(-135deg);
}

/* Open question: number tile and chevron turn yellow, like the top offer in the list */
.brs-faq__item[open] .brs-faq__num {
	color: var(--brs-dark);
	background: var(--brs-yellow);
}

.brs-faq__item[open] .brs-faq__icon {
	background: var(--brs-yellow-soft);
}

/* Answer: indented to line up with the question text (28px tile + 14px gap + 18px padding) */
.brs-faq__body {
	padding: 0 18px 18px 60px;
}

.brs-faq__item[open] .brs-faq__body {
	animation: brs-faq-in 0.28s ease-out;
}

@keyframes brs-faq-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.brs-faq__answer {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--brs-text);
}

.brs-faq__answer > :first-child {
	margin-top: 0;
}

.brs-faq__answer > :last-child {
	margin-bottom: 0;
}

.brs-faq__answer a {
	color: var(--brs-red-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.brs-faq__answer a:hover {
	text-decoration: none;
}

/* Phones: the answer uses the full width instead of the indent */
@media (max-width: 575.98px) {
	.brs-faq__q {
		gap: 12px;
		padding: 14px;
	}

	.brs-faq__text {
		font-size: 15px;
	}

	.brs-faq__body {
		padding: 0 14px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.brs-faq__item,
	.brs-faq__num,
	.brs-faq__icon,
	.brs-faq__icon::before {
		transition: none;
	}

	.brs-faq__item[open] .brs-faq__body {
		animation: none;
	}
}