/*
 * betsport216 - gosport365 skin on the arena216 build: navy #19447a, gold #fabf38, white.
 * Structural light-theme fixes carried over from tnbet24 (theme-gold.css); brand
 * tokens themselves are set to gosport365 values inside the chunk stylesheets.
 */

/* Rules that hardcoded a colour instead of reading a token. */
.accountMenuItem:hover { background-color: #19447a; }
.customDropdown ul.localeOptions li:hover { background-color: #19447a; }
.bonusOptionsList > div.bonusOptionSelected { background-color: #19447a !important; }
.promoCardContentSubtitle { color: #19447a !important; }
.promotionDetailSubtitle { color: #19447a; }

/*
 * A pressed state the original had no token for. Buttons went from base
 * straight back to base on :active, which reads as an unresponsive tap on
 * a phone - the one place this theme adds to the system rather than
 * rotating it.
 */
.fillButton:active,
.primaryBtn:active,
button.primaryBtn:active { background-color: #051931; }

/*
 * The light theme, which the build supports but never had a way to reach.
 *
 * <main> already paints itself white from bg-contentBgLight. What kept the
 * page dark was layoutMainContainer, which lays a dark chevron photograph
 * over the whole column regardless of theme. Drop it on the light side and
 * the shipped light palette shows through.
 */
/*
 * Tokens the build only ever wrote for the dark theme. They sit on bare
 * :root as white, and the dark block re-states them; nothing re-states them
 * for light, so on a white page they were white on white. These are the two
 * that actually showed: the widget headings and the bottom bar.
 */
html[data-theme="light"] {
    --widget-title-color: #1b3c6b;
    --bottom-menu-bg-color: #fff;
    --bottom-menu-item-color: #5a5a63;
    --bottom-menu-item-active-color: #1b3c6b;
    --bottom-menu-item-active-bg-color: var(--primary-color);

    /* Label on a gold fill: dark, because white on #19447a is 2.4:1 (needs 4.5:1). */
    --primary-font-color: #1b3c6b;

    /* The build does define a light hamburger colour - it is just white as
       well, which was fine when no light page existed. */
    --hamburgerColorLight: #5a5a63;

    /* The casino search pill was styled for a dark surface only. */
    --casino-menu-search-button-bg-color: #f4f4f6;
    --casino-menu-search-button-border-color: #e0e0e6;
    --casino-menu-search-button-font-color: #6b6b75;
}

/* Belt and braces for the burger: the token above should carry it, but the
   three bars are also reachable directly and this costs one rule. */
html[data-theme="light"] .mobileNavBurgerbar { background-color: #5a5a63; }

/* The search label is a utility class, not a token, so it needs saying. */
html[data-theme="light"] .gamesSearchBtn,
html[data-theme="light"] .gamesSearchBtn span { color: #5a5a63; }

html[data-theme="light"] .layoutMainContainer {
    /* The build's own rule is !important, so this one has to be too. */
    background-image: none !important;
    background-color: transparent;
}

/*
 * The mobile menu, and everything that opens from it.
 *
 * The build only ever coloured the sidebar for dark: its background is an
 * alias of the header's, and the light side never got a value, so on a
 * white page the panel vanished and the page showed through it while its
 * text went black. These give the panel a white surface, dark text, and
 * the gold active states the rest of the page uses.
 */
html[data-theme="light"] {
    --sidebar-bg-color: #fff;
    --sidebar-header-bg-color: #fff;
    --sidebar-footer-bg-color: #fff;
    --sidebar-account-bg-color: #f4f4f6;
    --sidebar-account-header-bg-color: #f4f4f6;
    --sidebar-separator-color: #e4e4ea;
    --sidebar-menu-item-color: #1b3c6b;
    --sidebar-menu-item-hover-color: #1b3c6b;
    --sidebar-menu-item-focus-color: #1b3c6b;
    --sidebar-menu-item-active-color: #1b3c6b; /* open/active drawer item sits on a light panel */
    --sidebar-menu-item-pressed-color: #1b3c6b;
    --sidebar-menu-item-pressed-bg-color: #f4f4f6;
    --sidebar-menu-subitem-ul-bg-color: #f4f4f6;
    --sidebar-menu-subitem-color: #3a3a42;
    --sidebar-menu-subitem-hover-color: #1b3c6b;
    --sidebar-menu-subitem-active-color: #1b3c6b;
    --sidebar-menu-subitem-pressed-color: #1b3c6b;
    --sidebar-account-menu-item-color: #1b3c6b;
    --sidebar-account-menu-item-active-color: #1b3c6b;
    --sidebar-username-color: #1b3c6b;
    --sidebar-user-id-color: #19447a;
    --sidebar-balance-value-color: #1b3c6b;
    --langSwitcherBgDark: #f4f4f6;
}

/* Outline buttons (Login, the close cross) drew a white border for a dark page. */
html[data-theme="light"] .outlineBtn {
    border-color: #1b3c6b;
    color: #1b3c6b;
}

/* The close cross itself is a white SVG file. */
html[data-theme="light"] .modalCloseBtn img {
    filter: brightness(0) invert(0.12);
}

/* The language switcher is pinned to a dark surface with !important. */
html[data-theme="light"] .langSwitcherBtn,
html[data-theme="light"] .langSwitcherBtn:active {
    background-color: #f4f4f6 !important;
    color: #1b3c6b !important;
    border-color: #e0e0e6 !important;
}
html[data-theme="light"] .customDropdown ul.localeOptions {
    background-color: #fff;
    color: #1b3c6b;
    border: 1px solid #e0e0e6;
}
html[data-theme="light"] .customDropdown ul.localeOptions li {
    color: #1b3c6b;
}

/* An expanded group wraps itself in a near-black card; on the light side
   it is a pale one, and the list inside sits directly on it. */
html[data-theme="light"] {
    --sidebar-menu-item-outer-bg-color: transparent;
    --sidebar-menu-subitem-ul-bg-color: transparent;
}
html[data-theme="light"] .sidebar .sidebarMenuItemOuter.sidebarParentOpen {
    background-color: #f4f4f6 !important;
}

/*
 * Forms. Every field in the build is painted with the dark input surface
 * whatever the theme, and every label with the dark theme's text colour.
 * Said once for all fields rather than per screen: a white page has no
 * dark fields anywhere on it.
 */
html[data-theme="light"] input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background-color: #fff !important;
    color: #1b3c6b !important;
    border-color: #8a8a94 !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #6b6b75 !important;
}
html[data-theme="light"] label,
html[data-theme="light"] .checkboxLabel,
html[data-theme="light"] .modalLoginForgotPass {
    color: #1b3c6b !important;
}

/* The icons drawn inside fields. The build ships a slate variant of each
   for a light field and only ever used the white one; the search icon has
   no such variant, so a grey copy lives under images/brand. */
html[data-theme="light"] .passwordField { background-image: url(/_next/static/media/lock.0pn4r7w7tn32m.svg) !important; }
html[data-theme="light"] .emailField { background-image: url(/_next/static/media/mail.1vvb-awlxdszn.svg) !important; }
html[data-theme="light"] .modalLoginForgotPass { background-image: url(/_next/static/media/forgotPass.05gb_jrnphm3o.svg) !important; }
html[data-theme="light"] .globalSearchField { background-image: url(/images/brand/search-dark.svg) !important; }

/* An outline button that was given the dark field surface as its fill. */
html[data-theme="light"] .outlineBtn.minWidthFilterItem {
    background-color: #fff !important;
}

/* Category counts: dark digits read better on the amber pill. */
html[data-theme="light"] .casinoCountBadge {
    color: #1b3c6b;
}

/* Our own one-click register block on the register page. Its result
   dialog is left dark: that is a modal over a dimmed page. */
html[data-theme="light"] .qr1c-panel { background: #f4f4f6 !important; border-color: #e0e0e6 !important; }
html[data-theme="light"] .qr1c-title { color: #1b3c6b !important; }
html[data-theme="light"] .qr1c-sub { color: #5a5a63 !important; }
html[data-theme="light"] .qr1c-err { background: #fdecec !important; color: #9b1c1c !important; }

/* Providers page: the sort control's own spans and the "Showing x of y"
   counter are pinned white by their components. */
html[data-theme="light"] .sortFilter .outlineBtn span,
html[data-theme="light"] .sortFilter .outlineBtn {
    color: #1b3c6b !important;
}
html[data-theme="light"] .paginationCounter {
    color: #5a5a63 !important;
}

/* The phone field's country picker (two libraries' class names, whichever
   this build uses) still wore the dark field surface. */
html[data-theme="light"] .flag-dropdown,
html[data-theme="light"] .selected-flag,
html[data-theme="light"] .iti__selected-flag,
html[data-theme="light"] .iti__flag-container {
    background-color: #f4f4f6 !important;
    border-color: #8a8a94 !important;
}
html[data-theme="light"] .country-list,
html[data-theme="light"] .iti__country-list {
    background-color: #fff !important;
    color: #1b3c6b !important;
    border-color: #8a8a94 !important;
}
html[data-theme="light"] .country-list .country:hover,
html[data-theme="light"] .country-list .country.highlight,
html[data-theme="light"] .iti__country.iti__highlight {
    background-color: #f4f4f6 !important;
}

/*
 * Casino page. The filter dropdowns share the language switcher's list,
 * whose "light" background token is the dark grey; provider names under
 * the tiles and the filter's focus ring use the build's lavender tint; and
 * the category heading icon is a white SVG straight from the CDN.
 */
html[data-theme="light"] {
    --dropdownListBgLight: #fff;
    --dropdownListBgDark: #fff;
    --langSwitcherListBgLight: #fff;
}
html[data-theme="light"] ul.localeOptions {
    background-color: #fff !important;
    color: #1b3c6b !important;
    border: 1px solid #e0e0e6;
}
html[data-theme="light"] ul.localeOptions li {
    color: #1b3c6b !important;
}
/* The build's hover is purple on white; ours is white on gold, said with
   enough weight to beat both it and the list rules below. */
html[data-theme="light"] .customDropdown ul.localeOptions li:hover,
html[data-theme="light"] ul.localeOptions li:hover {
    background-color: #19447a !important;
    color: #1b3c6b !important;
}
/* The provider and sort filters pin their list to the dark grey with a
   four-part selector and !important; this one is heavier still. */
html[data-theme="light"] .providerFilter.customDropdown ul.localeOptions,
html[data-theme="light"] .sortFilter.customDropdown ul.localeOptions {
    background: #fff !important;
    border: 1px solid #e0e0e6 !important;
}
/* The casino grids pin this with a three-class selector and !important;
   these are heavier. 12px: the build drops it to 10px on mobile. */
html[data-theme="light"] .providerName,
html[data-theme="light"] .casinoGamesRowContainer .swiper-wrapper .providerName,
html[data-theme="light"] .casinoGamesContainer .providerName,
html[data-theme="light"] .providerContainer .providerName,
html[data-theme="light"] .searchProviderName,
html[data-theme="light"] .intermediateScreenContainer .providerName {
    color: #19447a !important;
    font-size: 12px !important;
}
html[data-theme="light"] .outlineBtn.border-secondary,
html[data-theme="light"] .outlineBtn.border-secondary:focus,
html[data-theme="light"] .outlineBtn.border-secondary:focus-visible,
html[data-theme="light"] .outlineBtn.border-secondary:active {
    border-color: #1b3c6b !important;
}
html[data-theme="light"] img[src*="/categories/"] {
    filter: brightness(0) invert(0.35);
}

/* The provider filter's label ("All") is white inside its button, and the
   little arrow on both filters is a white image. */
html[data-theme="light"] .providerFilter .outlineBtn,
html[data-theme="light"] .providerFilter .outlineBtn * {
    color: #1b3c6b !important;
}
html[data-theme="light"] .dropdownArrow {
    filter: brightness(0) invert(0.35);
}

/*
 * Logged-in account pages. Their wrappers are pinned to the dark content
 * background with !important, the header's own background token exists
 * only for dark (so the sticky header went transparent over them), the
 * wallet icons are white images, and the account menu's labels read the
 * "white" alias.
 */
html[data-theme="light"] {
    --header-bgColor: #fff;
}
html[data-theme="light"] .profilePageContainer,
html[data-theme="light"] .depositPageContainer,
html[data-theme="light"] .withdrawPageContainer,
html[data-theme="light"] .casinoBetsPageContainer,
html[data-theme="light"] .sportsbookContainer,
html[data-theme="light"] .paymentHistoryPageContainer,
html[data-theme="light"] .verifyAccountPageContainer,
html[data-theme="light"] .responsibleGamingPageContainer {
    background-color: #fff !important;
}
html[data-theme="light"] header#mainHeader,
html[data-theme="light"] .headerMobileLoggedIn {
    background-color: #fff;
}
html[data-theme="light"] .balanceItemIcon {
    filter: brightness(0) invert(0.35) !important;
}
html[data-theme="light"] .profileMenuItem span,
html[data-theme="light"] .profileMenuItem {
    color: #1b3c6b !important;
}
html[data-theme="light"] .profileMenuItem.selected,
html[data-theme="light"] .profileMenuItem:hover,
html[data-theme="light"] .accountMenuItem:hover {
    background-color: #19447a !important;
}
html[data-theme="light"] .profileMenuItem.selected span,
html[data-theme="light"] .profileMenuItem:hover span,
html[data-theme="light"] .profileMenuItem.selected,
html[data-theme="light"] .profileMenuItem:hover {
    color: #1b3c6b !important;
}
html[data-theme="light"] .profileMenuItem.selected .balanceItemIcon,
html[data-theme="light"] .profileMenuItem:hover .balanceItemIcon {
    filter: none !important;
}
html[data-theme="light"] .profileClearBtn {
    color: #1b3c6b !important;
    border-color: #1b3c6b !important;
}

/* The header's account icon is a white image drawn as a background; the
   date-filter labels on the history pages carry a white span. */
html[data-theme="light"] .headerAccountIconMobile,
html[data-theme="light"] .headerAccountIconDesktop {
    filter: brightness(0) invert(0.35);
}
html[data-theme="light"] label > span,
html[data-theme="light"] label .opacity-50 {
    color: #1b3c6b !important;
}
/* 2026-10-01: the real TNBET24 mark (crown + wordmark, ~2:1) needs more height than the
   36px/30px logo slots meant for a long flat wordmark. */
html body,html[data-theme=light] body,html[data-theme=dark] body,html.dark body{--header-logo-height:56px;--header-logo-mobile-height:44px;--sidebar-logo-mobile-height:44px;--footer-logo-height:64px;--footer-logo-mobile-height:52px}
/* 2026-10-01: sidebarParentOpen text dark - the open group header (e.g. Casino) was white on the light panel */
html[data-theme="light"] .sidebar .sidebarParentOpen,html[data-theme="light"] .sidebar .sidebarParentOpen>*,html[data-theme="light"] .sidebar .sidebarParentOpen a,html[data-theme="light"] .sidebar .sidebarParentOpen span{color:#1b3c6b!important}
html[data-theme="light"] .sidebar .sidebarParentOpen svg,html[data-theme="light"] .sidebar .sidebarParentOpen svg path{fill:#1b3c6b!important;stroke:#1b3c6b!important}
html[data-theme="light"] .sidebar .sidebarMenuItem.activeClass,html[data-theme="light"] .sidebar .sidebarMenuItem.activeClass span{color:#1b3c6b!important}

/* 2026-10-01 accessibility review. */
html[data-theme="light"] { color-scheme: light; }
html.dark, html[data-theme="dark"] { color-scheme: dark; }
/* The build resets :focus-visible to outline:none site-wide. */
html[data-theme="light"] :focus-visible { outline: 2px solid #1b3c6b !important; outline-offset: 2px; }
html.dark :focus-visible, html[data-theme="dark"] :focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* iOS zooms into any field under 16px; the old maximum-scale=1 only hid that. */
@media (max-width: 767px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}
#mobileFooterMenu { padding-bottom: env(safe-area-inset-bottom); }
.skipLink { position: absolute; left: 8px; top: -80px; z-index: 2147483001; padding: 10px 14px; border-radius: 8px; background: #1b3c6b; color: #fff; font-weight: 700; text-decoration: none; }
.skipLink:focus { top: 8px; outline: 2px solid #19447a !important; outline-offset: 2px; }
.srOnly { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Slider dots are 12x4px; give them a 24px+ hit area without changing the look. */
button.a11yDot { position: relative; }
button.a11yDot::before { content: ""; position: absolute; left: -6px; right: -6px; top: -12px; bottom: -12px; }
/* Social networks with no handle configured render a link to /null. */
footer a[href$="/null"], footer a[href$="@null"] { display: none !important; }
/* Gold text tokens the build reads for the winners ticker, the footer payments
   title and the active footer link: #19447a on white is 2.4:1. */
html[data-theme="light"], html[data-theme="light"] body {
    --topWinners-amount-color: #19447a;
    --footer-payments-title-color: #19447a;
    --footer-footer-menu-item-active-color: #19447a;
}
/* The panel subtitle dims itself to 78%; on the light panel that is 3.8:1. */
html[data-theme="light"] .qr1c-sub { opacity: 1 !important; }
/* 2026-10-01: casino category strip and providers page on the light theme.
   The strip (.casinoSliderMenuWrapper) is a black pill with white labels and
   the grey-recoloured icons vanished on it; on the light page the bar is pale
   grey like the sidebar, labels dark, active/hover gold. Provider logos are
   white artwork, so their tile stays dark (same as providerItemHomeInner). */
html[data-theme="light"] .casinoSliderMenuWrapper {
    background-color: #f4f4f6;
    border: 1px solid #e4e4ea;
}
html[data-theme="light"], html[data-theme="light"] body {
    --casino-menu-item-font-color: #1b3c6b;
    --casino-menu-item-hover-font-color: #19447a;
    --casino-menu-item-active-font-color: #19447a;
    --casino-menu-item-mobile-font-color: #1b3c6b;
}
html[data-theme="light"] .casinoSliderMenuWrapper .casinoMenuItem > a,
html[data-theme="light"] .casinoMenuMobile .casinoMenuItemMobile > a {
    color: #1b3c6b;
}
html[data-theme="light"] .casinoSliderMenuWrapper .casinoMenuItem:hover > a,
html[data-theme="light"] .casinoSliderMenuWrapper .casinoMenuItem.activeMenu > a,
html[data-theme="light"] .casinoSliderMenuWrapper .casinoMenuItem.activeCasinoMenuItem > a,
html[data-theme="light"] .casinoMenuMobile .casinoMenuItemMobile.activeMenu > a,
html[data-theme="light"] .casinoMenuMobile .casinoMenuItemMobile.activeCasinoMenuItem > a {
    color: #19447a;
}
html[data-theme="light"] .providerContainer .casinoProviderItem {
    background-color: #1d242b;
    padding: 14px;
    min-height: 72px;
}
html[data-theme="light"] .providerContainer .casinoProviderItem:hover {
    background-color: #2a333c;
}
/* 2026-10-01: the Back arrow on the category pages is a white SVG (back.*.svg) inside an outline button. */
html[data-theme="light"] .backBtn img[src*="/back."], html[data-theme="light"] .iconBtn img[src*="/back."] { filter: brightness(0) invert(0.12); }
/* 2026-10-01: the footer 18+ badge is forced white by a vendor filter chain. */
html[data-theme="light"] #eighteenPlusIcon { filter: brightness(0) invert(0.12) !important; }
/* 2026-10-01: deposit/withdraw method cards and the mobile balance pill.
   The build pins `.depositItem > div, .withdrawItem > div` to #222225 and the
   info table reads --secondaryModalBgLight, which is #000; both with
   !important, so on the light page the card was black with black text. */
html[data-theme="light"] .depositItem > div,
html[data-theme="light"] .withdrawItem > div,
html[data-theme="light"] .depositItem .react-slidedown,
html[data-theme="light"] .withdrawItem .react-slidedown {
    background-color: #f4f4f6 !important;
    color: #1b3c6b;
}
html[data-theme="light"], html[data-theme="light"] body {
    --secondaryModalBgLight: #fff;
}
html[data-theme="light"] .profileInfoTable {
    background-color: #fff !important;
    color: #1b3c6b;
}
html[data-theme="light"] .withdrawItemRow,
html[data-theme="light"] .withdrawItemRow > div,
html[data-theme="light"] .depositItem .border-contentBgLight,
html[data-theme="light"] .withdrawItem .border-contentBgLight {
    border-color: #e4e4ea !important;
}
html[data-theme="light"] .depositItem .depositItemTitle,
html[data-theme="light"] .withdrawItem .withdrawItemTitle {
    color: #1b3c6b !important;
}
html[data-theme="light"] .withdrawItem .border-gray,
html[data-theme="light"] .depositItem .border-gray {
    border-color: #d5d5dc !important;
}
/* Header balance / account dropdown buttons are pinned to #36363b. */
html[data-theme="light"] .headerBalanceBtnMobile,
html[data-theme="light"] .headerDropdownBtn {
    background-color: #f4f4f6 !important;
    color: #1b3c6b !important;
    border: 1px solid #e0e0e6 !important;
}
/* The table rows inside the method card are pinned to #18181b too. */
html[data-theme="light"] .withdrawItemRow, html[data-theme="light"] .depositItemRow { background-color: #fff !important; color: #1b3c6b !important; }
/* 2026-10-01: payment-history and casino-bets cards (.transactionItem /
   .casinoBetItem) are pinned to #222225 with #18181b children, a white
   chevron and a translucent-white separator. Light values for the light page. */
html[data-theme="light"] .transactionItem,
html[data-theme="light"] .casinoBetItem {
    background-color: #f4f4f6 !important;
    color: #1b3c6b;
}
html[data-theme="light"] .transactionItem > div,
html[data-theme="light"] .casinoBetItem > div {
    background-color: transparent !important;
}
html[data-theme="light"] .transactionItem .paymentItemRow,
html[data-theme="light"] .casinoBetItem .casinoBetItemRow {
    background-color: #fff !important;
    color: #1b3c6b !important;
}
html[data-theme="light"] .transactionItem .tableSeparator,
html[data-theme="light"] .casinoBetItem .tableSeparator {
    border-color: #d5d5dc !important;
}
html[data-theme="light"] .transactionItemArrow path,
html[data-theme="light"] .casinoBetItemArrow path,
html[data-theme="light"] .gatewayExpandArrow path,
html[data-theme="light"] .limitsDropdownArrow path {
    fill: #1b3c6b !important;
}
/* 2026-10-01 sweep leftovers: the react-select controls (period selector on
   responsible gaming, crypto selects), the document-upload box and the
   all-amount button share one vendor rule pinning them to --inputBgDark with
   white text; the Pending badge is white on amber. */
html[data-theme="light"] .cryptoSelect__control,
html[data-theme="light"] .depositContainer .cryptoSelect__control,
html[data-theme="light"] .withdrawContainer .cryptoSelect__control,
html[data-theme="light"] .periodSelectContainer .cryptoSelect__control,
html[data-theme="light"] .depositContainer .allAmountBtn,
html[data-theme="light"] .input_container,
html[data-theme="light"] .registerAgentSelect,
html[data-theme="light"] form input[type=file],
html[data-theme="light"] .verifyUpload {
    background-color: #fff !important;
    color: #1b3c6b !important;
    border-color: #8a8a94 !important;
}
html[data-theme="light"] .cryptoSelect__single-value,
html[data-theme="light"] .cryptoSelect__single-value span,
html[data-theme="light"] form .cryptoSelect__control .cryptoSelect__single-value,
html[data-theme="light"] .cryptoSelect__input-container,
html[data-theme="light"] .cryptoSelect__indicator svg {
    color: #1b3c6b !important;
    fill: #1b3c6b;
}
html[data-theme="light"] .cryptoSelect__placeholder { color: #6b6b75 !important; }
html[data-theme="light"] .cryptoSelect__menu,
html[data-theme="light"] .cryptoSelect__menu-list {
    background-color: #fff !important;
    color: #1b3c6b !important;
    border: 1px solid #e0e0e6;
}
html[data-theme="light"] .cryptoSelect__option { color: #1b3c6b !important; background-color: #fff !important; }
html[data-theme="light"] .cryptoSelect__option--is-focused,
html[data-theme="light"] .cryptoSelect__option--is-selected { background-color: #f4f4f6 !important; }
html[data-theme="light"] .bg-pendingColor { color: #1b3c6b !important; }
/* 2026-10-01: crypto picker on the withdraw form. The option label sits in
   `.cryptoOptionItem.text-black`, and --black is white in this bundle; the
   focused row is pinned to #444 by a three-class vendor rule. */
html[data-theme="light"] .cryptoSelectContainer .cryptoSelect__menu,
html[data-theme="light"] .cryptoSelectContainer .cryptoSelect__menu .cryptoSelect__option {
    background-color: #fff !important;
}
html[data-theme="light"] .cryptoSelectContainer .cryptoSelect__menu .cryptoSelect__option:hover,
html[data-theme="light"] .cryptoSelectContainer .cryptoSelect__menu .cryptoSelect__option--is-focused,
html[data-theme="light"] .cryptoSelectContainer .cryptoSelect__menu .cryptoSelect__option--is-selected {
    background-color: #e9e9ee !important;
}
html[data-theme="light"] .cryptoSelect__option,
html[data-theme="light"] .cryptoSelect__option *,
html[data-theme="light"] .cryptoOptionItem,
html[data-theme="light"] .cryptoOptionItem *,
html[data-theme="light"] .cryptoSelect__single-value,
html[data-theme="light"] .cryptoSelect__single-value * {
    color: #1b3c6b !important;
}
/* 2026-10-03: the daily-cashback card borrows the bonus page card classes, which are pinned dark. */
html[data-theme="light"] #cbk1c-card { background-color: #f4f4f6 !important; color: #1b3c6b !important; }
html[data-theme="light"] #cbk1c-card .cbk1c-hist { border-top-color: #d5d5dc; }

/* ---- 2026-10-03 betsport216: gosport365 header (layout_2) fine-tuning ---- */
/* The build's own primary button reads --primary-color (gold on gosport) with white text;
   gosport's filled buttons are navy with white text, outline ones navy on white. */
.primaryBtn, button.primaryBtn, a.primaryBtn,
.headerRegisterBtn.primaryBtn, .headerDepositBtn.primaryBtn {
    background-color: #19447a !important; border-color: #19447a !important; color: #fff !important;
}
.primaryBtn:hover, button.primaryBtn:hover, a.primaryBtn:hover { background-color: #0c2749 !important; border-color: #0c2749 !important; }
.outlineBtn, .secondaryBtn { border-color: #19447a !important; color: #19447a !important; background-color: transparent; }
.outlineBtn:hover, .secondaryBtn:hover { background-color: #19447a !important; color: #fff !important; }
.outlineBtn:hover img, .secondaryBtn:hover img { filter: brightness(0) invert(1); }

/* Wordmark is 9:1; keep it to a sane width in the header and footer. */
:root, body { --header-logo-height: 2.75rem; --header-logo-mobile-height: 2rem; --footer-logo-height: 2.5rem; --footer-logo-mobile-height: 2rem; }
header img[src*="/images/brand/"] { width: auto; max-width: 70vw; object-fit: contain; }

/* layout_2 on phones: the logo collapsed to 0px and the six-item game menu wrapped
   onto two lines above the buttons (gosport365 itself shows the same). The bottom
   menu and the burger already carry navigation on phones, so hide the desktop menu
   and lay the row out as logo | session buttons. */
@media (max-width: 767px) {
    header .headerGamesMenu { display: none !important; }
    header > div > div.flex.items-center { justify-content: space-between; }
    header a.flex.h-headerLogoHeight { flex: 0 1 auto; min-width: 0; max-width: 52vw; }
    header a.flex.h-headerLogoHeight img { width: auto; max-width: 100%; height: 1.5rem; }
    header .desktopSessionSection { flex-wrap: nowrap; }
    header .desktopSessionSection button { white-space: nowrap; padding: .35rem .6rem; font-size: .72rem; min-width: 0; }
    header .desktopSessionSection { gap: .35rem; }
}

/* Category count pills were navy digits on a navy pill. */
.casinoCountBadge, [class*="casinoCountBadge"], span[class*="countBadge"] { color: #fff !important; }