/* ===================================================================
   portal_legacy.css
   Ported from boiji_client theme.scss / base.scss / header.scss /
   card.scss / form.scss / table.scss  (Bootstrap 4.0.0-alpha.5 → BS5)
   All colours resolved to CSS custom properties on :root.
   Only opacity-only rgba() overlays are allowed as literals.
   =================================================================== */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* Bridge panel theme variables into the older legacy variable names. */
  --color-primary:          var(--accent, #DAA520);
  --color-primary-light:    var(--accent-soft, #F5C358);
  --color-bg-body:          var(--primary-bg, #000000);
  --color-bg-darkest:       var(--sidebar-bg, var(--primary-bg, #000000));
  --color-bg-dark:          var(--panel-bg, var(--primary-bg, #000000));
  --color-bg-medium:        var(--secondary-bg, #222222);
  --color-bg-card:          var(--card-bg, #333333);
  --color-bg-footer:        var(--footer-bg, var(--panel-bg, #000000));
  --color-maroon:           var(--accent-brand, #800000);
  --color-text:             var(--text-main, #ffffff);
  --color-text-white:       var(--text-main, #ffffff);
  --color-text-muted:       var(--text-muted-strong, var(--text-muted, #cccccc));
  --color-text-dark:        var(--dl-color-theme-accent1, #000000);
  /* Text used on fixed light surfaces such as legacy memo bubbles.
     Do not inherit --dl-color-theme-accent1 here; many themes set it to white. */
  --color-text-on-light:    var(--text-on-light, #1f2937);
  --color-text-on-light-muted: var(--text-on-light-muted, #4b5563);
  --color-link:             var(--provider-pill-text, var(--accent-soft, #ffd700));
  --color-link-hover:       var(--accent-soft, #ffffff);
  --color-border-card:      var(--border-soft, #333333);
  --color-border-breadcrumb:var(--border-soft, #444444);
  --color-border-modal-hdr: var(--panel-bg, #222222);
  --color-result-digit:     var(--result-pill-text, var(--accent, gold));
  --color-accent-green:     var(--accent-success, #5cb85c);
  --color-accent-orange:    var(--accent-info, #f0ad4e);
  --color-accent-red:       var(--accent-danger, #d9534f);
  --color-accent-blue:      var(--accent-info, #24BBF2);
  --color-scrollbar-thumb:  var(--scrollbar-thumb, rgba(220,220,220,0.8));
  --color-scrollbar-track:  var(--primary-bg, #f7f7f9);
}

/* ===== BASE ===== */

/* Global font and body */
body {
  font-family: "Lato", sans-serif;
  background-color: var(--color-bg-body);
  color: var(--color-text);
}

/* Tenant artwork is injected by the Meteor layout from panel configuration. */
body.body-home {
  background-color: var(--color-bg-body);
  background-image: none;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Global link colours – boiji_client theme.scss uses gold default, white on hover. */
a {
  color: var(--color-link);
}

a:hover,
a:focus {
  color: var(--color-link-hover);
  text-decoration: none;
}

/* Bootstrap 5 ships dark text defaults (`--bs-body-color`, `.text-muted !important`)
   that fight boiji's dark UI. Keep muted labels readable on dark surfaces. */
.text-muted {
  color: var(--color-text-muted, #cccccc) !important;
}

/* Light Bootstrap surfaces still need the original dark muted tone. */
.list-group .list-group-item:not(.active) .text-muted,
.card-ticket-list .text-muted,
.card-receiver .text-muted,
.card-sender .text-muted,
.dropdown-menu .text-muted {
  color: #6c757d !important;
}

.btn-outline-secondary {
  color: var(--color-text-muted, #cccccc);
  border-color: var(--color-text-muted, #cccccc);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  color: var(--color-text-dark, #000000);
  background-color: var(--color-text-muted, #cccccc);
  border-color: var(--color-text-muted, #cccccc);
}

/* Light border on plain text inputs */
input[type=text],
input[type=number],
input[type=password] {
  border-color: #ccc;
}

/* Footer */
footer {
  background-color: var(--color-bg-footer);
  padding-top: 20px;
  padding-bottom: 20px;
}

body.legacy-footer-transparent footer {
  background: transparent !important;
  background-color: transparent !important;
}

/* Remove container gutter (full-width layout) */
.container-fluid {
  padding-left: 0px;
  padding-right: 0px;
}

/* Body container top offset when header is NOT fixed */
#container-body {
  --legacy-sticky-header-slot: 160px;
  margin-top: 0px;
}

/* Body container top offset when header IS fixed (desktop) */
#container-body.fixed {
  /* The Bitbucket reference uses a fixed 160px replacement for the header's
     normal-flow height. Meteor tenant logos are not a fixed size, so that
     literal changed the document height as soon as the header became fixed
     and Chrome's mobile scroll anchoring pulled the QRIS form backwards.
     top.ejs measures the same normal-flow slot before fixing the header; the
     reference value remains the safe fallback for standalone/early render. */
  margin-top: var(--legacy-sticky-header-slot, 160px) !important;
}

/* Suppress spinner arrows on number inputs */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

/* Custom scrollbar – webkit */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
}

::-webkit-scrollbar-track {
  background-color: var(--color-scrollbar-track);
}

/* Utility cursor helpers */
.clickable {
  cursor: pointer;
}

/* Periode column trigger on results page — link styled to look like the surrounding text
   while still being clickable. Matches boiji_client's "Pseudo-link to open round detail". */
.btn-select-round a {
  color: var(--color-primary, #d4a520);
  cursor: pointer;
}
.btn-select-round a:hover {
  color: var(--color-secondary, #c0922a);
  text-decoration: underline !important;
}

.unclickable {
  cursor: not-allowed;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.25;
}

/* Scrollbox – fixed-height overflow container for ticker-style lists.
   Mirrors boiji_client base.scss .scrollbox: 150px height, no horizontal scroll. */
.scrollbox {
  height: 150px;
  overflow-y: hidden;
}

.scrollbox ul {
  padding-left: 0;
  margin-bottom: 0;
  width: 100%;
  list-style: none; /* remove default disc bullets — boiji's <ul> rendered flat */
}

/* Each <li> uses Bootstrap's .row to lay out the col-5/col-4/col-3 children
   horizontally. Without flex, BS5 col-* default to block stacking. */
.scrollbox ul li {
  padding: 6px;
  border-bottom: solid 1px var(--color-border-card, #ccc);
}

/* Reduced button horizontal padding (tight layout on mobile) */
.btn {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

/* Tighter container and row gutters (matching BS4-alpha 0.75em convention) */
.container {
  padding-left: 0.75em;
  padding-right: 0.75em;
}

.row {
  margin-left: -0.375em;
  margin-right: -0.375em;
}

/* All BS4-alpha column classes get the same 0.375em gutter */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
.col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
  padding-left: 0.375em;
  padding-right: 0.375em;
}

/* Floating action buttons (fixed bottom corners) */
.btn-float-bottom-left {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 100;
}

.btn-float-bottom-right {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 100;
}

.btn-float-bottom-left.transparent,
.btn-float-bottom-right.transparent {
  opacity: 0.75;
}

.btn-float-bottom-left.transparent:hover,
.btn-float-bottom-right.transparent:hover {
  opacity: 1;
}

/* Dropdown items that are disabled styled italic-bold (BS5 keeps .disabled) */
.dropdown-menu .dropdown-item.disabled {
  font-style: italic;
  font-weight: bold;
}

/* Force muted/success/warning/danger text to white inside active list items */
.list-group .list-group-item.active .text-muted,
.list-group .list-group-item.active .text-success,
.list-group .list-group-item.active .text-warning,
.list-group .list-group-item.active .text-danger {
  color: white !important;
}

/* Label-group: inline label+value pair with border-right-radius pill look */
.label-group {
  position: relative;
  padding-top: 14px;
  padding-bottom: 14px;
}

.label-group .label-content {
  left: 0px;
  padding: 7px;
  padding-left: 16px;
  padding-right: 16px;
  border: solid 1px white;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Mobile: label floats as overlay title at the top of the border box */
@media (max-width: 575px) {
  .label-group {
    background-color: var(--color-bg-dark);
    font-size: 0.75rem;
  }

  .label-group .label-title {
    position: absolute;
    padding-left: 4px;
    padding-right: 4px;
    top: -2px;
    left: 12px;
    z-index: 100;
    background-color: var(--color-bg-dark);
  }

  .label-group .label-content {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
}

/* Desktop: label title rendered as a filled white pill on the left */
@media (min-width: 576px) {
  .label-group .label-title {
    padding: 8px;
    background-color: white;
    color: var(--color-text-dark);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  .label-group .label-content {
    position: relative;
    left: -4px;
  }
}

/* Shio icon helpers */
.btn.set-shio img {
  max-width: 54px;
  max-height: 54px;
}

.icon-shio {
  max-width: 40px;
  max-height: 40px;
}

/* Inline copy button (used on share links etc.) */
.btn-click-copy {
  position: relative;
  top: -2px;
  margin-left: 16px;
  font-size: 80%;
}

/* Badge pill inside nav-item (BS5: .badge replaces .tag) */
.nav-item .badge-pill,
.nav-item .tag-pill {
  position: relative;
  top: -2px;
}

/* ===== HEADER ===== */

/* Header app container */
#app-header {
  position: relative;
  z-index: 1000;
  width: 100%;
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  --legacy-mobile-menu-link-color: #0d6efd;
  --legacy-mobile-menu-active-bg: #0d6efd;
  --legacy-mobile-menu-active-color: #ffffff;
}

#app-header > .container,
#app-header .top-nav {
  background-color: var(--color-bg-dark);
}

#app-header .nav-link,
#app-header .dropdown-item,
#app-header .btn,
#app-header .form-control,
#app-header .small {
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
}

#app-header .logo img {
  transition: max-width 0.3s;
}

@media (max-width: 767px) {
  #app-header .logo img {
    max-width: 100%;
    transition: max-width 0.3s;
  }
}

#app-header .header-info {
  margin-top: 16px;
}

body.legacy-header-transparent #app-header,
#app-header.legacy-header-transparent,
body.legacy-header-transparent #app-header.fixed,
#app-header.legacy-header-transparent.fixed,
body.legacy-header-transparent #app-header .top-nav,
#app-header.legacy-header-transparent .top-nav,
body.legacy-header-transparent #app-header .navbar-large,
#app-header.legacy-header-transparent .navbar-large {
  background: transparent !important;
  background-color: transparent !important;
}

body.legacy-header-transparent #app-header .navbar-large,
#app-header.legacy-header-transparent .navbar-large {
  border-top-color: transparent;
}

/* Fixed header – collapses logo and pins to top */
#app-header.fixed {
  position: fixed;
  top: 0px;
  z-index: 1000;
  width: 100%;
  background-color: rgba(0, 0, 0, 1);
}

#app-header.fixed .logo img {
  max-width: 380px;
  transition: max-width 0.3s;
}

@media (max-width: 767px) {
  #app-header.fixed .logo img {
    max-width: 200px;
    transition: max-width 0.3s;
  }
}

#app-header.fixed .header-info {
  margin-top: 4px;
}

#app-header.fixed .header-info .social-media {
  margin-top: 4px;
  margin-bottom: 4px;
}

/* Navbar – zero padding override */
.navbar {
  padding: 0px 16px;
}

/* Navbar toggler button (hamburger) */
.navbar-toggler {
  position: relative;
  left: -16px;
  color: var(--color-text);
  width: inherit;
  outline: 0;
  cursor: pointer;
}

.navbar-toggler span.small {
  position: relative;
  bottom: 2px;
  font-size: 0.6em;
}

.navbar-toggler:focus {
  outline: 0;
}

/* Gold gradient navbar (the large decorative header bar) */
.navbar-large {
  border-top: solid 3px var(--color-primary);
  background: var(--color-primary-light);
  background: -moz-linear-gradient(top, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary) 100%);
  background: -webkit-linear-gradient(top, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary) 100%);
  background: linear-gradient(to bottom, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary) 100%);
  margin-bottom: 0.75em;
  border-radius: 0px;
}

/* Nav link padding — horizontal padding creates visual spacing between items.
   Bootstrap 5 flex-row layout means items are adjacent, so padding-left/right
   is the only gap. Mirrors boiji_client theme.scss .navbar-nav .nav-link rule. */
.navbar-nav .nav-item .nav-link {
  padding-top: 2px;
  padding-bottom: 6px;
  padding-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
}

/* Active nav link gets gold background */
.navbar-nav .nav-item .nav-link.active {
  background-color: var(--color-primary);
  padding-left: 8px;
  padding-right: 8px;
}

/* Dropdown shadow */
.dropdown-menu {
  -webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.5);
}

/*
 * Bootstrap 5 sets .navbar-nav .dropdown-menu { position: static } by default
 * unless the navbar has .navbar-expand-{breakpoint} class. The portal_legacy
 * navbar uses .navbar-large (no expand class) so BS5 never overrides to absolute,
 * causing the gold bar to expand vertically when a dropdown opens (static = in-flow).
 * Force absolute on desktop navbar so the dropdown floats above content.
 */
.navbar-large .navbar-nav .dropdown-menu {
  position: absolute !important;
}

/* Mobile menu bar */
.mobile-menu {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 44px;
}

/* External games section – overrides navbar style for inner menus */
.app-external-games .navbar {
  position: relative;
  padding: 0.5rem 1rem;
  border-radius: 0px;
}

.app-external-games .navbar .navbar-toggler {
  position: initial;
  width: 2.5em;
  height: 2em;
  padding: 0.5rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-size: 24px 24px;
  border-radius: 0.25rem;
}

/* ===== LOGO ===== */

/* Logo container padding */
.logo {
  padding: 4px;
}

.logo img {
  max-width: 480px;
}

/* Lock header logo height on desktop. The logo is width-capped above, but its
   height still follows the uploaded image's aspect, so a tall logo stretches
   the header. Cap the height to 72px on desktop; the mobile rules (<768px)
   keep their own max-width behavior untouched. */
@media (min-width: 768px) {
  #app-header .logo img {
    max-height: 72px;
    width: auto;
    object-fit: contain;
  }
}

/* Brand text with gold border */
.logo .brand {
  font-size: 40px;
  font-weight: bold;
  color: var(--color-text);
  text-decoration: none;
  border: solid 1px gold;
  padding-left: 4px;
}

@media (max-width: 767px) {
  .logo .brand {
    font-size: 50px;
  }
}

/* Highlighted segment of the brand name (inverted gold/black) */
.logo .brand span {
  background-color: gold;
  color: var(--color-text-dark);
  margin-left: 4px;
  padding-left: 4px;
  padding-right: 4px;
}

/* ===== BREADCRUMB ===== */

/* Dark gradient breadcrumb bar */
.breadcrumb {
  border: solid 1px var(--color-border-breadcrumb);
  background: rgba(34, 34, 34, 1);
  background: -moz-linear-gradient(left, rgba(34, 34, 34, 1) 0%, rgba(34, 34, 34, 1) 43%, rgba(68, 68, 68, 1) 65%, rgba(68, 68, 68, 1) 100%);
  background: -webkit-linear-gradient(left, rgba(34, 34, 34, 1) 0%, rgba(34, 34, 34, 1) 43%, rgba(68, 68, 68, 1) 65%, rgba(68, 68, 68, 1) 100%);
  background: linear-gradient(to right, rgba(34, 34, 34, 1) 0%, rgba(34, 34, 34, 1) 43%, rgba(68, 68, 68, 1) 65%, rgba(68, 68, 68, 1) 100%);
}

/* Active breadcrumb item gets a black pill look */
.breadcrumb .breadcrumb-item.active {
  color: var(--color-text);
  border-radius: 4px;
  padding-right: 8px;
  padding-left: 8px;
  margin-left: 8px;
  background-color: var(--color-bg-dark);
}

/* Bold active item, muted disabled item */
.breadcrumb .active {
  font-weight: bold;
}

.breadcrumb .disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* ===== RESULT DISPLAY ===== */

/* Market source URLs are panel data and can be much longer than a phone.
   Keep the configured destination intact while containing it in the result header. */
.legacy-market-source-url {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 575.98px) {
  /* Provider lists are panel-driven and can contain more buttons than one row.
     Preserve every option without widening the deposit page. */
  .meteor-deposit-content .btn-group {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
  }
}

/* Large gold result digit – used on market result pages */
.result-digit {
  color: var(--color-result-digit);
  font-size: 60px;
  font-weight: 700;
  font-family: 'Droid Serif', serif;
  white-space: nowrap;
}

/* Full-prize market cards: 1st row original size, then 10%/20% smaller. */
.market-prize-stack {
  display: grid;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  cursor: pointer;
}

.market-prize-stack--table {
  max-width: 120px;
}

.market-prize-row {
  min-width: 0;
  line-height: 0.92;
  text-align: center;
}

.market-prize-number {
  display: block;
  min-width: 0;
  color: var(--color-result-digit);
  font-family: 'Droid Serif', serif;
  font-size: 60px;
  font-weight: 700;
  line-height: 0.92;
  text-align: center;
  white-space: nowrap;
}

.market-prize-row:nth-child(2) .market-prize-number {
  font-size: 54px;
}

.market-prize-row:nth-child(3) .market-prize-number {
  font-size: 48px;
}

.market-prize-stack--table .market-prize-number {
  font-size: 28px;
}

.market-prize-stack--table .market-prize-row:nth-child(2) .market-prize-number {
  font-size: 25.2px;
}

.market-prize-stack--table .market-prize-row:nth-child(3) .market-prize-number {
  font-size: 22.4px;
}

/* Mobile result detail: keep each P123 prize and its Shio in the same row. */
.legacy-result-prize-list {
  clear: both;
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.legacy-result-prize-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.legacy-result-prize-main {
  min-width: 0;
}

.legacy-result-prize-label {
  margin-bottom: 2px;
  font-size: 1rem;
  line-height: 1.2;
}

.legacy-result-prize-digits {
  white-space: nowrap;
}

.legacy-result-prize-shio {
  flex: 0 0 auto;
  min-width: 48px;
  text-align: center;
}

.legacy-result-prize-shio span {
  display: block;
  margin-bottom: 2px;
  font-size: 0.9rem;
  line-height: 1.1;
}

@media (max-width: 360px) {
  .market-prize-stack {
    max-width: 100%;
  }

  .market-prize-number {
    font-size: 54px;
  }

  .market-prize-row:nth-child(2) .market-prize-number {
    font-size: 48.6px;
  }

  .market-prize-row:nth-child(3) .market-prize-number {
    font-size: 43.2px;
  }

  .legacy-result-prize-row {
    gap: 8px;
  }
}

/* ===== NAV TABS ===== */

/* Bottom border on tab strip */
.nav-tabs {
  border-bottom: solid 4px var(--color-text);
}

/* Tab link padding */
.nav-tabs .nav-link {
  padding: 0.5em 0.5em;
}

/* Active tab within nested .nav-link context */
.nav-tabs .nav-link .nav-link.active {
  color: #55595c;
  background-color: #fff;
  border-color: #ddd #ddd transparent;
}

/* Game category tabs – colour variants */
.nav-tabs.game-categories.normal {
  border-bottom: solid 4px var(--color-accent-green);
}

.nav-tabs.game-categories.normal .nav-item .nav-link.active {
  background-color: var(--color-accent-green);
  border-color: var(--color-accent-green);
  color: white;
}

.nav-tabs.game-categories.nodisc {
  border-bottom: solid 4px var(--color-accent-orange);
}

.nav-tabs.game-categories.nodisc .nav-item .nav-link.active {
  background-color: var(--color-accent-orange);
  border-color: var(--color-accent-orange);
  color: white;
}

.nav-tabs.game-categories.p123 {
  border-bottom: solid 4px var(--color-accent-red);
}

.nav-tabs.game-categories.p123 .nav-item .nav-link.active {
  background-color: var(--color-accent-red);
  border-color: var(--color-accent-red);
  color: white;
}

/* ===== CARD ===== */

/* Default card – dark grey gradient from boiji_client theme.scss lines 164-173.
   boiji_client uses rgba(34,34,34) → rgba(68,68,68) gradient, NOT gold.
   The golden gradient was wrong — it came from misapplying --color-primary.
   Hardcoded here so it never changes with theme variable overrides. */
.card {
  border: solid 1px #333;
  background: rgba(34, 34, 34, 1);
  background: -moz-linear-gradient(top, rgba(34, 34, 34, 1) 0%, rgba(34, 34, 34, 1) 16%, rgba(68, 68, 68, 1) 41%, rgba(68, 68, 68, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(34, 34, 34, 1) 0%, rgba(34, 34, 34, 1) 16%, rgba(68, 68, 68, 1) 41%, rgba(68, 68, 68, 1) 100%);
  background: linear-gradient(to bottom, rgba(34, 34, 34, 1) 0%, rgba(34, 34, 34, 1) 16%, rgba(68, 68, 68, 1) 41%, rgba(68, 68, 68, 1) 100%);
  color: var(--color-text, #ffffff);
}

/* Result cards are literal boiji_client Bootstrap 4-alpha markup:
   .card.card-block.card-result. Bootstrap 5 makes .card a flex container,
   which breaks the original float-xs-right date/shio layout, so restore block
   flow only for result cards. */
.card.card-result {
  display: block;
}

/* Optional per-downline market card surface override. It follows the active
   theme tokens instead of pinning a color, so green themes stay green, red
   themes stay red, and other card components keep their default styling. */
body[data-legacy-market-card-style="solid_theme"] .card.card-market {
  background: color-mix(in srgb, var(--theme-primary, var(--accent, #444444)) 82%, #000000 18%);
  border-color: color-mix(in srgb, var(--theme-secondary, var(--theme-primary, var(--accent, #444444))) 70%, #000000 30%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

body[data-legacy-market-card-style="solid_theme"] .card.card-market .card-body.market {
  background: transparent;
}

body[data-legacy-market-card-style="solid_theme"] .card.card-market h6 a {
  color: var(--text-main, #ffffff);
}

body[data-legacy-market-card-style="solid_theme"] .card.card-market p.small {
  color: var(--text-main, #ffffff) !important;
}

body[data-legacy-market-card-style="solid_theme"] .card.card-market .result-digit,
body[data-legacy-market-card-style="solid_theme"] .card.card-market .text-success {
  color: var(--text-main, #ffffff) !important;
}

body[data-legacy-market-card-style="solid_theme"] .card.card-market .card-link {
  color: var(--text-muted-strong, #ffffff);
}

body[data-legacy-market-card-style="solid_theme"] .card.card-market .card-link:hover,
body[data-legacy-market-card-style="solid_theme"] .card.card-market h6 a:hover {
  color: #ffffff;
}

/* Card header/footer – from boiji_client theme.scss lines 175-182.
   boiji_client uses #222 background with border-bottom: solid 4px white, NOT maroon.
   color must be explicitly white — Bootstrap default is near-black, invisible on #222 bg. */
.card .card-header {
  background-color: #222;
  border-bottom: solid 4px white;
  color: var(--color-text-white, #ffffff);
}

/* Ensure strong/bold tags inside card-header also inherit white color */
.card .card-header strong,
.card .card-header b {
  color: inherit;
}

.card .card-footer {
  background-color: #222;
}

/* Ticket list section inside a card – semi-transparent dark */
.card .card-ticket-list {
  background: rgba(34, 34, 34, 0.25);
}

/* BS4-alpha .card-block → BS5 .card-body (also style .card-block for compat) */
.card-body,
.card-block {
  padding: 0.75em;
}

/* Card game row spacing */
div.card-game .card-body .card-row,
div.card-game .card-block .card-row {
  margin-bottom: 0.75em;
}

/* Kombinasi bet button width */
div.card-game-kombinasi .btn-kombinasi {
  width: 8em;
  text-align: right;
}

/* Total bet summary section separator */
div.card-total-bet div.card-total-bet-content {
  margin-top: 1em;
  margin-bottom: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border-top: solid 4px #eee;
  border-bottom: solid 4px #eee;
}

/* Single bet footer separator */
div.card-single-bet div.card-single-bet-footer {
  border-top: solid 4px #eee;
  padding-top: 0.5em;
}

/* Ticket list within a card – light background list area */
div.card-ticket-list {
  padding: 1em;
  border-top: solid 1px #eee;
  background-color: #f9f9f9;
  color: var(--color-text-dark);
}

div.card-ticket-list div.row p {
  margin-bottom: 0.5em;
}

/* Receiver/sender chat-style cards */
.card-receiver {
  --bs-card-color: var(--color-text-on-light);
  color: var(--color-text-on-light);
  background: rgba(237, 237, 237, 1);
  background: -moz-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
  background: linear-gradient(to bottom, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
}

.card-sender {
  --bs-card-color: var(--color-text-on-light);
  color: var(--color-text-on-light);
  background: rgba(145, 232, 66, 1);
  background: -moz-linear-gradient(top, rgba(145, 232, 66, 1) 0%, rgba(210, 255, 82, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(145, 232, 66, 1) 0%, rgba(210, 255, 82, 1) 100%);
  background: linear-gradient(to bottom, rgba(145, 232, 66, 1) 0%, rgba(210, 255, 82, 1) 100%);
}

.card-receiver .small,
.card-receiver .float-end,
.card-sender .small,
.card-sender .float-end {
  color: var(--color-text-on-light-muted);
}

.card-receiver b,
.card-sender b,
.legacy-memo-content {
  color: inherit;
}

.legacy-memo-content {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Social media / bank cards – dark semi-transparent */
.card-socmed,
.card-banks {
  background: rgba(0, 0, 0, 0.75);
}

/* Last deposit/withdraw ticker – dark semi-transparent */
.last-deposit,
.last-withdraw {
  background: rgba(0, 0, 0, 0.75);
}

/* Banner link area */
.banner-link {
  background: rgba(0, 0, 0, 0.75);
}

.content-home--with-banner {
  align-items: flex-start;
  margin-bottom: 0.75em;
}

.content-home--with-banner > [class*="col-"] {
  margin-bottom: 0.75em;
}

.legacy-home-contact-panel {
  display: grid;
  gap: 8px;
  min-height: 250px;
  padding: 10px;
  border: 1px solid var(--color-primary, #daa520);
  background: rgba(0, 0, 0, 0.75);
}

.legacy-home-contact-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-white, #ffffff);
}

.legacy-home-contact-row:hover,
.legacy-home-contact-row:focus {
  color: var(--color-link-hover, #ffffff);
  border-color: var(--color-primary, #daa520);
}

.legacy-home-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-accent-green, #5cb85c);
  color: #ffffff;
}

.legacy-home-contact-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-home--with-banner #homeCarousel {
  margin-bottom: 0;
}

.content-home--with-banner #homeCarousel .carousel-inner {
  aspect-ratio: 2 / 1;
  min-height: 250px;
}

.content-home--with-banner #homeCarousel .carousel-item {
  height: 100%;
}

.content-home--with-banner #homeCarousel img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
}

@media (max-width: 767.98px) {
  .content-home--with-banner #homeCarousel .carousel-inner {
    aspect-ratio: auto;
    min-height: 0;
  }

  .content-home--with-banner #homeCarousel .carousel-item {
    height: auto;
  }

  .content-home--with-banner #homeCarousel img {
    height: auto;
    min-height: 0;
    object-fit: contain;
  }
}

.legacy-home-side-banners {
  display: grid;
  gap: 0.75em;
  align-content: start;
}

.legacy-home-side-banner,
.legacy-home-mobile-banner {
  display: block;
  background: rgba(0, 0, 0, 0.75);
}

.legacy-home-side-banner img,
.legacy-home-mobile-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.legacy-home-mobile-banners {
  display: grid;
  gap: 0.75em;
}

/* Bank/e-wallet logo size constraint.
   Boiji caps at 200x50, but the reference's filehosting logos include wider/taller
   source files; the rendered reference is visibly closer to ~140x36. */
.bank-list img,
.provider-list img,
.bank-online,
.bank-offline,
.provider-online,
.provider-offline {
  max-width: 140px;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.card-banks .bank-list > div,
.card-banks .provider-list > div {
  min-height: 78px;
}

/* Offline bank logo – greyscaled and faded */
.bank-offline {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.25;
}

/* ISSUE 12: ewallet/pulsa offline logos need the same greyscale treatment as
   offline banks — was missing, leaving offline providers rendered full-color. */
.provider-offline {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.25;
}

/* Mobile card: absolute index badge in top-left corner */
.app-mobile .card .card-index {
  position: absolute;
  top: -2px;
  left: -2px;
  border: solid 1px white;
  border-top-left-radius: 8px;
  width: 52px;
  height: 44px;
  text-align: center;
  padding-top: 12px;
  font-size: 16px;
}

/* Mobile bet card – compact padding */
.app-mobile .card-bet {
  margin-bottom: 4px;
}

.app-mobile .card-bet .card-body,
.app-mobile .card-bet .card-block {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 2px;
  padding-bottom: 0px;
}

.app-mobile .card-bet .card-body .card-bet-date,
.app-mobile .card-bet .card-block .card-bet-date {
  position: relative;
  top: 2px;
}

.app-mobile .card-bet .card-body .table,
.app-mobile .card-bet .card-block .table {
  margin-top: 0;
  margin-bottom: 0;
}

.app-mobile .card-bet .card-body .table tr td,
.app-mobile .card-bet .card-block .table tr td {
  padding: 2px;
}

.app-mobile .card-bet .card-body .table tr td .btn,
.app-mobile .card-bet .card-block .table tr td .btn {
  padding: 0px;
}

/* Selected bet card – blue border highlight */
.app-mobile .card-bet.selected {
  border: solid 3px var(--color-accent-blue);
}

/* External game lobby – large floating header inside card */
.external-game-lobby .card .card-body .card-floating-header,
.external-game-lobby .card .card-block .card-floating-header {
  font-size: 26px;
  font-weight: 100;
}

/* Game grid card column – tight padding */
.card-game-col {
  padding: 2px;
}

.card-game-col .card {
  margin-bottom: 0px;
}

.card-game-col .card .card-game-logo .card-game-icon {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* Game label at bottom of game card */
.card-game-col .card .card-game-label {
  display: flex;
  /* min-height (not fixed height) so wrapped multi-line names are not clipped. */
  min-height: 22px;
  align-content: center;
  justify-content: flex-end;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  font-size: small;
}

/* Pragmatic Play / Reel Kingdom cards – fixed logo height */
.card-game-col .card.game-pragmatic-play .card-game-logo,
.card-game-col .card.game-pragmatic-play-classic .card-game-logo,
.card-game-col .card.game-reel-kingdom .card-game-logo {
  height: 120px;
}

@media (max-width: 767px) {
  .card-game-col .card.game-pragmatic-play .card-game-logo,
  .card-game-col .card.game-pragmatic-play-classic .card-game-logo,
  .card-game-col .card.game-reel-kingdom .card-game-logo {
    min-height: 130px;
  }
}

.card-game-col .card.game-pragmatic-play .card-game-label,
.card-game-col .card.game-pragmatic-play-classic .card-game-label,
.card-game-col .card.game-reel-kingdom .card-game-label {
  min-height: 30px;
}

/* PGSoft cards – rounded corners, black base */
.card-game-col .card.game-pgsoft {
  border: none;
  border-radius: 36px;
  background-color: var(--color-bg-dark);
}

.card-game-col .card.game-pgsoft .card-game-logo {
  min-height: 200px;
}

@media (max-width: 767px) {
  .card-game-col .card.game-pgsoft .card-game-logo {
    min-height: 220px;
  }
}

.card-game-col .card.game-pgsoft .card-game-label {
  margin-bottom: 8px;
  padding-bottom: 4px;
}

/* ===== FORM ===== */

/* Remove reCAPTCHA anchor box shadow */
.rc-anchor {
  box-shadow: 0;
  -webkit-box-shadow: 0;
  -moz-box-shadow: 0;
}

/* reCAPTCHA submit button width */
.rc-anchor button[type="submit"] {
  margin-top: 8px;
  width: 302px;
}

/* All form labels bold and without bottom margin */
form label {
  margin-bottom: 0;
  font-weight: bold;
}

/* Sign-up form */
.form-signup {
  padding: 15px;
  margin: auto;
}

/* Boiji set fixed 302px width here — removed for responsive col-md-4 column.
   Alerts now fill the column width naturally. */
.form-signup .alert {
  width: 100%;
}

.form-signup input,
.form-signup select {
  margin-bottom: 1rem;
}

.form-signup button[type="submit"] {
  margin-top: 1rem;
  width: 100%;
}

/* Live availability feedback under username / phone / account number. The inputs carry a
   1rem bottom margin, so pull the status back up against its own field instead of letting
   it float next to the following label. min-height reserves the line so the form does not
   jump when a message appears. */
.form-signup .reg-status {
  display: block;
  margin-top: -0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.2;
  min-height: 1em;
}

/* Friend sign-up form */
.form-signup-friend input,
.form-signup-friend select {
  margin-bottom: 8px;
}

/* Sign-in / login form – centred, max-width box */
.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}

.form-signin .form-control:focus {
  z-index: 2;
}

.form-signin .alert {
  width: 302px;
}

/* Email field – joined top of stacked input group */
.form-signin input#email {
  width: 302px;
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* Password field – joined bottom of stacked input group */
.form-signin input[type="password"] {
  width: 302px;
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.form-signin button[type="submit"] {
  margin-top: 1rem;
  width: 302px;
}

/* theme.scss override from boiji_client:
   home mobile login uses a submit button beside an anchor inside .btn-group.
   Without this later cascade, LOGIN keeps form.scss margin-top and drops below DAFTAR. */
.form-signin button[type="submit"] {
  width: initial;
  margin-top: 0px;
}

@media (max-width: 575.98px) {
  .form-home-signin .form-control,
  .form-home-signin input[type="text"],
  .form-home-signin input[type="password"] {
    width: 100%;
    max-width: 100%;
  }

  .form-home-signin .btn-group .btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Bet form */
.form-bet {
  margin-bottom: 1em;
}

/* Fight pattern button group */
.form-fight-pattern .btn-group .btn {
  min-width: 54px;
}

@media (max-width: 767px) {
  .form-fight-pattern .btn-group {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .form-fight-pattern .btn-group .btn {
    min-width: 34px;
  }
}

/* Memo and book-filter input groups need top margin on mobile */
@media (max-width: 767px) {
  .form-memo .input-group {
    margin-top: 8px;
  }

  .form-book-filter .input-group {
    margin-top: 8px;
  }
}

/* ===== TABLE ===== */

/* Fixed-width index and bet-amount columns on wider screens */
@media (min-width: 576px) {
  table th.col-index {
    width: 4em;
  }

  table th.bet-amount {
    width: 12em;
  }

  table th.bet-pay {
    width: 12em;
  }
}

/* Modal check row – struck-through (de-selected) rows */
table tr.modal-check-row td {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

/* Modal check row – un-struck (selected) rows */
table tr.modal-check-row.selected td {
  text-decoration: none;
  color: var(--color-text-dark);
}

/* Mobile result table – compact cell padding */
.app-mobile .table-result tr th,
.app-mobile .table-result tr td {
  padding: 4px;
}

/* Mobile no-border table – strip all cell borders */
.app-mobile .table-no-border tr th,
.app-mobile .table-no-border tr td {
  border: none;
}

/* Transaction history mirrors the legacy Totonesia mobile table: all five
   columns remain visible and long labels wrap inside the Jenis column. */
.transaction-history-table-wrap {
  overflow-x: auto;
}

.transaction-history-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 0.95rem;
}

.transaction-history-table th,
.transaction-history-table td {
  white-space: normal;
  vertical-align: top;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.transaction-history-table th:nth-child(1),
.transaction-history-table td:nth-child(1) {
  width: 22%;
}

.transaction-history-table th:nth-child(2),
.transaction-history-table td:nth-child(2) {
  width: 31%;
}

.transaction-history-table th:nth-child(3),
.transaction-history-table td:nth-child(3) {
  width: 21%;
  white-space: nowrap;
}

.transaction-history-table th:nth-child(4),
.transaction-history-table td:nth-child(4) {
  width: 21%;
  white-space: nowrap;
}

.transaction-history-table th:nth-child(5),
.transaction-history-table td:nth-child(5) {
  width: 5%;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

/* ===== MODAL ===== */

/* Extra bottom padding so modal never clips page content on scroll */
.modal {
  padding-bottom: 3em;
}

/* Dark modal content */
.modal .modal-content {
  background-color: var(--color-bg-card);
  border: solid 1px var(--color-bg-card);
}

/* Darker modal header with white bottom border */
.modal .modal-content .modal-header {
  background-color: var(--color-border-modal-hdr);
  border-bottom: solid 4px white;
}

/* White close button */
.modal .modal-content .modal-header button.close {
  color: var(--color-text);
}

/* Modal header close button positioning */
.modal .modal-content .modal-header .close {
  position: relative;
  top: 5px;
  opacity: 1;
}

/* Modal title font size */
.modal .modal-content .modal-header .modal-title {
  font-size: 22px;
}

/* ===== DASHBOARD INFO POPUP (#modal-announcement) ===== */
#modal-announcement .popup-footer {
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  background-color: var(--color-border-modal-hdr);
  border-top: solid 1px rgba(255, 255, 255, 0.15);
}

#modal-announcement .popup-footer > * { margin: 0; }

#modal-announcement .popup-dismiss-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

#modal-announcement .popup-dismiss-check .form-check-input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}

#modal-announcement .popup-dismiss-check .form-check-label {
  color: var(--color-text);
  font-size: 14px;
  cursor: pointer;
}

#modal-announcement .popup-close-btn {
  min-width: 96px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

@media (max-width: 767.98px) {
  #modal-announcement { padding-bottom: 0; }

  #modal-announcement .modal-dialog {
    --bs-modal-margin: 24px;
    width: calc(100% - 48px);
    max-width: 420px;
    margin: 24px auto;
  }

  #modal-announcement .modal-content {
    max-height: calc(100vh - 96px);
    border-radius: 12px;
    overflow: hidden;
  }

  #modal-announcement .modal-body { overflow-y: auto; }
  #modal-announcement .modal-header .modal-title { font-size: 17px; }

  #modal-announcement .modal-header .btn-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    opacity: 1;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.75);
    background-size: 18px;
    filter: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  }

  #modal-announcement .popup-footer { padding: 10px 12px; }
  #modal-announcement .popup-dismiss-check .form-check-label { font-size: 12px; line-height: 1.3; }
  #modal-announcement .popup-close-btn { min-width: 84px; padding: 8px 12px; }
}

/* Mobile menu modal — keep the shared header menu identical on every route,
   even when page-specific meta/CSS changes generic modal/nav typography. */
#mobile-modal-menu .modal-dialog {
  margin: 0.5rem !important;
}

@media (min-width: 576px) {
  #mobile-modal-menu .modal-dialog {
    max-width: 500px !important;
    margin: 1.75rem auto !important;
  }
}

#mobile-modal-menu .modal-content {
  background-color: var(--color-bg-card) !important;
  border: solid 1px var(--color-bg-card) !important;
  border-radius: 6px !important;
}

#mobile-modal-menu .modal-header {
  align-items: center !important;
  padding: 1rem !important;
  background-color: var(--color-border-modal-hdr) !important;
  border-bottom: solid 4px white !important;
}

#mobile-modal-menu .modal-content .modal-header .modal-title {
  color: var(--color-text) !important;
  font-family: inherit !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#mobile-modal-menu .btn-close {
  opacity: 0.65 !important;
}

#mobile-modal-menu .modal-body {
  padding: 1rem !important;
}

#mobile-modal-menu .nav-pills .nav-link {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  color: var(--legacy-mobile-menu-link-color, #0d6efd) !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  border-radius: 0.25rem !important;
}

#mobile-modal-menu .nav-pills .nav-link.active,
#mobile-modal-menu .nav-pills .show > .nav-link {
  color: var(--legacy-mobile-menu-active-color, #ffffff) !important;
  background-color: var(--legacy-mobile-menu-active-bg, #0d6efd) !important;
}

#mobile-modal-menu .legacy-mobile-nav-menu .nav-item {
  width: 100% !important;
}

#mobile-modal-menu .legacy-mobile-nav-menu .dropdown-menu {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  display: none;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0.15rem 0 0.45rem !important;
  padding: 0.15rem 0 0.25rem !important;
  color: var(--legacy-mobile-menu-link-color, #0d6efd) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#mobile-modal-menu .legacy-mobile-nav-menu .dropdown-menu.show {
  display: block !important;
}

#mobile-modal-menu .legacy-mobile-nav-menu .dropdown-menu[data-bs-popper] {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

#mobile-modal-menu .legacy-mobile-nav-menu .dropdown-item {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 1rem 0.5rem 1.75rem !important;
  color: var(--legacy-mobile-menu-link-color, #0d6efd) !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  white-space: normal !important;
  background: transparent !important;
  border-radius: 0.25rem !important;
}

#mobile-modal-menu .legacy-mobile-nav-menu .dropdown-item:hover,
#mobile-modal-menu .legacy-mobile-nav-menu .dropdown-item:focus {
  color: var(--legacy-mobile-menu-active-color, #ffffff) !important;
  background-color: color-mix(in srgb, var(--legacy-mobile-menu-active-bg, #0d6efd) 18%, transparent) !important;
}

#mobile-modal-menu .legacy-mobile-nav-menu .dropdown-item.active,
#mobile-modal-menu .legacy-mobile-nav-menu .dropdown-item:active {
  color: var(--legacy-mobile-menu-active-color, #ffffff) !important;
  background-color: var(--legacy-mobile-menu-active-bg, #0d6efd) !important;
}

#mobile-modal-menu .legacy-mobile-nav-menu .dropdown-divider {
  height: 0 !important;
  margin: 0.25rem 1rem 0.25rem 1.75rem !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  opacity: 1 !important;
}

/* Modal backdrop sits below modals in stacking context */
.modal-backdrop {
  z-index: 999;
}

/* BS4 "in" class on backdrop → BS5 "show"; keep both for compat */
.modal-backdrop.in,
.modal-backdrop.show {
  opacity: 0.9;
}

/* Market selector modal — keep the BS4-alpha boiji_client modal geometry under BS5. */
#modal-market-selector .modal-content {
  background-color: rgba(0,0,0,0.75);
  border: solid 1px #ddd;
  border-radius: 16px;
}

#modal-market-selector .modal-header {
  display: block;
  background-color: transparent;
  border-bottom: solid 1px #ddd;
  padding: 15px;
}

#modal-market-selector .modal-header .close {
  float: right;
  position: relative;
  top: 5px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
}

#modal-market-selector .modal-header .modal-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

#modal-market-selector .modal-body {
  padding: 15px;
}

#modal-market-selector .nav-tabs {
  border-bottom: solid 4px #fff !important;
}

#modal-market-selector .nav-tabs .nav-link {
  background: transparent !important;
  border: 1px solid transparent !important;
}

#modal-market-selector .nav-tabs .tab-normal.active,
#modal-market-selector .nav-tabs .tab-normal.active:focus,
#modal-market-selector .nav-tabs .tab-normal.active:hover {
  background: #5cb85c !important;
  border-color: #5cb85c #5cb85c transparent !important;
  color: #fff !important;
  font-weight: bold;
}

#modal-market-selector .nav-tabs .tab-normal.active .text-success {
  color: #fff !important;
}

#modal-market-selector .nav-tabs .tab-prize123.active,
#modal-market-selector .nav-tabs .tab-prize123.active:focus,
#modal-market-selector .nav-tabs .tab-prize123.active:hover {
  background: #d9534f !important;
  border-color: #d9534f #d9534f transparent !important;
  color: #fff !important;
  font-weight: bold;
}

#modal-market-selector .nav-tabs .tab-prize123.active .text-danger {
  color: #fff !important;
}

#modal-market-selector .list-group {
  --bs-list-group-bg: #fff;
  --bs-list-group-color: #212529;
  --bs-list-group-border-color: #dee2e6;
  --bs-list-group-active-bg: #0d6efd;
  --bs-list-group-active-border-color: #0d6efd;
  --bs-list-group-active-color: #fff;
}

#modal-market-selector .list-group-item {
  background-color: var(--bs-list-group-bg) !important;
  border-color: var(--bs-list-group-border-color) !important;
  color: var(--bs-list-group-color) !important;
}

#modal-market-selector .list-group-item.active {
  background-color: var(--bs-list-group-active-bg) !important;
  border-color: var(--bs-list-group-active-border-color) !important;
  color: var(--bs-list-group-active-color) !important;
}

#modal-market-selector .list-group-item.active .text-muted,
#modal-market-selector .list-group-item.active .text-success,
#modal-market-selector .list-group-item.active .text-warning,
#modal-market-selector .list-group-item.active .text-danger {
  color: var(--bs-list-group-active-color) !important;
}

/* ===== RESULT-ROUND MODAL (round detail popup) =====
   Boiji renders <div class="text-muted small">LABEL</div> for each game label
   row; BS5 default .text-muted = #6c757d !important which renders almost
   invisible on dark modal bg. Override inside the modal so labels are
   readable while keeping them slightly muted vs. value cells. */
#modal-result-round .text-muted {
  color: var(--color-text-muted, #cccccc) !important;
}
/* Date heading above the breakdown table (rendered as <p class="text-muted small">) */
#modal-result-round #result-round-date {
  color: var(--color-text, #ffffff) !important;
  font-weight: 500;
}
/* Label cells (left column): white-ish so they read clearly */
#modal-result-round .table > tbody > tr > td:first-child .text-muted {
  color: var(--color-text, #ffffff) !important;
  font-weight: 600;
  letter-spacing: 0.3px;
}
/* Digit icons inside the breakdown table — fixed 40px source, but constrain
   so any larger asset never breaks the row layout. */
#modal-result-round .table img {
  max-width: 40px;
  max-height: 40px;
  vertical-align: middle;
}
/* SHIO source images are 128x128 (kuda.png, naga.png, …). Without a constraint
   the image overflows the row and can be clipped at the modal-body bottom.
   Match boiji's .icon-shio (max 40px) to keep the row height consistent
   with the rest of the breakdown rows. */
#modal-result-round .icon-shio {
  max-width: 40px;
  max-height: 40px;
  width: auto;
  height: auto;
}
/* Right (value) cell — small helper labels (AS / KOP / DEPAN / …) under each
   icon group; readable rather than ghost-faded. */
#modal-result-round .table .small {
  color: var(--color-text, #ffffff);
  opacity: 0.85;
}

/* ===== SOCIAL MEDIA / ICONS ===== */

/* Individual social icon row – image + label */
.icon-socmed img {
  width: 32px;
  height: 32px;
}

.icon-socmed > i {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  vertical-align: middle;
}

.icon-socmed span {
  margin-left: 1em;
}

.icon-socmed {
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: solid 1px var(--color-bg-medium);
}

.legacy-contact-row span {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
}

.legacy-contact-row small {
  opacity: 0.75;
  line-height: 1.2;
}

/* Mobile social media block (hidden on sm+) */
.social-media {
  margin-bottom: 8px;
}

@media (min-width: 576px) {
  .social-media {
    display: none;
  }
}

.social-media .icon-socmed {
  margin-bottom: 2px;
  padding: 4px;
  border: solid 1px rgb(50, 50, 50);
  border-radius: 32px;
  background-color: rgba(0, 0, 0, 0.5);
}

.social-media .icon-socmed img {
  width: 32px;
  height: 32px;
}

.social-media .icon-socmed span {
  margin-left: 1em;
}

/* Header-area social media block (hidden on xs, visible sm+) */
.header-info .social-media {
  display: none;
}

@media (min-width: 576px) {
  .header-info .social-media {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 4px;
    text-align: right;
    max-width: 560px;
    overflow: visible;
    white-space: normal;
  }

  .header-info .social-media .contact-socmed-item {
    display: block;
    margin-left: 4px;
    margin-bottom: 4px;
  }

  .header-info .social-media .icon-socmed {
    display: inline-block;
    padding: 2px 10px 2px 4px;
    border: solid 1px rgb(50, 50, 50);
    border-radius: 32px;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .header-info .social-media .icon-socmed img,
  .header-info .social-media .icon-socmed > i {
    width: 24px;
    height: 24px;
    font-size: 18px;
  }

  .header-info .social-media .icon-socmed span {
    display: inline-block;
    max-width: 160px;
    margin-left: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
}

/* ===== CAROUSEL ===== */

/* Home carousel spacing. Slide images render at full opacity — no dim/overlay,
   otherwise the page background bleeds through the banner artwork. */
#homeCarousel {
  margin-bottom: 0.75em;
}

/* ===== GAME BACKGROUND IMAGES ===== */

/* The reference image files are not tenant assets and are not shipped here. */
.app-game-4d.bg-singapore {
  background-image: none;
}

.app-game-4d.bg-hongkong {
  background-image: none;
}

.app-game-4d.bg-sydney {
  background-image: none;
}

/* ===== GAME CONTENT / BET ENTRY ===== */

/* Game line row – separator between bet entries */
.game-content .game-line {
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: solid 1px #eee;
}

/* Single digit input box in 4D/3D/2D bet entry */
.game-content input.game-digit {
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
  width: 50px;
  font-weight: bolder;
  font-size: 16px;
}

@media (max-width: 575px) {
  .game-content input.game-digit {
    width: 34px;
    display: initial;
  }
}

/* Bet amount input – full width */
.game-content input.game-bet-value {
  width: 100%;
}

/* ===== MOBILE PAGINATION ===== */

/* Large prev/next buttons for mobile bet list navigation */
.app-mobile .mobile-pagination .btn {
  padding-left: 32px;
  padding-right: 32px;
}

.app-mobile .mobile-pagination .btn i {
  font-size: 24px;
}

/* ===== CUSTOM 5-COLUMN GRID ===== */
/* BS4-alpha 5ths grid – used on market listing for 5 cards per row */

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
  position: relative;
  min-height: 1px;
  padding-right: 8px;
  padding-left: 8px;
}

.col-xs-5ths {
  width: 20%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-5ths {
    width: 20%;
    float: left;
  }
}

@media (min-width: 992px) {
  .col-md-5ths {
    width: 20%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-5ths {
    width: 20%;
    float: left;
  }
}

/* ===== BS4-ALPHA → BS5 COMPAT ALIASES ===== */

/* .input-group-addon → .input-group-text (BS5 rename) */
.input-group-addon {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}

/* .tag → .badge (BS5 rename) */
.tag {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}

.tag-success {
  color: #fff;
  background-color: #5cb85c;
}

.tag-info {
  color: #fff;
  background-color: #24BBF2;
}

.tag-warning {
  color: #111;
  background-color: #f0ad4e;
}

.tag-danger {
  color: #fff;
  background-color: #d9534f;
}

/* BS4 alpha float/text alignment aliases used verbatim by boiji_client templates. */
.float-xs-left {
  float: left !important;
}

.float-xs-right {
  float: right !important;
}

.text-xs-left {
  text-align: left !important;
}

.text-xs-center {
  text-align: center !important;
}

.text-xs-right {
  text-align: right !important;
}

/* BS4-alpha responsive visibility aliases.
   Define only the hidden breakpoint so the browser keeps each element's
   natural display value when visible (span stays inline, table stays table). */
@media (max-width: 575.98px) {
  .hidden-xs-down {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .hidden-sm-down {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .hidden-md-down {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hidden-md-up {
    display: none !important;
  }
}

@media (min-width: 576px) {
  .hidden-sm-up {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .hidden-lg-up {
    display: none !important;
  }
}

/* ── Missing from boiji_client theme.scss — ported 2026-05-08 ── */

/* .all-markets — market list table dark background (theme.scss:142) */
.all-markets {
  margin-bottom: 0.75em;
}
.all-markets .table {
  background-color: rgba(0,0,0,0.95);
}

/* #video — video embed height (theme.scss:328) */
#video {
  height: 333px;
}
@media (max-width: 767px) {
  #video {
    height: 200px;
  }
}

/* .widget-lucky-number — fixed lucky number widget (theme.scss:372) */
.widget-lucky-number {
  cursor: pointer;
}
@media (min-width: 768px) {
  .widget-lucky-number {
    position: fixed;
    right: 0px;
    z-index: 100;
  }
}

/* ── Global dark theme for ALL .table elements ──
   Applies to profile, transactions, referrals, ledgers, payment_methods, paito,
   and any future page that renders .table anywhere in the dark-themed portal.
   Boiji_client theme.scss: body { color: white } — tables inherited dark body bg
   automatically under BS4-alpha. BS5 resets --bs-table-bg to white explicitly via
   CSS custom property — this global override undoes that reset for the entire portal,
   matching the boiji_client visual exactly regardless of whether .table sits inside
   a .card or a standalone container.
   All colors use theme variables (--color-*) defined in :root above so that
   switching themes changes the palette without touching this block. */
.table {
  /* BS4-alpha tables inherited dark body bg automatically.
     BS5 resets --bs-table-bg to white explicitly — override globally for dark theme. */
  --bs-table-bg:            transparent;
  /* Subtle white overlay for striped/hover rows — keeps dark feel */
  --bs-table-striped-bg:    rgba(255, 255, 255, 0.04);
  --bs-table-hover-bg:      rgba(255, 255, 255, 0.06);
  /* Row separator uses theme border color */
  --bs-table-border-color:  var(--color-border-card, #333333);
  color: var(--color-text, #ffffff);
}

.table > :not(caption) > * > * {
  /* BS5 applies --bs-table-bg directly on td/th cells; override to transparent
     so each cell doesn't paint over the dark page/card background */
  background-color: transparent;
  color: var(--color-text, #ffffff);
  border-bottom-color: var(--color-border-card, #333333);
}

.table th[scope="row"],
.table thead th {
  /* Header/row-header cells: slightly muted to read as labels, not data values */
  color: var(--color-text-muted, rgba(255, 255, 255, 0.7));
}

.card-profile .table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.balance-history-scroll {
  overflow-x: auto;
}

@media (max-width: 575.98px) {
  .balance-history-table {
    table-layout: fixed;
    font-size: 12px;
    line-height: 1.35;
  }

  .balance-history-table > :not(caption) > * > * {
    padding: 7px 4px;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .balance-history-table thead th {
    padding-bottom: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .balance-history-table .balance-history-money {
    font-size: 12px;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  .balance-history-cols-4 .bh-col-date { width: 24%; }
  .balance-history-cols-4 .bh-col-type { width: 24%; }
  .balance-history-cols-4 .bh-col-desc { width: 34%; }
  .balance-history-cols-4 .bh-col-amount { width: 18%; }

  .balance-history-cols-5 .bh-col-date { width: 21%; }
  .balance-history-cols-5 .bh-col-type { width: 21%; }
  .balance-history-cols-5 .bh-col-desc { width: 28%; }
  .balance-history-cols-5 .bh-col-amount,
  .balance-history-cols-5 .bh-col-saldo { width: 15%; }
}

/* =====================================================
   FORM ELEMENTS — dark theme override
   Bootstrap 5 default: white bg + dark text.
   Portal_legacy is dark themed — must override globally.
   ===================================================== */

/* Input fields — dark bg, semi-transparent border, white text.
   Must cover both .form-control (BS5 class) and bare input[type] selectors.
   The earlier rule "input[type=text] { border-color: #ccc }" has higher specificity
   (0,0,1,1) than .form-control (0,1,0) so we must explicitly list both selectors here. */
.form-control,
input[type=text],
input[type=number],
input[type=password],
input[type=email],
input[type=tel],
input[type=search],
textarea {
  background-color: var(--color-bg-medium, rgba(0,0,0,0.5));
  border-color: rgba(255,255,255,0.2);
  color: var(--color-text-white, #ffffff);
}
.form-control::placeholder,
input[type=text]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
textarea::placeholder {
  color: var(--color-text-muted, rgba(255,255,255,0.4));
}
.form-control:focus,
input[type=text]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=tel]:focus,
textarea:focus {
  background-color: var(--color-bg-medium, rgba(0,0,0,0.5));
  border-color: var(--color-primary, #d4a520);
  color: var(--color-text-white, #ffffff);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary, #d4a520) 25%, transparent);
}
/* Disabled/readonly fields — even darker, clearly non-interactive */
.form-control:disabled,
.form-control[readonly] {
  background-color: rgba(0,0,0,0.3);
  color: var(--color-text-muted, rgba(255,255,255,0.5));
  border-color: rgba(255,255,255,0.1);
}

/* Select dropdown — custom white chevron so it's visible on dark bg */
.form-select {
  background-color: var(--color-bg-medium, rgba(0,0,0,0.5));
  border-color: rgba(255,255,255,0.2);
  color: var(--color-text-white, #ffffff);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.form-select:focus {
  border-color: var(--color-primary, #d4a520);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary, #d4a520) 25%, transparent);
  background-color: var(--color-bg-medium, rgba(0,0,0,0.5));
  color: var(--color-text-white, #ffffff);
}
/* Native <option> elements fall back to OS render — set dark bg so they don't flash white */
.form-select option {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* Input group addon (e.g. "Rp" prefix) — semi-transparent dark, white text */
.input-group-text {
  background-color: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: var(--color-text-white, #ffffff);
}

/* =====================================================
   WITHDRAW BANK SEARCH DROPDOWN
   Keeps the empty-state bank registration picker inside the card while allowing
   members to search long provider lists.
   ===================================================== */
.wd-bank-select {
  position: relative;
  width: 100%;
}

.wd-bank-select-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  color: var(--color-text-white, #ffffff);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.wd-bank-select-toggle:hover,
.wd-bank-select-toggle:focus,
.wd-bank-select.is-open .wd-bank-select-toggle {
  border-color: var(--color-primary, #d4a520);
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--color-primary, #d4a520) 22%, transparent);
  outline: none;
}

.wd-bank-select-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wd-bank-select-label {
  color: var(--color-text-muted, rgba(255,255,255,0.64));
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
}

.wd-bank-select-value {
  overflow: hidden;
  color: var(--color-text-white, #ffffff);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wd-bank-select-icon {
  flex: 0 0 auto;
  color: var(--color-text-muted, rgba(255,255,255,0.66));
  transition: transform 0.15s ease, color 0.15s ease;
}

.wd-bank-select.is-open .wd-bank-select-icon {
  color: var(--color-primary, #d4a520);
  transform: rotate(180deg);
}

.wd-bank-select-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  overflow: hidden;
  background: rgba(24,24,24,0.98);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

.wd-bank-select-menu[hidden] {
  display: none;
}

.wd-bank-select-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: var(--color-text-muted, rgba(255,255,255,0.66));
}

.wd-bank-select-search {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  background: rgba(0,0,0,0.34);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 4px;
  color: var(--color-text-white, #ffffff);
  font-family: inherit;
  font-size: 14px;
}

.wd-bank-select-search:focus {
  border-color: var(--color-primary, #d4a520);
  outline: none;
}

.wd-bank-select-search::placeholder {
  color: var(--color-text-muted, rgba(255,255,255,0.58));
}

.wd-bank-select-options {
  max-height: 230px;
  overflow-y: auto;
  padding: 6px;
  -webkit-overflow-scrolling: touch;
}

.wd-bank-select-option {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--color-text-white, #ffffff);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.wd-bank-select-option[hidden] {
  display: none;
}

.wd-bank-select-option:hover,
.wd-bank-select-option:focus {
  background: rgba(255,255,255,0.08);
  color: var(--color-primary, #d4a520);
  outline: none;
}

.wd-bank-select-option.is-active {
  background: color-mix(in srgb, var(--color-primary, #d4a520) 18%, transparent);
  color: var(--color-primary, #d4a520);
}

.wd-bank-select-empty {
  padding: 10px 12px 12px;
  color: var(--color-text-muted, rgba(255,255,255,0.66));
  font-size: 13px;
}

.wd-bank-select-empty[hidden] {
  display: none;
}

/* =====================================================
   NAV TABS — dark theme
   boiji_client reference: border-bottom solid 4px, active tab
   highlighted with white bg + visible border sides.
   Overriding Bootstrap 5 default (white bg active tab, dark text).
   ===================================================== */
.nav-tabs {
  border-bottom: solid 2px rgba(255,255,255,0.3);
}
/* Inactive tab link — muted text, no background */
.nav-tabs .nav-link {
  color: var(--color-text-muted, rgba(255,255,255,0.6));
  border-color: transparent;
  background-color: transparent;
}
.nav-tabs .nav-link:hover {
  color: var(--color-text-white, #ffffff);
  border-color: transparent;
  background-color: rgba(255,255,255,0.05);
}
/* Active tab — white text, semi-transparent bg, visible side borders */
.nav-tabs .nav-link.active {
  color: var(--color-text-white, #ffffff);
  background-color: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2) rgba(255,255,255,0.2) transparent;
  font-weight: 600;
}

/* =====================================================
   FORM LABELS — readable on dark bg
   Bootstrap 5 default label color is near-black (#212529).
   ===================================================== */
.form-label,
label {
  color: var(--color-text-muted, rgba(255,255,255,0.7));
}

/* Form labels INSIDE registration / payment cards must be brighter than the
   default muted color, otherwise the label sits on the card-body background
   (which is already a darker semi-transparent surface) and effectively becomes
   dark-on-dark in deeper themes. Use the bright text color so the field name
   is always readable regardless of theme. Applies to:
   - public/register.ejs (form.form-signup)
   - all .card.card-body labels in transaction registration flows
   (deposit.ejs / withdraw.ejs / transactions/*) */
form.form-signup label,
form.form-signup .form-label,
.card .card-body label,
.card .card-body .form-label,
.card-body > label,
.card-body > .form-label {
  color: var(--color-text-white, #ffffff);
}

/* Active type indicator on registration form (Bank / eWallet / Telefon).
   Default state = muted; active state (no .text-muted class) = primary accent. */
form.form-signup label > span:not(.text-muted) {
  color: var(--color-primary, #d4a520);
  font-weight: bold;
}

/* =====================================================
   BLOCKQUOTE / card-blockquote (BS4 alpha pattern used in deposit.ejs)
   ===================================================== */
blockquote,
.card-blockquote {
  color: var(--color-text-white, #ffffff);
  border-left: 3px solid var(--color-primary, #d4a520);
  padding-left: 1rem;
  margin: 0.5rem 0;
}

/* =====================================================
   ALERTS — dark semi-transparent variants
   Bootstrap 5 default alerts are light-colored (pastel bg + dark text).
   Override to match dark theme: semi-transparent tinted bg + bright text.
   ===================================================== */
.alert-danger {
  background-color: rgba(220,53,69,0.2);
  border-color: rgba(220,53,69,0.5);
  color: #ff6b7a;
}
.alert-success {
  background-color: rgba(25,135,84,0.2);
  border-color: rgba(25,135,84,0.5);
  color: #75d79a;
}
.alert-warning {
  background-color: rgba(255,193,7,0.15);
  border-color: rgba(255,193,7,0.4);
  color: #ffd452;
}
.alert-info {
  background-color: rgba(13,202,240,0.15);
  border-color: rgba(13,202,240,0.3);
  color: #6edff6;
}

/* =====================================================
   CARD-PRIMARY / CARD-INVERSE (BS4 alpha compat — deposit.ejs running request cards)
   In boiji_client BS4 alpha, .card-primary.card-inverse renders a dark-accented
   card with primary color background and white text.
   In portal_legacy we map this to a semi-transparent accent background with
   gold/primary border so the running deposit notice stands out visually.
   ===================================================== */
.card.card-primary.card-inverse,
.card.card-primary {
  background-color: color-mix(in srgb, var(--color-primary, #d4a520) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary, #d4a520) 50%, transparent);
  color: var(--color-text-white, #ffffff);
}
.card.card-primary.card-inverse .card-blockquote,
.card.card-primary .card-blockquote {
  border-left-color: var(--color-primary, #d4a520);
  color: var(--color-text-white, #ffffff);
}
.card.card-primary.card-inverse .small,
.card.card-primary .small {
  color: var(--color-text-muted, rgba(255,255,255,0.7));
}

/* =====================================================
   QRIS FORM GREEN BORDER (deposit QRIS tab form container)
   Matches boiji_client's visual emphasis for the auto-deposit QRIS form.
   ===================================================== */
.card[style*="border:2px solid #198754"] {
  border-color: #198754 !important;
}

/* =====================================================
   GAMES TAB COMPONENT (boiji_client UI structure)
   Used in dashboard.ejs via components/games-tab.ejs.
   UI ported from boiji_client/imports/ui/apps/app-games-tab.html:
     - Top tab row of large category icons (icon swaps on/off when selected)
     - Click tab → switches active pane (per-category game grid)
   Launch behavior is INDEPENDENT (uses /play_games/:id flow from portal_classic).
   ===================================================== */

/* Tab row wrapper — boiji uses bottom border under the row.
   Mobile keeps the horizontal carousel affordance. Desktop shows every active
   category in one fitted row without arrows or overflow. */
.games-tab {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  align-items: stretch;
  background: var(--color-bg-dark, #000000);
  border-bottom: solid #fff 1px;
}
.games-tab-viewport {
  grid-column: 2;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-overflow-scrolling: touch;
}
.games-tab-viewport.is-dragging {
  cursor: grabbing;
}
.games-tab-viewport.is-dragging .game-tab-select {
  pointer-events: none;
}
.games-tab-viewport::-webkit-scrollbar {
  display: none;
}
.games-tab.is-single-tab {
  grid-template-columns: minmax(0, 1fr);
}
.games-tab.is-single-tab .games-tab-viewport {
  grid-column: 1;
}
.games-tab .games-tab-row {
  flex-wrap: nowrap;
  width: max-content;
  min-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.col-games-tab {
  flex: 0 0 164px;
  width: 164px;
  max-width: 164px;
  min-width: 164px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.games-tab-arrow {
  z-index: 4;
  position: relative;
  width: 54px;
  border: 0;
  color: var(--color-text, #ffffff);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: filter 0.18s ease;
}
.games-tab-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(1px);
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 18%,
    #000 82%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 18%,
    #000 82%,
    transparent 100%
  );
}
.games-tab-arrow i {
  position: relative;
  z-index: 1;
}
.games-tab-arrow:hover,
.games-tab-arrow:focus {
  color: var(--color-text, #ffffff);
  filter: brightness(1.08);
  outline: none;
}
.games-tab-arrow-left {
  grid-column: 1;
}
.games-tab-arrow-left::before {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-primary-light, #f5c358) 38%, transparent) 0%,
    color-mix(in srgb, var(--color-primary, #daa520) 23%, transparent) 48%,
    transparent 100%
  );
}
.games-tab-arrow-right {
  grid-column: 3;
}
.games-tab-arrow-right::before {
  background: linear-gradient(
    270deg,
    color-mix(in srgb, var(--color-primary-light, #f5c358) 38%, transparent) 0%,
    color-mix(in srgb, var(--color-primary, #daa520) 23%, transparent) 48%,
    transparent 100%
  );
}

.game-tab-select {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-tab-select.unclickable {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Boiji icon size: max-height ~120px on desktop. Scale down on mobile. */
.game-tab-icon {
  max-height: 120px;
  max-width: calc(100% - 12px);
  width: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
@media (max-width: 575.98px) {
  .games-tab { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .col-games-tab {
    flex-basis: 116px;
    width: 116px;
    max-width: 116px;
    min-width: 116px;
  }
  .games-tab-arrow {
    width: 40px;
    font-size: 24px;
  }
  .game-tab-select { height: 88px; }
  .game-tab-icon {
    max-height: 70px;
    max-width: calc(100% - 8px);
  }
}

@media (min-width: 992px) {
  .games-tab {
    display: block;
  }
  .games-tab-arrow {
    display: none !important;
  }
  .games-tab-viewport {
    grid-column: auto;
    overflow: hidden;
    cursor: default;
    touch-action: auto;
  }
  .games-tab .games-tab-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .games-tab .col-games-tab {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .games-tab [data-games-tab-clone] {
    display: none !important;
  }
  .game-tab-select {
    height: clamp(82px, 9vw, 120px);
  }
  .game-tab-icon {
    max-height: clamp(64px, 8vw, 112px);
    max-width: calc(100% - 8px);
  }
}

/* Tab pane (per-category game grid) */
.games-tab-content { min-height: 200px; }
.games-tab-pane { padding: 8px 0; }

/* Game card — boiji parity:
   - Bordered/elevated thumbnail
   - Square aspect, image fills
   - Name below in small caps
   - MAIN/LOGIN button overlays on hover (kept from portal_classic UX) */
.boiji-game-card {
  cursor: pointer;
  margin-bottom: 8px;
}
.boiji-game-thumb {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-primary, #d4a520) 35%, transparent);
  background: var(--color-bg-medium, rgba(0,0,0,0.4));
  aspect-ratio: 1 / 1;
  transition: border-color 0.2s, transform 0.2s;
}
.boiji-game-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.boiji-game-card:hover .boiji-game-thumb {
  border-color: var(--color-primary, #d4a520);
  transform: translateY(-2px);
}
.boiji-game-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.boiji-game-card:hover .boiji-game-overlay { opacity: 1; }

.boiji-game-name {
  display: block;
  margin-top: 4px;
  text-align: center;
  font-weight: 600;
  color: var(--color-text-white, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Provider tile (Step A grid in external-game tabs) ──
   Text-only tile: provider name centered on a themed dark surface, same square aspect
   as game cards. Hover lift + border highlight = same affordance as boiji-game-card.
   Anonymous-friendly: clicking just drills down to the game list (no overlay). */
.provider-card {
  cursor: pointer;
  user-select: none;
  margin-bottom: 8px;
}
.provider-tile {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-primary, #d4a520) 35%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-primary, #d4a520) 12%, var(--color-bg-medium, rgba(0,0,0,0.4))),
    var(--color-bg-medium, rgba(0,0,0,0.4)));
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  transition: border-color 0.2s, transform 0.2s;
}
.provider-card:hover .provider-tile {
  border-color: var(--color-primary, #d4a520);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary, #d4a520) 30%, transparent);
}
.provider-tile-name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.6px;
  color: var(--color-text-white, #ffffff);
  text-align: center;
  word-break: break-word;
  line-height: 1.2;
}
@media (max-width: 575.98px) {
  .provider-tile-name { font-size: 12px; }
}

/* Provider tile with logo image — image fits inside the square tile.
   `provider-tile-logo` modifier lets us tune padding only when an image is shown. */
.provider-tile.provider-tile-logo {
  padding: 14px;
}
.provider-logo-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Soft brightness boost so dark logos remain legible on the themed dark tile.
     Avoid full white-tint — providers want their brand colors visible. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
@media (max-width: 575.98px) {
  .provider-tile.provider-tile-logo { padding: 10px; }
}

/* Active-tab highlight for SVG line-art icons.
   PNG icons swap _on/_off via JS `src=`; SVG icons reuse one file, so we tint
   them via CSS filter when the parent .game-tab-select is active.
   Detection: SVG path has `.svg` suffix — using attribute selector on the inner img. */
.game-tab-select.is-active .game-tab-icon[src*=".svg"] {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-primary, #d4a520) 70%, transparent));
}

/* ── Game list view (Step B — after provider selected) ──
   Search input + grid + KEMBALI button. Search is theme-aware dark input. */
.game-list-view .game-list-title {
  color: var(--color-primary, #d4a520);
  font-weight: 700;
  letter-spacing: 1px;
}
.game-list-view .input-group .form-control {
  background-color: var(--color-bg-medium, rgba(0,0,0,0.4));
  border-color: var(--color-primary, #d4a520);
  color: var(--color-text-white, #ffffff);
}
.game-list-view .input-group .form-control::placeholder {
  color: var(--color-text-muted, rgba(255,255,255,0.5));
}
.game-list-view .input-group-text {
  background-color: var(--color-bg-medium, rgba(0,0,0,0.4));
  border-color: var(--color-primary, #d4a520);
  color: var(--color-text-white, #ffffff);
}
.game-list-view .btn-clear-game-filter {
  text-decoration: none;
}
.game-list-view .game-list-retry {
  max-width: 100%;
  white-space: normal;
}

/* KEMBALI button — boiji style: subtle link, left-aligned, with chevron. */
.games-tab-back-wrap .btn-deselect-game {
  color: var(--color-primary, #d4a520);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
}
.games-tab-back-wrap .btn-deselect-game:hover {
  color: var(--color-secondary, #c0922a);
  text-decoration: underline;
}

/* ── Lucky Number widget (boiji parity, theme-aware accent) ──
   Canvas slot machine on the dashboard. The bar colour is driven by JS reading
   --color-primary at spin time so theme switches are picked up automatically.
   Container sizing matches boiji: full row width, ~80px tall, click target obvious. */
.lucky-number-widget {
  width: 100%;
  background-color: var(--color-bg-medium, rgba(0, 0, 0, 0.4));
  border: 1px solid var(--color-primary, #d4a520);
  border-radius: 8px;
  padding: 8px;
}
.lucky-number-widget canvas {
  width: 100%;
  height: 80px;
  display: block;
  cursor: pointer;
}

/* ========================================
   FAVORIT SAYA — /favorites page + star button on game cards (portal_legacy)
   Ported from app_member (portal_classic_old) — adapted to portal_legacy theme vars.
   ======================================== */

/* Star button — sits over .card-game-col top-right. Click toggles favorite via
   global handler in layouts/body.ejs. Active state uses theme --color-primary. */
.game-fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: transform 0.15s, background 0.15s, color 0.15s;
}
.game-fav-btn:hover {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}
.game-fav-btn:disabled {
  cursor: wait;
  opacity: 0.6;
}
.game-fav-btn.is-active {
  color: var(--color-primary);
  background: rgba(0, 0, 0, 0.6);
}
.game-fav-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* /favorites page */
.favorites-page-section { padding-top: 8px; }

/* Mobile dropdown — hidden on desktop */
.favorites-filter-dd { display: none; }

/* Desktop pill strip */
.favorites-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.favorites-filter-pill {
  padding: 7px 14px;
  border: 1px solid var(--color-border-card, rgba(255,255,255,0.15));
  border-radius: 6px;
  background: var(--color-bg-card, rgba(0,0,0,0.4));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.favorites-filter-pill:hover {
  transform: translateY(-1px);
  border-color: var(--color-primary);
}
.favorites-filter-pill.is-active {
  background: var(--color-primary);
  color: #000;
  border-color: var(--color-primary);
}

/* Empty state card */
.favorites-empty-state {
  background: var(--color-bg-card, rgba(0,0,0,0.4));
  border: 1px solid var(--color-border-card, rgba(255,255,255,0.1));
}
.favorites-empty-state.is-hidden { display: none; }
.favorites-empty-icon {
  color: var(--color-primary);
  opacity: 0.85;
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--color-primary) 30%, transparent));
  margin-bottom: 6px;
}
.favorites-empty-title { color: #fff; font-weight: 700; }
.favorites-empty-subtitle { color: rgba(255,255,255,0.6); font-size: 14px; }

/* Favorites grid card slot for star button — leverages legacy .card.game-card-link styling */
.favorites-grid .card.game-card-link { position: relative; }

/* Mobile (<=880px): swap pill strip for custom dropdown */
@media (max-width: 880px) {
  .favorites-filter-pills { display: none; }
  .favorites-filter-dd {
    display: block;
    position: relative;
    margin-bottom: 12px;
  }
  .favorites-filter-dd-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: var(--color-bg-card, rgba(0,0,0,0.5));
    border: 1px solid var(--color-border-card, rgba(255,255,255,0.15));
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
  }
  .favorites-filter-dd.is-open .favorites-filter-dd-trigger { border-color: var(--color-primary); }
  .ffd-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ffd-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: rgba(255,255,255,0.55);
    transition: transform 0.2s, color 0.15s;
  }
  .favorites-filter-dd.is-open .ffd-chevron { transform: rotate(180deg); color: var(--color-primary); }
  .favorites-filter-dd-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-bg-card, rgba(0,0,0,0.9));
    border: 1px solid var(--color-border-card, rgba(255,255,255,0.15));
    border-radius: 6px;
    padding: 6px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  }
  .favorites-filter-dd-menu[hidden] { display: none; }
  .favorites-filter-dd-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    color: #fff;
    background: transparent;
    border: none;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 4px;
  }
  .favorites-filter-dd-item:hover {
    background: rgba(255,255,255,0.05);
    color: var(--color-primary);
  }
  .favorites-filter-dd-item.is-active {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    font-weight: 600;
  }

  .game-fav-btn {
    width: 24px;
    height: 24px;
    top: 4px;
    right: 4px;
  }
  .game-fav-btn svg {
    width: 14px;
    height: 14px;
  }
}

.member-vip-tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  max-width: 92px;
  min-height: 20px;
  padding: 2px 9px;
  border-radius: 6px;
  background: linear-gradient(180deg, #d7dde6 0%, #9aa4b2 100%);
  color: #101827;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 3px rgba(0, 0, 0, 0.22);
}