/*CSS HANDLER */
/* =========================================================
   next_best_controller-4
   Same navy / gold language as TheBet-4, so the two blocks read
   as one page. Everything is scoped under #nb4.
   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%;
	}
}

/* =========================================================
   Registered custom properties
   --cols (and the four tier values it switches between) feed
   repeat() in the grid below. An unregistered custom property used
   as a repeat() count can resolve inconsistently between two
   otherwise-identical elements during a style recalc (e.g. a
   container-query re-match), which is exactly the "header cells
   vanish on one side only while resizing" symptom this fixes.
   Registering the property as an <integer> removes that ambiguity.
   ========================================================= */
@property --cols { syntax: '<integer>'; inherits: true; initial-value: 1; }
@property --c0 { syntax: '<integer>'; inherits: true; initial-value: 1; }
@property --c1 { syntax: '<integer>'; inherits: true; initial-value: 1; }
@property --c2 { syntax: '<integer>'; inherits: true; initial-value: 1; }
@property --c3 { syntax: '<integer>'; inherits: true; initial-value: 1; }

/* =========================================================
   SKIN HOOKS
   This is the only place where the site's :root variables are read.
   Everything below uses the --nb4-* 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 --nb4-accent / --nb4-ink / --nb4-on-accent /
   --nb4-icons inline when a skin would make text unreadable.
   ========================================================= */
#nb4 {
	--nb4-surface: var(--bgColor3, #0d1730);
	--nb4-ink: var(--textColorWhite, #f5f1e6);
	--nb4-accent: var(--bgColor2, #d7ae66);
	--nb4-accent-text: var(--nb4-accent);
	--nb4-on-accent: var(--nb4-surface);          /* text drawn ON the accent colour */
	--nb4-icons: var(--white_icons, brightness(0) saturate(100%) invert(100%));
	--nb4-radius: 18px;

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

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

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

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

/* ---------- single list (no more dual-column layout) ---------- */
#nb4 .nb4-body {
	display: block;
	/* the table below reacts to THIS width, not to the screen width */
	container-type: inline-size;
	container-name: nb4b;
	overflow-x: auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

#nb4 .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.
   ========================================================= */
#nb4 a > span {
	color: inherit;
	vertical-align: baseline;
}

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

#nb4 .nb4-panel .sport-icon,
#nb4 .nb4-sports .sport-icon-small {
	filter: var(--nb4-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. */
#nb4 .nb4-sports li .navGroupWrapper.navGroupWrapper {
	filter: none !important;
}

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

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

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

#nb4 .nb4-head.div_thead,
#nb4 .nb4-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 */
#nb4 .nb4-head,
#nb4 .nb4-row {
	box-sizing: border-box;
	display: grid;
	grid-template-columns:
		var(--when)
		minmax(var(--namemin), 1fr)
		repeat(var(--cols, 3), minmax(var(--oddmin), var(--oddmax)))
		var(--more);
	align-items: center;
	padding: 0 12px;
}

#nb4 .nb4-head {
	align-items: end;
	padding-bottom: 4px;
	min-height: 38px;      /* belt and braces: the header never collapses to nothing even if a track-count recalc is briefly off */
}

#nb4 .nb4-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(--nb4-ink);
}

#nb4 .nb4-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(--nb4-accent-text);
	border-bottom: 1px solid var(--nb4-a30);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#nb4 .nb4-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(--nb4-accent-text);
}

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

#nb4 .nb4-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(--nb4-hair);
	border-radius: 10px;
	background: var(--nb4-tint-hi);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--nb4-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;
}

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

/* the odds number itself always stays --nb4-ink (white): the "most played"
   outcome is already shown by the gold progress bar under it, so the number
   does not need to change colour too */

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

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

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

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

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

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

#nb4 .nb4-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(--nb4-a30);
	border-radius: 999px;
	background: var(--nb4-a10);
	font-size: 12px;
	font-weight: 700;
	color: var(--nb4-accent-text);
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

#nb4 .nb4-moreBtn:hover {
	background: var(--nb4-accent);
	color: var(--nb4-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 nb4b (max-width: 899px) {
	#nb4 .nb4-tbl { --cols: var(--c1); --when: 80px; }
	#nb4 .nb4-hr-0:not(.nb4-g0) { display: none; }
}

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

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

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

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

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

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