/* BichaBet skin (server/tafbet-brand/bicha/theme.css) — yellow / black / red, modelled on the JamboBet
   look the operator sent (2026-10-31): white top bar, YELLOW main nav with black links + red active tab,
   yellow section headers with black text, red buttons. Loaded AFTER chatki's own stylesheets on the portal
   (chatkiFrontend portal head), the sportsbook SPA shell (chatkiAggregate getSpaHtml, end of <head>) and the
   native auth pages, so it only re-maps the colour variables those sheets already read, plus targeted rules.
   Never loaded without BRAND_SKIN=bicha (brandAsset: the file lives only in the skin folder).
   Served no-cache + mtime-versioned per request: edit, scp, reload. */

/* ---------- portal (chatki.bet mirror) — variables (html: beats chatki's [data-theme=light] on specificity) ---------- */
html, html[data-theme=light], html:root {
  --light-theme-primary-one: #ffe066;   /* lightest */
  --light-theme-primary-two: #ffd400;   /* main nav / mobile header → brand yellow (JamboBet) */
  --light-theme-primary-three: #e3001b; /* login button, payment button → red */
  --light-theme-primary-four: #1e1e1e;  /* dropdowns, popups, primary-color → near black */
  --light-theme-primary-five: #0d0d0d;  /* darkest: popup bg, scrollbar thumb */
  --newheader-color1: #f6f6f6;          /* top bar → white-ish (JamboBet) */
  --newheader-color2: #ffd400;          /* main nav → yellow */
  --newheader-color3: #ffd400;
  --brand-color: #e3001b !important;    /* highlight text / NEW tags → red (yellow would vanish on the yellow bar) */
  --sport-border-top-primary: #e5bd00;
  --sport-border-bottom-primary: #c9a600;
  --scrollbar-thumb-color: #333;
  --scrollbar-track-color: #e9e9e9;
}
/* the SPA's own (hand-built + chatki-extracted) nav scope — same palette */
.tkx, html .tkx {
  --newheader-color1: #f6f6f6; --newheader-color2: #ffd400; --newheader-color3: #ffd400;
  --light-theme-primary-one: #ffe066; --light-theme-primary-two: #ffd400; --light-theme-primary-three: #e3001b;
  --light-theme-primary-four: #1e1e1e; --light-theme-primary-five: #0d0d0d;
  --brand-color: #e3001b; --primary-color: #1e1e1e; --header-color: #1e1e1e;
}
/* top bar: dark text + icons on the light bar */
.top-navigation, .top-navigation a, .top-navigation span, .top-navigation .chat-button,
.top-navigation .new-language-selector, .top-navigation .lang-middle { color: #222 !important; }
.top-navigation svg, .top-navigation svg path, .top-navigation .new-social-icon svg, .top-navigation .new-social-icon svg path { fill: #222; }
/* main nav (yellow): black links, active route = red block with white text, NEW tags red */
.main-navigation, .main-navigation .main-navigation-routs a, .main-navigation .main-navigation-routs a span,
.main-navigation .main-navigation-routs-dropdown-wrapper, .main-navigation .main-navigation-routs-dropdown-wrapper * { color: #111; }
.main-navigation .main-navigation-routs div.active-border { background: #e3001b; border-radius: 3px; }
.main-navigation .main-navigation-routs div.active-border a,
.main-navigation .main-navigation-routs div.active-border a span:not(.route-tag-header2) { color: #fff !important; }
.main-navigation .main-navigation-routs a .route-tag-header2, .new-mobile-header-bottom a .new-tag { color: #e3001b !important; }
.main-navigation .main-navigation-user, .main-navigation .main-navigation-user *:not(.main-navigation-user-stats-absolute *):not(button) { color: #111; }
/* logo on the yellow bars: the navy/red variant (the white one is for dark cards: login modal, auth pages) */
.logo-wrapper-m, .logo-wrapper-mob { background-image: url('/tafbet-brand/logo-nav.png?v=5') !important; }
/* login / register / deposit buttons → red with white text (desktop + phone) */
html[data-theme=light] .main-navigation-authentication-create-account-button, html[data-theme=light] .register-span,
html[data-theme=light] .login-span, html[data-theme=light] .main-navigation-authentication-login a, html[data-theme=light] .payment-button,
.main-navigation-authentication-create-account-button, .register-span, .login-span,
.main-navigation-authentication-login a, .payment-button, .tk-nav-guest-btn, .tk-nav-mobile-menu-dw a {
  background: #e3001b !important; color: #fff !important; border-color: #e3001b !important;
}
html[data-theme=light] .main-navigation-user-button, .main-navigation-user-button { background: #e3001b !important; color: #fff !important; }
/* avatar disc: black with yellow initial (reads on the yellow bar) */
.main-navigation-user-icons-avatar > div { background: #111 !important; color: #ffd400 !important; }
/* round icon buttons in the logged-in area sit on the yellow bar → dark discs */
.main-navigation-user-icons-icon-bet-history, .main-navigation-user-icons-icon-bonus, .race-widget-buttons > div { background: #111 !important; color: #ffd400 !important; }
/* phone: header yellow, route strip black links + red active, footer stays black with white icons */
body .new-mobile-header { background: #ffd400 !important; }
.new-mobile-header-bottom { border-color: #e5bd00 !important; }
.new-mobile-header-bottom a { color: #111 !important; }
.new-mobile-header-bottom a.active { color: #e3001b !important; }
.balance-view-mobile, .balance-view-mobile * { color: #111 !important; }
body .new-mobile-footer, html[data-theme=light] body .new-mobile-footer { background: #141414 !important; }
/* SPA's own slide-out account panel (hand-built, hard-coded green) */
.tk-nav-mobile-menu { background: #1e1e1e !important; }

/* ---------- sportsbook SPA (LogiqSport widget, light theme) ---------- */
html[data-theme=light], html[data-theme=light]:root {
  --accent: #ffd400;          /* section headers, active tabs */
  --accent-dif: #e5bd00;      /* darker accent */
  --accent1: #1a1a1a;         /* dark panels: mobile icon strip, selected league chip/tab, betslip tabs */
  --accent1-col: #ffffff;     /* text on those dark panels */
  --accent-col: #111111;      /* text on the yellow headers (Top Matches, Betslip, Sports Menu…) */
  --accent2: #1a1a1a;         /* In-Play header bar */
  --accent-bg: #ffd400;
  --accent-odd: #071729;
  --accent-bg-border-1: #f0c800;
  --accent-bg-border-2: #d9b400;
}
/* selected odds → yellow with black text (operator: "make yellow like color instead black") */
html[data-theme=light] .odd.active, html[data-theme=light] .prematch .odd.active, html[data-theme=light] .livePage .odd.active,
html[data-theme=light] body .marketTab--odds .odd.active { background: #ffd400 !important; color: #111 !important; }
html[data-theme=light] .odd.active .type, html[data-theme=light] .odd.active .value, html[data-theme=light] .odd.active > .value,
html[data-theme=light] .livePage .odd.active .type, html[data-theme=light] .marketTab--odds .odd.active * { color: #111 !important; }
/* betslip bet-type tabs and the Place bet / Accept odds buttons sit on the dark --accent1, but the widget colours
   their text with --accent-col (dark here) → white */
html[data-theme=light] .betslip-footer-button-container > .active-items-wrapper > div.active,
html[data-theme=light] .betslip-footer-button-container > .active-items-wrapper > button.active,
html[data-theme=light] .betslip-footer-button-container > .active-items-wrapper > button,
html[data-theme=light] .betslip-footer-actions-buttons-save-bet, html[data-theme=light] .betslip-footer-actions-buttons-accept-odds { color: #fff !important; }
html[data-theme=light] .betslip-header > div .betslipt-box-circle { color: #111 !important; }
/* date rows read dark (their colour is --accent, unreadable in yellow); In-Play bar white text */
html[data-theme=light] .prematch-widget-date-row, html[data-theme=light] .prematch-widget-date-row * { color: #333 !important; }
html[data-theme=light] .in-play-header, html[data-theme=light] .in-play-header h3, html[data-theme=light] .in-play-header * { color: #fff !important; }

/* ---------- standalone sport shell page (iframe wrapper) ---------- */
html.tk-shell, html.tk-shell body { background: #141414 !important; }

/* ---------- native /login /register /forgot-password pages (chatkiFrontend AUTH_PAGE_STYLE) ---------- */
body.tk-auth-page { background: #0d0d0d !important; }
body.tk-auth-page .card { background: #1e1e1e !important; }
body.tk-auth-page button[type=submit], body.tk-auth-page .support-btn { background: #e3001b !important; color: #fff !important; }
body.tk-auth-page button[type=submit]:hover, body.tk-auth-page .support-btn:hover { background: #c40017 !important; }
body.tk-auth-page a, body.tk-auth-page .footer-links a { color: #ffd400 !important; }
body.tk-auth-page input:focus { outline-color: #ffd400 !important; }