/* =====================================================================
   99EXCH — LIGHT authenticated-app theme (pixel-clone rewrite)
   Base = react-srk style.css/responsive.css, UNTOUCHED. This file is the
   ONLY override layer, loaded LAST so it wins the cascade.
   Reference: NINE9EXCH_AUTH/ recon (design-system.md, screenshots).

   IMPORTANT: style.css's default :root already ships a LIGHT theme
   (--bg-body:#fff, --bg-sidebar:#cccccc, --text-sidebar:#000, --bg-table,
   --text-table:#333, and .back/.lay/.back1/.back2/.lay1/.lay2 are ALREADY
   #72bbef/#faa9ba at 100/75/50% opacity — the exact 99exch values). Only
   --bg-primary/--bg-secondary (+ alpha variants) are overridden, in
   index.html's KING_THEME script, to #1A3DA6 / #0F2462. This file's job is
   to (a) remove every King123 black/gold override that used to fight that
   light default, (b) build the header's 3-row chrome + sport-nav, (c) show
   the real text sidebar (was hidden entirely under King123's icon rail),
   (d) give market/card headers the rounded-top navy bar, (e) retint the
   bet slip per back/lay side, (f) recolor account/footer/auth chrome.

   Sections:
   1. Tokens          2. Fonts             3. Header (3 rows) + sport-nav
   4. Sidebar (Others/All Sports)          5. Home odds board
   6. Event page (market cards, cashout, fancy)   7. Bet slip
   8. Account pages   9. Auth pages        10. Footer
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  --exch-blue: #1A3DA6;      /* header bar / sidebar widget header / footer */
  --exch-navy: #0F2462;      /* market/card title bars, sport-nav row, marquee row */
  --exch-back: #72BBEF;      /* back price (100/75/50% = best/2nd/3rd) */
  --exch-lay: #FAA9BA;       /* lay price */
  --exch-green: #28A745;     /* Submit / EDIT STAKE */
  --exch-amber: #F5A623;     /* MIN STAKE */
  --exch-red: #DC3545;       /* CLEAR / SUSPENDED */
  --exch-sidebar-bg: #CCCCCC;
  --exch-sidebar-text: #273A47;
}

body { background: #ffffff !important; }

/* ---------- 2. FONTS — Roboto Condensed everywhere (99exch spec) ---------- */
html, 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: "Roboto Condensed", system-ui, -apple-system, "Segoe UI", 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 — 3 stacked rows: logo/balance | marquee | sport-nav ---------- */
.header, .header-top { background-color: var(--exch-blue) !important; }
.header { border: 0 !important; }

/* Row 1: logo | search/rules/balance/user — single line, no wrap */
.header .header-top {
  display: flex !important; flex-wrap: nowrap !important; align-items: center;
  gap: 12px; height: auto !important; min-height: 58px; position: relative;
}
.header .logo-header { flex: 0 0 auto; }
.header .logo-header img { max-height: 42px !important; width: auto !important; max-width: 170px; }
.header .user-details { margin-left: auto; flex: 0 0 auto; }
.header .user-balance { text-align: right; line-height: 1.3; }
.header .user-balance span { color: #fff; opacity: .85; margin-right: 4px; font-size: 12px; }
.header .user-balance b { color: #fff; font-weight: 700; }
.header .user-balance div:last-child b { text-decoration: underline; }

/* Row 2: promo marquee — its own full-width centered bar under the logo row */
.header .news {
  position: static !important; width: 100% !important; order: 3;
  background: var(--exch-navy); color: #fff; font-style: normal;
  padding: 4px 12px; text-align: center; font-size: 12px; font-weight: 600;
  border-top: 1px solid rgba(255,255,255,.12);
}
.header .news marquee { color: #fff; }

/* Row 3: sport-nav bar — full-width, horizontal-scroll, dark navy */
.king-topnav {
  display: flex !important; flex: 1 1 100%; align-items: center; gap: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; min-width: 0; white-space: nowrap;
  order: 4; width: 100%; background: var(--exch-navy);
}
.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: 700;
  padding: 9px 12px !important; white-space: nowrap; letter-spacing: .2px; display: inline-block;
}
.king-topnav .nav-link:hover, .king-topnav a:hover { background: rgba(255,255,255,.1); }
.king-topnav .nav-link.exch-highlight { background: #E3342F !important; color: #fff !important; }

/* Mehmaan ke Signup / Login — naap reference /m/home se (div.auth-mob 175x40):
   Signup 67x40 navy (#0F2462) safed text, Login 60x40 safed kaala text, dono
   13px/400 (BOLD nahi, uppercase nahi), padding 0 16px, beech me 5px, kona 0.
   Pehle ye 30px ke uppercase-bold 4px-radius pill the — wahi farq dikh raha tha. */
.king-auth-btns { display: flex; align-items: center; gap: 5px; }
.btn-king-signin, .btn-king-signup {
  height: 40px; min-width: 0; padding: 0 16px; border-radius: 0; font-size: 13px;
  font-weight: 400; text-transform: none; cursor: pointer; line-height: 40px;
  border: 0; transition: none; white-space: nowrap;
}
.btn-king-signup { background: var(--exch-navy, #0F2462); color: #fff; }
.btn-king-signin { background: #fff; color: #000; }
.btn-king-signin:hover { background: #fff; color: #000; }
.btn-king-signup:hover { background: var(--exch-navy, #0F2462); color: #fff; }
.header-deposit-withdraw-btn a, .header-desktop-deposit-withdraw-btn a { color: #fff !important; }
.header-rules a, .rules-link { color: #fff !important; }
.search-box i { color: #fff !important; }

/* ---------- 4. BUTTONS + LINKS (generic) ---------- */
.btn-primary, .btn-home-login, .btn-add {
  background: var(--exch-blue) !important; color: #fff !important; border: 1px solid var(--exch-blue) !important;
  font-weight: 700 !important; border-radius: 4px !important;
}
.btn-primary:hover, .btn-home-login:hover { filter: brightness(1.08); color: #fff !important; }
a { color: var(--exch-blue); }
.btn-outline-primary, .back-link, .back-btn, .btn-default {
  color: var(--exch-blue) !important; border-color: var(--exch-blue) !important;
}
.detail-page .btn-place-bet, .bet-place-btn, .place-bet-btn {
  background: var(--exch-blue) !important; border-color: var(--exch-blue) !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(--exch-navy) !important; border-color: var(--exch-navy) !important; color: #fff !important;
}
/* Cashout / Loss Cut — VISIBLE (99exch shows these in every market header) */
.market-title .btn-success, .detail-page .cashout, .detail-page .btn-cashout { display: inline-block !important; }

/* ---------- 5. LEFT SIDEBAR — light-gray "Others" + "All Sports" widgets ----------
   NOTE: .center-main-container width (280/210/240px offset by breakpoint, 100% on
   mobile where .left-sidebar hides) is ALREADY correct in style.css/responsive.css —
   intentionally not overridden here so those breakpoints keep working. */
.left-sidebar, .sidebar.left-sidebar { background: var(--exch-sidebar-bg); }
.sidebar-box .accordion-body, .left-sidebar .accordion-body { background: var(--exch-sidebar-bg); }
.sidebar-title, .left-sidebar .sidebar-title {
  background-color: var(--exch-blue) !important; color: #fff !important;
}
.sidebar-title h2 button, .sidebar-title button.accordion-button {
  color: #fff !important; font-weight: 700; text-transform: uppercase; font-size: 13px; width: 100%; text-align: left;
}
.sidebar .nav-item .nav-link, .left-sidebar .nav-item .nav-link {
  background: transparent !important; color: var(--exch-sidebar-text) !important;
  border-bottom: 1px solid rgba(0,0,0,.15) !important; font-weight: 500; font-size: 13px; padding: 6px 12px;
}
.sidebar .nav-item .nav-link:hover, .left-sidebar .nav-item .nav-link:hover { background: rgba(255,255,255,.35) !important; }
.left-sidebar .accordion-button::after, .left-sidebar .accordion-button:not(.collapsed)::after { color: #fff !important; }
.menu-box .dropdown-toggle.nav-link i { color: var(--exch-blue); }

/* ---------- 6. HOME ODDS BOARD (LatestEventsBar / SportsTab / bet-table) ---------- */
/* event-card scroller: navy cards, white text */
.latest-event-item { background: var(--exch-navy) !important; border-radius: 2px; }
.latest-event-item a, .latest-event-item a span { color: #fff !important; }
.latest-event .arrow-left, .latest-event .arrow-right { background: var(--exch-navy) !important; color: #fff; }

/* sport tab strip: gray pills, active = navy */
.exch-tabs-row { display: flex; flex-wrap: wrap; align-items: center; width: 100%; gap: 8px; padding: 6px 0; }
.exch-tabs-row .sports-tab, .exch-inplay-pin { flex: 0 1 auto; overflow-x: auto; }
.exch-inplay-pin .nav-link { background: #1a1a1a !important; }
.exch-inplay-pin .nav-link.active { background: var(--exch-navy) !important; }
/* ---- FILTER ROW (LIVE / VIRTUAL / PREMIUM + View by) ----
   Naap reference /m/home se: ul.live_virtual BAAYEN (196x26), har label 12px/400
   #1A3DA6 padding 0 10px, uske pehle 13x13 ka radio; div.filter-ct DAAYEN, uska
   label "View by:" 12px/600 kaala aur select 108x23 bg #1A3DA6 safed text. */
.exch-filter-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 3px 5px; gap: 8px;
}
.exch-filter-row ul.live_virtual {
  display: flex; align-items: center; list-style: none; margin: 0; padding: 0;
  height: 26px; flex: 0 0 auto;
}
.exch-filter-row ul.live_virtual li { display: flex; align-items: center; height: 26px; }
.exch-filter-row ul.live_virtual input[type="checkbox"] {
  width: 13px; height: 13px; margin: 0; flex: 0 0 13px; accent-color: var(--exch-blue, #1A3DA6);
}
.exch-filter-row ul.live_virtual label {
  display: flex; align-items: center; height: 26px; margin: 0; padding: 0 10px;
  font-size: 12px; font-weight: 400; line-height: 24px; border-radius: 25px;
  color: var(--exch-blue, #1A3DA6);
  text-transform: none; white-space: nowrap; cursor: pointer;
}
.exch-filter-row .filter-ct {
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  flex: 1 1 auto; min-width: 0; text-align: right;
}
.exch-filter-row .filter-ct label {
  margin: 0; font-size: 12px; font-weight: 600; color: #000; white-space: nowrap;
}
.exch-filter-row .filter-ct select {
  width: 108px; max-width: 45vw; height: 23px; padding: 2px;
  background: var(--exch-blue, #1A3DA6); color: #fff;
  border: 1px solid var(--exch-blue, #1A3DA6); border-radius: 0;
  font-size: 12px; line-height: 1;
}
.center-container .nav.sports-tab { background: transparent !important; gap: 3px; padding: 0; flex-wrap: nowrap !important; }
.sports-tab .nav-item .nav-link {
  background: #E4E4E4; color: #333; font-weight: 700; font-size: 12px; text-transform: uppercase;
  padding: 8px 14px; border-radius: 2px; margin-right: 2px; white-space: nowrap;
}
.sports-tab .nav-item .nav-link.active { background: var(--exch-navy); color: #fff; }

/* odds table */
.bet-table { background: #ffffff !important; border: 1px solid var(--table-border); }
.bet-table-header { background: #ffffff; }
.bet-table-header .bet-nation-odd b { color: #333; }
/* Reference par har event ka block ek hi halke rang par baithta hai (#f1f5f8,
   naapa `.game-list` se) — ek-chhod-ek safed/#fafafa ki patti wahan hai hi nahi. */
@media (max-width: 1199px) {
  .bet-table-row { background: #f1f5f8 !important; }
  .bet-table-row:nth-child(even) { background: #f1f5f8 !important; }
}
.bet-nation-name .bet-nation-game-name { color: #1a1a1a !important; font-weight: 600; }
.bet-nation-odd .odd-box.back, .bet-nation-odd .odd-box.lay { border-radius: 0; }
.bet-nation-odd .odd-box .bet-odd { color: #14213a; font-weight: 700; }
.game-icon .active { background-color: #2ecc71 !important; box-shadow: 0 0 0 2px rgba(46,204,113,.25); }

/* ---------- 7. EVENT PAGE — rounded-top navy header, square back/lay, fancy ---------- */
.market-title {
  background: var(--exch-navy) !important; color: #fff !important;
  border-radius: 3px 3px 0 0; font-weight: 700; text-transform: none;
  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; }
.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,.6); font-weight: 600; }

/* header row: Back/Lay column labels, text-only */
.market-header { background: #f2f2f2 !important; border-bottom: 1px solid var(--table-border); }
.market-header .market-odd-box.back {
  background: transparent !important; color: var(--exch-blue) !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: #C2185B !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; }
.market-header .market-nation-name { display: none !important; }

/* BODY odds cells: square, 3-depth opacity (base .back/.back1/.back2/.lay/.lay1/.lay2
   already carry the exact #72bbef/#faa9ba values at 100/75/50% — just square + no margin). */
.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: 0 !important; margin: 0 !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: #14213a !important;
}
.market-odd { font-family: "Roboto Condensed", sans-serif !important; font-weight: 800 !important; }

@media (max-width: 991px) {
  .market-odd-box .market-odd { font-size: 12px !important; line-height: 15px !important; font-weight: 800 !important; }
  .market-odd-box .market-volume { font-size: 10px !important; }
}
@media (max-width: 1199px) {
  .market-odd-box.back1, .market-odd-box.back2,
  .market-odd-box.lay1, .market-odd-box.lay2 { display: none !important; }
  .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; }
}

/* fancy category tabs */
.king-fancy-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 2px 8px; margin-top: 6px;
  border-top: 1px solid var(--table-border);
}
.king-fancy-tabs .kft {
  padding: 8px 16px; border-radius: 2px 2px 0 0; border: 1px solid var(--table-border); border-bottom: none;
  background: #f2f2f2; color: #333; font-weight: 700; font-size: 13px;
  text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
.king-fancy-tabs .kft.on { background: var(--exch-navy); color: #fff; border-color: var(--exch-navy); }
.fancy-market .market-title, .fancy-market-title, .session-title {
  background: var(--exch-navy) !important; color: #fff !important; border-radius: 3px 3px 0 0;
}
.fancy-market { border-bottom: 1px solid var(--table-border) !important; }
.fancy-market .market-nation-name {
  font-family: "Roboto Condensed", sans-serif !important; text-transform: none !important;
  font-weight: 500 !important; font-size: 13px !important; line-height: 16px !important; color: #1a1a1a !important;
}
.fancy-min-max, .fancy-min-max-box, .market-remark { color: var(--exch-blue) !important; }
.fancy-min-max span { color: var(--exch-blue) !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; }
  .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; }
}
@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; }
}

/* ---------- 8. BET SLIP ("Place Bet") — back = light-blue tint, lay = light-pink tint ---------- */
.place-bet-box.back {
  background: #E7F3FC !important;
}
.place-bet-box.lay {
  background: #FCEAEE !important;
}
.place-bet-box.back .place-bet-box-body,
.place-bet-box.lay .place-bet-box-body,
.place-bet-box.back .place-bet-buttons,
.place-bet-box.lay .place-bet-buttons,
.place-bet-box.back .place-bet-action-buttons,
.place-bet-box.lay .place-bet-action-buttons {
  background: transparent;
}
/* quick-stake chips: bg #CCC, text #273A47, radius 4px (99exch spec) */
.place-bet-buttons .btn-place-bet {
  background-color: var(--exch-sidebar-bg) !important; color: var(--exch-sidebar-text) !important;
  border-radius: 4px !important; font-weight: 700;
}
.place-bet-buttons .btn-place-bet:hover { filter: brightness(.95); }
/* compact stake/odds inputs: white, 1px #CCC border, 12px (99exch spec) */
.place-bet-box-body input {
  background: #fff !important; border: 1px solid #CCCCCC !important; color: #14213a !important;
  font-size: 12px !important; border-radius: 2px;
}
.place-bet-for { position: relative; }
.exch-remove-selection { color: var(--exch-red); cursor: pointer; margin-right: 4px; font-size: 11px; }

/* Row A — MIN STAKE / MAX STAKE / EDIT STAKE / CLEAR: rectangular, color-coded, NOT pills */
.place-bet-action-buttons { gap: 3px; }
.place-bet-action-buttons .btn {
  border-radius: 3px !important; font-weight: 700; font-size: 11px; text-transform: uppercase;
  min-width: 0; width: calc(25% - 3px); padding: 0 2px;
}
.place-bet-action-buttons .btn-info.exch-min { background: var(--exch-amber) !important; border-color: var(--exch-amber) !important; color: #1a1a1a !important; }
.place-bet-action-buttons .btn-info.exch-max { background: var(--exch-navy) !important; border-color: var(--exch-navy) !important; color: #fff !important; }
.place-bet-action-buttons .btn-info:not(.exch-min):not(.exch-max) { background: var(--exch-green) !important; border-color: var(--exch-green) !important; color: #fff !important; }
.place-bet-action-buttons .btn-clear { background: var(--exch-red) !important; border-color: var(--exch-red) !important; color: #fff !important; }

/* Row B — Reset (pink pill) / Submit (green pill) */
.place-bet-final-buttons { display: flex; gap: 8px; padding: 6px 4px 8px; }
.place-bet-final-buttons .btn {
  height: 34px; font-weight: 700; font-size: 12px; text-transform: none; border: 0;
}
.place-bet-final-buttons .btn-danger {
  flex: 0 0 30%; border-radius: 20px !important; background: #FBD9DE !important; color: #B0294A !important;
}
.place-bet-final-buttons .btn-success {
  flex: 1 1 auto; border-radius: 20px !important; background: var(--exch-green) !important; color: #fff !important;
}
.right-sidebar .sidebar-title { border-radius: 3px 3px 0 0; }

/* ---------- 9. ACCOUNT PAGES (Statement / Bet History / Set Values / Change Password) ---------- */
.center-main-container input.form-control,
.center-main-container select.form-control,
.center-main-container .form-select {
  background: #fff !important; border: 1px solid #CCCCCC !important; color: #14213a !important;
  border-radius: 2px !important;
}
.center-main-container input.form-control::placeholder { color: rgba(0,0,0,.4) !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--exch-blue) !important; box-shadow: 0 0 0 .15rem rgba(26,61,166,.15) !important;
  background-color: #fff !important; color: #14213a !important;
}
.form-check-input:checked { background-color: var(--exch-blue) !important; border-color: var(--exch-blue) !important; }
thead th, .center-main-container thead th, .table-header {
  background: var(--exch-navy) !important; color: #fff !important; font-weight: 700 !important;
  border-color: var(--exch-navy) !important;
}
table, .table { color: #1a1a1a !important; }
.table td, .table th, tbody td { border-color: var(--table-border) !important; }
.nav-pills .nav-link.active, .nav-tabs .nav-link.active {
  background-color: var(--exch-blue) !important; color: #fff !important; border-color: var(--exch-blue) !important;
}
.nav-pills .nav-link, .nav-tabs .nav-link { color: #333; }
.nav-tabs { background-color: #f2f2f2 !important; }
.casino-sub-tab .nav-link.active, .casino-tab .nav-link.active, .provider-tab .nav-link.active {
  background-color: transparent !important; color: var(--exch-green) !important;
  border-bottom: 2px solid var(--exch-green) !important;
}
.report-amount, .report-date, .report-action, .detail-row .value { color: #1a1a1a; }
.error-msg { color: var(--exch-red); }

/* ---------- 10. AUTH PAGES — light card on the brand blue->navy gradient (already the base) ---------- */
.login-box, .register-box { width: 400px !important; max-width: 94% !important; }
.login-form, .register-form, .auth-box, .form-container {
  border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.25) !important;
}
.login-title, .login-form h4 { color: var(--exch-blue) !important; }
.login-btn, .signup-btn, .register-btn, .submit-btn {
  background: var(--exch-blue) !important; color: #fff !important;
  border: none !important; font-weight: 700 !important; border-radius: 4px;
}
.recaptchaTerms { color: rgba(0,0,0,.5) !important; font-size: 11px; }

/* ---------- 11. FOOTER — brand blue throughout ---------- */
/* ---- FOOTER — ranibook247 /m/home se NAAPA ----
   Reference ka poora footer sirf 119px ka hai aur SAFED hai:
     footer[390x119] bg #fff, 12px/400 kaala
       div.row.footer-other[390x85]
         ssl.png (100x50) + b "100% SAFE" (11px/700) + "Protected connection..." (11px/400)
         teen icon 35x35 (18+, gamecare, gt)
       p.text-center "© Copyright <saal>. All Rights Reserved." (12px/24 kaala)
   Hamare paas iske upar ek neela block tha (Our Game Providers + payment chips +
   Terms links + "24X7 Support" + social icons) — reference par uska koi wajood nahi,
   isliye wo poora band hai. Neeche ke do block (.footer-bottom / .footer-text) wahi
   hain jo reference me hain, bas ab safed aur usi naap par. */
.king-footer-band { display: none; }
.footer .footer-top { display: none; }
.footer, footer {
  background: #fff !important; color: #000; padding: 0; border: 0;
  font-size: 12px; font-weight: 400;
}
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 15px 0; background: #fff !important; border-top: 0;
}
.footer-bottom .secure-logo {
  display: flex; align-items: center; gap: 8px; color: #000;
  font-size: 11px; font-weight: 400; height: 50px;
}
.footer-bottom .secure-logo img { width: 100px; height: 50px; object-fit: contain; }
.footer-bottom .secure-logo b { color: #000; font-size: 11px; font-weight: 700; display: block; }
.footer-bottom .d-inline-block { display: flex; align-items: center; gap: 5px; }
.footer-bottom .d-inline-block img { width: 35px; height: 35px; object-fit: contain; }
.footer-bottom .d-inline-block a { line-height: 0; }
.footer-text { background: #fff; color: #000; padding: 0 15px 10px; }
.footer-text .text-center {
  color: #000; font-size: 12px; font-weight: 400; line-height: 24px; margin: 0; text-align: center;
}
.footer-text .foot-terms { color: #000; margin-left: 6px; font-size: 11px; text-decoration: underline; }

/* ---------- SUSPENDED overlay (base already: dark translucent + bold red uppercase text —
   this only re-applies the width tuning per market-grid so the banner doesn't stretch
   across the runner name column). ---------- */
.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; }
}

/* ---------- 12. EVENT-DETAIL SIDEBAR — COCKFIGHT cross-sell + 1-Click-Betting
   (reference: black cross-promo bar above "Live Match"; "live stream started" flag
   sits INSIDE the Live Match title bar, right-aligned; 1-Click-Betting is a plain
   white checkbox row, not a navy title bar). ---------- */
.exch-cockfight-banner { background: #000 !important; border-radius: 3px 3px 0 0; }
.exch-cockfight-banner span {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  padding: 8px 12px; color: #F5A623; font-weight: 700; font-size: 13px;
  text-decoration: underline; text-underline-offset: 2px;
}
.exch-cockfight-banner i { color: #F5A623; text-decoration: none; }

.sidebar-title.exch-one-click-toggle,
.exch-one-click-sec .exch-one-click-toggle {
  background: #fff !important; color: #1a1a1a !important;
  border-bottom: 1px solid var(--table-border);
}
.exch-one-click-sec { background: #fff; }
.exch-one-click-toggle {
  display: flex; align-items: center; padding: 8px 12px; cursor: pointer;
}
.exch-one-click-toggle .form-check { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.exch-one-click-toggle .form-check-input { margin: 0; cursor: pointer; }
.exch-one-click-toggle span { font-weight: 600; font-size: 13px; color: #1a1a1a; }
.exch-one-click-values { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px; background: #f2f2f2; }
.exch-one-click-values button {
  background: var(--exch-sidebar-bg); color: var(--exch-sidebar-text); border: 0;
  border-radius: 4px; font-weight: 700; font-size: 11px; padding: 6px 10px; cursor: pointer;
}
.exch-one-click-values button.active { background: var(--exch-blue); color: #fff; }

.exch-live-stream-flag {
  color: #fff; font-size: 11px; font-weight: 500; text-transform: none;
  display: flex; align-items: center; gap: 4px; margin-left: auto;
}
.right-sidebar .sidebar-title { display: flex; align-items: center; justify-content: space-between; }

/* ---------- Casino tiles — dark bottom label bar, provider badge (unchanged from King123
   polish, still matches the 99exch casino-lobby tile spec: image + solid dark bottom bar). ---- */
.casino-list-item a { border-radius: 4px; 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;
}

/* ---------- 13. CASINO LOBBY (KingCasino.jsx category tabs + grid) — retint the
   King123 dark/gold lobby to the 99exch navy/blue light chrome (design-system.md:
   "ALL, RECENT, FANTASY11, MAC88 LIVE..." tab strip on the dark-navy title-bar
   color, light content below, search box top-right, 6 tiles/row desktop grid —
   base .kc-grid/.kc-game sizing untouched, only the surrounding chrome recolored). */
.kc-tabs { background: var(--exch-navy) !important; border-color: var(--exch-navy) !important; }
.kc-tab { color: rgba(255,255,255,.75) !important; }
.kc-tab.on { color: #fff !important; border-color: #fff !important; background: rgba(255,255,255,.12) !important; }
.kc-tab:hover { color: #fff !important; }
.kc-search { background: #fff !important; border-color: #CCCCCC !important; color: #14213a !important; }
.kc-search input { color: #14213a !important; }
.kc-search input::placeholder { color: #888 !important; }
.kc-search i { color: #14213a; }
.kc-more button {
  background: var(--exch-blue) !important; color: #fff !important; background-image: none !important;
}
.kc-muted { color: #666 !important; }

/* ---------- 14. RULES — accordion (see RulesModal.jsx: replaced left-tab-strip +
   single-pane with a real accordion to match the reference's stacked, numbered-red-
   text rule sections, first one pre-expanded). ---------- */
.rules-modal .modal-body { display: block !important; max-height: calc(90vh - 120px); overflow-y: auto; }
.exch-rules-accordion .accordion-item { border: 1px solid var(--table-border); border-radius: 0; margin-bottom: 2px; }
.exch-rules-accordion .accordion-button {
  background: var(--exch-navy) !important; color: #fff !important; font-weight: 700;
  box-shadow: none !important; border-radius: 3px 3px 0 0 !important;
}
.exch-rules-accordion .accordion-button:not(.collapsed) { border-radius: 3px 3px 0 0 !important; }
.exch-rules-accordion .accordion-button::after { filter: invert(1) grayscale(1) brightness(2); }
.exch-rules-accordion .accordion-body { background: #fff; padding: 0; }
.exch-rules-accordion .rules-content-title { display: none; } /* accordion header already carries the category name */
.exch-rules-accordion .rules-content-desc { padding: 12px 16px; color: #c0392b; font-weight: 500; font-size: 13px; line-height: 1.6; }

/* =====================================================================
   13. LOGIN — ranibook247 reference ka look (owner 2026-09-14)
   Reference: https://ranibook247.com/m/login  (mobile pehle, wahi zyada
   important hai) aur /login (desktop) — dono EK hi component hain, bas
   breakpoint par styling badalti hai.

   Rang pehle se sahi the: reference ki theme.css me
   --theme1-bg:#1a3da6 / --theme2-bg:#0f2462 hai, jo hamare
   --exch-blue / --exch-navy se hu-ba-hu milta hai (dono ek hi
   white-label template family se hain). Isliye yahan koi naya rang nahi
   gharha — sirf layout aur wo teen contact buttons.

   Reference se naape gaye exact values:
     Login / Login with Demo ID  -> desktop #1a3da6, h 38px, radius 4px
     Download .apk               -> #0f2462, h 47px, radius 5px, 18px
     Contact On Whatsapp         -> #0f5b59, h 42px, radius 5px, 18px
     Share This Apk to Friend    -> #4b278b, h 42px, radius 5px, 18px
   ===================================================================== */

.login-fp-row { margin: -6px 0 12px; }
.login-fp {
  color: #4a6cf7; font-size: 14px; text-decoration: none;
}
.login-fp:hover { text-decoration: underline; }
.login-fp-static { cursor: default; }

/* ---- contact block (telegram + 3 buttons) ---- */
.login-contact-block { margin-top: 10px; }

.social_connect {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 0 12px; margin-top: 8px;
  border-top: 1px dashed #9aa7c7;
}
.social_connect .handicon { color: #8794b4; font-size: 18px; }
.social_connect a {
  display: inline-flex; align-items: center; gap: 6px;
  color: #111; font-weight: 700; font-size: 13px; text-decoration: none;
}
.social_connect .tg-icon { color: #2AABEE; font-size: 24px; }

/* teeno buttons ka common shape — reference par ye full-width, icon-left,
   text-center, chevron/download-right wale bade buttons hain */
.login-apk-btn, .login-wa-btn, .login-share-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; margin-top: 10px; padding: 0 14px;
  border: none; border-radius: 5px;
  color: #fff !important; font-size: 18px; font-weight: 400;
  text-decoration: none; cursor: pointer;
}
.login-apk-btn  { background: var(--exch-navy, #0F2462) !important; height: 47px; }
.login-wa-btn   { background: #0F5B59 !important; height: 42px; }
.login-share-btn{ background: #4B278B !important; height: 42px; }
.login-apk-btn:hover, .login-wa-btn:hover, .login-share-btn:hover { filter: brightness(1.12); color: #fff !important; }

/* bada icon left, chhota chevron right, text beech me */
.login-apk-btn > i:first-child,
.login-wa-btn  > i:first-child,
.login-share-btn > i:first-child { font-size: 24px; flex: 0 0 auto; }
.login-apk-btn > span, .login-wa-btn > span, .login-share-btn > span { flex: 1 1 auto; text-align: center; }
.login-apk-btn > i:last-child,
.login-wa-btn  > i:last-child,
.login-share-btn > i:last-child { font-size: 16px; flex: 0 0 auto; opacity: .95; }

/* ---- MOBILE (<=767px) — reference ka /m/login look ----
   Wahan card par "LOGIN" heading nahi hoti, inputs sirf neeche se lined
   hote hain (box nahi), aur dono login buttons navy ho jaate hain. */
@media (max-width: 767px) {
  .login-form .login-title, .login-box .login-title { display: none; }

  .login-box .form-control {
    border: none !important; border-bottom: 1px solid #cfd6e4 !important;
    border-radius: 0 !important; background: transparent !important;
    padding-left: 0 !important; height: 44px; font-size: 15px;
  }
  .login-box .form-control:focus {
    box-shadow: none !important; border-bottom-color: var(--exch-blue, #1A3DA6) !important;
  }
  /* Reference ke /m/login par input rows bilkul saaf hain — sirf placeholder aur ek
     patli underline, koi user/key icon nahi (icons wahan sirf desktop /login par hain).
     Isliye mobile par icon ka box poora hata dete hain, warna underline uske neeche
     tootati hui dikhti hai. */
  .login-box .input-group-text { display: none !important; }

  .login-btn {
    background: var(--exch-navy, #0F2462) !important;
    height: 44px; font-size: 16px;
  }
}

/* ---------------------------------------------------------------------
   13b. LOGIN — DESKTOP (>=768px), ranibook247 /login se naapa gaya
   Owner 2026-09-14: "desktop ka bhi bnao ... desktop m bhi kossi rehe
   same krne ka".

   Background gradient pehle se hu-ba-hu tha —
   linear-gradient(#1a3da6, #0f2462) dono jagah. To yahan sirf card ki
   naap, input ka shape aur spacing reference par laayi gayi hai.

   Reference ke naape hue numbers (1440x900 par):
     card        315px chauda, padding 20, radius 4, koi shadow nahi
     logo        263x65, card ke upar
     h4 LOGIN    24px / weight 500 / #1a3da6 / niche 8px
     input       38px unchi, radius 4, border #ced4da, icon ANDAR right
     form gap    inputs ke beech 20px
     Login btn   38px, #1a3da6, radius 4; demo button se gap sirf 4px
     dashed line #1a3da6
     recaptcha   12.8px, #000, left-aligned
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* register-box ko chhoda hai — uska apna reference nahi hai */
  .login-box { width: 315px !important; }

  .login-box .logo-login img { width: 263px; max-width: 100%; }

  .login-box .login-form {
    border-radius: 4px !important;
    box-shadow: none !important;
    padding: 20px;
  }

  .login-box .login-title {
    font-size: 24px !important; font-weight: 500 !important;
    margin: 0 0 8px !important;
  }

  .login-box .input-group { margin-bottom: 20px !important; }

  .login-box .form-control {
    height: 38px; border-radius: 4px !important;
    border: 1px solid #ced4da !important;
    width: 100%; padding-right: 38px;   /* icon ke liye jagah */
  }

  /* Reference par icon ka apna grey box nahi hai — wo input ke ANDAR,
     dayein kinare par baitha hota hai. Markup badle bina wahi shakal. */
  .login-box .input-group-text {
    position: absolute; right: 0; top: 0; height: 38px; z-index: 5;
    display: flex; align-items: center; padding: 0 12px;
    background: transparent !important; border: none !important;
    border-radius: 0 4px 4px 0 !important; color: #111 !important;
  }

  .login-box .login-btn { height: 38px; border-radius: 4px !important; }
}

/* dono breakpoints par — reference par Login aur Demo button lagbhag
   chipke hue hain (4px), hamare yahan mt-2 se 10px ka faasla tha */
.login-box .d-grid .login-btn + .login-btn { margin-top: 4px !important; }

/* dashed line reference par brand-blue hai, neutral grey nahi */
.social_connect { border-top-color: var(--exch-blue, #1A3DA6) !important; position: relative; }
/* hand icon bilkul bayein kinare, telegram link beech me */
.social_connect .handicon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }

.recaptchaTerms {
  font-size: 12.8px !important; color: #000 !important;
  text-align: left !important; display: block;
}
.recaptchaTerms a { color: #007bff; }

/* Reference par dono login buttons ka text normal weight (400) hai, bold nahi —
   .btn-primary ka global 700 yahan overkill lag raha tha. */
.login-box .login-btn { font-weight: 400 !important; }

/* =====================================================================
   14. MOBILE HOME CHROME — ranibook247 /m/home se naapa (owner 2026-09-14)
   "each and every feature same as the refrance"

   Sab kuch @media (max-width: 1199px) me hai (yaani jahan hamara mobile/
   tablet layout chalta hai) — desktop chrome ko haath nahi lagta.
   ===================================================================== */
@media (max-width: 1199px) {

  /* logo ke pehle ghar ka icon */
  .header .logo-header a { display: inline-flex; align-items: center; gap: 6px; }
  .rani-home-icon { color: #fff; font-size: 18px; }

  /* ---- DEPOSIT / WITHDRAWAL ----
     Reference ke naape hue rang seedha uske computed style se:
       deposit    linear-gradient(#007b15, #138e00)
       withdrawal linear-gradient(#7b0000, #d10000)
     dono 37px unche, radius 4, 13px / weight 900, uppercase. */
  /* Side padding 20px jaan-boojh kar: reference par 375px viewport me har button
     theek 163px ka hai -> (375 - 2*20 - 9) / 2 = 163. 9px padding rakhne par
     hamare buttons 174px ke ho rahe the (naapa). */
  .btns__deposit_withdrawal {
    display: flex; gap: 9px; padding: 6px 20px 8px;
    background: var(--exch-blue, #1A3DA6); list-style: none; margin: 0;
  }
  .btns__deposit_withdrawal a {
    flex: 1 1 0; height: 37px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    color: #fff !important; font-size: 13px; font-weight: 900;
    text-transform: uppercase; text-decoration: none; letter-spacing: .3px;
  }
  .btns__deposit_withdrawal a i { font-size: 15px; }
  .btns__deposit_withdrawal .btn_deposit    { background: linear-gradient(#007b15, #138e00); }
  .btns__deposit_withdrawal .btn_withdrawal { background: linear-gradient(#7b0000, #d10000); }
  .btns__deposit_withdrawal a:active { filter: brightness(.92); }

  /* balance/exposure block — reference par "Balance:" shabd nahi hota,
     sirf icon + number, aur neeche "Exp: 0" underline ke saath */
  .header .user-balance { line-height: 1.25; }
  .header .user-balance span { font-size: 11px; }
  .header .user-balance b { font-size: 13px; }
}

/* ---- MAIN NAV (mobile) — reference ka `ul.nav.nav-tabs.game-nav-bar` ----
   Naapa: bar bg #1a3da6, item 12px. Active item白 text + neeche halki line. */
@media (max-width: 1199px) {
  .rani-main-nav {
    display: flex; list-style: none; margin: 0; padding: 0;
    background: var(--exch-blue, #1A3DA6); border: none;
  }
  /* Naap reference se (QA probe): li 44px = 12px padding + 20px link, link 12px/700
     uppercase safed, items ke beech 1px #dee2e6 ki lakeer, aakhri par nahi.
     Active tab par BHARA HUA box NAHI hota — link ke UPAR 2px #f1f5f8 ki patti hoti
     hai (::after top:-12px). Pehle hum navy box bhar rahe the, wahi sabse bada farq tha. */
  /* Reference: `flex: 1 1 auto` — item pehle apne naam jitna chauda hota hai, phir
     bachi jagah baantta hai (isi se "SPORTS BOOK" chauda aur "INPLAY" chhota hai).
     Hum `1 1 0` laga rahe the, jisse sab barabar 5 hisson me bat jaate the. */
  .rani-main-nav .nav-item { flex: 1 1 auto; text-align: center; padding: 12px 0; }
  .rani-main-nav .nav-link {
    display: block; padding: 0 5px; height: 100%; line-height: 18px; cursor: pointer;
    color: #fff !important; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0;
    background: transparent !important; border: 0 !important;
    border-right: 1px solid #dee2e6 !important; border-radius: 0 !important;
    white-space: nowrap; position: relative;
  }
  .rani-main-nav .nav-item:last-child .nav-link { border-right: 0 !important; }
  .rani-main-nav .nav-item.active .nav-link { background: transparent !important; }
  .rani-main-nav .nav-item.active .nav-link::after {
    content: ""; position: absolute; left: 0; top: -12px;
    width: 100%; height: 2px; background-color: #f1f5f8;
  }
}

/* ---- mobile par purani chrome hatao (naye main-nav ke saath takraati thi) ---- */
@media (max-width: 1199px) {
  /* .king-topnav par upar `display:flex !important` laga hai jo bootstrap ke `d-none`
     ko haraa deta tha — isliye DESKTOP ka sport-nav mobile par bhi dikh raha tha.
     Reference ke /m/home par aisa koi bar hai hi nahi. */
  .king-topnav { display: none !important; }

  /* naye main-nav me INPLAY pehle se hai, to neeche wali alag INPLAY chip do baar
     dikh rahi thi */
  .exch-inplay-pin { display: none !important; }

  /* Reference par inactive tab bhi poora safed hai (koi opacity nahi) — naapa. */
  .rani-main-nav .nav-link { color: #fff !important; opacity: 1; }
}

/* Specificity fix: base style.css me `.nav.nav-tabs` (do class) hai, jo mere
   `.rani-main-nav` (ek class) ko haraa kar bar ko #f2f2f2 kar deta tha (naapa).
   Isliye yahan poora selector + !important. */
@media (max-width: 1199px) {
  ul.nav.nav-tabs.rani-main-nav {
    background: var(--exch-blue, #1A3DA6) !important;
    border-bottom: none !important;
  }
  ul.nav.nav-tabs.rani-main-nav .nav-item { padding: 12px 0; }
  ul.nav.nav-tabs.rani-main-nav .nav-link { padding: 0 5px; }
}

/* =====================================================================
   15. RANIBOOK-STYLE PAGES — Change Button Values / Profit Loss
   Reference: /m/change-btn-value aur /m/reports/profit-loss.
   Dono ka dhaancha ek hi hai: navy title bar, safed body, blue action
   button, aur (report me) navy header wali table + pager.
   ===================================================================== */
.rani-page .center-container { background: #fff; }

.rani-page-title {
  background: var(--exch-navy, #0F2462); color: #fff;
  font-size: 16px; font-weight: 500; padding: 9px 12px;
}

/* --- Change Button Values --- */
.rani-btnvalue-wrap { padding: 10px; }
.rani-btnvalue-head,
.rani-btnvalue-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.rani-btnvalue-head { font-weight: 700; font-size: 14px; padding: 4px 2px 8px; }
.rani-btnvalue-row { margin-bottom: 10px; }
.rani-btnvalue-row .form-control {
  height: 38px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px;
}

.rani-update-btn {
  display: block; width: calc(100% - 20px); margin: 4px 10px 12px;
  height: 38px; border: none; border-radius: 4px;
  background: var(--exch-blue, #1A3DA6); color: #fff; font-size: 15px;
}
.rani-update-btn:disabled { opacity: .7; }

/* --- report filter row (do date box) --- */
.rani-filter-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 10px 6px;
}
.rani-filter-row .form-control { height: 38px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px; }

/* --- report table --- */
.rani-table-wrap { padding: 0 10px; overflow-x: auto; }
.rani-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rani-table thead th {
  background: var(--exch-navy, #0F2462); color: #fff; font-weight: 700;
  padding: 8px 6px; text-align: left; white-space: nowrap;
}
.rani-table tbody td, .rani-table tfoot td {
  padding: 8px 6px; border-bottom: 1px solid #e6e6e6; color: #222;
}
.rani-table tfoot td { background: #f6f7fb; }
.rani-empty { padding: 10px 6px; color: #444; }
.rani-table .text-success { color: #1a7f37 !important; }
.rani-table .text-danger  { color: #c62828 !important; }

/* --- pager --- */
.rani-pager { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 12px; }
.rani-pager button {
  border: 1px solid #d5d9e3; background: #fff; color: var(--exch-blue, #1A3DA6);
  padding: 6px 12px; border-radius: 4px; font-size: 13px;
}
.rani-pager button:disabled { color: #9aa0ab; }
.rani-pager-now {
  background: var(--exch-navy, #0F2462); color: #fff;
  padding: 6px 13px; border-radius: 4px; font-size: 13px;
}

/* ---- SPORT ICON ROW (mobile) — reference ka doosra game-nav-bar ----
   NAAPA (qa/probe.mjs, ranibook247 /m/home ka doosra ul.game-nav-bar):
     ul  390x55, bg #0F2462, flex nowrap, overflow-x auto, line-height 18px
     li  CHAUDAI APNE AAP (53 / 63 / 48 / 71 / 86 / 114 …), text-align center
     a   bg #1A3DA6, padding 5px, 12px/700 UPPERCASE safed, white-space nowrap
         andar: icon ka block ~25px, label ka block 18px
   Pehle hamare yahan `width: 53px` FIX tha aur label par ellipsis — isi se
   "TABLE T…", "HORSE R…", "GREYHO…" kat rahe the. Ab chaudai apne aap hoti hai
   to poora naam aata hai, bilkul reference jaisa. Icon ke gird jo safed gol
   chakri hum laga rahe the wo reference par hai hi nahi — hata di. */
@media (max-width: 1199px) {
  ul.nav.nav-pills.sports-tab {
    background: var(--exch-navy, #0F2462) !important;
    display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    margin: 0; padding: 0; gap: 0; line-height: 18px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  ul.nav.nav-pills.sports-tab::-webkit-scrollbar { display: none; }

  ul.nav.nav-pills.sports-tab > .nav-item { flex: 0 0 auto; text-align: center; }

  ul.nav.nav-pills.sports-tab .nav-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; width: auto; height: 55px; padding: 5px;
    background: var(--exch-blue, #1A3DA6) !important;
    border-radius: 0 !important; border: none !important;
    color: #fff !important; font-size: 12px; font-weight: 700; text-transform: uppercase;
    line-height: 18px; text-align: center; white-space: nowrap;
  }
  ul.nav.nav-pills.sports-tab .nav-link span {
    font-size: 12px; font-weight: 700; line-height: 18px;
    white-space: nowrap; overflow: visible; text-overflow: clip;
    max-width: none; color: #fff !important;
  }
  ul.nav.nav-pills.sports-tab .nav-link > div {
    width: auto; height: 25px; border-radius: 0; background: transparent;
    display: flex; align-items: center; justify-content: center;
  }
  ul.nav.nav-pills.sports-tab .nav-link i { font-size: 16px; color: #fff; }

  /* Reference par chuna hua sport baaki jaisa hi dikhta hai (naapa: dono ka
     background #1A3DA6) — isliye koi alag highlight nahi. */
  ul.nav.nav-pills.sports-tab .nav-link.active {
    background: var(--exch-blue, #1A3DA6) !important; color: #fff !important;
  }
}

/* ---- RULES PAGE — reference ke /m/rules jaisa ----
   Navy title (upar .rani-page-title se), neeche navy accordion headers, aur khuli
   section ka text LAAL, har niyam apne bordered box me. */
.rani-rules-page .center-container { background: #fff; padding-bottom: 16px; }
.rani-rules-accordion { --bs-accordion-border-color: transparent; }
.rani-rules-accordion .accordion-item { border: none; margin: 8px 10px 0; }
.rani-rules-accordion .accordion-button {
  background: var(--exch-navy, #0F2462) !important; color: #fff !important;
  font-size: 15px; font-weight: 500; padding: 14px 14px;
  border-radius: 4px !important; box-shadow: none !important;
}
.rani-rules-accordion .accordion-button::after { filter: invert(1) brightness(2); }
.rani-rules-accordion .accordion-button:not(.collapsed) { border-radius: 4px 4px 0 0 !important; }
.rani-rules-accordion .accordion-body { padding: 10px 4px 2px; }
/* reference par har niyam laal hai aur apne patle box me baithta hai */
.rani-rules-accordion .accordion-body p,
.rani-rules-accordion .accordion-body li {
  color: #b3261e; font-size: 13px; line-height: 1.45;
  border: 1px solid #d9dce6; border-radius: 3px;
  padding: 8px 10px; margin: 0 0 8px; list-style: none;
}
.rani-rules-accordion .accordion-body ul,
.rani-rules-accordion .accordion-body ol { padding-left: 0; margin: 0; }



/* ---- REFER AND EARN + BONUS LIST — reference ke /m/reffer-and-earn, /m/bonus-list ---- */
.rani-refer-page .center-container,
.rani-bonus-page .center-container { background: #fff; padding-bottom: 18px; }

.rani-refer-hero {
  background: var(--exch-navy, #0F2462); color: #fff;
  padding: 18px 16px 22px; text-align: center;
}
.rani-refer-hero h2 {
  color: #fff; font-size: 26px; font-weight: 700; margin: 0 0 12px; letter-spacing: .4px;
}
.rani-refer-hero p { color: #fff; font-size: 13px; line-height: 1.5; margin: 0; opacity: .95; }

.rani-refer-box {
  background: #262626; color: #fff; border-radius: 8px;
  margin: 16px 12px 0; padding: 16px 18px;
  font-size: 15px; line-height: 1.5; text-align: center; word-break: break-word;
}
.rani-refer-code { font-size: 24px; font-weight: 500; letter-spacing: 1px; }
.rani-refer-none { background: #f4f5f8; color: #333; font-size: 13px; }

.rani-copy-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px auto 0; padding: 8px 26px;
  background: var(--exch-blue, #1A3DA6); color: #fff;
  border: none; border-radius: 4px; font-size: 14px; font-weight: 700; letter-spacing: .5px;
}

/* bonus list */
.rani-bonus-tabs { display: flex; margin: 12px 12px 0; border-radius: 4px; overflow: hidden; }
.rani-bonus-tab {
  flex: 1 1 0; border: none; padding: 10px 6px; font-size: 13px;
  background: var(--exch-blue, #1A3DA6); color: #fff; opacity: .82;
}
.rani-bonus-tab.on { background: #111; opacity: 1; font-weight: 700; }
.rani-bonus-summary {
  display: flex; justify-content: space-between; align-items: center;
  margin: 12px 12px 0; padding: 10px 12px;
  background: #f4f5f8; border-radius: 4px; font-size: 14px;
}
.rani-bonus-empty { text-align: center; padding: 26px 12px; color: #555; }

/* account menu ke do buttons — reference ka ab_rae_btns */
.rani-rae-btns { display: flex; gap: 8px; padding: 8px 10px; }
.rani-rae-btns a {
  flex: 1 1 0; text-align: center; padding: 7px 6px; border-radius: 4px;
  font-size: 12px; font-weight: 700; text-decoration: none; color: #fff !important;
}
.rani-rae-btns .rani-rae { background: var(--exch-blue, #1A3DA6); }
.rani-rae-btns .rani-ab  { background: #111; }
.rani-rae-btns .rani-ab span { opacity: .85; }

/* Deposit/Withdraw chalu hone par mobile par DO UI ban jaate the: purana
   chhota image-wala block (.depositWithdraw, d-xl-none) aur naya bada
   green/red row (.btns__deposit_withdrawal). Reference par sirf bada row
   hai — isliye mobile par purana chhupa diya. Desktop wala block alag hai
   (d-none d-xl-block) aur waisa ka waisa chal raha hai. */
@media (max-width: 1199px) {
  .header .depositWithdraw { display: none !important; }
}

/* ---- ODDS BOARD row — reference se naapa ----
   ranibook247 par event ka naam kaala bold hota hai aur uske neeche ki DATE line
   laal (naapi: rgb(255,0,0), 12px). Hamare yahan date wahi neutral rang me thi. */
@media (max-width: 1199px) {
  .bet-table-body .bet-nation-game-name > span:last-child { color: #ff0000; font-size: 12px; }
  /* naam aur date alag-alag line par — reference jaisa */
  .bet-table-body .bet-nation-game-name { display: block; }
  .bet-table-body .bet-nation-game-name > span:first-child { font-weight: 700; color: #111; }
}

/* Reference-only (Tier 2) row — sirf dekhne ke liye, bet nahi.
   Halka dabaya hua rang + cursor default, taaki saaf rahe ki ye click nahi hota. */
.x99-view-only { color: #2b3a5c !important; cursor: default; opacity: .92; }
.x99-view-only::after {
  content: "view only"; margin-left: 6px; padding: 1px 5px;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  background: #e6eaf3; color: #5a6b8c; border-radius: 3px; vertical-align: middle;
}

/* ---- X99 (Tier-2) view-only event page ---- */
.x99-event .center-container { background: #fff; padding-bottom: 20px; }
.x99-head { display: flex; align-items: center; gap: 8px; background: var(--exch-navy, #0F2462); color: #fff; padding: 9px 10px; }
.x99-back { background: transparent; border: none; color: #fff; font-size: 22px; line-height: 1; padding: 0 6px; }
.x99-title { font-size: 15px; font-weight: 600; }
.x99-note { background: #fff8e1; color: #7a5b00; border-bottom: 1px solid #f0e2b6; font-size: 12px; padding: 7px 12px; }
.x99-score { width: 100%; height: 230px; border: 0; display: block; background: #0b1020; }
.x99-market { margin: 10px 8px 0; border: 1px solid #e3e6ef; border-radius: 4px; overflow: hidden; }
.x99-market-head { display: flex; justify-content: space-between; align-items: center; background: var(--exch-navy, #0F2462); color: #fff; padding: 8px 10px; font-size: 13px; font-weight: 600; }
.x99-minmax { font-size: 10px; opacity: .85; font-weight: 400; }
.x99-msg { background: #f4f6fb; color: #444; font-size: 11px; padding: 5px 10px; }
.x99-row { display: grid; grid-template-columns: 1fr 74px 74px; align-items: stretch; border-top: 1px solid #eef0f6; }
.x99-row-head .x99-cell { background: #f4f6fb !important; color: #55607a; font-size: 11px; font-weight: 700; }
.x99-runner { padding: 8px 10px; font-size: 13px; font-weight: 600; color: #1a1a1a; display: flex; align-items: center; }
.x99-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5px 2px; }
.x99-cell.back { background: var(--exch-back, #72BBEF); }
.x99-cell.lay { background: var(--exch-lay, #FAA9BA); }
.x99-cell b { font-size: 13px; color: #111; line-height: 1.1; }
.x99-cell span { font-size: 10px; color: #333; opacity: .8; }
.x99-stale { background: #fff3f3; color: #a33; font-size: 11px; padding: 4px 10px; }
.x99-empty { padding: 18px 12px; text-align: center; color: #666; }

/* =====================================================================
   99EXCH DESIGN-PARITY PASS — har naap qa/ harness se reference
   (ranibook247 /m/home) par NAAPI gayi hai, andaaza nahi.

   Reference ke tokens:
     --light-bg #f1f5f8   (row band)      --site-color #000 (poora text kaala)
     back #72BBEF         lay #FAA9BA     inplay dot #97CC00
     odds cell 63x24, 14px/700 kaala      "1 / X / 2" patti 18px, 12px/700 kaala
     event ka naam 14px/700 kaala         samay 12px/400 LAAL
   ===================================================================== */

/* ---- event row ka band ---- */
.bet-table-row + .bet-table-row { border-top: 1px solid #fff; }

/* ---- event ka naam + samay ---- */
.bet-nation-name .bet-nation-game-name > span:first-child {
  font-size: 14px; font-weight: 700; color: #000;
}
.bet-nation-name .bet-nation-game-name > span:last-child {
  font-size: 12px; font-weight: 400; color: #FF0000;
}

/* ---- "1 / X / 2" ki patti ---- */
.bet-nation-odd b { font-size: 12px; font-weight: 700; color: #000; }

/* ---- odds ke khaane ----
   Pehle ye #14213a (halka neela-kaala) the; reference par saaf kaala hai. */
.bet-nation-odd .odd-box .bet-odd,
.bet-nation-odd .odd-box span { color: #000 !important; font-weight: 700; }
.bet-nation-odd .odd-box .bet-odd { font-size: 14px; }

/* ---- inplay ka hara nishaan ---- */
.game-icons .game-icon .active { background: #97CC00; }

/* ---- LATEST-EVENTS PATTI (header ke neeche) ----
   NAAPA reference se: .latest-event 390x44 block + overflow-x auto;
   .latest-event-item 140x39 bg #0F2462 radius 4px padding 3px 5px margin 0 5px 5px 0;
   andar a[130x33] flex, 12px/700 safed, icon + (naam + samay do line me). */
.latest-event {
  display: block !important; width: 100%; overflow-x: auto; overflow-y: hidden;
  white-space: nowrap; padding: 5px 5px 0; background: transparent;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.latest-event::-webkit-scrollbar { display: none; }
.latest-event .latest-event-item {
  display: inline-flex; align-items: center; height: 39px;
  background: var(--exch-navy, #0F2462); border-radius: 4px;
  padding: 3px 5px; margin: 0 5px 5px 0; white-space: nowrap; vertical-align: top;
}
.latest-event .latest-event-item > a {
  display: flex; align-items: center; gap: 4px; padding: 0 1px;
  font-size: 12px; font-weight: 700; color: #fff !important; text-decoration: none;
}
.latest-event .latest-event-item > a > div { display: flex; flex-direction: column; line-height: 1.25; }
.latest-event .latest-event-item > a span { font-size: 12px; font-weight: 700; color: #fff; }
.latest-event .latest-event-item > a b { font-size: 11px; font-weight: 400; color: #fff; }
.latest-event .latest-event-item i { font-size: 13px; color: #fff; }

/* ---- HEADER (mobile) — reference /m/home se NAAPA ----
   Reference ka header 137px ka hai aur teen row me bata hai:
     row1 [370x58]  : logo.col-6 (img 130x32) + col-6.text-right > .auth-mob (Signup+Login)
     row2 [370x35]  : .search-box-container [360x30] — andar sirf ek 30x30 SAFED GOL
                      button (border-radius 30px) jisme fa-search; input tab tak 1px ka
                      rehta hai jab tak click na karo
     row3 [390x44]  : match-chips ki patti
   Hamare yahan ye teeno ek hi row me chipke the, saath me ek naarangi hamburger jo
   reference par hai hi nahi (aur uske drawer me wahi sports the jo neeche ki strip me
   pehle se hain) — isliye hamburger band. */
@media (max-width: 1199px) {
  /* Upar `.header .header-top` par `flex-wrap: nowrap !important` laga hua hai (line ~56),
     isliye search wali row wrap nahi ho rahi thi aur page 390 se 790 chauda ho gaya tha
     (QA ne pakda). Yahan utni hi specificity + !important chahiye. */
  /* gap:12px upar se aata hai — usse 50% + 50% + 12px ek line me nahi samaate the
     aur logo/Login alag-alag line par chale jaate the (naapa: logo top 5, Login top 37).
     Mobile par gap 0. */
  .header .header-top {
    flex-wrap: wrap !important; align-items: center; row-gap: 0;
    height: auto !important; gap: 0 !important;
  }
  /* Upar `.header .logo-header img` par !important laga hai, isliye yahan bhi
     utni hi taakat chahiye (reference ka logo 130x32 hai). */
  .header .header-top .logo-header { flex: 0 0 50%; max-width: 50%; }
  .header .header-top .logo-header img {
    width: 130px !important; height: auto !important; max-height: 32px !important;
    max-width: 130px !important; object-fit: contain;
  }
  .header .header-top .user-details { flex: 0 0 50%; max-width: 50%; justify-content: flex-end; margin-left: auto; }

  .header-top .kmm-burger { display: none !important; }

  .header .header-top .search-box-container.d-xl-none {
    flex: 0 0 100%; max-width: 100%; width: 100%; height: 35px;
    display: flex; align-items: center; gap: 8px; padding: 0; margin: 0;
    min-width: 0; overflow: hidden;
  }
  .header-top .search-box {
    flex: 0 0 30px; width: 30px; height: 30px;
    background: #fff !important; border-radius: 30px; position: relative;
    display: flex; align-items: center; justify-content: center; overflow: visible;
  }
  .header-top .search-box > a {
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  }
  .header-top .search-box i { color: var(--exch-blue, #1A3DA6) !important; font-size: 13px; }
  .header-top .search-box input {
    width: 1px; padding: 0; border: 0; background: transparent; font-size: 12px;
    position: absolute; left: 30px; top: 0; height: 30px; transition: width .15s ease;
  }
  .header-top .search-box input.search-input-show {
    width: 300px; max-width: calc(100vw - 80px); background: #fff; padding: 0 8px; border-radius: 4px;
  }
  /* marquee apni marzi ki chaudai le leta hai — use daayre me rakho warna wo bhi
     page ko chauda kar deta hai */
  .header-top .news { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .header-top .news marquee { width: 100% !important; }
}

/* ---- event row ke chhote icon — reference se NAAPA ----
   hara dot 12x12 (#97CC00), fa-tv 15x12, ic_fancy/ic_bm 15x10, sab .game-icon 20x18 me */
.bet-nation-name .game-icons { display: flex; align-items: center; gap: 0; }
.bet-nation-name .game-icons .game-icon {
  width: 20px; height: 18px; display: flex; align-items: center; justify-content: center;
}
.bet-nation-name .game-icons .game-icon .active { width: 12px; height: 12px; border-radius: 50%; background: #97CC00; }
.bet-nation-name .game-icons .game-icon img { width: 15px; height: 10px; object-fit: contain; }
.bet-nation-name .game-icons .game-icon i.icon-tv { font-size: 12px; width: 15px; color: #000; }


/* Reference ke chips blink nahi karte — hamare yahan `.blink_me` ki jhapak-animation
   thi, jis se patti kabhi-kabhi khaali dikhti thi. Is patti me use band. */
.latest-event .latest-event-item > a.blink_me,
.latest-event .latest-event-item > a.blink_me * { animation: none !important; opacity: 1 !important; }

/* Ye saara block SIRF MOBILE ke liye hai — reference ka desktop skin alag paimane
   par chalta hai (body 16px, Back/Lay 16px poore #72BBEF/#FAA9BA par, market-title
   14px/700). Bina media ke ye rules desktop ko bigaad rahe the (QA ne pakda). */
@media (max-width: 1199px) {
  /* =====================================================================
     DETAIL PAGE — reference (/game-detail/<id>) se NAAPA
       .market-title  390x28, bg rgba(15,36,98,.85), 13px/400 safed, padding 4px 8px
       .table-header  390x20 — BAAYEN "Min:100 Max:50k" (12px/400 kaala, padding 0 5px),
                      DAAYEN BACK khaana 78x18 bg #A7D8FD aur LAY bg #F9C9D4, 12px/400 kaala
       .table-row     390x36, bg #f2f2f2
     Hamare yahan title 700 weight + solid navy tha, Min/Max title me chipka badge tha,
     aur Back/Lay ke khaane paardarshi the (bas neela/gulabi TEXT). Ab reference jaisa.
     ===================================================================== */
  .detail-page .market-title {
    background: rgba(15, 36, 98, .85) !important;
    font-size: 13px !important; font-weight: 400 !important;
    padding: 4px 8px !important; border-radius: 0 !important; min-height: 28px;
  }
  /* Min/Max ab header row me (reference jaisa), title me nahi */
  .detail-page .market-title > span.king-mm { display: none !important; }
  .detail-page .market-header .market-nation-name {
    display: block !important; font-size: 12px; font-weight: 400; color: #000; padding: 0 5px;
  }
  .detail-page .market-header { background: transparent !important; border-bottom: 0; }
  .detail-page .market-header .market-odd-box.back {
    background: #A7D8FD !important; color: #000 !important;
    font-weight: 400 !important; font-size: 12px !important; text-align: center;
  }
  .detail-page .market-header .market-odd-box.lay {
    background: #F9C9D4 !important; color: #000 !important;
    font-weight: 400 !important; font-size: 12px !important; text-align: center;
  }
  /* andar wala <b> kahin se 16px le raha tha — reference par ye 12px/700 hai */
  .detail-page .market-header .market-odd-box.back b,
  .detail-page .market-header .market-odd-box.lay b {
    font-size: 12px !important; font-weight: 700; color: #000;
  }
  .detail-page .market-row { background: #f2f2f2; }

  /* Event ka title bar — reference ka `.match-title`: 390x29, bg #0F2462, safed,
     14px/400, text-transform NONE, padding 4px 8px. Hamara 15px/bold UPPERCASE tha
     aur kinare par 4px margin chhod raha tha. */
  .detail-page .game-header {
    background: var(--exch-navy, #0F2462) !important; color: #fff !important;
    font-size: 14px !important; font-weight: 400 !important;
    text-transform: none !important; padding: 4px 8px !important;
    width: 100% !important; margin: 0 !important; min-height: 29px;
    align-items: center;
  }
}

/* ---- DETAIL PAGE — DESKTOP (reference /game-detail par 1366px par naapa) ---- */
@media (min-width: 1200px) {
  .detail-page .market-title { font-size: 14px !important; font-weight: 700 !important; }
  .detail-page .market-header .market-odd-box.back {
    background: #72BBEF !important; color: #000 !important; font-size: 16px !important;
  }
  .detail-page .market-header .market-odd-box.lay {
    background: #FAA9BA !important; color: #000 !important; font-size: 16px !important;
  }
  .detail-page .market-header .market-odd-box.back b,
  .detail-page .market-header .market-odd-box.lay b { font-size: 16px !important; font-weight: 700; }
  /* reference par desktop ka market-title halka paardarshi navy hai */
  .detail-page .market-title { background: rgba(15, 36, 98, .85) !important; }
}

/* =====================================================================
   LOGIN KE BAAD — reference se NAAPA (demo123 se andar jaakar)
   ===================================================================== */

/* ---- DEPOSIT / WITHDRAWAL ki patti ----
   Reference: har button 170x37, radius 4px, padding 5px, 13px/900 UPPERCASE safed;
   deposit par linear-gradient(#007B15, #138E00), withdrawal par (#7B0000, #D10000).
   Hamare yahan markup pehle se tha par bina CSS ke saada text (35x14) dikh raha tha. */
.btns__deposit_withdrawal {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 5px; width: 100%;
}
.btns__deposit_withdrawal > a,
.btns__deposit_withdrawal > button {
  flex: 1 1 0; max-width: 170px; height: 37px; padding: 5px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 4px; text-decoration: none;
  font-size: 13px; font-weight: 900; text-transform: uppercase; color: #fff !important;
}
.btns__deposit_withdrawal .btn_deposit { background-image: linear-gradient(rgb(0, 123, 21), rgb(19, 142, 0)); }
.btns__deposit_withdrawal .btn_withdrawal { background-image: linear-gradient(rgb(123, 0, 0), rgb(209, 0, 0)); }
.btns__deposit_withdrawal i { font-size: 14px; color: #fff; }
.btns__deposit_withdrawal span { color: #fff; }

/* Report page ka paimana mobile aur desktop par alag hai (reference: sheersh 18px
   mobile par, 24px desktop par) — isliye alag-alag. */
@media (max-width: 1199px) {
  /* ---- REPORT PAGE (Account Statement / Bet History / Unsettled) ----
     Naapa: page ka sheersh 18px/500; table ke sheersh 14px beech me;
     Submit poori chaudai 380x31, 14px/400, kona 0, padding 4px 8px. */
  .report-page .card-title { font-size: 18px !important; font-weight: 500 !important; line-height: 1.2; }
  .report-page table thead th,
  .report-page .report-table thead th {
    font-size: 14px !important; line-height: 21px; text-align: center;
  }
  .report-page .report-form .btn,
  .report-page button[type="submit"],
  .report-page .btn-primary {
    font-size: 14px !important; font-weight: 400 !important; line-height: 21px;
    border-radius: 0 !important; padding: 4px 8px !important; height: 31px; width: 100%;
  }
}

@media (min-width: 1200px) {
  .report-page .card-title { font-size: 24px !important; font-weight: 500 !important; }

  /* Desktop sport-nav: reference par link 14px hai aur uska apna background
     paardarshi (rang poori patti par hai). Hamare yahan link 12px tha aur rang
     link par — isse har page par ek hi farq 11 baar gin raha tha. */
  .king-topnav { background: var(--exch-navy, #0F2462) !important; }
  .king-topnav .nav-link, .king-topnav a, .king-topnav a:link, .king-topnav a:visited {
    font-size: 14px !important; background: transparent !important;
  }

  /* Submit reference par 400 weight ka hai */
  .report-page .report-form .btn-primary,
  .report-page button[type="submit"] { font-weight: 400 !important; }

  /* Desktop par reference ka table-sheersh SAFED zameen par gehra-slate text hai
     (naapa: color rgb(33,37,41), background paardarshi) — mobile wala navy/safed
     nahi. Submit bhi wahan bootstrap ka neela rgb(0,123,255) hai. */
  .report-page table thead th,
  .report-page .report-table thead th {
    background: #fff !important; color: rgb(33, 37, 41) !important;
    font-weight: 700; text-align: center; border-bottom: 1px solid #dee2e6;
  }
  .report-page .report-form .btn-primary,
  .report-page button[type="submit"] {
    background: rgb(0, 123, 255) !important; border-color: rgb(0, 123, 255) !important;
  }

  /* Mobile ka slide-in drawer desktop par DOM me rehta tha (bg #0B0F14) — dikhta
     nahi tha par naap me ghus jaata tha aur desktop par uski koi zarurat bhi nahi. */
  .kmm-drawer, .kmm-burger { display: none !important; }
}

/* =====================================================================
   PARITY PASS 2 (2026-10-01) — reference /m/* se dobara naapa
   ===================================================================== */
@media (max-width: 1199px) {
  /* Header ka kram reference jaisa: logo/balance -> DEPOSIT/WITHDRAWAL -> search + news.
     Patti ab .header-top ke andar hai (mobile par wo wrap hota hai) — apni poori row le. */
  .header .header-top .btns__deposit_withdrawal {
    flex: 0 0 100%; max-width: 100%; order: 0; padding: 5px 0 6px;
  }
  /* balance: reference par bank ka icon + rakam (13px safed), "Balance:" likha nahi */
  .header .user-balance .rani-bal-icon { color: #fff; font-size: 13px; margin-right: 4px; }
}

/* ---- REPORTS — reference /m/reports/* se naapa ----
   pagination: ul.pagination.b-pagination; link 12px, padding 8px 12px, border #DEE2E6,
   disabled rang #6C757D, active navy #0F2462 par safed. Khaali table: ek hi
   <td colspan=7>No Data To Display</td> (12px, baayen, 5px 7px, border #AAA). */
.report-page .b-pagination { margin: 0; }
.report-page .b-pagination .page-link {
  font-size: 12px; line-height: 1.25; padding: 8px 12px;
  color: #6c757d; background: #fff; border: 1px solid #dee2e6; box-shadow: none;
}
.report-page .b-pagination .page-item.active .page-link { background: #0f2462; border-color: #0f2462; color: #fff; }
.report-page .b-pagination .page-item.disabled .page-link { color: #6c757d; pointer-events: none; }
.report-page .table td.report-nodata {
  text-align: left !important; font-size: 12px; padding: 5px 7px; color: #212529;
  border: 1px solid #aaa; background: #fff;
}
/* reference ke select par bootstrap-4 wala ⬍ (custom-select) arrow hai; hamari theme ka
   `background: #fff !important` shorthand use mita deta tha */
.center-main-container.report-page select.form-select,
.center-main-container .report-page select.form-select {
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center / 8px 10px !important;
  padding-right: 1.75rem !important; border-radius: 4px !important; border-color: #ced4da !important;
}
/* style.css ka `.report-page .table-responsive { min-height: calc(100vh - 350px) }` khaali
   table ke neeche ~430px ki khaali jagah chhodta tha, aur pagination screen ke tale chali
   jaati thi. Reference par pagination table ke theek neeche hai. Loading ke waqt (wrapper par
   .position-relative) spinner ko jagah chahiye, tab wahi purana min-height rehta hai. */
.report-page .table-responsive:not(.position-relative) { min-height: 0 !important; }

/* ---- REPORT PAGE (mobile) — reference /m/reports/bet-history se pixel naap ----
   card poori chaudai; header padding 6px #0F2462 (h4 18px/500 lh 21.6);
   card-body padding 10px 5px; row5 margin 0 -5px, col padding 0 5px;
   select (custom-select) 38px, padding 6px 28px 6px 12px, 16px/24px #495057, border #CED4DA r4;
   date (mx-input) 38px, padding 6px 30px 6px 10px, 14px/19.6px #555, border #CCC r4;
   Submit btn-sm 31px, padding 4px 8px, 14px/400 lh21, #1A3DA6, radius 0; "No Data" 12px/18px. */
@media (max-width: 1199px) {
  .center-main-container.report-page,
  .report-page .center-container { padding: 0 !important; }
  .report-page .card { margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
  .report-page .card .card-header { padding: 6px !important; background: #0f2462 !important; border: 0 !important; border-radius: 0 !important; }
  .report-page .card .card-header .card-title { margin: 0 !important; font-size: 18px !important; font-weight: 500 !important; line-height: 21.6px !important; color: #fff !important; }
  .report-page .card .card-body { padding: 10px 5px !important; }
  .report-page .report-form form.row5 { margin-left: -5px !important; margin-right: -5px !important; }
  .report-page .report-form form.row5 > [class*="col-"] { padding-left: 5px !important; padding-right: 5px !important; }
  .center-main-container.report-page select.form-select.custom-select {
    height: 38px !important; padding: 6px 28px 6px 12px !important; font-size: 16px !important; line-height: 24px !important;
    color: #495057 !important; border: 1px solid #ced4da !important; border-radius: 4px !important;
  }
  .center-main-container.report-page input.form-control.mx-input {
    height: 38px !important; padding: 6px 30px 6px 10px !important; font-size: 14px !important; line-height: 19.6px !important;
    color: #555 !important; border: 1px solid #ccc !important; border-radius: 4px !important; background: #fff !important;
  }
  .center-main-container.report-page .report-form .btn.btn-primary.btn-sm {
    height: 31px !important; padding: 4px 8px !important; font-size: 14px !important; font-weight: 400 !important; line-height: 21px !important;
    background: #1a3da6 !important; border: 1px solid #1a3da6 !important; border-radius: 0 !important; color: #fff !important;
  }
  .report-page .report-nodata-text { font-size: 12px; line-height: 18px; color: #000; }

  /* DEPOSIT/WITHDRAWAL — reference: li 360 chauda (dono taraf 15px), padding 3px 0;
     har a 170x37, padding 5px, margin 0 5px, border 1px safed, radius 4, 13px/900 */
  .header .header-top .btns__deposit_withdrawal { padding: 3px 15px !important; gap: 0 !important; justify-content: center; }
  .header .header-top .btns__deposit_withdrawal > a,
  .header .header-top .btns__deposit_withdrawal > button {
    flex: 0 0 170px; max-width: 170px; width: 170px; height: 37px; margin: 0 5px;
    padding: 5px; border: 1px solid #fff !important; border-radius: 4px; text-align: center;
    font-size: 13px; font-weight: 900; line-height: 19.5px;
  }
}
@media (max-width: 1199px) {
  /* reference table: th/td padding 5px 7px (th 14px/700 safed navy par, td 12px) */
  .report-page .table th { padding: 5px 7px !important; }
  .report-page .table td { padding: 5px 7px !important; font-size: 12px; }
}

/* ---- FOOTER — reference (app-footer) ke apne niyam, hu-ba-hu ----
   m-style.css: footer { width:100%; background:#fff } footer p { margin:0; padding:0; line-height:2 }
   component:   footer { padding:5px 0 } .footer-other img { margin:0 auto }
                .footer-other div { text-align:center; font-size:11px }
                .footer-other div img { width:35px; margin:0 5px } .ss-logo { width:100px!important } */
footer.mref-footer { width: 100%; background-color: #fff; padding: 5px 0; color: #000; font-size: 12px; }
footer.mref-footer p { margin: 0; padding: 0; line-height: 2; font-size: 12px; color: #000; }
footer.mref-footer .footer-other img { margin: 0 auto; }
footer.mref-footer .footer-other div { text-align: center; font-size: 11px; color: #000; }
footer.mref-footer .footer-other div img { width: 35px; margin: 0 5px; }
footer.mref-footer .ss-logo { width: 100px !important; }
footer.mref-footer b { font-weight: 700; }
@media (max-width: 1199px) {
  /* reference par footer content ke theek baad aata hai — style.css ki min-height use tale dhakelti thi */
  .main-container { min-height: 0 !important; }
}

/* =====================================================================
   MOBILE HEADER — reference (ranibook247 /m/*) ke apne CSS niyam, hu-ba-hu
   (m-style.css + mobile/theme.css + header component styles). Markup bhi wahi
   (Header.jsx .mref-header). Reference Bootstrap 4 par hai — uske utilities
   (mr-1, pr-1, text-right, float-left) yahan khud diye hain.
   ===================================================================== */
@media (max-width: 1199px) {
  section.header.rani-desk-header { display: none !important; }

  .mref-header {
    --theme1-bg: #1a3da6; --theme2-bg: #0f2462; --theme2-bg85: #0f2462D9;
    --primary-color: #fff; --primary-bg: #fff; --site-color: #000; --light-bg: #f1f5f8;
    background-color: var(--theme1-bg) !important; color: var(--primary-color);
    font-family: 'Roboto Condensed', sans-serif; font-size: 12px; line-height: 18px;
    position: relative; z-index: 20;
  }
  .mref-header .container-fluid { padding-left: 15px; padding-right: 15px; }
  .mref-header .row5 { margin-left: -5px; margin-right: -5px; }
  .mref-header .row5 > [class*="col"] { padding-left: 5px; padding-right: 5px; }
  .mref-header .mr-1 { margin-right: .25rem !important; }
  .mref-header .pr-1 { padding-right: .25rem !important; }
  .mref-header .text-right { text-align: right !important; }
  .mref-header .float-left { float: left !important; }
  .mref-header a { color: var(--primary-color); text-decoration: none; }

  /* m-style.css: .header .bal-expo{font-size:14px} .header .fa-home{font-size:20px;vertical-align:middle}
     mobile/theme.css: .header .logo{width:130px} */
  .mref-header .bal-expo { font-size: 14px; line-height: 21px; }
  .mref-header .bal-expo b { font-weight: 700; }
  .mref-header .fa-home { font-size: 20px; vertical-align: middle; color: var(--primary-color); }
  .mref-header img.logo { width: 130px; max-width: 130px; height: auto; }

  /* dropdown — m-style.css + component */
  .mref-header .dropdown-toggle, .mref-header .dropdown-toggle:hover, .mref-header .dropdown-toggle:focus { color: var(--primary-color); }
  .mref-header .dropdown-menu {
    left: unset !important; right: -15px !important; top: 100% !important; transform: unset !important;
    border-radius: 0 !important; background-color: var(--light-bg); z-index: 1000; font-size: 12px; text-align: left;
  }
  .mref-header .dropdown-item { padding: 6px 12px; color: #212529; }
  .mref-header .dropdown-item.text-danger { color: #dc3545 !important; }
  .mref-header .balance-information { border-bottom: 1px solid var(--theme2-bg85) !important; padding-bottom: 3px; padding-top: 3px; }
  .mref-header .balance-row { display: flex; align-items: center; color: #000; font-size: 13px; font-weight: 700; line-height: normal; padding: 4px; }
  .mref-header .balance-text-left { font-weight: 300 !important; flex-basis: 55%; font-size: 13px; line-height: 1rem; color: #000; }
  .mref-header .balance-text-left small { font-size: 10px; }
  .mref-header .balance-price { color: var(--theme2-bg85); }
  .mref-header .ab_rae_btns { border-bottom: 1px solid var(--theme2-bg85); padding: 5px; }
  .mref-header .ab_btns, .mref-header .rae_btns { text-align: center; line-height: normal; }
  .mref-header .ab_btns { background: var(--theme2-bg); color: #fff !important; border-radius: 100px; margin-bottom: 3px; }
  .mref-header .rae_btns { border: 1px solid var(--theme2-bg); color: var(--theme2-bg); border-radius: 100px; padding: 6px 0; font-size: 12px; }
  .mref-header .rae_btns span { font-size: 13px; }

  /* DEPOSIT / WITHDRAWAL — header component styles */
  .mref-header .btns__deposit_withdrawal { display: flex; justify-content: end; width: 100%; padding: 3px 0; list-style: none; gap: 0; margin: 0; }
  .mref-header .btns__deposit_withdrawal a {
    text-align: center; color: #fff; padding: 5px; text-transform: uppercase; font-size: 13px; line-height: 19.5px;
    display: flex; align-items: center; justify-content: center; border-radius: 4px; font-weight: 900;
    border: 1px solid #fff; margin: 0 5px; text-decoration: none; width: 50%; max-width: none; height: auto; flex: 0 1 50%;
  }
  .mref-header .btns__deposit_withdrawal a.btn_deposit { background: linear-gradient(180deg, #007b15, #138e00); }
  .mref-header .btns__deposit_withdrawal a.btn_withdrawal { background: linear-gradient(180deg, #7b0000, #d10000); }
  .mref-header .btns__deposit_withdrawal a img { width: 22px; margin-right: 3px; filter: invert(1); }

  /* search + marquee — m-style.css + upcoming component */
  .mref-header .header-bottom { position: relative; min-height: 35px; overflow: inherit !important; }
  .mref-header .search-box-container { position: absolute; left: 0; z-index: 10; width: calc(100% - 10px); }
  .mref-header .search-box { background-color: var(--primary-bg); border-radius: 30px; padding: 0; display: flex; align-items: center; }
  .mref-header .search_input { color: var(--site-color); border: 0; outline: 0; background: none; width: 0; line-height: 30px; transition: width .4s linear; padding: 0 1px 0 0; }
  .mref-header .search-box .search_input-hover { padding: 0 10px !important; width: 190px; transition: width .4s linear; }
  .mref-header .search-box.active input.search_input { width: 180px; }
  .mref-header .search_icon { height: 30px; width: 30px; float: right; display: flex; justify-content: center; align-items: center; border-radius: 50%; color: var(--primary-bg); margin-right: -1px; }
  .mref-header .search-box .fa-search, .mref-header .search-box .fa-times { font-size: 14px; color: var(--site-color); }
  .mref-header .marquee1 { width: 80%; white-space: nowrap; overflow: hidden; font-weight: 500; color: #fff; font-size: 13px; position: absolute; bottom: 7px; right: 0; }
  .mref-header .marquee1 span { display: inline-block; padding-left: 100%; animation: marquee1 25s linear infinite; }
  .mref-header .marquee1 span:hover { animation-play-state: paused; }
}
@keyframes marquee1 { 0% { transform: translate(0); } to { transform: translate(-100%); } }
@media (max-width: 1199px) {
  /* naap ke baad sudhaar (reference: logo 130x32, balance 14px, deposit 37px, search 30px) */
  .mref-header img.logo { width: 130px !important; height: 32px !important; object-fit: contain; object-position: left center; vertical-align: middle; }
  .mref-header .bal-expo p, .mref-header .bal-expo b, .mref-header .bal-expo u, .mref-header .bal-expo span { font-size: 14px !important; line-height: 21px; }
  .mref-header .bal-expo p { margin: 0; }
  /* reference me component ka niyam (Angular attribute selector ki zyada specificity ke saath)
     jeet-ta hai: img width 25px, margin-right 5px -> button 37px uncha */
  .mref-header .btns__deposit_withdrawal a img { width: 25px !important; margin-right: 5px !important; }
  .mref-header .search_input { height: 30px !important; min-height: 0 !important; font-size: 12px; box-shadow: none; }
  .mref-header .search-box { height: 30px; }
}
@media (max-width: 1199px) {
  .mref-header .header-bottom .search-box-container { margin: 0 !important; top: 0; padding: 0 !important; height: auto; }
  /* Bootstrap 4 .card-header: border-bottom 1px rgba(0,0,0,.125) -> reference par 35px uncha */
  .report-page .card .card-header { border-bottom: 1px solid rgba(0, 0, 0, .125) !important; }
}

/* ---- CHANGE PASSWORD — reference /m/change-password se naapa ----
   form-group margin-bottom 16px; label 12px/18px, margin-bottom 8px;
   input 38px, padding 6px 12px, 16px/24px #495057, safed, SIRF neeche 1px #0F2462, radius 0 */
.cp-page .form-group { margin: 0 0 16px; }
.cp-page .form-group label { display: inline-block; font-size: 12px; line-height: 18px; margin-bottom: 8px; color: #000; }
.center-main-container.cp-page input.form-control {
  height: 38px !important; padding: 6px 12px !important; font-size: 16px !important; line-height: 24px !important;
  color: #495057 !important; background: #fff !important; border: 0 !important; border-bottom: 1px solid #0f2462 !important;
  border-radius: 0 !important; box-shadow: none !important;
}
.cp-page .btn.btn-primary.btn-sm {
  height: 31px; padding: 4px 8px; font-size: 14px; font-weight: 400; line-height: 21px;
  background: #1a3da6; border: 1px solid #1a3da6; border-radius: 0; color: #fff;
}
@media (max-width: 1199px) {
  .report-page .card .card-header h4 { margin: 0 !important; font-size: 18px !important; font-weight: 500 !important; line-height: 21.6px !important; color: #fff !important; }
}

/* ---- Bootstrap 4 custom-radio (reference Bootstrap 4 par hai; hamara 5 me ye class hai hi
   nahi) + reference m-style.css override (20px gola, checked #1A3DA6) ---- */
.report-page .custom-control { position: relative; display: block; min-height: 1.5rem; padding-left: 1.5rem; font-size: 12px; line-height: 18px; }
.report-page .custom-control-inline { display: inline-flex; margin-right: 1rem; }
.report-page .custom-control-input { position: absolute; z-index: -1; opacity: 0; }
.report-page .custom-control-label { position: relative; margin-bottom: 0; vertical-align: top; cursor: pointer; }
.report-page .custom-control-label::before,
.report-page .custom-control-label::after { position: absolute; top: 0; left: -1.5rem; display: block; width: 20px; height: 20px; content: ""; }
.report-page .custom-control-label::before { pointer-events: none; background-color: #fff; border: #adb5bd solid 1px; }
.report-page .custom-control-label::after { background: no-repeat 50% / 50% 50%; }
.report-page .custom-radio .custom-control-label::before { border-radius: 50%; }
.report-page .custom-control-input:checked ~ .custom-control-label::before { color: #fff; border-color: #1a3da6; background-color: #1a3da6; }
.report-page .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
/* reference m-style.css: .bet-history { background:#fff; padding:1px 5px; box-shadow:0 3px 5px -3px; margin-bottom:5px } */
.report-page .bet-history { background-color: #fff; padding: 1px 5px; box-shadow: 0 3px 5px -3px; margin-bottom: 5px; font-size: 12px; line-height: 18px; color: #000; }
@media (max-width: 1199px) {
  /* purani CSS (.header-bottom = desktop sport-nav ki patti) yahan #0F2462 laga rahi thi;
     reference par search/news ke peeche koi alag patti nahi */
  header.mref-header .header-bottom { background: transparent !important; background-color: transparent !important; }
  /* reference: icon kaala (#000) 14px safed gol button par; purana !important niyam safed kar raha tha */
  header.mref-header .search-box .search_icon i,
  header.mref-header .search-box .search_icon i.fa-search,
  header.mref-header .search-box .search_icon i.fa-times { color: #000 !important; font-size: 14px !important; }
}