/* =====================================================================
   RAJBET65 — "Midnight + Gold" design system
   =====================================================================
   Loaded LAST in index.html, so it wins over style.css, home.css and the
   vendored styles.<hash>.css at equal specificity without needing a
   priority flag on everything.

   The brief this implements:
     Premium dark sportsbook with gold brand accents, a data-first sports
     interface, and colourful casino artwork contained inside a restrained
     UI shell.

   Colour roles -- one job each, which is the whole point:
     gold   = interaction / active state          (never decoration)
     blue   = brand / navigation                  (never a second CTA)
     navy   = environment                         (65% of the pixels)
     white  = content
     green / red = status only

   Cyan is deliberately absent. It used to appear on the header, the nav,
   the cards, the odds, the banners and the footer at equal weight, which
   is what made the old UI feel noisy: nothing could be more important
   than anything else.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------ */
:root {
  /* -- palette ----------------------------------------------------- */
  --rb-bg: #071525;           /* page ground, very dark navy */
  --rb-surface: #0d2035;      /* cards, rows, panels */
  --rb-surface-2: #122a43;    /* elevated: hover, inputs, odds cells */
  --rb-surface-3: #17334f;    /* pressed / active surface */

  --rb-gold: #f5b900;         /* PRIMARY: interaction + active state */
  --rb-gold-hi: #ffc933;      /* gold hover */
  --rb-gold-dim: #3a2c07;     /* gold at 8% over navy -- subtle fills */
  --rb-on-gold: #071525;      /* text that sits on gold */

  --rb-blue: #159bd3;         /* brand / navigation */
  --rb-blue-2: #0c6fa5;       /* deeper brand blue */

  --rb-text: #f5f7fa;         /* content */
  --rb-text-2: #91a4b8;       /* secondary / meta */
  --rb-text-3: #64788e;       /* disabled */

  --rb-border: rgba(255, 255, 255, 0.08);
  --rb-border-strong: rgba(255, 255, 255, 0.16);

  --rb-success: #27c281;      /* status only */
  --rb-danger: #e05252;       /* status only */
  --rb-live: #e05252;

  /* -- spacing scale ------------------------------------------------
     4 / 8 / 12 / 16 / 24 / 32 / 48 / 64. Nothing in between. */
  --rb-1: 4px;
  --rb-2: 8px;
  --rb-3: 12px;
  --rb-4: 16px;
  --rb-5: 24px;
  --rb-6: 32px;
  --rb-7: 48px;
  --rb-8: 64px;

  /* -- radius scale -------------------------------------------------
     Deliberately restrained. Everything used to be heavily rounded,
     which reads as toy rather than premium. */
  --rb-r-card: 12px;
  --rb-r-btn: 8px;
  --rb-r-input: 8px;
  --rb-r-pill: 999px;
  --rb-r-hero: 14px;

  /* -- type --------------------------------------------------------- */
  --rb-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --rb-fw-body: 400;
  --rb-fw-med: 500;
  --rb-fw-nav: 600;
  --rb-fw-odds: 600;
  --rb-fw-head: 700;

  /* -- layout ------------------------------------------------------- */
  --rb-max-width: 1400px;   /* the sportsbook must not stretch forever */
  --rb-gutter: 16px;
  /* Measured: 26 announcement + 50 brand row + 44 nav + 2 hairlines.
     The header is position:sticky, so anything else that sticks has to
     start below this or it slides underneath. */
  --rb-header-h: 122px;

  --rb-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --rb-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45);

  /* -----------------------------------------------------------------
     2. REMAP THE LEGACY TOKENS
     -----------------------------------------------------------------
     ~32k lines of views paint themselves from these --dark-theme-*
     names. Rather than rewrite every one, they are re-pointed at the
     palette above, so the whole application moves to Midnight + Gold in
     one place. Anything still cyan after this is a hardcoded hex in a
     component, handled in section 9.
     ----------------------------------------------------------------- */
  --surface-page: var(--rb-bg);
  --surface-panel: var(--rb-surface);
  --surface-input: var(--rb-surface-2);
  --surface-card: var(--rb-surface);

  --dark-theme-bg: var(--rb-bg);
  --dark-theme-color: var(--rb-text);
  --dark-theme-colorHeader: var(--rb-surface);
  --dark-theme-white-color: var(--rb-text);
  --dark-theme-color-navbar: var(--rb-text);
  --dark-theme-color-sidebar: var(--rb-text);
  --dark-theme-data-color: var(--rb-text);
  --dark-theme-data-border: var(--rb-border);
  --dark-theme-data-bg: var(--rb-surface);

  /* Was #51adef -- the cyan that painted every odds cell. Now an
     elevated navy surface; the number carries the meaning, not a
     saturated fill. */
  --dark-theme-data-box: var(--rb-surface-2);
  --dark-theme-data-box2: var(--rb-surface-2);
  --dark-theme-data-box3: var(--rb-surface-2);
  --dark-theme-data-homebet: var(--rb-surface);
  --dark-theme-data-homebet2: var(--rb-surface);
  --dark-theme-data-set: var(--rb-surface-2);
  --dark-theme-data-set2: var(--rb-surface-2);

  --dark-theme-card-bg: var(--rb-surface);
  --dark-theme-card-bg-light: var(--rb-surface-2);
  --dark-theme-card-bg-light-gradiant: var(--rb-surface);
  --dark-theme-card-bg-light2: var(--rb-surface-2);

  --dark-theme-sidebar-hovers: var(--rb-surface-2);
  --dark-theme-dark-blue-variant: var(--rb-surface);
  --dark-theme-dark-blue-variant1: var(--rb-bg);
  --dark-theme-dark-blue-bm: var(--rb-blue);
  --dark-theme-time-remaining: var(--rb-surface-2);
  --dark-theme-demoaccount: var(--rb-danger);
  --dark-theme-data-submit: var(--rb-success);
  --dark-theme-data-cancel: var(--rb-danger);
  --dark-theme-button-special: var(--rb-gold);

  --bg-btn: var(--rb-gold);
  --text-color: var(--rb-text);
  --accent: var(--rb-gold);
  --on-accent: var(--rb-on-gold);
  --nav-active-bg: var(--rb-gold);
  --report-cate-item-border-clr: var(--rb-gold);
}

@media (min-width: 992px) {
  :root {
    --rb-gutter: 32px;
  }
}

/* ---------------------------------------------------------------------
   3. BASE — ground, type
   ------------------------------------------------------------------ */
html,
body {
  background-color: var(--rb-bg) !important;
}

body,
body.dark-theme {
  background-color: var(--rb-bg) !important;
  color: var(--rb-text);
}

/* The page wrappers every view renders inside. Legacy CSS and one inline
   style (RegisterForm) paint them from --dark-theme-color, which section 2
   remaps to a *text* colour -- so whenever one of those rules won, the
   whole content column went #f5f7fa and the light section headings on it
   disappeared (#3). Pin them to the page ground here. */
.head-container,
.mobile-full-height-container,
.regular-container {
  background-color: var(--rb-bg) !important;
}

/* The old rule was `* { font-family: Roboto Condensed }`, which forced a
   condensed face onto every character on the page including numbers in
   odds cells. UI type should be boring and consistent; the expressive
   typography belongs to the promotional artwork, not the interface. */
/* body.dark-theme in the vendored bundle sets `poppins` and outranks a
   bare `body` selector, so the class is carried here too. */
body,
body.dark-theme,
body *,
body.dark-theme * {
  font-family: var(--rb-font);
}

/* The vendored bundle sets `--font_family_global` twice on :root, and the
   second one wins: `" Roboto Condensed, sans-serif"` -- one quoted string, so
   the browser reads it as a single family by that literal name, finds nothing
   and falls back to its own default (a serif). Everything using the token
   rendered in the wrong face: pagination, the match-page headers, sport names,
   the view-all buttons, the bet-slip stake buttons. This file loads last, so
   redefining it here fixes all of them at once. */
:root {
  --font_family_global: var(--rb-font);
}

/* Font Awesome / Bootstrap Icons must keep their own glyph fonts. */
body .fa,
body .fas,
body .far,
body .fab,
body .fa-solid,
body .fa-regular,
body .fa-brands,
body [class^="bi-"],
body [class*=" bi-"],
body .material-icons {
  font-family: inherit;
}

.fa,
.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-brands {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

[class^="bi-"],
[class*=" bi-"] {
  font-family: "bootstrap-icons" !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: var(--rb-fw-head);
  color: var(--rb-text);
  letter-spacing: -0.01em;
}

/* Navigation should be sentence case. SHOUTING belongs to the artwork. */
.rb-nav__link,
.rb-side__item,
.rb-quick__title,
.sport-tab {
  text-transform: none;
}

/* ---------------------------------------------------------------------
   4. LAYOUT — content width
   ------------------------------------------------------------------
   The sportsbook stretched edge to edge on a 2560px monitor, which makes
   a match row a metre wide and unreadable. */
.rb-shell {
  width: 100%;
  max-width: var(--rb-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rb-gutter);
  padding-right: var(--rb-gutter);
  box-sizing: border-box;
}

/* Two things fight this gutter and both outrank a plain class selector:
   `.upcoming-container[_ngcontent-jrx-c94] { padding: 0 }` in style.css,
   and a `.upcoming-container { padding-left: 0 }` rule injected into the
   document at runtime that is in no source file. Hence the priority flag
   rather than a specificity race against a stylesheet that is not on
   disk. */
.upcoming-container,
.wrap-conatiner,
.sports-wrapper {
  box-sizing: border-box;
  max-width: var(--rb-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rb-gutter) !important;
  padding-right: var(--rb-gutter) !important;
}

/* Nested gutters stack. The sports block now lives inside
   .upcoming-container, so its own wrappers must not add a second and a
   third inset -- that is what left the match cards narrower than every
   other card on the page. */
.upcoming-container .wrap-conatiner,
.upcoming-container .sports-wrapper,
.wrap-conatiner .sports-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none;
}

/* ---------------------------------------------------------------------
   5. HEADER
   ------------------------------------------------------------------
   Was announcement + logo row + login row + nav ≈ 190px of chrome before
   a single pixel of product. Target is ~108px.  */

/* -- 5a. announcement strip: one thin line of trust signals ---------- */
.rb-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rb-4);
  height: 26px;
  padding: 0 var(--rb-3);
  background: var(--rb-surface);
  border-bottom: 1px solid var(--rb-border);
  color: var(--rb-text-2);
  font-size: 11px;
  font-weight: var(--rb-fw-med);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
}

.rb-announce__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rb-announce__sep {
  color: var(--rb-text-3);
}

.rb-announce__clock {
  margin-left: auto;
  color: var(--rb-text-3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  /* The clock is the least useful thing here on a 375px screen. */
  .rb-announce__clock,
  .rb-announce__item--drop {
    display: none;
  }
}

/* -- 5b. brand row -------------------------------------------------- */
.rb-topbar {
  background: var(--rb-surface);
  border-bottom: 1px solid var(--rb-border);
}

.rb-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--rb-3);
  height: 50px;
  max-width: var(--rb-max-width);
  margin: 0 auto;
  padding: 0 var(--rb-gutter);
  box-sizing: border-box;
}

.rb-topbar__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 0;
  border-radius: var(--rb-r-btn);
  background: transparent;
  color: var(--rb-text);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.rb-topbar__menu:hover {
  background: var(--rb-surface-2);
}

.rb-topbar__logo {
  display: flex;
  align-items: center;
  height: 40px;
  text-decoration: none;
}

.rb-topbar__logo img {
  height: 34px;
  width: auto;
  display: block;
}

.rb-topbar__spacer {
  flex: 1 1 auto;
}

.rb-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--rb-2);
}

/* Header search. The casino game filter existed in the code but had no
   input anywhere on the site, so it could never be used. */
.rb-topsearch {
  display: flex;
  align-items: center;
  gap: var(--rb-2);
  flex: 0 1 260px;
  min-width: 0;
  height: 34px;
  padding: 0 var(--rb-3);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-r-input);
  background: var(--rb-bg);
  color: var(--rb-text-3);
  transition: border-color 0.15s ease;
}

.rb-topsearch:focus-within {
  border-color: var(--rb-gold);
  color: var(--rb-text-2);
}

.rb-topsearch input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--rb-text);
  font-size: 13px;
  outline: none;
}

.rb-topsearch input::placeholder {
  color: var(--rb-text-3);
}

/* Below 768 the brand row cannot hold a logo, a search field and two
   buttons; the field would squeeze the buttons off the edge. Search moves
   to the casino page's own control at that width. */
@media (max-width: 900px) {
  .rb-topsearch {
    display: none;
  }
}

/* -- 5c. buttons ----------------------------------------------------
   Primary = gold fill + dark text. Secondary = outlined.
   Sign Up is the primary action; Login is secondary. Every state is
   defined, including :focus-visible for keyboard users. */
.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 var(--rb-4);
  border-radius: var(--rb-r-btn);
  border: 1px solid transparent;
  font-family: var(--rb-font);
  font-size: 14px;
  font-weight: var(--rb-fw-nav);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, transform 0.05s ease;
}

.rb-btn:active {
  transform: translateY(1px);
}

.rb-btn:focus-visible {
  outline: 2px solid var(--rb-gold);
  outline-offset: 2px;
}

.rb-btn--primary {
  background: var(--rb-gold);
  color: var(--rb-on-gold);
  border-color: var(--rb-gold);
}

.rb-btn--primary:hover {
  background: var(--rb-gold-hi);
  border-color: var(--rb-gold-hi);
  color: var(--rb-on-gold);
}

.rb-btn--secondary {
  background: transparent;
  color: var(--rb-text);
  border-color: var(--rb-border-strong);
}

.rb-btn--secondary:hover {
  background: var(--rb-surface-2);
  border-color: var(--rb-text-2);
  color: var(--rb-text);
}

.rb-btn--danger {
  background: var(--rb-danger);
  color: #fff;
  border-color: var(--rb-danger);
}

.rb-btn[disabled],
.rb-btn--disabled {
  background: var(--rb-surface-2);
  border-color: var(--rb-border);
  color: var(--rb-text-3);
  cursor: not-allowed;
  transform: none;
}

.rb-btn--sm {
  min-height: 30px;
  padding: 0 var(--rb-3);
  font-size: 13px;
}

/* -- 5d. primary navigation ----------------------------------------
   Four top-level destinations, not eleven mixed ones. Sports and Casino
   open a panel of their sub-categories, so new sports can be added later
   without touching the top level. */
.rb-nav {
  background: var(--rb-bg);
  border-bottom: 1px solid var(--rb-border);
  position: relative;
  z-index: 60;
}

.rb-nav__inner {
  display: flex;
  align-items: stretch;
  gap: var(--rb-1);
  max-width: var(--rb-max-width);
  margin: 0 auto;
  padding: 0 var(--rb-gutter);
  height: 44px;
  box-sizing: border-box;
  overflow-x: auto;
  scrollbar-width: none;
}

.rb-nav__inner::-webkit-scrollbar {
  display: none;
}

.rb-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--rb-4);
  border: 0;
  background: transparent;
  color: var(--rb-text-2);
  font-size: 14px;
  font-weight: var(--rb-fw-nav);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}

.rb-nav__link:hover {
  color: var(--rb-text);
}

/* Active state is a gold underline, not a gold slab. A filled pill at
   this size competes with the actual call to action. */
.rb-nav__link--active {
  color: var(--rb-text);
}

.rb-nav__link--active::after {
  content: "";
  position: absolute;
  left: var(--rb-3);
  right: var(--rb-3);
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--rb-gold);
}

.rb-nav__caret {
  font-size: 9px;
  opacity: 0.7;
}

.rb-nav__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: var(--rb-r-pill);
  background: rgba(224, 82, 82, 0.16);
  color: var(--rb-live);
  font-size: 11px;
  font-weight: var(--rb-fw-head);
  letter-spacing: 0.03em;
}

.rb-nav__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rb-live);
}

/* -- 5e. the dropdown a top-level item opens ------------------------ */
.rb-nav__item {
  position: relative;
  display: flex;
}

/* Fixed, not absolute, and positioned from the trigger's measured rect.
   .rb-nav__inner scrolls horizontally on narrow screens, and a box with
   overflow-x: auto resolves overflow-y to auto as well -- so it is a
   scroll container in both axes and was clipping the panel out of
   existence. The dropdown opened at y=122 inside a strip ending at
   y=121: present in the DOM, invisible, and not hit-testable. Nothing
   inside that container can escape it, so the panel leaves it. */
.rb-nav__panel {
  position: fixed;
  min-width: 220px;
  padding: var(--rb-2);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-r-card);
  background: var(--rb-surface);
  box-shadow: var(--rb-shadow-2);
  z-index: 1400;
}

/* The pointer has to cross from the button to the panel without the
   gap between them counting as leaving. */
.rb-nav__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}

.rb-nav__panel-link {
  display: flex;
  align-items: center;
  gap: var(--rb-2);
  width: 100%;
  padding: 9px var(--rb-3);
  border: 0;
  border-radius: var(--rb-r-btn);
  background: transparent;
  color: var(--rb-text-2);
  font-size: 14px;
  font-weight: var(--rb-fw-med);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.rb-nav__panel-link:hover {
  background: var(--rb-surface-2);
  color: var(--rb-text);
}

.rb-nav__panel-count {
  margin-left: auto;
  color: var(--rb-text-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   6. SIDE DRAWER
   ------------------------------------------------------------------
   Grouped rather than a flat list that mixed sports, casino categories
   and individual games at one level. Active item gets a gold left border
   instead of a fully lit row -- quieter, and it reads as premium. */
#sidebar,
.rb-side {
  width: 288px !important;
  max-width: 288px !important;
  background: var(--rb-surface) !important;
  border-right: 1px solid var(--rb-border);
}

/* The spacer that holds the column open beside the content was pinned to
   300px in an earlier pass, so it sat 12px wider than the panel. */
#sidebar-landing {
  width: 288px !important;
  min-width: 288px !important;
  max-width: 288px !important;
}

@media (max-width: 991px) {
  #sidebar,
  .rb-side {
    width: 288px !important;
    max-width: 85vw !important;
  }
}

/* The vendored styles.<hash>.css pushes #sidebar off-screen below 992px
   with transform: translateX(-105%). style.css already cancels it, but the
   drawer should not depend on a second legacy file loading in step with
   this one -- when it didn't (#2) the menu opened to a dimmed page and no
   panel. The drawer is only in the DOM while open, so it never needs a
   transform. */
#sidebar,
.rb-side {
  transform: none !important;
}

.rb-side {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rb-side__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  flex: 0 0 54px;
  padding: 0 var(--rb-4);
  border-bottom: 1px solid var(--rb-border);
  background: var(--rb-surface);
  position: sticky;
  top: 0;
  z-index: 2;
}

.rb-side__title {
  margin: 0;
  font-size: 13px;
  font-weight: var(--rb-fw-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rb-text-2);
}

.rb-side__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--rb-r-btn);
  background: transparent;
  color: var(--rb-text-2);
  font-size: 16px;
  cursor: pointer;
}

.rb-side__close:hover {
  background: var(--rb-surface-2);
  color: var(--rb-text);
}

.rb-side__body {
  flex: 1 1 auto;
  padding: var(--rb-2) 0 var(--rb-4);
}

.rb-side__group {
  padding: var(--rb-3) 0 var(--rb-2);
}

.rb-side__group + .rb-side__group {
  border-top: 1px solid var(--rb-border);
}

.rb-side__label {
  padding: 0 var(--rb-4) var(--rb-2);
  font-size: 11px;
  font-weight: var(--rb-fw-head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rb-text-3);
}

.rb-side__item {
  display: flex;
  align-items: center;
  gap: var(--rb-3);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--rb-4);
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--rb-text-2);
  font-size: 14px;
  font-weight: var(--rb-fw-med);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.rb-side__item:hover {
  background: var(--rb-surface-2);
  color: var(--rb-text);
}

.rb-side__item--active {
  border-left-color: var(--rb-gold);
  background: var(--rb-gold-dim);
  color: var(--rb-text);
  font-weight: var(--rb-fw-nav);
}

/* One icon family, one size, one treatment. The menu previously mixed
   photographic casino icons, flat icons and emoji-styled PNGs. */
.rb-side__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex: 0 0 20px;
  font-size: 15px;
  color: var(--rb-text-3);
}

.rb-side__item--active .rb-side__icon,
.rb-side__item:hover .rb-side__icon {
  color: var(--rb-gold);
}

.rb-side__count {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: var(--rb-r-pill);
  background: var(--rb-surface-2);
  color: var(--rb-text-2);
  font-size: 11px;
  font-weight: var(--rb-fw-nav);
  font-variant-numeric: tabular-nums;
}

.rb-side__foot {
  padding: var(--rb-4);
  border-top: 1px solid var(--rb-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--rb-2) var(--rb-3);
}

.rb-side__foot a {
  color: var(--rb-text-3);
  font-size: 12px;
  text-decoration: none;
}

.rb-side__foot a:hover {
  color: var(--rb-gold);
  text-decoration: underline;
}

.rb-side__rg {
  display: flex;
  align-items: center;
  gap: var(--rb-2);
  margin: 0 var(--rb-4) var(--rb-3);
  padding: var(--rb-3);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-r-card);
  background: var(--rb-bg);
  color: var(--rb-text-2);
  font-size: 12px;
  line-height: 1.45;
  text-decoration: none;
}

.rb-side__rg strong {
  color: var(--rb-text);
  display: block;
  font-size: 13px;
}

/* ---------------------------------------------------------------------
   7. HOME PAGE
   ------------------------------------------------------------------ */

/* -- 7a. section shell: every block gets the same header treatment --- */
.rb-section {
  margin-top: var(--rb-6);
}

.rb-section:first-of-type {
  margin-top: var(--rb-5);
}

.rb-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rb-3);
  margin-bottom: var(--rb-3);
}

.rb-section__title {
  margin: 0;
  font-size: 17px;
  font-weight: var(--rb-fw-head);
  color: var(--rb-text);
  letter-spacing: -0.01em;
}

.rb-section__link {
  color: var(--rb-text-2);
  font-size: 13px;
  font-weight: var(--rb-fw-nav);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.rb-section__link:hover {
  color: var(--rb-gold);
}

@media (min-width: 992px) {
  .rb-section__title {
    font-size: 20px;
  }
}

/* -- 7b. hero ------------------------------------------------------
   Constrained to 5:2 on desktop and 2:1 on mobile, so a promotion is a
   banner rather than the whole first viewport. */
#mainCarousel {
  max-width: var(--rb-max-width);
  margin: var(--rb-4) auto !important;
  padding-left: 0;
  padding-right: 0;
  border-radius: var(--rb-r-hero);
  overflow: hidden;
  border: 1px solid var(--rb-border);
}

#mainCarousel .carousel-item img {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (min-width: 768px) {
  #mainCarousel .carousel-item img {
    aspect-ratio: 5 / 2;
  }
}

@media (min-width: 1200px) {
  #mainCarousel .carousel-item img {
    aspect-ratio: 4 / 1;
  }
}

/* -- 7c. quick access ----------------------------------------------
   Replaces the three unrelated advertisements. Product navigation, not
   advertising: a name, what it is, and a way in. */
.rb-quick {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rb-3);
}

@media (min-width: 576px) {
  .rb-quick {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .rb-quick {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--rb-4);
  }
}

/* ---- the card ------------------------------------------------------
   The sticker used to be position:absolute in the top-left while the
   text was pushed to the bottom of a fixed 108px box. At 375px the card
   is only 166px wide, so the text stack grew tall enough to rise under
   the sticker -- measured: sticker at y13-45, title at y29-47, a 16px
   collision on every card.

   Nudging the padding would only move the collision to the next screen
   width. The sticker is in normal flow now, and the text block is pushed
   down with margin-top:auto, so the two share the column and can never
   occupy the same pixels no matter how narrow the card or how long the
   label. */
.rb-quick__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--rb-2);
  min-height: 148px;
  padding: var(--rb-3);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-r-card);
  background: var(--rb-surface);
  color: var(--rb-text);
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  isolation: isolate;
  transition: border-color 0.18s ease, background 0.18s ease,
    transform 0.18s ease;
}

.rb-quick__card:hover {
  border-color: var(--rb-gold);
  background: var(--rb-surface-2);
  transform: translateY(-2px);
  color: var(--rb-text);
}

/* ---- background artwork -------------------------------------------
   The same sticker again, oversized and faded, bleeding off the bottom
   right corner. It gives the card depth without needing new assets or a
   second download, and because it is behind a z-index and heavily dimmed
   it cannot compete with the label sitting on top of it. */
.rb-quick__card::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -22%;
  width: 78%;
  aspect-ratio: 1;
  background-image: var(--rb-art);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.14;
  z-index: -1;
  transition: opacity 0.2s ease, transform 0.25s ease;
  pointer-events: none;
}

.rb-quick__card:hover::after {
  opacity: 0.22;
  transform: scale(1.06) rotate(-3deg);
}

/* A wash of the sport's own colour, so the six cards are distinguishable
   at a glance rather than being six identical navy rectangles. */
.rb-quick__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 100% 100%,
    var(--rb-tint, transparent) 0%,
    transparent 62%
  );
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

/* ---- the sticker --------------------------------------------------- */
.rb-quick__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--rb-border);
  overflow: hidden;
}

.rb-quick__icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}

/* Font Awesome fallback for anything without its own artwork. */
.rb-quick__icon i {
  color: var(--rb-gold);
  font-size: 16px;
}

/* ---- the label ----------------------------------------------------
   margin-top:auto is what keeps this clear of the sticker: the two are
   siblings in one column, so the browser guarantees the separation. */
.rb-quick__text {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rb-quick__title {
  font-size: 15px;
  font-weight: var(--rb-fw-head);
  line-height: 1.2;
  /* Long labels wrap rather than widening the grid column. */
  overflow-wrap: anywhere;
}

.rb-quick__sub {
  margin-top: 2px;
  color: var(--rb-text-2);
  font-size: 12px;
  font-weight: var(--rb-fw-body);
  line-height: 1.35;
}

/* A live count is a fact about right now, so it gets the status
   treatment rather than being grey supporting text. */
.rb-quick__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: var(--rb-live);
  font-size: 12px;
  font-weight: var(--rb-fw-nav);
}

.rb-quick__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rb-live);
}

.rb-quick__cta {
  margin-top: var(--rb-2);
  color: var(--rb-gold);
  font-size: 12px;
  font-weight: var(--rb-fw-nav);
}

@media (min-width: 992px) {
  .rb-quick__card {
    min-height: 160px;
    padding: var(--rb-4);
  }

  .rb-quick__title {
    font-size: 16px;
  }
}

/* -- 7d. promotion strip -------------------------------------------
   The artwork is free to be as loud as it likes; the container around it
   is not. One radius, one border, one aspect ratio, one button style. */
.rb-promos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rb-3);
}

@media (min-width: 768px) {
  .rb-promos {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--rb-4);
  }
}

.rb-promo {
  display: block;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-r-card);
  overflow: hidden;
  background: var(--rb-surface);
  text-decoration: none;
}

/* ---- upload containment -------------------------------------------
   Posters are uploaded by an admin and can arrive at any size, shape or
   orientation. The rule is that the SLOT decides the geometry and the
   artwork is cropped into it -- never the other way round. Without this
   a tall portrait upload sets its own height and shoves everything below
   it down the page.

   height is fixed by aspect-ratio rather than left auto, and object-fit
   trims the overflow from the centre. A 4000x3000 photo and a 620x250
   banner land in exactly the same box. */
.rb-promo img,
.rb-promo video {
  display: block;
  width: 100%;
  /* 2:1 on phones -- a wider strip loses too much height to be legible
     at 343px across. */
  aspect-ratio: 2 / 1;
  height: auto;
  object-fit: cover;
  object-position: center;
  background: var(--rb-surface-2);
}

@media (min-width: 768px) {
  .rb-promo img,
  .rb-promo video {
    /* The bundled creatives are 620x250; anything else is cropped to
       match so the row stays even. */
    aspect-ratio: 62 / 25;
  }
}

.rb-promo--wide video {
  aspect-ratio: 2 / 1;
}

@media (min-width: 768px) {
  .rb-promo--wide video {
    aspect-ratio: 936 / 160;
  }
}

/* Hero. Same contract: the slot owns the height at every breakpoint, so
   an uploaded banner can never change the height of the page. */
.rb-banner__img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center;
  background: var(--rb-surface-2);
}

@media (min-width: 768px) {
  .rb-banner__img { aspect-ratio: 5 / 2; }
}

@media (min-width: 1200px) {
  .rb-banner__img { aspect-ratio: 4 / 1; }
}

/* Phones (#5). Web artwork and the bundled fallbacks are drawn at ~4:1
   (1920x500, 1600x400); cropping them into the 2:1 phone slot cut the
   copy off both sides ("₹1 000 0…"). Give wide art a 4:1 slot so it
   shows whole, and move the slide dots out from over the artwork -- they
   sat on the "BET & WIN" button. Phone-type banners keep the taller 2:1
   slot they are designed for. */
@media (max-width: 767px) {
  #mainCarousel .carousel-item img.rb-banner__img--wide,
  .rb-banner__img--wide {
    aspect-ratio: 4 / 1;
  }

  #mainCarousel {
    display: flex;
    flex-direction: column;
  }

  #mainCarousel .carousel-inner {
    order: 1;
  }

  #mainCarousel .carousel-indicators {
    order: 2;
    position: static;
    margin: 0;
    padding: 8px 0;
    background: var(--rb-surface);
  }

  #mainCarousel .carousel-indicators [data-bs-target] {
    width: 16px;
    height: 3px;
    margin: 0 3px;
  }

  /* The arrows are centred on the artwork, not the dot strip. */
  #mainCarousel .carousel-control-prev,
  #mainCarousel .carousel-control-next {
    bottom: 19px;
  }
}

/* The hero's loading placeholder has to occupy exactly the slot the
   artwork will, or the page jumps when the banners arrive. */
.rb-banner-skeleton {
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: var(--rb-r-hero);
}

@media (min-width: 768px) {
  .rb-banner-skeleton { aspect-ratio: 5 / 2; }
}

@media (min-width: 1200px) {
  .rb-banner-skeleton { aspect-ratio: 4 / 1; }
}

/* A promo waiting on its artwork keeps the row's shape too. */
.rb-promo.rb-skeleton {
  aspect-ratio: 2 / 1;
  border: 1px solid var(--rb-border);
}

@media (min-width: 768px) {
  .rb-promo.rb-skeleton { aspect-ratio: 62 / 25; }
}

/* Promos are <button>s so they are reachable from the keyboard; buttons
   bring their own chrome that has to be cleared. */
button.rb-promo {
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

button.rb-promo:hover,
.rb-promo--link:hover {
  border-color: var(--rb-gold);
}

.rb-promo__body > span:first-child {
  display: flex;
  flex-direction: column;
}

.rb-promo__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rb-3);
  padding: var(--rb-3);
  border-top: 1px solid var(--rb-border);
}

.rb-promo__title {
  font-size: 14px;
  font-weight: var(--rb-fw-nav);
  color: var(--rb-text);
}

.rb-promo__sub {
  font-size: 12px;
  color: var(--rb-text-2);
}

/* -- 7e. game cards -------------------------------------------------
   Was a huge image with a tiny title welded on. Now image + a metadata
   strip that belongs to the UI, at one fixed aspect ratio so the rail
   does not jump around as artwork of different shapes loads. */
.rb-games {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rb-3);
}

@media (min-width: 576px) {
  .rb-games {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .rb-games {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--rb-4);
  }
}

.rb-game {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-r-card);
  background: var(--rb-surface);
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.rb-game:hover {
  border-color: var(--rb-gold);
  transform: translateY(-2px);
}

.rb-game__art {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--rb-surface-2);
  overflow: hidden;
}

.rb-game__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.rb-game:hover .rb-game__art img {
  transform: scale(1.04);
}

/* Subtle. A full-bleed overlay on hover hides the artwork you are
   trying to choose between. */
.rb-game__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(7, 21, 37, 0.55);
  color: var(--rb-text);
  font-size: 13px;
  font-weight: var(--rb-fw-nav);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.rb-game:hover .rb-game__play {
  opacity: 1;
}

.rb-game__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rb-2);
  padding: var(--rb-2) var(--rb-3);
  border-top: 1px solid var(--rb-border);
  min-height: 46px;
}

.rb-game__meta > span:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rb-game__name {
  font-size: 13px;
  font-weight: var(--rb-fw-nav);
  color: var(--rb-text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.rb-game__cat {
  font-size: 11px;
  color: var(--rb-text-2);
}

.rb-game__arrow {
  color: var(--rb-text-3);
  font-size: 12px;
  flex: 0 0 auto;
}

.rb-game:hover .rb-game__arrow {
  color: var(--rb-gold);
}

/* -- 7f. casino category tiles -------------------------------------- */
.casino-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rb-3);
  padding: 0;
}

@media (min-width: 768px) {
  .casino-tiles {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--rb-4);
  }
}

.casino-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--rb-r-card);
  border: 1px solid var(--rb-border);
  background: var(--rb-surface);
  text-decoration: none;
  aspect-ratio: 16 / 10;
  transition: border-color 0.18s ease;
}

.casino-tile:hover {
  border-color: var(--rb-gold);
}

.casino-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.casino-tile:hover img {
  transform: scale(1.04);
}

.casino-tile__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px var(--rb-3) 10px;
  font-weight: var(--rb-fw-nav);
  font-size: 14px;
  color: #fff;
  background: linear-gradient(to top, rgba(7, 21, 37, 0.92), rgba(7, 21, 37, 0));
}

/* ---------------------------------------------------------------------
   8. SPORTSBOOK
   ------------------------------------------------------------------
   The most functionally important screen in the product, and the one
   that most looked like a raw database table.  */

/* -- 8a. sport tabs, sticky ------------------------------------------ */
.rb-sportbar {
  position: sticky;
  top: var(--rb-header-h);
  z-index: 50;
  background: var(--rb-bg);
  padding-top: var(--rb-2);
  padding-bottom: var(--rb-2);
  border-bottom: 1px solid var(--rb-border);
}

.sport-tabs {
  display: flex;
  gap: var(--rb-2);
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: transparent;
}

.sport-tabs::-webkit-scrollbar {
  display: none;
}

.sport-tab {
  flex: 0 0 auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rb-2);
  padding: 0 var(--rb-4);
  border-radius: var(--rb-r-pill);
  border: 1px solid var(--rb-border);
  background: var(--rb-surface);
  color: var(--rb-text-2);
  font-family: var(--rb-font);
  font-weight: var(--rb-fw-nav);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sport-tab:hover {
  color: var(--rb-text);
  border-color: var(--rb-border-strong);
}

/* Gold background, dark text -- the one place a filled gold pill is
   right, because this is the control the user is operating. */
.sport-tab--active {
  background: var(--rb-gold);
  color: var(--rb-on-gold);
  border-color: var(--rb-gold);
}

.sport-tab__count {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: var(--rb-r-pill);
  font-size: 11px;
  font-weight: var(--rb-fw-head);
  font-variant-numeric: tabular-nums;
  background: var(--rb-surface-2);
  color: var(--rb-text-2);
}

.sport-tab--active .sport-tab__count {
  background: rgba(7, 21, 37, 0.2);
  color: var(--rb-on-gold);
}

/* The casino category strip is the same pill bar with two scroll
   controls either side, since it can hold twenty-odd categories. */
.rb-casinobar {
  display: flex;
  align-items: center;
  gap: var(--rb-2);
}

.rb-casinobar__arrow {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-r-btn);
  background: var(--rb-surface);
  color: var(--rb-text-2);
  font-size: 12px;
  cursor: pointer;
}

.rb-casinobar__arrow:hover {
  color: var(--rb-text);
  border-color: var(--rb-border-strong);
}

/* On a phone the strip already scrolls by touch, so the arrows are just
   two things taking up the room the pills need. */
@media (max-width: 767px) {
  .rb-casinobar__arrow {
    display: none;
  }
}

/* -- 8b. filters ----------------------------------------------------- */
.rb-filters {
  display: flex;
  align-items: center;
  gap: var(--rb-2);
  margin-top: var(--rb-3);
  overflow-x: auto;
  scrollbar-width: none;
}

.rb-filters::-webkit-scrollbar {
  display: none;
}

.rb-chip {
  flex: 0 0 auto;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--rb-3);
  border-radius: var(--rb-r-pill);
  border: 1px solid var(--rb-border);
  background: transparent;
  color: var(--rb-text-2);
  font-size: 13px;
  font-weight: var(--rb-fw-med);
  cursor: pointer;
  white-space: nowrap;
}

.rb-chip:hover {
  color: var(--rb-text);
  border-color: var(--rb-border-strong);
}

.rb-chip--active {
  background: var(--rb-gold-dim);
  border-color: var(--rb-gold);
  color: var(--rb-gold);
}

.rb-search {
  flex: 1 1 160px;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: var(--rb-2);
  height: 32px;
  padding: 0 var(--rb-3);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-r-input);
  background: var(--rb-surface);
  color: var(--rb-text-2);
}

.rb-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--rb-text);
  font-size: 13px;
  outline: none;
}

.rb-search input::placeholder {
  color: var(--rb-text-3);
}

/* -- 8c. the event card ---------------------------------------------
   The single biggest change on this screen. Team names now sit on the
   same line as their own odds, so the eye travels left-to-right once
   instead of matching a name at x=40 to a number at x=1100. */
.rb-events {
  display: flex;
  flex-direction: column;
  gap: var(--rb-2);
  margin-top: var(--rb-3);
}

.rb-event {
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-r-card);
  background: var(--rb-surface);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.rb-event:hover {
  border-color: var(--rb-border-strong);
}

.rb-event__top {
  display: flex;
  align-items: center;
  gap: var(--rb-2);
  padding: 10px var(--rb-3) var(--rb-2);
  color: var(--rb-text-2);
  font-size: 12px;
}

.rb-event__time {
  font-variant-numeric: tabular-nums;
  font-weight: var(--rb-fw-med);
  color: var(--rb-text-2);
}

.rb-event__comp {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--rb-text-3);
}

/* Status never relies on colour alone -- it always carries a word. */
.rb-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--rb-r-pill);
  font-size: 11px;
  font-weight: var(--rb-fw-head);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.rb-status--live {
  background: rgba(224, 82, 82, 0.16);
  color: var(--rb-live);
}

.rb-status--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rb-live);
  animation: rb-pulse 1.6s ease-in-out infinite;
}

.rb-status--soon {
  background: var(--rb-surface-2);
  color: var(--rb-text-2);
}

@keyframes rb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-status--live::before {
    animation: none;
  }
}

/* Column header: 1 / X / 2 sits over the odds so the numbers have a
   meaning without needing the unexplained "BM" label. */
.rb-event__cols {
  display: none;
}

.rb-event__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--rb-3);
  padding: 6px var(--rb-3);
}

.rb-event__row + .rb-event__row {
  padding-top: 0;
}

.rb-event__team {
  font-size: 14px;
  font-weight: var(--rb-fw-med);
  color: var(--rb-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-event__odds {
  display: grid;
  grid-template-columns: repeat(2, 68px);
  gap: 6px;
}

/* -- 8d. odds cells --------------------------------------------------
   Dark surface, thin border, brighter on hover, gold when selected.
   Every cell used to be a saturated cyan block of identical weight,
   which is what made the table tiring to read. */
.rb-odd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: var(--rb-r-btn);
  border: 1px solid var(--rb-border);
  background: var(--rb-surface-2);
  color: var(--rb-text);
  font-size: 14px;
  font-weight: var(--rb-fw-odds);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.rb-odd:hover {
  background: var(--rb-surface-3);
  border-color: var(--rb-border-strong);
}

.rb-odd--selected {
  background: var(--rb-gold);
  border-color: var(--rb-gold);
  color: var(--rb-on-gold);
}

.rb-odd--empty {
  background: transparent;
  border-style: dashed;
  color: var(--rb-text-3);
  cursor: default;
}

.rb-odd--empty:hover {
  background: transparent;
  border-color: var(--rb-border);
}

/* Green only when a price moves up, red when it moves down -- status,
   not decoration. */
.rb-odd--up { color: var(--rb-success); }
.rb-odd--down { color: var(--rb-danger); }

.rb-event__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rb-2);
  padding: var(--rb-2) var(--rb-3) 10px;
}

.rb-event__markets {
  background: none;
  border: 0;
  padding: 0;
  color: var(--rb-text-2);
  font-size: 12px;
  font-weight: var(--rb-fw-nav);
  cursor: pointer;
}

.rb-event__markets:hover {
  color: var(--rb-gold);
}

.rb-event__tv {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--rb-text-3);
  font-size: 11px;
}

/* Desktop: label the odds columns once at the top of the list rather
   than tagging each row. */
@media (min-width: 768px) {
  .rb-event__cols {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--rb-3);
    padding: 0 var(--rb-3) 4px;
  }

  .rb-event__cols-inner {
    display: grid;
    grid-template-columns: repeat(2, 68px);
    gap: 6px;
    text-align: center;
    font-size: 11px;
    font-weight: var(--rb-fw-head);
    letter-spacing: 0.06em;
    color: var(--rb-text-3);
  }

  .rb-event__odds {
    grid-template-columns: repeat(2, 76px);
  }

  .rb-event__cols-inner {
    grid-template-columns: repeat(2, 76px);
  }

  .rb-event__team {
    font-size: 15px;
  }
}

/* Mobile: never squeeze time + market + six prices into one row. The
   card stacks -- time and status on top, then a team and its own prices
   per line. */
@media (max-width: 480px) {
  .rb-event__odds {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }

  .rb-event__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .rb-event__team {
    font-size: 14px;
  }
}

/* -- 8e. skeletons ---------------------------------------------------
   A blank area followed by a sudden pop-in reads as broken. */
.rb-skeleton {
  border-radius: var(--rb-r-card);
  background: linear-gradient(
    90deg,
    var(--rb-surface) 25%,
    var(--rb-surface-2) 37%,
    var(--rb-surface) 63%
  );
  background-size: 400% 100%;
  animation: rb-shimmer 1.4s ease infinite;
}

@keyframes rb-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-skeleton {
    animation: none;
  }
}

.rb-skeleton--event {
  height: 108px;
  margin-bottom: var(--rb-2);
}

.rb-skeleton--tile {
  aspect-ratio: 16 / 10;
}

/* -- 8f-2. a whole section could not load ----------------------------
   Bigger than an empty state and it earns the room: the casino is one of
   the two halves of the product, so when it is missing the page has to
   account for itself rather than showing a thin grey box. */
.rb-unavailable {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--rb-3);
  padding: var(--rb-7) var(--rb-4);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-r-card);
  /* A shallow lift off the page ground, so it reads as a placeholder
     holding the section's place rather than a warning pinned over it. */
  background:
    radial-gradient(120% 100% at 50% 0%, var(--rb-surface-2) 0%, var(--rb-surface) 60%);
}

.rb-unavailable__art {
  color: var(--rb-text-3);
  opacity: 0.75;
}

.rb-unavailable__art svg {
  display: block;
}

.rb-unavailable__title {
  margin: 0;
  font-size: 17px;
  font-weight: var(--rb-fw-head);
  color: var(--rb-text);
}

.rb-unavailable__body {
  margin: 0;
  max-width: 46ch;
  color: var(--rb-text-2);
  font-size: 14px;
  line-height: 1.6;
}

.rb-unavailable__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rb-2);
  margin-top: var(--rb-1);
}

.rb-unavailable__note {
  margin: 0;
  color: var(--rb-text-3);
  font-size: 12px;
}

/* Retry spinner. The one in the vendored bundle is Bootstrap's and
   carries its own colours. */
.rb-spin {
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: rb-rotate 0.7s linear infinite;
}

@keyframes rb-rotate {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rb-spin { animation-duration: 2.4s; }
}

@media (min-width: 768px) {
  .rb-unavailable {
    padding: var(--rb-8) var(--rb-6);
  }

  .rb-unavailable__title {
    font-size: 19px;
  }
}

/* -- 8f. empty / error states ---------------------------------------- */
.rb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rb-2);
  padding: var(--rb-7) var(--rb-4);
  border: 1px dashed var(--rb-border);
  border-radius: var(--rb-r-card);
  background: var(--rb-surface);
  color: var(--rb-text-2);
  text-align: center;
}

.rb-empty__icon {
  font-size: 24px;
  color: var(--rb-text-3);
}

.rb-empty__title {
  color: var(--rb-text);
  font-size: 15px;
  font-weight: var(--rb-fw-nav);
}

.rb-empty__body {
  font-size: 13px;
  max-width: 34ch;
}

/* ---------------------------------------------------------------------
   9. NEUTRALISE THE LEFTOVER CYAN
   ------------------------------------------------------------------
   Hardcoded hexes inside components that the token remap cannot reach.
   Inline colours are fixed at source (a [style*="#hex"] selector cannot
   work: the browser re-serialises inline colours as rgb()). What is left
   here is the legacy class-based markup. */
/* The odds cells rendered by the legacy sports markup. */
.details_small_blue_box,
.odds-box {
  background: var(--rb-surface-2) !important;
  background-color: var(--rb-surface-2) !important;
  border: 1px solid var(--rb-border) !important;
  border-radius: var(--rb-r-btn) !important;
  color: var(--rb-text) !important;
  font-weight: var(--rb-fw-odds) !important;
  font-variant-numeric: tabular-nums;
}

.details_small_blue_box:hover,
.odds-box:hover {
  background: var(--rb-surface-3) !important;
  border-color: var(--rb-border-strong) !important;
}

/* Back/lay rows on the deeper betting screens: pale blue and pink slabs
   with black text. Kept distinguishable, but as tinted surfaces rather
   than full-saturation fills. */
.back-row {
  background-color: rgba(21, 155, 211, 0.14) !important;
  color: var(--rb-text) !important;
}

.lay-row {
  background-color: rgba(224, 82, 82, 0.14) !important;
  color: var(--rb-text) !important;
}

/* ---------------------------------------------------------------------
   10. MOBILE BOTTOM NAVIGATION
   ------------------------------------------------------------------
   Home / Sports / Casino / Bets / Me, so the hamburger is a place you
   visit occasionally rather than the only way to move around. */
.rb-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: flex;
  align-items: stretch;
  background: var(--rb-surface);
  border-top: 1px solid var(--rb-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.rb-tabbar__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* 56px keeps the whole target comfortably thumb-sized */
  min-height: 56px;
  border: 0;
  background: transparent;
  color: var(--rb-text-3);
  font-size: 10px;
  font-weight: var(--rb-fw-med);
  text-decoration: none;
  cursor: pointer;
  position: relative;
}

.rb-tabbar__item i {
  font-size: 17px;
  line-height: 1;
}

.rb-tabbar__item--active {
  color: var(--rb-gold);
}

.rb-tabbar__item--active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--rb-gold);
}

.rb-tabbar__spacer {
  height: 56px;
}

@media (min-width: 992px) {
  .rb-tabbar,
  .rb-tabbar__spacer {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   11. FOOTER + RESPONSIBLE GAMBLING
   ------------------------------------------------------------------
   This is a gambling product, so age limits, self-exclusion and support
   are part of the core UX, not 9px grey text under a pile of logos. */
.rb-trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rb-3);
  margin-top: var(--rb-6);
}

@media (min-width: 768px) {
  .rb-trust {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rb-4);
  }
}

.rb-trust__card {
  display: flex;
  gap: var(--rb-3);
  padding: var(--rb-4);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-r-card);
  background: var(--rb-surface);
  text-decoration: none;
  color: var(--rb-text-2);
}

.rb-trust__card:hover {
  border-color: var(--rb-gold);
  color: var(--rb-text-2);
}

.rb-trust__icon {
  flex: 0 0 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rb-r-btn);
  background: var(--rb-gold-dim);
  color: var(--rb-gold);
  font-size: 15px;
}

.rb-trust__title {
  color: var(--rb-text);
  font-size: 14px;
  font-weight: var(--rb-fw-nav);
  margin-bottom: 2px;
}

.rb-trust__body {
  font-size: 12px;
  line-height: 1.5;
}

.rb-footer {
  margin-top: var(--rb-6);
  border-top: 1px solid var(--rb-border);
  background: var(--rb-surface);
}

.rb-footer__inner {
  max-width: var(--rb-max-width);
  margin: 0 auto;
  padding: var(--rb-6) var(--rb-gutter) var(--rb-5);
  box-sizing: border-box;
}

.rb-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rb-5) var(--rb-4);
}

@media (min-width: 768px) {
  .rb-footer__cols {
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--rb-6);
  }
}

.rb-footer__brand {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .rb-footer__brand {
    grid-column: auto;
  }
}

.rb-footer__logo {
  height: 32px;
  width: auto;
  display: block;
  margin-bottom: var(--rb-3);
}

.rb-footer__blurb {
  color: var(--rb-text-2);
  font-size: 13px;
  line-height: 1.6;
  max-width: 40ch;
}

.rb-footer__heading {
  font-size: 12px;
  font-weight: var(--rb-fw-head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rb-text-3);
  margin-bottom: var(--rb-3);
}

.rb-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rb-footer__list a {
  color: var(--rb-text-2);
  font-size: 13px;
  text-decoration: none;
}

.rb-footer__list a:hover {
  color: var(--rb-gold);
}

.rb-footer__rg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rb-3);
  margin-top: var(--rb-5);
  padding: var(--rb-4);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-r-card);
  background: var(--rb-bg);
}

.rb-footer__age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 2px solid var(--rb-danger);
  border-radius: 50%;
  color: var(--rb-danger);
  font-size: 13px;
  font-weight: var(--rb-fw-head);
}

.rb-footer__rg-text {
  flex: 1 1 260px;
  color: var(--rb-text-2);
  font-size: 12px;
  line-height: 1.55;
}

.rb-footer__rg-text strong {
  color: var(--rb-text);
}

.rb-footer__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rb-4);
  margin-top: var(--rb-5);
  padding-top: var(--rb-4);
  border-top: 1px solid var(--rb-border);
  opacity: 0.55;
}

.rb-footer__logos img {
  height: 22px;
  width: auto;
  /* The provider logos arrive in a dozen different colourways; muted to
     grey so they read as a row of marks rather than confetti. */
  filter: grayscale(1) brightness(1.6);
}

.rb-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rb-3);
  margin-top: var(--rb-4);
  padding-top: var(--rb-4);
  border-top: 1px solid var(--rb-border);
  color: var(--rb-text-3);
  font-size: 12px;
}

.rb-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rb-3);
}

.rb-footer__legal a {
  color: var(--rb-text-3);
  text-decoration: none;
}

.rb-footer__legal a:hover {
  color: var(--rb-gold);
}

/* ---------------------------------------------------------------------
   12. ACCESSIBILITY
   ------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--rb-gold) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

.rb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   FLOATING SUPPORT  (WhatsAppButton.js)
   ------------------------------------------------------------------
   Desktop: two discs bottom-right. Phone (< 992px, where the tab bar is
   shown): one smaller button that clears the tab bar and the safe area,
   opening a two-item menu. The old pair of 60px discs sat at z-index 100
   under a z-index 1200 tab bar, half-buried, and covered odds and the
   footer links (#4). */
.rb-support {
  font-family: var(--rb-font);
}

.rb-support__discs {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rb-support__disc {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--rb-shadow-2);
  transition: transform 0.15s ease;
}

.rb-support__disc:hover {
  transform: scale(1.06);
}

.rb-support__disc--wa {
  background: #25d366;
}

.rb-support__disc--tg {
  background: #0088cc;
}

.rb-support__mobile {
  display: none;
}

@media (max-width: 991px) {
  .rb-support__discs {
    display: none;
  }

  .rb-support__mobile {
    display: block;
    position: fixed;
    right: 12px;
    /* 56px tab bar + the phone's home-indicator area + a gap */
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px);
    /* above page content, below the tab bar (1200) and every modal */
    z-index: 1040;
  }

  .rb-support__fab {
    width: 48px;
    height: 48px;
    border: 1px solid var(--rb-border-strong);
    border-radius: 50%;
    background: var(--rb-gold);
    color: var(--rb-on-gold);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--rb-shadow-2);
    cursor: pointer;
  }

  .rb-support__menu {
    position: absolute;
    right: 0;
    bottom: 58px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 168px;
    padding: 8px;
    border: 1px solid var(--rb-border-strong);
    border-radius: var(--rb-r-card);
    background: var(--rb-surface);
    box-shadow: var(--rb-shadow-2);
  }

  .rb-support__option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--rb-r-btn);
    color: #fff;
    font-weight: var(--rb-fw-med);
    font-size: 15px;
    cursor: pointer;
  }

  .rb-support__option--wa {
    background: #1faa52;
  }

  .rb-support__option--tg {
    background: #0088cc;
  }
}

/* Never float over a login, register or sign-in-help dialog, or the open
   side menu. */
body:has(.auth-modal.auth-visible) .rb-support,
body:has(.forgot-password-modal:not(.hidden)) .rb-support,
body:has(.rb-help) .rb-support {
  display: none;
}

/* On desktop the side menu is a permanent column; on a phone it is an
   overlay drawer. */
@media (max-width: 991px) {
  body:has(#sidebar.rb-side) .rb-support {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   CONTACT US  (ContactUs.js)
   ------------------------------------------------------------------ */
.rb-contact {
  max-width: 720px;
  margin: var(--rb-6) auto var(--rb-7);
  padding: 0 var(--rb-gutter);
  color: var(--rb-text);
}

.rb-contact__title {
  margin: 0 0 var(--rb-2);
  font-size: 26px;
  font-weight: var(--rb-fw-head);
  color: var(--rb-text);
}

.rb-contact__lead {
  margin: 0 0 var(--rb-5);
  color: var(--rb-text-2);
  font-size: 15px;
  line-height: 1.5;
}

.rb-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rb-3);
}

@media (min-width: 640px) {
  .rb-contact__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.rb-contact__card {
  display: flex;
  align-items: center;
  gap: var(--rb-3);
  min-height: 76px;
  padding: var(--rb-4);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-r-card);
  background: var(--rb-surface);
  color: var(--rb-text);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.rb-contact__card:hover {
  border-color: var(--rb-gold);
  background: var(--rb-surface-2);
  color: var(--rb-text);
}

.rb-contact__card > span:not(.rb-contact__icon) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.rb-contact__name {
  font-weight: var(--rb-fw-nav);
  font-size: 16px;
}

.rb-contact__value {
  color: var(--rb-text-2);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.rb-contact__go {
  color: var(--rb-text-3);
}

.rb-contact__muted {
  color: var(--rb-text-2);
}

.rb-contact__note {
  margin-top: var(--rb-5);
  padding: var(--rb-3) var(--rb-4);
  border-left: 3px solid var(--rb-gold);
  background: var(--rb-gold-dim);
  border-radius: var(--rb-r-btn);
  color: var(--rb-text);
  font-size: 14px;
}

/* "24/7 support" in the announcement strip goes to Contact Us. */
.rb-announce__link,
.rb-announce__link:visited {
  color: inherit;
  text-decoration: none;
}

.rb-announce__link:hover {
  color: var(--rb-gold);
}

.rb-contact__icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rb-contact__icon--wa {
  background: #25d366;
}

.rb-contact__icon--tg {
  background: #0088cc;
}

/* Odds cells are <button>s now (#6): drop the UA button chrome. */
button.rb-odd {
  font-family: inherit;
  line-height: 1;
  padding: 0;
  appearance: none;
}

button.rb-odd:disabled {
  opacity: 1;
}

/* ---------------------------------------------------------------------
   LOGIN / REGISTER DIALOGS  (LoginReg.js, auth-form.css)
   ------------------------------------------------------------------
   Still the pre-redesign look (#7): 5px #1A75BE border, light-blue
   buttons, grey captcha box, black labels. Re-skinned here rather than in
   auth-form.css so the palette stays in one file. The Register button
   carries an inline light-blue background, hence the !important. */
.auth-modal .auth-modal-content {
  background: var(--rb-surface) !important;
  border: 1px solid var(--rb-border-strong) !important;
  border-radius: var(--rb-r-hero) !important;
  box-shadow: var(--rb-shadow-2);
  color: var(--rb-text);
}

.auth-modal .auth-header-box h5,
.auth-modal .auth-form-box > .text-center {
  color: var(--rb-text) !important;
  font-weight: var(--rb-fw-head);
}

.auth-modal .auth-close-button,
.auth-modal .auth-cross-icon {
  color: var(--rb-text-2) !important;
  background: transparent !important;
}

.auth-modal label,
.auth-modal .text-black {
  color: var(--rb-text-2) !important;
  font-size: 12px;
  font-weight: var(--rb-fw-nav);
  letter-spacing: 0.04em;
}

.auth-modal .text-danger,
.auth-modal label span {
  color: var(--rb-danger) !important;
}

.auth-modal .auth-input,
.auth-modal .form-control,
.auth-modal #solution {
  background: var(--rb-surface-2) !important;
  border: 1px solid var(--rb-border-strong) !important;
  border-radius: var(--rb-r-input) !important;
  color: var(--rb-text) !important;
  box-shadow: none !important;
}

.auth-modal .auth-input:focus,
.auth-modal .form-control:focus,
.auth-modal #solution:focus {
  border-color: var(--rb-gold) !important;
  outline: none;
}

.auth-modal .auth-input::placeholder,
.auth-modal .form-control::placeholder,
.auth-modal #solution::placeholder {
  color: var(--rb-text-3);
}

/* the +91 country chip */
.auth-modal .input-group-text {
  background: var(--rb-surface-3) !important;
  border-color: var(--rb-border-strong) !important;
  color: var(--rb-text) !important;
}

.auth-modal .auth-eye-icon,
.auth-modal .auth-eye-icon i,
.auth-modal .position-relative svg {
  color: var(--rb-text-2) !important;
  stroke: currentColor;
}

.auth-modal .auth-help-links span,
.auth-modal .auth-link,
.auth-modal .text-red {
  color: var(--rb-gold) !important;
}

.auth-modal .captchabox {
  background: var(--rb-surface-2) !important;
  border: 1px solid var(--rb-border) !important;
  border-radius: var(--rb-r-btn) !important;
}

/* The captcha is a rendered image with dark digits; give it a light
   tile of its own rather than trying to recolour it. */
.auth-modal .captchabox img {
  background: #e9eef4;
  border-radius: 6px;
}

.auth-modal .auth-button,
.auth-modal .btn-primary {
  background: var(--rb-gold) !important;
  border: 1px solid var(--rb-gold) !important;
  border-radius: var(--rb-r-btn) !important;
  color: var(--rb-on-gold) !important;
  font-weight: var(--rb-fw-head) !important;
  font-size: 16px !important;
}

.auth-modal .auth-button:hover,
.auth-modal .btn-primary:hover {
  background: var(--rb-gold-hi) !important;
}

/* "Demo ID" is the secondary action under Login. */
.auth-modal .auth-form > .auth-input-group:last-child .auth-button {
  background: transparent !important;
  color: var(--rb-text) !important;
  border-color: var(--rb-border-strong) !important;
}

/* ---------------------------------------------------------------------
   PHONE LAYOUT FIXES  (#8, #9)
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
  /* #8: the phone header is not a fixed 122px block, so a sport bar stuck
     at top: var(--rb-header-h) floated over the first event card and
     clipped its "All markets" row. The home list is three matches per
     sport; it does not need a sticky switcher on a phone. */
  .rb-sportbar {
    position: static;
  }
}

@media (max-width: 767px) {
  /* #9: the nav strip scrolls sideways at 390px with nothing to say so;
     LIVE and Games sat off-screen. Tighter links fit more, and a fade on
     the right edge shows there is more to swipe to. */
  .rb-nav__link {
    padding: 0 var(--rb-3);
  }

  .rb-nav__inner {
    padding-right: 28px;
  }

  /* The fade is painted over the strip, not applied as a mask on it: a
     mask clips every descendant, and the Sports / Casino dropdowns are
     rendered inside .rb-nav__inner -- a masked strip made them vanish. */
  .rb-nav::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to right, rgba(7, 21, 37, 0), var(--rb-bg));
    pointer-events: none;
  }

  /* #9: the team search was the last item in a sideways-scrolling row,
     off-screen at 390px. Let the row wrap and give the search its own
     full-width line under the chips. */
  .rb-filters {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .rb-filters .rb-search {
    flex: 1 1 100%;
    order: 10;
  }
}

/* ---------------------------------------------------------------------
   MATCH PAGE  (/cricketBet, Cricket.js)  -- #12
   ------------------------------------------------------------------
   Not yet redesigned; these rules make it readable on a phone in the
   same palette, scoped to .rb-match so no other page is touched. */
.rb-match__head {
  padding: var(--rb-3) var(--rb-3) var(--rb-2);
  border-bottom: 1px solid var(--rb-border);
}

.rb-match__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: var(--rb-fw-head);
  color: var(--rb-text);
}

.rb-match__meta {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--rb-text-2);
}

/* Price cells: the Lay column was cyan (.bg-info) and pink (.bg-pink1)
   blocks with black text. Same neutral cell as the rest of the site. */
.rb-match .bg-info,
.rb-match .bg-pink1 {
  background-color: var(--rb-surface-2) !important;
  border: 1px solid var(--rb-border) !important;
}

.rb-match .bg-info,
.rb-match .bg-info *,
.rb-match .bg-pink1,
.rb-match .bg-pink1 *,
.rb-match .betting-row .text-black {
  color: var(--rb-text) !important;
}

/* The fancy-market filter strip was a white bar (.bg-light). */
.rb-match .match-header .bg-light {
  background: transparent !important;
}

.rb-match .match-header .bg-light > div {
  border: 1px solid var(--rb-border-strong) !important;
  color: var(--rb-text-2) !important;
  background: transparent !important;
  border-radius: var(--rb-r-pill) !important;
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* 4rem cells with fs-5 (17.5px) text could not hold "SUSPENDED" or a
     four-digit bookmaker price like 2857 / 4000 -- they overflowed and
     were clipped. Let the cell size to its content from a sensible
     minimum and set the numbers a step smaller. */
  .rb-match .betting-row [style*="width: 4rem"],
  .rb-match .betting-row [style*="width: 3.2rem"] {
    width: auto !important;
    min-width: 3.25rem;
    padding: 6px 6px !important;
    font-size: 15px !important;
    white-space: nowrap;
    text-align: center;
  }

  .rb-match .betting-row h5 {
    font-size: 15px !important;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .rb-match .betting-row {
    gap: var(--rb-2);
    align-items: center;
  }
}

/* Login / register: cookies blocked in this browser (#14). */
.rb-cookie-warn {
  margin: 0 0 var(--rb-3);
  padding: var(--rb-3);
  border: 1px solid var(--rb-danger);
  border-radius: var(--rb-r-btn);
  background: rgba(224, 82, 82, 0.12);
  color: var(--rb-text);
  font-size: 13px;
  line-height: 1.45;
}

/* Shown for the moment a lazily loaded admin screen is fetched (#13). */
.rb-route-loading {
  min-height: 60vh;
  background: var(--rb-bg);
}

/* ---------------------------------------------------------------------
   LEGACY SPORT LISTS  (/inplay, and the older Cricket/Football/Tennis
   list markup: Inplays, CricketAll, FootballReal, TennisReal, Sports)
   ------------------------------------------------------------------
   The vendored styles.<hash>.css paints these odds black (rgb 0,0,0) in
   Poppins on what section 2 turned into a navy cell, and team names in
   Roboto Condensed -- black-on-blue in a different typeface from the
   rest of the site. Same cell, type and colours as the redesigned
   EventCard instead. */
.details_small_blue_box,
.odds-box {
  background: var(--rb-surface-2) !important;
  border: 1px solid var(--rb-border) !important;
  border-radius: var(--rb-r-btn);
}

.odds-box span,
.details_small_blue_box span {
  color: var(--rb-text) !important;
  font-family: var(--rb-font) !important;
  font-weight: var(--rb-fw-odds) !important;
  font-variant-numeric: tabular-nums;
}

.details_box_t_name,
.details_box_t_name span,
.details_box_t_name .vs,
.details_box_team,
.details_box_time,
.details_box_time * {
  font-family: var(--rb-font) !important;
  color: var(--rb-text) !important;
}

.details_box_t_name .vs {
  color: var(--rb-text-2) !important;
  font-weight: var(--rb-fw-med);
}

/* /inplay sport picker (InPlayCom) */
.inplay-container .inplay-header {
  color: var(--rb-text) !important;
  font-family: var(--rb-font) !important;
  font-weight: var(--rb-fw-head);
}

.inplay-container .game-icon {
  border: 1px solid var(--rb-border-strong) !important;
  border-radius: var(--rb-r-btn);
  background: var(--rb-surface-2);
}

.inplay-container .game-label {
  color: var(--rb-text-2) !important;
  font-family: var(--rb-font) !important;
  font-weight: var(--rb-fw-nav);
}

.inplay-container .active .game-icon {
  border-color: var(--rb-gold) !important;
  box-shadow: 0 0 0 1px var(--rb-gold);
}

.inplay-container .active .game-label {
  color: var(--rb-gold) !important;
}

/* /inplay row icons -- TV / BM / F -- are shortcuts into the match page
   now. The artwork is the template's saturated cyan; render it in the
   neutral icon tone and light it gold on hover like other controls. */
.rb-inplay-shortcut,
.middle-detail img.small-grid {
  cursor: pointer;
  filter: grayscale(1) brightness(1.35);
  opacity: 0.85;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.rb-inplay-shortcut:hover,
.middle-detail img.small-grid:hover {
  filter: grayscale(1) brightness(1.35) sepia(1) saturate(6) hue-rotate(-5deg);
  opacity: 1;
}

/* The odds strip on /inplay opens the match; say so with the cursor. */
.runnners-odds-details .odds-box {
  cursor: pointer;
}

/* Landing on a section from those shortcuts: keep it clear of the header. */
#rb-match-top,
#rb-bookmaker,
#rb-fancy {
  scroll-margin-top: 130px;
}

/* ---------------------------------------------------------------------
   LOGO  (rajbet65-logo.png, ~7:1 wordmark)
   ------------------------------------------------------------------
   The old mark was ~2.7:1, so the same heights now give a much wider
   logo. Size the header by height on desktop and by width on phones, so
   it never pushes Log in / Sign up off the bar. */
.rb-topbar__logo img {
  height: 28px;
  width: auto;
  max-width: 100%;
}

@media (max-width: 575px) {
  .rb-topbar__logo img {
    height: auto;
    width: 34vw;
    max-width: 150px;
  }
}

.rb-footer__logo {
  height: 26px;
  width: auto;
}

/* Everywhere else it appears (old headers, old footer, menu, dialogs):
   never stretched, never wider than its box. */
img[src$="rajbet65-logo.png"] {
  object-fit: contain;
  max-width: 100%;
}

/* ---------------------------------------------------------------------
   HERO: FIT THE ARTWORK TO THE SCREEN
   ------------------------------------------------------------------
   The hero used to crop every banner into a fixed slot per breakpoint
   (4:1 laptop, 5:2 tablet, 2:1 / 4:1 phone), so text near the edges was
   lost on some screens. Carousel.js now measures the first banner and
   sets --rb-hero-ratio; the slot takes that shape and scales with the
   screen width, so the whole banner is visible everywhere. Slides of a
   different shape are fitted inside it (contain) rather than cut, and
   the carousel height stays steady between slides. */
#mainCarousel.rb-hero--fit .carousel-item img,
#mainCarousel.rb-hero--fit .carousel-item img.rb-banner__img--wide {
  aspect-ratio: var(--rb-hero-ratio, 4 / 1) !important;
  object-fit: contain !important;
  background: var(--rb-surface-2);
}

/* ---------------------------------------------------------------------
   DRAWER PROFILE  (Sidebar.js, signed-in players)
   ------------------------------------------------------------------
   The player's name, balance and Deposit / Withdraw at the top of the
   menu -- replacing the user-ID chip that floated over the header on
   every page. */
.rb-side__profile {
  padding: var(--rb-3) var(--rb-4) var(--rb-4);
  border-bottom: 1px solid var(--rb-border);
  background: var(--rb-surface-2);
}

.rb-side__who {
  display: flex;
  align-items: center;
  gap: var(--rb-3);
  margin-bottom: var(--rb-3);
}

.rb-side__avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rb-gold-dim);
  color: var(--rb-gold);
  font-size: 18px;
}

.rb-side__whotext {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rb-side__username {
  color: var(--rb-text);
  font-weight: var(--rb-fw-head);
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-side__balance {
  color: var(--rb-text-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.rb-side__money {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rb-2);
}

.rb-side__item--logout,
.rb-side__item--logout .rb-side__icon {
  color: var(--rb-danger) !important;
}

/* ---------------------------------------------------------------------
   PROMOTIONS: SHOW THE WHOLE CREATIVE
   ------------------------------------------------------------------
   Promo images were forced into a 2:1 slot on phones (62:25 from 768px)
   with object-fit: cover, so the bundled 620x250 creatives -- and any
   upload of another shape -- lost their sides on a phone. Like the hero,
   the slot now takes the image's own shape and scales with the screen,
   so nothing is cut at any width. */
.rb-promo img,
.rb-promo video,
.rb-promo--wide video {
  aspect-ratio: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* =====================================================================
   ACCOUNT PAGES  (Deposit, Withdraw, Bets / reports)
   =====================================================================
   Pre-redesign pages styled almost entirely inline: light-blue and white
   panels, `color: black` labels, a red "Load Report" and grey "Reset"
   button, black table headers, Poppins / serif type. Re-skinned here
   without touching the pages' logic (these are the money screens).

   Page wrappers: Deposit renders inside #content100, the report pages
   inside <app-reports>, and several pages (Bets, Withdraw) inside a div
   whose inline background is --dark-theme-color-navbar -- a *text*
   colour after section 2's remap, which is what painted them #f5f7fa. */

/* 1. That wrapper, and the ~39 other inline backgrounds using the same
      text variable, get the page ground. */
[style*="background: var(--dark-theme-color-navbar)"],
[style*="background-color: var(--dark-theme-color-navbar)"] {
  background: var(--rb-bg) !important;
}

/* 2. Type and text colour. */
:is(#content100, app-reports, .search-table, [style*="var(--dark-theme-color-navbar)"]),
:is(#content100, app-reports, .search-table, [style*="var(--dark-theme-color-navbar)"]) :is(p, span, label, h1, h2, h3, h4, h5, h6, td, th, li, div, button, input, select, textarea, a) {
  font-family: var(--rb-font) !important;
}

:is(#content100, app-reports, .search-table, [style*="var(--dark-theme-color-navbar)"]) :is([style*="color: black"], [style*="color: rgb(0, 0, 0)"], .text-black, .text-dark, .bb_head, .curvybox, h3, h4, h5, label) {
  color: var(--rb-text) !important;
}

/* 3. Panels. */
#content100 .tab-content,
#content100 .st_blog_detail,
#content100 .bb_transfer_subsection {
  background: transparent !important;
  border-color: var(--rb-border) !important;
}

:is(#content100, app-reports, .search-table, [style*="var(--dark-theme-color-navbar)"]) :is(.recharge-item, .card, table, .table, .table-borderless, tbody, tr) {
  background: var(--rb-surface) !important;
  color: var(--rb-text) !important;
  border-color: var(--rb-border) !important;
}

:is(#content100, app-reports, .search-table, [style*="var(--dark-theme-color-navbar)"]) :is(td, .table td) {
  background: transparent !important;
  color: var(--rb-text) !important;
  border-color: var(--rb-border) !important;
}

/* table headers were bg-black / white */
:is(#content100, app-reports, .search-table, [style*="var(--dark-theme-color-navbar)"]) :is(th, thead th, th.bg-black) {
  background: var(--rb-surface-2) !important;
  color: var(--rb-text-2) !important;
  border-color: var(--rb-border) !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* 4. Form controls: white selects and file inputs. */
:is(#content100, app-reports, .search-table, [style*="var(--dark-theme-color-navbar)"]) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
  background: var(--rb-surface-2) !important;
  color: var(--rb-text) !important;
  border: 1px solid var(--rb-border-strong) !important;
  border-radius: var(--rb-r-input) !important;
  min-height: 40px;
}

:is(#content100, app-reports, .search-table, [style*="var(--dark-theme-color-navbar)"]) :is(input, select, textarea):focus {
  border-color: var(--rb-gold) !important;
  outline: none;
  box-shadow: none !important;
}

:is(#content100, app-reports, .search-table, [style*="var(--dark-theme-color-navbar)"]) input::placeholder {
  color: var(--rb-text-3) !important;
  font-family: var(--rb-font) !important;
}

/* Bootstrap's success green (#198754) is too dark on navy. */
:is(#content100, app-reports, .search-table, [style*="var(--dark-theme-color-navbar)"]) .text-success {
  color: var(--rb-success) !important;
}

:is(#content100, app-reports, .search-table, [style*="var(--dark-theme-color-navbar)"]) input[type="file"]::file-selector-button {
  background: var(--rb-surface-3);
  color: var(--rb-text);
  border: 1px solid var(--rb-border-strong);
  border-radius: var(--rb-r-btn);
  padding: 6px 12px;
  margin-right: 10px;
  font-family: var(--rb-font);
}

/* 5. Buttons: the red "demoaccount" and blue info buttons are the
      primary action (gold); the grey #ccc one is secondary. */
:is(#content100, app-reports, .search-table, [style*="var(--dark-theme-color-navbar)"]) :is(button[style*="--dark-theme-demoaccount"], .btn-info, .btn-primary, .bank-submit-btn) {
  background: var(--rb-gold) !important;
  border: 1px solid var(--rb-gold) !important;
  color: var(--rb-on-gold) !important;
  border-radius: var(--rb-r-btn) !important;
  font-weight: var(--rb-fw-head) !important;
}

:is(#content100, app-reports, .search-table, [style*="var(--dark-theme-color-navbar)"]) button[style*="background-color: rgb(204, 204, 204)"] {
  background: transparent !important;
  border: 1px solid var(--rb-border-strong) !important;
  color: var(--rb-text) !important;
  border-radius: var(--rb-r-btn) !important;
}

/* 6. Report tabs (Account Statement / Sports Bets / Casino...). */
.popular-tab li {
  background: transparent !important;
  color: var(--rb-text-2) !important;
  border: 1px solid var(--rb-border) !important;
  border-radius: var(--rb-r-pill) !important;
  font-family: var(--rb-font) !important;
}

.popular-tab li.active {
  background: var(--rb-gold-dim) !important;
  border-color: var(--rb-gold) !important;
  color: var(--rb-gold) !important;
}

/* The deposit QR must stay on white to scan. */
#content100 img.qrcodeImage {
  background: #fff !important;
  border-radius: var(--rb-r-btn);
}

/* Deposit / withdraw: the legacy template sized these at 8px, which is
   below anything else on the site and unreadable on a phone. The UPI id
   and account number in particular are meant to be read off the screen
   and typed into a banking app. */
#content100 .payment,
#content100 .sectionList,
#content100 .bb_tran_subdiv,
#content100 .bb_tran_subdiv_sec {
  font-size: 13px;
}

/* With only one payment method configured the row held a single panel
   pinned left, with dead space beside it. Centre whatever is present --
   one method centres, two still sit side by side. */
#content100 .payment-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}

/* The two panels were different heights and widths, so the QR and the UPI
   box never lined up. */
#content100 .payment-list > .payment,
#content100 .payment-list > .qr {
  flex: 0 1 240px;
  max-width: 100%;
  margin: 0;
}

/* The legacy sheet paints this panel with --dark-theme-white-color, which
   the design system maps to --rb-text (near-white) -- and the UPI id inside
   is that same near-white, so where the rule bites the id is invisible on a
   white block. Pin both ends: panel on the card surface, text in content
   ink. The !important is needed because the legacy selector carries two
   attribute qualifiers. */
#content100 .payment-list .payment,
#content100 .payment-list .qr {
  background: var(--rb-surface) !important;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-r-btn);
  padding: 12px;
}

#content100 .payment-list .payment,
#content100 .payment-list .payment .bb_bank_name,
#content100 .payment-list .payment .bb_tran_subdiv_sec {
  color: var(--rb-text) !important;
}

/* The QR itself still has to sit on white so a camera can read it -- only
   its surrounding panel is themed. */
#content100 .payment-list .qr img.qrcodeImage {
  background: #fff !important;
}

/* Withdraw: the Add / Existing Account switch. The selected half is gold,
   so its label needs the on-gold ink, not white. */
.box .option > div:not(.curvybox) {
  color: var(--rb-on-gold) !important;
  font-weight: var(--rb-fw-head);
}

.box .option > .curvybox {
  color: var(--rb-text) !important;
}

/* ---------------------------------------------------------------------
   CHANGE PASSWORD (standalone page and the Bets tab)
   ------------------------------------------------------------------
   Bootstrap floating-label fields: the label sits where the placeholder
   would be and floats up once the field has focus or a value. The
   account-page rule that makes placeholders visible made both show, so
   the label printed on top of the placeholder text. */
.form-floating > input::placeholder,
:is(#content100, app-reports, .search-table, [style*="var(--dark-theme-color-navbar)"]) .form-floating > input::placeholder {
  color: transparent !important;
}

.form-floating > label,
.form-floating > .floating-label {
  color: var(--rb-text-2) !important;
  font-family: var(--rb-font) !important;
  font-weight: var(--rb-fw-med);
  background: transparent !important;
}

/* A stray #9e82ee (lilac) inline frame around the card. */
.change-pass {
  border: 0 !important;
}

.change-pass .form-box,
.change-pass .bg-white {
  background: var(--rb-surface) !important;
  border: 1px solid var(--rb-border) !important;
  border-radius: var(--rb-r-card) !important;
}

/* ---------------------------------------------------------------------
   LIVE TV: HIDDEN UNTIL A STREAM PROVIDER EXISTS
   ------------------------------------------------------------------
   "Watch Live" on the cricket / football / tennis match pages loads
   /proxy-stream/<id>, which nothing serves: nginx proxies only /api,
   /admin/(webapi|api|manager), /socket.io, /payment and /game, and the
   old stream host no longer resolves. The player opened black. The block
   (.livetvv) is hidden rather than deleted -- remove this rule once a
   stream is wired up. The scoreboard below it is unaffected. */
.livetvv {
  display: none !important;
}

/* The desktop copy of the same Live TV block (d-lg-block, in .betTv). */
div.position-relative:has(> .bg-black button.live-stream-button) {
  display: none !important;
}

/* ---------------------------------------------------------------------
   PRIVACY / COOKIE POLICY  (CookiePolicy.js)
   ------------------------------------------------------------------
   The policy text sat in a Bootstrap .modal-content -- white -- while the
   text colour came from the dark theme, so the page read as an empty
   white box. */
app-terms-and-condiitons .main-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

app-terms-and-condiitons .modal-content,
app-terms-and-condiitons .modal-header {
  background: var(--rb-surface) !important;
  border: 1px solid var(--rb-border) !important;
  border-radius: var(--rb-r-card) !important;
  color: var(--rb-text-2) !important;
  padding: var(--rb-4);
}

app-terms-and-condiitons .modal-header {
  background: transparent !important;
  border: 0 !important;
  padding-left: 0;
}

app-terms-and-condiitons :is(p, b, strong, li, span, div, h4, h5) {
  color: var(--rb-text-2) !important;
  font-family: var(--rb-font) !important;
}

app-terms-and-condiitons :is(strong, b, h4, h5, .cookiepolicy-header) {
  color: var(--rb-text) !important;
}

app-terms-and-condiitons hr {
  border-color: var(--rb-border);
  opacity: 1;
}

/* ---------------------------------------------------------------------
   STATUS COLOURS AND QUICK STAKES
   ------------------------------------------------------------------
   Statements and bet lists colour amounts and statuses inline with the
   named colours green / red / orange -- #008000 and friends are near
   invisible on navy. Map them to the palette's status colours. */
:is(b, span, td, p, div, strong)[style*="color: green"] {
  color: var(--rb-success) !important;
}

:is(b, span, td, p, div, strong)[style*="color: red"] {
  color: var(--rb-danger) !important;
}

:is(b, span, td, p, div, strong)[style*="color: orange"] {
  color: var(--rb-gold) !important;
}

/* Bet slip quick-stake buttons (+100 ... +50k): a legacy gradient under
   light text. Neutral chip, like the rest of the controls. */
.homebet_set {
  background: var(--rb-surface-3) !important;
  background-image: none !important;
  border: 1px solid var(--rb-border-strong) !important;
  color: var(--rb-text) !important;
  border-radius: var(--rb-r-btn) !important;
  font-family: var(--rb-font) !important;
}

.homebet_set:hover {
  border-color: var(--rb-gold) !important;
  color: var(--rb-gold) !important;
}

/* ---------------------------------------------------------------------
   SIGNED-IN HEADER BAR  (.rb-authbar, Header.js)
   ------------------------------------------------------------------
   The signed-in row -- menu button, logo, balance / exposure -- was not
   on one line: the menu sat in a wrapper with Bootstrap mt-4, the logo
   image was a 70px box inside a 60px link (it hung below the bar), and
   the balance stack was pinned to the top. Same geometry as the
   signed-out .rb-topbar__inner instead: one 50px row, everything centred
   on it, 16px gutters. */
.header-container > .container-fluid:has(> .rb-authbar) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.rb-authbar {
  display: flex !important;
  align-items: center !important;
  gap: var(--rb-3);
  min-height: 50px;
  max-width: var(--rb-max-width);
  margin: 0 auto;
  padding: 0 var(--rb-gutter);
  box-sizing: border-box;
}

/* Doubled class: Bootstrap's px-3 / px-1 utilities are !important too and
   load after this file, so a single-class selector lost the tie and the
   row picked up 16px + 4px of stray side padding. */
.rb-authbar.rb-authbar > * {
  display: flex;
  align-items: center;
  padding: 0 !important;
  margin: 0 !important;
  align-self: center;
}

.rb-authbar .sidebar-header,
.rb-authbar .site_menu,
.rb-authbar .header_menu_bar {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* style.css pins `.sidebar-header .site_menu` to flex: 0 0 56px
   !important -- a 56px slot around a 40px button, and the flex basis wins
   over width. Size it to the button. */
.rb-authbar .sidebar-header .site_menu {
  flex: 0 0 auto !important;
}

/* Menu button -> logo spacing: the same 12px gap as the signed-out bar. */
.rb-authbar .sidebar-header {
  gap: var(--rb-3);
}

.rb-authbar .sidenav-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.rb-authbar a.logo-style {
  display: flex !important;
  align-items: center;
  width: auto !important;
  height: 40px !important;
  /* The row's 12px gap already separates it from the menu button; same
     x-position as the signed-out logo, so nothing jumps on login. */
  margin: 0 !important;
}

.rb-authbar img.logo-img {
  width: auto !important;
  height: 28px !important;
  max-width: 100%;
}

@media (max-width: 575px) {
  .rb-authbar img.logo-img {
    height: auto !important;
    width: 34vw !important;
    max-width: 150px;
  }
}

.rb-authbar .account-info {
  display: flex;
  align-items: center;
  margin: 0 !important;
}

/* The four chips (Deposit / Withdrawal, balance / exposure): one line and
   one height each. "Withdrawal" wrapped onto two lines from tablet width,
   making its button 43px and the whole bar 70px tall. */
.rb-authbar .account-info .flex-column {
  gap: 4px;
  justify-content: center;
}

.rb-authbar .account-info button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  white-space: nowrap;
  line-height: 1 !important;
  font-size: 12px !important;
}

.rb-authbar .account-info button span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* ---------------------------------------------------------------------
   CAROUSEL: NO BLANK FRAME BETWEEN SLIDES
   ------------------------------------------------------------------
   The page loads Bootstrap 4.5.2's CSS from the CDN (index.html) next to
   Bootstrap 5's JavaScript. During a slide change BS5 marks the incoming
   slide `carousel-item-next carousel-item-start`; BS4's rule
     .carousel-item-next:not(.carousel-item-left) { translateX(100%) }
   still matches (BS5 never adds -left), so the incoming banner was held
   off-screen for the whole 0.6s while the outgoing one slid away -- an
   empty banner area, then the new banner snapped in. Put the incoming
   slide where BS5 intends it: sliding to 0 alongside the outgoing one. */
.carousel .carousel-item-next.carousel-item-start,
.carousel .carousel-item-prev.carousel-item-end {
  transform: none !important;
}

.carousel .active.carousel-item-start {
  transform: translateX(-100%) !important;
}

.carousel .active.carousel-item-end {
  transform: translateX(100%) !important;
}