/*CSS HANDLER */
/* =========================================================
   TheBet-3 — token layer
   Palette pulls the site's own navy/gold identity so the
   widget reads as part of the brand, not a bolted-on module.
   All colors fall back gracefully if the theme vars aren't set.
   ========================================================= */
#the_bet.tb3 {
	--tb3-navy-900: #0d1730;
	--tb3-navy-800: #142244;
	--tb3-navy-700: #1c2e56;
	--tb3-gold: #d7ae66;
	--tb3-gold-soft: #f0d9a6;
	--tb3-track: rgba(255, 255, 255, 0.12);
	--tb3-ink: #f5f1e6;
	--tb3-ink-dim: rgba(245, 241, 230, 0.62);
	--tb3-line: rgba(215, 174, 102, 0.28);
	--tb3-radius: 18px;
	--tb3-radius-sm: 12px;
	background-color: var(--FavBorderBg3);
	width: 94% !important;
	margin: 0 3% 6px !important;
	border-radius: var(--tb3-radius);
}

/* =========================================================
   Card shell
   ========================================================= */
#the_bet.tb3 #the_bet_container.tb3-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--border-main);
	border-radius: var(--tb3-radius);
	padding: 18px 24px 16px;
background: radial-gradient(120% 140% at 12% -10%, rgba(215, 174, 102, 0.16) 0%, transparent 55%), linear-gradient(155deg, #acc4ff 0%, #263d77 55%, #d0daf2 100%);
	color: var(--tb3-ink);
}

/* thin luminous rule under the header, echoes a stand floodlight beam */
#the_bet.tb3 .tb3-topline {
	position: absolute;
	top: 0; left: 8%; right: 8%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--tb3-gold) 50%, transparent);
	opacity: 0.55;
}

/* =========================================================
   Header — league eyebrow + matchup
   ========================================================= */
#the_bet.tb3 .tb3-head {
	position: relative;
	text-align: center;
	padding-bottom: 2px;
}

#the_bet.tb3 p.tb3-league {
	display: inline-block;
	white-space: nowrap;
	margin: 0 auto 10px;
	padding: 4px 14px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tb3-gold-soft);
	border: 1px solid var(--tb3-line);
	border-radius: 999px;
	background: rgba(215, 174, 102, 0.08);
}

/* fixed side columns + a center column that always gets the
   remaining width. The whole row is capped and centred so the
   crests sit close to the team name instead of stretching out
   to the full (very wide) card edges. */
#the_bet.tb3 .tb3-clubs {
	display: grid;
	grid-template-columns: 140px 1fr 140px;
	align-items: center;
	gap: 20px;
	width: 100%;
	max-width: 620px;
	margin: 0 auto;
}

#the_bet.tb3 .tb3-crest {
	justify-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 140px;
}

#the_bet.tb3 .tb3-crest img {
	max-width: 100%;
	max-height: 100%;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

#the_bet.tb3 .tb3-matchup {
	min-width: 0;
}

#the_bet.tb3 .tb3-matchup h2 {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#the_bet.tb3 .tb3-matchup .date {
	display: inline-block;
	white-space: nowrap;
	margin-top: 5px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--tb3-navy-900);
	background: var(--tb3-gold);
	border-radius: 999px;
}

@media screen and (max-width: 1293px) {
	#the_bet.tb3 .tb3-crest { display: none; }
	#the_bet.tb3 .tb3-clubs { grid-template-columns: 1fr; }
}

/* =========================================================
   Featured market (1X2, etc.) — radial gauges
   sitting on a faint centre-circle, a quiet nod to the pitch.
   The row is centred via flex align-items on a column parent
   (not width:100%/justify-content on the row itself) so it
   stays centred no matter what width the row's own content
   ends up taking.
   ========================================================= */
#the_bet.tb3 .maxCont.tb3-main {
	width: 100% !important;
	max-width: 100% !important;
	margin: 12px auto 0 !important;
	float: none !important;
	position: relative;
	padding-top: 8px;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

#the_bet.tb3 .tb3-main::after {
	content: "";
	position: absolute;
	top: 10px; left: 8%; right: 8%;
	height: 1px;
	background: var(--tb3-line);
	opacity: 0.5;
	pointer-events: none;
}

#the_bet.tb3 .tb3-main .tb3-groupLabel {
	text-align: center;
	margin: 0 0 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tb3-ink-dim);
}

#the_bet.tb3 .tb3-main .max {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 26px;
	flex-wrap: wrap;
}

/* =========================================================
   Ring gauge. Built from real, plain DOM layers instead of
   animated custom-property gradients, so the fill renders
   correctly on any browser rather than depending on modern
   @property support:
     .tb3-ring   → base circle, neutral track colour
     .tb3-fill   → white wedge, sized to the percentage
     .tb3-stripe → diagonal moving texture, clipped to .tb3-fill
     .tb3-hole   → covers the centre to create the donut shape
     .tb3-ringInner → odd + percentage text, always on top
   ========================================================= */
#the_bet.tb3 .tb3-ring {
	position: relative;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--tb3-track);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

#the_bet.tb3 .tb3-fill,
#the_bet.tb3 .tb3-stripe {
	position: absolute;
	inset: 0;
	border-radius: 50%;
}

/* moving stripe texture — the circular counterpart of the old
   diagonal cssProgress-active-right animation on the flat bars.
   Its mask-image is set inline per item (a static conic-gradient
   matching the fill's own angle), so it only shows inside the
   filled wedge, never over the empty track. */
#the_bet.tb3 .tb3-stripe {
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(13, 23, 48, 0) 0 5px,
		rgba(13, 23, 48, 0.16) 5px 10px
	);
	background-size: 22px 22px;
	animation: tb3StripeMove 1.6s linear infinite;
	pointer-events: none;
}

@keyframes tb3StripeMove {
	from { background-position: 0 0; }
	to   { background-position: 22px 0; }
}

#the_bet.tb3 .tb3-hole {
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	background: var(--tb3-navy-800);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

#the_bet.tb3 .tb3-ringInner {
	position: relative;
	z-index: 1;
	text-align: center;
	line-height: 1.1;
}

#the_bet.tb3 .tb3-odd {
	display: block;
	font-size: 17px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	background: none;
	color: var(--tb3-ink);
}

#the_bet.tb3 .tb3-odd:hover,
#the_bet.tb3 .tb3-odd.selected {
	color: var(--tb3-gold);
}

#the_bet.tb3 .tb3-pct {
	display: block;
	margin-top: 1px;
	font-size: 10px;
	font-weight: 600;
	color: var(--tb3-gold-soft);
}

#the_bet.tb3 .tb3-pct::after {
	content: "%";
}

#the_bet.tb3 .tb3-outcome {
	margin-top: 6px;
	text-align: center;
}

#the_bet.tb3 .tb3-outcomeName {
	display: inline-block;
	min-width: 22px;
	padding: 2px 9px;
	font-size: 12px;
	font-weight: 700;
	border-radius: 999px;
	border: 1px solid var(--tb3-line);
	color: var(--tb3-ink);
	background: rgba(255, 255, 255, 0.04);
}

#the_bet.tb3 .tb3-item.selected .tb3-outcomeName {
	border-color: var(--tb3-gold);
	color: var(--tb3-navy-900);
	background: var(--tb3-gold);
}

#the_bet.tb3 .tb3-item.selected .tb3-ring {
	box-shadow: 0 0 0 2px var(--tb3-gold), 0 8px 20px rgba(0, 0, 0, 0.3);
}

#the_bet.tb3 .tb3-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}

/* =========================================================
   Secondary markets — compact chip grid, centred as a group
   ========================================================= */
#the_bet.tb3 .tb3-secondary {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
}

#the_bet.tb3 .tb3-secondary .min {
	position: relative;
	flex: 0 1 210px;
	padding: 10px 12px 10px;
	border: 1px solid var(--tb3-line);
	border-radius: var(--tb3-radius-sm);
	background: rgba(255, 255, 255, 0.03);
	transition: background 0.25s ease, transform 0.25s ease;
}

#the_bet.tb3 .tb3-secondary .min:hover {
	background: rgba(255, 255, 255, 0.06);
	transform: translateY(-2px);
}

#the_bet.tb3 .tb3-secondary h2 {
	margin: 0 0 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tb3-ink-dim);
	text-align: center;
}

#the_bet.tb3 .tb3-secondary .tb3-row {
	display: flex;
	justify-content: center;
	gap: 14px;
}

#the_bet.tb3 .tb3-secondary .tb3-ring {
	width: 64px;
	height: 64px;
}

#the_bet.tb3 .tb3-secondary .tb3-hole {
	inset: 6px;
}

#the_bet.tb3 .tb3-secondary .tb3-odd {
	font-size: 14px;
}

#the_bet.tb3 .tb3-secondary .tb3-pct {
	font-size: 10px;
}

#the_bet.tb3 .tb3-secondary .tb3-outcome {
	margin-top: 5px;
}

#the_bet.tb3 .tb3-secondary .tb3-outcomeName {
	padding: 2px 8px;
	font-size: 11px;
}

/* =========================================================
   Entrance motion — quiet, single orchestrated reveal
   ========================================================= */
#the_bet.tb3 .tb3-item {
	animation: tb3In 0.5s ease both;
}
#the_bet.tb3 .tb3-main .tb3-item:nth-child(2) { animation-delay: 0.06s; }
#the_bet.tb3 .tb3-main .tb3-item:nth-child(3) { animation-delay: 0.12s; }

@keyframes tb3In {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	#the_bet.tb3 .tb3-stripe { animation: none; }
	#the_bet.tb3 .tb3-item { animation: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media screen and (max-width: 1400px) {
	#the_bet.tb3 .tb3-matchup h2 { font-size: 20px; }
}

@media screen and (max-width: 1024px) {
	#the_bet.tb3 #the_bet_container.tb3-card { padding: 16px 14px; }
	#the_bet.tb3 .tb3-main .max { gap: 18px; }
	#the_bet.tb3 .tb3-ring { width: 72px; height: 72px; }
	#the_bet.tb3 .tb3-secondary .min { flex-basis: 150px; }
}

@media screen and (max-width: 640px) {
	#the_bet.tb3 .tb3-main .max { gap: 12px; }
	#the_bet.tb3 .tb3-ring { width: 62px; height: 62px; }
	#the_bet.tb3 .tb3-odd { font-size: 14px; }
	#the_bet.tb3 .tb3-secondary .min { flex-basis: 100%; }
}

.heading_TheBet{
	margin: 20px 0 20px 30px;
}

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

.heading_TheBet h2.no-background {
  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; 
	}
}