/* d777 local layer — states the designs own script used to set */

/* ── loader (core/loader.js) — d777 had no rules for it, so the spinner sat in the top corner (Rocky, Oct 20).
   #loader-section is a translucent overlay over its container with the spinner in the MIDDLE; page loads keep it in the
   middle of the screen; a container taller than the screen keeps it in view. Same rules as d1 / d2. ── */
#loader-section { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; text-align: center; background-color: rgba(0, 0, 0, 0.35); z-index: 5; }
#load-inner { position: relative; text-align: center; }
#load-inner i { font-size: 28px; color: #fff; margin: 0; }
.has-loader { position: relative; }
.is-loading { min-height: 120px; }
.is-loading > :not(#loader-section):not(.keep-visible) { visibility: hidden; }
.is-loading > .keep-visible { visibility: visible; }
.loader-fixed { position: fixed; inset: 0; z-index: 1060; }
.loader-fixed #loader-section { position: fixed; }
.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.tall { align-items: flex-start; }
#loader-section.tall #load-inner { position: sticky; top: calc(50vh - 20px); }
.loader-block #loader-section { position: absolute; }

/* ── the phones' countdown strip runs down continuously (Rocky, Oct 20): casino tables redraw it once a second, so it
   slides over that second; Cricket V's bar is moved every 100 ms by its local clock. A new round (bar back to full)
   jumps at once. ── */
.casino-container .mobile-timer .progress-bar { transition: width 1s linear !important; }
[data-role="v-bar"] .progress-bar { transition: width .1s linear !important; }

/* ── phones, the pinned casino video (Ball by Ball, Goal, Super Over … — .ball-by-ball): the design pins the video at
   94 px and the countdown strip at 88 px; between rounds (no strip) the markets scrolled through that 6 px gap. The gap
   is now filled with the page colour and the strip stays on top of it (Rocky, Oct 20). ── */
@media only screen and (max-width: 767px) {
  .ball-by-ball .casino-video { box-shadow: 0 -6px 0 0 var(--bg-body); }
  .ball-by-ball-timer { z-index: 11; }
}

/* ── Slot / casino PROVIDERS: the selected provider stands out (Rocky, Oct 20) — the design only outlined it, the same
   as the others in the light theme and on phones. Filled with the site's green, white text, both themes. ── */
.facncy-provider li a.active,
:root[data-theme="light"] .facncy-provider li a.active { background: var(--bg-success) !important; border: 1px solid var(--bg-success) !important; }
.facncy-provider li a.active span,
:root[data-theme="light"] .facncy-provider li a.active span { color: var(--text-white) !important; }

/* ── left sidebar (Rocky, Oct 20): the design fixes it at 100vh from 34 px down with no scroll of its own on desktops,
   so a long sports list ran off the screen. It now ends at the screen's bottom and its menu scrolls inside it; the
   wheel / swipe stays in the menu (the page behind doesn't move). The phone drawer keeps its own scroll, also contained. ── */
@media only screen and (min-width: 768px) {
  .sidebar-left { height: calc(100vh - 34px); min-height: 0; display: flex; flex-direction: column; }
  .animate-on .sidebar-left { height: calc(100vh - 68px); }
  .sidebar-left > .menu-scrolable { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
}
#sidebar-left-mo, #sidebar-left-mo .menu-scrolable, .b-sidebar-body { overscroll-behavior: contain; }

/* ── Unlimited Joker: the picked Joker on the Place Bet slip (silverbet: the card at the right of the Amount; desktop:
   a small card after the name) ── */
#casino-place-bet-modal .casino-place-bet-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.slip-joker img { height: 56px; width: auto; display: block; }
.slip-joker-sm { display: inline-block; vertical-align: middle; margin-left: 6px; }
.slip-joker-sm img { height: 28px; }