/*
 * Bookmakers list ([bookmakers-list]).
 * Layout A: ranked offer cards (default). Layout B: compact table (layout="table").
 * Brand colours from the site logo and header: dark #262626, yellow #ffff00, red #ff0000.
 * The red button uses #e30000 so white text stays readable (contrast 4.9:1).
 * Layout follows the width of the list itself (container queries), not the screen.
 *
 * Style rules kept throughout:
 * - Font weights stay light: 700 only for the card name, 600 for key values and buttons,
 *   400-500 everywhere else.
 * - Borders are 1px hairlines only.
 * - No all-caps text: labels and headers are in normal sentence case.
 */

/* ===========================================================================
 * Shared: star rating. 5 stars for a 0-10 score, partly filled (5.0 = 2.5 stars).
 * One element: a gold/grey gradient cut to star shapes with a CSS mask.
 * ========================================================================= */

.brs-stars {
	--brs-star: 16px;
	--brs-star-on: #f5b301;
	--brs-star-off: #dcdce2;

	display: block;
	flex: 0 0 auto;
	width: calc(var(--brs-star) * 5);
	height: var(--brs-star);
	background: linear-gradient(90deg, var(--brs-star-on) var(--brs-fill, 0%), var(--brs-star-off) var(--brs-fill, 0%));
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.94 6.36 6.96.73-5.2 4.68 1.47 6.85L12 17.6l-6.17 3.52 1.47-6.85-5.2-4.68 6.96-.73z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.94 6.36 6.96.73-5.2 4.68 1.47 6.85L12 17.6l-6.17 3.52 1.47-6.85-5.2-4.68 6.96-.73z'/%3E%3C/svg%3E");
	-webkit-mask-size: var(--brs-star) var(--brs-star);
	mask-size: var(--brs-star) var(--brs-star);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-position: left center;
	mask-position: left center;
}

/* ===========================================================================
 * Layout A: ranked offer cards
 * ========================================================================= */

.brs-list {
	--brs-dark: #262626;
	--brs-yellow: #ffff00;
	--brs-yellow-soft: #fffbd6;
	--brs-red: #e30000;
	--brs-red-dark: #b80000;
	--brs-text: #212529;
	--brs-muted: #6d7277;
	--brs-line: #e7e7ec;
	--brs-soft: #f4f4f6;
	--brs-ok: #15803d;

	container-type: inline-size;
	margin: 1.5rem 0 2rem;
	color: var(--brs-text);
}

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

.brs-list .brs-list__items {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.brs-list .brs-offer {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin: 0;
	padding: 14px;
	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-list .brs-offer:hover {
	border-color: #d6d6dd;
	box-shadow: 0 2px 4px rgba(38, 38, 38, 0.06), 0 14px 32px rgba(38, 38, 38, 0.1);
}

/* Rank badge on the card corner, so it never covers the logo */
.brs-list .brs-offer__rank {
	position: absolute;
	top: -9px;
	left: -9px;
	z-index: 1;
	display: grid;
	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;
}

.brs-list .brs-offer--top .brs-offer__rank {
	color: var(--brs-dark);
	background: var(--brs-yellow);
}

/* Logo panel: the logo background colour from the admin fills it */
.brs-offer__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 92px;
	padding: 14px 18px;
	overflow: hidden;
	background-color: var(--brs-soft);
	border-radius: 12px;
}

.brs-offer__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.brs-offer__initials {
	font-size: 26px;
	font-weight: 600;
	color: var(--brs-dark);
}

/* Name, then the rating on one line: stars and the score side by side.
   The name wrapper is flattened (display: contents) so the stars and the score share a row. */
.brs-offer__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin-bottom: 12px;
}

.brs-offer__title {
	display: contents;
}

.brs-offer__name {
	flex: 0 0 100%;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--brs-text);
}

.brs-offer__score {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	color: var(--brs-muted);
}

.brs-offer__score strong {
	font-size: 15px;
	font-weight: 600;
	color: var(--brs-text);
}

/* Bonuses */
.brs-offer__label {
	display: block;
	margin-bottom: 2px;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--brs-muted);
}

.brs-offer__bonus {
	padding: 9px 12px;
	background: var(--brs-yellow-soft);
	border-radius: 10px;
}

.brs-offer__bonus .brs-offer__label {
	color: #5c5a45;
}

.brs-offer__bonus-value {
	display: block;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--brs-text);
}

.brs-offer__deposit {
	margin-top: 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
}

.brs-offer__deposit .brs-offer__label {
	display: inline;
	font-size: 14px;
}

/* Payment methods: pills with a check mark */
.brs-list .brs-offer__pay {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.brs-list .brs-offer__pay li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 3px 10px 3px 9px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	white-space: nowrap;
	background: var(--brs-soft);
	border-radius: 999px;
}

.brs-list .brs-offer__pay li::before {
	content: "";
	width: 5px;
	height: 9px;
	margin-top: -2px;
	border: solid var(--brs-ok);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

/* Right side: promo code, play button, review link, licence */
.brs-offer__side {
	display: grid;
	gap: 10px;
	align-content: center;
}

.brs-list .brs-code {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 8px 12px;
	font: inherit;
	font-weight: 400;
	color: var(--brs-text);
	text-align: left;
	cursor: pointer;
	background: var(--brs-soft);
	border: 1px dashed #c4c4cc;
	border-radius: 10px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.brs-list .brs-code:hover {
	background: #ececf0;
	border-color: #9a9aa4;
}

.brs-code__text {
	font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.brs-code__hint {
	font-size: 12px;
	font-weight: 400;
	color: var(--brs-muted);
}

.brs-list .brs-code.is-copied {
	border-style: solid;
	border-color: var(--brs-ok);
}

.brs-list .brs-code.is-copied .brs-code__hint {
	color: var(--brs-ok);
}

.brs-list .brs-offer__cta {
	display: block;
	padding: 11px 16px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: var(--brs-red);
	border-radius: 10px;
	box-shadow: 0 6px 14px rgba(227, 0, 0, 0.2);
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.brs-list .brs-offer__cta:hover,
.brs-list .brs-offer__cta:focus {
	color: #fff;
	text-decoration: none;
	background: var(--brs-red-dark);
	box-shadow: 0 8px 18px rgba(184, 0, 0, 0.26);
}

.brs-list .brs-offer__review {
	display: block;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	color: var(--brs-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.brs-list .brs-offer__review:hover {
	color: var(--brs-red-dark);
}

.brs-offer__license {
	display: block;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	color: var(--brs-muted);
}

/* Keyboard focus ring: needed for accessibility, shown only when tabbing */
.brs-list .brs-code:focus-visible,
.brs-list .brs-offer__cta:focus-visible,
.brs-list .brs-offer__review:focus-visible {
	outline: 2px solid var(--brs-dark);
	outline-offset: 2px;
}

/* Medium: logo beside the details; promo and buttons in a row underneath */
@container (min-width: 520px) {
	.brs-list .brs-offer {
		grid-template-columns: 150px minmax(0, 1fr);
		gap: 16px 18px;
		padding: 16px;
	}

	.brs-offer__logo {
		height: 100%;
		min-height: 92px;
	}

	.brs-offer__side {
		grid-column: 1 / -1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
	}

	.brs-offer__review,
	.brs-offer__license {
		text-align: left;
	}
}

/* Wide: logo, details and actions in three columns */
@container (min-width: 760px) {
	.brs-list .brs-offer {
		grid-template-columns: 170px minmax(0, 1fr) 230px;
		gap: 22px;
		padding: 18px;
		align-items: stretch;
	}

	.brs-offer__side {
		grid-column: auto;
		grid-template-columns: minmax(0, 1fr);
		padding-left: 22px;
		border-left: 1px solid var(--brs-line);
	}

	.brs-offer__review,
	.brs-offer__license {
		text-align: center;
	}

	.brs-offer__main {
		align-self: center;
	}
}

/* ===========================================================================
 * Layout B: compact comparison table ([bookmakers-list layout="table"]).
 * Five columns:
 *   1 logo, name and rating stacked   2 both bonuses   3 payment methods
 *   4 licence, promo code under it    5 buttons
 * Wide: a real table with a dark brand header. Narrow: each row stacks into a block.
 * ========================================================================= */

.brs-tbl {
	--brs-dark: #262626;
	--brs-yellow: #ffff00;
	--brs-red: #e30000;
	--brs-red-dark: #b80000;
	--brs-text: #212529;
	--brs-muted: #6d7277;
	--brs-line: #e7e7ec;
	--brs-soft: #f4f4f6;
	--brs-ok: #15803d;

	container-type: inline-size;
	margin: 1.5rem 0 2rem;
	overflow: hidden;
	color: var(--brs-text);
	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);
}

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

/* Beat the generic table rules in site-custom.css (grey header, grey first column, scroll). */
.brs-tbl .brs-tbl__table {
	display: table;
	width: 100%;
	max-width: 100%;
	margin: 0;
	overflow: visible;
	border-collapse: collapse;
	border-spacing: 0;
}

.brs-tbl .brs-tbl__table thead th {
	padding: 11px 16px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	white-space: nowrap;
	vertical-align: middle;
	color: rgba(255, 255, 255, 0.82);
	background: var(--brs-dark);
	border: 0;
}

.brs-tbl .brs-tbl__table thead th:first-child {
	text-align: center;
}

.brs-tbl .brs-tbl__table tbody td {
	padding: 16px;
	font-size: 14px;
	line-height: 1.4;
	vertical-align: middle;
	color: var(--brs-text);
	background: #fff;
	border: 0;
	border-top: 1px solid var(--brs-line);
}

.brs-tbl .brs-tbl__table tbody tr:first-child td {
	border-top: 0;
}

.brs-tbl .brs-tbl__table tbody tr:hover td {
	background: #fafafb;
}

/* Column 1: logo on top (rank on its corner), then the name, then the rating */
.brs-tbl .brs-tbl__table td.brs-tbl__brand {
	width: 170px;
}

.brs-tbl__brand-in {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.brs-tbl__logo-wrap {
	position: relative;
	flex: 0 0 auto;
}

.brs-tbl__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 110px;
	height: 56px;
	padding: 7px 10px;
	overflow: hidden;
	background-color: var(--brs-soft);
	border-radius: 10px;
}

.brs-tbl__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.brs-tbl__initials {
	font-size: 18px;
	font-weight: 600;
	color: var(--brs-dark);
}

.brs-tbl__num {
	position: absolute;
	top: -7px;
	left: -7px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: var(--brs-dark);
	border-radius: 6px;
}

.brs-tbl__num.is-top {
	color: var(--brs-dark);
	background: var(--brs-yellow);
}

.brs-tbl__who {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.brs-tbl__name {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
}

.brs-tbl__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.brs-tbl .brs-stars {
	--brs-star: 14px;
}

.brs-tbl__score {
	font-size: 12px;
	line-height: 1;
	color: var(--brs-muted);
}

.brs-tbl__score strong {
	font-size: 13px;
	font-weight: 600;
	color: var(--brs-text);
}

/* Label / value pairs (bonuses, licence, promo code) */
.brs-tbl__pair + .brs-tbl__pair {
	margin-top: 10px;
}

.brs-tbl__k {
	display: block;
	margin-bottom: 2px;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--brs-muted);
}

.brs-tbl__v {
	display: block;
	font-size: 14px;
	font-weight: 500;
}

.brs-tbl__none {
	color: var(--brs-muted);
}

/* Column 3: payment methods */
.brs-tbl .brs-tbl__pay ul {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	max-width: 260px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.brs-tbl .brs-tbl__pay li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 2px 9px 2px 8px;
	font-size: 12.5px;
	line-height: 1.5;
	white-space: nowrap;
	background: var(--brs-soft);
	border-radius: 999px;
}

.brs-tbl .brs-tbl__pay li::before {
	content: "";
	width: 4px;
	height: 8px;
	margin-top: -2px;
	border: solid var(--brs-ok);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

/* Column 4: promo code under the licence */
.brs-tbl .brs-code {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 5px 10px;
	font: inherit;
	font-weight: 400;
	color: var(--brs-text);
	white-space: nowrap;
	cursor: pointer;
	background: var(--brs-soft);
	border: 1px dashed #c4c4cc;
	border-radius: 8px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.brs-tbl .brs-code:hover {
	background: #ececf0;
	border-color: #9a9aa4;
}

.brs-tbl .brs-code .brs-code__text {
	font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.brs-tbl .brs-code .brs-code__hint {
	font-size: 11.5px;
	color: var(--brs-muted);
}

.brs-tbl .brs-code.is-copied {
	border-style: solid;
	border-color: var(--brs-ok);
}

.brs-tbl .brs-code.is-copied .brs-code__hint {
	color: var(--brs-ok);
}

/* Column 5: buttons */
.brs-tbl .brs-tbl__table .brs-tbl__act {
	width: 160px;
}

.brs-tbl__buttons {
	display: grid;
	gap: 8px;
}

.brs-tbl .brs-tbl__cta,
.brs-tbl .brs-tbl__review {
	display: block;
	padding: 9px 14px;
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border-radius: 8px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.brs-tbl .brs-tbl__cta {
	font-weight: 600;
	color: #fff;
	background: var(--brs-red);
	border: 1px solid var(--brs-red);
}

.brs-tbl .brs-tbl__cta:hover,
.brs-tbl .brs-tbl__cta:focus {
	color: #fff;
	text-decoration: none;
	background: var(--brs-red-dark);
	border-color: var(--brs-red-dark);
}

.brs-tbl .brs-tbl__review {
	font-weight: 500;
	color: var(--brs-text);
	background: #fff;
	border: 1px solid #d6d6dd;
}

.brs-tbl .brs-tbl__review:hover,
.brs-tbl .brs-tbl__review:focus {
	color: var(--brs-text);
	text-decoration: none;
	background: var(--brs-soft);
	border-color: #b4b4be;
}

.brs-tbl .brs-code:focus-visible,
.brs-tbl .brs-tbl__cta:focus-visible,
.brs-tbl .brs-tbl__review:focus-visible {
	outline: 2px solid var(--brs-dark);
	outline-offset: 2px;
}

/* Narrow: every row becomes a stacked block */
@container (max-width: 759px) {
	.brs-tbl .brs-tbl__table,
	.brs-tbl .brs-tbl__table tbody,
	.brs-tbl .brs-tbl__table tbody tr {
		display: block;
		width: 100%;
	}

	.brs-tbl .brs-tbl__table thead {
		display: none;
	}

	.brs-tbl .brs-tbl__table tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding: 16px;
		border-top: 1px solid var(--brs-line);
	}

	.brs-tbl .brs-tbl__table tbody tr:first-child {
		border-top: 0;
	}

	.brs-tbl .brs-tbl__table tbody tr td,
	.brs-tbl .brs-tbl__table tbody tr:first-child td {
		display: block;
		width: auto;
		padding: 0;
		background: transparent;
		border: 0;
	}

	.brs-tbl .brs-tbl__table tbody tr td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 4px;
		font-size: 12.5px;
		font-weight: 400;
		color: var(--brs-muted);
	}

	/* Column 1 on a phone: logo beside the name and rating, to save height */
	.brs-tbl__brand-in {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		text-align: left;
	}

	.brs-tbl__logo {
		width: 96px;
		height: 50px;
	}

	.brs-tbl__who {
		align-items: flex-start;
	}

	/* Bonuses side by side, licence and promo side by side */
	.brs-tbl .brs-tbl__table tbody tr td.brs-tbl__bonus,
	.brs-tbl .brs-tbl__table tbody tr td.brs-tbl__lic {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.brs-tbl__pair + .brs-tbl__pair {
		margin-top: 0;
	}

	.brs-tbl .brs-tbl__pay ul {
		max-width: none;
	}

	.brs-tbl__buttons {
		grid-template-columns: 2fr 1fr;
	}
}

/* Admin-only preview of layout B under the cards */
.brs-preview {
	margin-top: 2.5rem;
}

.brs-preview__label {
	margin: 0 0 -0.75rem;
	padding: 8px 12px;
	font-size: 13px;
	line-height: 1.45;
	color: #5c5a45;
	background: #fffbd6;
	border-radius: 10px;
}

.brs-preview__label code {
	font-size: 12px;
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.brs-list .brs-offer,
	.brs-list .brs-offer__cta,
	.brs-list .brs-code,
	.brs-tbl .brs-code,
	.brs-tbl .brs-tbl__cta,
	.brs-tbl .brs-tbl__review {
		transition: none;
	}
}