/*
 * FLEX9JA site overrides.
 *
 * style.css / responsive.css / all.css / aos.css / swiper*.css in this folder are the
 * mockup's own vendor stylesheets (see bigbrain.md 2.3) - never edit them directly.
 * Anything a future page port needs to add or override belongs in this file instead.
 */

/* Loading overlay used by ajax submit handlers in template.master (bigbrain.md
   "Frontend / Process Patterns" - freezescreen + disable-button ajax UX pattern).
   Logo + gif layout matches CMM_HEY66_SGD's .loading-panel/.loading-logo/.loading-gif
   reference (logo centered, indicator positioned just below it). _preload_indicator.gif is
   HEY66's real preload asset (found at FLEX9JA/bingo/images/common/, copied into
   web/images/common/ rather than fabricated) - a different file from load-indicator.gif,
   which is used below for the separate inline balance-loading indicator, not the freezescreen. */
#freezescreen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.55);
}

.freezescreen-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 30px));
    max-height: 200px;
}

.freezescreen-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 90px));
    width: 100px;
}

/* Inline balance-value loading indicator (header_balance_*/side_balance) - swapped in for the
   value text while proc_getMemberTotalBalance is in flight, matching HEY66's
   getMemberTotalBalance() $("#top_balance").html(...) pattern (see the shared
   refreshHeaderBalance() in template.master, and refreshWithdrawBalance()). */
.balance-loading-gif {
    width: 16px;
    vertical-align: middle;
}

/* jcmm-float-icon close button (bigbrain.md 2.5 porting checklist).
   Positioned right, not left - a left position was tried on another project and
   produced a mis-placed close affordance. */
#float-icon {
    position: relative;
}

#closeButton {
    position: absolute;
    top: -10px;
    right: -15px;
    left: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: #222;
    color: #fff;
    font-size: 12px;
    line-height: 22px;
    padding: 0;
    cursor: pointer;
    z-index: 1;
}

/* Register modal captcha image (real /ajaxData/proc_captchaCode.aspx image, swapped in
   for the mockup's static placeholder code). */
.log-code-img {
    height: 38px;
    cursor: pointer;
    border-radius: 4px;
}

.loading-indicator {
    width: 20px;
    height: 20px;
}

/* Genuine "no data yet" state for the account-area ".recent-box" (Recent Activity).
   style.css only ships markup for populated rows (mockup fills them with fabricated
   sample transactions) - this covers the empty case instead of inventing fake data. */
.recent-empty-text {
    margin: 0;
    padding: 16px 0;
    text-align: center;
    opacity: 0.7;
}

/* Game lobby pages (casino/crash/fish/lotto/slot/sports.aspx) - provider list is real
   (proc_getProductListByCategory), rendered into the mockup's existing .prod-grid /
   .game-card markup. These rules only add what the mockup's static markup didn't need:
   a back-to-providers link and graceful empty/no-image states. */
.lobby-back-btn {
    display: inline-block;
    margin: 0 0 12px;
    cursor: pointer;
    opacity: 0.85;
}

.lobby-back-btn:hover {
    opacity: 1;
}

.game-card .prov-name-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 8px;
    word-break: break-word;
}

.lobby-no-data {
    grid-column: 1 / -1;
    text-align: center;
    padding: 24px 0;
    opacity: 0.7;
}

/* wheel.aspx - the mockup's .fw-disc was a decorative CSS-only placeholder (no real wheel data
   existed for it to draw), now replaced by the actual canvas Winwheel draws on, sized/positioned
   the same way .fw-disc was (inset:11% of .fw-wheel). fortunewheel.css also defines
   #fortune-wheel-canvas with margin-top:-30px, a leftover from its own popup-loading-state
   pattern that doesn't apply here - reset to 0. */
#fortune-wheel-canvas {
    position: absolute;
    inset: 11%;
    width: 78%;
    height: 78%;
    margin-top: 0 !important;
    border-radius: 50%;
    z-index: 1;
}

/* mission.aspx - OPEN stays clickable (so members can still view a locked mission's detail
   modal, same as BETRUST's reference) even when not claimable; this only greys it out visually. */
.mission-btn-locked {
    filter: brightness(0.6);
}

/* mission.aspx detail modal - claim_now button, greyed out + non-interactive when the
   mission's own claimable flag is false (already claimed / requirements not met). */
.mission-claim-btn.disabled {
    filter: brightness(0.6);
    pointer-events: none;
}

/* promotion.aspx - .promo-img/.promo-body open the promo detail modal on click
   (see [data-toggle-detail]); style.css never gave them a pointer cursor. */
.promo-img[data-toggle-detail],
.promo-body[data-toggle-detail] {
    cursor: pointer;
}

/* bank.aspx - the BANK_ID <select> reuses .acc-input (color:#fff, background:transparent)
   so it sits flush inside its .acc-box, same as profile.aspx's text inputs. But an <option>
   in its dropdown popup is rendered by the OS, not by .acc-box - it doesn't inherit that
   transparent background, so white text on the OS's own white popup background disappeared.
   Same fix .dep-select option already applies in style.css, just for this select's options. */
select.acc-input option {
    background: var(--bg-color2);
    color: #fff;
}