/* 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; }

/* casino list tiles with their name (the design's Sept 26 list): the name sits on a strip across the tile's bottom */
.casino-list-item > a { display: block; position: relative; color: inherit; text-decoration: none; }
.casino-list-item .casino-list-name { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to right, var(--bg-primary), var(--bg-secondary)); color: var(--text-primary); text-align: center; font-size: 12px; font-weight: 700; line-height: 1.25; padding: 3px 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media only screen and (max-width: 767px) { .casino-list-item .casino-list-name { padding: 2px; font-size: 8px; } }   /* the design's phone size (vendor/responsive.css) */

/* 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; }