/* Local layer — ONLY the interaction states our JS toggles. No visual overrides: the look comes entirely
   from the design's own stylesheet stack (style.css / responsive.css / custom.css / theme.css). */

/* sidebar "All Sports" tree: bootstrap's .dropdown-menu is display:none until .show — same mechanism the
   live site uses. Keep the nested lists in-flow (not floating) inside the sidebar. */
.menu-box .dropdown-menu { position: static; float: none; }
.menu-box .dropdown-menu:not(.show) { display: none; }
.menu-box .dropdown-menu.show { display: block; }

/* accordion collapse without the bootstrap js bundle (same classes bootstrap toggles) */
.sidebar .accordion-collapse.collapse:not(.show) { display: none; }

/* mobile Download-APK bar close */
.point-apk-box.hidden { display: none !important; }

/* logged-in header: username dropdown (Bootstrap .show toggled by behaviors/header.js) */
.header .user-details .dropdown { position: relative; }
.header .user-details .dropdown-menu { position: absolute; inset: 0px 0px auto auto; transform: translate3d(0, 18.67px, 0); }
.header .user-details .dropdown-menu:not(.show) { display: none; }
.header .user-details .dropdown-menu.show { display: block; }
.header .user-details .dropdown-menu > a { text-decoration: none; }
.header .user-details .dropdown-menu li.dropdown-item { list-style: none; }
/* modals are rendered into #modal-root (react-bootstrap portal equivalent) */
body.modal-open { overflow: hidden; }
#modal-root .modal-backdrop { z-index: 1050; }
#modal-root .modal { z-index: 1055; }

/* datepicker: popup is positioned under its field (react-datepicker-popper is absolute) */
.report-form form > .col-lg-2 { position: relative; }
.custom-datepicker { cursor: pointer; }
.custom-datepicker input[disabled] { pointer-events: none; }

/* header search results: scroll when long */
.search-box .search-list { max-height: 60vh; overflow-y: auto; }

/* rules modal: sidebar + content scroll independently inside the modal */
.rules-modal .modal-body { max-height: calc(100vh - 160px); overflow: hidden; }
.rules-modal .rules-left-sidebar { max-height: calc(100vh - 180px); overflow-y: auto; }
.rules-modal .rules-content { max-height: calc(100vh - 180px); overflow-y: auto; }
.rules-modal .rules-langualge .dropdown-menu { display: none; position: absolute; right: 0; left: auto; }
.rules-modal .rules-langualge .dropdown-menu.show { display: block; }

/* pagination buttons */
.custom-pagination > div[disabled] { pointer-events: none; opacity: .5; }
.custom-pagination > div[data-action="page"] { cursor: pointer; }

/* react-hot-toast bar + icons (goober runtime classes the design renders; keyframes are in style.css) */
@keyframes go502128938 { 0% { transform: translate3d(0, -200%, 0) scale(.6); opacity: .5; } 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; } }
@keyframes go3199220591 { 0% { transform: translate3d(0, 0, -1px) scale(1); opacity: 1; } 100% { transform: translate3d(0, -150%, -1px) scale(.6); opacity: 0; } }
.go2072408551 { display: flex; align-items: center; background: #fff; color: #363636; line-height: 1.3; will-change: transform; box-shadow: 0 3px 10px rgba(0,0,0,.1), 0 3px 3px rgba(0,0,0,.05); max-width: 350px; pointer-events: auto; padding: 8px 10px; border-radius: 8px; }
.go3958317564 { display: flex; justify-content: center; margin: 4px 10px; color: inherit; flex: 1 1 auto; white-space: pre-line; }
.go685806154 { position: relative; display: flex; justify-content: center; align-items: center; min-width: 20px; min-height: 20px; }
.go1858758034 { width: 12px; height: 12px; box-sizing: border-box; border: 2px solid; border-radius: 100%; border-color: #e0e0e0; border-right-color: #616161; animation: go1268368563 1s linear infinite; }
.go1579819456 { position: absolute; }
.go2534082608 { width: 20px; opacity: 0; height: 20px; border-radius: 10px; background: #ff4b4b; position: relative; transform: rotate(45deg); animation: go2264125279 .3s cubic-bezier(.175,.885,.32,1.275) forwards; animation-delay: 100ms; }
.go2534082608:after, .go2534082608:before { content: ''; animation: go3020080000 .15s ease-out forwards; animation-delay: 150ms; position: absolute; border-radius: 3px; opacity: 0; background: #fff; bottom: 9px; left: 4px; height: 2px; width: 12px; }
.go2534082608:before { animation: go463499852 .15s ease-out forwards; animation-delay: 180ms; transform: rotate(90deg); }
.go2344853693 { width: 20px; opacity: 0; height: 20px; border-radius: 10px; background: #61d345; position: relative; transform: rotate(45deg); animation: go1310225428 .3s cubic-bezier(.175,.885,.32,1.275) forwards; animation-delay: 100ms; }
.go2344853693:after { content: ''; box-sizing: border-box; animation: go651618207 .2s ease-out forwards; opacity: 0; animation-delay: 200ms; position: absolute; border-right: 2px solid; border-bottom: 2px solid; border-color: #fff; bottom: 6px; left: 6px; height: 10px; width: 6px; }

/* loader.js: parent of a #loader-section overlay when it isn't positioned itself */
.has-loader { position: relative; }
#loader-section { z-index: 5; }

/* loader.js: content hidden under the spinner until it has "loaded" */
.is-loading > :not(#loader-section):not(.keep-visible) { visibility: hidden; }
.is-loading { min-height: 120px; }
/* whole-screen spinner shown before a modal opens */
.loader-fixed { position: fixed; inset: 0; z-index: 1060; }
.is-loading > .keep-visible { visibility: visible; }
/* page loader (match / casino pages opening): the overlay covers at least a screen, the spinner is fixed in the middle
   of the screen whatever the page's height or scroll */
.page-loading { min-height: calc(100vh - 120px); }
#loader-section.page-center #load-inner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 11; }
#loader-section.page-center #load-inner i { margin-top: 0; }
/* loader over a container taller than the viewport: spinner stays on screen */
#loader-section.tall { align-items: flex-start; }
#loader-section.tall #load-inner { position: sticky; top: calc(50vh - 40px); }
/* centered modals (deposit proof / UTR, add account): never taller than the screen — the body scrolls inside,
   so the dialog stays in the middle of the viewport on short laptop screens too */
#modal-root .modal-dialog-centered { min-height: calc(100% - 16px); margin-top: 8px; margin-bottom: 8px; }
#modal-root .modal-dialog-centered .modal-content { max-height: calc(100vh - 16px); display: flex; flex-direction: column; }
#modal-root .modal-dialog-centered .modal-body { overflow-y: auto; }

/* modals fade in with a small slide down from the top (UTR modal appears at once — see behaviors/modals.js) */
#modal-root .modal.fade .modal-dialog { transform: translate(0, -20px); transition: transform .2s ease-out; }
#modal-root .modal.show .modal-dialog { transform: none; }
#modal-root .modal-backdrop.fade { transition: opacity .15s linear; }
[data-role="tooltip"].tooltip { max-width: min(200px, calc(100vw - 8px)); }
/* register page inline messages (design's .success-form slot) — centered under the field */
#register-form .input-group .success-form { width: 100%; text-align: center; font-size: 13px; }
#register-form .success-form.text-success { color: #198754 !important; }

/* Unlimited Joker Oneday: the Joker the user selected (no rule for it in the site's stylesheet) */
.joker1-other-cards img { cursor: pointer; }
.joker1-other-cards img.active { outline: 3px solid var(--bg-primary, #ffc107); outline-offset: 2px; border-radius: 4px; }

/* card suits are drawn as ♥ ♦ ♠ ♣ (sections/casinoTable.js suit()): a font that has them on every device — the design's
   "Card Characters" web font comes from the provider's CDN and is often blocked on other domains */
.card-icon { font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "Noto Sans Symbols", "DejaVu Sans", Arial, sans-serif !important; line-height: 1; }

/* 1 Card Meter (Rocky): the picked fighter keeps the design's own :hover look (green fill, the fist out) from the click
   until its Place Bet box / modal closes — the same rules as style.css's :hover, on a class our JS toggles */
.one-card-meter .meter-btns .meter-btn .btn-fighter-1.is-picked,
.one-card-meter .meter-btns .meter-btn .btn-fighter-2.is-picked { color: #fff; }
.one-card-meter .meter-btns .meter-btn .btn-fighter-1.is-picked:before,
.one-card-meter .meter-btns .meter-btn .btn-fighter-2.is-picked:before { width: 100%; }
.one-card-meter .meter-btns .meter-btn .btn-fighter-1.is-picked img { transition: all 0.5s; margin-left: 30px; transform: scale(1.5) rotate(90deg); }
.one-card-meter .meter-btns .meter-btn .btn-fighter-2.is-picked img { transition: all 0.5s; margin-right: 30px; transform: scale(1.5) rotate(270deg); }

/* the table message bar (casino-remark): the design's style.css also carries Goal's green strip as a global rule; Rocky's
   captures show it green on Goal only — every other table has the plain remark line (style.css's first .casino-remark) */
.casino-page-container:not(.goal) .casino-remark { display: inline-block; background-color: transparent; color: var(--text-info); height: auto; padding: 0 5px; }
.casino-page-container:not(.goal) .casino-remark marquee { width: 100%; float: none; }

/* Goal / Goal 2 / Lucky 15 / Ball by Ball on phones (≈410–790px wide, e.g. a 412px phone): name 60% + Back 20% + Min/Max
   20% add up to exactly 100%, and sub-pixel rounding pushed Min/Max onto a line of its own under the name (Rocky's
   screenshot). The site's own newer style.css keeps Goal 2's rows on one line the same way (.goal2 .market-6 .market-row) */
.ball-by-ball .market-6 .market-row { flex-wrap: nowrap; }

/* the floating WhatsApp / Signal buttons stay in view while the page scrolls (the design's rule is position: absolute,
   which scrolls away with the page) */
#floater { position: fixed; top: 50vh; }
/* the mobile menu tabs (Crash · Lottery · Sports · Our Casino …) scroll sideways inside their strip instead of making the
   whole page wider than the phone (which pushed the floating buttons off the screen) */
.main-container .nav-tabs.menu-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.main-container .nav-tabs.menu-tabs::-webkit-scrollbar { display: none; }
.main-container .nav-tabs.menu-tabs .nav-link { white-space: nowrap; }

.search-box a[data-action="search-go"] { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }