/*CSS HANDLER */
/* =========================================================
   next_best_controller-2
   Same navy / gold language as TheBet-4, so the two blocks read
   as one page. Everything is scoped under #nb2.
   Elements that the site styles globally (.groupNav, .navGroup,
   a, .mtable ...) are neutralised with "all: unset" before being
   restyled, so no old global rule can leak into the new look.
   ========================================================= */

/* ---------- heading above the card (same rules as before) ---------- */
.heading_NextBestContoller {
	margin: 20px 0 5px 30px;
}

.heading_NextBestContoller > h2 {
	font-size: 18px;
	font-weight: bold;
	padding-left: 100px;
	text-align: left;
	text-transform: uppercase;
}

.heading_NextBestContoller h2.no-background_NextBestContoller {
	position: relative;
	z-index: 1;
	width: 100%;
	&:before {
		height: 2px;
		background: radial-gradient(50% 50% at 50% 50%, var(--bg_text) 0%, rgba(209, 205, 205, 0) 100%);
		content: "";
		position: absolute;
		top: 40%; left: -8%; right: 0; bottom: 0;
		width: 114%;
		z-index: -1;
	}
	span {
		background: var(--livebetLightBg);
		padding: 0 5px;
	}
}

@media screen and (max-width: 1400px) {
	.heading_NextBestContoller {
		width: 90%;
		margin-left: 3%;
		margin-right: 3%;
	}
}

/* =========================================================
   SKIN HOOKS
   This is the only place where the site's :root variables are read.
   Everything below uses the --nb2-* tokens, so one skin that looks
   off is fixed by changing a line here, not by hunting colours.

     surface  dark panel colour of the skin (the one popups use)
     ink      text on that surface
     accent   primary colour of the skin
     the second value of each var() is the fallback used when a
     skin does not define it (the original navy / gold look)

   The JS (applyTheme) then checks these colours against the real
   card and overrides --nb2-accent / --nb2-ink / --nb2-on-accent /
   --nb2-icons inline when a skin would make text unreadable.
   ========================================================= */
#nb2 {
	--nb2-surface: var(--bgColor3, #0d1730);
	--nb2-ink: var(--textColorWhite, #f5f1e6);
	--nb2-accent: var(--bgColor2, #d7ae66);
	--nb2-accent-text: var(--nb2-accent);
	--nb2-on-accent: var(--nb2-surface);          /* text drawn ON the accent colour */
	--nb2-icons: var(--white_icons, brightness(0) saturate(100%) invert(100%));
	--nb2-radius: 18px;

	/* derived colours. First the neutral fallbacks (white alphas work on
	   any dark surface), then the real ones for browsers with color-mix */
	--nb2-surface-2: var(--nb2-surface);
	--nb2-accent-hi: var(--nb2-accent);
	--nb2-line: rgba(255, 255, 255, 0.12);
	--nb2-ink-dim: rgba(255, 255, 255, 0.62);
	--nb2-ink-faint: rgba(255, 255, 255, 0.25);
	--nb2-tint: rgba(255, 255, 255, 0.045);
	--nb2-tint-hi: rgba(255, 255, 255, 0.09);
	--nb2-hair: rgba(255, 255, 255, 0.07);
	--nb2-a10: rgba(255, 255, 255, 0.1);
	--nb2-a18: rgba(255, 255, 255, 0.18);
	--nb2-a30: rgba(255, 255, 255, 0.3);
	--nb2-a55: rgba(255, 255, 255, 0.55);
	--nb2-shade: rgba(0, 0, 0, 0.25);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	#nb2 {
		--nb2-surface-2: color-mix(in srgb, var(--nb2-surface) 90%, var(--nb2-ink));
		--nb2-accent-hi: color-mix(in srgb, var(--nb2-accent) 80%, #fff);
		--nb2-line: color-mix(in srgb, var(--nb2-ink) 12%, transparent);
		--nb2-ink-dim: color-mix(in srgb, var(--nb2-ink) 62%, transparent);
		--nb2-ink-faint: color-mix(in srgb, var(--nb2-ink) 25%, transparent);
		--nb2-tint: color-mix(in srgb, var(--nb2-ink) 4.5%, transparent);
		--nb2-tint-hi: color-mix(in srgb, var(--nb2-ink) 9%, transparent);
		--nb2-hair: color-mix(in srgb, var(--nb2-ink) 7%, transparent);
		--nb2-a10: color-mix(in srgb, var(--nb2-accent) 10%, transparent);
		--nb2-a18: color-mix(in srgb, var(--nb2-accent) 18%, transparent);
		--nb2-a30: color-mix(in srgb, var(--nb2-accent) 30%, transparent);
		--nb2-a55: color-mix(in srgb, var(--nb2-accent) 55%, transparent);
		--nb2-shade: color-mix(in srgb, var(--nb2-on-accent) 28%, transparent);
	}
}

/* ---------- card ---------- */
#nb2 {
	box-sizing: border-box;
	position: relative;
	width: 94%;
	margin: 18px 3% 35px;
	padding: 20px 22px 18px;
	border: 1px solid var(--nb2-line);
	border-radius: var(--nb2-radius);
	color: var(--nb2-ink);
	background:
		radial-gradient(120% 140% at 12% -10%, var(--nb2-a18) 0%, transparent 55%),
		linear-gradient(155deg, var(--nb2-surface) 0%, var(--nb2-surface-2) 100%);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

/* thin luminous rule on top, like in TheBet-4 */
#nb2::before {
	content: "";
	position: absolute;
	top: 0; left: 8%; right: 8%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--nb2-accent) 50%, transparent);
	opacity: 0.55;
}

/* ---------- level 1: Most played / Latest bets ---------- */
#nb2 .nb2-switch {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: min(460px, 100%);
	margin: 0 auto 18px;
	padding: 4px;
	border-radius: 999px;
	border: 1px solid var(--nb2-a30);
	background: var(--nb2-tint);
}

#nb2 .nb2-sw {
	all: unset;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	padding: 9px 12px;
	text-align: center;
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--nb2-ink-dim);
	transition: color 0.25s ease;
}

#nb2 .nb2-sw:hover { color: var(--nb2-ink); }
#nb2 .nb2-sw.nb2-sw-on { color: var(--nb2-on-accent); }

#nb2 .nb2-thumb {
	position: absolute;
	top: 4px; bottom: 4px; left: 4px;
	width: calc(50% - 4px);
	border-radius: 999px;
	background: linear-gradient(180deg, var(--nb2-accent-hi), var(--nb2-accent));
	box-shadow: 0 4px 14px var(--nb2-a30);
	transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#nb2[data-pane="next_events"] .nb2-thumb { transform: translateX(100%); }

/* ---------- panes (the two lists) ---------- */
#nb2 .nb2-pane {
	all: unset;
	display: none;
}

#nb2 .nb2-pane.nb2-on {
	display: block;
}

#nb2 .nb2-body {
	display: block;
	/* the table below reacts to THIS width, not to the screen width */
	container-type: inline-size;
	container-name: nb2b;
	overflow-x: auto;
}

/* loading state: calm skeleton until the first data arrives */
#nb2 .nb2-body:empty {
	min-height: 280px;
	border-radius: 14px;
	background:
		linear-gradient(100deg, transparent 30%, var(--nb2-tint-hi) 50%, transparent 70%) 0 0 / 220% 100%,
		repeating-linear-gradient(to bottom, var(--nb2-tint) 0 64px, transparent 64px 70px);
	animation: nb2Shimmer 1.5s linear infinite;
}

@keyframes nb2Shimmer {
	from { background-position: 120% 0, 0 0; }
	to   { background-position: -120% 0, 0 0; }
}

/* ---------- level 2: sports ---------- */
#nb2 .nb2-sports {
	all: unset;
	display: flex;
	gap: 2px;
	margin: 0 0 14px;
	border-bottom: 1px solid var(--nb2-hair);
	overflow-x: auto;
	scrollbar-width: none;
}

#nb2 .nb2-sports::-webkit-scrollbar { display: none; }

#nb2 .nb2-sports > li {
	all: unset;
	position: relative;
	flex: 0 0 auto;
	cursor: pointer;
	padding: 10px 14px 13px;
}

#nb2 .nb2-sports .navGroupWrapper {
	all: unset;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--nb2-ink-dim);
	transition: color 0.2s ease;
}

#nb2 .nb2-sports .navGroupWrapper a {
	all: unset;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	background-image: none;
}

#nb2 .nb2-sports > li:hover .navGroupWrapper { color: var(--nb2-ink); }
#nb2 .nb2-sports > li.nb2-on .navGroupWrapper { color: var(--nb2-ink); }

#nb2 .nb2-sports > li::after {
	content: "";
	position: absolute;
	left: 12px; right: 12px; bottom: -1px;
	height: 2px;
	border-radius: 2px;
	background: var(--nb2-accent);
	box-shadow: 0 0 12px var(--nb2-a55);
	transform: scaleX(0);
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#nb2 .nb2-sports > li.nb2-on::after { transform: scaleX(1); }

#nb2 .nb2-count {
	all: unset;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 16px;
	color: var(--nb2-ink-dim);
	background: var(--nb2-tint-hi);
}

#nb2 .nb2-sports > li.nb2-on .nb2-count {
	color: var(--nb2-on-accent);
	background: var(--nb2-accent);
}

/* icons injected by the site helpers: drawn for the dark surface using the
   skin's own "white icons" filter (see --nb2-icons) */
#nb2 .sport-icon-small {
	width: 16px;
	height: 16px;
	opacity: 0.85;
}

#nb2 .sport-icon {
	width: 22px;
	height: 22px;
	margin: 0;
}

/* =========================================================
   Defence against the site's global rules
   styling.css has !important rules written for the OLD markup
   (.best_seller .mtable .selectorImage, ... .sport-icon) and a
   generic "a > span { color: var(--bg_text) }". A few of them
   reach the elements this module keeps for the site's icon
   helpers, and --bg_text is dark on light skins, so odds and
   titles would turn dark-on-dark. They are answered here with
   more specific selectors.
   ========================================================= */
#nb2 a > span {
	color: inherit;
	vertical-align: baseline;
}

#nb2 .nb2-hTitle.selectorImage {
	color: var(--nb2-ink) !important;
	background: none !important;
}

#nb2 .nb2-panel .sport-icon,
#nb2 .nb2-sports .sport-icon-small {
	filter: var(--nb2-icons) !important;
}

/* some skins tint every .navGroupWrapper of #best_seller / #next_events (filter: var(--colorBlue)
   !important), which turns the whole sports row into card-coloured text. The doubled class
   makes this selector more specific than theirs. */
#nb2 .nb2-sports li .navGroupWrapper.navGroupWrapper {
	filter: none !important;
}

/* ---------- panel / table ---------- */
#nb2 .nb2-panel {
	display: none;
}

#nb2 .nb2-panel.nb2-on {
	display: block;
}

#nb2 .nb2-tbl {
	all: unset;
	display: block;
	--when: 88px;
	--more: 74px;
	--namemin: 210px;
	--oddmin: 52px;
	--oddmax: 92px;
	--cols: var(--c0);
}

#nb2 .nb2-head.div_thead,
#nb2 .nb2-rows.div_tbody {
	/* the site may style these old class names: start from a clean slate */
	float: none;
	background: none;
	border: 0;
	margin: 0;
	width: auto;
	height: auto;
}

/* head and rows share the same grid, so the columns always line up */
#nb2 .nb2-head,
#nb2 .nb2-row {
	box-sizing: border-box;
	display: grid;
	grid-template-columns:
		var(--when)
		minmax(var(--namemin), 1fr)
		repeat(var(--cols), minmax(var(--oddmin), var(--oddmax)))
		var(--more);
	align-items: center;
	padding: 0 12px;
}

#nb2 .nb2-head {
	align-items: end;
	padding-bottom: 4px;
}

#nb2 .nb2-hTitle {
	all: unset;
	grid-column: 1 / 3;
	grid-row: 1 / 3;
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 2px;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--nb2-ink);
}

#nb2 .nb2-hMarket {
	grid-row: 1;
	margin: 0 8px 4px;
	padding-bottom: 6px;
	text-align: center;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--nb2-accent-text);
	border-bottom: 1px solid var(--nb2-a30);
}

#nb2 .nb2-hOut {
	grid-row: 2;
	padding: 3px 0 4px;
	text-align: center;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--nb2-ink-dim);
}

/* thin separator between market groups */
#nb2 .nb2-gstart {
	box-shadow: inset 1px 0 0 var(--nb2-hair);
}

#nb2 .nb2-hMarket.nb2-gstart { box-shadow: none; }

/* ---------- rows ---------- */
#nb2 .nb2-rows {
	all: unset;
	display: block;
}

#nb2 .nb2-row {
	position: relative;
	min-height: 66px;
	margin-top: 6px;
	border: 1px solid var(--nb2-hair);
	border-radius: 14px;
	background: var(--nb2-tint);
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#nb2 .nb2-row::before {
	content: "";
	position: absolute;
	left: -1px; top: 12px; bottom: 12px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--nb2-accent);
	opacity: 0;
	transform: scaleY(0.4);
	transition: opacity 0.2s ease, transform 0.25s ease;
}

#nb2 .nb2-row:hover {
	background: var(--nb2-tint-hi);
	border-color: var(--nb2-a30);
	transform: translateY(-1px);
}

#nb2 .nb2-row:hover::before,
#nb2 .nb2-row.nb2-rowsoon::before {
	opacity: 1;
	transform: scaleY(1);
}

/* when */
#nb2 .nb2-when {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	padding-left: 2px;
	line-height: 1.1;
}

#nb2 .nb2-w1 { display: flex; align-items: baseline; gap: 5px; }
#nb2 .nb2-day { font-size: 16px; font-weight: 800; color: var(--nb2-ink); }
#nb2 .nb2-mon { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--nb2-ink-dim); }
#nb2 .nb2-rel { font-size: 14px; font-weight: 800; color: var(--nb2-ink); white-space: nowrap; }
#nb2 .nb2-time { font-size: 12px; font-weight: 600; color: var(--nb2-accent); }

/* an event starting within the hour: gold, with a soft pulsing dot */
#nb2 .nb2-soon .nb2-rel,
#nb2 .nb2-soon .nb2-day { color: var(--nb2-accent-text); }

#nb2 .nb2-soon .nb2-w2 {
	display: flex;
	align-items: center;
	gap: 6px;
}

#nb2 .nb2-soon .nb2-w2::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--nb2-accent);
	box-shadow: 0 0 0 0 var(--nb2-a55);
	animation: nb2Pulse 1.8s ease-out infinite;
}

@keyframes nb2Pulse {
	0%   { box-shadow: 0 0 0 0 var(--nb2-a55); }
	70%  { box-shadow: 0 0 0 8px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* teams + competition */
#nb2 .nb2-name {
	min-width: 0;
	padding: 9px 10px 9px 4px;
}

#nb2 .nb2-event {
	all: unset;
	box-sizing: border-box;
	display: block;
	min-width: 0;
	cursor: pointer;
}

#nb2 .nb2-teams { display: flex; flex-direction: column; gap: 3px; }

#nb2 .nb2-team {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

#nb2 .nb2-tname {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	color: var(--nb2-ink);
	transition: color 0.2s ease;
}

#nb2 .nb2-event:hover .nb2-tname { color: var(--nb2-ink); }

#nb2 .nb2-crest {
	flex: 0 0 auto;
	width: 20px; height: 20px;
	object-fit: contain;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

#nb2 .nb2-crest.nb2-nocrest { display: none; }

#nb2 .nb2-league {
	display: block;
	margin-top: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--nb2-accent-text);
}

/* ---------- odds ---------- */
#nb2 .nb2-c {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
}

#nb2 .nb2-odd {
	all: unset;
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 34px;
	padding: 0 8px;
	border: 1px solid var(--nb2-hair);
	border-radius: 10px;
	background: var(--nb2-tint-hi);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--nb2-ink);
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

#nb2 a.nb2-odd:hover {
	background: var(--nb2-a18);
	border-color: var(--nb2-accent);
	transform: translateY(-1px);
}

#nb2 .nb2-odd.nb2-hot .nb2-oddv { color: var(--nb2-accent-text); }

#nb2 .nb2-odd.nb2-na {
	cursor: default;
	border-color: transparent;
	background: transparent;
	color: var(--nb2-ink-dim);
}

/* how much this outcome is played (feed BS only) */
#nb2 .nb2-pop {
	position: absolute;
	left: 7px; right: 7px; bottom: 3px;
	height: 2px;
	border-radius: 2px;
	background: var(--nb2-a10);
	overflow: hidden;
}

#nb2 .nb2-pop::after {
	content: "";
	display: block;
	width: var(--p, 0%);
	height: 100%;
	background: var(--nb2-accent);
}

/* in the coupon */
#nb2 .nb2-odd.selected {
	background: var(--nb2-accent);
	border-color: var(--nb2-accent);
	color: var(--nb2-on-accent);
	box-shadow: 0 4px 14px var(--nb2-a30);
}

#nb2 .nb2-odd.selected .nb2-oddv { color: var(--nb2-on-accent); }
#nb2 .nb2-odd.selected .nb2-pop { background: var(--nb2-shade); }
#nb2 .nb2-odd.selected .nb2-pop::after { background: var(--nb2-on-accent); }

/* "+N" more markets */
#nb2 .nb2-m {
	display: flex;
	justify-content: center;
}

#nb2 .nb2-moreBtn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 50px;
	height: 30px;
	padding: 0 11px;
	border: 1px solid var(--nb2-a30);
	border-radius: 999px;
	background: var(--nb2-a10);
	font-size: 12px;
	font-weight: 700;
	color: var(--nb2-accent-text);
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

#nb2 .nb2-moreBtn:hover {
	background: var(--nb2-accent);
	color: var(--nb2-on-accent);
	transform: translateY(-1px);
}

/* ---------- narrower box: drop the last markets, never the first ----------
   Each step is chosen so that what stays still fits:
   padding 24 + when + more + name (min) + columns * 52  */
@container nb2b (max-width: 899px) {
	#nb2 .nb2-tbl { --cols: var(--c1); --when: 80px; }
	#nb2 .nb2-hr-0:not(.nb2-g0) { display: none; }
}

@container nb2b (max-width: 769px) {
	#nb2 .nb2-tbl { --cols: var(--c2); }
	#nb2 .nb2-hr-1:not(.nb2-g0) { display: none; }
}

@container nb2b (max-width: 659px) {
	#nb2 .nb2-tbl { --cols: var(--c3); --more: 64px; }
	#nb2 .nb2-hr-2:not(.nb2-g0) { display: none; }
}

@container nb2b (max-width: 559px) {
	#nb2 .nb2-tbl { --when: 66px; --more: 56px; --namemin: 150px; --oddmin: 44px; }
	#nb2 .nb2-tname { font-size: 13px; }
	#nb2 .nb2-odd { min-width: 40px; padding: 0 6px; }
	#nb2 .nb2-moreBtn { min-width: 44px; padding: 0 8px; }
}

/* ---------- motion ---------- */
@keyframes nb2Fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

#nb2 .nb2-pane.nb2-on { animation: nb2Fade 0.35s ease both; }

#nb2 .nb2-enter .nb2-row {
	animation: nb2Fade 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	animation-delay: calc(var(--i, 0) * 28ms);
}

@media (prefers-reduced-motion: reduce) {
	#nb2 .nb2-pane.nb2-on,
	#nb2 .nb2-enter .nb2-row,
	#nb2 .nb2-soon .nb2-w2::before,
	#nb2 .nb2-body:empty { animation: none; }
	#nb2 .nb2-thumb,
	#nb2 .nb2-row,
	#nb2 .nb2-odd { transition: none; }
}