/* =====================================================================
   SRK247 — King123 theme (clean rewrite)
   Base = react-user (d247) style.css / responsive.css, UNTOUCHED.
   This file is the ONLY override layer, loaded LAST so it wins the cascade.
   Reference: kingscreenshot/ (king123.live).

   Sections:
   1. Tokens          2. Fonts            3. Header + nav
   4. Buttons/links   5. Layout           6. Back/Lay cells (global)
   7. Event page      8. Fancy            9. Account pages
   10. Auth pages     11. Footer
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  --king-gold: #ffbe00;
  --king-gold-grad: linear-gradient(90deg, #e1b145 0%, #ca8f05 50%, #eabb56 100%);
  --king-head: #213040;        /* section/table header navy */
  --king-panel: #121e2a;       /* panels/cards */
  --king-violet: #7c6bf5;      /* exchange accent (tabs, info) */
  --king-back: #84c4ff;        /* back cells (King exact, events.scss) */
  --king-lay: #ff9384;         /* lay cells (King exact, events.scss) */
  --king-cell-text: #14213a;   /* text inside odds cells */
}

body { background: #000 !important; }

/* ---------- 2. FONTS — Montserrat everywhere (King123), FA icons intact ---------- */
body, div, span, p, a, td, th, tr, li, ul, ol, button, input, select, textarea, label,
h1, h2, h3, h4, h5, h6, b, strong, small, marquee {
  font-family: "Montserrat", sans-serif !important;
}
.fa, .fas, .far, .fal, .fab, i[class*="fa-"], span[class*="fa-"] {
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "Font Awesome 5 Pro" !important;
}

/* ---------- 3. HEADER — black bar, gold 2px top/bottom borders, ONE row ---------- */
.header, .header-top { background-color: #000 !important; }
.header {
  border-top: 2px solid var(--king-gold) !important;
  border-bottom: 2px solid var(--king-gold) !important;
}
/* single row: logo | nav | balance/login. Base .header-top wraps — force nowrap. */
.header .header-top {
  display: flex !important; flex-wrap: nowrap !important; align-items: center;
  gap: 12px; height: auto !important; min-height: 58px;
}
.header .logo-header { flex: 0 0 auto; }
.header .logo-header img { max-height: 38px !important; width: auto !important; max-width: 150px; }
.header .user-details { margin-left: auto; flex: 0 0 auto; }

/* top nav: white uppercase, gold hover, horizontal scroll (never wraps over banner) */
.king-topnav {
  display: flex !important; flex: 1 1 auto; align-items: center; gap: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; min-width: 0; white-space: nowrap;
}
.king-topnav::-webkit-scrollbar { display: none; }
.king-topnav .nav-link, .king-topnav a, .king-topnav a:link, .king-topnav a:visited {
  color: #ffffff !important; text-transform: uppercase; font-size: 12px; font-weight: 600;
  padding: 6px 9px !important; white-space: nowrap; letter-spacing: .3px; display: inline-block;
}
.king-topnav .nav-link:hover, .king-topnav a:hover { color: var(--king-gold) !important; }

/* guest Login / Sign Up — solid gold pills, invert on hover */
.king-auth-btns { display: flex; align-items: center; gap: 8px; }
.btn-king-signin, .btn-king-signup {
  height: 30px; min-width: 80px; padding: 0 14px; border-radius: 25px; font-size: 12px;
  font-weight: 700; text-transform: uppercase; cursor: pointer;
  background: var(--king-gold); color: #000; border: 1px solid var(--king-gold); transition: all .15s ease;
}
.btn-king-signin:hover, .btn-king-signup:hover { background: transparent; color: var(--king-gold); }

/* logged-in deposit / withdraw links stay gold */
.header-deposit-withdraw-btn a, .header-desktop-deposit-withdraw-btn a { color: var(--king-gold) !important; }

/* ---------- 4. BUTTONS + LINKS ---------- */
.btn-primary, .btn-home-login, .btn-add {
  background: var(--king-gold-grad) !important; background-color: var(--king-gold) !important;
  color: #000 !important; border: 1px solid var(--king-gold) !important; font-weight: 700 !important;
}
.btn-primary:hover, .btn-home-login:hover { filter: brightness(1.05); color: #000 !important; }
a { color: var(--king-gold); }
.btn-outline-primary, .back-link, .back-btn, .btn-default {
  color: var(--king-gold) !important; border-color: var(--king-gold) !important;
}

/* exchange accents = violet (place bet, active tabs, info) */
.detail-page .btn-place-bet, .bet-place-btn, .place-bet-btn {
  background: var(--king-violet) !important; border-color: var(--king-violet) !important; color: #fff !important;
}
.detail-page .nav-tabs .nav-link.active, .detail-page .active-tab, .detail-page .btn-info, .detail-page .info-btn {
  background: var(--king-violet) !important; border-color: var(--king-violet) !important; color: #fff !important;
}
/* cashout hidden for now (per request) */
.market-title .btn-success, .detail-page .cashout, .detail-page .btn-cashout { display: none !important; }

/* ---------- 5. LAYOUT — no diamond left sidebar; content full width ---------- */
.center-main-container { width: 100% !important; }
.left-side-menu-desktop, .king-nosidebar .left-side-menu-desktop { display: none !important; }

/* ---------- 6. BACK / LAY (global: listing + anywhere) ---------- */
.back { background-color: var(--king-back) !important; }
.lay  { background-color: var(--king-lay) !important; }
.back *, .lay * { color: #000 !important; font-weight: 700 !important; }

/* casino tiles polish */
.casino-list-item a { border-radius: 8px; overflow: hidden; display: block; }
.casino-list-item:hover .casino-list-item-banner { transform: scale(1.05); transition: transform .25s; }
.casino-list-name {
  background: linear-gradient(0deg, rgba(0,0,0,.85), transparent) !important;
  color: #fff !important; font-weight: 600;
}

/* ---------- 7. EVENT PAGE — section bars, MIN/MAX in title, odds cells ---------- */
/* section title bar: navy, gold left accent, ONE line (name shrinks, MIN/MAX pinned right) */
.market-title {
  background: var(--king-head) !important; color: #fff !important;
  border-left: 3px solid var(--king-gold); font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; display: flex !important; align-items: center; gap: 8px;
  flex-wrap: nowrap !important; justify-content: flex-start !important;
}
.market-title > span:first-child { flex: 0 1 auto; min-width: 0; }
/* MIN/MAX on the RIGHT of the title bar (grey label + white value, stacked, no ellipsis) */
.market-title > span.king-mm {
  max-width: none !important; overflow: visible !important; white-space: normal !important;
  display: flex !important; flex-direction: column; align-items: flex-end;
  flex: 0 0 auto !important; margin-left: auto; padding-right: 4px;
}
.market-title .king-mm > span {
  max-width: none !important; overflow: visible !important; text-overflow: clip !important;
  white-space: nowrap !important; display: block !important;
  color: #fff; font-weight: 700; font-size: 11px; line-height: 1.3; text-transform: uppercase;
}
.market-title .king-mm i { font-style: normal; color: rgba(255,255,255,.55); font-weight: 600; }

/* header row under the title: Back/Lay COLUMN LABELS are text-only (no filled boxes) */
.market-header { background: #16222e !important; }
.market-header .market-odd-box.back {
  background: transparent !important; color: var(--king-back) !important; font-weight: 700 !important;
  min-height: auto !important; margin: 0 !important; border-radius: 0 !important;
}
.market-header .market-odd-box.lay {
  background: transparent !important; color: var(--king-lay) !important; font-weight: 700 !important;
  min-height: auto !important; margin: 0 !important; border-radius: 0 !important;
}
.market-header .market-odd-box.back *, .market-header .market-odd-box.lay * { color: inherit !important; }
/* old min/max text in the header row is redundant now (runner names live in .market-body) */
.market-header .market-nation-name { display: none !important; }

/* BODY odds cells: filled rounded boxes — back blue / lay salmon / dark bold value */
.market-row .market-odd-box.back, .fancy-market .market-odd-box.back,
.market-odd-box.back1, .market-odd-box.back2 { background-color: var(--king-back) !important; }
.market-row .market-odd-box.lay, .fancy-market .market-odd-box.lay,
.market-odd-box.lay1, .market-odd-box.lay2 { background-color: var(--king-lay) !important; }
.market-row .market-odd-box.back *, .market-row .market-odd-box.lay *,
.fancy-market .market-odd-box.back *, .fancy-market .market-odd-box.lay *,
.market-odd-box.back1 *, .market-odd-box.back2 *, .market-odd-box.lay1 *, .market-odd-box.lay2 * {
  color: var(--king-cell-text) !important;
}
.market-row .market-odd-box.back, .market-row .market-odd-box.lay,
.fancy-market .market-odd-box.back, .fancy-market .market-odd-box.lay,
.market-odd-box.back1, .market-odd-box.back2, .market-odd-box.lay1, .market-odd-box.lay2 {
  border-radius: 3px !important; margin: 2px 3px !important;
}
.market-odd { font-family: "Montserrat", sans-serif !important; font-weight: 800 !important; }
@media (max-width: 991px) {
  .market-odd-box .market-odd {
    font-size: 12px !important; line-height: 15px !important; letter-spacing: .02em; font-weight: 800 !important;
  }
  .market-odd-box .market-volume { font-size: 10px !important; }
}

/* King123 responsive depth: FULL-WIDE desktop = 6 cells; everything below 1200px = best 2
   only (King collapses the depth too — and with the right sidebar the 6 cells were
   wrapping onto a second line at squeezed widths). */
@media (max-width: 1199px) {
  .market-odd-box.back1, .market-odd-box.back2,
  .market-odd-box.lay1, .market-odd-box.lay2 { display: none !important; }

  /* Non-fancy markets (.market-4 = Match Odds / Bookmaker / Tied etc.): King123 pins the
     best Back+Lay to the RIGHT side of the row. Hide the empty placeholder boxes in the
     header and push the first visible cell (and the Back label) right with auto margin.
     Fancy (.market-6) keeps its own layout — untouched. */
  .market-4 .market-header .market-odd-box:not(.back):not(.lay) { display: none !important; }
  .market-4 .market-header .market-odd-box.back { margin-left: auto !important; }
  .market-4 .market-row .market-odd-box:not(.back):not(.lay):not(.back1):not(.back2):not(.lay1):not(.lay2) { display: none !important; }
  .market-4 .market-row .market-odd-box.back { margin-left: auto !important; }
  .market-4 .market-row .market-nation-detail { flex: 1 1 auto; min-width: 0; }
}

/* ---------- 8. FANCY ---------- */
/* category tabs (All Fancy / Normal / Over By Over / Ball By Ball / …) */
.king-fancy-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 2px 8px; margin-top: 6px;
  border-top: 1px solid var(--king-head);
}
.king-fancy-tabs .kft {
  padding: 8px 16px; border-radius: 8px 8px 0 0; border: 1px solid var(--king-head); border-bottom: none;
  background: #16222e; color: rgba(255,255,255,.75); font-weight: 700; font-size: 13px;
  text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
.king-fancy-tabs .kft.on { background: var(--king-violet); color: #fff; border-color: var(--king-violet); }

/* fancy section title: violet left accent (distinct from match odds) */
.fancy-market .market-title, .fancy-market-title, .session-title {
  border-left: 3px solid var(--king-violet) !important;
  background: linear-gradient(90deg, #1a1533, #16222e) !important; color: #fff !important;
}
.fancy-market { border-bottom: 1px solid var(--king-head) !important; }

/* fancy market name: uppercase Montserrat 500 / 12px / 15px (King123 spec) */
.fancy-market .market-nation-name {
  font-family: "Montserrat", sans-serif !important; text-transform: uppercase !important;
  font-weight: 500 !important; font-size: 12px !important; line-height: 15px !important;
}

/* fancy min/max: gold; VISIBLE on mobile too (d247 hides it @767, King123 shows it) */
.fancy-min-max, .fancy-min-max-box, .market-remark { color: var(--king-gold) !important; }
.fancy-min-max span { color: var(--king-gold) !important; text-transform: none !important; }
@media (max-width: 991px) {
  .fancy-min-max-box {
    display: block !important; width: auto !important; flex: 0 0 auto !important;
    padding: 0 6px !important; text-align: right;
  }
  .fancy-min-max { font-size: 10px !important; white-space: nowrap; }
  /* one clean line per fancy row: name (flex) | min/max | No | Yes */
  .fancy-market .market-row { flex-wrap: nowrap !important; align-items: center; gap: 3px; }
  .fancy-market .market-nation-detail { flex: 1 1 auto; min-width: 0; }
  .fancy-market .market-nation-name { white-space: normal; }
  .fancy-market .market-odd-box.back, .fancy-market .market-odd-box.lay { flex: 0 0 54px !important; width: 54px !important; }
  .row.row10 .market-header .market-odd-box.back, .row.row10 .market-header .market-odd-box.lay { flex: 0 0 54px; text-align: center; }
}
/* desktop fancy = ONE column (King123), not two */
@media (min-width: 992px) {
  .market-body .row.row10 > .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
  .market-body .row.row10 > .col-md-6.d-none.d-xl-block { display: none !important; }
  .row.row10 > .col-md-6.d-none.d-xl-block { display: none !important; }
}

/* ---------- 9. ACCOUNT PAGES (My Bets / Cashier / Withdraw / Statement…) ---------- */
/* dark inputs with thin gold border (King123 date/search fields) */
.center-main-container input.form-control,
.center-main-container select.form-control,
.center-main-container .form-select {
  background: #0d0d0d !important; border: 1px solid var(--king-gold) !important; color: #fff !important;
  border-radius: 4px !important;
}
.center-main-container input.form-control::placeholder { color: rgba(255,255,255,.5) !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--king-gold) !important; box-shadow: 0 0 0 .15rem rgba(255,190,0,.15) !important;
  background-color: #0d0d0d !important; color: #fff !important;
}
.form-check-input:checked { background-color: var(--king-gold) !important; border-color: var(--king-gold) !important; }
/* table header strips: near-black, white bold (King123 Id/comments/txn_type row) */
thead th, .center-main-container thead th, .table-header {
  background: #1a1a1a !important; color: #fff !important; font-weight: 700 !important;
  border-color: #2a2a2a !important;
}
table, .table { color: #fff !important; }
.table td, .table th, tbody td { border-color: #16222e !important; }
/* tabs: gold active (account), green active (casino provider strips) */
.nav-pills .nav-link.active, .nav-tabs .nav-link.active {
  background-color: var(--king-gold) !important; color: #000 !important; border-color: var(--king-gold) !important;
}
.nav-pills .nav-link, .nav-tabs .nav-link { color: rgba(255,255,255,.75); }
.nav-tabs { background-color: var(--king-head) !important; }
.casino-sub-tab .nav-link.active, .casino-tab .nav-link.active, .provider-tab .nav-link.active {
  background-color: transparent !important; color: #2ecc71 !important;
  border-bottom: 2px solid #2ecc71 !important;
}
.report-amount, .report-date, .report-action, .detail-row .value { color: #fff; }
.error-msg { color: #ff9c9c; }

/* ---------- 10. AUTH PAGES (login / register) ---------- */
.login-page, .register-page, .secure-auth-page, .change-password-page {
  background: linear-gradient(#0b0b0d, #000) !important;
  min-height: 100vh !important; height: auto !important;
  justify-content: flex-start !important; align-items: center !important;
  padding: 34px 12px 24px !important; overflow-y: auto !important;
}
.login-box, .register-box { width: 400px !important; max-width: 94% !important; }
.login-form, .register-form, .auth-box, .form-container {
  background: var(--king-panel) !important; border: 1px solid var(--king-head) !important;
  border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.5) !important;
}
.login-title, .login-form h4 { color: var(--king-gold) !important; }
.login-btn, .signup-btn, .register-btn, .submit-btn {
  background: var(--king-gold-grad) !important; color: #000 !important;
  border: none !important; font-weight: 700 !important;
}
.login-page .footer, .register-page .footer, .secure-auth-page .footer {
  position: static !important; margin-top: 18px !important; background: transparent !important;
  border: none !important; width: 100%;
}
.recaptchaTerms { color: rgba(255,255,255,.5) !important; font-size: 11px; }

/* ---------- 11. FOOTER ---------- */
.king-footer-band { background: #000; padding: 22px 16px 6px; text-align: center; border-top: 1px solid var(--king-head); }
.king-footer-band h4 { color: #fff; font-size: 18px; font-weight: 700; margin: 16px 0 10px; }
.king-foot-row { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: center; }
.king-foot-chip {
  color: var(--king-gold); font-weight: 700; font-size: 13px; border: 1px solid var(--king-head);
  border-radius: 8px; padding: 6px 12px; background: var(--king-panel);
}
.king-foot-rg { display: flex; align-items: center; gap: 10px; justify-content: center; color: rgba(255,255,255,.7); font-size: 12px; margin: 16px 0 6px; }
.king-plus18 { background: var(--king-gold); color: #000; font-weight: 800; border-radius: 20px; padding: 3px 10px; }
.footer, footer { background: #000 !important; border-top: 1px solid var(--king-head); }
.footer h2, .footer h4, footer h2, footer h4 { color: #fff !important; }
.footer .footer-links .nav-link { color: #b68806 !important; font-size: 13px; }
.footer .footer-links .nav-link:hover { color: var(--king-gold) !important; }
.footer .support-detail h2 { color: var(--king-gold) !important; font-weight: 800; }
.footer .footer-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 22px 16px; border-bottom: 1px solid var(--king-head);
}
.footer .social-icons-box { display: flex; gap: 12px; }
.footer .social-icon img { width: 34px; height: 34px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px; background: #010119;
}
.footer-bottom .secure-logo { display: flex; align-items: center; gap: 8px; color: #fff; }
.footer-text { background: #000; color: rgba(255,255,255,.7); padding: 14px 16px; }
.footer-text .text-center { color: rgba(255,255,255,.7); }

/* ---------- SUSPENDED overlay: only over the odds cells, never the whole row (King123).
   d247 stretched it width:100% across the name too. Non-fancy: 2 cells (~190px) below
   1200px, the 6-cell ladder (~530px) on full-wide. Fancy: its two fixed cells. ---------- */
.suspended-row::after, .suspended-table::after {
  width: 190px !important; left: auto !important; right: 0 !important;
  font-size: 12px !important; display: flex; align-items: center; justify-content: center;
}
@media (min-width: 1200px) {
  .market-4 .suspended-row::after, .market-4 .suspended-table::after,
  .market-12 .suspended-row::after, .market-13 .suspended-row::after { width: 530px !important; }
}
.fancy-market .suspended-row::after { width: 175px !important; }
@media (max-width: 991px) {
  .fancy-market .suspended-row::after { width: 122px !important; }
}

/* =====================================================================
   VIKRANT EXCHANGE OVERRIDE — light gold/black skin
   Converts the King123 dark theme (above) to Vikrant Exchange's LIGHT
   look: #eee page canvas, black header + gold accent, white cards/tables,
   blue/pink back-lay, red gradient CTAs. Appended LAST so it wins the
   cascade within this file (same selectors, later source order beats
   earlier !important rules of equal specificity). Reference: SKY
   blueprint — design-system.md, desktop-01-home.png,
   desktop-10-real-cricket-event.png, desktop-20-settings-panel.png.
   Theme/CSS only — no src/*.jsx touched.

   Sections mirror the King123 blocks above:
   V1 Tokens      V2 Base           V3 Header        V4 Buttons
   V5 Back/Lay    V6 Event page     V7 Fancy         V8 Account pages
   V9 Auth pages  V10 Footer        V11 Suspended
   ===================================================================== */

/* ---------- V1. TOKENS ---------- */
:root {
  --king-gold: #ffb600;
  --king-gold-grad: linear-gradient(180deg, #ffc93a 0%, #ffb600 55%, #f5a800 100%);
  --king-head: #1e2a38;        /* dark navy section/table header (Match Odds/Bookmaker/Fancy bars) */
  --king-panel: #ffffff;       /* panels/cards now WHITE */
  --king-violet: #1e2a38;      /* no violet accent in Vikrant — reuse navy */
  --king-back: #72bbef;        /* Vikrant back-1 (best price) */
  --king-lay: #faa9ba;         /* Vikrant lay-1 (best price) */
  --king-cell-text: #1e1e1e;
  --vik-red-grad: linear-gradient(-180deg, #f72424 0%, #bb1c00 100%);  /* Login / primary CTA */
  --vik-dark-grad: linear-gradient(180deg, #474747 0%, #070707 100%); /* Send/OK secondary CTA */
  --vik-border: #cccccc;
}

/* ---------- V2. BASE — light canvas ---------- */
body { background: #eeeeee !important; color: #1e1e1e !important; }

/* ---------- V3. HEADER — flat black bar, gold nav text (Vikrant black header + gold sub-nav) ---------- */
.header, .header-top { background-color: #1e1e1e !important; }
.header { border-top: none !important; border-bottom: 2px solid var(--king-gold) !important; }
.header a, .header-top a { color: var(--king-gold); }
.header a:hover, .header-top a:hover { color: #ffffff; }
.king-topnav .nav-link, .king-topnav a, .king-topnav a:link, .king-topnav a:visited {
  color: var(--king-gold) !important;
}
.king-topnav .nav-link:hover, .king-topnav a:hover { color: #ffffff !important; }

/* Login = red primary CTA, Sign Up = dark secondary (Vikrant tokens, not gold pills) */
.btn-king-signin {
  background: var(--vik-red-grad) !important; color: #ffffff !important; border: none !important;
}
.btn-king-signin:hover { filter: brightness(1.08); color: #ffffff !important; }
.btn-king-signup {
  background: var(--vik-dark-grad) !important; color: var(--king-gold) !important; border: 1px solid #333 !important;
}
.btn-king-signup:hover { filter: brightness(1.15); color: var(--king-gold) !important; }

/* ---------- V4. BUTTONS — red gradient primary CTA (Vikrant Login-button token) ---------- */
.btn-primary, .btn-home-login, .btn-add {
  background: var(--vik-red-grad) !important; background-color: #bb1c00 !important;
  color: #ffffff !important; border: 1px solid #bb1c00 !important; font-weight: 700 !important;
}
.btn-primary:hover, .btn-home-login:hover { filter: brightness(1.08); color: #ffffff !important; }
a { color: #1a5fb4; }
.btn-outline-primary, .back-link, .back-btn, .btn-default {
  color: var(--king-head) !important; border-color: var(--king-head) !important;
}
.detail-page .btn-place-bet, .bet-place-btn, .place-bet-btn {
  background: var(--king-head) !important; border-color: var(--king-head) !important; color: #fff !important;
}
.detail-page .nav-tabs .nav-link.active, .detail-page .active-tab, .detail-page .btn-info, .detail-page .info-btn {
  background: var(--king-head) !important; border-color: var(--king-head) !important; color: #fff !important;
}

/* ---------- V5. BACK / LAY — graduated depth tint (Vikrant back-1/2/3, lay-1/2/3) ---------- */
.market-row .market-odd-box.back, .fancy-market .market-odd-box.back { background-color: #72bbef !important; }
.market-odd-box.back1 { background-color: #b7d5eb !important; }
.market-odd-box.back2 { background-color: #d7e8f4 !important; }
.market-row .market-odd-box.lay, .fancy-market .market-odd-box.lay { background-color: #faa9ba !important; }
.market-odd-box.lay1 { background-color: #efd3d9 !important; }
.market-odd-box.lay2 { background-color: #f6e6ea !important; }
.market-row .market-odd-box.back, .market-row .market-odd-box.lay,
.fancy-market .market-odd-box.back, .fancy-market .market-odd-box.lay,
.market-odd-box.back1, .market-odd-box.back2, .market-odd-box.lay1, .market-odd-box.lay2 {
  border-radius: 4px !important;
}

/* ---------- V6. EVENT PAGE — light column-label row; filled Back/Lay label pills ---------- */
.market-header { background: #ffffff !important; border-bottom: 1px solid var(--vik-border); }
.market-header .market-odd-box.back {
  background: var(--king-back) !important; color: #ffffff !important; border-radius: 10px !important;
  padding: 2px 10px !important;
}
.market-header .market-odd-box.lay {
  background: var(--king-lay) !important; color: #ffffff !important; border-radius: 10px !important;
  padding: 2px 10px !important;
}
.market-header .market-odd-box.back *, .market-header .market-odd-box.lay * { color: #ffffff !important; }

/* ---------- V7. FANCY — navy bar (no violet), grey min/max text (not gold-on-white) ---------- */
.fancy-market .market-title, .fancy-market-title, .session-title {
  border-left: 3px solid var(--king-gold) !important;
  background: var(--king-head) !important; color: #fff !important;
}
.king-fancy-tabs .kft {
  background: #ffffff; color: #1e1e1e; border-color: var(--vik-border);
}
.king-fancy-tabs .kft.on { background: var(--king-head); color: #fff; border-color: var(--king-head); }
.fancy-min-max, .fancy-min-max-box, .market-remark, .fancy-min-max span { color: #555555 !important; }

/* ---------- V8. ACCOUNT PAGES — white inputs, light table chrome ---------- */
.center-main-container input.form-control,
.center-main-container select.form-control,
.center-main-container .form-select {
  background: #ffffff !important; border: 1px solid var(--vik-border) !important; color: #1e1e1e !important;
}
.center-main-container input.form-control::placeholder { color: rgba(0,0,0,.4) !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--king-gold) !important; box-shadow: 0 0 0 .15rem rgba(255,182,0,.25) !important;
  background-color: #ffffff !important; color: #1e1e1e !important;
}
thead th, .center-main-container thead th, .table-header {
  background: #f0f0f0 !important; color: #1e1e1e !important; font-weight: 700 !important;
  border-color: var(--vik-border) !important;
}
table, .table { color: #1e1e1e !important; }
.table td, .table th, tbody td { border-color: var(--vik-border) !important; }
.nav-pills .nav-link { color: rgba(0,0,0,.65) !important; }
.report-amount, .report-date, .report-action, .detail-row .value { color: #1e1e1e; }
.error-msg { color: #d0021b; }

/* ---------- V9. AUTH PAGES — white card, red CTA, dark heading ---------- */
.login-page, .register-page, .secure-auth-page, .change-password-page {
  background: #eeeeee !important;
}
.login-form, .register-form, .auth-box, .form-container {
  background: #ffffff !important; border: 1px solid var(--vik-border) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.12) !important;
}
.login-title, .login-form h4 { color: var(--king-head) !important; }
.login-btn, .signup-btn, .register-btn, .submit-btn {
  background: var(--vik-red-grad) !important; color: #ffffff !important; border: none !important;
}
.recaptchaTerms { color: rgba(0,0,0,.5) !important; }

/* ---------- V10. FOOTER — light band, dark headings, blue links ---------- */
.king-footer-band { background: transparent !important; border-top: 1px solid var(--vik-border) !important; }
.king-footer-band h4 { color: #1e1e1e !important; }
.king-foot-chip { color: var(--king-head) !important; border-color: var(--vik-border) !important; background: #ffffff !important; }
.king-foot-rg { color: rgba(0,0,0,.6) !important; }
.footer, footer { background: #e5e5e5 !important; border-top: 1px solid var(--vik-border) !important; }
.footer h2, .footer h4, footer h2, footer h4 { color: #1e1e1e !important; }
.footer .footer-links .nav-link { color: #1a5fb4 !important; }
.footer .footer-links .nav-link:hover { color: var(--king-head) !important; }
.footer .support-detail h2 { color: var(--king-head) !important; }
.footer .footer-top { border-bottom: 1px solid var(--vik-border) !important; }
.footer-bottom { background: #e5e5e5 !important; }
.footer-bottom .secure-logo { color: #1e1e1e !important; }
.footer-text { background: #eeeeee !important; color: rgba(0,0,0,.65) !important; }
.footer-text .text-center { color: rgba(0,0,0,.65) !important; }

/* ---------- V11. SUSPENDED — white cell, red border/text (Vikrant token); lock icon
   reverts to its natural dark stroke (King123's filter:invert(1) made it white-on-white here) */
.suspended-box::after, .suspended-row::after, .suspended-table::after {
  background-color: #ffffff !important; border: 1px solid #d0021b !important; color: #d0021b !important;
}
.suspended-box::before { filter: none !important; -webkit-filter: none !important; }

/* =====================================================================
   PIXEL-CLONE PASS — Vikrant247 structural rebuild (2026-07-10)
   Layout-level pieces the V1-V11 token pass above didn't reach: 2-row
   header (black bar + gold #tabMenu-style nav strip), inline mini-login,
   footer bands, sport-tree sidebar (king-has-tree), casino-lobby hero,
   mobile bottom nav is its own file (KingMobileMenu.css), casino tiles
   are its own file (KingCasino.css). Reference: BLUEPRINT.md.

   V12 Header/nav strip   V13 Footer   V14 Sport-tree sidebar
   V15 Home hero/grid      V16 Betslip  V17 Login page   V18 Misc
   ===================================================================== */

/* ---------- V12. HEADER — black 2-row shell + gold nav strip + inline login ----------
   BLUEPRINT.md §4: ".header.full-wrap: padding 20px 0 0, height 74px" (empirically
   measured on the live reference at 1440 viewport) — the raw vikrant247.css bundle's
   literal ".header.full-wrap{height:54px}" rule (also loaded, for the regions that use
   its exact selectors) is a narrower/mobile-context value; force the reference's real
   desktop height here so the 55px logo has room and never overlaps the #tabMenu nav
   strip that now sits as a SIBLING right below (not nested — see Header.jsx). */
.vik-header { height: auto !important; min-height: 74px !important; }
.vik-header, .vik-header .header-top { background-color: #000000 !important; }
.vik-header .logo-header img { height: 55px !important; max-height: 55px !important; width: auto !important; max-width: 150px; object-fit: contain; }

.vik-header .search-box-container.d-none.d-xl-block { margin-left: 18px; }
.vik-header .search-box {
  background: #ffffff !important; border-radius: 4px !important; box-shadow: inset 0 1px 0 rgba(0,0,0,.5) !important;
  border: none !important; height: 26px; display: flex; align-items: center; width: 220px;
}
.vik-header .search-box .form-control {
  background: transparent !important; border: none !important; color: #1e1e1e !important;
  height: 24px !important; font-size: 12px !important; padding: 0 8px !important; box-shadow: none !important;
}
.vik-header .search-box .form-control::placeholder { color: #888 !important; }
.vik-header .search-box a { color: #888 !important; padding-right: 8px; }

.vik-inline-login { align-items: center !important; gap: 6px; margin-left: 16px; }
.vik-inline-login input {
  height: 26px; width: 108px; border-radius: 4px; border: none; padding: 0 8px; font-size: 12px;
  background: #ffffff; color: #1e1e1e; box-shadow: inset 0 1px 0 rgba(0,0,0,.5);
}
.vik-inline-login input::placeholder { color: #888; }
.vik-login-btn, .btn-king-signin {
  height: 26px; padding: 0 16px; border-radius: 4px; border: none; cursor: pointer;
  background: linear-gradient(-180deg,#f72424 0%,#bb1c00 100%) !important; color: #ffffff !important;
  font-weight: 700 !important; font-size: 12px !important; white-space: nowrap;
}
.vik-login-btn:disabled { opacity: .7; cursor: default; }
.vik-header .btn-king-signup { display: none !important; } /* Vikrant: agent-issued accounts, no Sign Up */

.vik-header .header-rules a.rules-link { color: #ffb600 !important; }
.vik-header .header-rules a.rules-link:hover { color: #ffffff !important; }

.vik-header .user-balance span { color: rgba(255,255,255,.65) !important; }
.vik-header .user-balance b { color: #ffb600 !important; }

/* gold nav strip, own row directly under the black bar (BLUEPRINT.md §3) */
.vik-navstrip {
  background: #14181d !important; border-top: 1px solid rgba(255,182,0,.25);
  border-bottom: 2px solid #ffb600; height: 30px; min-height: 30px; padding: 0 20px;
  align-items: center !important; gap: 0;
}
.vik-navstrip .nav-link {
  color: #ffb600 !important; font-weight: 700 !important; font-size: 12px !important;
  text-transform: uppercase; padding: 0 10px !important; height: 30px; line-height: 30px;
  display: inline-flex !important; align-items: center;
}
.vik-navstrip .nav-link:hover { color: #ffffff !important; background: rgba(255,255,255,.08); }
.vik-navstrip-news {
  margin-left: auto; flex: 0 1 260px; min-width: 0; overflow: hidden;
  color: rgba(255,255,255,.55); font-size: 11px;
}

/* ---------- V13. FOOTER — WhatsApp support, legal link row, license paragraph ---------- */
.vik-footer { background: #e5e5e5 !important; padding: 22px 16px 12px; text-align: center; border-top: 1px solid #d8d8d8; }
.vik-support-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }
.vik-support-whatsapp img { width: 30px; height: 30px; border-radius: 50%; background: #25D366; padding: 5px; }
.vik-support-text { color: #2789ce !important; font-size: 13px; line-height: 22px; text-decoration: underline; }
.vik-license-text {
  max-width: 900px; margin: 0 auto 12px; font-size: 11.5px; color: rgba(0,0,0,.65); line-height: 1.6;
}
.vik-browser-note { font-size: 11px; color: rgba(0,0,0,.55); margin-bottom: 12px; }
.vik-policy-link {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; list-style: none;
  padding: 0; margin: 0 0 14px;
}
.vik-policy-link a { color: #1a5fb4 !important; font-size: 12px; cursor: pointer; text-decoration: none; }
.vik-policy-link a:hover { text-decoration: underline; }
.vik-social-icons { display: flex; justify-content: center; gap: 12px; margin-top: 4px; }
.vik-footer.footer-login { padding-bottom: 22px; }

/* ---------- V14. SPORT-TREE SIDEBAR (.king-has-tree) — Vikrant #subMenu: 243px, white,
   breadcrumb + drill-down list, on sport-listing/event pages only (home has none). ---------- */
@media (min-width: 1200px) {
  .king-has-tree { flex-wrap: nowrap !important; }
  .king-has-tree > .sidebar.left-sidebar { flex: 0 0 243px !important; width: 243px !important; }
  .king-has-tree .center-main-container { width: calc(100% - 243px) !important; }
}
.king-has-tree .sidebar.left-sidebar {
  background: #ffffff !important; color: #1e1e1e !important; border-right: 1px solid #e0e0e0;
}
.king-has-tree .sidebar.left-sidebar .accordion-item,
.king-has-tree .sidebar.left-sidebar .accordion-body {
  background: #ffffff !important; color: #1e1e1e !important; border-color: #e8e8e8 !important;
}
.king-has-tree .sidebar.left-sidebar .sidebar-title,
.king-has-tree .sidebar.left-sidebar .accordion-button,
.king-has-tree .left-sidebar .sidebar-title button.accordion-button,
.king-has-tree .left-sidebar .sidebar-title button.accordion-button:not(.collapsed) {
  background: #1e1e1e !important; color: #ffb600 !important; font-weight: 700 !important;
  text-transform: uppercase; font-size: 12px !important;
}
.king-has-tree .sidebar.left-sidebar a,
.king-has-tree .sidebar.left-sidebar .nav-link {
  color: #1e1e1e !important;
  background: #ffffff !important;
  border-bottom-color: #ececec !important;
}
.king-has-tree .sidebar.left-sidebar a:hover,
.king-has-tree .sidebar.left-sidebar .nav-link:hover {
  color: #ffb600 !important; background: #f5f5f5 !important;
}
.king-has-tree .sidebar.left-sidebar .fa-plus-square,
.king-has-tree .sidebar.left-sidebar .fa-minus-square,
.king-has-tree .sidebar.left-sidebar i {
  color: #1e1e1e !important;
}
/* Breadcrumb ("Sports" -> sport -> competition), BLUEPRINT.md §4 Sidebar / reference's
   `.path` element — bold black-on-white strip at the top of the sport-tree column. */
.king-has-tree .sidebar.left-sidebar .path {
  font-weight: 700; font-size: 12px; text-transform: uppercase;
  padding: 8px 10px; border-bottom: 1px solid #e0e0e0; background: #fff; color: #1e1e1e;
}
/* Reference's `#listBoard` drill-down rows are a flat "Go"-arrow expand list (gold
   chevron pointing right on every selectable row) rather than the +/- square icons this
   tree otherwise uses — add the chevron affordance without touching the existing
   expand/collapse click handlers (presentation only). */
.king-has-tree .sidebar.left-sidebar li.nav-item > a.nav-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px !important; font-size: 12px;
}
.king-has-tree .sidebar.left-sidebar li.nav-item > a.nav-link::after {
  content: ""; width: 6px; height: 6px; flex: 0 0 6px;
  border-top: 2px solid #ffb600; border-right: 2px solid #ffb600;
  transform: rotate(45deg); margin-left: 6px; opacity: .8;
}

/* ---------- V15. HOME — hero KV (single, ~4:1) + casino-lobby tile grid, 1069px column,
   NO sidebar (BLUEPRINT.md §3: home route is 1-column) ---------- */
.home-page .center-container, .kc-wrap, .vik-hero { max-width: 1069px; margin-left: auto; margin-right: auto; }
.home-page .center-container { padding: 0 8px; }

/* ---------- V16. BETSLIP (.place-bet-box popover) — Vikrant slip-wrap look: white panel,
   Back/Lay column header, dark "Cancel"/gold-on-dark "Submit" ---------- */
.place-bet-box {
  background: #ffffff !important; border: 1px solid #e0e0e0 !important; box-shadow: 0 4px 16px rgba(0,0,0,.18) !important;
}
.place-bet-box-header {
  background: #f4f4f4 !important; color: #1e1e1e !important; font-weight: 700 !important; text-transform: uppercase; font-size: 11px !important;
}
.place-bet-box.back .place-bet-box-header .place-bet-for { color: #1a6fb0 !important; }
.place-bet-box.lay .place-bet-box-header .place-bet-for { color: #b0284a !important; }
.place-bet-box .place-bet-buttons .btn-place-bet {
  background: #444444 !important; color: #ffb600 !important; border: 1px solid #222 !important;
  border-radius: 4px !important; box-shadow: inset 0 2px 0 rgba(0,0,0,.1) !important; font-weight: 700 !important;
}
.place-bet-box .place-bet-action-buttons .btn-success {
  background: linear-gradient(180deg, #474747 0%, #070707 100%) !important; color: #ffb600 !important; border: none !important;
}
.place-bet-box .place-bet-action-buttons .btn-danger {
  background: #ffffff !important; color: #1e1e1e !important; border: 1px solid #cccccc !important;
}

/* ---------- V17. LOGIN PAGE — gold/black shell around the white login card (Vikrant
   login-gate modal palette), same page/route/handlers, presentation only ---------- */
.login-page { background: #eeeeee !important; }
.login-box .logo-login img { max-height: 55px; }
.login-form { border-radius: 8px !important; }
.login-title { color: #1e1e1e !important; }

/* ---------- V18. MISC ---------- */
.header-rules b { font-weight: 700; }
@media (max-width: 1199px) {
  .vik-navstrip { display: none !important; }
}

/* ---------- V20. HOME CASINO GRID on mobile — vikrant247.css's own
   .gamehall-wrap-simple grid (display:grid; grid-template-columns:1fr 1fr 1fr 1fr) is
   loaded desktop-only (media="(min-width:1200px)" in index.html — that bundle has zero
   mobile breakpoints, it's a separate reference app shell). Give the SAME class its own
   2-column mobile grid here so entrance tiles don't collapse to single-column full-bleed
   stacking; .entrance-title/.entrance-half positioning (which IS mobile-safe, no fixed
   px) still comes from the reference bundle's non-media-gated rules loaded above. ---------- */
@media (max-width: 1199px) {
  .gamehall-wrap-simple { display: grid !important; grid-template-columns: 1fr 1fr; grid-gap: 6px; padding: 0 4px; }
  .gamehall-wrap-simple a { position: relative; grid-column: span 1; overflow: hidden; border-radius: 2px; }
  .gamehall-wrap-simple a:before { content: ""; padding-top: 77.7777777778%; float: left; }
  .gamehall-wrap-simple a img,
  .gamehall-wrap-simple a .entrance-placeholder-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* Tiles with no fetched provider art (rate-limit discipline in Phase A capture) — flat
     placeholder fill instead of transparent-over-page, same shimmer-grey the reference's
     own lazy-load state uses (desktop gets it from vikrant247.css's ".gamehall-wrap-simple
     a:after" shimmer, which is also desktop-gated). */
  .gamehall-wrap-simple a .entrance-placeholder-art { background: #ced5da; }
  /* .entrance-title/dt/dd are also gated behind the desktop-only reference stylesheet
     (media="(min-width:1200px)") — same values, scaled down for the smaller mobile tile. */
  .entrance-title {
    position: absolute; z-index: 4; bottom: 0; left: 0; width: 100%; height: 22px;
    background-image: linear-gradient(270deg, rgba(69,94,104,0) 4%, #000000 97%);
    border-bottom: 3px solid #ffb80c; display: flex; flex-wrap: wrap; justify-content: space-between;
  }
  .entrance-title dt { flex: 1; font-size: 11px; line-height: 22px; text-indent: 6px; color: #fff; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .entrance-title dd {
    width: 52px; line-height: 22px; height: 100%;
    background-image: url('data:image/svg+xml,<svg width="16" height="26" xmlns="http://www.w3.org/2000/svg"><path d="M11.853 0H16v26H0L11.853 0z" fill="rgb(255, 184, 12)" fill-rule="evenodd"/></svg>');
    background-size: contain; background-repeat: no-repeat; background-position: left;
    text-indent: 9px; font-size: 9px; font-weight: bold; color: #000 !important;
  }
  .on_live { position: absolute; z-index: 5; top: 4px; left: 4px; }
  .on_live .live_icon {
    background: linear-gradient(180deg, #fb3434 0%, #e80505 100%); color: #fff; font-size: 9px;
    font-weight: bold; padding: 2px 6px; border-radius: 3px; text-indent: 0; display: block;
  }
}

/* ---------- V19. PublicSports.css guest listing — its own .ks-odd back/lay colors are
   hardcoded King123 blue/salmon (#84c4ff/#ff9384) with !important in a component
   stylesheet that may load AFTER theme.css in the bundle; out-specificity it explicitly
   rather than rely on source order. */
.ks-sports .ks-odd.back { background: #72bbef !important; }
.ks-sports .ks-odd.lay { background: #faa9ba !important; }
.ks-sports .ks-tab.on { background: #1e1e1e !important; color: #ffb600 !important; border-color: #ffb600 !important; }

/* ---------- V21. BET SLIP persistent panel (BLUEPRINT.md §4 "Bet slip panel" —
   .slip-wrap.no-open-bet_slip, 365x796, white bg; header "Bet Slip"; empty state
   #noBetSlipInfo). EventRightSidebar now always mounts .place-bet-container (previously
   only appeared once a market was clicked) — style it as the reference's persistent
   white slip column instead of King123's dark popover-card look. ---------- */
.right-sidebar .place-bet-container {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
}
.right-sidebar .place-bet-container .sidebar-title {
  background: #1e1e1e !important;
}
.right-sidebar .place-bet-container .sidebar-title h4 {
  color: #ffb600 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
/* ---------- V22. Nav-strip right zone: Time Zone + Setting gear (guest), BLUEPRINT.md §4
   Primary nav — matches screens/login-desktop.png right-hand cluster. ---------- */
.vik-navstrip-settings {
  align-items: center; gap: 14px; margin-left: auto; padding: 0 12px;
  font-size: 11px; color: #cfcfcf; white-space: nowrap;
}
.vik-navstrip-settings .vik-timezone { color: #cfcfcf; }
.vik-navstrip-settings .vik-setting-gear { color: #ffb600 !important; font-weight: 700; }
.vik-navstrip-settings .vik-setting-gear i { margin-left: 3px; }

.right-sidebar .place-bet-container .no-bet-slip-info {
  padding: 20px 15px;
  color: #767676;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  background: #ffffff;
}
.ks-sports .ks-race-t.live, .ks-sports .ks-inplay { color: #d0021b !important; }