/* Light / minimal skin for the user portal.
   Layer 1 re-points the compiled theme variables (the portal reads ~250 of them
   from /api theme data and sets them on :root). Layer 2 reshapes layout details the
   variables can't reach. Remove the <link> in index.html to get the old look back. */

:root {
  /* tokens */
  --t-bg: #f4f5f7;
  --t-surface: #ffffff;
  --t-line: #e6e8ec;
  --t-line-strong: #d5d9e0;
  --t-ink: #14181f;
  --t-ink-2: #4b5563;
  --t-mute: #8a93a1;
  --t-accent: #2f5bea;
  --t-accent-ink: #ffffff;
  --t-accent-soft: #eef2ff;
  --t-pos: #15803d;
  --t-neg: #dc2626;
  --t-back: #cfe0ff;
  --t-back-2: #e3edff;
  --t-back-3: #eef4ff;
  --t-lay: #ffd7dd;
  --t-lay-2: #ffe6ea;
  --t-lay-3: #fff0f2;
  --t-radius: 10px;
  --t-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --t-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Layer 1: theme variables ---------- */
:root {
  --mainBodyBG: var(--t-bg) !important;

  --header-bg: var(--t-surface) !important;
  --header-text-color: var(--t-ink) !important;
  --header-exposure-color: var(--t-neg) !important;
  --bets-btn-color: var(--t-ink) !important;
  --bets-btn-bg: var(--t-bg) !important;
  --bets-btn-border-color: var(--t-line) !important;
  --bets-btn-box-shadow: none !important;
  --refresh-btn-color: var(--t-ink) !important;
  --refresh-btn-bg: var(--t-bg) !important;
  --refresh-btn-box-shadow: none !important;
  --refresh-btn-border-color: var(--t-line) !important;
  --settings-btn-color: var(--t-ink) !important;
  --settings-btn-bg: var(--t-bg) !important;
  --settings-btn-box-shadow: none !important;
  --settings-btn-border-color: var(--t-line) !important;
  --login-btn-bg: var(--t-accent) !important;
  --login-btn-color: var(--t-accent-ink) !important;
  --desktop-account-btn-bg: var(--t-bg) !important;
  --desktop-account-text-color: var(--t-ink) !important;
  --desktop-account-icons-color: var(--t-accent) !important;
  --exchange-bg: var(--t-surface) !important;
  --exchange-text-color: var(--t-ink) !important;

  --search-input-bg: var(--t-surface) !important;
  --search-input-border-color: var(--t-line-strong) !important;
  --search-input-text-color: var(--t-ink) !important;
  --search-input-icons-color: var(--t-ink-2) !important;
  --search-box-bg: var(--t-surface) !important;
  --search-box-border: var(--t-line) !important;
  --search-box-text-color: var(--t-ink) !important;
  --search-box-bottom-border-color: var(--t-line) !important;

  --login-bg: var(--t-bg) !important;
  --login-cross-bg: var(--t-surface) !important;
  --login-cross-color: var(--t-ink) !important;
  --login-input-bg: var(--t-surface) !important;
  --login-input-text: var(--t-ink) !important;
  --login-input-icon: var(--t-ink-2) !important;
  --login-input-placeholder: var(--t-mute) !important;
  --login-input-border: var(--t-line-strong) !important;
  --login-error-msg: var(--t-neg) !important;
  --login-page-btn-bg: var(--t-accent) !important;
  --login-page-btn-text: var(--t-accent-ink) !important;

  --myaccount-bg: var(--t-surface) !important;
  --myaccount-box-shadow: rgba(16, 24, 40, .16) !important;
  --myaccount-username-bg: var(--t-bg) !important;
  --myaccount-username-text: var(--t-ink) !important;
  --myaccount-username-border: var(--t-line) !important;
  --myaccount-text: var(--t-ink) !important;
  --myaccount-border: var(--t-line) !important;
  --myaccount-logout-btn-bg: var(--t-ink) !important;
  --myaccount-logout-btn-text: #fff !important;

  --age-modal-bg: var(--t-surface) !important;
  --age-modal-text: var(--t-ink) !important;
  --age-modal-cross-bg: var(--t-bg) !important;
  --age-modal-cross-text: var(--t-ink) !important;
  --age-modal-lines: var(--t-line) !important;
  --age-modal-confirm-btn-bg: var(--t-accent) !important;
  --age-modal-confirm-btn-text: #fff !important;
  --age-modal-cancel-btn-bg: var(--t-surface) !important;
  --age-modal-cancel-btn-text: var(--t-ink) !important;
  --age-modal-btn-border: var(--t-line-strong) !important;

  --modal-header-bg: var(--t-surface) !important;
  --modal-header-text: var(--t-ink) !important;
  --modal-bg: var(--t-surface) !important;
  --modal-text: var(--t-ink) !important;
  --modal-line: var(--t-line) !important;
  --modal-ok-bg: var(--t-accent) !important;
  --modal-ok-text: #fff !important;
  --modal-ok-border: var(--t-accent) !important;
  --modal-heading-bg: var(--t-bg) !important;
  --modal-heading-text: var(--t-ink) !important;

  --news-bar-bg: var(--t-surface) !important;
  --news-text-bg: var(--t-accent) !important;
  --news-text-color: #fff !important;
  --news-text-icon-color: #fff !important;
  --news-marque-text-color: var(--t-ink-2) !important;

  --sportsbar-bg: var(--t-surface) !important;
  --sportsbar-text-color: var(--t-ink-2) !important;
  --sportsbar-border-color: transparent !important;
  --sportsbar-active-color: var(--t-accent) !important;
  --mbl-exchange-bar-bg: var(--t-surface) !important;
  --mbl-exchange-bar-text-color: var(--t-ink) !important;
  --mbl-exchange-bar-border-color: var(--t-line) !important;
  --mbl-exchange-bar-active-border: var(--t-accent) !important;
  --mbl-sports-bar-bg: var(--t-surface) !important;
  --mbl-sports-text-color: var(--t-ink-2) !important;
  --mbl-sports-active-bg: var(--t-accent-soft) !important;
  --mbl-sports-active-text-color: var(--t-accent) !important;
  --magnifier-bg: var(--t-bg) !important;
  --magnifier-color: var(--t-ink) !important;

  --highlight-tile-bg: var(--t-surface) !important;
  --highlgiht-tile-text-color: var(--t-ink) !important;
  --desktop-highlights-sport-bar-bg: var(--t-surface) !important;
  --desktop-sports-tile-bg: var(--t-bg) !important;
  --desktop-sports-tile-text-color: var(--t-ink-2) !important;
  --desktop-sports-tile-active-bg: var(--t-accent) !important;
  --desktop-sports-tile-active-text-color: #fff !important;

  --markets-bg: var(--t-surface) !important;
  --markets-text-color: var(--t-ink) !important;
  --markets-dateTime-color: var(--t-mute) !important;
  --markets-pin-color: var(--t-mute) !important;
  --markets-clock-icon-color: var(--t-pos) !important;
  --markets-border-bottom: var(--t-line) !important;
  --markets-pin-color-active: var(--t-accent) !important;
  --markets-virtual-icon: var(--t-ink) !important;
  --desktop-1x2-bg: var(--t-surface) !important;
  --desktop-1x2-text-color: var(--t-mute) !important;
  --desktop-1x2-bottom-border-color: var(--t-line) !important;

  --hosrseRacing-schedule-bg: var(--t-bg) !important;
  --hosrseRacing-schedule-color: var(--t-ink) !important;
  --horseRacing-country-active-bg: var(--t-surface) !important;
  --horseRacing-country-active-border: var(--t-line) !important;
  --horseRacing-country-color: var(--t-ink-2) !important;
  --horseRacing-country-active-color: var(--t-ink) !important;
  --country-ui-bg: var(--t-bg) !important;
  --country-list-border: var(--t-line) !important;
  --country-event-box-bg: var(--t-bg) !important;
  --country-event-box-color: var(--t-ink) !important;
  --country-event-color: var(--t-ink) !important;

  --casino-container-bg: var(--t-surface) !important;
  --casino-container-border-bottom: var(--t-line) !important;
  --casino-tab-bg: var(--t-bg) !important;
  --casino-tab-color: var(--t-ink-2) !important;
  --casino-tab-active-bg: var(--t-accent) !important;
  --casino-tab-active-color: #fff !important;
  --casino-icon-bg: var(--t-bg) !important;
  --casino-bottom-bg: var(--t-surface) !important;
  --casino-bottom-color: var(--t-ink) !important;

  --reports-filters-box-bg: var(--t-surface) !important;
  --reports-filters-box-border: var(--t-line) !important;
  --reports-submit-btn-bg: var(--t-accent) !important;
  --reports-submit-btn-clr: #fff !important;
  --reports-submit-btn-border: var(--t-accent) !important;
  --reports-title-bg: var(--t-surface) !important;
  --reports-title-text: var(--t-ink) !important;
  --reports-table-head-bg: var(--t-bg) !important;
  --reports-table-head-text: var(--t-ink-2) !important;
  --child-navigation-link: var(--t-accent) !important;

  --side-nav-top-bar-bg: var(--t-surface) !important;
  --side-nav-link-border: var(--t-line) !important;
  --side-nav-top-text-color: var(--t-mute) !important;
  --side-nav-bg: var(--t-surface) !important;
  --side-nav-text-color: var(--t-ink) !important;
  --side-nav-icon-color: var(--t-accent) !important;
  --side-nav-hover-bg: var(--t-accent-soft) !important;
  --side-nav-hover-text-color: var(--t-accent) !important;
  --right-sidenav-bg: var(--t-surface) !important;
  --right-sidenav-title-bar-bg: var(--t-surface) !important;
  --right-sidenav-title-bar-color: var(--t-ink) !important;

  --inplay-tabs-border: var(--t-line) !important;
  --inplay-tabs-bg: var(--t-surface) !important;
  --inplay-tabs-text: var(--t-ink-2) !important;
  --inplay-tabs-active-bg: var(--t-accent) !important;
  --inplay-tabs-active-text: #fff !important;
  --inplay-sports-tile-bg: var(--t-surface) !important;
  --inplay-sports-tile-text: var(--t-ink) !important;
  --inplay-1x2-bg: var(--t-surface) !important;
  --inplay-1x2-text: var(--t-mute) !important;

  --settings-bar-bg: var(--t-surface) !important;
  --settings-bar-color: var(--t-ink) !important;
  --stack-border-color: var(--t-line-strong) !important;
  --stack-heading-color: var(--t-ink) !important;
  --setting-save-bg: var(--t-accent) !important;
  --setting-save-color: #fff !important;

  --mbl-sportName-bg: var(--t-surface) !important;
  --mbl-sportName-text: var(--t-ink) !important;
  --mbl-sportName-tv: var(--t-ink) !important;
  --mbl-tvScore-tab-bg: var(--t-bg) !important;
  --mbl-tvScore-tab-text: var(--t-ink-2) !important;
  --mb-tvScore-border: var(--t-line) !important;
  --mbl-tvScore-active-border: var(--t-accent) !important;
  --mbl-filter-background: var(--t-bg) !important;
  --mbl-filter-tab-bg: var(--t-surface) !important;
  --mbl-filter-tab-text: var(--t-ink-2) !important;
  --mbl-filter-tab-border: var(--t-line) !important;
  --mbl-filter-tab-active-bg: var(--t-accent) !important;
  --mbl-filter-tab-active-text: #fff !important;
  --mbl-filter-tab-active-border: var(--t-accent) !important;

  --market-border: var(--t-line) !important;
  --marketdetails-marketName-bg: var(--t-accent-soft) !important;
  --marketdetails-marketName-text: var(--t-accent) !important;
  --marketdetails-info-icon: var(--t-accent) !important;
  --cashout-icon-bg: #ffb900 !important;
  --cashout-icon-color: #000 !important;
  --after-bet-cashout-bg: var(--t-line) !important;
  --marketdetails-marketname-bar-bg: var(--t-surface) !important;
  --marketdetails-marketname-bar-text: var(--t-ink) !important;
  --marketName-bar-bottom-border: var(--t-line) !important;
  --jockey-tags-bg: var(--t-bg) !important;
  --jockey-tags-text: var(--t-ink) !important;
  --marketdetails-matchodds-Box-bg: var(--t-surface) !important;
  --matchodds-runner-text: var(--t-ink) !important;
  --matchodds-pl-minus: var(--t-neg) !important;
  --matchodds-pl-plus: var(--t-pos) !important;
  --marketdetails-matchodds-bottom-border: var(--t-line) !important;
  --matchodds-minmax-bg: var(--t-bg) !important;
  --matchodds-minmax-text: var(--t-mute) !important;
  --matchodds-minmax-value: var(--t-ink-2) !important;
  --matchodds-suspended-bg: var(--t-surface) !important;
  --matchodds-suspended-color: var(--t-neg) !important;
  --matchodds-suspended-border: var(--t-neg) !important;

  --bookmaker-bg: #fffdf3 !important;
  --bookmaker-back-lay-color: var(--t-ink) !important;
  --bookmaker-runners-text: var(--t-ink) !important;
  --bookmaker-pl-minus: var(--t-neg) !important;
  --bookmaker-pl-plus: var(--t-pos) !important;
  --bookmaker-bottom-border: var(--t-line) !important;
  --bookmaker-suspended-bg: rgba(20, 24, 31, .45) !important;
  --bookmaker-suspended-color: #fff !important;
  --bookmaker-news-text: var(--t-ink-2) !important;

  --markets-fancy-icon-bg: #0f766e !important;
  --markets-fancy-text: #fff !important;
  --markets-fancy-info: #fff !important;
  --fancy-info-icon-bg: #14998e !important;
  --fancy-category-active-bg: var(--t-surface) !important;
  --fancy-category-active-text: var(--t-accent) !important;
  --fancy-category-bg: var(--t-bg) !important;
  --fancy-category-text: var(--t-ink-2) !important;
  --fancy-market-bg: var(--t-surface) !important;
  --fancy-runner-text: var(--t-ink) !important;
  --fancy-runner-bottom-border: var(--t-line) !important;
  --fancy-minmax-text-color: var(--t-mute) !important;
  --fancy-minmax-value: var(--t-ink-2) !important;
  --fancy-mbl-minmax-bg: var(--t-surface) !important;
  --fancy-minmax-border: var(--t-line) !important;
  --fancy-mbl-minmax-cross: var(--t-ink) !important;
  --fancy-book-btn-bg: var(--t-accent) !important;
  --fancy-book-btn-text: #fff !important;
  --fancy-pl-minus: var(--t-neg) !important;
  --facny-pl-plus: var(--t-pos) !important;
  --facny-suspended-bg: rgba(20, 24, 31, .45) !important;
  --facny-suspended-color: #fff !important;
  --fancy-news-bg: var(--t-accent-soft) !important;
  --fancy-news-text: var(--t-accent) !important;

  --markets-sportsbook-bg: #c2410c !important;
  --markets-sportsbook-text: #fff !important;
  --markets-sportsbook-info: #fff !important;
  --sportsbook-info-icon-bg: #ea580c !important;
  --sportsbook-category-active-bg: var(--t-surface) !important;
  --sportsbook-category-active-text: var(--t-accent) !important;
  --sportsbook-category-bg: var(--t-bg) !important;
  --sportsbook-category-text: var(--t-ink-2) !important;
  --sportmarket-border: var(--t-line) !important;
  --sportbook-market-bg: var(--t-surface) !important;
  --sportbook-runner-text: var(--t-ink) !important;
  --sportbook-runner-border: var(--t-line) !important;
  --sportbook-pl-minus: var(--t-neg) !important;
  --sportbook-pl-plus: var(--t-pos) !important;

  --stack-cancel-bg: var(--t-surface) !important;
  --stack-cancel-border-bg: var(--t-line-strong) !important;
  --stack-cancel-color: var(--t-ink) !important;
  --stack-placebet-bg: var(--t-accent) !important;
  --stack-placebet-border-bg: var(--t-accent) !important;
  --stack-placebet-color: #fff !important;
  --stack-bg: var(--t-surface) !important;
  --stack-border-bg: var(--t-line-strong) !important;
  --stack-color: var(--t-ink) !important;
  --plusMinus-bg: var(--t-surface) !important;
  --plusMinus-color: var(--t-accent) !important;
  --plusMinus-border-color: var(--t-line-strong) !important;
  --input-stake-bg: var(--t-surface) !important;
  --input-stake-color: var(--t-ink) !important;
  --input-disable-stake-color: var(--t-mute) !important;

  --sports-quicklinks-bg: var(--t-surface) !important;
  --sports-quicklinks-text: var(--t-ink) !important;
  --sport-linkstab-bg: var(--t-surface) !important;
  --sport-linkstab-border: var(--t-line) !important;
  --sport-link-text: var(--t-ink-2) !important;
  --sport-link-icons: var(--t-ink-2) !important;
  --sport-allsports-bg: var(--t-bg) !important;
  --sport-allsports-text: var(--t-ink) !important;
  --sport-list-bg: var(--t-surface) !important;
  --sport-list-text: var(--t-ink) !important;
  --sport-list-icon-color: var(--t-ink-2) !important;
  --sport-list-icon-bg: var(--t-surface) !important;
  --sport-list-border: var(--t-line) !important;

  --account-title-bg: var(--t-bg) !important;
  --account-title-text: var(--t-ink) !important;
  --account-links-bg: var(--t-surface) !important;
  --account-links-text: var(--t-ink) !important;
  --account-link-border: var(--t-line) !important;
  --acoount-arrow-bg: var(--t-surface) !important;
  --account-arrow-text: var(--t-mute) !important;
  --account-arrow-border: var(--t-line-strong) !important;
  --account-logout-bg: #fef2f2 !important;
  --account-logout-text: #b91c1c !important;
  --account-logout-border: #fecaca !important;

  --loader1-bg: var(--t-accent) !important;
  --loader2-bg: #9db5ff !important;
  --loader-body: var(--t-surface) !important;
  --loader-text: var(--t-ink) !important;

  --footer-border-top: var(--t-line) !important;
  --footer-text-color: var(--t-ink-2) !important;

  --bottom-nav-bg: var(--t-surface) !important;
  --bottom-nav-text: var(--t-mute) !important;
  --bottom-nav-icon: var(--t-ink-2) !important;
  --bottom-nav-active-icon: var(--t-accent) !important;
  --bottom-nav-active-text: var(--t-accent) !important;
  --bottom-nav-active-bg: var(--t-accent-soft) !important;
}

/* ---------- Layer 2: structure & finish ---------- */
html, body { background: var(--t-bg) !important; }
body, .btn, input, select, textarea, button { font-family: var(--t-font) !important; }
body { color: var(--t-ink); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }

/* ----- Header & primary nav: flat white bars separated by hairlines ----- */
.site-header.app-header { background: var(--t-surface) !important; border-bottom: 1px solid var(--t-line); box-shadow: none !important; }
.site-logo, .site-logo-after { object-fit: contain; }
.Myaccount-after-login .balance, .Myaccount-after-login .balance * { color: var(--t-ink); }
.exp-red, .userTotalExposure { color: var(--t-neg) !important; }
.myaccnt > a.nav-link, .myaccnt .My-acc-font { background-image: none !important; border: 1px solid var(--t-line) !important; border-radius: 999px !important; box-shadow: none !important; padding: 5px 12px !important; }
.login-refresh-MAcnt-btn a, .login-refresh-MAcnt-btn .head-refresh a { border-radius: 999px !important; }
.myaccnt .dropdown-menu { border: 1px solid var(--t-line) !important; border-radius: var(--t-radius) !important; box-shadow: 0 12px 32px rgba(16, 24, 40, .14) !important; overflow: hidden; }
.myaccnt .dropdown-item { color: var(--t-ink) !important; }
.myaccnt .dropdown-item:hover { background: var(--t-accent-soft) !important; color: var(--t-accent) !important; }
.logout-btn { border-radius: 8px !important; border: 0 !important; }

app-header-nav .menu-wrap { background: var(--t-surface) !important; border-bottom: 1px solid var(--t-line); box-shadow: none !important; }
app-header-nav .full-wrap { background: transparent !important; }
app-header-nav ul.tab-menu li { border: 0 !important; background: transparent !important; }
app-header-nav a.navbar-item { color: var(--t-ink-2) !important; background: transparent !important; text-shadow: none !important; font-weight: 600; position: relative; padding-left: 14px !important; padding-right: 14px !important; }
app-header-nav a.navbar-item:hover { color: var(--t-ink) !important; }
app-header-nav a.navbar-item, app-header-nav a.navbar-item:hover, app-header-nav a.navbar-item.active { text-decoration: none !important; }
app-header-nav a.navbar-item.active { color: var(--t-accent) !important; }
app-header-nav a.navbar-item.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -8px; height: 3px; border-radius: 3px 3px 0 0; background: var(--t-accent); }
app-header-nav .settings a, app-header-nav .settings i { color: var(--t-ink-2) !important; text-shadow: none !important; }

/* ----- Left sports rail & right open-bets rail ----- */
.sidebar { border-right: 1px solid var(--t-line); }
.top-head-sport { border-bottom: 1px solid var(--t-line); }
.top-head-sport a, .top-head-sport li { color: var(--t-mute) !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.sidebar .nav-link { font-weight: 600; }
.sidebarright { border-left: 1px solid var(--t-line); }
.sidebarright .card { border: 0 !important; background: var(--t-surface) !important; box-shadow: none !important; border-radius: 0 !important; }
.sidebarright .card-header { border-bottom: 1px solid var(--t-line) !important; font-weight: 700; }
.sidebarright select, .desktop-bets { border: 1px solid var(--t-line-strong) !important; border-radius: 8px !important; padding: 0 8px; height: 36px; width: 100%; box-sizing: border-box; background: var(--t-surface); color: var(--t-ink); }

/* ----- Home: news ticker, highlights card, event rows ----- */
.marquee-box { border: 1px solid var(--t-line); border-radius: var(--t-radius); overflow: hidden; margin: 8px 0; box-shadow: var(--t-shadow); }
.marquee-box h4 { border-radius: 0; font-weight: 700; }
.game-highlight-wrap { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-radius); box-shadow: var(--t-shadow); overflow: hidden; margin-top: 8px; }
.game-highlight-wrap h3 { font-size: 13px !important; font-weight: 700; letter-spacing: .02em; padding: 12px 14px !important; border-bottom: 1px solid var(--t-line); }
.game-menu-tab .nav-tabs { border: 0 !important; padding: 10px 12px 4px; gap: 6px; background: var(--t-surface); }
.game-menu-tab .nav-tabs .nav-link { border: 0 !important; border-radius: 999px !important; background: var(--t-bg) !important; color: var(--t-ink-2) !important; font-weight: 600; padding: 6px 14px !important; margin: 0 !important; }
.game-menu-tab .nav-tabs .nav-link.active { background: var(--t-accent) !important; color: #fff !important; }
.game-menu-tab .nav-tabs .nav-link.active span { color: #fff !important; }
.dashboard-custom-table { margin-bottom: 0 !important; border: 0 !important; }
.dashboard-custom-table thead th { color: var(--t-mute) !important; font-size: 11px !important; font-weight: 600 !important; background: transparent !important; border-bottom: 1px solid var(--t-line) !important; text-transform: uppercase; letter-spacing: .06em; }
.dashboard-custom-table tbody tr { border-bottom: 1px solid var(--t-line) !important; transition: background .12s; }
.dashboard-custom-table tbody tr:last-child { border-bottom: 0 !important; }
.dashboard-custom-table tbody tr:hover, .dashboard-custom-table.table-hover > tbody > tr:hover > * { background: var(--t-bg) !important; --bs-table-bg-state: var(--t-bg); }
.dashboard-custom-table td { vertical-align: middle; }
.match-name { font-weight: 600; }
.match-name:hover { color: var(--t-accent) !important; }
.in_play { color: var(--t-pos) !important; font-weight: 700; font-size: 11px !important; background: #e8f6ec; padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.match-time { color: var(--t-mute) !important; }
.game-bookmakers, .game-sportbook { border-radius: 6px !important; font-weight: 700; font-size: 11px !important; padding: 2px 6px; }
.game-bookmakers { background-image: none !important; background-color: var(--t-ink) !important; }

/* Odds: soft tinted cells, same back(blue)/lay(pink) semantics */
.count .back, .count .lay { border-radius: 0; font-weight: 700; color: var(--t-ink) !important; min-width: 44px; }
.count .back { background: var(--t-back) !important; border-radius: 6px 0 0 6px; }
.count .lay { background: var(--t-lay) !important; border-radius: 0 6px 6px 0; }
.back-1, .back_1, .back-gradient { background: var(--t-back) !important; }
.back-2, .back_2 { background: var(--t-back-2) !important; }
.back-3, .back_3 { background: var(--t-back-3) !important; }
.lay-1, .lay_1, .lay-gradient { background: var(--t-lay) !important; }
.lay-2, .lay_2 { background: var(--t-lay-2) !important; }
.lay-3, .lay_3 { background: var(--t-lay-3) !important; }
.back-1:hover, .back_1:hover { background: #b5ceff !important; }
.lay-1:hover, .lay_1:hover { background: #ffc2cb !important; }

/* Home banner: casino-themed widget built by casino-banner.js (no images, nothing downloaded).
   The old slide carousel is hidden; the backend no longer serves slides either. */
owl-carousel-o.custom-owl-carousel { display: none !important; }

.cb-banner { --px: 0px; --py: 0px; position: relative; display: flex; align-items: center; gap: 18px; height: 112px; margin: 8px 0; padding: 0 18px; overflow: hidden; border: 1px solid var(--t-line); border-radius: var(--t-radius); box-shadow: var(--t-shadow); background: linear-gradient(110deg, var(--t-accent-soft) 0%, var(--t-surface) 46%, #fff1f3 100%); transition: box-shadow .3s, border-color .3s; }
.cb-banner[data-state="spinning"] { border-color: #c7d3fb; }
.cb-banner[data-state="win"] { border-color: #f4c04e; box-shadow: 0 0 0 3px rgba(245, 158, 11, .22), var(--t-shadow); animation: cb-pulse .9s ease-out 2; }
@keyframes cb-pulse { 50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, .12), var(--t-shadow); } }

/* drifting suits (reacts to the pointer through --px / --py) */
.cb-bg { position: absolute; inset: -6px -20px; pointer-events: none; transform: translate(var(--px), var(--py)); transition: transform .25s ease-out; }
.cb-row { position: absolute; left: 0; white-space: nowrap; line-height: 1; font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", sans-serif; will-change: transform; }
.cb-row-a { top: 14px; font-size: 34px; color: var(--t-ink); opacity: .08; animation: cb-left 40s linear infinite; }
.cb-row-b { bottom: 14px; font-size: 40px; color: var(--t-neg); opacity: .14; animation: cb-right 48s linear infinite; }
@keyframes cb-left { to { transform: translateX(-50%); } }
@keyframes cb-right { from { transform: translateX(-50%); } }

/* chips: bob gently, flip when clicked */
.cb-chips { position: relative; z-index: 1; display: flex; }
.cb-chip { position: relative; width: 44px; height: 44px; margin-left: -12px; padding: 0; border: 3px dashed rgba(255, 255, 255, .85); border-radius: 50%; color: #fff; font: 800 12px/1 var(--t-font); letter-spacing: 0; box-shadow: 0 2px 6px rgba(16, 24, 40, .22), inset 0 0 0 3px rgba(0, 0, 0, .12); cursor: pointer; animation: cb-bob 3.2s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.cb-chip:first-child { margin-left: 0; }
.cb-chip-red { background: #dc2626; }
.cb-chip-blue { background: #2f5bea; animation-delay: -1s; }
.cb-chip-ink { background: #14181f; animation-delay: -2s; }
.cb-chip.is-pop { animation: cb-flip .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes cb-bob { 50% { transform: translateY(-5px); } }
@keyframes cb-flip { 0% { transform: translateY(0) rotateY(0); } 40% { transform: translateY(-16px) rotateY(540deg); } 100% { transform: translateY(0) rotateY(1080deg); } }

.cb-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; margin-right: auto; }
.cb-copy strong { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--t-ink); }
.cb-copy span { font-size: 12px; color: var(--t-ink-2); }
.cb-banner[data-state="win"] .cb-copy span { color: #b45309; font-weight: 700; }

/* slot */
.cb-slot { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--t-line-strong); border-radius: 14px; background: var(--t-surface); box-shadow: 0 4px 14px rgba(16, 24, 40, .08); cursor: pointer; user-select: none; -webkit-user-select: none; }
.cb-reel { position: relative; width: 46px; height: 58px; overflow: hidden; border-radius: 9px; background: linear-gradient(#f4f5f7, #fff 35%, #fff 65%, #f4f5f7); box-shadow: inset 0 0 0 1px var(--t-line); }
.cb-reel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(16, 24, 40, .10), transparent 28%, transparent 72%, rgba(16, 24, 40, .10)); }
.cb-strip { will-change: transform; }
.cb-sym { display: flex; align-items: center; justify-content: center; height: 58px; font: 800 30px/1 "Segoe UI Symbol", "Apple Symbols", var(--t-font); }
.cb-ink { color: var(--t-ink); } .cb-red { color: var(--t-neg); } .cb-blue { color: var(--t-accent); } .cb-gold { color: #f59e0b; }
.cb-spin { align-self: stretch; margin-left: 4px; padding: 0 16px; border: 0; border-radius: 9px; background: var(--t-accent); color: #fff; font: 800 13px/1 var(--t-font); letter-spacing: .08em; box-shadow: 0 1px 2px rgba(47, 91, 234, .4); cursor: pointer; transition: transform .1s, background .2s; }
.cb-spin:hover { background: #2549c7; }
.cb-spin:active { transform: scale(.95); }
.cb-spin:disabled { background: #9db5ff; cursor: default; }
.cb-banner[data-state="win"] .cb-reel { box-shadow: inset 0 0 0 2px #f4c04e; }

.cb-confetti { position: absolute; z-index: 2; width: 7px; height: 11px; border-radius: 2px; pointer-events: none; }

@media (max-width: 767.98px) {
  .cb-banner { height: 84px; margin: 0; gap: 10px; padding: 0 12px; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .cb-chips { display: none; }
  .cb-copy strong { font-size: 15px; }
  .cb-copy span { font-size: 11px; }
  .cb-reel { width: 38px; height: 48px; }
  .cb-sym { height: 48px; font-size: 24px; }
  .cb-spin { padding: 0 12px; }
  .cb-row-a { top: 8px; font-size: 26px; } .cb-row-b { bottom: 8px; font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-row, .cb-chip, .cb-banner { animation: none !important; }
  .cb-bg { transition: none; }
}
.mobile-width.scrollHeight { border-bottom: 0 !important; }

/* Empty casino promo strip (no games loaded) */
.inplay-match:has(app-old-casino ul.menu-list:empty) { display: none !important; }

/* ----- Market page ----- */
.card-matchodds, .card-fancybet, .fancy-card, .marketDetailsListItem .card { border: 1px solid var(--t-line) !important; border-radius: var(--t-radius) !important; box-shadow: var(--t-shadow); overflow: hidden; margin-bottom: 10px; }
.match-odds, .fancy-title, .marketinfo { font-weight: 700; }
.match-odds { border-radius: 0 14px 0 0 !important; padding-right: 14px; }
.matched-count { font-weight: 600; color: var(--t-ink-2) !important; }
.matchoddsminmax { border-radius: 999px !important; color: var(--t-ink-2) !important; padding: 2px 10px !important; }
.matchodds_runner .team-name, .team-name { font-weight: 600; color: var(--t-ink) !important; }
.matchodd td, .matchodds_runner { border-color: var(--t-line) !important; }
.cashout-container, .cashout-label { color: var(--t-ink-2) !important; }
.cashout-icon { box-shadow: none; }
.mc-sc, .mc-sc__ctnr, .match-centre__score-and-events { border-radius: var(--t-radius); overflow: hidden; }

/* Bet slip */
.place-bet, .slip-back, .blue-bet-slip-back { background: var(--t-accent-soft) !important; border-top: 1px solid var(--t-line); border-bottom: 1px solid var(--t-line); }
.place-bet .btn-cancel, .place-bet .stackbutton button { border-radius: 8px !important; }
.place-bet .stackbutton button { background: var(--t-surface) !important; color: var(--t-ink) !important; border: 1px solid var(--t-line-strong) !important; font-weight: 600; }
.place-bet .stackbutton button:hover { border-color: var(--t-accent) !important; color: var(--t-accent) !important; }
.place-bet .btn-send { border-radius: 8px !important; font-weight: 700; background: var(--t-accent) !important; border-color: var(--t-accent) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(47, 91, 234, .35); }
.place-bet .btn-send:disabled, .place-bet .btn-send.disabled { background: #c4cdee !important; border-color: #c4cdee !important; box-shadow: none; }
.place-bet .stakeinput, .place-bet .input-Betslip { background: var(--t-surface) !important; color: var(--t-ink) !important; border: 1px solid var(--t-line-strong) !important; }
.place-bet .betButtonMinus, .place-bet .betButtonPlus, .place-bet .stakeactionminus, .place-bet .stakeactionplus { background: var(--t-surface) !important; color: var(--t-accent) !important; }

.slip-back-br { background: var(--t-accent-soft) !important; }
/* Bookmaker / sportsbook headers: flat tints instead of the old saturated gradients */
th.bookmakerbacklay { background-image: none !important; background-color: var(--t-back) !important; }
th.bookmakerbacklay.justify-content-between { background-color: var(--t-lay) !important; }
.sportbook-back, .back-gradientSportbook { background-image: none !important; background-color: #d3f3e0 !important; }

/* Modals */
.modal-content { border: 0 !important; border-radius: 14px !important; box-shadow: 0 24px 64px rgba(16, 24, 40, .22) !important; overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--t-line) !important; }
.modal-footer { border-top: 1px solid var(--t-line) !important; }
.btn-primary { background: var(--t-accent) !important; border-color: var(--t-accent) !important; border-radius: 8px !important; }

/* ----- Account / report screens ----- */
.card.card-accent-primary { border: 1px solid var(--t-line) !important; border-radius: var(--t-radius) !important; box-shadow: var(--t-shadow) !important; }
.card-accent-primary > .card-header, .card-header.account-detail-head { background: var(--t-surface) !important; color: var(--t-ink) !important; border-bottom: 1px solid var(--t-line) !important; font-weight: 700; }
.card-accent-primary .card-body table.table thead th, .card-accent-primary .dataTables_wrapper table.dataTable thead th { background: var(--t-bg) !important; color: var(--t-ink-2) !important; font-weight: 600; text-transform: uppercase; font-size: 11px !important; letter-spacing: .04em; border-bottom: 1px solid var(--t-line) !important; }
.card-accent-primary .card-body table.table td, .card-accent-primary .dataTables_wrapper table.dataTable td { border-color: var(--t-line) !important; }
.card-accent-primary .card-body table.table tbody tr:nth-child(even) { background: transparent; }
.card-accent-primary .card-body table.table tbody tr:hover { background: var(--t-bg); }
.form-control, .form-select { border: 1px solid var(--t-line-strong) !important; border-radius: 8px !important; background: var(--t-surface) !important; color: var(--t-ink) !important; }
.form-control:focus, .form-select:focus { border-color: var(--t-accent) !important; box-shadow: 0 0 0 3px rgba(47, 91, 234, .15) !important; }

/* ----- Login ----- */
.main-Box-login { background: var(--t-bg) !important; }
.main-Box-login .centered-container { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: 16px; box-shadow: 0 8px 32px rgba(16, 24, 40, .08); padding: 28px 24px 24px !important; width: min(380px, calc(100% - 32px)) !important; max-width: none; }
.main-Box-login .crossIcon { border-radius: 999px !important; box-shadow: none !important; border: 1px solid var(--t-line); }
.main-Box-login .phoneNumberDiv { border: 1px solid var(--t-line-strong) !important; border-radius: 10px !important; background: var(--t-surface) !important; overflow: hidden; }
.main-Box-login .phoneNumberInput { border: 0 !important; box-shadow: none !important; }
.main-Box-login .loginBtn { border-radius: 10px !important; border: 0 !important; font-weight: 700; padding: 11px 0; width: 100%; box-shadow: 0 1px 2px rgba(47, 91, 234, .35); }
.main-Box-login .loginBtn.disablebtn { background: var(--t-surface) !important; color: var(--t-ink) !important; border: 1px solid var(--t-line-strong) !important; box-shadow: none; }

/* ----- Mobile ----- */
@media (max-width: 767.98px) {
  .site-header.app-header { padding-bottom: 6px; }
  .after-login-bets-buttons a { border-radius: 999px !important; font-weight: 600; }
  .mobile-men .show-this { background: var(--t-surface) !important; border-bottom: 1px solid var(--t-line); }
  .mobile-men .menu-item { border: 0 !important; }
  .mobile-men .menu-item.active { border-radius: 999px !important; }
  .mobile-men .menutext { font-weight: 600; }
  .marquee-box { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; margin: 0; }
  .game-highlight-wrap { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; margin-top: 0; }

  nav.mobile-footer-menu { background: var(--t-surface) !important; border-top: 1px solid var(--t-line); box-shadow: 0 -4px 16px rgba(16, 24, 40, .06); }
  nav.mobile-footer-menu li, nav.mobile-footer-menu a { color: var(--t-mute) !important; font-size: 11px; font-weight: 600; }
  nav.mobile-footer-menu a.active-link, nav.mobile-footer-menu a.active { color: var(--t-accent) !important; }
  /* flatten the raised centre tab (its icon was offset up to sit in the bump) */
  nav.mobile-footer-menu .icon-sports { margin: 0 auto 2px !important; }
  nav.mobile-footer-menu li.main-nav { background: transparent !important; box-shadow: none !important; }
  nav.mobile-footer-menu li.main-nav::before, nav.mobile-footer-menu li.main-nav::after,
  nav.mobile-footer-menu li.main-nav a::before, nav.mobile-footer-menu li.main-nav a::after { display: none !important; }
}