/*CSS HANDLER */
/* =========================================================
   LiveBettingLight-live2
   Same adaptive-skin card language as the other three widgets
   (see applyTheme() in the JS: this file only ever reads the
   --l2-* tokens, the JS corrects them per skin).

   Layout: #live2 is its own named container. .live2-cols is row
   (side by side) above a width threshold measured on the CARD
   itself, column (stacked, live on top) below it — same principle
   as the dual-column logic in next_best_controller-3 / TheBet-4.
   ========================================================= */
#live2 {
	--l2-surface: var(--bgColor3, #0d1730);
	--l2-ink: var(--textColorWhite, #f5f1e6);
	--l2-accent: var(--bgColor2, #d7ae66);
	--l2-accent-text: var(--l2-accent);
	--l2-on-accent: var(--l2-surface);
	--l2-icons: var(--white_icons, brightness(0) saturate(100%) invert(100%));
	--l2-radius: 18px;
	--l2-live: #ef4444;      /* status colour, not a brand accent — stays red on every skin */

	--l2-surface-2: var(--l2-surface);
	--l2-accent-hi: var(--l2-accent);
	--l2-line: rgba(255, 255, 255, 0.12);
	--l2-ink-dim: rgba(255, 255, 255, 0.62);
	--l2-tint: rgba(255, 255, 255, 0.045);
	--l2-tint-hi: rgba(255, 255, 255, 0.09);
	--l2-hair: rgba(255, 255, 255, 0.07);
	--l2-a10: rgba(255, 255, 255, 0.1);
	--l2-a18: rgba(255, 255, 255, 0.18);
	--l2-a30: rgba(255, 255, 255, 0.3);
	--l2-shade: rgba(0, 0, 0, 0.25);
	--l2-up: #3ddc84;
	--l2-down: #ef4444;
}

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

@property --cols { syntax: '<integer>'; inherits: true; initial-value: 1; }

/* ---------- card ----------
   Carries "widget"/"statsBoxContent" on purpose for the site's own
   icon-helper hooks, so every width/margin here is !important — the
   same global ".offer #center_column .widget" rule that bled into
   LiveBettingLight-list would otherwise win (two classes + an
   ancestor id out-specifies a bare #live2). */
#live2 {
	box-sizing: border-box !important;
	position: relative !important;
	width: 94% !important;
	margin: 18px 3% 35px !important;
	padding: 20px 22px 18px;
	border: 1px solid var(--l2-line);
	border-radius: var(--l2-radius);
	color: var(--l2-ink);
	background: radial-gradient(120% 140% at 12% -10%, rgba(255, 255, 255, 0.18) 0%, transparent 55%), linear-gradient(155deg, var(--l2-surface) 0%, var(--l2-surface-2) 100%);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
	container-type: inline-size;
	container-name: live2card;
}

#live2::before {
	content: "";
	position: absolute;
	top: 0; left: 8%; right: 8%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--l2-accent) 50%, transparent);
	opacity: 0.55;
}

/* ---------- two panes ---------- */
#live2 .live2-cols {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 28px;
}

#live2 .live2-pane { min-width: 0; }

@container live2card (min-width: 860px) {
	#live2 .live2-cols { flex-direction: row; align-items: flex-start; }
	#live2 .live2-pane { flex: 1 1 0; min-width: 0; }
	#live2 .live2-pane + .live2-pane { padding-left: 28px; border-left: 1px solid var(--l2-hair); }
}

/* ---------- pane header ---------- */
#live2 .l2-head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
}

#live2 .l2-dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--l2-live);
	animation: l2Pulse 1.8s ease-out infinite;
}

#live2 .l2-title {
	all: unset;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--l2-ink);
}

@keyframes l2Pulse {
	0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
	70%  { box-shadow: 0 0 0 7px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- sport tabs (shared by both panes) ---------- */
#live2 .l2-sports {
	all: unset;
	display: flex;
	gap: 2px;
	margin: 0 0 14px;
	border-bottom: 1px solid var(--l2-hair);
	overflow-x: auto;
	scrollbar-width: none;
}
#live2 .l2-sports::-webkit-scrollbar { display: none; }

#live2 .l2-sports > li {
	all: unset;
	position: relative;
	flex: 0 0 auto;
	cursor: pointer;
	padding: 8px 12px 10px;
}

#live2 .l2-sports .navGroupWrapper {
	all: unset;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--l2-ink-dim);
	transition: color 0.2s ease;
}
#live2 .l2-sports .navGroupWrapper a { all: unset; display: inline-flex; cursor: pointer; }

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

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

#live2 .l2-count {
	all: unset;
	padding: 1px 6px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
	color: var(--l2-ink-dim);
	background: var(--l2-tint-hi);
}
#live2 .l2-sports > li.l2-on .l2-count { color: var(--l2-on-accent); background: var(--l2-accent); }

#live2 .sport-icon-livebetting { width: 15px; height: 15px; filter: var(--l2-icons); opacity: 0.85; }

/* ---------- body / groups ---------- */
#live2 .l2-body {
	display: block;
	container-type: inline-size;
	container-name: l2body;
	overflow-x: auto;
}

#live2 .l2-body:empty {
	min-height: 220px;
	border-radius: 14px;
	background:
		linear-gradient(100deg, transparent 30%, var(--l2-tint-hi) 50%, transparent 70%) 0 0 / 220% 100%,
		repeating-linear-gradient(to bottom, var(--l2-tint) 0 56px, transparent 56px 62px);
	animation: l2Shimmer 1.5s linear infinite;
}
@keyframes l2Shimmer {
	from { background-position: 120% 0, 0 0; }
	to   { background-position: -120% 0, 0 0; }
}

#live2 .l2-empty { margin: 10px 0 4px; font-size: 13px; color: var(--l2-ink-dim); text-align: center; }

#live2 .l2-group { display: none; }
#live2 .l2-group.l2-on { display: block; }

/* ---------- grids: live (clock + match + score + odds) ---------- */
#live2 .live2-live .l2-colhead,
#live2 .live2-live .l2-row {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 50px minmax(140px, 1fr) 46px repeat(var(--cols, 2), minmax(42px, 58px));
	align-items: center;
	gap: 6px;
	padding: 0 4px;
}

/* ---------- grids: best sellers (date + match + odds + more-button) ---------- */
#live2 .live2-best .l2-colhead,
#live2 .live2-best .l2-row {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 54px minmax(140px, 1fr) repeat(var(--cols, 2), minmax(42px, 58px)) 42px;
	align-items: center;
	gap: 6px;
	padding: 0 4px;
}

#live2 .l2-colhead { padding-bottom: 5px; min-height: 30px; }

#live2 .l2-hOut {
	text-align: center;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--l2-ink-dim);
}

#live2 .l2-rows { display: block; }

#live2 .l2-row {
	position: relative;
	min-height: 60px;
	margin-top: 6px;
	border: 1px solid var(--l2-hair);
	border-radius: 12px;
	background: var(--l2-tint);
	transition: background 0.2s ease, border-color 0.2s ease;
}
#live2 .l2-row:hover { background: var(--l2-tint-hi); border-color: var(--l2-a30); }

/* when (best panel: scheduled date) */
#live2 .l2-when { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-left: 2px; line-height: 1.1; }
#live2 .l2-w1 { display: flex; align-items: baseline; gap: 4px; }
#live2 .l2-day { font-size: 14px; font-weight: 800; color: var(--l2-ink); }
#live2 .l2-mon { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--l2-ink-dim); }
#live2 .l2-rel { font-size: 12px; font-weight: 800; color: var(--l2-ink); white-space: nowrap; }
#live2 .l2-time { font-size: 10.5px; font-weight: 600; color: var(--l2-accent); }
#live2 .l2-soon .l2-day { color: var(--l2-accent-text); }

/* live (left panel: clock + pulse) */
#live2 .l2-live { display: flex; flex-direction: column; align-items: center; gap: 3px; padding-left: 2px; }
#live2 .l2-liveDot { width: 6px; height: 6px; border-radius: 50%; background: var(--l2-live); animation: l2Pulse 1.8s ease-out infinite; }
#live2 .l2-clock { font-size: 11px; font-weight: 800; color: var(--l2-ink); font-variant-numeric: tabular-nums; }

/* teams + league (shared markup/classes across both panes) */
#live2 .l2-match { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 6px 0; }
#live2 .l2-teams { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#live2 .l2-team { display: flex; align-items: center; gap: 7px; min-width: 0; }
#live2 .l2-tname {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;        /* same size as next_best_controller-4's .nb4-tname, "piu visibili" */
	font-weight: 600;
	color: var(--l2-ink);
}
#live2 .l2-crest {
	flex: 0 0 auto;
	width: 20px; height: 20px;   /* same as next_best_controller-4's .nb4-crest */
	object-fit: contain;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
#live2 .l2-crest.l2-crest-missing { display: none; }
#live2 .l2-league {
	display: block;
	margin-top: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 10.5px;       /* same as next_best_controller-4's .nb4-league */
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--l2-accent-text);
}

/* score (live panel only) */
#live2 .l2-score { text-align: center; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--l2-ink); }

/* odds (shared) */
#live2 .l2-c { display: flex; align-items: center; justify-content: center; }
#live2 .l2-odd {
	all: unset;
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 100%;
	height: 30px;
	border: 1px solid var(--l2-hair);
	border-radius: 9px;
	background: var(--l2-tint-hi);
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--l2-ink);
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
#live2 a.l2-odd:hover { background: var(--l2-a18); border-color: var(--l2-accent); transform: translateY(-1px); }
#live2 .l2-odd.selected { background: var(--l2-accent); border-color: var(--l2-accent); color: var(--l2-on-accent); }
#live2 .l2-odd.l2-na { cursor: default; background: transparent; color: var(--l2-ink-dim); }
/* the odds number itself always stays --l2-ink (white): the "most played"
   outcome is already shown by the gold progress bar under it */

/* how much this outcome is played (best panel only) */
#live2 .l2-pop { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--l2-a10); overflow: hidden; }
#live2 .l2-pop::after { content: ""; display: block; width: var(--p, 0%); height: 100%; background: var(--l2-accent); }
#live2 .l2-odd.selected .l2-pop { background: var(--l2-shade); }
#live2 .l2-odd.selected .l2-pop::after { background: var(--l2-on-accent); }

/* a quote that just moved (live panel only) */
#live2 .l2-arrow { display: none; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
#live2 .l2-odd.l2-up, #live2 .l2-odd.l2-down { animation: l2Flash 2.6s ease-out both; }
#live2 .l2-up .l2-arrow { display: block; border-bottom: 5px solid var(--l2-up); }
#live2 .l2-down .l2-arrow { display: block; border-top: 5px solid var(--l2-down); margin-top: 2px; }
#live2 .l2-up .l2-oddv { color: var(--l2-up); }
#live2 .l2-down .l2-oddv { color: var(--l2-down); }
@keyframes l2Flash {
	0%   { box-shadow: 0 0 0 1px var(--l2-hair) inset; }
	15%  { box-shadow: 0 0 0 1px currentColor inset; }
	100% { box-shadow: 0 0 0 1px var(--l2-hair) inset; }
}

/* "+N" more markets (best panel only) */
#live2 .l2-m { display: flex; justify-content: center; }
#live2 .l2-moreBtn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 26px;
	border-radius: 999px;
	background: var(--l2-a10);
	font-size: 11px;
	font-weight: 700;
	color: var(--l2-accent-text);
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
#live2 .l2-moreBtn:hover { background: var(--l2-accent); color: var(--l2-on-accent); transform: translateY(-1px); }

/* ---------- narrower body: tighten first, then drop the league line ---------- */
@container l2body (max-width: 420px) {
	#live2 .l2-league { display: none; }
	#live2 .l2-tname { font-size: 11.5px; }
}

/* ---------- motion ---------- */
@keyframes l2Fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
#live2 .l2-enter .l2-row { animation: l2Fade 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 24ms); }

@media (prefers-reduced-motion: reduce) {
	#live2 .l2-dot, #live2 .l2-liveDot, #live2 .l2-enter .l2-row,
	#live2 .l2-odd.l2-up, #live2 .l2-odd.l2-down, #live2 .l2-body:empty { animation: none; }
	#live2 .l2-row, #live2 .l2-odd { transition: none; }
}

.l2-odd .l2-oddv {
    color: #fff !important;
}