/* Fancy Bet + Premium section (js/sportsbook.js): the SkyFair application's styles (live.css + theme.css, in
   cascade order), scoped to .fm-app. --u = 1px at 375px wide on phones (max 1.2px), 1px on desktop. */

.fm-app { --u: min(calc(100vw / 375), 1.2px); font-family: Tahoma, Helvetica, sans-serif; color: #1e1e1e; line-height: 1.2; }
.is-desktop .fm-app { --u: 1px; font-family: Tahoma, Helvetica, sans-serif; }
.fm-app *, .fm-app *::before, .fm-app *::after { box-sizing: border-box; }
.fm-app button { font-family: inherit; }
.fm-app svg { display: block; }

/* price buttons */
.fm-app .odd { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-left: 1px solid #fff; border-radius: 0; color: #1e1e1e; cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color .15s ease, filter .15s ease; }
.fm-app .odd b { display: block; font-size: calc(13 * var(--u)); font-weight: 700; line-height: 1.2; }
.fm-app .odd small { display: block; font-size: calc(11 * var(--u)); line-height: 1.2; color: #555; }
.fm-app .odd:disabled { cursor: default; }
.fm-app .odd.back:not(:disabled):hover { background: #5aaee9; }
.fm-app .odd.lay:not(:disabled):hover { background: #f896ab; }
.fm-app .odd.picked { outline: 2px solid #1e1e1e; outline-offset: -2px; }

/* rows */
.fm-app .fm-row { position: relative; display: grid; grid-template-columns: 60% 20% 20%; align-items: stretch; min-height: calc(46 * var(--u)); border-bottom: 1px solid #8a9092; background: #fff; }
.fm-app .fm-row > strong { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: calc(3 * var(--u)) calc(6 * var(--u)); color: #111; font-size: calc(15 * var(--u)); font-weight: 500; overflow-wrap: anywhere; }
.fm-app .fm-row-suspended::after { content: attr(data-status); position: absolute; top: 0; bottom: 0; left: 60%; right: 0; display: flex; align-items: center; justify-content: center; background: rgba(30, 40, 50, 0.55); color: #fff; font-size: calc(15 * var(--u)); font-weight: 700; }
.fm-app .fm-row-suspended .odd { pointer-events: none; }
.fm-app .fm-bar { display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(34 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(4 * var(--u)); background: #3b505f; color: #fff; }
.fm-app .fm-bar-pin { flex: 0 0 auto; display: flex; }
.fm-app .fm-bar-pin svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); padding: calc(5 * var(--u)); border-radius: 50%; background: #273845; fill: #cad5de; }
.fm-app .fm-bar > b { flex: 1 1 0%; min-width: 0; font-size: calc(14 * var(--u)); font-weight: 400; line-height: 1.2; }

/* section + tabs */
.fm-app.fm-sb { margin-top: calc(18 * var(--u)); scroll-margin-top: calc(110 * var(--u)); }
.fm-app .fm-sb-tabs { position: relative; display: flex; align-items: stretch; height: calc(32 * var(--u)); background: none; }
.fm-app .fm-sb-pin { flex: 0 0 calc(34 * var(--u)); display: flex; align-items: center; justify-content: center; margin-top: calc(6 * var(--u)); background: #243a48; }
.fm-app .fm-sb-tabs.has-fancy .fm-sb-pin { margin-top: 0; border-top-left-radius: calc(6 * var(--u)); }
.fm-app .fm-sb-pin svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); padding: calc(5 * var(--u)); border-radius: 50%; background: #3d4c59; fill: #c8d3d9; }
.fm-app .fm-sb-tab { position: relative; display: flex; align-items: stretch; height: 100%; margin: 0; padding: 0; border: 0; background: none; color: #fff; font-size: calc(15 * var(--u)); font-weight: 400; cursor: pointer; }
.fm-app .fm-sb-tab span { display: flex; align-items: center; gap: calc(6 * var(--u)); padding: 0 calc(10 * var(--u)); background: #253844; border-radius: 0; white-space: nowrap; }
.fm-app .fm-sb-tab i { display: flex; align-items: center; padding: 0 calc(14 * var(--u)) 0 calc(6 * var(--u)); background: #253844; clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%); }
.fm-app .fm-sb-tab i svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); color: #fff; }
.fm-app .fm-sb-tab.fancy span { border-top-left-radius: calc(6 * var(--u)); }
.fm-app .fm-sb-tab.fancy.active span { background: linear-gradient(180deg, #0a8fa0, #008292); }
.fm-app .fm-sb-tab.fancy.active i { background: #189596; clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%); padding-right: calc(18 * var(--u)); }
.fm-app .fm-sb-tab.fancy:not(.active) i { display: none; }
.fm-app .fm-sb-tab.premium span { padding-right: calc(22 * var(--u)); padding-left: calc(18 * var(--u)); margin-left: calc(-6 * var(--u)); clip-path: polygon(calc(10 * var(--u)) 0, calc(100% - 12px) 0, 100% 100%, 0 100%); border-top-right-radius: calc(6 * var(--u)); }
.fm-app .fm-sb-tab.premium i { display: none; }
.fm-app .fm-sb-tab.premium.active span { background: linear-gradient(180deg, #ec6724, #e35610); clip-path: polygon(calc(10 * var(--u)) 0, 100% 0, 100% 100%, 0 100%); border-top-right-radius: 0; padding-right: calc(10 * var(--u)); }
.fm-app .fm-sb-tab.premium.active i { display: flex; background: #f47f3a; clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%); padding-right: calc(18 * var(--u)); }
.fm-app .fm-sb-tabs:not(.has-fancy) .fm-sb-tab.premium span { clip-path: none; margin-left: 0; padding-left: calc(10 * var(--u)); border-top-left-radius: calc(6 * var(--u)); }
.fm-app .fm-sb-tabs:not(.has-fancy) .fm-sb-tab.premium:not(.active) span { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%); }
.fm-app .fm-sb-clock { display: flex; align-items: center; justify-content: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(4 * var(--u)); background: #6bbd11; }
.fm-app .fm-sb-clock svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: #fff; }
.fm-app .fm-new { position: absolute; right: calc(4 * var(--u)); top: calc(-10 * var(--u)); padding: calc(1 * var(--u)) calc(5 * var(--u)); border-radius: calc(3 * var(--u)); background: #d90928; color: #fff; font-size: calc(11 * var(--u)); font-style: normal; font-weight: 700; line-height: 1.2; }
.fm-app .fm-new::after { content: ''; position: absolute; left: calc(8 * var(--u)); bottom: calc(-4 * var(--u)); border: calc(4 * var(--u)) solid transparent; border-top-color: #d90928; border-bottom: 0; }
.fm-app .fm-min { display: flex; align-items: center; gap: calc(3 * var(--u)); align-self: center; height: calc(26 * var(--u)); margin: 0 calc(6 * var(--u)) 0 auto; padding: 0 calc(7 * var(--u)); border: 0; border-radius: calc(4 * var(--u)); background: #bdd4d6; color: #1f3a3d; font-size: calc(15 * var(--u)); cursor: pointer; }
.fm-app .fm-min svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.fm-app .fm-min.on { background: #9fc0c3; }
.fm-app .fm-min-info { margin: 0; padding: calc(5 * var(--u)) calc(8 * var(--u)); background: #bdd4d6; color: #1f3a3d; font-size: calc(12 * var(--u)); }

/* filter bar (orange Premium / teal Fancy) */
.fm-app .fm-sb-filter { display: flex; align-items: center; gap: 0; height: calc(36 * var(--u)); padding: 0 calc(5 * var(--u)); overflow-x: auto; background: linear-gradient(180deg, #e35610, #e75516); scrollbar-width: none; }
.fm-app .fm-sb-filter::-webkit-scrollbar { display: none; }
.fm-app .fm-sb-filter.fancy { background: #087e8b; }
.fm-app .fm-sb-filter button { flex: 0 0 auto; height: calc(28 * var(--u)); margin: 0; padding: 0 calc(14 * var(--u)); border: 0; border-left: 1px solid rgba(255, 255, 255, 0.3); background: none; color: #fff; font-size: calc(15 * var(--u)); font-weight: 500; white-space: nowrap; cursor: pointer; }
.fm-app .fm-sb-filter button:first-child, .fm-app .fm-sb-filter button.active, .fm-app .fm-sb-filter button.active + button { border-left-color: transparent; }
.fm-app .fm-sb-filter button.active { border-radius: calc(4 * var(--u)); background: #fffffd; color: #89250a; }
.fm-app .fm-sb-filter.fancy button.active { color: #243a48; }

/* premium markets */
.fm-app .fm-pm .fm-bar { min-height: calc(33 * var(--u)); }
.fm-app .fm-fold { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: calc(17 * var(--u)); height: calc(17 * var(--u)); margin: 0; padding: 0; border: 1.5px solid #fff; border-radius: calc(3 * var(--u)); background: none; color: #fff; font-size: calc(15 * var(--u)); line-height: 1; cursor: pointer; }
.fm-app .fm-pm-rows { position: relative; }
.fm-app .fm-pm-row { grid-template-columns: 60% 40%; min-height: calc(48 * var(--u)); border-bottom-color: #c9cccf; }
.fm-app .fm-pm-row > strong { font-weight: 400; padding-left: calc(5 * var(--u)); }
.fm-app .fm-pm .odd.back { background: #72e2a1; color: #1e3a10; }
.fm-app .fm-pm .odd b { font-size: calc(13 * var(--u)); font-weight: 400; }
.fm-app .fm-pm .odd.back:not(:disabled):hover { background: #5fd690; }
.fm-app .fm-pm .odd.picked { outline: 0; background: #16a55f; color: #fff; }
.fm-app .fm-suspend-overlay { position: absolute; inset: 0 0 0 60%; display: flex; align-items: center; justify-content: center; background: rgba(30, 40, 50, 0.55); color: #fff; font-size: calc(15 * var(--u)); font-weight: 700; }
.fm-app .fm-pm-suspended .odd { pointer-events: none; }
.fm-app .fm-empty { margin: 0; padding: calc(7 * var(--u)) calc(8 * var(--u)); border-bottom: 2px solid #c8c8c8; background: #fff; color: #333; font-size: calc(14 * var(--u)); }

/* fancy markets */
.fm-app .fm-fancy-head { display: grid; grid-template-columns: 60% 20% 20%; align-items: center; height: calc(32 * var(--u)); border-bottom: 1px solid #adc0c8; background: #fff; }
.fm-app .fm-fancy-head > b { text-align: center; color: #1e1e1e; font-size: calc(14 * var(--u)); font-weight: 400; }
.fm-app .fm-fancy-title { display: flex; align-items: center; justify-content: space-between; min-height: calc(32 * var(--u)); padding: 0 calc(6 * var(--u)) 0 calc(8 * var(--u)); background: #e4eff8; border-bottom: 1px solid #edf3f5; color: #1e1e1e; font-size: calc(14 * var(--u)); }
.fm-app .fm-fancy-title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-app .fm-fancy-i { flex: 0 0 auto; display: flex; margin: 0; padding: calc(2 * var(--u)); border: 0; background: none; color: #525d66; cursor: pointer; }
.fm-app .fm-fancy-i svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.fm-app .fm-fancy-limits { margin: 0; padding: calc(4 * var(--u)) calc(8 * var(--u)); background: #f0f6fb; color: #3b5160; font-size: calc(12 * var(--u)); }
.fm-app .fm-fancy-row { min-height: calc(48 * var(--u)); border-bottom: 1px solid #adc0c8; background: #fff; }
.fm-app .fm-fancy-remark { font-size: calc(12 * var(--u)) !important; font-weight: 400 !important; color: #1e1e1e; line-height: 1.3; }
.fm-app .fm-fancy-remark.has-book { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: calc(6 * var(--u)); padding-right: calc(5 * var(--u)); }
.fm-app .fm-fancy-remark > span:empty { display: none; }
.fm-app .fm-fancy-row .odd.lay { background: #faa9ba; }
.fm-app .fm-fancy-row .odd.back { background: #72bbef; }
.fm-app .fm-fancy-row .odd b { font-size: calc(15 * var(--u)); font-weight: 400; }
.fm-app .fm-fancy-row .odd small { font-size: calc(11 * var(--u)); color: #1e1e1e; opacity: 0.8; }
.fm-app .fm-fancy-row.fm-row-suspended::after { background: rgba(20, 30, 45, 0.55); }
.fm-app .fm-fancy-pos { flex: 0 0 auto; color: #508d0e; font-size: calc(12 * var(--u)); }
.fm-app .fm-fancy-pos.loss { color: #d0021b; }
.fm-app .fm-book-btn { flex: 0 0 auto; margin: 0 0 0 auto; padding: 0 calc(7 * var(--u)); height: calc(27 * var(--u)); border: 1px solid #cb8009; border-radius: calc(4 * var(--u)); background: #ffcc2f; color: #1e1e1e; font-size: calc(13 * var(--u)); cursor: pointer; }
.fm-app .fm-book-btn:active { background: #f5b800; }

/* Book Position panel */
.fm-bookpos { position: fixed; inset: 0; z-index: 140; background: rgba(0, 0, 0, 0.6); }
.fm-bookpos-panel { position: absolute; top: calc(40 * var(--u)); left: calc(9 * var(--u)); right: calc(9 * var(--u)); bottom: calc(10 * var(--u)); max-width: 600px; margin: 0 auto; overflow: auto; border-radius: calc(3 * var(--u)) calc(3 * var(--u)) 0 0; background: #fff; }
.fm-bookpos-panel header { display: flex; align-items: stretch; background: linear-gradient(180deg, #2f2f2f, #000); }
.fm-bookpos-panel h3 { flex: 1; margin: 0; padding: calc(11 * var(--u)) calc(10 * var(--u)); color: #ffb80c; font-size: calc(15 * var(--u)); font-weight: 700; }
.fm-bookpos-panel header button { flex: 0 0 calc(34 * var(--u)); margin: 0; padding: 0; border: 0; border-left: 1px solid rgba(255, 184, 12, 0.35); background: none; color: #ffb80c; font-size: calc(22 * var(--u)); cursor: pointer; }
.fm-bookpos-name { margin: 0; padding: calc(10 * var(--u)); background: #000; color: #fff; font-size: calc(14 * var(--u)); }
.fm-bookpos-panel table { width: 100%; border-collapse: collapse; font-size: calc(14 * var(--u)); }
.fm-bookpos-panel th { padding: calc(10 * var(--u)) calc(7 * var(--u)); background: #d7e1e4; color: #1e1e1e; font-weight: 400; text-align: left; }
.fm-bookpos-panel td { padding: calc(11 * var(--u)) calc(7 * var(--u)); border-bottom: 1px solid #fff; }
.fm-bookpos-panel th:first-child, .fm-bookpos-panel td:first-child { width: 33%; border-right: 1px solid #fff; }
.fm-bookpos-panel tr.loss td { background: #fcd6dd; }
.fm-bookpos-panel tr.loss td:last-child { color: #d0021b; }
.fm-bookpos-panel tr.win td { background: #d0e3f3; }

/* Under / Over and Toss: their own tabs and bars, built from the Premium components (sports engine) */
.fm-app .fm-sb-tab.premium.x-uo.active span { background: linear-gradient(180deg, #2f7dd1, #1f66b3); }
.fm-app .fm-sb-tab.premium.x-uo.active i { background: #4a90d9; }
.fm-app .fm-sb-tab.premium.x-toss.active span { background: linear-gradient(180deg, #7a55c7, #6541b0); }
.fm-app .fm-sb-tab.premium.x-toss.active i { background: #8e6fd3; }
.fm-app .fm-sb-filter.x-uo { background: linear-gradient(180deg, #1f66b3, #2168b5); }
.fm-app .fm-sb-filter.x-toss { background: linear-gradient(180deg, #6541b0, #6743b2); }
.fm-app .fm-sb-filter.x-uo button.active { color: #153f73; }
.fm-app .fm-sb-filter.x-toss button.active { color: #40287a; }
/* tabs scroll sideways on narrow screens; the padding keeps room for the "New" badge above them */
.fm-app .fm-sb-tabs { overflow-x: auto; scrollbar-width: none; box-sizing: content-box; padding-top: calc(12 * var(--u)); margin-top: calc(-12 * var(--u)); }
.fm-app .fm-sb-tabs::-webkit-scrollbar { display: none; }
.fm-app .fm-sb-tab { flex: 0 0 auto; }
.fm-app .fm-bar .fm-bar-line { margin-left: calc(6 * var(--u)); font-weight: 400; opacity: 0.85; }
.fm-app .fm-bar .fm-bar-pos { margin-left: auto; margin-right: calc(4 * var(--u)); font-size: calc(13 * var(--u)); color: #b9f6ca; }
.fm-app .fm-bar .fm-bar-pos.loss { color: #ffb3b3; }
.fm-app .fm-bar .fm-book-btn { margin-right: calc(6 * var(--u)); }
/* a delayed bet waiting for its confirmation */
.page-loading .page-loading-wait { display: block; margin-top: 4px; font-size: 12px; opacity: 0.85; }

/* A suspended market masks each of its price rows (like Fancy). An open bet slip under a row is never covered. */
.fm-app .fm-pm-row { position: relative; }
.fm-app .fm-pm-row.fm-row-suspended::after { content: none; }
.fm-app .fm-pm-row .fm-row-mask { position: absolute; top: 0; bottom: 0; left: 60%; right: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: rgba(30, 40, 50, 0.55); color: #fff; font-size: calc(15 * var(--u)); font-weight: 700; pointer-events: none; }
.fm-app .fm-slip { position: relative; z-index: 2; }
/* multi-runner events (racing) in the match lists */
.match-row .runner-count { margin-left: 6px; padding: 0 6px; border-radius: 3px; background: #243a48; color: #fff; font-size: 11px; font-style: normal; white-space: nowrap; }

/* live panel (js/live.js): only the fields a provider actually sends */
.lv { margin: 0 0 6px; padding: 6px 10px; background: #1b2b36; color: #fff; font-size: 13px; }
.lv-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-dot { padding: 1px 6px; border-radius: 3px; background: #d0021b; font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.lv-hold { padding: 1px 6px; border-radius: 3px; background: #ffb70c; color: #1e1e1e; font-size: 11px; font-weight: 700; }
.lv-result { color: #8ce99a; font-weight: 700; }
.lv-src { margin-left: auto; opacity: .55; font-size: 11px; }
.lv-body { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; }
.lv-item { display: inline-flex; flex-direction: column; min-width: 54px; }
.lv-item small { opacity: .65; font-size: 11px; }
.lv-item b { font-weight: 700; }
.lv-recent b { display: flex; gap: 3px; flex-wrap: wrap; }
.lv-ball { display: inline-flex; min-width: 20px; height: 20px; padding: 0 3px; align-items: center; justify-content: center; border-radius: 10px; background: #3b5160; font-style: normal; font-size: 11px; }
.lv-ball.b { background: #508d0e; }
.lv-ball.w { background: #d0021b; }
/* "Rules of Premium <sport>" popup (reference GeniusSportsRule): PDF rows, OK button */
.fm-rules { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; padding: calc(10 * var(--u)); background: rgba(0, 0, 0, 0.6); }
.fm-rules-panel { width: 100%; max-width: 600px; max-height: 90vh; overflow: auto; border-radius: calc(8 * var(--u)); background: #fff; }
.fm-rules-panel header { display: flex; align-items: center; min-height: calc(42 * var(--u)); background: linear-gradient(180deg, #2f2f2f, #000); }
.fm-rules-panel h3 { flex: 1; margin: 0; padding: calc(10 * var(--u)) calc(14 * var(--u)); color: #ffb80c; font-size: calc(16 * var(--u)); font-weight: 700; }
.fm-rules-x { align-self: stretch; flex: 0 0 calc(42 * var(--u)); padding: 0; border: 0; background: none; color: #ffb80c; font-size: calc(24 * var(--u)); cursor: pointer; }
.fm-rules-list { padding: 0 calc(10 * var(--u)); }
.fm-rules-row { display: flex; align-items: center; padding: calc(5 * var(--u)) 0; border-bottom: 1px solid #ccc; }
.fm-rules-row:last-child { border-bottom: 0; }
.fm-rules-pdf { display: flex; margin: 0 calc(10 * var(--u)); color: #d0021b; font-size: calc(29 * var(--u)); }
.fm-rules-file { flex: 1; min-width: 0; color: #1e1e1e; font-size: calc(14 * var(--u)); font-weight: 700; line-height: 1.3; text-decoration: none; }
.fm-rules-dl { display: flex; padding: calc(6 * var(--u)) calc(10 * var(--u)); color: #1e1e1e; font-size: calc(22 * var(--u)); }
.fm-rules-none { margin: 0; padding: calc(18 * var(--u)) calc(6 * var(--u)); color: #3b5160; font-size: calc(14 * var(--u)); text-align: center; }
.fm-rules-panel footer { display: flex; justify-content: center; padding: calc(12 * var(--u)) 0 calc(16 * var(--u)); border-top: 1px solid #ccc; }
.fm-rules-ok { width: calc(170 * var(--u)); height: calc(43 * var(--u)); border: 1px solid #222; border-radius: calc(4 * var(--u)); background: linear-gradient(180deg, #474747, #070707); color: #ffb80c; font-size: calc(15 * var(--u)); font-weight: 700; cursor: pointer; }
.is-desktop .fm-rules-panel { max-width: 640px; border-radius: 4px; }
.is-desktop .fm-rules-panel header { min-height: 34px; background: linear-gradient(180deg, #2c485a, #172732); }
.is-desktop .fm-rules-panel h3 { color: #fff; font-size: 14px; }
.is-desktop .fm-rules-x { color: #fff; }
.is-desktop .fm-rules-row { height: 55px; padding: 0; border-bottom-color: #bbb; }
.is-desktop .fm-rules-row:hover { background: #f7f7f7; }
.is-desktop .fm-rules-file { font-size: 12px; line-height: 1.2; }
.is-desktop .fm-rules-dl { align-self: stretch; align-items: center; padding: 0 14px; border-left: 1px solid #ccc; }
.is-desktop .fm-rules-ok { width: 152px; height: 33px; border-color: #cb8009; background: linear-gradient(180deg, #ffb80c, #ffa00c); color: #1e1e1e; font-size: 12px; }