/* =========================================================
   KARTOOSH-STYLE THEME  (dark slate / magenta / gold / green)
   Loaded LAST so it overrides style.css + modern.css + page css.
   Palette from kartoosh.bet (BetConstruct v4.19.1 skinning.js),
   verified against the live site at 390px and 1440px:
      b  = --b  #18232D   body base (dark slate) — also header/menu/tabs
      neutral (text on b) = white (b is dark -> font-light)
     magenta     #A71F67   hero / primary CTA
     brand green #16C72E   odd-up / positive
     secondary   #06A9AA   teal accent
     gold        #F8C524   jackpot  (#AA7F00 deep fallback)
     hover on b = lighten b by 10%  (~#2E3B46)
   Dark navy surfaces everywhere, white text, Roboto Condensed.
   Keeps all markup & functionality — only the look changes.
   ========================================================= */

/* ---- Brand tokens ---- */
:root {
    --kt-navy:      #18232d;
    --kt-navy-deep: #0f1720;
    --kt-navy-2:    #24303a;
    --kt-magenta:   #a71f67;
    --kt-magenta-2: #7e1549;
    --kt-brand:     #16c72e;
    --kt-brand-2:   #109a20;
    --kt-teal:      #06a9aa;
    --kt-gold:      #f8c524;
    --kt-gold-2:    #aa7f00;
}

/* ---- Dark slate surface + light text tokens ----
   style.css + modern.css define these; this re-declares last
   to match kartoosh (measured body/--b = #18232d, hover ~lighten 10%). */
:root {
    --bg-primary:       #18232d;
    --bg-secondary:     #0f1720;
    --bg-elevated:      #24303a;
    --bg-card:          #24303a;
    --bg-card-hover:    #2e3b46;
    --border-subtle:    rgba(255, 255, 255, 0.10);
    --border-sidebar:   rgba(255, 255, 255, 0.08);
    --text-primary:     #ffffff;
    --text-secondary:   #c7d0e2;
    --text-muted:       #8b97b3;

    /* brand accents (magenta primary, green wins, gold highlights) */
    --purple:           var(--kt-magenta);
    --purple-hover:     var(--kt-magenta-2);
    --purple-glow:      rgba(167, 31, 103, 0.35);
    --green-win:        var(--kt-brand);
    --accent-lime:      var(--kt-brand);
    --gold-start:       var(--kt-gold);
    --gold-mid:         #e3af0f;
    --gold-end:         var(--kt-gold-2);
}

/* ---- Typography: Roboto Condensed headings/nav ---- */
body, .app-content, .topbar, .tb-product-switch, .mobile-bottom-nav,
.site-footer, .sidebar, .navigation {
    font-family: 'Roboto Condensed', 'Roboto', -apple-system,
                 BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
h1, h2, h3, h4, h5, h6,
.section-title, .list-section__title,
.navigation-group__label, .brand-name {
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    letter-spacing: 0.01em;
}

/* =========================================================
   APP / CONTENT SURFACES  (navy page, navy cards)
   ========================================================= */
body { background: var(--bg-primary); }

.app-content {
    background: var(--bg-primary);
}

/* =========================================================
   TOP BAR  ->  kartoosh navy bar, white text, magenta CTA
   ========================================================= */
.topbar {
    background: var(--kt-navy) !important;
    border-bottom: none;
    color: #ffffff;
    backdrop-filter: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.topbar .logo-text { color: #ffffff; }
.topbar .logo-text__num { color: var(--kt-gold); }

/* product switch (Casino / Sports) */
.tb-product-switch { background: rgba(255, 255, 255, 0.10); }
.tb-product-switch__item { background: transparent; color: #c3cbd9; }
.tb-product-switch__item:hover { background: rgba(248, 197, 36, 0.15); color: var(--kt-gold); }
.tb-product-switch__item.is-active,
.tb-product-switch__item.is-active--sports {
    background: linear-gradient(135deg, var(--kt-magenta), var(--kt-magenta-2));
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(167, 31, 103, 0.45);
}

/* guest login / register */
.topbar .btn-login { color: #ffffff; border: 1px solid rgba(248, 197, 36, 0.7); background: rgba(248,197,36,0.06); }
.topbar .btn-login:hover { background: rgba(248,197,36,0.16); }
.topbar .btn-register {
    background: linear-gradient(135deg, var(--kt-magenta), var(--kt-magenta-2));
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(167, 31, 103, 0.45);
}
.topbar .btn-register:hover { background: linear-gradient(135deg, #c0367c, var(--kt-magenta)); }

/* wallet pill (navy) */
.tb-wallet__pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
}
.tb-wallet__coin { color: var(--kt-gold); }
.tb-wallet__option.is-selected { color: var(--kt-gold); }
.tb-wallet__option-amount { color: var(--kt-magenta); }
.tb-wallet__menu { background: var(--kt-navy); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.tb-wallet__option { color: #ffffff; }
.tb-wallet__option:hover { background: rgba(255, 255, 255, 0.08); }

/* account block (navy: gold username, white TND balance) */
.tb-account {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
    text-decoration: none;
    margin-right: 4px;
}
.tb-account__user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 14px;
    color: var(--kt-gold);
}
.tb-account__user svg { width: 18px; height: 18px; flex-shrink: 0; }
.tb-account__balance {
    font-size: 12px;
    font-weight: 600;
    color: #e6ecf7;
}
.tb-account:hover .tb-account__user { color: #ffffff; }

/* deposit CTA (magenta, kartoosh hero) */
.tb-deposit-btn {
    background: linear-gradient(135deg, var(--kt-magenta), var(--kt-magenta-2));
    color: #ffffff;
    box-shadow: 0 3px 12px rgba(167, 31, 103, 0.45);
}
.tb-deposit-btn:hover { background: linear-gradient(135deg, #c0367c, var(--kt-magenta)); }

/* icon buttons (navy) */
.tb-icon-btn { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.tb-icon-btn:hover { border-color: var(--kt-gold); color: var(--kt-gold); }

/* avatar + user menu (navy) */
.tb-user__avatar { background: var(--kt-navy-2); border: 1px solid rgba(255,255,255,0.18); }
.tb-user__menu { background: var(--kt-navy); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.tb-user__item { color: #e6ecf7; }
.tb-user__item:hover { background: rgba(255,255,255,0.08); }
.tb-user__item.is-active { color: var(--kt-gold); }
.tb-user__item.is-active .tb-user__item-dot { background: var(--kt-gold); }
.tb-user__item--danger { color: #ff6b81; }

/* =========================================================
   SIDE BAR  ->  navy nav rail with gold active state
   ========================================================= */
.sidebar {
    background: var(--kt-navy);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-header__title { color: var(--kt-gold); }
.sidebar-toggle { color: #c3cbd9; }
.sidebar-toggle:hover { color: var(--kt-gold); }
.navigation-group__label { color: #c3cbd9; }
.navigation-group__label:hover,
.navigation-group__label[aria-expanded="true"] { color: #ffffff; }
.navigation-link { color: #c3cbd9; }
.navigation-link:hover { background: rgba(248, 197, 36, 0.08); color: #ffffff; }
.navigation-link.active { background: rgba(167, 31, 103, 0.35); color: #ffffff; font-weight: 700; }
.navigation-link.active .navigation-link__icon {
    background: linear-gradient(135deg, var(--kt-magenta), var(--kt-magenta-2));
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(167, 31, 103, 0.45);
}

/* =========================================================
   MOBILE BOTTOM NAV  ->  navy bar + gold active
   ========================================================= */
.mobile-bottom-nav {
    background: var(--kt-navy) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.mobile-bottom-nav__item { color: #c3cbd9; }
.mobile-bottom-nav__item .mobile-bottom-nav__label { color: #c3cbd9; }
.mobile-bottom-nav__item .mobile-bottom-nav__icon { color: #c3cbd9; }
.mobile-bottom-nav__item:hover { background: rgba(255, 255, 255, 0.08); }
.mobile-bottom-nav__item.is-active {
    background: rgba(167, 31, 103, 0.45) !important;
    color: #ffffff;
}
.mobile-bottom-nav__item.is-active .mobile-bottom-nav__label { color: #ffffff; font-weight: 700; }
.mobile-bottom-nav__item.is-active .mobile-bottom-nav__icon { color: var(--kt-gold); }

/* =========================================================
   SITE FOOTER  ->  navy footer, gold headings
   ========================================================= */
.site-footer { background: var(--kt-navy); color: #e6ecf7; }
.site-footer__heading { color: var(--kt-gold); font-weight: 800; }
.site-footer__links a { color: #c3cbd9; }
.site-footer__links a:hover { color: var(--kt-gold); }
.site-footer__social-link { border: 1px solid rgba(255,255,255,0.16); color: #c3cbd9; }
.site-footer__social-link:hover { border-color: var(--kt-gold); color: var(--kt-gold); }
.site-footer__currencies-title { color: #ffffff; }
.site-footer__currencies-sub { color: var(--kt-gold); }
.site-footer__crypto-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #c3cbd9;
}
.site-footer__crypto-pill:hover { border-color: var(--kt-gold); }

/* =========================================================
   CARDS / PANELS  ->  dark navy on navy, subtle light shadow
   ========================================================= */
.win-card, .original-art, .auth-card, .podium-card, .lb-row,
.provider-tab, .btn-view-all, .btn-nav {
    background: var(--bg-card);
    border-color: var(--border-subtle);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.30);
}
.provider-tab.active {
    background: linear-gradient(135deg, rgba(167,31,103,0.22), rgba(7,21,61,0.12));
    border-color: rgba(167, 31, 103, 0.55);
}
.provider-tab__count { background: rgba(167, 31, 103, 0.18); color: #ffcfb0; }

/* =========================================================
   AUTH  ->  dark card + navy inputs
   ========================================================= */
.auth-card { background: var(--bg-card); }
.auth-form input {
    background: var(--kt-navy-deep);
    border: 1px solid var(--border-subtle);
    color: #ffffff;
}
.auth-form input:focus { border-color: var(--kt-magenta); }
.auth-modal__brand-name { color: var(--kt-magenta); }
.auth-modal__mascot { opacity: 0.9; }

/* =========================================================
   HOME page hard-coded surfaces  ->  navy
   ========================================================= */
.big-win-card__thumb { background: var(--bg-card-hover); border: 1px solid var(--border-subtle); }
.live-bets__tabs { background: var(--kt-navy-2); border: 1px solid var(--border-subtle); }
.live-bets__tab { color: var(--text-muted); }
.live-bets__tab:hover { color: #ffffff; }
.live-bets__tab.active { background: var(--kt-magenta); color: #ffffff; box-shadow: 0 2px 8px rgba(167,31,103,0.4); }
.live-bets__row { background: var(--bg-card); border: 1px solid var(--border-subtle); }
.live-bets__row:hover { background: var(--bg-card-hover); }
.live-bets__col { color: var(--text-muted); }
.live-bets__cell { color: var(--text-primary); }
.live-bet-game__name { color: var(--text-primary); }
.live-bet-player { color: var(--text-primary); }
.live-bet-player--hidden { color: var(--text-muted); }
.live-bets__cell--bet .live-bets__val { color: var(--kt-brand); }
.live-bets__val--loss { color: #ff3449; }
.big-wins__title { color: var(--text-primary); }
.big-win-card__user { color: var(--text-muted); }
.list-section__title { color: var(--text-primary); }
.big-win-card__amount, .big-win-card__amount b, .big-win-card__amount strong { color: var(--kt-gold); }

/* =========================================================
   CASINO / GAME LIBRARY  ->  navy surfaces
   ========================================================= */
.games-library__sub { color: var(--text-muted); }
.games-library__empty { background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(255,255,255,0.18); color: var(--text-muted); }
.games-library__count { color: var(--kt-magenta); }

/* game login gate -> dark card */
.game-login-gate__card {
    background: linear-gradient(165deg, #24303a, #0f1720);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.game-login-gate__thumb { background: rgba(255, 255, 255, 0.06); }
.game-login-gate__eyebrow { color: var(--kt-magenta); }
.game-login-gate__title { color: #ffffff; }
.game-login-gate__text { color: var(--text-secondary); }
.game-login-gate__btn--primary { background: linear-gradient(135deg, var(--kt-magenta), var(--kt-magenta-2)); color: #fff; }
.game-login-gate__btn--primary:hover { background: linear-gradient(135deg, #c0367c, var(--kt-magenta)); }

/* game player header controls -> dark toolbar */
.game-player__back, .game-player__round-btn {
    background: rgba(255, 255, 255, 0.06);
    color: #e6ecf7;
}
.game-player__back:hover, .game-player__round-btn:hover { background: rgba(167,31,103,0.20); color: var(--kt-magenta); }
.game-player__id-label, .game-player__loader__text { color: var(--text-muted); }
.game-player__id-value { color: #ffffff; }
.game-player__icon-btn { background: rgba(255, 255, 255, 0.06); color: #c7d0e2; }
.game-player__icon-btn:hover { color: var(--kt-magenta); }

/* game frames stay BLACK (embedded games are dark) */
.game-player__stage { background: #050608; border: 1px solid rgba(255,255,255,0.08); }
.game-frame-wrap, .game-frame, .game-frame-loader { background: #000; }

/* =========================================================
   GAME TILE GRID  ->  dark covers, keep dark art overlay
   ========================================================= */
.game-tile__cover { background: var(--bg-card-hover); border: 1px solid var(--border-subtle); }
.game-tile--original .game-tile__cover { background: rgba(167,31,103,0.10); }
.game-tile__shade,
.game-tile__hover { /* keep dark gradient over game art for title legibility */ }
.game-tile__provider { background: var(--bg-card); border: 1px solid var(--border-subtle); }
.game-tile__provider:hover { background: var(--bg-card-hover); border-color: var(--kt-magenta); }

/* =========================================================
   ACCENTS / BUTTONS  ->  magenta + gold + brand green
   ========================================================= */
.chat-fab { background: linear-gradient(135deg, var(--kt-magenta), var(--kt-magenta-2)); box-shadow: 0 4px 16px rgba(167,31,103,0.45); }
.chat-fab:hover { background: linear-gradient(135deg, #c0367c, var(--kt-magenta)); }
.profile-btn--purple { background: linear-gradient(135deg, var(--kt-magenta), var(--kt-magenta-2)) !important; }
.profile-btn--purple:hover { background: linear-gradient(135deg, #c0367c, var(--kt-magenta)) !important; }
.btn-play { background: var(--kt-brand) !important; color: #05270a !important; }
.btn-cashout { background: linear-gradient(135deg, var(--kt-gold), var(--kt-gold-2)) !important; color: #1f1400 !important; }
.og-action-btn--lime { background: linear-gradient(135deg, var(--kt-gold), var(--kt-gold-2)) !important; color: #1f1400 !important; }
.admin-btn-sm--purple { background: linear-gradient(135deg, var(--kt-magenta), var(--kt-magenta-2)) !important; }
.admin-btn-sm--purple:hover { background: linear-gradient(135deg, #c0367c, var(--kt-magenta)) !important; }

/* =========================================================
   SCROLLBARS  ->  ink on slate
   ========================================================= */
* ::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb { background: rgba(0, 12, 36, 0.35); }
* ::-webkit-scrollbar-track,
*::-webkit-scrollbar-track { background: rgba(0, 12, 36, 0.08); }

/* =========================================================
   GENERIC STATE CLASSES
   ========================================================= */
.green-text, .text-success { color: var(--kt-brand) !important; }
.lime-text { color: var(--kt-gold-2) !important; }

/* =========================================================
   KARTOOSH LAYOUT  (no left sidebar; top-header + navy navbar)
   ========================================================= */

/* main nav: NAVY horizontal product bar (desktop) — kartoosh signature.
   Centered items, active item = magenta pill + hero underline. */
.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kt-navy);
    min-height: 53px;
    flex-shrink: 0;
    position: relative;
    z-index: 150;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.30);
}
.main-nav__scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 12px;
    width: 100%;
}
.main-nav__scroll::-webkit-scrollbar { display: none; }
.main-nav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.6rem;
    white-space: nowrap;
    padding: 0 1.1rem;
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
    box-shadow: inset 0 0 0 0 transparent;
}
.main-nav__link:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.main-nav__link.is-active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--kt-magenta), var(--kt-magenta-2));
    box-shadow: inset 0 -2px 0 0 rgba(248, 197, 36, 0.9), 0 2px 8px rgba(167, 31, 103, 0.4);
}

/* mobile hamburger on the navy topbar */
.mobile-menu-btn {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.mobile-menu-btn.is-open { background: rgba(248, 197, 36, 0.20) !important; }

/* guest clock in topbar-right */
.joker-clock {
    font-size: 13px;
    font-weight: 600;
    color: #c3cbd9;
    white-space: nowrap;
}

/* =========================================================
   KARTOOSH MOBILE DROPDOWN MENU  (navy)
   ========================================================= */
.mobile-dropdown {
    background: var(--kt-navy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.mobile-dropdown__inner {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 8px 0;
}
.mobile-dropdown__link {
    padding: 14px 22px;
    font-size: 16px;
    font-weight: 600;
    color: #e6ecf7;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mobile-dropdown__link:hover { background: rgba(255, 255, 255, 0.06); }
.mobile-dropdown__link.is-active { color: var(--kt-gold); font-weight: 700; }

/* mobile bottom nav stays navy (kartoosh) but the "Menu" item now opens dropdown */
.mobile-bottom-nav__item[data-mobile-nav-action="menu"] { }

/* topbar height a touch taller for kartoosh look */
.topbar { height: 64px; }

/* DESKTOP SUB-HEADER — navy band (Accueil / Terms) */
.sub-header {
    display: flex;
    align-items: center;
    background: var(--kt-navy-2);
    height: 2.4rem;
    padding: 0 .625rem;
}
.sub-header__item {
    display: flex;
    align-items: center;
    position: relative;
    color: #c3cbd9;
    font-size: 14px;
    font-weight: 600;
    padding: 0 .625rem;
    height: 100%;
    line-height: 1;
    transition: background 0.15s;
    text-transform: uppercase;
}
.sub-header__item:not(:last-child)::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    height: 100%;
    width: 1px;
    right: 0;
    background: rgba(255, 255, 255, 0.15);
}
.sub-header__item:hover { background: rgba(167, 31, 103, 0.40); color: #ffffff; }
.sub-header__item_active { background: rgba(167, 31, 103, 0.55); color: #ffffff; }

@media (max-width: 900px) {
    /* hide the desktop (sub-header + navy bar) on mobile */
    .sub-header { display: none; }
    /* hide the desktop navy bar on mobile (kartoosh uses dropdown + bottom nav) */
    .main-nav { display: none; }
    /* full-width navy topbar on mobile, no side padding squeeze */
    .topbar { height: 56px; padding: 0 12px; }
    .page-content-inner { padding: 16px 14px 0; }
    .joker-clock { display: none; }
    .topbar-right--user { margin-right: 0; }
}

/* =========================================================
   FULL PAGE SWEEP  (every module -> dark navy surfaces)
   Repeating dark surface + white text; magenta/gold accents.
   ========================================================= */

/* ---- Repeating card surface (profile/referral/vip/search/support/redeem/cashback) ---- */
.profile-sidebar__user, .profile-sidebar__nav, .profile-support,
.profile-card, .profile-bonuses-card, .profile-table, .profile-placeholder,
.profile-settings__card, .balance-summary, .balance-toolbar, .balance-list,
.dp-section, .wd-col, .wd-manual, .referral-hero, .referral-stat, .referral-empty,
.vip-welcome, .vip-progress-card, .vip-tier-card, .vip-privilege-card,
.search-modal, .support-chat__panel, .redeem-modal, .cashback-modal {
    background: var(--bg-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.30) !important;
}
.profile-table__head { background: var(--kt-navy-2) !important; }
.dp-select__menu, .wd-currency-select__menu, .deposit-select__menu { background: var(--bg-card) !important; border: 1px solid rgba(255,255,255,0.14); }

/* inputs / chips / small fills -> dark */
.profile-settings__field input, .balance-search__input, .dp-chip, .dp-select__trigger,
.dp-address, .wd-manual__pill, .wd-manual__input, .wd-manual__amount-input,
.wd-method, .wd-currency-select__trigger, .wd-input,
.profile-placeholder__list, .profile-placeholder__code,
.referral-share__input, .deposit-method-pill, .deposit-dest-row,
.deposit-manual-success__meta, .deposit-address-card__value, .deposit-upload__drop,
.redmm-input-sweep, .redeem-modal__input {
    background: var(--kt-navy-deep) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
}

/* light text on the now-navy surfaces */
.profile-page__heading, .profile-sidebar__name, .profile-support__title,
.profile-card__title, .profile-user-card__email, .profile-user-card__balance,
.profile-section__title, .profile-bonuses-card__copy h3, .profile-placeholder h2,
.profile-settings > h2, .profile-settings__card h3, .balance-row__name,
.balance-row__usd, .dp-help, .dp-select__value, .dp-select__trigger,
.wd-manual__title, .wd-manual__balance-value, .wd-step__title, .wd-step__num,
.wd-method__label, .wd-currency-select__trigger, .wd-currency-select__name,
.wd-form-head__name, .wd-field__label, .wd-balance-chip__value,
.wd-summary__value, .referral-header__title, .referral-hero__title,
.referral-stat__value, .referral-empty h3,
.vip-page, .vip-welcome__title, .vip-progress__tier, .vip-progress__foot strong,
.vip-section__title, .vip-progress-card__name, .vip-ladder-head__name,
.vip-tier-card__xp, .vip-privilege-card__title {
    color: #ffffff !important;
}
.profile-support__copy, .profile-card__chevron, .profile-user-card__copy,
.profile-bonuses-card__copy p, .profile-table__cell-muted, .profile-placeholder p,
.profile-settings__field > span, .balance-summary__label, .balance-row__ticker,
.balance-row__crypto, .dp-intro, .dp-divider, .dp-field__label, .dp-select__caret,
.dp-address__label, .wd-manual__sub, .wd-manual__optional, .wd-manual__meta,
.wd-currency-select__ticker, .wd-form-head__ticker, .wd-balance-chip__label,
.wd-summary__label, .referral-hero__desc, .referral-stat__label, .referral-stat__unit,
.referral-empty p, .vip-welcome__desc, .vip-progress__foot, .vip-progress-card__hint,
.vip-tier-card__sub, .vip-privilege-card__copy, .vip-partner__role,
.vip-breadcrumb a, .vip-breadcrumb__current {
    color: var(--text-muted) !important;
}
.profile-btn, .profile-table__head, .profile-table__row, .profile-placeholder,
.balance-toggle__label, .dp-chip, .dp-select__option, .dp-address__value,
.dp-warning p, .wd-manual__pill, .wd-method, .wd-currency-select__option,
.referral-page, .redeem-modal__title, .cashback-modal__title,
.support-chat__title, .support-chat__msg--admin {
    color: #e6ecf7 !important;
}

/* profile nav active -> magenta; idle gray */
.profile-nav-item { color: var(--text-muted); }
.profile-nav-item:hover, .profile-nav-item.is-active {
    background: rgba(167, 31, 103, 0.18) !important;
    color: #ffffff !important;
}
.profile-nav-item.is-active .profile-nav-item__icon,
.profile-section__icon, .profile-bonuses-card__copy a,
.dp-address__copy, .wd-method__more { color: var(--kt-magenta) !important; }

/* repeat primary buttons -> magenta */
.dp-open-modal-btn, .profile-support__btn {
    background: rgba(167, 31, 103, 0.18) !important;
    color: #ffffff !important;
}

/* -------- RACES -------- */
.podium-card, .lb-row { background: var(--bg-card) !important; border: 1px solid rgba(255,255,255,0.10); }
.lb-row:hover { background: var(--bg-card-hover) !important; }
.podium-user, .wagered-amount, .lb-username, .lb-col-wagered { color: #ffffff !important; }
.rank-hex { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.14); color: var(--text-muted); }

/* -------- CHALLENGES -------- */
.challenges-tabs { background: var(--kt-navy-2) !important; border: 1px solid rgba(255,255,255,0.08); }
.challenge-card, .challenge-card--completed {
    background: var(--bg-card) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.30) !important;
}
.challenge-card__thumb { background: var(--bg-card-hover) !important; }
.challenges-header h1 { color: #ffffff !important; }
.challenges-tab { color: var(--text-muted); }
.challenges-tab:hover, .challenges-tab.active { color: #ffffff; }
.challenges-tab.active { background: linear-gradient(135deg, var(--kt-magenta), var(--kt-magenta-2)) !important; color: #fff !important; }
.challenge-card__title { color: #ffffff !important; }
.challenge-card__desc { color: var(--text-muted) !important; }
.challenge-card__row dd { color: var(--text-secondary) !important; }
.challenge-card__creator, .challenge-card__winner { color: #ffffff !important; }
.challenge-card__btn { background: linear-gradient(135deg, var(--kt-magenta), var(--kt-magenta-2)) !important; }

/* -------- REWARDS -------- */
.rewards-header, .rewards-boxes, .rank-progress, .rank-progress__strip,
.rewards-totals { background: var(--kt-navy-2) !important; border: 1px solid rgba(255,255,255,0.08); }
.reward-box { background: var(--bg-card) !important; border: 1px solid rgba(255,255,255,0.10); }
.reward-box--locked { background: rgba(255,255,255,0.04) !important; }
.rewards-header h1, .rewards-header__reload .amount, .reward-box__label,
.rank-progress__title, .rewards-total.active, .rewards-total__amount { color: #ffffff !important; }
.rank-progress__view-all { background: var(--bg-card) !important; border: 1px solid rgba(255,255,255,0.12); color: var(--text-secondary); }
.reward-box__btn, .rank-progress__claim { background: linear-gradient(135deg, var(--kt-magenta), var(--kt-magenta-2)) !important; }

/* -------- VIP -------- */
.vip-progress__bar { background: rgba(255,255,255,0.10) !important; }
.vip-progress-card__pill--unlock { background: rgba(255,255,255,0.08) !important; color: var(--text-secondary); }
.vip-progress__bar-dot { border-color: #ffffff !important; }

/* -------- AUTH MODAL --------
   Moved to assets/css/auth-modals.css (kartoosh clone: full-screen dark
   overlay, top-label fields, #F8C524 button). The old Webrace/purple
   overrides below were removed so they cannot fight the new skin. */

/* -------- SEARCH MODAL -------- */
.search-modal__close { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.search-modal__input { color: #ffffff !important; }
.search-modal__input::placeholder { color: #8b97b3; }
.search-modal__result:hover, .search-modal__result.active { background: rgba(167,31,103,0.18) !important; }
.search-modal__name { color: #ffffff !important; }
.search-modal__provider { color: var(--text-muted) !important; }
.search-modal__type { color: var(--kt-magenta) !important; background: rgba(167,31,103,0.18); }
.search-modal__more { background: rgba(167,31,103,0.18); color: #ffffff; }
.search-modal__thumb { background: var(--bg-card-hover) !important; }
.search-modal__thumb-art { background: linear-gradient(135deg, #3a1d3a, #14223e) !important; }

/* -------- SUPPORT CHAT -------- */
.support-chat__header { background: rgba(167,31,103,0.14); }
.support-chat__close { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.support-chat__msg--admin {
    background: var(--bg-card-hover) !important;
    color: #ffffff !important;
}
.support-chat__input { background: var(--kt-navy-deep) !important; border: 1px solid rgba(255,255,255,0.10); color: #ffffff !important; }
.support-chat__subtitle, .support-chat__guest, .support-chat__offline { color: var(--text-muted); }
.support-chat__btn--ghost { background: rgba(255,255,255,0.06); color: #e6ecf7; }
.chat-fab.has-unread::after { border-color: #ffffff !important; }

/* -------- DEPOSIT MODAL (via --dm-* vars) -------- */
.deposit-modal {
    --dm-bg: #0f1720;
    --dm-bg-elevated: #24303a;
    --dm-surface: rgba(255,255,255,0.04);
    --dm-surface-hover: rgba(255,255,255,0.08);
    --dm-border: rgba(255,255,255,0.10);
    --dm-border-strong: rgba(255,255,255,0.20);
    --dm-text: #ffffff;
    --dm-muted: #8b97b3;
    --dm-accent: var(--kt-magenta);
    --dm-accent-soft: rgba(167,31,103,0.18);
    --dm-accent-ring: rgba(167,31,103,0.55);
}
.deposit-modal { background: var(--bg-card) !important; }
.deposit-primary-btn { background: linear-gradient(135deg, var(--kt-magenta), var(--kt-magenta-2)) !important; }
.deposit-tab.active { background: rgba(167,31,103,0.18); color: #ffffff; }
.deposit-text-btn, .deposit-upload__icon, .deposit-method-pill__icon--bank,
.deposit-address-card__value { color: var(--kt-magenta) !important; }

/* -------- REDEEM / CASHBACK modal buttons -> magenta -------- */
.redeem-modal__btn { background: linear-gradient(135deg, var(--kt-magenta), var(--kt-magenta-2)) !important; }
.cashback-modal__btn { background: linear-gradient(135deg, var(--kt-magenta), var(--kt-magenta-2)) !important; }

/* -------- SPORTSBOOK -> navy, magenta focus -------- */
.sb-sidebar, .sb-main, .sb-betslip {
    background: var(--bg-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.sb-sidebar__head h2, .sb-betslip__head h2 { color: #ffffff !important; }
.sb-cat-item { color: #e6ecf7 !important; }
.sb-cat-item:hover, .sb-cat-item.active { background: rgba(167,31,103,0.18) !important; color: #ffffff !important; }
.sb-tabs { background: var(--kt-navy-2) !important; }
.sb-tab { color: var(--text-muted); }
.sb-tab:hover, .sb-tab.active { color: var(--kt-magenta); }
.sb-search, .sb-refresh-btn, .sb-quick-stakes button { background: rgba(255,255,255,0.08) !important; color: #ffffff !important; }
.sb-match { background: var(--bg-card) !important; border: 1px solid rgba(255,255,255,0.08); }
.sb-match__header { background: rgba(255,255,255,0.05); }
.sb-match__team-name { color: #ffffff !important; }
.sb-match__sport, .sb-match__tags { color: var(--text-muted) !important; }
.sb-match__when, .sb-match__vs { color: #8b97b3; }
.sb-event-card, .sb-bet-card { background: var(--bg-card) !important; border: 1px solid rgba(255,255,255,0.08); }
.sb-event-card__head, .sb-bet-card__cell { background: rgba(255,255,255,0.05); }
.sb-event-teams__row, .sb-bet-card__match { color: #ffffff !important; }
.sb-pick, .sb-odd-btn { background: var(--bg-card-hover) !important; border: 1px solid rgba(255,255,255,0.14) !important; color: #ffffff !important; }
.sb-pick.is-selected, .sb-odd-btn.is-selected { background: linear-gradient(135deg, var(--kt-brand), var(--kt-brand-2)) !important; color: #fff !important; border-color: var(--kt-brand) !important; }
.sb-section-head { background: linear-gradient(180deg, #24303a 70%, transparent) !important; }
.sb-betslip__footer, .sb-bet-card__cell { background: rgba(255,255,255,0.05); }
.sb-slip-item { background: var(--bg-card-hover) !important; }
.sb-slip-item__match { color: #ffffff !important; }
.sb-stake-field input { background: rgba(255,255,255,0.08) !important; color: #ffffff !important; }
.sb-btn--primary { background: linear-gradient(135deg, var(--kt-brand), var(--kt-brand-2)) !important; }
.sb-events-meta, .sb-pick__name, .sb-odd-btn__label, .sb-market-tag,
.sb-event-time, .sb-event-kickoff, .sb-cat-item__count { color: var(--text-muted) !important; }

/* -------- CASHIER OVERRIDES for page files loaded before this one
   (casino-ltb.css / profile.css ship light skins; joker1x2 wins) -------- */
.page-casino .home-slider { background: var(--kt-navy-deep) !important; }
.slots-empty {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px dashed rgba(255, 255, 255, 0.18) !important;
    color: var(--text-muted) !important;
}

/* =========================================================
   KARTOOSH HEADER + NAV  � rebuilt to kartoosh.bet real specs
   palette  : skinning.js  d=#18232D hero=#A71F67 brand=#16C72E
              secondary=#06A9AA accent=#AA7F00 oc-1=#109121
              oc-2=#FFD700 oc-3=#FF3449 font-dark=#000205
   header   : .header-top 58px (52px mobile) gap 14px padding 0 14px
   brand    : logo h38px (h30 mobile), gift 34x34 object-fit contain, gap 10px
   nav      : .nav-bar 38px green, radius 4px, link h30 radius 3px,
              active = gold pill, hover = #ffffff1f
   radius   : 4px  (kartoosh --border-radius)
   ========================================================= */

/* ---- tokens (exact kartoosh skinning.js values) ---- */
:root {
    --kt-navy:      #18232d;   /* --b : body + header + menu + tabs */
    --kt-navy-deep: #0f1720;
    --kt-navy-2:    #24303a;
    --kt-magenta:   #a71f67;   /* hero */
    --kt-magenta-2: #7e1549;
    --kt-brand:     #16c72e;   /* brand green : also nav-bar bg */
    --kt-brand-2:   #109121;   /* oc-1 */
    --kt-teal:      #06a9aa;   /* secondary */
    --kt-gold:      #ffd700;   /* oc-2 */
    --kt-gold-2:    #aa7f00;   /* accent */
    --kt-red:       #ff3449;   /* oc-3 / odd-down */
    --kt-ink:       #000205;   /* font-dark */
}

/* =========================================================
   HEADER
   ========================================================= */
.topbar {
    height: 58px;
    min-height: 58px;
    padding: 0 14px;
    gap: 14px;
    background: var(--kt-navy) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: Roboto, 'Cairo', Arial, Helvetica, sans-serif;
}
.topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.topbar-right {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* ---- brand: logo + gift promo ---- */
.topbar .brand,
.topbar .logo { display: inline-flex; align-items: center; height: 38px; }
.topbar .logo-img-bc {
    display: flex;
    align-items: center;
    height: 38px;
    max-width: 200px;
    overflow: hidden;
}
.topbar .logo-img {
    display: block;
    height: 38px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    object-position: left center;
}
.topbar .logo-text,
.topbar .logo-text__brand {
    color: #fff;
    font-family: Roboto, 'Cairo', sans-serif;
    font-weight: 900;
    font-size: 26px;
    letter-spacing: -0.5px;
}

/* kartoosh .header-icon > img : contain + 4px radius, 34x34 */
.hdr-promo {
    display: inline-flex;
    align-items: center;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    overflow: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.hdr-promo img {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 4px;
}
.hdr-promo:hover { opacity: 0.85; transform: scale(1.06); }

/* ---- sign in ---- */
.hdr-auth-btn {
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    background: var(--kt-gold);
    color: #1b1400;
    font-family: Roboto, 'Cairo', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.hdr-auth-btn:hover { filter: brightness(1.08); }
.hdr-auth-btn--join {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-weight: 500;
    font-size: 12px;
}
.hdr-auth-btn--join:hover { color: var(--kt-gold); background: transparent; }

/* ---- shared control look: kartoosh .lang-btn/.clock/.icon-btn ---- */
.hdr-lang__btn,
.hdr-time-wrap,
.hdr-smart__btn {
    height: 28px;
    border: 0;
    border-radius: 4px;
    background: #2a3440;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    font-family: Roboto, 'Cairo', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.hdr-lang__btn:hover,
.hdr-smart__btn:hover,
.hdr-lang.is-open .hdr-lang__btn,
.hdr-smart.is-open .hdr-smart__btn {
    color: var(--kt-gold);
}
.hdr-lang { position: relative; }
.hdr-lang__btn { background: #2a3440; }
.hdr-lang__flag { display: inline-flex; align-items: center; }
.hdr-lang__flag svg { width: 22px; height: 14px; border-radius: 2px; display: block; }
.hdr-lang__code { letter-spacing: 0.04em; }
.hdr-lang__chev { opacity: 0.6; }
.hdr-lang.is-open .hdr-lang__chev { transform: rotate(180deg); }

/* ---- clock : kartoosh .clock min-width 72px ---- */
.hdr-time-wrap {
    min-width: 72px;
    justify-content: center;
    letter-spacing: 0.04em;
    cursor: default;
}
.hdr-time__icon { opacity: 0.75; flex: 0 0 auto; }
.hdr-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hdr-time__val { color: #fff; }
.hdr-time__sep { display: none; }
.hdr-time__val:last-child { color: rgba(255, 255, 255, 0.62); font-size: 11px; }

/* ---- 3 dots ---- */
.hdr-smart { position: relative; }
.hdr-smart__btn { width: 28px; padding: 0; justify-content: center; background: #2a3440; }

/* ---- dropdowns : kartoosh .menu (radius 8, shadow) ---- */
.hdr-lang__menu,
.hdr-smart__menu {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 240;
    min-width: 180px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: #2b3642;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
.hdr-lang__item,
.hdr-smart__item,
.hdr-smart__lang {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-family: Roboto, 'Cairo', sans-serif;
    font-size: 13px;
    text-align: start;
    text-decoration: none;
    transition: background 0.14s ease, color 0.14s ease;
}
.hdr-lang__item:hover,
.hdr-smart__item:hover,
.hdr-smart__lang:hover { background: rgba(248, 215, 0, 0.14); color: var(--kt-gold); }
.hdr-lang__item.is-active,
.hdr-smart__lang.is-active { background: rgba(248, 215, 0, 0.14); color: var(--kt-gold); }
.hdr-lang__native,
.hdr-smart__lang span:last-child { flex: 1 1 auto; }
.hdr-lang__check { flex: 0 0 auto; }
.hdr-smart__title,
.hdr-smart__langlabel {
    padding: 6px 10px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--muted, #9aa8b6);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.hdr-smart__langlabel { border-bottom: 0; margin-bottom: 0; }
.hdr-smart__icon { display: inline-flex; width: 15px; height: 15px; flex: 0 0 auto; color: var(--kt-gold); }
.hdr-smart__icon svg { width: 100%; height: 100%; }
.hdr-smart__sep { height: 1px; margin: 5px 4px; background: rgba(255, 255, 255, 0.08); }
.hdr-smart__langs { display: flex; flex-direction: column; gap: 2px; }

/* ---- logged-in variant ---- */
.topbar-right--user { gap: 8px; }
.topbar-right--user .tb-account,
.topbar-right--user .tb-icon-btn {
    height: 28px;
    border-radius: 4px;
    background: #2a3440;
    color: #fff;
}
.topbar-right--user .tb-account:hover,
.topbar-right--user .tb-icon-btn:hover { color: var(--kt-gold); }

/* =========================================================
   NAV BAR � kartoosh green bar
   ========================================================= */
.main-nav {
    height: 38px;
    margin: 0 10px 8px;
    background: var(--kt-brand) !important;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    gap: 2px;
    box-shadow: none;
    border: 0;
}
.main-nav__scroll {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.main-nav__scroll::-webkit-scrollbar { display: none; }
.main-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #fff;
    font-family: Roboto, 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.14s ease, color 0.14s ease;
}
.main-nav__link:hover { background: rgba(255, 255, 255, 0.12); }
.main-nav__link.is-active {
    background: var(--kt-gold);
    color: #1d1600;
    font-weight: 700;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media screen and (max-width: 1366px) {
    .topbar .logo-img,
    .topbar .logo-img-bc { max-width: 180px; }
}
@media screen and (max-width: 1100px) {
    .topbar .logo-img,
    .topbar .logo-img-bc { max-width: 150px; }
    .hdr-smart__menu,
    .hdr-lang__menu { min-width: 168px; }
}
@media screen and (max-width: 900px) {
    .topbar { display: none; }
    .main-nav {
        height: 36px;
        margin: 0;
        border-radius: 0;
        padding: 0 4px;
    }
    .main-nav__link {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        padding: 0 8px;
    }
}

/* =========================================================
   RTL
   ========================================================= */
[dir="rtl"] body,
[dir="rtl"] .topbar,
[dir="rtl"] .main-nav { font-family: 'Cairo', sans-serif; }
[dir="rtl"] .hdr-lang__code,
[dir="rtl"] .hdr-auth-btn { letter-spacing: 0; }