/* ===========================================================================
   777cloud cashier — NEON skin (2026-10-15)
   ===========================================================================
   Source: /www/shared/auth/web/c7neon.css, copied to each site as vendor/c7neon.css
   and linked AFTER the page's own <style>, so it only re-skins. Modelled on the
   juwa2 cashier's neon skin (cyan + magenta signage light, crisp white numbers).
   Two cashier layouts exist and both are covered, each scoped to its overlay:
     #cashierOverlay  — wheel lobbies (FireKirin, PandaMaster, VBLink family)
     #ov              — card lobbies (OrionStars, Joker777)
   Restraints kept from juwa2: the QR stays black-on-white (glowing QRs fail to
   scan) and body copy stays near-white; the glow goes on edges, accents, numbers. */

/* Palette: a site re-themes everything below by setting these on :root in its own <style>.
   Defaults sit on `html` (lower specificity than :root) so the site's values always win,
   whichever file loads last. Defaults are juwa2's cyan + magenta. */
html {
  --c7-neon: 34,233,255;  --c7-neon2: 255,45,210;
  --c7-btn1: #5cf3ff;  --c7-btn2: #0bb6e6;  --c7-btn-ink: #00131c;
  --c7-hi: var(--c7-hi);    --c7-soft: var(--c7-soft);  --c7-label: var(--c7-label);
  --c7-wal1: #ff6be4;  --c7-wal2: #d61cb4;  --c7-wal-ink: #1d0018;
  --c7-panel1: rgba(22,33,74,.97);  --c7-panel2: rgba(9,14,38,.98);
  --c7-deep: rgba(8,30,60,.9);
}
#cashierOverlay, #ov {
  --neon: var(--c7-neon);  --neon2: var(--c7-neon2);  --neon3: 255,42,86;  --nok: 57,255,163;
  background:
    radial-gradient(520px 380px at 12% 8%,  rgba(var(--neon2),.18), transparent 65%),
    radial-gradient(560px 400px at 90% 4%,  rgba(var(--neon),.18),  transparent 65%),
    rgba(3,5,18,.74) !important;
  backdrop-filter: blur(6px);
}

/* ---- the panel ---- */
#cashierOverlay .sheet, #ov .sheet {
  color: #fff;
  background:
    radial-gradient(420px 220px at 0% 0%,    rgba(var(--neon2),.16), transparent 70%),
    radial-gradient(420px 220px at 100% 0%,  rgba(var(--neon),.16),  transparent 70%),
    linear-gradient(180deg, var(--c7-panel1), var(--c7-panel2)) !important;
  border: 1px solid rgba(var(--neon),.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(var(--neon2),.22),
    0 0 50px rgba(var(--neon),.28),
    0 0 110px rgba(var(--neon2),.16),
    0 26px 64px rgba(0,0,0,.7) !important;
}
#cashierOverlay .sheet-head h2, #ov .sheet h3 {
  color: var(--c7-hi); letter-spacing: .4px; text-shadow: 0 0 10px rgba(var(--neon),.55);
}
#cashierOverlay .sheet-head::before {
  background: linear-gradient(145deg, rgb(var(--c7-neon)), rgb(var(--c7-neon2))) !important;
  box-shadow: 0 0 16px rgba(var(--neon),.6), 0 0 26px rgba(var(--neon2),.35), inset 0 1px 0 rgba(255,255,255,.45) !important;
}
#cashierOverlay .x, #ov .x {
  border: 1px solid rgba(var(--neon),.35) !important; background: rgba(var(--neon),.07) !important;
  color: var(--c7-soft) !important; border-radius: 50%;
}
#ov .x { width: 34px; height: 34px; padding: 0; line-height: 32px; text-align: center; }
#cashierOverlay .x:active, #ov .x:active { background: rgba(var(--neon),.2) !important; }

/* ---- balance: the one place a strong glow earns its keep ---- */
#cashierOverlay .balance-card {
  background: linear-gradient(135deg, rgba(var(--neon2),.24), rgba(var(--neon),.16)) !important;
  border: 1px solid rgba(var(--neon2),.55) !important;
  box-shadow: inset 0 0 30px rgba(var(--neon2),.2), 0 0 26px rgba(var(--neon2),.28);
}
#cashierOverlay .balance-label { color: var(--c7-label) !important; text-shadow: 0 0 6px rgba(var(--neon2),.45); }
#cashierOverlay .balance-amount {
  color: #fff !important; text-shadow: 0 0 1px rgba(255,255,255,.9), 0 0 14px rgba(var(--neon),.5);
}

/* ---- tabs ---- */
#cashierOverlay .tabs { background: rgba(0,0,0,.42) !important; border: 1px solid rgba(var(--neon),.12); }
#ov .tabs { background: rgba(0,0,0,.42); border: 1px solid rgba(var(--neon),.12); padding: 5px; border-radius: 13px; gap: 6px; }
#cashierOverlay .tab, #ov .tabs button {
  color: #a9bedd !important; background: transparent !important; border: 1px solid transparent !important;
  transition: background .2s, box-shadow .2s, color .2s;
}
#ov .tabs button { border-radius: 9px; padding: 10px; font-weight: 700; }
#cashierOverlay .tab.active, #ov .tabs button.sel {
  background: linear-gradient(180deg, rgba(var(--neon),.30), rgba(var(--neon),.10)) !important;
  color: var(--c7-hi) !important; text-shadow: 0 0 10px rgba(var(--neon),.9);
  border-color: rgba(var(--neon),.75) !important;
  box-shadow: 0 0 22px rgba(var(--neon),.45) !important;
}

/* ---- inputs ---- */
#cashierOverlay .amount-row, #cashierOverlay .text-in, #ov input, #ov textarea {
  border-color: rgba(var(--neon),.24) !important; background: rgba(0,0,0,.45) !important; color: #fff !important;
  transition: border-color .2s, box-shadow .2s;
}
#cashierOverlay .amount-row:focus-within, #cashierOverlay .text-in:focus, #ov input:focus, #ov textarea:focus {
  outline: none;
  border-color: rgba(var(--neon),.8) !important;
  box-shadow: 0 0 0 3px rgba(var(--neon),.14), 0 0 18px rgba(var(--neon),.24) !important;
}
#cashierOverlay .amount-row .cur { color: var(--c7-soft) !important; text-shadow: 0 0 8px rgba(var(--neon),.5); }
#cashierOverlay .field-label, #ov label { color: #8fb3d9 !important; }

/* ---- amount chips ---- */
#cashierOverlay .chip, #ov .chips button {
  background: rgba(var(--neon),.05) !important; border: 1px solid rgba(var(--neon),.24) !important;
  color: #dbe8fb !important; transition: background .15s, box-shadow .15s, border-color .15s;
}
#cashierOverlay .chip:active, #ov .chips button:active, #cashierOverlay .chip:focus-visible, #ov .chips button:focus-visible {
  border-color: rgba(var(--neon3),.95) !important; background: rgba(var(--neon3),.22) !important; color: #fff !important;
  text-shadow: 0 0 10px rgba(var(--neon3),.9);
  box-shadow: 0 0 24px rgba(var(--neon3),.6), inset 0 0 14px rgba(var(--neon3),.25);
}

/* ---- primary + secondary buttons ---- */
#cashierOverlay .submit, #ov .btn-gold {
  background: linear-gradient(180deg, var(--c7-btn1), var(--c7-btn2)) !important; color: var(--c7-btn-ink) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35); border: 0 !important;
  box-shadow: 0 0 22px rgba(var(--neon),.7), 0 0 54px rgba(var(--neon),.3), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
#cashierOverlay .submit:active, #ov .btn-gold:active {
  box-shadow: 0 0 36px rgba(var(--neon),.95), 0 0 76px rgba(var(--neon),.5) !important;
}
#cashierOverlay .submit:disabled, #ov .btn-gold:disabled { box-shadow: none !important; opacity: .45; }
#cashierOverlay .ghost, #ov .btn-ghost {
  background: rgba(var(--neon),.05) !important; border: 1px solid rgba(var(--neon),.42) !important;
  color: var(--c7-soft) !important; box-shadow: 0 0 12px rgba(var(--neon),.16) !important;
}
/* "Open wallet" (c7.js) copies its anchor's class; give it the magenta voice so it reads as the next step */
#cashierOverlay #c7Wallet, #ov #c7Wallet {
  background: linear-gradient(180deg, var(--c7-wal1), var(--c7-wal2)) !important; color: var(--c7-wal-ink) !important; border: 0 !important;
  box-shadow: 0 0 20px rgba(var(--neon2),.6), 0 0 48px rgba(var(--neon2),.25), inset 0 1px 0 rgba(255,255,255,.5) !important;
}

/* ---- invoice ---- */
#cashierOverlay #qr, #ov #qr {
  background: #fff !important;
  box-shadow: 0 0 0 2px rgba(var(--neon),.95), 0 0 30px rgba(var(--neon),.7), 0 0 70px rgba(var(--neon2),.32);
}
#cashierOverlay .inv-amt { color: #fff !important; text-shadow: 0 0 1px #fff, 0 0 14px rgba(var(--neon),.55); }
#cashierOverlay .inv-timer { color: #8fb3d9 !important; }
#cashierOverlay .inv-status::before { background: rgb(var(--neon)) !important; box-shadow: 0 0 12px rgba(var(--neon),.9); }
#cashierOverlay .inv-status.ok { color: #a9ffd8 !important; }
#cashierOverlay .inv-status.ok::before { background: #39ffa3 !important; box-shadow: 0 0 12px rgba(var(--nok),.9); }
#cashierOverlay .inv-chain, #ov .pr {
  background: rgba(0,0,0,.5) !important; border-color: rgba(var(--neon),.18) !important; color: #b9cbe8 !important;
}

/* ---- notes + messages ---- */
#cashierOverlay .rule-note, #ov .rule {
  background: linear-gradient(135deg, rgba(var(--neon2),.10), rgba(var(--neon),.05)) !important;
  border: 1px solid rgba(var(--neon2),.28) !important; color: #c9d6ee !important;
}
#cashierOverlay .rule-note b, #ov .rule b { color: var(--c7-label) !important; }
#cashierOverlay .rule-note .warn, #ov .rule .warn { color: #ff6b8b !important; }
#cashierOverlay .cash-msg.ok, #ov .msg.ok { color: #a9ffd8 !important; text-shadow: 0 0 8px rgba(var(--nok),.35); }
#cashierOverlay .cash-msg.err, #ov .msg.bad { color: #ffc2ce !important; }

@media (prefers-reduced-motion: reduce) {
  #cashierOverlay *, #ov * { transition: none !important; }
}

/* The c7.js home button sits bottom-centre, right on top of the cashier's main button: hide it while the cashier is open */
body:has(#cashierOverlay:not([hidden])) #c7Home, body:has(#ov.on) #c7Home { display: none !important; }

/* ===========================================================================
   Lobby theme (opt-in: <body class="c7t">) — carries the site's neon colour from the
   cashier into the lobby: Cashier button, game cards, category dividers, arrows.
   ========================================================================= */
body.c7t .cashier-btn, body.c7t #cashBtn {
  background: linear-gradient(180deg, var(--c7-btn1), var(--c7-btn2)) !important; color: var(--c7-btn-ink) !important;
  border: 1px solid rgba(255,255,255,.45) !important; animation-name: c7throb !important;
  box-shadow: 0 0 16px rgba(var(--c7-neon),.6), inset 0 1px 0 rgba(255,255,255,.45);
}
body.c7t #cashBtn { animation: c7throb 2.4s ease-in-out infinite; }
body.c7t #cashBtn:disabled { animation: none; opacity: .55; box-shadow: none; }
body.c7t .cashier-btn .bal { background: rgba(0,0,0,.25) !important; color: inherit !important; }
@keyframes c7throb {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 14px rgba(var(--c7-neon),.55), inset 0 1px 0 rgba(255,255,255,.45); }
  50%      { transform: scale(1.05); box-shadow: 0 0 26px rgba(var(--c7-neon),.9), 0 0 34px 6px rgba(var(--c7-neon2),.32), inset 0 1px 0 rgba(255,255,255,.45); }
}
body.c7t .tile {
  border-color: rgba(var(--c7-neon),.38) !important;
  box-shadow: 0 0 14px rgba(var(--c7-neon),.32), 0 10px 22px rgba(0,0,0,.5) !important;
}
@media (hover: hover) { body.c7t .tile:hover { border-color: rgba(var(--c7-neon),.85) !important; box-shadow: 0 0 26px rgba(var(--c7-neon),.7), 0 16px 30px rgba(0,0,0,.55) !important; } }
body.c7t .banner {
  color: #fff;
  background: linear-gradient(170deg, rgba(var(--c7-neon),.55), var(--c7-deep) 70%) !important;
  border: 1px solid rgba(var(--c7-neon),.8) !important;
  box-shadow: 0 0 18px rgba(var(--c7-neon),.6), 0 0 42px rgba(var(--c7-neon),.2),
              inset 0 0 22px rgba(var(--c7-neon2),.28), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
body.c7t .banner .b-title { text-shadow: 0 0 10px rgba(var(--c7-neon),.95), 0 0 2px #fff !important; }
body.c7t .warrow {
  border-color: rgba(var(--c7-neon),.55) !important; color: #fff !important;
  text-shadow: 0 0 8px rgba(var(--c7-neon),.9);
  box-shadow: 0 0 14px rgba(var(--c7-neon),.45), 0 6px 18px rgba(0,0,0,.5) !important;
}
@media (prefers-reduced-motion: reduce) { body.c7t .cashier-btn, body.c7t #cashBtn { animation: none !important; } }