/* ============================================================
   WINSPLAY24 — Babu88-exact Yellow/Black Theme
   ============================================================ */

/* --- CSS Variables — organised by section --- */
:root {

  /* ── BRAND ACCENT ──────────────────────────────────────────────────── */
  --accent:              #FFC200;              /* primary brand yellow       */
  --accent-2:            #e6a800;              /* darker shade               */
  --accent-hover:        #ffca28;              /* lighter hover shade        */
  --shadow-accent:       0 4px 24px rgba(255,194,0,.3);

  /* ── PAGE BACKGROUND & TEXT ────────────────────────────────────────── */
  --bg:                  #ffffff;              /* body / page background     */
  --text:                #111111;              /* primary text               */
  --text-muted:          #666666;              /* secondary / muted text     */
  --text-sub:            #444444;              /* sub-text                   */
  --border:              rgba(0,0,0,.1);
  --border-light:        rgba(0,0,0,.15);
  --bg-wins:             #f5f5f5;              /* wins panel background      */

  /* ── HEADER ────────────────────────────────────────────────────────── */
  --bg-header:           #ffffff;              /* top header bar background  */
  --nav-bg:              #333333;              /* header nav-strip BG        */
  --header-h:            75px;

  /* ── PAGE LAYOUT ───────────────────────────────────────────────────── */
  --page-wrapper-bg:     #ffffff;              /* .page-wrapper background   */
  --page-content-bg:     #ffffff;              /* .page-content background   */
  --page-content-alt-bg: #f0f2f5;              /* grey bg (history, settings)*/
  --container-width:     1260px;               /* .container max-width       */

  /* ── FOOTER ────────────────────────────────────────────────────────── */
  --footer-bg:           rgba(0,0,0,.87);      /* footer section background  */

  /* ── BOTTOM NAV (mobile) ────────────────────────────────────────────── */
  --bnav-bg:             #1a1a1a;              /* bottom nav bar background  */
  --bnav-inactive:       #999999;              /* icon / label inactive      */

  /* ── BUTTONS — Primary (yellow) ─────────────────────────────────────── */
  --btn-primary:         #FFC200;              /* primary button BG          */
  --btn-primary-hov:     #e6a800;              /* primary button hover       */
  --btn-primary-text:    #111111;              /* primary button text        */

  /* ── BUTTONS — Secondary (blue) ─────────────────────────────────────── */
  --btn-blue:            #1565c0;              /* blue / register button BG  */
  --btn-blue-hov:        #0d47a1;              /* blue button hover          */

  /* ── CARDS ─────────────────────────────────────────────────────────── */
  --bg-card:             rgba(0,0,0,.04);      /* card background            */
  --bg-card-hover:       rgba(0,0,0,.07);      /* card hover background      */

  /* ── STATUS COLORS ──────────────────────────────────────────────────── */
  --green:               #22c55e;
  --red:                 #ef4444;
  --yellow:              #FFC200;

  /* ── GRADIENTS ──────────────────────────────────────────────────────── */
  --gradient-btn:        linear-gradient(90deg, #FFC200 0%, #e6a800 100%);
  --gradient-hero1:      linear-gradient(135deg, #1a1200 0%, #3b2a00 50%, #FFC200 100%);
  --gradient-hero2:      linear-gradient(135deg, #001428 0%, #002a50 60%, #001428 100%);
  --gradient-hero3:      linear-gradient(135deg, #0a0a0a 0%, #222222 60%, #111111 100%);
  --gradient-sport1:     linear-gradient(125deg, #111111 0%, #1e1e1e 50%, #111111 100%);
  --gradient-sport2:     linear-gradient(125deg, #0f1a0a 0%, #162b0e 50%, #0a140a 100%);
  --gradient-sport3:     linear-gradient(125deg, #0a0a0a 0%, #1a1a1a 50%, #111111 100%);

  /* ── SIZES & RADIUS ─────────────────────────────────────────────────── */
  --nav-h:               60px;
  --radius-sm:           8px;
  --radius:              12px;
  --radius-lg:           16px;

  /* ── ALIASES (backward compat — used by non-button rules) ───────────── */
  --blue-btn:            #1565c0;              /* alias → --btn-blue         */
  --blue-btn-hover:      #0d47a1;              /* alias → --btn-blue-hov     */

}

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.5;scroll-behavior:smooth}
body{min-height:100vh;overflow-x:hidden;overflow-y:auto}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
ul,ol{list-style:none}

/* --- Container --- */
.container{width:100%;max-width:var(--container-width);margin:0 auto;padding:0 1rem}
@media(max-width:780px){.container{padding:0 .3rem}}
@media(min-width:1280px){.container{max-width:1360px;padding:0 1.5rem}}
@media(min-width:781px){.header .container{padding:0 0;}}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:auto;
  background:var(--bg-header);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
/* TOP ROW: Logo + Actions */
.header__top{
  background:var(--bg-header);
  border-bottom:1px solid var(--border);
}
.header__inner{
  display:flex;align-items:center;height:75px;gap:.75rem;justify-content:space-between;
}
/* NAV ROW */
.header__nav-row{
  background:var(--nav-bg);
  height:55px;
  display:flex;align-items:center;
  overflow-x:clip;overflow-y:visible;
  scrollbar-width:none;-ms-overflow-style:none;
  position:relative;z-index:500;
}
.header__nav-row::-webkit-scrollbar{display:none;}
.header__nav-row .container{
  display:flex;align-items:center;height:100%;overflow:visible;
}

/* Logo */
.logo-wrap{display:flex;align-items:center;flex-shrink:0;gap:.4rem;text-decoration:none;margin-left:0;}
.logo-svg{height:55px;width:auto;display:block;}
.logo-flag{display:none;align-items:center;margin-left:.15rem;}
.logo-flag .flag{width:16px;height:11px;border-radius:2px;}

/* ── Language Switcher ──────────────────────────────────────────── */
.lang-switcher{display:none;} /* legacy, replaced by lang-pill */
.lang-flag-wrap{position:relative;}
.lang-flag-btn{
  display:flex;align-items:center;gap:.25rem;
  background:rgba(0,0,0,.04);border:1.5px solid rgba(0,0,0,.15);
  border-radius:6px;padding:.22rem .4rem;
  cursor:pointer;transition:all .18s;
  line-height:0;
}
.lang-flag-btn:hover{
  background:rgba(0,0,0,.09);border-color:rgba(0,0,0,.3);
}
.lang-flag-btn--active{
  border-color:rgba(124,77,255,.8);background:rgba(124,77,255,.15);
  box-shadow:0 0 0 2px rgba(124,77,255,.3);
}
.lang-flag-img{
  width:22px;height:15px;object-fit:cover;
  border-radius:2px;display:block;
}
.lang-chevron{
  font-size:.6rem;color:rgba(0,0,0,.5);
  transition:transform .18s;
}
.lang-indian-dropdown{
  display:none;
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:#12122a;border:1px solid rgba(124,77,255,.35);
  border-radius:8px;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  z-index:900;min-width:130px;
  flex-direction:column;
}
.lang-indian-dropdown.open{display:flex;}
.lang-option{
  background:none;border:none;color:rgba(255,255,255,.85);
  padding:.55rem .9rem;text-align:left;
  font-size:.82rem;font-weight:500;
  cursor:pointer;transition:background .15s;font-family:inherit;
  white-space:nowrap;
}
.lang-option:hover{background:rgba(124,77,255,.25);color:#fff;}

/* Hide Google Translate top bar */
.goog-te-banner-frame,.skiptranslate{display:none!important;}
body{top:0!important;}
.goog-te-gadget{display:none!important;}

/* ── Single-flag language toggle ────────────────────────────── */
.lang-toggle{position:relative;display:flex;align-items:center;}
.lang-toggle__btn{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(220,220,220,.92);border:none;
  border-radius:999px;padding:.22rem .55rem .22rem .3rem;
  cursor:pointer;transition:all .18s;line-height:0;
}
.lang-toggle__btn:hover{background:rgba(200,200,200,.98);}
.lang-toggle__flag{width:28px;height:28px;object-fit:cover;border-radius:50%;display:block;flex-shrink:0;}
.lang-toggle__chev{font-size:.55rem;color:rgba(30,30,30,.7);transition:transform .2s;flex-shrink:0;line-height:1;}
.lang-toggle__chev.open{transform:rotate(180deg);}

/* ── Currency & Language modal ──────────────────────────────── */
.lang-modal-box{max-width:520px;padding:1.6rem 1.8rem 2rem;}
.lang-modal-title{font-size:1.15rem;font-weight:700;color:#111;margin:0 0 1rem;}
.lang-modal-divider{border:none;border-top:1px solid #e0e0e0;margin:0 0 1.4rem;}
.lang-modal-body{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;}
.lang-modal-btns{display:flex;gap:.75rem;}
.lang-modal-btn-flag{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.lang-modal-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.52rem 1.5rem;border-radius:7px;font-size:.88rem;
  font-weight:700;letter-spacing:.04em;cursor:pointer;
  transition:all .18s;border:1.5px solid #ccc;background:#fff;color:#888;
  font-family:inherit;
}
.lang-modal-btn.active{
  background:#fffde7;border-color:#f5c518;color:#b8860b;
}
.lang-modal-btn:hover:not(.active){background:#f5f5f5;color:#555;}
.logo__icon{
  width:34px;height:34px;border-radius:var(--radius-sm);
  background:var(--gradient-btn);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:#fff;flex-shrink:0;
  box-shadow:var(--shadow-accent);
}
.logo{
  display:flex;flex-direction:column;align-items:flex-start;
  line-height:1;
}
.logo__top{
  font-size:.86rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text);
}
.logo__sub{
  font-size:.52rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted);margin-top:2px;
}

/* Nav */
.header__nav{
  display:flex;align-items:center;gap:.05rem;
  overflow-x:visible;overflow-y:visible;
  height:100%;
  margin-left:-4.0rem;
}
.header__nav::-webkit-scrollbar{display:none;}
.nav-link{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.38rem .7rem;border-radius:var(--radius-sm);
  font-size:.92rem;font-weight:500;color:#fff;
  white-space:nowrap;transition:color .2s,background .2s;
  position:relative;
}
.nav-link:hover{color:#fff;background:rgba(237, 183, 4, 0.1)}
.nav-link.active{color:var(--accent);font-weight:700;}
.nav-link.active::after{
  content:'';position:absolute;bottom:-1px;left:.6rem;right:.6rem;
  height:2px;background:var(--accent);border-radius:2px;
}
.nav-link--aviator{color:#ff4d4d!important;font-weight:700}
.nav-link--jetx{
  font-style:italic;font-weight:800;
  background:linear-gradient(90deg,#00d4ff,#0062ff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.nav-link--aviatrix{
  font-weight:700;
  background:linear-gradient(90deg,#ff6b6b,#ffd93d,#6bcb77);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ── Nav Dropdown ── */
.nav-item{position:relative;display:inline-flex;align-items:center;}
.nav-drop-arrow{font-size:.56rem;margin-left:2px;transition:transform .2s;opacity:.55;}
.nav-item--has-dropdown:hover .nav-drop-arrow{transform:rotate(180deg);}
.nav-item--has-dropdown:hover > .nav-link{color:var(--accent);background:rgba(255,194,0,.08);}
.nav-dropdown{
  position:absolute;top:calc(100% + 2px);left:50%;
  transform:translateX(-50%) translateY(6px);
  min-width:480px;
  background:rgba(123, 122, 122, 0.72);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,194,0,.22);
  border-top:2px solid var(--accent);
  border-radius:0 0 14px 14px;padding:16px 14px 14px;
  z-index:9999;opacity:0;visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  box-shadow:0 20px 60px rgba(0,0,0,.8);
  pointer-events:none;
}
/* Left-aligned: for first items where centering would overflow viewport left */
.nav-dropdown--left{
  left:0;transform:translateY(6px);
}
.nav-dropdown--sm{min-width:340px;border:none;border-top:none;border-radius:14px;}
.nav-dropdown--sm .nav-drop-title{display:none;}
.nav-dropdown--wide{min-width:1020px;max-width:96vw;}
.nav-item--has-dropdown:hover .nav-dropdown{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:all;
}
.nav-item--has-dropdown:hover .nav-dropdown--left{
  transform:translateY(0);
}
.nav-drop-title{
  font-size:.65rem;font-weight:700;color:rgba(255,194,0,.7);
  text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:12px;padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-drop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;}
.nav-drop-grid--4{grid-template-columns:repeat(4,1fr);}
.nav-drop-grid--3{grid-template-columns:repeat(3,1fr);}
.nav-drop-grid--2{grid-template-columns:repeat(2,1fr);}
.nav-drop-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:12px 8px 10px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;text-align:center;
  transition:background .15s,border-color .15s,transform .15s;
  text-decoration:none;cursor:pointer;min-height:110px;
}
.nav-drop-card:hover{
  background:rgba(255,194,0,.12);transform:translateY(-3px);
  box-shadow:0 4px 16px rgba(255,194,0,.2);
}
.nav-drop-card img{width:160px;height:96px;object-fit:contain;filter:brightness(1.15) drop-shadow(0 1px 3px rgba(0,0,0,.4));}
.nav-drop-card__ico{font-size:2.6rem;line-height:1;}
.nav-drop-card span{font-size:.7rem;color:rgba(255,255,255,.75);font-weight:600;line-height:1.2;margin-top:4px;}
.nav-drop-card:hover span{color:var(--accent);}
@media(max-width:1023px){.nav-dropdown{display:none!important;}}

/* Actions */
.header__actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0;margin-left:auto;margin-right:0;position:relative;}

/* ── Logged-in header user bar ── */
.hdr-user-bar{display:flex;align-items:center;gap:.4rem;}
.hdr-user-id,.hdr-balance{
  display:flex;align-items:center;gap:.3rem;
  background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1);
  border-radius:20px;padding:.22rem .65rem;
  font-size:.78rem;font-weight:600;color:#111;white-space:nowrap;
}
.hdr-user-id svg,.hdr-balance svg{
  width:14px;height:14px;fill:var(--accent);flex-shrink:0;
}
.hdr-balance svg{fill:var(--yellow);}
/* Avatar circle button */
.hdr-avatar-btn{
  position:relative;
  width:36px;height:36px;border-radius:50%;
  background:#FFD700;
  border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;overflow:hidden;
  transition:opacity .2s;
}
.hdr-avatar-btn:hover{opacity:.85;}
.hdr-avatar-btn svg{width:20px;height:20px;fill:#fff;display:none;}
.hdr-avatar-initials{font-size:.8rem;font-weight:700;line-height:1;letter-spacing:.03em;}
.hdr-avatar-dep-label{display:none;}
/* Hamburger button (mobile only) */
.hdr-hamburger{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:36px;height:36px;border-radius:8px;
  background: transparent;
  border:none;
  cursor:pointer;flex-shrink:0;
}
/* Left-corner hamburger: always visible on mobile, ordered first */
.hdr-hamburger--left{
  order:-1;
}
.hdr-hamburger span{
  display:block;width:18px;height:2px;
  background:#0d0d0d;border-radius:2px;
  transition:all .2s;
}
/* Keep desktop profile dropdown */
.hdr-icon-btn{
  position:relative;
  width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1);
  color:#444;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.hdr-icon-btn:hover{background:rgba(0,0,0,.1);}
.hdr-icon-btn svg{width:17px;height:17px;fill:#444;}
.hdr-notif-dot{
  position:absolute;top:5px;right:5px;
  width:7px;height:7px;border-radius:50%;
  background:#e03f3f;border:1.5px solid var(--bg-header);
}
.hdr-profile-menu{
  position:absolute;top:calc(var(--header-h) - 2px);right:0;
  background:#12122a;border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius);padding:.5rem 0;
  min-width:220px;z-index:500;
  box-shadow:0 8px 32px rgba(0,0,0,.55);
  max-height:calc(100vh - var(--header-h) - 16px);
  overflow-y:auto;
}
.hdr-profile-info{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem .4rem;}
.hdr-avatar-lg{
  width:40px;height:40px;border-radius:50%;
  background:var(--gradient-btn);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;font-weight:700;color:#fff;flex-shrink:0;
}
.hdr-profile-name{font-size:.9rem;font-weight:700;color:#fff;}
.hdr-profile-mobile{font-size:.75rem;color:var(--text-muted);margin-top:.15rem;}
.hdr-menu-divider{border:none;border-top:1px solid rgba(255,255,255,.1);margin:.3rem 0;}
.hdr-menu-item{
  display:flex;align-items:center;gap:.65rem;
  padding:.6rem 1rem;
  font-size:.88rem;color:rgba(255,255,255,.75);
  text-decoration:none;
  transition:background .15s,color .15s;
  white-space:nowrap;
}
.hdr-menu-item:hover{background:rgba(255,255,255,.07);color:#fff;}
.hdr-menu-item svg{width:16px;height:16px;fill:currentColor;flex-shrink:0;opacity:.7;}
.hdr-menu-item:hover svg{opacity:1;}
.hdr-menu-exit{color:#ff6b6b;}
.hdr-menu-exit svg{opacity:1;}
.hdr-menu-balance-card{
  margin:.15rem .7rem .25rem;
  padding:.5rem .7rem;
  background:linear-gradient(135deg,rgba(100,80,220,.18) 0%,rgba(255,179,0,.08) 100%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  display:flex;flex-direction:column;gap:.2rem;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  position:relative;overflow:hidden;
}
.hdr-menu-balance-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,transparent 60%);
  pointer-events:none;
}
.hdr-menu-balance-row{display:flex;align-items:center;justify-content:space-between;gap:.4rem;}
.hdr-menu-balance-row+.hdr-menu-balance-row{border-top:1px solid rgba(255,255,255,.06);padding-top:.2rem;margin-top:.1rem;}
.hdr-menu-balance-label{font-size:.62rem;font-weight:500;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.04em;}
.hdr-menu-balance-val{font-size:.74rem;font-weight:700;color:#fff;letter-spacing:.01em;}
.hdr-menu-wager-val{font-size:.68rem;font-weight:600;color:#ffb300;letter-spacing:.01em;}
/* Deposit button desktop only */
.hdr-deposit-desktop{display:inline-flex;align-items:center;}
/* Logout button (desktop only) */
.hdr-logout-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.15);cursor:pointer;flex-shrink:0;transition:background .15s,border-color .15s,transform .15s;padding:0;}
.hdr-logout-btn:hover{background:rgba(220,53,69,.18);border-color:rgba(220,53,69,.5);transform:scale(1.08);}
.hdr-logout-icon{width:28px;height:28px;display:block;filter:brightness(0) saturate(100%);}

/* ── Side Menu (slides in from LEFT) ── */
.side-menu-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.65);z-index:800;
}
.side-menu-overlay.open{display:block;}
.side-menu{
  position:fixed;top:0;left:0;bottom:0;
  width:min(300px,86vw);
  background:#fff;
  z-index:1000;
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  overflow-y:auto;
  scrollbar-width:none;
}
.side-menu::-webkit-scrollbar{display:none;}
.side-menu.open{transform:translateX(0);}
.side-menu__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1rem;
  border-bottom:1px solid rgba(0,0,0,.1);
  flex-shrink:0;
}
.side-menu__mobile-close{display:none;}
.side-menu__close{
  width:30px;height:30px;border-radius:50%;
  background: #e02a05;border:none;
  color:#333;font-size:.85rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;flex-shrink:0;
}
.side-menu__close:hover{background:rgba(0,0,0,.13);}
/* Logged-in profile block */
.side-menu__profile{
  display:flex;align-items:center;gap:.75rem;
  padding:.9rem 1rem;
  border-bottom:1px solid rgba(0,0,0,.07);
  text-decoration:none;
  background:rgba(0,0,0,.02);
  flex-shrink:0;
  transition:background .15s;
}
.side-menu__profile:hover{background:rgba(0,0,0,.05);}
.side-menu__avatar{
  width:40px;height:40px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;font-weight:700;color:#111;flex-shrink:0;
  text-transform:uppercase;
}
.side-menu__profile-info{flex:1;min-width:0;}
.side-menu__profile-label{font-size:.7rem;color:rgba(0,0,0,.45);margin-bottom:.12rem;}
.side-menu__profile-name{font-size:.88rem;font-weight:700;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Balance card */
.side-menu__balance-card{
  display:flex;align-items:center;gap:.75rem;
  margin:.6rem .9rem;
  padding:.7rem .9rem;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.1);
  border-radius:10px;
  flex-shrink:0;
}
.side-menu__balance-body{flex:1;display:flex;flex-direction:column;gap:.22rem;}
.side-menu__balance-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.side-menu__balance-label{font-size:.75rem;color:rgba(0,0,0,.5);}
.side-menu__balance-val{font-size:.88rem;font-weight:700;color:#111;}
.side-menu__wager-val{font-size:.8rem;font-weight:600;color:#e67700;}
/* Nav */
.side-menu__nav{flex:1;padding:.35rem 0 .5rem;}
/* ── smenu item (new image-matched design) ── */
.smenu-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.68rem 1rem;
  text-decoration:none;
  color:#222;
  font-size:.88rem;font-weight:500;
  transition:background .15s;
}
.smenu-item:hover,.smenu-item:focus{background:rgba(0,0,0,.04);}
.smenu-item--active{background:rgba(201,75,255,.08) !important;font-weight:700 !important;}
.smenu-item-wrap{display:flex;align-items:center;}
.smenu-item-wrap .smenu-item{flex:1;}
.smenu-expand{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:#999;cursor:pointer;flex-shrink:0;margin-right:.5rem;padding:0;font-size:1.2rem;line-height:1;transition:transform .22s;}
.smenu-expand.open{transform:rotate(90deg);}
.smenu-sub{display:none;padding:.15rem .75rem .5rem 3.25rem;}
.smenu-sub.open{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:.4rem;}
.smenu-sub__item{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.35rem .2rem;border-radius:8px;text-decoration:none;color:#333;font-size:.72rem;font-weight:600;transition:background .15s;text-align:center;}
.smenu-sub__item:hover{background:rgba(0,0,0,.05);}
.smenu-sub__item img{width:44px;height:44px;object-fit:contain;border-radius:8px;}
.smenu-item__icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.smenu-item__icon svg,.smenu-item__icon img{width:20px;height:20px;display:block;}
.smenu-item__label{flex:1;line-height:1.3;}
/* Badges */
.smenu-badge{
  display:inline-flex;align-items:center;
  font-size:.66rem;font-weight:700;
  padding:.13rem .4rem;
  border-radius:5px;
  flex-shrink:0;line-height:1.4;
  letter-spacing:.02em;
}
.smenu-badge--new{background:#22c55e;color:#fff;}
.smenu-badge--hot{background:linear-gradient(135deg,#ff6d1a,#dd0000);color:#fff;}
/* Section divider */
.smenu-section{
  display:flex;align-items:center;gap:.55rem;
  padding:.55rem 1rem;flex-shrink:0;
}
.smenu-section__line{flex:1;height:1px;background:rgba(0,0,0,.1);}
.smenu-section__title{
  font-size:.72rem;font-weight:700;
  color:rgba(0,0,0,.38);
  text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;
}
/* Footer */
.side-menu__footer{
  padding:.9rem;
  border-top:1px solid rgba(0,0,0,.1);
  flex-shrink:0;
}
.smenu-login-btn{
  display:block;width:100%;
  padding:.8rem;
  background:var(--btn-blue);color:#fff;
  border:none;border-radius:8px;
  font-size:.95rem;font-weight:700;cursor:pointer;
  text-align:center;text-decoration:none;
  transition:background .2s;
  margin-bottom:.5rem;
}
.smenu-login-btn:last-child{margin-bottom:0;}
.smenu-login-btn:hover{background:var(--blue-btn-hover);}
.smenu-register-btn{
  display:block;width:100%;
  padding:.68rem;
  background:transparent;color:#444;
  border:1px solid rgba(0,0,0,.18);border-radius:8px;
  font-size:.85rem;font-weight:600;cursor:pointer;
  text-align:center;text-decoration:none;
  transition:background .2s,color .2s;
}
.smenu-register-btn:hover{background:rgba(0,0,0,.05);color:#111;}
/* Legacy stubs kept for any JS references */
.side-menu__chevron{display:none;}
.side-menu__item{display:none;}
.side-menu__social{display:none;}
.side-menu__social-btn{display:none;}
.btn-deposit{
  background:var(--accent-2);
  border:none;border-radius:20px;
  padding:.3rem 1rem;font-size:.8rem;font-weight:700;color:var(--text);
  cursor:pointer;white-space:nowrap;
  box-shadow:var(--shadow-accent);
  transition:opacity .2s;
}
.btn-deposit:hover{opacity:.88;}
.btn-icon{
  width:2rem;height:2rem;border-radius:50%;
  background:var(--bg-card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:.85rem;transition:all .2s;
}
.btn-icon:hover{color:var(--text);border-color:var(--border-light)}
.lang-pill{
  display:flex;align-items:center;gap:.25rem;
  padding:.2rem .3rem;border-radius:2rem;
  background:var(--bg-card);border:1px solid var(--border);
  transition:all .2s;white-space:nowrap;
}
.lang-pill__sep{
  width:1px;height:14px;background:rgba(255,255,255,.15);flex-shrink:0;
}
.lang-pill:hover{border-color:var(--border-light)}
.flag{
  width:18px;height:12px;border-radius:2px;display:inline-block;
  flex-shrink:0;overflow:hidden;position:relative;
  background:linear-gradient(to bottom,#002868 0%,#002868 33%,#BF0A30 33%,#BF0A30 66%,#fff 66%,#fff 100%);
}
.btn{
  padding:.65rem 1.6rem;border-radius:var(--radius-sm);
  font-size:.9rem;font-weight:600;border:none;outline:none;
  transition:all .2s;white-space:nowrap;cursor:pointer;
}
.btn-login{
  background:var(--btn-primary);color:var(--btn-primary-text);
  border:none;font-weight:700;
  border-radius:6px;
}
.btn-login:hover{opacity:.9;background:var(--btn-primary-hov)}
/* Register button */
.btn-register-mobile{
  display:inline-flex;align-items:center;
  background:var(--btn-blue);color:#fff;
  box-shadow:0 4px 14px rgba(21,101,192,.35);
  padding:.65rem 1.6rem;border-radius:6px;
  font-size:.9rem;font-weight:700;border:none;white-space:nowrap;cursor:pointer;
}
.btn-register-mobile:hover{opacity:.9;background:var(--btn-blue-hov)}
.btn-register{
  background:var(--btn-blue);color:#fff;
  box-shadow:0 4px 14px rgba(21,101,192,.35);
}
.btn-register:hover{opacity:.9;transform:translateY(-1px)}
.btn-register:active{transform:translateY(0)}

/* Mobile nav strip - hidden on desktop */
.header__mobile-nav{display:none;}

/* ============================================================
   PAGE WRAPPER
   ============================================================ */
.page-wrapper{padding-top:calc(var(--header-h) + 55px);min-height:100vh;display:flex;flex-direction:column;background:var(--page-wrapper-bg)}
.page-content{flex:1;padding-bottom:0rem;background:var(--page-content-bg)}

/* ============================================================
   HERO SECTION — Banner + Recent Wins
   ============================================================ */
.hero-section{padding:0;width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center;}
.hero-section > .container > .sport-card-big--empty{display:none}
/* Banner fills 100% of viewport width — height driven by image natural size */
.banner-slider{
  display:grid;grid-template-columns:1fr;position:relative;
  overflow:hidden;border-radius:0;
  width:100%;margin:0 auto;
}
.banner-slide{
  grid-area:1/1;width:100%;
  overflow:hidden;border-radius:0;
  transform:translateX(100%);
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.banner-slide.active{transform:translateX(0)}

.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.75rem;
  align-items:stretch;
}
.hero-left{display:flex;flex-direction:column;gap:.75rem;width:100%;grid-column:1 / -1}

/* --- Lucky Sports Widget --- */
.lucky-sports-widget{
  border-radius:var(--radius-lg);
  background:#fff;
  width:100%;
  height:580px;display:flex;flex-direction:column;
  box-shadow:0 4px 24px rgba(0,0,0,.25);
  margin-bottom:.75rem;
}
.lucky-sports-iframe{
  width:100%;height:100%;flex:1;border:none;display:block;
  background:#f0f0f0;
}

/* Floating decorative dots */
.slide-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.slide-deco-circle{
  position:absolute;border-radius:50%;pointer-events:none;
}

.banner-slide__content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:2rem 2rem 4rem;
  max-width:56%;
  height:100%;
}
.banner-slide__tag{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.22rem .7rem;border-radius:2rem;
  background:rgba(255,255,255,.14);
  font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.9);margin-bottom:.8rem;
}
.banner-slide__title{
  font-size:1.6rem;font-weight:900;line-height:1.2;color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.4);margin-bottom:.55rem;
}
.banner-slide__title em{font-style:normal;color:#ffd54f}
.banner-slide__sub{
  font-size:.83rem;color:rgba(255,255,255,.65);margin-bottom:1.3rem;
  line-height:1.55;
}
.banner-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.58rem 1.65rem;border-radius:var(--radius-sm);
  background:var(--gradient-btn);color:#fff;
  font-size:.82rem;font-weight:700;
  box-shadow:var(--shadow-accent);width:fit-content;
  transition:opacity .2s,transform .2s;
}
.banner-cta:hover{opacity:.92;transform:translateY(-1px)}

/* Art illustration area */
.banner-slide__art{
  position:absolute;right:0;top:0;bottom:0;
  width:46%;display:flex;align-items:center;justify-content:center;
  pointer-events:none;padding-bottom:2rem;
}
.banner-art-inner{
  font-size:7.5rem;
  filter:drop-shadow(0 0 50px rgba(124,77,255,.55)) drop-shadow(0 0 20px rgba(80,160,255,.35));
  animation:art-float 4s ease-in-out infinite;
}
@keyframes art-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Card decorations */
.banner-card-deco{
  position:absolute;pointer-events:none;
  font-size:1.6rem;opacity:.22;
  animation:card-spin 6s linear infinite;
}
@keyframes card-spin{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}
.banner-card-deco--1{top:18%;right:44%;animation-duration:7s}
.banner-card-deco--2{top:25%;right:30%;animation-duration:9s;animation-direction:reverse;font-size:1.3rem;opacity:.15}
.banner-card-deco--3{bottom:28%;right:38%;animation-duration:5.5s;font-size:1.2rem;opacity:.18}

/* Slider controls */
.slider-controls{display:none}
/* slider-arrow — shared */
.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  border-radius:50%;box-sizing:border-box;
  background:#fff;border:none;
  display:flex;align-items:center;justify-content:center;
  color:#080808;font-weight:600;line-height:1;cursor:pointer;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .2s;
}
.slider-arrow--prev{left:.6rem;}
.slider-arrow--next{right:.6rem;}
/* slider-arrow — mobile */
@media(max-width:1023px){
  .slider-arrow{width:36px;height:36px;font-size:36px;}
}
/* slider-arrow — desktop */
@media(min-width:1024px){
  .slider-arrow{width:40px;height:40px;font-size:40px;padding-bottom: 9px;}
}
.slider-dots{
  position:absolute;bottom:1.15rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.38rem;z-index:5;
}
.slider-dot{
  width:.45rem;height:.45rem;border-radius:50%;
  background:rgba(255,255,255,.3);transition:all .28s;cursor:pointer;
}
.slider-dot.active{width:1.4rem;border-radius:.25rem;background:#fff}

/* Banner image background layer */
.banner-slide__bgimg{
  display:block;width:100%;line-height:0;
}
.banner-img{
  display:block;width:100%;height:auto;
}

/* Page hero banner (games / line / live / results) */
.page-hero-banner{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  margin-bottom:1.5rem;height:220px;
}
.page-hero-banner img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}
.page-hero-banner__overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,4,28,.84) 0%,rgba(4,4,28,.54) 55%,rgba(4,4,28,.06) 100%);
  display:flex;align-items:center;padding:0 2rem;
}
.page-hero-banner__title{font-size:1.7rem;font-weight:900;color:#fff;line-height:1.2}
.page-hero-banner__sub{font-size:.88rem;color:rgba(255,255,255,.62);margin-top:.4rem}

/* Bonus banner grid */
.bonus-banners-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding:.25rem 0}
.bonus-banner-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  display:block;height:165px;transition:transform .22s,box-shadow .22s;
}
.bonus-banner-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(124,77,255,.22)}
.bonus-banner-card img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.bonus-banner-card__overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,4,28,.85) 0%,rgba(4,4,28,.58) 58%,rgba(4,4,28,.08) 100%);
  display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.4rem;
}
.bonus-banner-card__title{font-size:.95rem;font-weight:900;color:#fff;margin-bottom:.22rem}
.bonus-banner-card__sub{font-size:.73rem;color:rgba(255,255,255,.62)}
@media(max-width:640px){.bonus-banners-grid{grid-template-columns:1fr}}

/* --- Recent Wins Panel --- */
.wins-panel{
  background:#053401;border:1px solid var(--border);
  border-radius:var(--radius-lg);display:flex;flex-direction:column;
  overflow:hidden;height:200px;
  border: #0062ff solid 2px;
  margin-bottom: 10px;
}
.wins-panel__head{
  padding:.55rem .85rem;border-bottom:1px solid var(--border);
  font-size:.84rem;font-weight:800;color:#fff;
  flex-shrink:0;display:flex;align-items:center;gap:.4rem;
}
.wins-panel__head-dot{
  width:.6rem;height:.6rem;border-radius:50%;
  background:var(--green);box-shadow:0 0 6px var(--green);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.4}}
.wins-panel__list{flex:1;overflow:hidden;position:relative}

.win-row{
  display:flex;align-items:center;gap:.55rem;
  padding:.38rem .85rem;border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .15s;
}
.win-row:last-child{border-bottom:none}
.win-row:hover{background:rgba(255,255,255,.03)}

/* Slide-in animation for new rows (desktop: from bottom) */
@keyframes win-slide-in{
  0%{opacity:0;transform:translateY(28px)}
  60%{opacity:1;transform:translateY(-2px)}
  100%{opacity:1;transform:translateY(0)}
}
.win-row--new{animation:win-slide-in .4s ease forwards}

/* Mobile: slide-up animation (bottom to top, 1-row reveal) */
@keyframes win-slide-up{
  0%{opacity:0;transform:translateY(36px)}
  60%{opacity:1;transform:translateY(-2px)}
  100%{opacity:1;transform:translateY(0)}
}
.win-row--up{animation:win-slide-up .42s cubic-bezier(.22,.61,.36,1) forwards}

.win-row__thumb{
  width:2.1rem;height:2.1rem;border-radius:6px;
  flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,#1a0845,#3d1b80);
}
.win-row__thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
}

.win-row__info{flex:1;min-width:0}
.win-row__name{
  font-size:.72rem;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.win-row__bet{font-size:.6rem;color:rgba(255,255,255,.62);margin-top:.05rem}
.win-row__amount{text-align:right;flex-shrink:0}
.win-row__win{font-size:.78rem;font-weight:800;color:#00ff00;white-space:nowrap}
.win-row__label{font-size:.58rem;color:rgba(255,255,255,.62);margin-top:.03rem}

/* ============================================================
   JACKPOT BANNER
   ============================================================ */
.jacpot-banner{
  display:block;position:relative;border-radius:var(--radius-lg);
  overflow:hidden;height:160px;
  transition:transform .22s,box-shadow .22s;
  margin-bottom:1.2rem;
}
.jacpot-banner:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(255,160,0,.25)}
.jacpot-banner img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}
.jacpot-banner__text-box{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.35rem;
}
.jacpot-banner__title{
  font-size:1.1rem;font-weight:900;color:#fff;
  letter-spacing:.22em;text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
  margin:0;
}
.jacpot-banner__amount{
  font-size:2.4rem;font-weight:900;
  color:#ff2d9e;
  text-shadow:0 0 30px rgba(255,45,158,.7),0 2px 8px rgba(0,0,0,.5);
  letter-spacing:.04em;display:flex;align-items:baseline;gap:.25rem;
}
.jacpot-banner__currency{
  font-size:1.8rem;font-weight:900;color:#ff2d9e;
}
/* old overlay classes kept for compat */
.jacpot-banner__overlay,.jacpot-banner__text,.jacpot-banner__sub,.jacpot-banner__cta{display:none}
.jacpot-banner-section{padding:.75rem 0 0}

/* ============================================================
   CASINO PAGE 2-COL HERO GRID
   ============================================================ */
.casino-hero-grid{
  display:grid;grid-template-columns:1fr;
  gap:0;align-items:stretch;margin-bottom:1.5rem;
}
.casino-hero-slider{
  position:relative;border-radius:0;overflow:hidden;
  min-height:220px;height:280px;width:100vw;
  margin-left:calc(50% - 50vw);
}

/* ── Games page redesign: Hero + Category tabs + Provider pills ── */
.games-hero{
  position:relative;width:100%;height:280px;overflow:hidden;
  margin-bottom:0;
}
.games-hero__bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
}
.games-hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,4,28,.9) 0%,rgba(4,4,28,.55) 55%,transparent 100%);
}
.games-hero__content{
  position:relative;z-index:1;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:1rem;padding-bottom:1rem;
}
.games-hero__title{
  font-size:2rem;font-weight:900;color:#fff;line-height:1.2;margin-bottom:.5rem;
}
.games-hero__sub{
  font-size:.92rem;color:rgba(255,255,255,.75);max-width:480px;line-height:1.5;
}

/* category tabs */
.gcat-tabs{
  display:flex;align-items:center;flex-wrap:nowrap;gap:.4rem;
  overflow-x:auto;scrollbar-width:none;padding:.6rem 0;
  scroll-margin-top:calc(var(--header-h) + var(--nav-h,0px) + .5rem);
}
.gcat-tabs::-webkit-scrollbar{display:none;}
.gcat-tab{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.3rem .75rem;border-radius:2rem;
  font-size:.76rem;font-weight:600;color:var(--text-muted);
  background:var(--bg-card);border:1.5px solid var(--border);
  cursor:pointer;white-space:nowrap;transition:all .18s;text-decoration:none;flex-shrink:0;
}
.gcat-tab.active,.gcat-tab:hover{color:var(--text);background:var(--accent);border-color:var(--accent);}

/* provider pills card */
.gprov-card{
  background:#fff;border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius-lg);padding:.75rem;
  margin:.5rem 0 .75rem;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.gprov-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:.45rem;
}
.gprov-pill{
  display:flex;align-items:center;justify-content:center;gap:.35rem;
  padding:.45rem .55rem;border-radius:2rem;
  border:1.5px solid var(--accent);background:var(--bg);
  font-size:.74rem;font-weight:600;color:var(--text);
  text-decoration:none;white-space:nowrap;overflow:hidden;
  transition:background .15s,color .15s,border-color .15s;
  cursor:pointer;
}
.gprov-pill img{width:30px;height:20px;object-fit:contain;flex-shrink:0;}
.gprov-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px;}
.gprov-pill__all{font-weight:700;font-size:.8rem;}
.gprov-pill--active{background:var(--accent);border-color:var(--accent);color:var(--text);}
.gprov-pill:hover:not(.gprov-pill--active){background:rgba(255,194,0,.12);border-color:var(--accent);}

/* 8-column games grid */
.games-grid--8col{grid-template-columns:repeat(8,1fr);}

/* ── JILI Jackpot Banner ── */
.jili-jackpot{
  display:none; /* hidden on desktop */
  position:relative;width:100%;margin:.6rem 0 .75rem;
  border-radius:12px;overflow:hidden;user-select:none;
}
.jili-jackpot__bg{display:block;width:100%;line-height:0;}
.jili-jackpot__bg img{width:100%;display:block;object-fit:cover;}
.jili-jackpot__boxes{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;align-items:flex-end;justify-content:space-around;
  padding:0 2% 5%;
}
.jili-jackpot__box{
  position:relative;display:flex;flex-direction:column;align-items:center;
  flex:1;max-width:32%;
}
.jili-jackpot__box img{width:100%;display:block;object-fit:contain;}
.jili-jackpot__amount{
  position:absolute;bottom:12%;left:0;right:0;text-align:center;
  font-size:1.15rem;font-weight:900;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.7);letter-spacing:.02em;
}
.jili-jackpot__box--grand .jili-jackpot__amount{
  font-size:1.35rem;
}
@media(max-width:780px){
  .jili-jackpot{display:block;}
  .jili-jackpot__amount{font-size:.75rem;}
  .jili-jackpot__box--grand .jili-jackpot__amount{font-size:.9rem;}
  .jili-jackpot__boxes{padding:0 1% 4%;}
}
@media(max-width:480px){
  .jili-jackpot__amount{font-size:.62rem;}
  .jili-jackpot__box--grand .jili-jackpot__amount{font-size:.74rem;}
}

/* ── Mobile category nav (games page) ── */
.mob-cat-nav{
  display:none;
  align-items:center;justify-content:space-between;
  background:#111;padding:.55rem 1rem;
  position:sticky;top:0;z-index:50;
}
.mob-cat-nav__arrow{
  color:#fff;font-size:2.2rem;line-height:1;text-decoration:none;
  padding:0 .6rem;opacity:.85;font-weight:300;
}
.mob-cat-nav__arrow:hover{color:var(--accent);}
.mob-cat-nav__title{
  font-size:1rem;font-weight:800;color:#fff;letter-spacing:.02em;
}

/* ── Search FILTERS button ── */
.search-wrap__filters-btn{
  flex-shrink:0;display:flex;align-items:center;gap:.35rem;
  padding:.55rem 1rem;background:#1a1a1a;color:#fff;
  border:none;border-radius:var(--radius-sm);
  font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;
  letter-spacing:.04em;
}
.search-wrap__filters-btn i{color:var(--accent);font-size:.9rem;}
.search-wrap__filters-btn:hover{background:#2a2a2a;}

/* ── Filters panel (hidden by default) ── */
.g-filters-panel{
  display:none;flex-wrap:wrap;gap:.4rem;padding:.4rem 0 .6rem;
}
.g-filters-panel.open{display:flex;}
.g-filter-tag{
  padding:.3rem .8rem;border-radius:2rem;font-size:.76rem;font-weight:600;
  background:rgba(255,255,255,.08);color:#ccc;border:1.5px solid rgba(255,255,255,.15);
  cursor:pointer;transition:all .15s;
}
.g-filter-tag--active,.g-filter-tag:hover{background:var(--accent);color:var(--text);border-color:var(--accent);}

/* ── Games page: mobile overrides ── */
@media(max-width:780px){
  /* Show mobile cat nav, hide desktop hero */
  .mob-cat-nav{display:flex;}
  .games-hero{display:none;}

  /* Provider pills → horizontal scroll strip */
  .gprov-card{
    background:transparent;border:none;box-shadow:none;
    padding:.4rem 0;margin:.3rem 0 .5rem;
  }
  .gprov-grid{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:.4rem;
    scrollbar-width:none;padding:.1rem .05rem .3rem;
    -webkit-overflow-scrolling:touch;
  }
  .gprov-grid::-webkit-scrollbar{display:none;}
  .gprov-pill{
    flex-shrink:0;padding:.3rem .65rem;
    font-size:.72rem;border-radius:2rem;
  }
  .gprov-pill img{width:22px;height:16px;}
  .gprov-pill span{max-width:70px;}

  /* 3-column games grid */
  .games-grid--8col{
    grid-template-columns:repeat(3,1fr);gap:.4rem;
  }

  /* Compact old game cards (kept for other sections) */
  .game-card__info{padding:.25rem .3rem .3rem;}
  .game-card__name{font-size:.68rem;}
  .game-card__provider{font-size:.6rem;}
  .game-card__thumb{border-radius:8px 8px 0 0;}
  .game-card__img{border-radius:8px 8px 0 0;}

  /* sgc mobile — no transitions, no overlay, content-visibility for perf */
  .sgc__overlay{display:none;}
  .sgc__img{transition:none;}
  .sgc__name{font-size:.64rem;}
  .sgc{content-visibility:auto;contain-intrinsic-size:0 110px;}
  .games-grid,.games-grid--8col{contain:layout paint;}

  /* Search row */
  .search-wrap{gap:.4rem;}
  .search-wrap__filters-btn{padding:.5rem .75rem;font-size:.76rem;}
}

/* ---- Pagination ---- */
.gpag-wrap{display:flex;justify-content:center;padding:1.5rem 0 2rem;}
.gpag ul{display:flex;align-items:center;gap:.3rem;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:center;}
.gpag__item,.gpag__nav{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 .25rem;
  border:1px solid rgba(255,255,255,.15);border-radius:50%;
  background:rgba(255,255,255,.06);color:var(--text,#e0e0e0);
  font-size:.82rem;font-weight:500;cursor:pointer;
  text-decoration:none;transition:background .15s,border-color .15s;
}
.gpag__item:hover,.gpag__nav:hover{background:rgba(255,194,0,.18);border-color:var(--accent);color:var(--accent);}
.gpag__item--active{background:#1a1a1a;border-color:#ccc;color:#fff;cursor:default;font-weight:700;}
.gpag__nav{min-width:36px;}
.gpag__nav--disabled{opacity:.35;cursor:not-allowed;pointer-events:none;}
.gpag__more{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:36px;color:var(--text-muted,#888);font-size:.9rem;user-select:none;}
.casino-slide{
  position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
  display:flex;align-items:center;
}
.casino-slide.active{opacity:1;position:relative;height:100%;}
.casino-slide__bgimg{
  position:absolute;inset:0;background-size:cover;background-position:center;
}
.casino-slide__overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,4,28,.88) 0%,rgba(4,4,28,.5) 60%,transparent 100%);
}
.casino-slide__content{
  position:relative;z-index:1;padding:1.5rem 1.8rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;
}
.casino-slide__title{
  font-size:1.45rem;font-weight:900;color:#fff;line-height:1.2;margin:0;
}
.casino-slide__sub{
  font-size:.82rem;color:rgba(255,255,255,.65);margin:0;
}
.casino-slider__arrows{
  position:absolute;inset:0;display:flex;align-items:center;
  justify-content:space-between;pointer-events:none;padding:0 .6rem;
}
/* casino slider arrows - position handled by flex parent */
.casino-slider__arrows .slider-arrow{
  pointer-events:all;
  position:static;transform:none;
}

.slider-arrow:hover{background:#fff}

.slider-dots{
  position:absolute;bottom:.65rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.4rem;
}
.slider-dot{
  width:.45rem;height:.45rem;border-radius:50%;
  background:rgba(255,255,255,.35);cursor:pointer;transition:background .2s;
}
.slider-dot.active{background:#fff}
@media(max-width:840px){
  .casino-hero-grid{grid-template-columns:1fr 265px}
}
.casino-hero-grid .wins-panel{height:280px}
@media(max-width:640px){
  .casino-hero-grid{grid-template-columns:1fr}
  .casino-hero-grid .wins-panel{display:none}
}

/* ============================================================
   SPORT SECTION
   ============================================================ */
.sport-section{padding:.5rem 0 .5rem}
.section-title-text{
  font-size:1.35rem;font-weight:900;color:var(--text);
  margin-bottom:1rem;
}
.sport-cards-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
}
.sport-cards-row2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  margin-top:.75rem;
}
.sport-cards-scroller{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.75rem;
}
.sport-card-big{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  min-height:160px;display:flex;flex-direction:column;justify-content:flex-end;
  cursor:pointer;transition:transform .25s,box-shadow .25s;
}
.sport-card-big:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.4)}
/* Background gradients */
.sport-card-big--line{background:var(--gradient-sport1)}
.sport-card-big--live{background:var(--gradient-sport2)}
.sport-card-big--results{background:var(--gradient-sport3)}
.sport-card-big--empty{background:rgba(255,255,255,.03)}

/* Background photo */
.sport-card-big__bgimg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* Background art emoji (fallback) */
.sport-card-big__bg-art{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:2.5rem;font-size:5.5rem;
  opacity:.08;filter:blur(1px);
}
/* Gradient overlay */
.sport-card-big__overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.4) 52%,rgba(0,0,0,.08) 100%);
}
.sport-card-big__content{
  position:relative;z-index:2;padding:1.4rem 1.5rem;
}
.sport-card-big__title{
  font-size:1.1rem;font-weight:900;color:#fff;margin-bottom:.3rem;
}
.sport-card-big__sub{font-size:.76rem;color:rgba(255,255,255,.58);margin-bottom:.85rem}
.sport-card-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.42rem 1.2rem;border-radius:6px;
  background:var(--accent);color:var(--text);
  font-size:.77rem;font-weight:800;
  box-shadow:0 2px 14px rgba(255,194,0,.4);
  transition:opacity .2s,transform .2s;width:fit-content;
}
.sport-card-btn:hover{opacity:.9;transform:translateY(-1px)}

/* ============================================================
   GAME SECTIONS
   ============================================================ */
.game-section{padding:1.25rem 0 0}
.game-section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.8rem;
}
.game-section-title{
  font-size:1.2rem;font-weight:800;color:var(--text);
  display:flex;align-items:center;gap:.4rem;
  border-left:3px solid var(--accent);padding-left:.6rem;
}
.game-section-icon{font-size:1rem}
.game-section-all{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.82rem;font-weight:600;color:var(--accent);
  border:1px solid rgba(255,194,0,.35);border-radius:6px;padding:.25rem .75rem;
  transition:all .2s;
}
.game-section-all:hover{color:var(--text);background:var(--accent);border-color:var(--accent)}
.games-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem}
.games-grid--5col{grid-template-columns:repeat(5,1fr)!important;flex-wrap:unset;overflow:visible;padding-bottom:0}
.games-grid--3col{grid-template-columns:repeat(3,1fr)!important;flex-wrap:unset;overflow:visible;padding-bottom:0}

/* Horizontal scroll carousel (Evolution, large sections) */
.games-grid--scroll{
  display:flex;
  flex-wrap:nowrap;
  gap:.5rem;
  overflow-x:auto;
  padding-bottom:.5rem;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.games-grid--scroll::-webkit-scrollbar{height:4px}
.games-grid--scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:2px}
.games-grid--scroll::-webkit-scrollbar-thumb{background:rgba(124,77,255,.5);border-radius:2px}
.games-grid--scroll .game-card,
.games-grid--scroll .evo-card{
  display:block;
  flex:0 0 calc((100% - 3rem) / 7);
  min-width:0;
  scroll-snap-align:start;
  text-decoration:none;
  color:inherit;
}
@media(max-width:1024px){
  .games-grid--scroll .game-card{flex:0 0 calc((100% - 4*.5rem) / 5)}
}
@media(max-width:640px){
  .games-grid--scroll .game-card{flex:0 0 calc((100% - 2*.5rem) / 3)}
}

.game-card{
  border-radius:var(--radius);overflow:hidden;
  background:var(--bg-card);border:1px solid var(--border);
  transition:transform .2s,border-color .2s,box-shadow .2s;
  cursor:pointer;
}
.game-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,194,0,.6);
  box-shadow:0 8px 28px rgba(255,194,0,.2);
}
.game-card__thumb{
  position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;
}
.game-card__img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:inherit;transition:transform .3s;
}
.game-card:hover .game-card__img{transform:scale(1.05)}
.game-card__badge{
  position:absolute;top:.4rem;left:.4rem;z-index:3;
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.16rem .48rem;border-radius:2rem;
  background:rgba(8,8,28,.82);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:.57rem;font-weight:600;color:rgba(255,255,255,.82);
  pointer-events:none;max-width:84%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.game-card__badge i{font-size:.53rem;opacity:.72;flex-shrink:0}
.game-card__placeholder{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  font-size:.57rem;text-align:center;padding:.5rem;gap:.35rem;
  color:rgba(255,255,255,.5);
}
.gc-ico{font-size:2rem;opacity:.6}
.game-card__overlay{
  position:absolute;inset:0;background:rgba(7,7,32,.72);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;
}
.game-card:hover .game-card__overlay{opacity:1}
.game-play-btn{
  width:2.6rem;height:2.6rem;border-radius:50%;
  background:var(--btn-primary);
  display:flex;align-items:center;justify-content:center;
  color:var(--text);font-size:1rem;box-shadow:0 4px 14px rgba(255,194,0,.4);
  transition:transform .15s;
}
.game-play-btn:hover{transform:scale(1.1)}
.game-card__info{padding:.45rem .48rem .4rem}
.game-card__name{
  font-size:.7rem;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;
}
.game-card__provider{
  font-size:.6rem;color:var(--text-muted);margin-top:.1rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.game-card__prov{
  font-size:.6rem;color:var(--text-muted);margin-top:.1rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ============================================================
   SLOT GAME CARD (sgc) — reference style
   ============================================================ */
.sgc{display:block;text-decoration:none;color:inherit;}
.sgc__thumb{
  position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;
  border-radius:10px;background:#1a1a2e;
}
.sgc__img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:10px;transform:translateZ(0);
}
.sgc__placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;color:rgba(255,255,255,.4);
}
.sgc__overlay{
  position:absolute;inset:0;border-radius:10px;
  background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;
}
.sgc:hover .sgc__overlay{opacity:1;}
.sgc__play-btn{
  width:44px;height:44px;border-radius:50%;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(255,194,0,.4);
  pointer-events:none;
}
.sgc__play-btn img{width:22px;height:22px;display:block;}
.sgc__name{
  font-size:.7rem;font-weight:700;color:var(--text);
  text-align:center;padding:.35rem .25rem .2rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;
}
/* thumb colours */
.gt-evo    {background:linear-gradient(135deg,#0d1840,#1534a0)}
.gt-prag   {background:linear-gradient(135deg,#200d40,#7b10a2)}
.gt-crash  {background:linear-gradient(135deg,#1a0c00,#c04000)}
.gt-live   {background:linear-gradient(135deg,#001a1a,#006060)}
.gt-slot   {background:linear-gradient(135deg,#0a1a0a,#1a6010)}
.gt-casino {background:linear-gradient(135deg,#1a0d00,#804010)}
.gt-new    {background:linear-gradient(135deg,#0d0040,#4000c0)}
.gt-mascot {background:linear-gradient(135deg,#1a0030,#6000a0)}
.gt-netent {background:linear-gradient(135deg,#001a30,#005070)}

/* ============================================================
   PROVIDERS
   ============================================================ */
.providers-section{padding:1.5rem 0 .5rem}
.providers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:.4rem}
.provider-chip{
  display:block;padding:.62rem .5rem;border-radius:var(--radius-sm);
  background:var(--bg-card);border:1px solid var(--border);
  text-align:center;font-size:.7rem;font-weight:600;color:var(--text-muted);
  transition:all .2s;cursor:pointer;
}
.provider-chip:hover,.provider-chip.active{
  color:var(--text);border-color:rgba(255,194,0,.4);
  background:rgba(255,194,0,.08);
}



/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs{
  display:flex;align-items:center;gap:.35rem;
  font-size:.71rem;color:var(--text-muted);padding:.65rem 0;
  margin-top:calc(var(--nav-h,60px) + 8px);
}
@media(max-width:767px){
  .breadcrumbs{ margin-top:calc(var(--nav-h,0px) - 30px); }
}
.breadcrumbs a{color:var(--text-muted);transition:color .2s}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs__sep{opacity:.4}
.breadcrumbs__current{color:var(--text)}

/* ============================================================
   PAGE TITLE & FILTER
   ============================================================ */
.page-title-bar{padding:.85rem 0 .5rem}
.page-title{font-size:1.4rem;font-weight:900;color:var(--text)}
.filter-bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:.42rem;
  padding:.55rem 0;overflow-x:auto;scrollbar-width:none;
  scroll-margin-top:calc(var(--header-h) + var(--nav-h,0px) + .5rem);
}
.filter-bar::-webkit-scrollbar{display:none}
.filter-tab{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.36rem .88rem;border-radius:2rem;
  font-size:.77rem;font-weight:600;color:var(--text-muted);
  background:var(--bg-card);border:1px solid var(--border);
  cursor:pointer;white-space:nowrap;transition:all .2s;text-decoration:none;
}
.filter-tab.active,.filter-tab:hover{
  color:#fff;background:var(--gradient-btn);border-color:transparent;
}

/* ============================================================
   SEARCH
   ============================================================ */
.search-wrap{position:relative;margin-bottom:.9rem;display:flex;gap:.5rem;align-items:center}
.search-wrap__btn{flex-shrink:0;padding:.6rem 1.1rem;background:var(--gradient-btn);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.85rem;font-weight:700;cursor:pointer;white-space:nowrap}
.search-ico{
  position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  color:var(--text-muted);pointer-events:none;font-size:.85rem;
}
.search-input{
  flex:1;min-width:0;padding:.6rem 1rem .6rem 2.4rem;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);font-size:.875rem;font-family:inherit;outline:none;
  transition:border-color .2s;
}
.search-input:focus{border-color:rgba(124,77,255,.5)}
.search-input::placeholder{color:var(--text-muted)}

/* ============================================================
   SPORTS LAYOUT
   ============================================================ */
.sport-layout{display:grid;grid-template-columns:225px 1fr;gap:.75rem;min-height:400px}
.sport-sidebar{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
}
.sport-sidebar__hd{
  padding:.68rem .9rem;font-size:.77rem;font-weight:700;color:var(--text);
  border-bottom:1px solid var(--border);background:rgba(0,0,0,.03);
}
.sport-item{
  display:flex;align-items:center;gap:.55rem;
  padding:.56rem .9rem;font-size:.77rem;color:var(--text-muted);
  border-bottom:1px solid var(--border);cursor:pointer;transition:all .18s;
}
.sport-item:hover,.sport-item.active{background:rgba(0,0,0,.04);color:var(--text)}
.sport-item.active{border-left:2px solid var(--accent);padding-left:calc(.9rem - 2px)}
.sport-item__ico{font-size:.82rem}
.sport-item__cnt{
  margin-left:auto;font-size:.65rem;color:var(--text-muted);
  background:rgba(0,0,0,.06);padding:.1rem .4rem;border-radius:1rem;
}
.sport-content{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
}
.sport-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;min-height:320px;gap:.85rem;padding:2rem;
}
.sport-empty__ico{font-size:3rem;opacity:.3}
.sport-empty__title{font-size:.93rem;font-weight:700;color:var(--text);text-align:center}
.sport-empty__sub{font-size:.77rem;color:var(--text-muted);text-align:center;max-width:240px}

/* ============================================================
   RESULTS TABLE
   ============================================================ */
.results-tabs{display:flex;gap:.42rem;margin-bottom:.9rem}
.results-tab{
  padding:.4rem 1.15rem;border-radius:var(--radius-sm);
  font-size:.77rem;font-weight:600;color:var(--text-muted);
  background:var(--bg-card);border:1px solid var(--border);
  cursor:pointer;transition:all .2s;text-decoration:none;
}
.results-tab.active,.results-tab:hover{
  background:var(--gradient-btn);color:#fff;border-color:transparent;
}
.results-table-wrap{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
}
.results-table{width:100%;border-collapse:collapse}
.results-table th{
  text-align:left;padding:.55rem .72rem;font-size:.67rem;
  color:var(--text-muted);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;border-bottom:1px solid var(--border);
}
.results-table td{
  padding:.62rem .72rem;font-size:.77rem;border-bottom:1px solid var(--border);
  color:var(--text);
}
.results-table tr:last-child td{border-bottom:none}
.results-table tr:hover td{background:rgba(255,255,255,.02)}

/* ============================================================
   BONUSES EMPTY
   ============================================================ */
.bonus-empty{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:5rem 1rem;text-align:center;gap:1rem;
}
.bonus-empty__ico{font-size:3.5rem;opacity:.28}
.bonus-empty__title{font-size:1.05rem;font-weight:800;color:var(--text)}
.bonus-empty__desc{font-size:.82rem;color:var(--text-muted)}

/* ============================================================
   RULES
   ============================================================ */
.rules-layout{display:grid;grid-template-columns:235px 1fr;gap:1.25rem;align-items:start}
.rules-sidebar{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  position:sticky;top:calc(var(--header-h) + 1rem);
}
.rules-sidebar__item{
  display:block;padding:.68rem .92rem;font-size:.8rem;font-weight:600;
  color:var(--text-muted);border-bottom:1px solid var(--border);transition:all .2s;
}
.rules-sidebar__item:last-child{border-bottom:none}
.rules-sidebar__item:hover,.rules-sidebar__item.active{
  color:var(--accent);background:rgba(124,77,255,.08);
}
.rules-sidebar__item.active{border-left:2px solid var(--accent);padding-left:calc(.92rem - 2px)}

/* Mobile: sidebar becomes a horizontal scrollable pill nav */
@media(max-width:767px){
  .rules-layout{
    grid-template-columns:1fr;
    gap:.75rem;
    margin-top:calc(var(--nav-h,60px) + 8px);
  }
  .rules-sidebar{
    position:static;
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:var(--bg-card);
  }
  .rules-sidebar::-webkit-scrollbar{display:none}
  .rules-sidebar__item{
    flex-shrink:0;
    border-bottom:none;
    border-right:1px solid var(--border);
    white-space:nowrap;
    padding:.6rem 1rem;
  }
  .rules-sidebar__item:last-child{border-right:none}
  .rules-sidebar__item.active{
    border-left:none;
    padding-left:1rem;
    border-bottom:2px solid var(--accent);
    color:var(--accent);
  }
}
.rules-content{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.5rem;
}
.rules-content h1{font-size:1.35rem;font-weight:900;color:var(--text);margin-bottom:1.2rem}
.rules-content h2{font-size:.93rem;font-weight:700;color:var(--text);margin:1.5rem 0 .6rem}
.rules-content p{font-size:.82rem;color:var(--text-sub);line-height:1.78;margin-bottom:.65rem}
.rules-content ol,.rules-content ul{
  list-style:decimal;padding-left:1.5rem;
  font-size:.82rem;color:var(--text-sub);line-height:1.78;margin-bottom:.65rem;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(7,7,32,.88);z-index:500;
  display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
}
.modal-overlay.open{display:flex}
/* Mobile: push modal below fixed header so content is not hidden */
@media(max-width:780px){
  .modal-overlay{
    top:var(--header-h) !important;
    align-items:flex-start;
    overflow-y:auto;
    padding-top:1rem;
    padding-bottom:1rem;
  }
}
.modal-box{
  background:#fff;border:1px solid #e0e0e0;
  border-radius:var(--radius-lg);padding:2rem;width:100%;max-width:440px;
  position:relative;box-shadow:0 8px 32px rgba(0,0,0,.18);
}

/* Desktop auth modal: physical layout (no z-index tricks needed) */
@media(min-width:781px){
  body.auth-modal-open .footer{
    position:fixed !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:1001 !important;
    margin-top:0 !important;
  }
}
.modal-title{font-size:1.18rem;font-weight:800;color:var(--text);margin-bottom:1.5rem}
.modal-close{
  position:absolute;top:1rem;right:1rem;
  width:1.9rem;height:1.9rem;border-radius:50%;
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text-muted);display:flex;align-items:center;justify-content:center;
  font-size:.9rem;transition:all .2s;cursor:pointer;
}
.modal-close:hover{color:var(--text);background:var(--bg-card-hover)}
.form-field{margin-bottom:.88rem}
.form-label{display:flex;align-items:center;gap:.35rem;font-size:.84rem;font-weight:600;color:var(--text);margin-bottom:.42rem}
.form-help-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#bbb;color:#fff;font-size:.65rem;font-weight:700;cursor:help;flex-shrink:0;margin-left:auto;}
.pwd-wrap{position:relative;}
.pwd-wrap .form-input{padding-right:2.6rem;}
.pwd-eye{position:absolute;right:.65rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#888;font-size:1rem;padding:0;line-height:1;}
.form-input{
  width:100%;padding:.62rem .9rem;
  background:var(--bg-wins);border:1px solid var(--border);
  border-radius:8px;color:var(--text);font-size:.9rem;
  font-family:inherit;outline:none;transition:border-color .2s;box-sizing:border-box;
}
.form-input:focus{border-color:var(--blue-btn);background:var(--bg);}
.form-input::placeholder{color:#aaa}
.form-submit{
  width:100%;padding:.72rem;background:var(--btn-primary);color:var(--btn-primary-text);
  border:none;border-radius:8px;font-size:1rem;font-weight:800;
  cursor:pointer;transition:opacity .2s;margin-top:.4rem;font-family:inherit;
}
.form-submit:hover{opacity:.88}
.form-toggle{text-align:center;font-size:.75rem;color:var(--text-muted);margin-top:.85rem}
.form-toggle a{color:var(--accent);font-weight:600}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background: var(--footer-bg);border-top:2px solid var(--accent);
  padding:2rem 0 1.5rem;margin-top:0.5rem;
  width:100%;box-sizing:border-box;
}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;margin-bottom:1.5rem}
.footer__hd{
  font-size:.73rem;font-weight:700;color:var(--text);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:.7rem;
}
.footer__link{
  display:block;font-size:.77rem;color:var(--text-muted);padding:.26rem 0;transition:color .2s;
}
.footer__link:hover{color:var(--accent)}
.footer-support-btn{
  display:flex;align-items:center;justify-content:center;gap:.42rem;
  padding:.55rem .9rem;border-radius:var(--radius-sm);
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text);font-size:.77rem;font-weight:600;margin-bottom:.42rem;
  transition:border-color .2s,background .2s;text-decoration:none;
}
.footer-support-btn:hover{border-color:rgba(124,77,255,.4);background:var(--bg-card-hover)}
.footer__social{display:flex;gap:.42rem;margin-top:.85rem}
.social-btn{
  width:2rem;height:2rem;border-radius:50%;
  background:var(--bg-card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:.82rem;transition:all .2s;
}
.social-btn:hover{color:var(--accent);border-color:rgba(124,77,255,.4);transform:translateY(-2px)}
.footer__bottom{
  border-top:1px solid var(--border);padding-top:1.1rem;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.75rem;
}
.footer__logo-text{
  font-size:.92rem;font-weight:900;
  background:var(--gradient-btn);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
}
.footer__copy{font-size:.68rem;color:var(--text-muted);max-width:680px;line-height:1.7}

/* ============================================================
   BOTTOM NAV (mobile)
   ============================================================ */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--bnav-bg);border-top:2px solid var(--accent);
  display:none;flex-direction:column;align-items:stretch;
  z-index:200;backdrop-filter:blur(10px);
}
/* Guest login/register button row */
.bnav-guest-row{
  display:flex;width:100%;flex-shrink:0;
}
.bnav-register-btn,
.bnav-login-btn{
  flex:1;height:54px;border:none;cursor:pointer;
  font-size:.95rem;font-weight:800;letter-spacing:.01em;
  transition:filter .15s;
}
.bnav-register-btn{
  background:var(--btn-primary);color:var(--btn-primary-text);
}
.bnav-register-btn:active{filter:brightness(.9)}
.bnav-login-btn{
  background:var(--btn-blue);color:#fff;
}
.bnav-login-btn:active{filter:brightness(.9)}
/* Icon strip inside bottom-nav */
.bnav-items-row{
  display:flex;align-items:center;justify-content:space-around;
  height:var(--nav-h);flex-shrink:0;
}
.bnav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.18rem;color:var(--bnav-inactive);font-size:.58rem;font-weight:600;
  padding:.35rem .6rem;transition:color .2s;flex:1;cursor:pointer;text-decoration:none;
}
.bnav-item.active{color:var(--accent);font-weight:700;}
.bnav-item:hover{color:var(--accent)}
.bnav-icon{font-size:1.2rem;line-height:1;display:flex;align-items:center;justify-content:center;}
/* Center home button — raised yellow circle */
.bnav-item--home{
  position:relative;
  margin-top:-18px;
  flex:1;
}
.bnav-icon--home{
  width:52px;height:52px;
  background:var(--btn-primary);
  border-radius:50%;
  border:3px solid var(--bnav-bg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 -4px 16px rgba(255,194,0,.45);
}
.bnav-item--home svg{fill:var(--text);}
.bnav-item--home.active .bnav-icon--home,
.bnav-item--home:hover .bnav-icon--home{background:var(--accent-2);}

/* Badge */
.badge{
  display:inline-flex;align-items:center;
  padding:.13rem .46rem;border-radius:2rem;
  font-size:.59rem;font-weight:700;text-transform:uppercase;
}
.badge--live  {background:rgba(34,197,94,.2);color:#22c55e}
.badge--new   {background:#22c55e;color:#fff;border-radius:50%;width:18px;height:18px;padding:0;justify-content:center;font-size:.5rem;}
.badge--hot   {background:rgba(239,68,68,.22);color:#ef4444}
.badge--evo   {background:rgba(255,194,0,.18);color:var(--accent)}
.badge--slots {background:rgba(255,194,0,.15);color:var(--accent)}
.badge--crash {background:rgba(239,68,68,.2);color:#ef4444}
.badge--flash {background:rgba(0,220,180,.18);color:#00dca0}
.badge--fish  {background:rgba(0,180,255,.18);color:#00b4ff}

/* Inline nav badge helpers */
.nav-badge-new{
  display:inline-flex;align-items:center;justify-content:center;
  background:#22c55e;color:#fff;border-radius:50%;
  width:16px;height:16px;font-size:.44rem;font-weight:800;
  text-transform:uppercase;flex-shrink:0;
}
.nav-badge-hot{
  display:inline-flex;align-items:center;gap:1px;
  background:rgba(239,68,68,.18);color:#ef4444;
  border-radius:3px;padding:.05rem .22rem;
  font-size:.46rem;font-weight:800;text-transform:uppercase;flex-shrink:0;
}

/* Hot flame icon on nav links */
.nav-link--hot{position:relative;padding-right:18px;}
.nav-hot-icon{
  width:35px;height:48px;object-fit:contain;
  position:absolute;top:-34px;right:-1px;
  animation:hotFlame .7s ease-in-out infinite alternate;
  transform-origin:bottom center;
}
@keyframes hotFlame{
  0%{transform:scale(1) rotate(-6deg);}
  50%{transform:scale(1.12) rotate(0deg);}
  100%{transform:scale(1.08) rotate(6deg);}
}

/* HOT overlay badge on game cards */
.game-hot-badge{
  position:absolute;top:.35rem;right:.35rem;z-index:4;
  background:linear-gradient(135deg,#ff4500,#ff6b00);
  color:#fff;border-radius:4px;
  padding:.1rem .35rem;font-size:.5rem;font-weight:800;text-transform:uppercase;
  display:flex;align-items:center;gap:2px;
  box-shadow:0 2px 8px rgba(255,69,0,.45);
}

/* 404 */
.page-404{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:60vh;text-align:center;gap:.9rem;
}
.page-404__num{
  font-size:4.5rem;font-weight:900;
  background:var(--gradient-btn);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1050px){
  .games-grid{grid-template-columns:repeat(5,1fr)}
  .games-grid--5col{grid-template-columns:repeat(5,1fr)!important}
  .hero-grid{grid-template-columns:1fr 285px}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr 265px}
  .games-grid{grid-template-columns:repeat(4,1fr)}
  .games-grid--5col{grid-template-columns:repeat(4,1fr)!important}
}
@media(max-width:780px){
  .header__nav-row{display:none}
  /* Mobile: top row only (mobile nav strip hidden) */
  .page-wrapper{padding-top:var(--header-h)}
  .header__mobile-nav{display:none!important;}
  .header__mobile-nav::-webkit-scrollbar{display:none;}
  .mnav-link{
    display:inline-flex;align-items:center;
    padding:.35rem .65rem;
    font-size:.78rem;font-weight:500;
    color:#fff;
    white-space:nowrap;flex-shrink:0;
    position:relative;
    transition:color .2s;
  }
  .mnav-link:not(:last-child)::after{
    content:"\00b7";margin-left:.65rem;
    color:rgba(255,255,255,.25);font-size:1.2rem;
  }
  .mnav-link.active{color:#fff;}
  .mnav-link.active::before{
    content:"";position:absolute;bottom:-1px;left:.65rem;right:calc(.65rem + .65rem + .4rem);
    height:2px;background:var(--accent);border-radius:2px;
  }
  .mnav-link--aviator{color:#e50539;font-weight:700;}
  .mnav-link--aviatrix{
    font-weight:700;
    background:linear-gradient(90deg,#ff6b6b,#ffd93d,#6bcb77);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  }
  /* ── Mobile header layout ── */
  .header .container{padding:0 .5rem;}
  .header__inner{overflow:visible;gap:.3rem;justify-content:space-between;flex-wrap:nowrap;}
  /* Logo takes remaining left space, pushing actions to the right */
  .header__nav-row{display:none;}
  .logo-wrap{flex:1;min-width:0;flex-shrink:0;margin-left:0;}
  /* Actions: no shrink, items never wrap */
  .header__actions{gap:.3rem;flex-shrink:0;margin-left:0;margin-right:0;overflow:visible;flex-wrap:nowrap;}
  .logo-svg{height:40px!important;width:auto!important;}
  .logo-flag{display:flex;}

  /* Hide desktop-only elements */
  .lang-pill{display:none!important;}
  .lang-pill--desktop{display:none!important;}
  .lang-switcher{display:none;}
  .mnav-lang{display:none;}
  .btn-icon{display:none;}
  .hdr-profile-menu{display:none!important;}
  .hdr-deposit-desktop{display:none!important;}
  .hdr-logout-btn{display:none!important;}

  /* Language toggle: flag-only, no chevron */
  .lang-toggle__btn{padding:.2rem .45rem .2rem .25rem;}
  .lang-toggle__flag{width:24px;height:24px;}
  .lang-toggle__chev{display:none;}

  /* Guest buttons */
  .btn-login{
    display:inline-flex;align-items:center;
    padding:.55rem 1.2rem;font-size:.85rem;white-space:nowrap;
    border-radius:8px;
  }
  .btn-register-mobile{
    display:inline-flex;align-items:center;
    padding:.55rem 1.2rem;font-size:.85rem;white-space:nowrap;
    border-radius:8px;
  }

  /* ── Logged-in bar ── */
  .hdr-user-bar{gap:.28rem;align-items:center;}

  /* Hide the ID pill on mobile — shown in side menu instead */
  .hdr-user-id{display:none!important;}

  /* Balance pill: hidden on mobile */
  .hdr-balance{display:none!important;}

  /* Avatar button: shown as profile icon on mobile */
  .hdr-avatar-btn{
    width:36px!important;height:36px!important;border-radius:50%!important;
    background:var(--accent-2)!important;
    padding:0!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
  }
  .hdr-avatar-btn svg{display:none!important;}
  .hdr-avatar-btn .hdr-avatar-icon--desktop{display:none!important;}
  .hdr-avatar-btn .hdr-avatar-icon--mobile{display:block!important;width:20px!important;height:22px!important;}
  .hdr-avatar-initials{display:none!important;}
  .hdr-avatar-dep-label{display:none!important;}

  /* Hamburger — always shown on mobile, sits at left corner */
  .hdr-hamburger{display:flex;width:34px;height:34px;flex-shrink:0;order:-1;}
  /* Logo: shift right slightly so it doesn't crowd the hamburger */
  .logo-wrap{margin-left:0.0rem;}
  /* Hide separate mobile deposit btn (avatar btn handles it) */
  .hdr-deposit-mobile{display:none!important;}
  /* Overlay starts below header on mobile */
  .side-menu-overlay{top:calc(var(--header-h) + 40px);}
  /* Close button in mobile nav strip */
  .mnav-close-btn{
    display:none;
    align-items:center;justify-content:center;
    gap:.3rem;
    background:rgba(255,255,255,.09);
    border:1.5px solid rgba(255,255,255,.2);
    border-radius:20px;
    color:#fff;
    font-size:.75rem;font-weight:700;
    padding:.22rem .7rem;
    cursor:pointer;
    flex-shrink:0;
    white-space:nowrap;
    margin-left:auto;
    transition:background .18s;
  }
  .mnav-close-btn.open{display:flex;}
  .mnav-close-btn:hover{background:rgba(255,255,255,.18);}
  /* Rest */
  .hero-grid{grid-template-columns:1fr}
  .hero-section > .container > .sport-card-big--empty{
    display:none !important;
  }
  .wins-panel{
    height:180px;
    border-radius:var(--radius-lg);
    margin-top:0.0rem;
  }
  .wins-panel__list{
    overflow:hidden;
    height:calc(180px - 2.2rem);
    position:relative;
    display:flex;flex-direction:column;justify-content:flex-end;
  }
  .sport-cards-scroller{
    display:flex;flex-wrap:nowrap;gap:.45rem;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:.25rem;
  }
  .sport-cards-scroller::-webkit-scrollbar{display:none;}
  .sport-cards-scroller .sport-card-big{flex:0 0 calc(48vw - 12px);min-height:78px;max-height:78px;}
  .wins-panel__head{display:flex;}
  .sport-card-big__content{padding:.5rem .6rem;}
  .sport-card-big__title{font-size:.75rem;margin-bottom:.15rem;}
  .sport-card-big__sub{display:none;}
  .sport-card-btn{padding:.22rem .5rem;font-size:.6rem;}
  .footer__grid{grid-template-columns:1fr;gap:1.25rem}
  .rules-layout,.sport-layout{grid-template-columns:1fr}
  .bottom-nav{display:flex}
  .games-grid{grid-template-columns:repeat(3,1fr)}
  .games-grid--5col{grid-template-columns:repeat(3,1fr)!important}
  .page-content{padding-bottom:calc(var(--nav-h) + rem)}
  .footer{padding-bottom:calc(var(--nav-h) + 1.5rem)}
  /* Casino hero + jackpot smaller on mobile */
  .casino-hero-grid{grid-template-columns:1fr;gap:.5rem;margin-bottom:.75rem;}
  .casino-hero-slider{min-height:140px;height:150px;}
  .jacpot-banner{height:100px;margin-bottom:.75rem;}
  .jacpot-banner__text-box{flex-direction:row;align-items:center;justify-content:flex-start;gap:.6rem;padding:0 1rem;}
  .jacpot-banner__title{font-size:.8rem;}
  .jacpot-banner__amount{font-size:1.5rem;}
  .jacpot-banner__currency{font-size:1.8rem !important;}
  /* Filter bar: single scrollable row, no wrap */
  .filter-bar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.35rem;}
  .filter-tab{flex-shrink:0;}
  /* Games page redesign – mobile */
  .games-hero{height:180px;}
  .games-hero__title{font-size:1.25rem;}
  .games-hero__sub{font-size:.78rem;}
  .gprov-grid{grid-template-columns:repeat(3,1fr);gap:.35rem;}
  .gprov-pill{font-size:.65rem;padding:.35rem .3rem;}
  .gprov-pill img{width:22px;height:15px;}
  .gprov-pill span{max-width:60px;}
  .games-grid--8col{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:540px){
  .games-grid{grid-template-columns:repeat(3,1fr)}
  .providers-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  /* Keep login/register visible - already handled above */
  /* Games page redesign – small mobile */
  .gprov-grid{grid-template-columns:repeat(2,1fr);gap:.3rem;}
  .games-grid--8col{grid-template-columns:repeat(3,1fr);}
  .games-hero{height:155px;}
  .games-hero__title{font-size:1.05rem;}
}

/* ============================================================
   SPORTSBOOK (LINE PAGE) REDESIGN
   ============================================================ */

/* 3-column layout */
.sb-layout{
  display:grid;
  grid-template-columns:260px 1fr 265px;
  gap:.75rem;
  align-items:start;
  padding:.5rem 0 2rem;
}

/* ---- LEFT SIDEBAR ---- */
.sb-sidebar{
  background:#0d0d24;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  position:sticky;
  top:calc(var(--header-h) + .5rem);
  max-height:calc(100vh - var(--header-h) - 2rem);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(124,77,255,.3) transparent;
}
.sb-sidebar::-webkit-scrollbar{width:4px}
.sb-sidebar::-webkit-scrollbar-thumb{background:rgba(124,77,255,.3);border-radius:4px}

/* Sport selector */
.sb-sport-selector{position:relative;border-bottom:1px solid var(--border)}
.sb-sport-selector__active{
  display:flex;align-items:center;gap:.55rem;
  padding:.7rem .9rem;cursor:pointer;
  background:rgba(124,77,255,.12);
  transition:background .2s;
}
.sb-sport-selector__active:hover{background:rgba(124,77,255,.18)}
.sb-sport-selector__icon{font-size:1.1rem;flex-shrink:0}
.sb-sport-selector__name{flex:1;font-size:.85rem;font-weight:700;color:#fff}
.sb-sport-selector__count{
  font-size:.72rem;font-weight:700;
  background:rgba(124,77,255,.25);
  color:var(--accent);
  padding:.1rem .5rem;border-radius:2rem;
  margin-right:.25rem;
}
.sb-sport-selector__arrow{font-size:.7rem;color:var(--text-muted);transition:transform .2s}

.sb-sport-dropdown{
  display:none;
  background:#0a0a20;
  border-top:1px solid var(--border);
  max-height:280px;overflow-y:auto;
}
.sb-sport-dropdown.open{display:block}
.sb-sport-option{
  display:flex;align-items:center;gap:.55rem;
  padding:.6rem .9rem;cursor:pointer;
  font-size:.8rem;color:var(--text-muted);
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .15s,color .15s;
}
.sb-sport-option:hover{background:rgba(255,255,255,.04);color:#fff}
.sb-sport-option.active{background:rgba(124,77,255,.1);color:#fff}
.sb-sport-option__icon{font-size:.95rem;flex-shrink:0;width:1.3rem;text-align:center}
.sb-sport-option__name{flex:1}
.sb-sport-option__count{
  font-size:.66rem;color:var(--text-muted);
  background:rgba(255,255,255,.06);
  padding:.1rem .4rem;border-radius:1rem;
}

/* Country list */
.sb-country-list{padding:.3rem 0}
.sb-country-item{
  position:relative;
  padding:.52rem .9rem;
  display:flex;align-items:center;gap:.55rem;
  cursor:pointer;font-size:.8rem;color:var(--text-muted);
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .15s,color .15s;
  flex-wrap:wrap;
}
.sb-country-item:hover{background:rgba(255,255,255,.04);color:#fff}
.sb-country-item.active{background:rgba(124,77,255,.1);color:#fff}
.sb-country-flag{width:20px;height:14px;border-radius:2px;object-fit:cover;flex-shrink:0}
.sb-country-name{flex:1}
.sb-country-arrow{font-size:.65rem;color:var(--text-muted);margin-left:auto;transition:transform .2s}

/* League list (inside country) */
.sb-league-list{
  display:none;
  width:100%;
  padding:.2rem 0 .2rem 2.6rem;
  background:rgba(0,0,0,.2);
}
.sb-country-item.active .sb-league-list{display:block}
.sb-league-item{
  padding:.42rem .6rem;font-size:.76rem;color:var(--text-muted);
  border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;
}
.sb-league-item:hover{color:#fff;background:rgba(255,255,255,.05)}
.sb-league-item.active{
  color:#fff;font-weight:700;
  background:rgba(124,77,255,.15);
  border-left:2px solid var(--accent);
  padding-left:calc(.6rem - 2px);
}

/* ---- CENTER MAIN ---- */
.sb-main{display:flex;flex-direction:column;gap:.6rem}

.sb-widget-wrap{
  border-radius:var(--radius);
  background:#0d0d24;border:1px solid var(--border);
  height:580px;
}
.sb-widget-iframe{
  width:100%;height:100%;border:none;display:block;
}

/* Search */
.sb-search-wrap{position:relative}
.sb-search-ico{
  position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  color:var(--text-muted);pointer-events:none;font-size:.85rem;
}
.sb-search-input{
  width:100%;padding:.6rem 1rem .6rem 2.4rem;
  background:#0d0d24;border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);
  font-size:.855rem;font-family:inherit;outline:none;
  transition:border-color .2s;
}
.sb-search-input:focus{border-color:rgba(124,77,255,.5)}
.sb-search-input::placeholder{color:var(--text-muted)}

/* Matches */
.sb-matches-wrap{display:flex;flex-direction:column;gap:.5rem}
.sb-league-block{
  background:#0d0d24;border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
}
.sb-league-head{
  display:flex;align-items:center;gap:.55rem;
  padding:.65rem .9rem;cursor:pointer;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--border);
  transition:background .2s;
}
.sb-league-head:hover{background:rgba(255,255,255,.06)}
.sb-league-head__icon{font-size:.95rem}
.sb-league-head__name{flex:1;font-size:.82rem;font-weight:700;color:#fff}
.sb-league-head__arrow{font-size:.65rem;color:var(--text-muted)}

.sb-match{
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem .9rem;border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .15s;
}
.sb-match:last-child{border-bottom:none}
.sb-match:hover{background:rgba(255,255,255,.02)}

.sb-match__datetime{
  flex-shrink:0;min-width:90px;
  border-right:1px solid rgba(255,255,255,.08);
  padding-right:.75rem;
}
.sb-match__date{font-size:.66rem;color:var(--text-muted)}
.sb-match__time{font-size:.77rem;font-weight:700;color:var(--text)}

.sb-match__teams{flex:1;min-width:0}
.sb-match__team{
  font-size:.78rem;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.55;
}

.sb-match__odds{display:flex;gap:.35rem;flex-shrink:0}
.sb-odd-btn{
  display:flex;flex-direction:column;align-items:center;gap:.06rem;
  padding:.42rem .55rem;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  cursor:pointer;transition:all .18s;min-width:52px;
}
.sb-odd-btn:hover{background:rgba(124,77,255,.18);border-color:rgba(124,77,255,.4)}
.sb-odd-btn.active{background:var(--gradient-btn);border-color:transparent}
.sb-odd-btn__label{font-size:.58rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.sb-odd-btn.active .sb-odd-btn__label{color:rgba(255,255,255,.8)}
.sb-odd-btn__val{font-size:.8rem;font-weight:800;color:#fff}

/* ---- RIGHT SIDEBAR ---- */
.sb-right{
  display:flex;flex-direction:column;gap:.75rem;
  position:sticky;top:calc(var(--header-h) + .5rem);
}

/* Betting slip */
.sb-betslip{
  background:#0d0d24;border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
}
.sb-betslip__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.65rem .9rem;border-bottom:1px solid var(--border);
}
.sb-betslip__title{font-size:.88rem;font-weight:800;color:#fff}
.sb-betslip__history{
  display:flex;align-items:center;gap:.3rem;
  font-size:.72rem;font-weight:600;color:var(--accent);
  background:none;border:none;cursor:pointer;transition:color .2s;
}
.sb-betslip__history:hover{color:var(--accent-2)}

.sb-betslip__body{
  min-height:64px;padding:.6rem .9rem;
  border-bottom:1px solid var(--border);
}
.sb-betslip__empty{
  font-size:.78rem;color:var(--text-muted);
  text-align:center;padding:.6rem 0;font-style:italic;
}
.sb-betslip__sel{
  background:rgba(124,77,255,.08);border:1px solid rgba(124,77,255,.2);
  border-radius:var(--radius-sm);padding:.5rem .65rem;margin-bottom:.4rem;
}
.sb-betslip__sel:last-child{margin-bottom:0}
.sb-betslip__sel-teams{font-size:.72rem;color:var(--text);line-height:1.5}
.sb-betslip__sel-meta{
  display:flex;justify-content:space-between;
  font-size:.7rem;color:var(--text-muted);margin-top:.2rem;
}
.sb-betslip__sel-odd{font-weight:800;color:var(--accent)}

.sb-betslip__footer{padding:.75rem .9rem;display:flex;flex-direction:column;gap:.6rem}
.sb-betslip__maxwin{display:flex;justify-content:space-between;align-items:center}
.sb-betslip__maxwin-label{font-size:.65rem;color:var(--text-muted)}
.sb-betslip__maxwin-val{font-size:.77rem;font-weight:700;color:var(--text)}
.sb-betslip__maxwin-val--green{color:var(--green)}

.sb-betslip__amount{
  width:100%;padding:.52rem .75rem;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-sm);color:var(--text);font-size:.84rem;
  font-family:inherit;outline:none;transition:border-color .2s;
}
.sb-betslip__amount:focus{border-color:rgba(124,77,255,.5)}
.sb-betslip__amount::placeholder{color:var(--text-muted)}

.sb-betslip__odds-agree{
  display:flex;align-items:flex-start;gap:.4rem;
  font-size:.7rem;color:var(--text-muted);line-height:1.5;
}
.sb-betslip__odds-agree input[type=checkbox]{
  accent-color:var(--accent);width:13px;height:13px;flex-shrink:0;margin-top:.1rem;cursor:pointer;
}

.sb-betslip__place{
  width:100%;padding:.6rem;
  background:var(--gradient-btn);color:#fff;
  border:none;border-radius:var(--radius-sm);
  font-size:.84rem;font-weight:700;cursor:pointer;
  transition:opacity .2s;
}
.sb-betslip__place:hover{opacity:.9}
.sb-betslip__clear{
  width:100%;padding:.48rem;
  background:transparent;color:var(--text-muted);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);
  font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s;
}
.sb-betslip__clear:hover{color:#fff;border-color:rgba(255,255,255,.25)}

/* Casino mini */
.sb-casino-mini{
  background:#0d0d24;border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
}
.sb-casino-mini__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.65rem .9rem;border-bottom:1px solid var(--border);
}
.sb-casino-mini__title{font-size:.88rem;font-weight:800;color:#fff}
.sb-casino-mini__all{
  display:flex;align-items:center;gap:.3rem;
  font-size:.72rem;font-weight:600;color:var(--accent);transition:color .2s;
}
.sb-casino-mini__all:hover{color:var(--accent-2)}
.sb-casino-mini__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.4rem;padding:.65rem;
}
.sb-casino-mini__card{
  border-radius:var(--radius-sm);overflow:hidden;
  position:relative;aspect-ratio:1/1;
  background:linear-gradient(135deg,#1a0845,#3d1b80);
  display:block;transition:transform .2s;
}
.sb-casino-mini__card:hover{transform:scale(1.03)}
.sb-casino-mini__card img{
  width:100%;height:calc(100% - 20px);object-fit:contain;background:#0d0d22;display:block;
}
.sb-casino-mini__card span{
  display:block;font-size:.58rem;color:var(--text);font-weight:600;
  padding:.18rem .3rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Mobile sport strip — hidden on desktop */
.sb-sport-strip{display:none;}
.sb-betslip-fab{display:none;}
.sb-live-banner--mobile{display:none;}
.sb-country-mobile{display:none;}
.sb-widget-wrap--mobile{display:none;}

/* Responsive */
@media(max-width:1100px){
  .sb-layout{grid-template-columns:230px 1fr 240px}
}
@media(max-width:900px){
  .sb-layout{grid-template-columns:200px 1fr}
  .sb-right{display:none}
}
@media(max-width:640px){
  .sb-layout{grid-template-columns:1fr;gap:.5rem}
  .sb-sidebar{display:none}
  .sb-sidebar.sb-sidebar--open{display:block;position:fixed;inset:0;z-index:700;border-radius:0;max-height:100vh;top:0}
  .sb-right{display:none}
  .sb-widget-wrap{height:580px;}
  /* Match cards: stack datetime above teams */
  .sb-match{flex-wrap:wrap;gap:.4rem;padding:.55rem .7rem;}
  .sb-match__datetime{min-width:auto;border-right:none;padding-right:0;display:flex;gap:.4rem;align-items:center;width:100%;}
  .sb-match__date{font-size:.65rem;}
  .sb-match__time{font-size:.72rem;}
  .sb-match__teams{width:100%;}
  .sb-match__odds{width:100%;justify-content:stretch;}
  .sb-odd-btn{flex:1;min-width:0;padding:.38rem .3rem;}
  .sb-odd-btn__val{font-size:.75rem;}
  .sb-odd-btn__label{font-size:.55rem;}
  /* Hide search on mobile to save space */
  .sb-search-wrap{display:none}
  /* Date tabs compact */
  .sb-date-tab{padding:.38rem .7rem;font-size:.75rem;}
  /* Betslip slide-in panel */
  .sb-betslip-panel{
    position:fixed;bottom:0;left:0;right:0;z-index:750;
    background:#0d0d24;border-top:2px solid rgba(124,77,255,.5);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    transform:translateY(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    max-height:80vh;overflow-y:auto;
  }
  .sb-betslip-panel.open{transform:translateY(0);}
  /* Floating betslip toggle */
  .sb-betslip-fab{
    display:flex;
    position:fixed;bottom:calc(var(--nav-h,60px) + .75rem);right:1rem;z-index:720;
    align-items:center;gap:.4rem;
    background:var(--gradient-btn);color:#fff;
    border:none;border-radius:2rem;
    padding:.5rem 1rem .5rem .7rem;
    font-size:.8rem;font-weight:700;
    box-shadow:0 4px 20px rgba(124,77,255,.5);
    cursor:pointer;
  }
  .sb-betslip-fab__count{
    background:rgba(255,255,255,.25);border-radius:50%;
    width:20px;height:20px;display:flex;align-items:center;justify-content:center;
    font-size:.7rem;font-weight:800;
  }
  /* Mobile sport strip */
  .sb-sport-strip{
    display:flex;gap:.4rem;
    overflow-x:auto;scrollbar-width:none;
    padding:.5rem 0;
  }
  .sb-sport-strip::-webkit-scrollbar{display:none;}
  .sb-sport-chip{
    display:inline-flex;align-items:center;gap:.3rem;
    flex-shrink:0;padding:.32rem .7rem;
    border-radius:2rem;font-size:.75rem;font-weight:600;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
    color:rgba(255,255,255,.7);cursor:pointer;white-space:nowrap;
    transition:all .18s;
  }
  .sb-sport-chip.active,.sb-sport-chip:hover{
    background:var(--gradient-btn);border-color:transparent;color:#fff;
  }
  /* overlay behind sidebar */
  .sb-sidebar-overlay{
    display:none;position:fixed;inset:0;z-index:699;
    background:rgba(0,0,0,.6);
  }
  .sb-sidebar-overlay.open{display:block;}
  /* Mobile live banner (shown above sport strip) */
  .sb-live-banner--mobile{
    display:block;
    height:130px;
    border-radius:var(--radius);overflow:hidden;
    position:relative;
    border:1px solid var(--border);
    margin-bottom:.4rem;
  }
  .sb-main .sb-live-banner{display:none;} /* hide original inside sb-main on mobile */
  /* Mobile Lucky Sports widget (shown above sport strip) */
  .sb-widget-wrap--mobile{
    display:block;
    height:580px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    margin-bottom:.4rem;
  }
  .sb-main .sb-widget-wrap{display:none!important;} /* hide original inside sb-main on mobile */
  /* Mobile country list (shown below sport strip) */
  .sb-country-mobile{
    display:block;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    max-height:195px;
    overflow-y:auto;
    margin-bottom:.4rem;
    scrollbar-width:none;
  }
  .sb-country-mobile::-webkit-scrollbar{display:none;}
}

/* ── Dynamic state helpers ───────────────────────────────────── */
.sb-loading{
  padding:1.5rem 1rem;display:flex;align-items:center;gap:.6rem;
  color:var(--text-muted);font-size:.85rem;
}
.sb-loading .fa-spinner{color:rgba(124,77,255,.7);font-size:1rem}

.sb-empty-msg{
  padding:1.5rem 1rem;color:var(--text-muted);
  font-size:.84rem;text-align:center;
}
.sb-empty-msg a{color:rgba(124,77,255,.8);text-decoration:underline}

/* ── Date tabs ───────────────────────────────────────────────── */
.sb-date-tabs{
  display:flex;gap:.35rem;padding:.5rem .75rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.sb-date-tab{
  padding:.28rem .75rem;font-size:.78rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;color:var(--text-muted);cursor:pointer;
  font-family:inherit;transition:all .2s;
}
.sb-date-tab:hover{background:rgba(255,255,255,.1);color:var(--text)}
.sb-date-tab.active{
  background:linear-gradient(90deg,rgb(124,77,255) 0%,rgb(201,75,255) 100%);
  border-color:transparent;color:#fff;
}

/* ── League body toggle ──────────────────────────────────────── */
.sb-league-body{display:block}

/* ── Match score / live badge ────────────────────────────────── */
.sb-match__score{
  font-size:.95rem;font-weight:700;
  color:#fff;min-width:40px;text-align:center;align-self:center;
}
.sb-match__live{
  display:inline-block;margin-left:.35rem;padding:.1rem .35rem;
  background:#e53935;border-radius:4px;
  font-size:.62rem;font-weight:700;color:#fff;letter-spacing:.5px;
  vertical-align:middle;animation:pulse-live 1.4s ease-in-out infinite;
}
@keyframes pulse-live{
  0%,100%{opacity:1}50%{opacity:.55}
}

/* ── Betting-slip selection item ─────────────────────────────── */
.sb-betslip__sel{
  padding:.55rem .75rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.8rem;
}
.sb-betslip__sel-teams{color:var(--text);margin-bottom:.2rem}
.sb-betslip__sel-meta{
  display:flex;justify-content:space-between;color:var(--text-muted)
}
.sb-betslip__sel-odd{
  color:#7c4dff;font-weight:600;
}

/* ── Active odd button ───────────────────────────────────────── */
.sb-odd-btn.active{
  background:linear-gradient(90deg,rgb(124,77,255) 0%,rgb(201,75,255) 100%);
  border-color:transparent;color:#fff;
}
.sb-odd-btn.active .sb-odd-btn__val{color:#fff}

/* ── Live page banner ────────────────────────────────────────── */
.sb-live-banner{
  position:relative;border-radius:var(--radius);overflow:hidden;
  height:300px;background:#0d0d24;border:1px solid var(--border);
}
.sb-live-banner__img{width:100%;height:100%;object-fit:cover;display:block;}
.sb-live-banner__overlay{
  position:absolute;bottom:.75rem;left:.75rem;right:.75rem;
  display:flex;align-items:center;gap:.75rem;
}
.sb-live-count{
  background:rgba(0,0,0,.65);padding:.2rem .65rem;
  border-radius:999px;font-size:.78rem;color:#fff;
}

/* ── Live status bar ─────────────────────────────────────────── */
.sb-live-bar{
  display:flex;align-items:center;gap:.75rem;
  padding:.5rem .85rem;background:#0d0d24;
  border:1px solid var(--border);border-radius:var(--radius);
  font-size:.82rem;flex-wrap:wrap;
}
.sb-live-bar__sport{font-weight:600;color:#fff;}
.sb-live-bar__refresh{margin-left:auto;color:var(--text-muted);font-size:.78rem;}

/* ── Match progress mini-label ───────────────────────────────── */
.sb-match__progress{
  font-size:.7rem;color:var(--color-success);
  background:rgba(0,200,100,.12);
  border-radius:4px;padding:0 .3rem;margin-left:.3rem;
  vertical-align:middle;
}
@media(max-width:640px){
  .sb-live-banner{height:160px}
}

/* ── Results rows ────────────────────────────────────────────── */
.sb-res-row{
  display:grid;
  grid-template-columns:90px 1fr 70px;
  align-items:center;gap:.5rem;
  padding:.55rem .85rem;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:.82rem;
}
.sb-res-row:last-child{border-bottom:none}
.sb-res-row:hover{background:rgba(255,255,255,.03)}
.sb-res-row__date{color:var(--text-muted);font-size:.75rem;}
.sb-res-row__teams{
  display:flex;align-items:center;gap:.5rem;justify-content:center;flex-wrap:wrap;
}
.sb-res-row__team{color:var(--text);white-space:nowrap;}
.sb-res-row__team--win{color:#fff;font-weight:700;}
.sb-res__score{
  min-width:54px;text-align:center;
  font-size:.92rem;font-weight:700;color:#fff;
  background:rgba(124,77,255,.18);
  border-radius:6px;padding:.1rem .45rem;
  white-space:nowrap;
}
.sb-res__score--ns{color:var(--text-muted);background:none;}
.sb-res__colon{color:rgba(124,77,255,.7);}
.sb-res-row__status{
  text-align:right;color:var(--color-success);
  font-size:.72rem;font-weight:600;
}
@media(max-width:640px){
  .sb-res-row{grid-template-columns:70px 1fr;}
  .sb-res-row__status{display:none}
}

/* ── Results page layout ──────────────────────────────────────── */
.res-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:1.25rem;
  align-items:start;
  padding:1.5rem 0 3rem;
}

/* Left date panel */
.res-datepanel{
  background:#0d0d24;
  border:1px solid var(--border);
  border-radius:14px;
  padding:.85rem .75rem;
  position:sticky;
  top:80px;
}
.res-datetabs{
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.res-datetab{
  width:100%;
  text-align:left;
  padding:.55rem .85rem;
  border-radius:8px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text-muted);
  font-family:inherit;
  font-size:.85rem;
  cursor:pointer;
  transition:all .2s;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.res-datetab:hover{background:rgba(255,255,255,.06);color:var(--text);}
.res-datetab.active{
  background:linear-gradient(90deg,rgb(124,77,255) 0%,rgb(201,75,255) 100%);
  border-color:transparent;
  color:#fff;
  font-weight:600;
}
.res-datetab--pick{color:var(--text-muted);font-size:.82rem;}

/* Right results area */
.res-content{min-width:0;}
.res-title{
  font-size:1.75rem;
  font-weight:700;
  color:#fff;
  margin:0 0 .65rem;
}
.res-divider{
  height:2px;
  background:linear-gradient(90deg,rgba(124,77,255,.7) 0%,rgba(201,75,255,.2) 60%,transparent 100%);
  margin-bottom:1.25rem;
  border-radius:2px;
}

/* Results table */
.res-table{
  width:100%;
  border-collapse:collapse;
  font-size:.84rem;
}
.res-table thead tr{
  border-bottom:1px solid rgba(255,255,255,.1);
}
.res-table th{
  padding:.55rem .75rem;
  text-align:left;
  color:var(--text-muted);
  font-weight:600;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
}
.res-table td{
  padding:.5rem .75rem;
  border-bottom:1px solid rgba(255,255,255,.04);
  color:var(--text);
  vertical-align:middle;
}
.res-table tbody tr:hover{background:rgba(255,255,255,.03);}
.res-table tbody tr:last-child td{border-bottom:none;}
.res-table__time{color:var(--text-muted);font-size:.78rem;white-space:nowrap;}
.res-table__user{color:rgba(255,255,255,.75);font-size:.8rem;font-family:monospace;}
.res-table__game{font-weight:500;}
.res-table__bet{color:var(--text-muted);}
.res-table__win{color:var(--text-muted);}
.res-table__win--pos{color:#4caf87;font-weight:600;}

/* Win / Loss badge */
.res-badge{
  display:inline-block;
  padding:.18rem .55rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
}
.res-badge--win{
  background:rgba(76,175,135,.18);
  color:#4caf87;
  border:1px solid rgba(76,175,135,.3);
}
.res-badge--loss{
  background:rgba(229,57,53,.15);
  color:#ef5350;
  border:1px solid rgba(229,57,53,.25);
}

/* Search bar */
.res-search-wrap{
  position:relative;
  margin-bottom:1rem;
}
.res-search-icon{
  position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  color:var(--text-muted);font-size:.82rem;pointer-events:none;
}
.res-search-input{
  width:100%;box-sizing:border-box;
  padding:.55rem .9rem .55rem 2.2rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  color:#fff;font-size:.88rem;
  outline:none;transition:border-color .2s;
}
.res-search-input::placeholder{color:var(--text-muted);}
.res-search-input:focus{border-color:rgba(255,255,255,.28);}

@media(max-width:768px){
  .res-layout{grid-template-columns:1fr;}
  .res-datepanel{position:static;}
  .res-datetabs{flex-direction:row;flex-wrap:wrap;}
  .res-datetab{width:auto;}
}
@media(max-width:480px){
  .res-table th:nth-child(4),.res-table td:nth-child(4){display:none}
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */

/* ============================================================
   PROFILE PAGE (BENGALI REDESIGN — Babu88 style)
   ============================================================ */

.prof-page {
  background: #f0f2f5;
  min-height: 100vh;
  padding-bottom: 80px;
}

/* Top header bar */
.prof-page-hd {
  display: flex;
  align-items: center;
  padding: 14px 16px 12px;
  background: #f0f2f5;
}
.prof-page-hd__back {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,.08);
  color: #333;
  font-size: 1rem;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .15s;
}
.prof-page-hd__back:hover { background: rgba(0,0,0,.14); }
.prof-page-hd__title {
  flex: 1;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #111;
}
.prof-page-hd__spacer { width: 36px; }

/* Balance card */
.prof-bal-card {
  margin: 0 14px 12px;
  background: linear-gradient(135deg, #1e2237 0%, #0d0f1c 100%);
  border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.prof-bal-card__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.prof-bal-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.prof-bal-icon {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, #f7971e, #ffd200);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(247,151,30,.4);
}
.prof-bal-amount {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.prof-bal-currency {
  color: #ffd200;
  font-size: 1.15rem;
  font-weight: 700;
}
.prof-bal-value {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.prof-bal-refresh {
  background: none;
  border: none;
  color: rgba(255,255,255,.45);
  font-size: .88rem;
  cursor: pointer;
  padding: 6px;
  display: flex; align-items: center;
  transition: color .2s;
  margin-left: 2px;
}
.prof-bal-refresh:hover { color: #ffd200; }
.prof-voucher-btn {
  background: linear-gradient(135deg, #f7971e, #ffd200);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(247,151,30,.35);
  transition: opacity .18s;
}
.prof-voucher-btn:hover { opacity: .88; }

/* Deposit / Withdraw quick buttons */
.prof-bal-actions {
  display: flex;
  gap: 8px;
}
.prof-bal-act-btn {
  flex: 1;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 10px;
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  padding: 9px 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .18s;
}
.prof-bal-act-btn:hover { background: rgba(255,255,255,.17); }
.prof-bal-act-btn--wd { border-color: rgba(255,100,100,.3); }

/* VIP card */
.prof-vip-card {
  margin: 0 14px 12px;
  background: #fff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.prof-vip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.prof-vip-name {
  font-size: 1rem;
  font-weight: 700;
  color: #111;
}
.prof-vip-uid {
  font-size: .75rem;
  color: #888;
  margin-top: 2px;
}
.prof-vip-badge {
  background: linear-gradient(135deg, #f7971e, #ffd200);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 20px;
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(247,151,30,.3);
}
.prof-vip-progress-wrap { margin-bottom: 10px; }
.prof-vip-progress-label {
  font-size: .78rem;
  color: #666;
  margin-bottom: 5px;
}
.prof-vip-bar {
  height: 7px;
  background: #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
}
.prof-vip-bar__fill {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
}
.prof-vip-bar__fill--done   { background: linear-gradient(90deg, #f7971e, #ffd200); width: 100%; }
.prof-vip-bar__fill--pending{ background: #e0e0e0; width: 5%; }
.prof-vip-levels-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  color: #f7971e;
  text-decoration: none;
  margin-top: 6px;
  font-weight: 600;
}
.prof-vip-levels-link:hover { opacity: .78; }

/* Menu list */
.prof-list {
  margin: 0 14px 24px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.prof-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid #f2f2f2;
  transition: background .15s;
  color: inherit;
}
.prof-list-item:last-child { border-bottom: none; }
.prof-list-item:hover, .prof-list-item:active { background: #fafafa; }
.prof-list-item--logout .prof-list-label { color: #e53935; }
.prof-list-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: .95rem;
  color: #fff;
}
.prof-list-icon--blue   { background: linear-gradient(135deg, #2d9ee0, var(--blue-btn)); }
.prof-list-icon--green  { background: linear-gradient(135deg, #26b55b, #0d9e4a); }
.prof-list-icon--orange { background: linear-gradient(135deg, #f7971e, #e6a817); }
.prof-list-icon--yellow { background: linear-gradient(135deg, #ffd200, #f7971e); }
.prof-list-icon--purple { background: linear-gradient(135deg, #7c4dff, #c94bff); }
.prof-list-icon--teal   { background: linear-gradient(135deg, #00b09b, #96c93d); }
.prof-list-icon--indigo { background: linear-gradient(135deg, #3867d6, #4776e6); }
.prof-list-icon--cyan   { background: linear-gradient(135deg, #00b4d8, #0077b6); }
.prof-list-icon--grey   { background: linear-gradient(135deg, #78909c, #546e7a); }
.prof-list-icon--red    { background: linear-gradient(135deg, #e53935, #b71c1c); }
.prof-list-label {
  flex: 1;
  font-size: .93rem;
  font-weight: 600;
  color: #222;
}
.prof-list-chevron {
  color: #c8c8c8;
  font-size: .72rem;
  flex-shrink: 0;
}
.prof-list-chevron--toggle { transition: transform .25s; }
.prof-list-item.expanded .prof-list-chevron--toggle { transform: rotate(180deg); }

/* Expandable sub-items */
.prof-list-sub {
  display: none;
  flex-direction: column;
  background: #f8f9fb;
  border-bottom: 1px solid #f2f2f2;
}
.prof-list-sub.open { display: flex; }
.prof-list-subitem {
  padding: 11px 18px 11px 70px;
  font-size: .88rem;
  color: #444;
  text-decoration: none;
  border-bottom: 1px solid #ededf0;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: background .15s;
}
.prof-list-subitem:last-child { border-bottom: none; }
.prof-list-subitem:hover { background: #f0f2f5; }
.prof-list-subitem i { color: #999; width: 14px; text-align: center; }

/* Keep old prof-btn / prof-card / prof-menu selectors intact for any other pages */
.prof-hd{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0 1rem;}
.prof-hd__title{font-size:1.5rem;font-weight:800;color:#fff;}
.prof-hd__exit{display:inline-flex;align-items:center;gap:.35rem;color:var(--accent);font-size:.9rem;font-weight:600;text-decoration:none;transition:opacity .2s;}
.prof-hd__exit:hover{opacity:.75;}

/* ============================================================
   BETTING HISTORY PAGE
   ============================================================ */

.bh-title{
  font-size:1.5rem;font-weight:800;color:#fff;
  margin:.2rem 0 1rem;
}

/* Tabs row */
.bh-tabs{
  display:flex;align-items:center;gap:.45rem;
  margin-bottom:.75rem;
  flex-wrap:wrap;
}
.bh-tab{
  padding:.5rem 1.1rem;border-radius:20px;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.75);font-size:.85rem;font-weight:600;
  cursor:pointer;transition:all .18s;
  white-space:nowrap;
}
.bh-tab:hover{background:rgba(255,255,255,.12);color:#fff;}
.bh-tab.active{
  background:var(--gradient-btn);
  border-color:transparent;
  color:#fff;
  box-shadow:var(--shadow-accent);
}
.bh-cal-btn{
  margin-left:auto;
  width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.8);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .18s;flex-shrink:0;
}
.bh-cal-btn:hover{background:rgba(255,255,255,.13);color:#fff;}
.bh-date-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0;}

/* Date badge */
.bh-date-badge{
  display:flex;align-items:center;gap:.5rem;
  background:rgba(124,77,255,.18);border:1px solid rgba(124,77,255,.4);
  border-radius:20px;padding:.3rem .8rem;
  font-size:.8rem;color:#c4aaff;font-weight:600;
  margin-bottom:.75rem;width:fit-content;
}
.bh-date-clear{
  background:none;border:none;color:rgba(255,255,255,.5);
  cursor:pointer;font-size:.85rem;padding:0;line-height:1;
  transition:color .15s;
}
.bh-date-clear:hover{color:#fff;}

/* Loading skeletons */
.bh-loading{display:flex;flex-direction:column;gap:.6rem;padding:.5rem 0;}
.bh-skeleton{
  height:88px;border-radius:var(--radius);
  background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.05) 75%);
  background-size:200% 100%;
  animation:bh-shimmer 1.4s infinite;
}
@keyframes bh-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Empty state */
.bh-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4rem 1rem;
  gap:.75rem;
}
.bh-empty__icon{
  width:88px;height:88px;border-radius:50%;
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
}
.bh-empty__title{font-size:1rem;font-weight:700;color:rgba(255,255,255,.65);}
.bh-empty__sub{font-size:.82rem;color:var(--text-muted);text-align:center;}

/* Bet cards */
.bh-list{display:flex;flex-direction:column;gap:.6rem;}
.bh-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:.85rem 1rem;
  transition:border-color .18s;
}
.bh-card:hover{border-color:rgba(124,77,255,.3);}

.bh-card__top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.6rem;
}
.bh-card__game{
  display:flex;align-items:center;gap:.5rem;
  min-width:0;
}
.bh-card__game-icon{
  color:rgba(255,255,255,.4);flex-shrink:0;
  display:flex;align-items:center;
}
.bh-card__game-name{
  font-size:.9rem;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bh-card__result{
  font-size:.88rem;font-weight:700;flex-shrink:0;padding:.2rem .6rem;
  border-radius:6px;
}
.bh-card__result--win {background:rgba(38,181,91,.15);color:#26b55b;}
.bh-card__result--loss{background:rgba(224,63,63,.15);color:#e03f3f;}
.bh-card__result--push{background:rgba(255,255,255,.08);color:rgba(255,255,255,.55);}

.bh-card__row{
  display:flex;gap:1.5rem;
  margin-bottom:.5rem;
}
.bh-card__detail{display:flex;flex-direction:column;gap:.1rem;}
.bh-card__detail-lbl{font-size:.7rem;color:var(--text-muted);}
.bh-card__detail-val{font-size:.85rem;font-weight:600;color:#fff;}
.bh-card__detail-val--win {color:#26b55b;}
.bh-card__detail-val--loss{color:#e03f3f;}

.bh-card__status{
  display:inline-block;font-size:.72rem;font-weight:700;
  padding:.15rem .5rem;border-radius:4px;
  text-transform:capitalize;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);
}
.bh-card__status--win     {background:rgba(38,181,91,.15);color:#26b55b;}
.bh-card__status--loss    {background:rgba(224,63,63,.15);color:#e03f3f;}
.bh-card__status--pending {background:rgba(255,172,12,.12);color:#ffac0c;}
.bh-card__status--settled {background:rgba(38,181,91,.12);color:#26b55b;}

.bh-card__date{
  font-size:.72rem;color:var(--text-muted);
}

/* Load more */
.bh-loadmore-wrap{text-align:center;padding:.75rem 0 .5rem;}
.bh-loadmore-btn{
  padding:.6rem 2rem;border-radius:20px;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.8);font-size:.85rem;font-weight:600;
  cursor:pointer;transition:all .18s;
}
.bh-loadmore-btn:hover{background:rgba(255,255,255,.13);color:#fff;}

/* ============================================================
   BABU88-STYLE ADDITIONS — Announcement bar, Steps, Promo, App
   ============================================================ */

/* ── Announcement / Ticker Bar ── */
.announce-bar{
  background:#022703;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
  border-radius: 10px;
  padding:.42rem 0;
  overflow:hidden;
  position:relative;
  margin:.75rem 0 0 0;
  display:flex;
  align-items:stretch;
}
.announce-bar__inner{
  display:flex;align-items:center;gap:0;width:100%;padding:0 1rem;
}
.announce-bar__label{
  background:#1a1a1a;
  color:rgba(255,255,255,.75);
  font-size:.7rem;font-weight:700;
  flex-shrink:0;letter-spacing:.04em;white-space:nowrap;
  padding:.3rem .85rem;
  border-right:1px solid rgba(255,255,255,.1);
  line-height:1.6;
  margin-right:.75rem;
}
.announce-bar__label::after{
  content:'';
}
.announce-bar__warning{
  color:var(--accent);
  font-weight:700;
  font-size:.72rem;
  flex-shrink:0;
  white-space:nowrap;
}
.announce-bar__ticker{
  flex:1;overflow:hidden;position:relative;
}
.announce-bar__text{
  white-space:nowrap;font-size:.72rem;color:rgba(255,255,255,.82);
  animation:ticker-scroll 42s linear infinite;
  display:inline-block;
}
@keyframes ticker-scroll{
  0%{transform:translateX(100vw)}
  100%{transform:translateX(-100%)}
}

/* ── Signup Steps Banner ── */
.signup-steps-img-wrap{width:100%;margin-bottom:.75rem;max-height:160px;overflow:hidden;}
.signup-steps-img-wrap img{width:100%;height:160px;object-fit:cover;display:block;border-radius:var(--radius-lg);}
@media(max-width:780px){.signup-steps-img-wrap{display:none;}}
.signup-steps{
  background:linear-gradient(90deg,#0d0d0d 0%,#111111 60%,#1a1a1a 100%);
  border-radius:var(--radius-lg);
  padding:1.25rem 1.75rem;
  display:flex;align-items:center;gap:2rem;
  border:1px solid rgba(255,194,0,.15);
  border-left:4px solid var(--accent);
  margin:.75rem 0;
  position:relative;overflow:hidden;
}
.signup-steps__cta{flex-shrink:0;}
.signup-steps__cta-title{
  font-size:1rem;font-weight:800;color:var(--accent);line-height:1.3;margin-bottom:.25rem;
}
.signup-steps__cta-sub{font-size:.72rem;color:rgba(255,255,255,.6);}
.signup-steps__cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#111;
  font-size:.82rem;font-weight:800;border:none;
  border-radius:var(--radius-sm);padding:.55rem 1.4rem;
  cursor:pointer;margin-top:.7rem;transition:opacity .2s;
  text-decoration:none;
}
.signup-steps__cta-btn:hover{opacity:.9;}
.signup-steps__divider{width:1px;height:60px;background:rgba(255,255,255,.12);flex-shrink:0;}
.signup-steps__steps{display:flex;align-items:center;gap:1.2rem;flex:1;}
.signup-step{display:flex;align-items:center;gap:.7rem;flex:1;}
.signup-step__num{
  background:var(--accent);color:#111;
  font-size:.7rem;font-weight:800;
  border-radius:4px;padding:.15rem .4rem;
  flex-shrink:0;
}
.signup-step__icon{font-size:1.4rem;flex-shrink:0;filter:brightness(0) invert(1);}
.signup-step__text{font-size:.72rem;color:rgba(255,255,255,.65);line-height:1.4;}
.signup-step__text strong{color:#ffffff;display:block;margin-bottom:.15rem;}
.signup-step__arrow{font-size:.9rem;color:rgba(255,255,255,.3);flex-shrink:0;}
@media(max-width:780px){
  .signup-steps{display:none;}
}

/* ── Promo Banners Row ── */
.promo-banners{
  display:grid;grid-template-columns:1fr 1fr;gap:.75rem;
  margin:.0rem 0;
}
.promo-banner{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  min-height:130px;display:flex;align-items:flex-end;
  padding:1.1rem 1.2rem;
  cursor:pointer;transition:transform .22s;
  text-decoration:none;
}
.promo-banner:hover{transform:translateY(-3px);}
.promo-banner--refer{
  background:linear-gradient(135deg,#1a1200 0%,#2d1f00 40%,#3b2a00 100%);
  border:1px solid rgba(255,194,0,.2);
}
.promo-banner--betting{
  background:linear-gradient(135deg,#0f0f0f 0%,#1a1a1a 50%,#222222 100%);
  border:1px solid rgba(255,255,255,.1);
}
.promo-banner__bg{
  position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.35;
}
.promo-banner__content{position:relative;z-index:1;}
.promo-banner__title{font-size:.92rem;font-weight:800;color:#fff;margin-bottom:.22rem;}
.promo-banner__sub{font-size:.72rem;color:rgba(255,255,255,.55);margin-bottom:.6rem;line-height:1.4;}
.promo-banner__btn{
  display:inline-flex;align-items:center;
  background:var(--accent);color:#111;
  font-size:.75rem;font-weight:800;border:none;
  border-radius:20px;padding:.35rem 1rem;cursor:pointer;transition:opacity .2s;
}
.promo-banner__btn:hover{opacity:.9;}
@media(max-width:640px){
  .promo-banners{grid-template-columns:1fr;}
}

/* ── Mobile App Section ── */
.app-section{
  background:linear-gradient(90deg,#111 0%,#1a1a1a 100%);
  border-radius:var(--radius-lg);
  padding:0.5rem 0.5rem;
  display:flex;align-items:center;gap:2rem;
  margin:.0.0rem 0 0.0rem;
  overflow:hidden;position:relative;
  border:1px solid rgba(255,255,255,.06);
}
.app-section__content{flex:1;z-index:1;}
.app-section__title{
  font-size:1.25rem;font-weight:800;color:#fff;
  line-height:1.3;margin-bottom:.45rem;
}
.app-section__title span{color:var(--accent);}
.app-section__sub{font-size:.8rem;color:rgba(255,255,255,.55);margin-bottom:1rem;}
.app-section__btns{display:flex;gap:.65rem;flex-wrap:wrap;}
.app-section__btn{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--accent);color:#111;
  font-size:.82rem;font-weight:800;border:none;
  border-radius:var(--radius-sm);padding:.58rem 1.2rem;
  cursor:pointer;transition:opacity .2s;text-decoration:none;
}
.app-section__btn:hover{opacity:.9;}
.app-section__btn--android{background:#fff;}
.app-section__btn svg,.app-section__btn i{font-size:1.1rem;}
.app-section__img{
  flex-shrink:0;width:200px;position:relative;z-index:1;
}
.app-section__img img{width:100%;display:block;}
@media(max-width:640px){
  .app-section{flex-direction:column;gap:1rem;padding:1.2rem;text-align:center;}
  .app-section__btns{justify-content:center;}
  .app-section__img{width:140px;}
}

/* ── Sports match cards ── */
.match-cards-wrap{position:relative;margin:.5rem 0;}
.match-cards-row{
  display:flex;flex-direction:row;flex-wrap:nowrap;gap:.7rem;
  overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;padding-bottom:.1rem;
}
.match-cards-row::-webkit-scrollbar{display:none;}
.match-cards-scroll-track{
  height:4px;background:rgba(255,194,0,.22);border-radius:2px;
  margin-top:.55rem;position:relative;overflow:hidden;
}
.match-cards-scroll-thumb{
  height:4px;background:var(--accent);border-radius:2px;
  position:absolute;left:0;top:0;transition:left .25s ease;
}
.match-card{
  flex:0 0 182px;
  background:#fff;
  border:1px solid rgba(0,0,0,.09);
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  transition:box-shadow .2s,transform .15s;
}
.match-card:hover{box-shadow:0 4px 18px rgba(255,194,0,.22);transform:translateY(-2px);}
.match-card__header{
  background:var(--accent);
  display:flex;align-items:center;gap:.4rem;
  padding:.45rem .7rem;
  min-height:32px;
}
.match-card__status{
  flex-shrink:0;
  padding:.1rem .42rem;
  border-radius:4px;
  font-size:.6rem;font-weight:800;text-transform:uppercase;
  background:#000;color:#fff !important;
}
.match-card__status--live{background:#ef4444!important;color:#fff!important;}
.match-card__status--ended{background:rgba(0,0,0,.2)!important;color:#fff!important;}
.match-card__league-name{
  font-size:.65rem;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.match-card__body{padding:.55rem .7rem .65rem;}
.match-card__time{font-size:.68rem;color:rgba(0,0,0,.42);margin-bottom:.45rem;}
.match-card__team{
  display:flex;align-items:center;gap:.5rem;
  padding:.22rem 0;
}
.match-card__badge{
  width:22px;height:22px;border-radius:50%;object-fit:contain;
  flex-shrink:0;background:rgba(0,0,0,.05);
}
.match-card__badge-init{
  width:22px;height:22px;border-radius:50%;
  background:#e8e8e8;display:flex;align-items:center;justify-content:center;
  font-size:.52rem;font-weight:800;color:#555;flex-shrink:0;
}
.match-card__team-name{font-size:.78rem;color:#fff;font-weight:600;}
.match-card__score-col{margin-left:auto;font-size:.82rem;font-weight:700;color:#fff;}
.match-card__divider{border:none;border-top:1px solid rgba(0,0,0,.07);margin:.15rem 0;}
@media(max-width:900px){.match-card{flex:0 0 168px;}}
@media(max-width:640px){.match-card{flex:0 0 58vw;max-width:200px;}}

/* ── Hot game badge ── */
.game-card__hot-badge{
  position:absolute;top:.3rem;right:.3rem;z-index:4;
  background:linear-gradient(135deg,#ff4500,#ff6600);
  color:#fff;border-radius:4px;
  font-size:.49rem;font-weight:800;text-transform:uppercase;
  padding:.1rem .3rem;letter-spacing:.04em;
  display:flex;align-items:center;gap:2px;
}

/* ── Section title update ── */
.game-section-title{
  font-size:1.2rem;font-weight:900;color:#111111;
  display:flex;align-items:center;gap:.5rem;
}
.game-section-all{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.82rem;font-weight:600;color:var(--accent);
  transition:color .2s;
}
.game-section-all:hover{color:var(--accent-2);}

/* ── Bottom nav yellow active ── */
.bottom-nav{
  background:#111111;border-top:1px solid rgba(255,255,255,.08);
}

/* ============================================================
   BABU88 FOOTER EXTENDED — Ambassador, Sponsorship, Payments
   ============================================================ */

/* Babu88-exact footer sections */
.footer-section{
  padding:1.25rem 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-section:last-of-type{border-bottom:none;}
.footer-section__title{
  font-size:.7rem;font-weight:800;color:var(--accent);
  text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:.85rem;
}
.footer-ambassador-grid{
  display:flex;gap:2.5rem;flex-wrap:wrap;align-items:center;
}
.footer-ambassador{
  display:flex;flex-direction:column;gap:.18rem;
}
.footer-ambassador__name{font-size:.85rem;font-weight:700;color:#fff;}
.footer-ambassador__year{font-size:.65rem;color:#999;}
.footer-sponsor-grid{
  display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center;
}
.footer-sponsor{
  display:flex;align-items:center;gap:.5rem;
  background:rgba(0, 0, 0, .87);border-radius:8px;
  padding:.4rem .75rem;border:1px solid rgba(255,255,255,.07);
}
.footer-sponsor__icon{width:24px;height:24px;object-fit:contain;border-radius:4px;}
.footer-sponsor__info{display:flex;flex-direction:column;}
.footer-sponsor__name{font-size:.78rem;font-weight:700;color:#fff;line-height:1.2;}
.footer-sponsor__year{font-size:.6rem;color:#888;}
.footer-payment-grid{
  display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;
}
.footer-payment-item{
  height:28px;display:flex;align-items:center;
  background:rgba(0, 0, 0, .87);border-radius:6px;
  padding:.25rem .65rem;border:1px solid rgba(255,255,255,.08);
}
.footer-payment-item span{font-size:.72rem;font-weight:700;color:#ccc;}
.footer-responsible-grid{
  display:flex;gap:.75rem;align-items:center;
}
.footer-responsible-badge{
  display:flex;align-items:center;gap:.35rem;
  background:rgba(0, 0, 0, .87);border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:.35rem .7rem;
  font-size:.72rem;color:#aaa;
}
.footer-responsible-badge span{font-size:1.1rem;}
.footer-bottom-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.15rem 0 .5rem;flex-wrap:wrap;gap:.75rem;
}
.footer-bottom-brand{display:flex;flex-direction:column;align-items:flex-start;}
.footer-bottom-brand__name{
  font-size:1rem;font-weight:900;color:var(--accent);letter-spacing:.01em;
}
.footer-bottom-brand__tag{font-size:.7rem;color:var(--accent);margin-top:.1rem;}
.footer-bottom-copy{font-size:.68rem;color:#666;line-height:1.7;max-width:480px;}
.footer-social-row{
  display:flex;gap:.5rem;align-items:center;
}
.footer-social-btn{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  color:#ccc;font-size:.95rem;transition:all .2s;
  text-decoration:none;
}
.footer-social-btn:hover{background:rgba(255,194,0,.15);color:var(--accent);border-color:rgba(255,194,0,.3);}
.footer-seo-section{
  background:#111;padding:1.25rem 0;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:.78rem;color:#888;line-height:1.8;
}
.footer-seo-section a{color:var(--accent);text-decoration:underline;font-size:.78rem;}
.footer-seo-section h3{font-size:.85rem;font-weight:700;color:var(--accent);margin-bottom:.5rem;}
.seo-intro{margin-bottom:.75rem;}
.seo-intro h3{font-size:.9rem;font-weight:700;color:var(--accent);margin-bottom:.4rem;}
.seo-section-title{font-size:.9rem;font-weight:700;color:var(--accent);margin-bottom:.75rem;padding-bottom:.4rem;border-bottom:1px solid rgba(255,194,0,.2);}
.seo-expanded{display:none;margin-top:.75rem;}
.seo-expanded.open{display:block;}
.seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.seo-col h3{font-size:.82rem;font-weight:700;color:var(--accent);margin:0 0 .3rem;}
.seo-col p{font-size:.76rem;color:#999;line-height:1.75;margin-bottom:.9rem;}
.seo-toggle{
  display:inline-block;margin-top:.6rem;
  color:var(--accent);text-decoration:underline;
  font-size:.78rem;cursor:pointer;
}
@media(max-width:780px){
  .seo-grid{grid-template-columns:1fr;}
}

/* ── HOT / NEW game badge ── */
.game-card__label-badge{
  position:absolute;top:.3rem;left:.3rem;z-index:4;
  border-radius:4px;padding:.1rem .38rem;
  font-size:.52rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;
}
.game-card__label-badge--hot{
  background:#22c55e;color:#fff;
  border-radius:50%;width:22px;height:22px;padding:0;
  display:flex;align-items:center;justify-content:center;font-size:.45rem;
}
.game-card__label-badge--new{
  background:#22c55e;color:#fff;
  border-radius:50%;width:22px;height:22px;padding:0;
  display:flex;align-items:center;justify-content:center;font-size:.45rem;
}

/* ── Babu88 Section title with yellow bar ── */
.bb-section-title{
  font-size:1.15rem;font-weight:800;color:#fff;
  margin-bottom:.8rem;
}

/* ── Desktop nav: fix right-side cropping ─────────────────────────────────
   • 781–1023px : nav-row scrolls horizontally (dropdowns hidden here)
   • 1024–1339px: compact font+padding so all items fit without clipping
   ──────────────────────────────────────────────────────────────────────── */
@media(min-width:781px) and (max-width:1023px){
  .header__nav-row{overflow-x:auto;}
}
@media(min-width:1024px) and (max-width:1339px){
  .header__nav{gap:0;}
  .nav-link{font-size:.68rem;padding:.3rem .33rem;}
}

/* ── HOT badge (game) on thumb ── */
.game-card__hot-badge{
  position:absolute;top:.3rem;right:.3rem;z-index:4;
  background:#22c55e;color:#fff;
  border-radius:50%;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  font-size:.48rem;font-weight:900;text-transform:uppercase;letter-spacing:.02em;
  box-shadow:0 2px 8px rgba(34,197,94,.45);
}

/* Hero banner CTA exact Babu88 style */
.banner-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.6rem 1.75rem;border-radius:6px;
  background:var(--accent);color:#111111;
  font-size:.85rem;font-weight:800;
  box-shadow:0 4px 18px rgba(255,194,0,.35);width:fit-content;
  transition:opacity .2s,transform .2s;
}
.banner-cta:hover{opacity:.92;transform:translateY(-1px)}

/* Provider chip exact Babu88 */
.provider-chip{
  display:block;padding:.65rem .55rem;border-radius:var(--radius-sm);
  background:#1a1a1a;border:1px solid rgba(255,255,255,.1);
  text-align:center;font-size:.72rem;font-weight:700;color:#bbb;
  transition:all .2s;cursor:pointer;
}
.provider-chip:hover,.provider-chip.active{
  color:#111;border-color:var(--accent);
  background:var(--accent);
}

/* Babu88-style section header yellow line  */
.game-section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.8rem;padding-bottom:.6rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}

/* ── Game Category Tabs ── */
.game-cat-tabs{
  display:flex;align-items:center;gap:.15rem;
  padding:.45rem .6rem;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:#fff;
  border-bottom:3px solid var(--accent);
}
.game-cat-tabs::-webkit-scrollbar{display:none;}
.game-cat-tab{
  display:flex;flex-direction:row;align-items:center;gap:.32rem;
  flex-shrink:0;padding:.42rem .88rem;border-radius:50px;
  text-decoration:none;transition:background .18s,color .18s;
  color:#444;
  background:transparent;
  border:none;
  cursor:pointer;
  font-family:inherit;
  min-width:auto;
}
.game-cat-tab__icon{font-size:1.1rem;line-height:1;}
.game-cat-tab__label{font-size:.75rem;font-weight:700;white-space:nowrap;color:inherit;}
.game-cat-tab--active{
  background:var(--accent);color:#1a1a1a;
}
/* Tab panel show/hide */
.game-section--tab-panel{display:none;}
.game-section--tab-active{display:block;}

/* ── Mobile home overrides ── */
@media(max-width:640px){
  .hero-section{overflow:hidden;}
  .banner-slider{border-radius:12px;margin:0 auto;width:calc(100% - 0.8rem);}
  .games-grid--5col{grid-template-columns:repeat(3,1fr)!important;}
  /* show section heads for anchor-targeted game sections */
  #slots-section .game-section-head,
  #casino-section .game-section-head,
  #fishing-section .game-section-head,
  #crash-section .game-section-head,
  #inout-section .game-section-head,
  #hot-games .game-section-head{display:flex;}
  /* hide generic game-section-head (non-anchored) */
  .game-section-head{display:none;}
}

/* ── Mobile Balance Bar ────────────────────────────────────────── */
#mobileBalanceBar{display:none;}
@media(max-width:767px){
  #mobileBalanceBar{display:block;}
}
.mob-bal-bar{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background: #f3f5f6;
  padding:.6rem 1rem;
  gap:.5rem;
}
.mob-bal-bar__left{
  display:flex;flex-direction:column;gap:.18rem;flex:1;min-width:0;
}
.mob-bal-bar__hi{
  font-size:.75rem;font-weight:600;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mob-bal-bar__amount-row{
  height: 25px;
  width: 170px;
  background: #fff;
  border-radius: 5px;
  display:flex;align-items:center;gap:.4rem;
}
.mob-bal-bar__amount{
  font-size:.88rem;font-weight:700;color:#000;
}
.mob-bal-bar__refresh{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;
  border-radius:50%;
  background:rgba(255,194,0,.15);
  border:1.5px solid rgba(255,194,0,.45);
  cursor:pointer;
  color:var(--accent);
  font-size:.6rem;
  padding:0;
  flex-shrink:0;
  outline:none;
  margin-left: 100px;
}
.mob-bal-bar__refresh:active{transform:rotate(180deg);transition:transform .4s;}
.mob-bal-bar__actions{
  display:flex;align-items:center;gap:.9rem;flex-shrink:0;
}
.mob-bal-bar__action{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
}
.mob-bal-bar__icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  text-decoration:none;
  background:#1e1e1e;
  color:var(--accent);
  font-size:.95rem;
  border-radius:10px;
  transition:background .2s;
}
.mob-bal-bar__icon-btn img{width:20px;height:20px;object-fit:contain;}
.mob-bal-bar__icon-btn:hover{background:#2a2422;}
.mob-bal-bar__label{
  font-size:.56rem;color:#000;font-weight:600;white-space:nowrap;
}

/* ============================================================
   PAGE-SPECIFIC STYLES
   ============================================================ */

/* ============================================================
   HOME PAGE
   ============================================================ */

.mob-livechat-fab{
  display:flex;
  position:fixed;
  bottom:calc(var(--nav-h,60px) + 14px);
  right:14px;
  width:60px;height:60px;
  border-radius:50%;
  background: #ffce01;
  box-shadow:0 4px 18px rgba(0,0,0,.45);
  border:none;cursor:pointer;
  padding:8px 4px 6px;
  gap:3px;
  z-index:300;
  flex-direction:column;
  align-items:center;justify-content:center;
  transition:transform .15s,box-shadow .15s;
}
.mob-livechat-fab img{width:36px;height:36px;object-fit:contain;flex-shrink:0;}
.mob-livechat-fab span{color:#fff;font-size:.55rem;font-weight:700;letter-spacing:.03em;white-space:nowrap;line-height:1;}
.mob-livechat-fab:active{transform:scale(.92);box-shadow:0 2px 8px rgba(0,0,0,.3);}
@media(max-width:767px){.mob-livechat-fab{display:flex;}}
.mob-wof-fab{
  position:fixed;bottom:150px;right:12px;
  width:70px;height:70px;
  display:block;
  cursor:pointer;z-index:9998;
  border:none;background:none;padding:0;
}
.mob-wof-fab img{width:100%;height:100%;object-fit:contain;display:block;}

#promoPopupOverlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.75);
  z-index:99999;
  align-items:center;
  justify-content:center;
  padding:16px;
}
#promoPopupOverlay.active{ display:flex; }
#promoPopupBox{
  position:relative;
  max-width:360px;
  width:100%;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.7);
  animation:promoPopIn .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes promoPopIn{
  from{opacity:0;transform:scale(.82);}
  to{opacity:1;transform:scale(1);}
}
#promoPopupHeader{
  background:#1a1a2e;
  padding:12px 46px 12px 16px;
  font-size:1rem;
  font-weight:700;
  color:#fff;
  letter-spacing:.02em;
}
#promoPopupImg{
  display:block;
  width:100%;
  height:auto;
}
#promoPopupClose{
  position:absolute;
  top:8px;right:8px;
  width:30px;height:30px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.15);
  color:#fff;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
  z-index:1;
}
#promoPopupClose:hover{ background:rgba(255,255,255,.35); }

@media(max-width:480px){
  #promoPopupBox{max-width:260px;border-radius:10px;}
  #promoPopupHeader{font-size:.82rem;padding:9px 40px 9px 12px;}
}

/* ============================================================
   BETTING PASS PAGE
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   BETTING PASS PAGE
══════════════════════════════════════════════════════════ */
.bp-page {
  background: url('/assets/b_pass/background.jpg') center top / cover fixed;
  min-height: 100vh;
  padding-bottom: 80px;
  font-family: 'Hind Siliguri', sans-serif;
  position: relative;
  isolation: isolate;
}
.bp-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  pointer-events: none;
  z-index: -1;
}
@media(min-width:1024px) {
  .bp-page::before {
    position: absolute;
  }
}

/* ── Banner Section ──────────────────────────────────────── */
.bp-banner-wrap {
  background: transparent;
  padding: 48px 3% 40px;
  position: relative;
  overflow: visible;
}

.bp-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* Left section */
.bp-left-section {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.bp-tiger-float {
  flex-shrink: 0;
  width: 170px;
  display: block;
  align-self: flex-end;
  pointer-events: none;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.7));
  position: relative;
  z-index: 3;
  margin-right: -45px;
}
@media(max-width:900px){ .bp-tiger-float { width:110px; } }
@media(max-width:599px){ .bp-tiger-float { display:none; } }

.bp-banner-card {
  background: url('/assets/b_pass/banner.png') right center / cover no-repeat;
  border-radius: 16px;
  overflow: hidden;
  flex: 1;
  width: 100%;
  min-height: 280px;       /* desktop default */
  max-height: 340px;
  position: relative;
}
/* ── Tablet (600–899px) ── */
@media(min-width:600px) and (max-width:899px){
  .bp-banner-card { min-height: 220px; max-height: 260px; border-radius: 14px; }
  .bp-banner-wrap { padding: 24px 3% 20px; }
}
/* ── Desktop banner layout (≥1024px) ── */
@media(min-width:1024px){
  /* Break deskAcc-layout constraints for this page */
  .bp-page .deskAcc-layout {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
  }
  .bp-page .deskAcc-right { width: 100% !important; min-width: 0; border-radius: 10px;}

  .bp-banner-wrap  { padding: 40px 3% 36px; }
  .bp-banner-inner { max-width: 1320px; margin: 0 auto; }
  .bp-banner-card  { min-height: 300px; max-height: 360px; border-radius: 16px; }
  .bp-tiger-float  { display: block; width: 170px; }
  .bp-right-section { flex: 0 0 290px; }
}
/* ── Large desktop (≥1200px) ── */
@media(min-width:1200px){
  .bp-banner-card   { min-height: 320px; max-height: 400px; }
  .bp-right-section { flex: 0 0 320px; }
  .bp-tiger-float   { width: 190px; }
}
.bp-banner-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
}

.bp-banner-text {
  position: relative;
  z-index: 2;
  padding: 28px 28% 28px 24px;
}
@media(max-width:900px){ .bp-banner-text { padding: 24px 20% 24px 20px; } }
@media(max-width:599px){ .bp-banner-text { padding: 20px 45% 20px 16px; } }

.bp-banner-title1 {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 6px;
}
.bp-banner-title2 {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 12px;
}
@media(max-width:599px){
  .bp-banner-title1 { font-size: 1.25rem; }
  .bp-banner-title2 { font-size: .88rem; margin-bottom: 0; }
}
.bp-banner-desc {
  font-size: .82rem;
  color: #ccc;
  line-height: 1.75;
}
@media(max-width:599px){ .bp-banner-desc { display:none; } }

/* Right section: card + treasure below */
.bp-right-section {
  flex: 0 0 270px;
  display: flex;
  flex-direction: column;
  margin-left: 16px;
  position: relative;
}
@media(max-width:900px){ .bp-right-section { flex: 0 0 230px; margin-left: 12px; } }
@media(max-width:599px){ .bp-right-section { flex: none; width: 100%; margin-left: 0; margin-top: 14px; } }

.bp-progress-card {
  background: #1a1a20;
  border: 1.5px solid rgba(255,255,255,.45);
  border-radius: 16px;
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

/* Treasure chest — absolute bottom-right overlapping card corner */
.bp-treasure-float {
  display: block;
  width: 180px;
  position: absolute;
  bottom: -80px;
  right: -84px;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.6));
}
@media(max-width:599px){ .bp-treasure-float { display: none; } }

/* Guest state */
.bp-guest-text {
  font-size: .84rem;
  color: #ddd;
  line-height: 1.65;
}
.bp-register-btn {
  width: 100%;
  padding: 12px;
  background: var(--blue-btn);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .92rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s;
}
.bp-register-btn:hover { background: var(--blue-btn-hover); }
.bp-login-btn {
  width: 100%;
  padding: 12px;
  background: var(--accent-2);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .92rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s;
}
.bp-login-btn:hover { background: #cc9600; }

/* Logged-in state */
.bp-progress-heading {
  font-size: .88rem;
  color: #fff;
  font-weight: 700;
}
.bp-hex-wrap { display:flex; justify-content:center; }
.bp-hex {
  width: 74px;
  height: 84px;
  background: var(--accent-2);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-hex span { font-size:2.1rem; font-weight:700; color:#fff; line-height:1; }
.bp-bar-label { font-size:.82rem; color:#fff; font-weight:600; }
.bp-bar-amount { font-size:.82rem; color:#fff; font-weight:700; white-space:nowrap; }
.bp-bar-row { display:flex; justify-content:space-between; align-items:center; gap:6px; }
.bp-progress-bar {
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  overflow: hidden;
  margin: 6px 0 4px;
}
.bp-progress-bar-fill {
  height: 100%;
  background: var(--accent-2);
  width: 0%;
  border-radius: 999px;
  transition: width .6s ease;
}
.bp-level-nodes { display:flex; justify-content:space-between; }
.bp-level-nodes span { font-size:.78rem; color:#ccc; font-weight:600; }
.bp-deposit-note { font-size:.82rem; color:#fff; font-weight:700; line-height:1.55; }
.bp-deposit-btn {
  width: 100%;
  padding: 13px;
  background: #0ab4e8;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s;
}
.bp-deposit-btn:hover { background: #0899c8; }

/* Desktop default: bp-mobile-hex-bar is just a plain block */
.bp-mobile-hex-bar { display: block; }
.bp-mobile-bar-col { display: block; }

/* ── Mobile layout overrides (≤599px) ───────────────────── */
@media(max-width:599px) {
  .bp-banner-wrap { padding: 16px 4% 0; }

  .bp-banner-inner { flex-direction: column; align-items: stretch; }

  .bp-banner-card { min-height: 170px; max-height: 210px; width: 100%; border-radius: 14px; }

  /* Desktop hex (centered) hidden on mobile */
  .bp-hex-wrap { display: none !important; }

  /* Mobile hex (inside bp-mobile-hex-bar) shown on mobile */
  #bpMobileHex { display: flex !important; }

  /* Mobile hex+bar row layout */
  .bp-mobile-hex-bar {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .bp-mobile-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .bp-prizes-section { margin-top: 20px; }
}

/* ── Prize Grid ──────────────────────────────────────────── */
.bp-prizes-section {
  max-width: 1200px;
  margin: 36px auto 0;
  padding: 0 3%;
}

.bp-prizes-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media(max-width:1023px){ .bp-prizes-grid { grid-template-columns: repeat(3, 1fr); } }

/* Mobile: single horizontal scrollable row */
@media(max-width:599px) {
  .bp-prizes-section { padding: 0 4%; }
  .bp-prizes-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 10px;
    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-2) rgba(255,255,255,.12);
  }
  /* WebKit scrollbar */
  .bp-prizes-grid::-webkit-scrollbar { height: 5px; }
  .bp-prizes-grid::-webkit-scrollbar-track {
    background: rgba(255,255,255,.12);
    border-radius: 999px;
  }
  .bp-prizes-grid::-webkit-scrollbar-thumb {
    background: var(--accent-2);
    border-radius: 999px;
  }
  .bp-prizes-grid .bp-prize-card {
    flex: 0 0 155px;
    min-width: 155px;
  }
}

/* Prize card */
.bp-prize-card {
  background: linear-gradient(180deg, #131314 0%, #1a1a23 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .2s;
}
.bp-prize-card:hover {
  border-color: rgba(230,168,0,.4);
  transform: translateY(-2px);
}
.bp-prize-card.bp-claimed  { border-color: #28a745; }
.bp-prize-card.bp-eligible { border-color: var(--accent-2); }

.bp-prize-inner {
  padding: 14px 12px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.bp-prize-level {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 700;
  color: #f5c518;
  letter-spacing: .04em;
}
.bp-prize-level::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe066 0%, var(--accent-2) 60%, #a07000 100%);
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(230,168,0,.5);
}

.bp-prize-img-wrap {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-prize-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media(max-width:599px){
  .bp-prize-img-wrap { width:56px; height:56px; }
}

.bp-prize-name {
  font-size: .78rem;
  font-weight: 600;
  color: #eee;
  line-height: 1.4;
  min-height: 2.4em;
}

.bp-prize-divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: 2px 0;
}

.bp-prize-req {
  font-size: .82rem;
  font-weight: 700;
  color: #aaa;
}

.bp-claim-btn {
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,.08);
  border: none;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #888;
  font-size: .8rem;
  font-weight: 700;
  font-family: inherit;
  cursor: not-allowed;
  transition: background .2s, color .2s;
}
.bp-claim-btn.eligible {
  background: var(--accent-2);
  color: #fff;
  cursor: pointer;
}
.bp-claim-btn.eligible:hover { background: #cc9600; }
.bp-claim-btn.claimed {
  background: #28a745;
  color: #fff;
  cursor: default;
}

/* ── Pagination ──────────────────────────────────────────── */
.bp-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.bp-page-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #1e1e30;
  color: #ccc;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
  font-family: inherit;
}
.bp-page-btn:hover { background: #2a2a45; color: #fff; }
.bp-page-btn.active {
  background: var(--accent-2);
  color: #fff;
}
.bp-page-btn:disabled { opacity:.35; cursor:not-allowed; }
.bp-page-btn { display:flex; align-items:center; justify-content:center; }
.bp-page-ellipsis {
  color: #555;
  font-size: .85rem;
  padding: 0 2px;
}

/* ============================================================
   BONUSES PAGE
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   BONUSES PAGE — overrides bonus.css (which loads before us)
   KEY: bonus.css uses .bonus-card.horizontal .xxx (0,2,0 spec)
   so we must match that specificity or use !important.
   ═══════════════════════════════════════════════════════════ */

/* ── Page base ───────────────────────────────────────────── */

/* ── Page title / subtitle (hidden) ─────────────────────── */
main.main-content .page-title  { display:none !important; }
main.main-content .page-subtitle { display:none !important; }

/* ── Main content ────────────────────────────────────────── */
.main-content {
    max-width:1200px !important;
    margin:0 auto !important;
    padding:1rem 1rem 1rem !important;
    box-sizing:border-box;
    width:100%;
}

/* ── Category filter ─────────────────────────────────────── */
.category-filter {
    display:flex !important;
    align-items:center !important;
    gap:.35rem !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none;
    -ms-overflow-style:none;
    background:#fff !important;
    padding:.7rem 1rem !important;
    border-radius:10px !important;
    margin-bottom:1.25rem !important;
    box-shadow:0 1px 4px rgba(0,0,0,.08) !important;
}
.category-filter::-webkit-scrollbar { display:none; }

.category-btn {
    background:transparent !important;
    color:#333 !important;
    border:none !important;
    padding:.45rem 1.1rem !important;
    border-radius:2rem !important;
    font-size:.88rem !important;
    font-weight:600 !important;
    cursor:pointer;
    white-space:nowrap;
    flex-shrink:0;
    transition:background .15s, color .15s;
    box-shadow:none !important;
    transform:none !important;
    animation:none !important;
}
.category-btn::before { display:none !important; }
.category-btn:hover {
    background:#f0f0f0 !important;
    color:#111 !important;
    transform:none !important;
    box-shadow:none !important;
}
.category-btn.active {
    background:#FFD700 !important;
    color:#111 !important;
    font-weight:700 !important;
    border-color:transparent !important;
    box-shadow:none !important;
    transform:none !important;
}

/* ── Bonus grid ──────────────────────────────────────────── */
.bonus-grid {
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:1.25rem !important;
    margin-bottom:2rem !important;
}

/* ═══ CARD ════════════════════════════════════════════════ */
/* Reset base card (specificity 0,1,0 — but bonus.css doesn't
   style .bonus-card directly with dark rules here) */
.bonus-card {
    background:#fff !important;
    border-radius:12px !important;
    border:1px solid #e4e4e4 !important;
    box-shadow:0 2px 8px rgba(0,0,0,.07) !important;
    overflow:hidden !important;
    padding:0 !important;
    position:relative;
    transition:box-shadow .2s, transform .2s;
    animation:none !important;
}
.bonus-card::before { display:none !important; }
.bonus-card:hover {
    box-shadow:0 6px 20px rgba(0,0,0,.11) !important;
    transform:translateY(-2px) !important;
}

/* Horizontal variant layout — own column (override bonus.css row) */
.bonus-card.horizontal {
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    align-items:stretch !important;
}
.bonus-card.horizontal::before { display:none !important; }
.bonus-card.horizontal:hover {
    transform:translateY(-2px) !important;
    border-color:#d8d8d8 !important;
}

/* ═══ BANNER ══════════════════════════════════════════════
   .bonus-card.horizontal .bonus-banner  →  0,2,0 in bonus.css
   We match that specificity here so our rules win (later source).
   ════════════════════════════════════════════════════════ */
.bonus-card.horizontal .bonus-banner,
.bonus-card .bonus-banner,
.bonus-banner {
    width:100% !important;
    min-height:unset !important;
    aspect-ratio:unset !important;
    overflow:hidden !important;
    flex-shrink:0 !important;
    background:#ddd;                /* placeholder — no !important so inline style wins */
    border-radius:0 !important;
    line-height:0;
    display:block !important;
    margin-bottom:0 !important;
    position:relative;
    transition:none !important;
    transform:none !important;
    box-shadow:none !important;
}
/* Remove shimmer overlay from bonus.css */
.bonus-banner::before,
.bonus-card.horizontal .bonus-banner::before {
    display:none !important;
    content:none !important;
    animation:none !important;
}
.bonus-banner:hover,
.bonus-card.horizontal .bonus-banner:hover {
    transform:none !important;
    box-shadow:none !important;
}

/* Banner image
   main.main-content img has specificity 0,1,2 in bonus.css — beat it */
.bonus-banner img,
.bonus-card.horizontal .bonus-banner img,
main.main-content .bonus-banner img {
    width:100% !important;
    height:auto !important;
    display:block !important;
    object-fit:cover !important;
    border-radius:0 !important;
    transition:none !important;
    transform:none !important;
    box-shadow:none !important;
}
.bonus-banner:hover img,
main.main-content .bonus-banner img:hover,
main.main-content img:hover {
    transform:none !important;
    box-shadow:none !important;
}

/* Fallback when no image */
.bonus-banner:not(.has-image) {
    display:flex !important;
    align-items:center;
    justify-content:center;
    font-size:3rem;
    min-height:130px !important;
}

/* ═══ DETAILS ════════════════════════════════════════════
   .bonus-card.horizontal .bonus-details  →  0,2,0 in bonus.css
   ════════════════════════════════════════════════════════ */
.bonus-card.horizontal .bonus-details,
.bonus-details {
    padding:1rem 1.1rem !important;
    display:flex !important;
    flex-direction:column !important;
    gap:.45rem !important;
    background:#fff !important;
    border-radius:0 !important;
    border:none !important;
    box-shadow:none !important;
    overflow:visible !important;
    flex:1 !important;
    width:100% !important;
}

/* ═══ TITLE ══════════════════════════════════════════════
   .bonus-card.horizontal .bonus-title  →  0,2,0 in bonus.css
   ════════════════════════════════════════════════════════ */
.bonus-card.horizontal .bonus-title,
.bonus-title {
    font-size:1rem !important;
    font-weight:800 !important;
    color:#111 !important;
    margin:0 0 .2rem !important;
    background:none !important;
    -webkit-background-clip:unset !important;
    -webkit-text-fill-color:#111 !important;
    background-clip:unset !important;
    line-height:1.35 !important;
}

/* ═══ DESCRIPTION ════════════════════════════════════════
   .bonus-card.horizontal .bonus-description  →  0,2,0
   ════════════════════════════════════════════════════════ */
.bonus-card.horizontal .bonus-description,
.bonus-description {
    font-size:.82rem !important;
    color:#555 !important;
    margin:0 !important;
    line-height:1.5 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
}

/* Terms hidden */
.bonus-terms,
.bonus-card.horizontal .bonus-terms { display:none !important; }

/* Hidden by filter — beats all display:flex/block !important layout rules */
.bonus-card.bonus-hidden { display:none !important; }

/* ═══ BUTTONS ════════════════════════════════════════════ */
.btn-row {
    display:flex !important;
    gap:.5rem !important;
    margin-top:.4rem !important;
}
.btn-row button { flex:1 !important; }

.claim-button,
.read-more-button {
    border:none !important;
    border-radius:6px !important;
    padding:.6rem .75rem !important;
    font-size:.82rem !important;
    font-weight:700 !important;
    cursor:pointer !important;
    white-space:nowrap;
    transition:opacity .15s !important;
    position:static !important;
    overflow:visible !important;
    box-shadow:none !important;
    width:auto !important;
    animation:none !important;
    transform:none !important;
}
.claim-button::before,
.read-more-button::before { display:none !important; content:none !important; }
.claim-button:hover, .read-more-button:hover { opacity:.85 !important; transform:none !important; }
.claim-button:active, .read-more-button:active { filter:brightness(.9); }

/* Details button — blue */
.read-more-button {
    background:#1976d2 !important;
    color:#fff !important;
    margin:0 !important;
}
.read-more-button:hover {
    background:var(--blue-btn) !important;
    opacity:1 !important;
}

/* Claim button — yellow */
.claim-button:not(.read-more-button) {
    background:#FFD700 !important;
    color:#111 !important;
}
.claim-button:not(.read-more-button):hover {
    background:var(--accent) !important;
    opacity:1 !important;
}

/* ── Info section ────────────────────────────────────────── */
.info-section {
    background:#fff !important;
    border-radius:12px !important;
    padding:1.5rem !important;
    margin-bottom:2rem !important;
    border:1px solid #e4e4e4 !important;
    box-shadow:0 2px 8px rgba(0,0,0,.06) !important;
    animation:none !important;
}
.info-section h2 {
    color:#111 !important;
    margin-bottom:1rem !important;
    font-size:1.2rem !important;
    font-weight:800 !important;
    background:none !important;
    -webkit-background-clip:unset !important;
    -webkit-text-fill-color:#111 !important;
    background-clip:unset !important;
}
.info-section p  { color:#444 !important; line-height:1.8; margin-bottom:1rem; }
.info-section ul { color:#444 !important; line-height:1.8; margin-left:1.5rem; }

/* ── Overflow guard ──────────────────────────────────────── */
html { max-width:100%; overflow-y:auto; }
body { max-width:100%; overflow-x:hidden; }

/* ── Mobile promo header — hidden on desktop ─────────────── */
.promo-page-header { display:none; }

/* ── Mobile category dropdown — hidden on desktop ─────────── */
.category-select-wrap { display:none; }

/* ── Tablet (<=900px) ────────────────────────────────────── */
@media (max-width:900px) {
    .bonus-grid { grid-template-columns:repeat(2,1fr) !important; gap:1rem !important; }
    .main-content { padding:.75rem .75rem 8rem !important; }
}

/* ── Mobile (<=640px) ────────────────────────────────────── */
@media (max-width:640px) {
    .main-content { padding:.75rem .75rem 0.75rem !important; }
    .bonus-grid { grid-template-columns:1fr !important; gap:.85rem !important; }
    /* hide scrollable pills → show dropdown */
    .category-filter { display:none !important; }
    /* ── Promo page header ──────────────────────────────────── */
    .promo-page-header {
        display:flex !important;
        align-items:center;
        justify-content:space-between;
        background:#fff;
        padding:.85rem 1rem;
        margin-bottom:0;
        position:relative;
        overflow:hidden;
        min-height:72px;
        border-bottom:1px solid #eee;
    }
    .promo-page-header-text {
        font-size:1.1rem;
        font-weight:800;
        color:#111;
        z-index:1;
        line-height:1.3;
    }
    .promo-page-header-art {
        position:absolute;
        right:0; top:0; bottom:0;
        width:55%;
        pointer-events:none;
        z-index:0;
        /* Decorative sparkle/star pattern using CSS */
        background:
            radial-gradient(ellipse 80% 90% at 100% 50%, rgba(255,215,0,.08) 0%, transparent 70%);
    }
    .promo-page-header-art::before {
        content:'⭐ 🏆 ⭐';
        position:absolute;
        right:1rem; top:50%;
        transform:translateY(-50%);
        font-size:1.6rem;
        opacity:.55;
        letter-spacing:.4rem;
        white-space:nowrap;
    }
    .promo-page-header-art::after {
        content:'✦ ✦ ✦';
        position:absolute;
        right:.5rem; top:.4rem;
        font-size:.7rem;
        opacity:.3;
        letter-spacing:.6rem;
        color:#999;
    }
    /* ── Dropdown ───────────────────────────────────────────── */
    .category-select-wrap {
        display:inline-block !important;
        position:relative;
        margin:0 0 .85rem !important;
        padding:.6rem 0 0 0;
        width:auto;
    }
    .category-select {
        width:auto !important;
        min-width:0 !important;
        max-width:140px !important;
        -webkit-appearance:none !important;
        appearance:none !important;
        background:#1976d2 !important;
        color:#fff !important;
        border:none !important;
        outline:none !important;
        padding:.72rem 2.2rem .72rem .85rem !important;
        border-radius:8px !important;
        font-size:.88rem !important;
        font-weight:700 !important;
        cursor:pointer;
        box-shadow:0 2px 8px rgba(25,118,210,.35) !important;
    }
    .category-select option {
        background:#fff !important;
        color:#111 !important;
        font-weight:600;
    }
    .category-select-arrow {
        position:absolute !important;
        right:.55rem !important;
        top:calc(50% + .3rem) !important;
        transform:translateY(-50%) !important;
        color:#fff !important;
        pointer-events:none;
        font-size:.7rem !important;
        line-height:1;
    }
    /* ── Card/banner/button rules on mobile ─────────────────── */
    .bonus-card { border-radius:10px !important; }
        /* Full banner image within card on mobile */
    .bonus-banner.has-image,
    .bonus-card.horizontal .bonus-banner.has-image,
    .bonus-card .bonus-banner.has-image {
        aspect-ratio:unset !important;
        max-height:none !important;
        height:auto !important;
        width:100% !important;
        overflow:hidden !important;
    }
    .bonus-banner img,
    .bonus-card.horizontal .bonus-banner img,
    main.main-content .bonus-banner img {
        width:100% !important;
        height:auto !important;
        object-fit:fill !important;
        display:block !important;
    }
    /* No-image banners: compact colored block */
    .bonus-banner:not(.has-image),
    .bonus-card.horizontal .bonus-banner:not(.has-image) {
        aspect-ratio:unset !important;
        max-height:none !important;
        min-height:100px !important;
    }
    .bonus-card.horizontal .bonus-title,
    .bonus-title { font-size:.95rem !important; }
    .bonus-card.horizontal .bonus-description,
    .bonus-description { -webkit-line-clamp:3 !important; line-clamp:3 !important; }
    .claim-button, .read-more-button { font-size:.82rem !important; padding:.65rem .75rem !important; }
    .bonus-card:hover { transform:none !important; }
}

/* ── Small (<=400px) ─────────────────────────────────────── */
@media (max-width:400px) {
    .bonus-grid { grid-template-columns:1fr !important; }
    .category-select { font-size:.85rem !important; }
}

@keyframes bdFadeIn{from{opacity:0}to{opacity:1}}
@keyframes bdSlideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
#bonus-details-frame-wrap{position:relative;width:100%;max-width:560px;height:88vh;max-height:720px;border-radius:18px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.7);animation:bdSlideUp .3s cubic-bezier(.4,0,.2,1);border:1.5px solid rgba(102,126,234,.35)}
@media(max-width:600px){#bonus-details-frame-wrap{height:95vh;max-height:none;border-radius:12px 12px 0 0;position:fixed;bottom:0;left:0;right:0;width:100%;max-width:100%}}
#bonus-details-iframe{width:100%;height:100%;border:none;display:block;background:#090233}

/* ============================================================
   GAME LAUNCH PAGE
   ============================================================ */

/* ---- Embed mode ---- */
.game-launch-wrap--embed{
  position:relative;width:100%;height:100%;min-height:350px;
  background:#0d0d1a;border-radius:8px;
  overflow:auto;display:flex;align-items:center;justify-content:center;
}
/* ---- Full-page mode: fixed to visible viewport ---- */
.game-launch-wrap:not(.game-launch-wrap--embed){
  position:fixed;
  top:var(--header-h,56px);   /* below desktop header */
  left:0;right:0;bottom:0;
  background:#0d0d1a;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  z-index:150;
}
/* Mobile: account for any extra header row + bottom nav */
@media(max-width:780px){
  .game-launch-wrap:not(.game-launch-wrap--embed){
    top:var(--header-h,56px);
    bottom:var(--nav-h,56px);
  }
}
.gl-iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:none;display:block;
  overflow:auto;   /* allow inner scroll */
  -webkit-overflow-scrolling:touch;
}

/* Loading */
.gl-loading{display:flex;flex-direction:column;align-items:center;gap:1rem;color:#fff}
.gl-spinner{
  width:48px;height:48px;border-radius:50%;
  border:4px solid rgba(255,255,255,.15);
  border-top-color:#f5a623;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.gl-loading-text{font-size:.9rem;color:rgba(255,255,255,.7)}

/* Error */
.gl-error{
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  color:rgba(255,255,255,.7);font-size:.88rem;
}
.gl-error i{font-size:2rem;color:#ef5350}
.gl-retry-btn{
  padding:.45rem 1.2rem;border-radius:2rem;background:rgba(255,255,255,.1);
  color:#fff;border:1px solid rgba(255,255,255,.2);cursor:pointer;
  font-size:.8rem;font-family:inherit;transition:background .2s;
}
.gl-retry-btn:hover{background:rgba(255,255,255,.18)}

/* ============================================================
   HISTORY PAGE
   ============================================================ */

@media(min-width:1024px){ #bhBreadcrumbs { display:none !important; } }

/* -- History page background override -- */
html[data-page="betting-history"] .page-content { background:var(--page-content-alt-bg) !important; }
.bh-title                       { color:#1a1a2e !important; }

/* Tabs */
.bh-tab                         { background:#fff !important; border-color:#e0e0e0 !important; color:#555 !important; }
.bh-tab:hover                   { background:#f5f5f5 !important; color:#111 !important; }
.bh-tab.active                  { background:var(--gradient-btn) !important; border-color:transparent !important; color:#fff !important; }
.bh-cal-btn                     { background:#fff !important; border-color:#e0e0e0 !important; color:#555 !important; }
.bh-cal-btn:hover               { background:#f5f5f5 !important; color:#111 !important; }

/* Date badge */
.bh-date-badge                  { background:rgba(124,77,255,.1) !important; border-color:rgba(124,77,255,.3) !important; color:#6c35cc !important; }
.bh-date-clear                  { color:#888 !important; }
.bh-date-clear:hover            { color:#333 !important; }

/* Skeleton */
.bh-skeleton                    { background:linear-gradient(90deg,#ececec 25%,#f5f5f5 50%,#ececec 75%) !important; background-size:200% 100% !important; }

/* Empty state */
.bh-empty__icon                 { background:rgba(0,0,0,.06) !important; }
.bh-empty__icon svg circle,
.bh-empty__icon svg line        { stroke:rgba(0,0,0,.25) !important; }
.bh-empty__title                { color:#444 !important; }
.bh-empty__sub                  { color:#888 !important; }

/* Cards */
.bh-card                        { background:#fff !important; border-color:#e8e8ee !important; box-shadow:0 1px 4px rgba(0,0,0,.07); }
.bh-card:hover                  { border-color:rgba(124,77,255,.3) !important; }
.bh-card__game-icon             { color:#aaa !important; }
.bh-card__game-name             { color:#1a1a2e !important; }
.bh-card__result--push          { background:#f0f0f5 !important; color:#777 !important; }
.bh-card__detail-lbl            { color:#999 !important; }
.bh-card__detail-val            { color:#1a1a2e !important; }
.bh-card__status                { background:#f0f0f5 !important; color:#666 !important; }
.bh-card__date                  { color:#aaa !important; }

/* Load more */
.bh-loadmore-btn                { background:#fff !important; border-color:#e0e0e0 !important; color:#555 !important; }
.bh-loadmore-btn:hover          { background:#f5f5f5 !important; color:#111 !important; }

/* History type switcher */
.bh-type-bar{
  display:flex;gap:.5rem;margin-bottom:1.1rem;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-bottom:.1rem;
}
.bh-type-bar::-webkit-scrollbar{display:none;}
.bh-type-btn{
  display:flex;align-items:center;gap:.4rem;
  flex-shrink:0;padding:.52rem .95rem;border-radius:50px;
  border:1.5px solid #e0e0e0;background:#fff;
  color:#555;font-size:.82rem;font-weight:700;cursor:pointer;
  transition:all .18s;white-space:nowrap;
}
.bh-type-btn:hover{border-color:var(--accent);color:#b38600;}
.bh-type-btn--active{background:var(--accent);border-color:var(--accent);color:#111;}
.bh-type-btn svg{flex-shrink:0;}

/* ============================================================
   LUCKY SPORTS PAGE  (global html/body rules moved to inline <style> in pages/lucky-sports.php)
   ============================================================ */

/* ── Top Header ── */
.ls-header{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,#f5a623 0%,#f7c243 100%);
  padding:.45rem .8rem;
  min-height:52px;flex-shrink:0;
}
.ls-logo{display:flex;align-items:center;gap:.5rem}
.ls-logo img{height:38px;width:auto;object-fit:contain}
.ls-logo-text{font-weight:900;font-size:1.05rem;color:#1a0d00;letter-spacing:.02em}
.ls-balance{display:flex;flex-direction:column;align-items:flex-end;font-size:.72rem;color:#3a1a00;line-height:1.5}
.ls-balance strong{font-size:.9rem;font-weight:700;color:#1a0d00}
.ls-balance-row{display:flex;align-items:center;gap:.4rem}
.ls-header-icons{display:flex;align-items:center;gap:.6rem;margin-left:.8rem}
.ls-header-icons button{background:none;border:none;cursor:pointer;font-size:1rem;color:#5c3000;transition:color .2s}
.ls-header-icons button:hover{color:#1a0d00}

/* ── Sports Nav ── */
.ls-nav{
  display:flex;align-items:center;
  background:#1a1a1a;
  overflow-x:auto;scrollbar-width:none;
  gap:0;border-bottom:2px solid #333;flex-shrink:0;
}
.ls-nav::-webkit-scrollbar{display:none}
.ls-nav-btn{
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:.15rem;padding:.45rem .7rem;
  cursor:pointer;white-space:nowrap;min-width:64px;
  background:none;border:none;color:#ccc;font-size:.7rem;
  position:relative;transition:background .15s,color .15s;
  border-bottom:2px solid transparent;margin-bottom:-2px;
}
.ls-nav-btn i{font-size:.95rem}
.ls-nav-btn:hover{background:#2a2a2a;color:#fff}
.ls-nav-btn.active{color:#f5a623;border-bottom-color:#f5a623}
.ls-nav-count{
  position:absolute;top:.25rem;right:.3rem;
  background:#e53935;color:#fff;font-size:.58rem;font-weight:700;
  border-radius:2rem;padding:.05rem .32rem;line-height:1.4;
  min-width:16px;text-align:center;
}
.ls-nav-search{padding:.45rem .7rem;color:#aaa;cursor:pointer;margin-left:auto;background:none;border:none;font-size:1rem}
.ls-nav-search:hover{color:#fff}

/* ── Layout ── */
.ls-body{display:flex;flex:1 0 auto;min-height:400px;}
.ls-main{flex:1;overflow-y:visible;background:#fff}
.ls-right{width:260px;background:#fff;border-left:1px solid #e0e0e0;display:flex;flex-direction:column;}

/* ── Match area ── */
.ls-competition{padding:.55rem .8rem;font-size:.78rem;font-weight:600;color:#444;background:#f8f8f8;border-bottom:1px solid #eee}
.ls-match-card{
  display:flex;flex-direction:column;
  padding:.7rem .8rem;border-bottom:1px solid #f0f0f0;background:#fff;
}
.ls-match-teams{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.ls-team{display:flex;flex-direction:column;align-items:center;gap:.25rem;min-width:60px}
.ls-team-flag{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#1a73e8,var(--blue-btn-hover));
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;color:#fff;
}
.ls-team-code{font-size:.75rem;font-weight:700;color:#222}
.ls-score{text-align:center;flex:1}
.ls-score-period{font-size:.65rem;color:#2196F3;font-weight:600;margin-bottom:.2rem}
.ls-score-main{font-size:1.6rem;font-weight:900;color:#1a1a1a;letter-spacing:.05em}
.ls-odds{display:flex;gap:.5rem;margin-top:.5rem}
.ls-odd{
  flex:1;display:flex;align-items:center;justify-content:center;
  background:#f5f5f5;border:1px solid #e0e0e0;border-radius:4px;
  padding:.4rem .5rem;font-size:.8rem;font-weight:600;cursor:pointer;gap:.35rem;
  transition:background .15s,border-color .15s;
}
.ls-odd:hover{background:#e3f2fd;border-color:#90caf9}
.ls-odd i{color:#999;font-size:.75rem}

/* ── Tabs ── */
.ls-tabs{display:flex;border-bottom:1px solid #e0e0e0}
.ls-tab{
  flex:1;text-align:center;padding:.6rem .5rem;
  font-size:.8rem;font-weight:600;cursor:pointer;color:#888;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  background:none;border-top:none;border-left:none;border-right:none;
  font-family:inherit;
}
.ls-tab.active{color:#2196F3;border-bottom-color:#2196F3}
.ls-tab:hover{color:#1a73e8}

/* ── Match list ── */
.ls-match-list{overflow-y:auto}
.ls-match-item{
  display:flex;align-items:center;padding:.55rem .8rem;
  border-bottom:1px solid #f5f5f5;cursor:pointer;gap:.5rem;
  transition:background .12s;
}
.ls-match-item:hover{background:#f9f9f9}
.ls-match-item-badges{display:flex;align-items:center;gap:.3rem;min-width:56px}
.ls-badge-img{width:18px;height:18px;border-radius:2px;object-fit:contain;background:#eee}
.ls-badge-text{font-size:.6rem;font-weight:700;color:#fff;background:#e53935;border-radius:2px;padding:.05rem .28rem}
.ls-badge-text.b-blue{background:var(--blue-btn)}
.ls-badge-text.b-pink{background:#ad1457}
.ls-live-dot{width:8px;height:8px;border-radius:50%;background:#4caf50;display:inline-block;margin-right:.25rem;flex-shrink:0}
.ls-match-name{flex:1;font-size:.8rem;color:#1a73e8;font-weight:500}
.ls-match-name:hover{text-decoration:underline}
.ls-match-fav{color:#e0c800;font-size:.8rem}

/* ── Right Panel ── */
.ls-right-tabs{display:flex;border-bottom:1px solid #e0e0e0}
.ls-right-tab{
  flex:1;text-align:center;padding:.55rem .4rem;
  font-size:.82rem;font-weight:600;cursor:pointer;
  background:none;border:none;font-family:inherit;color:#888;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.ls-right-tab.active{color:#fff;background:#f5a623;border-radius:0}
.ls-right-content{flex:1;display:flex;align-items:center;justify-content:center;padding:1.5rem;text-align:center}
.ls-right-empty{color:#aaa;font-size:.8rem;line-height:1.7}

/* ── Responsive when embedded in small space ── */
@media(max-width:520px){
  .ls-right{display:none}
  .ls-nav-btn{min-width:52px;padding:.4rem .5rem}
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */

/* ── prof-bal-card white theme ── */
.prof-bal-card {
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.09) !important;
}
.prof-bal-currency { color: #c68a00 !important; }
.prof-bal-value    { color: #1a1a2e !important; }
.prof-bal-refresh  { color: #aaa !important; }
.prof-bal-refresh:hover { color: #c68a00 !important; }
.prof-bal-act-btn  {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  color: #333 !important;
}
.prof-bal-act-btn:hover { background: #ebebeb !important; }
.prof-bal-act-btn--wd   { border-color: rgba(220,50,50,.3) !important; }

/* ============================================================
   REFERRAL PAGE
   ============================================================ */

.rf-page { background: #fff; min-height:100vh; padding-bottom:60px; border-radius: 10px; }

/* ── Container wrapper ── */
.rf-wrap {
  background:transparent;
  border-radius:12px;
  max-width:1260px;
  margin:34px auto 0;
  padding:0 1rem;
  box-sizing:border-box;
}
/* Mobile: remove extra top spacing — page-wrapper padding already clears the header */
@media(max-width:1023px){
  .rf-wrap { margin-top: 0; }
}
/* Desktop: remove top margin inside deskAcc-right */
@media(min-width:1024px){
  .rf-wrap { margin-top:0; }
}

/* ── Hero ── */
.rf-hero {
  position:relative;
  margin:0 12px;
  margin-bottom:28px !important;
  border-radius:10px 10px 0 0;
  background:url('/assets/posters/referral_banner.png') center/cover no-repeat;
  min-height:220px;
  overflow:hidden;
}
.rf-hero__content {
  position:absolute;
  top:50%;
  right:2%;
  transform:translateY(-50%);
  width:50%;
  padding:18px 24px;
}
.rf-hero__title {
  font-size:1.15rem;font-weight:800;color:#fff;margin-bottom:6px;
}
.rf-hero__desc {
  font-size:.72rem;color:rgba(255,255,255,.9);line-height:1.6;
  max-width:100%;
}

/* ── Tabs inside hero, bottom-right ── */
.rf-tabs {
  display:flex;
  width:100%;
  gap:6px;
  background:#1a1a1a;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding: 6px 8px;
  box-sizing: border-box;
}
.rf-tab {
  flex:1;
  padding:9px 18px;
  font-size:.82rem;font-weight:700;
  text-align:center;text-decoration:none;
  border:none;cursor:pointer;
  color:#aaa;background:transparent;
  border-bottom:3px solid transparent;
  border-radius:20px;
  white-space:nowrap;
  transition:color .15s,border-color .15s,background .15s;
  font-family:inherit;
}
.rf-tab.active { color:#f5b614; border-bottom-color:#f5b614; }
.rf-tab:hover:not(.active) { color:#fff; }

/* ── Inner banner ── */
.rf-inner-wrap {
  margin-top: 12px;  
  position:relative;
  margin:0 12px 0;
  border-radius:0 0 10px 10px;
  overflow:visible;
}
.rf-inner-banner { width:100%;border-radius:0 0 10px 10px;display:block; }
.rf-coin { position:absolute;pointer-events:none; }
.rf-coin--tl { top:-16px;left:-6px;width:42px; }
.rf-coin--bl { bottom:-16px;left:8px;width:36px; }
.rf-coin--tr { top:-10px;right:28px;width:34px; }
.rf-coin--br { bottom:-16px;right:-8px;width:44px; }
.rf-info-badge {
  position:absolute;top:8px;right:10px;
  width:26px;height:26px;
  background:#1a1a1a;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.rf-info-badge svg { width:16px;height:16px; }

/* ── Section heading ── */
.rf-section-hd {
  display:flex;align-items:center;gap:10px;
  padding:28px 14px 12px;
}
.rf-section-hd__coin {
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:url('/assets/reward/rewardCoins.svg') center/contain no-repeat,
             radial-gradient(circle at 35% 35%,#ffe680,#c8900a);
}
.rf-section-hd__title { font-size:1.1rem;font-weight:900;color:#1a1a1a; }

/* ── Timeline card ── */
.rf-tl-card {
  background:#fff;border-radius:14px;
  margin:0 10px;padding:16px 12px 20px;
  box-shadow:0 2px 10px rgba(0,0,0,.07);
}

/* ── Timeline rows ── */
.rf-tl-row {
  display:flex;align-items:center;gap:10px;
  margin-bottom:12px;
}
.rf-tl-row:last-child { margin-bottom:0; }
.rf-tl-dot-col {
  display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:44px;
}
.rf-tl-circle {
  width:44px;height:44px;border-radius:50%;
  background:#e4e4e4;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.rf-tl-line { width:2px;height:16px;background:#d4d4d4; }
.rf-tl-body { flex:1;display:flex;gap:8px;align-items:stretch;min-width:0; }
.rf-tl-name {
  flex:1;padding:14px 12px;border-radius:6px;
  font-size:.83rem;font-weight:600;text-align:center;
  color:#555;background:#e8e8e8;min-width:0;
}
.rf-tl-name.active  { background:#2c2c2c;color:#f5b614;display:flex;align-items:center;justify-content:center; }
.rf-tl-count {
  width:78px;flex-shrink:0;padding:14px 8px;border-radius:6px;
  font-size:.83rem;font-weight:700;text-align:center;
  color:#555;background:#e8e8e8;
}
.rf-tl-count.active { background:#2c2c2c;color:#f5b614; }

/* Tier icon SVG */
.rf-tier-icon { display:block; }

/* ── Placeholders ── */
.rf-placeholder {
  background:#fff;border-radius:12px;margin:16px 12px 0;
  padding:48px 20px;text-align:center;
  color:#aaa;font-size:.9rem;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}

/* ── Summary tab ── */
.rf-sum-wrap { padding:20px 12px 28px; }
.rf-sum-top {
  display:grid;
  grid-template-columns:1fr 1fr 1fr 260px;
  gap:14px;
  margin-bottom:20px;
  align-items:start;
}
@media(max-width:900px){
  .rf-sum-top { grid-template-columns:1fr 1fr; }
  .rf-sum-sidebar { grid-column:span 2; }
}
@media(max-width:560px){
  .rf-sum-top { grid-template-columns:1fr; }
  .rf-sum-sidebar { grid-column:span 1; }
}
.rf-sum-label { font-size:.78rem;color:#555;font-weight:600;margin-bottom:6px; }
.rf-sum-dark-pill {
  background:#2c2c2c;color:#fff;
  border-radius:6px;padding:12px 18px;
  font-size:.85rem;font-weight:700;
  margin-bottom:14px;
}
.rf-sum-dark-pill:last-child { margin-bottom:0; }
.rf-sum-tier-row {
  display:grid;grid-template-columns:1fr 1fr;
  gap:4px;margin-bottom:6px;
}
.rf-sum-tier-row:last-child { margin-bottom:0; }
.rf-sum-tier-lbl {
  background:#2c2c2c;color:#fff;
  border-radius:6px 0 0 6px;
  padding:11px 8px;text-align:center;
  font-size:.82rem;font-weight:700;
}
.rf-sum-tier-row:not(:first-child) .rf-sum-tier-lbl { background:#9e9e9e; }
.rf-sum-tier-val {
  background:#2c2c2c;color:#fff;
  border-radius:0 6px 6px 0;
  padding:11px 8px;text-align:center;
  font-size:.82rem;font-weight:700;
}
.rf-sum-tier-row:not(:first-child) .rf-sum-tier-val { background:#9e9e9e; }
.rf-sum-avail-card {
  background:#2c2c2c;border-radius:10px;
  padding:16px 14px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.rf-sum-avail-lbl { color:#fff;font-size:.82rem;font-weight:600;text-align:center; }
.rf-sum-avail-input-wrap {
  width:100%;display:flex;align-items:center;
  background:#fff;border-radius:6px;
  padding:0 8px 0 10px;
}
.rf-sum-avail-prefix { color:#555;font-size:.9rem;margin-right:4px; }
.rf-sum-avail-field {
  flex:1;border:none;outline:none;padding:10px 0;
  background:transparent;font-size:.9rem;color:#888;
}
.rf-sum-redeem-btn {
  width:100%;padding:11px;
  background:#1976d2;color:#fff;
  border:none;border-radius:6px;
  font-size:.9rem;font-weight:700;cursor:pointer;
}
.rf-sum-sidebar {
  background:#f5f5f5;border-radius:10px;
  padding:16px 12px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.rf-sum-sid-id { font-size:.82rem;color:#444; }
.rf-sum-sid-id span { font-weight:700; }
.rf-sum-qr { width:160px;height:160px;background:#fff;border-radius:4px;overflow:hidden; }
.rf-sum-qr img { width:100%;height:100%; }
.rf-sum-share-btn {
  width:100%;padding:11px;
  background:#f5b614;color:#1a1a1a;
  border:none;border-radius:6px;
  font-size:.9rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.rf-sum-bonus-card {
  border:1.5px solid #ccc;border-radius:10px;
  overflow:hidden;margin-bottom:16px;
}
.rf-sum-bonus-hdr {
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 20px;border-bottom:1px solid #e0e0e0;
  font-weight:700;font-size:.85rem;
}
.rf-sum-bonus-body { display:flex; }
@media(max-width:600px){ .rf-sum-bonus-body { flex-direction:column; } }
.rf-sum-bonus-left { flex:1;background:#2c2c2c;padding:18px 16px; }
.rf-sum-bonus-row { margin-bottom:14px; }
.rf-sum-bonus-row:last-child { margin-bottom:0; }
.rf-sum-bonus-row-lbl { color:#fff;font-size:.78rem;font-weight:600;margin-bottom:6px; }
.rf-sum-bonus-row-val {
  background:#555;color:#fff;
  border-radius:4px;padding:8px 10px;
  font-size:.84rem;font-weight:600;
}
.rf-sum-bonus-right {
  flex:1;background:#f3f3f3;padding:18px 16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.rf-sum-bonus-right-title { font-size:.9rem;color:#333;margin-bottom:20px; }
.rf-sum-friends-wrap { display:flex;align-items:flex-start;justify-content:center; }
.rf-sum-friend-col { padding:16px 24px;text-align:center; }
.rf-sum-friend-col:first-child { border-right:2px dotted #333; }
.rf-sum-friend-num { font-size:2rem;font-weight:900;color:#222; }
.rf-sum-friend-lbl { font-size:.75rem;color:#555;margin-top:4px; }
.rf-sum-downline-wrap { display:flex;justify-content:flex-end;margin-bottom:20px; }
.rf-sum-downline-btn {
  padding:10px 24px;background:#e0e0e0;color:#333;
  border:none;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;
}
.rf-sum-nav-row { display:flex;justify-content:space-evenly;padding:8px 0; }
.rf-sum-nav-link {
  padding:10px 28px;background:#e0e0e0;color:#333;
  border-radius:8px;text-decoration:none;
  font-size:.85rem;font-weight:600;
}

/* ── Report tab ── */
.rf-report-wrap { padding:0 0 28px; }
.rf-report-search-wrap {
  display:flex;align-items:center;gap:8px;padding:14px 14px 10px;
}
.rf-report-search {
  display:flex;align-items:center;
  border:1.5px solid #ccc;border-radius:6px;
  padding:0 8px;background:#fff;
  flex:0 0 240px;
}
.rf-report-search input {
  border:none;outline:none;padding:8px 4px;font-size:.83rem;width:100%;background:transparent;
}
.rf-report-search button {
  background:none;border:none;cursor:pointer;padding:0;line-height:1;color:#888;
}
.rf-report-table-wrap { overflow-x:auto; }
.rf-report-table {
  width:100%;border-collapse:collapse;
  font-size:.8rem;
}
.rf-report-table th {
  text-align:left;padding:10px 14px;
  border-bottom:1.5px solid rgba(0,0,0,.12);
  color:#666;font-weight:700;white-space:nowrap;
}
.rf-report-table td {
  padding:10px 14px;border-bottom:1px solid #f0f0f0;
  color:#444;white-space:nowrap;
}
.rf-report-table tbody tr:hover { background:#f9f9f9; }
.rf-report-badge {
  display:inline-block;padding:2px 10px;border-radius:12px;
  font-size:.75rem;font-weight:700;background:#e8e8e8;color:#555;
}
.rf-report-badge--t1 { background:#2c2c2c;color:#f5b614; }
.rf-report-badge--t2 { background:#5a5a5a;color:#fff; }
.rf-report-badge--t3 { background:#888;color:#fff; }
.rf-report-empty {
  text-align:center;padding:32px;color:#aaa;font-size:.85rem;
}

/* ── Referral code widget (tier tab body) ── */
.rf-desc-section {
  padding: 20px 16px 16px;
  background: #fff;
}
.rf-desc-text {
  font-size: .88rem;
  color: #333;
  line-height: 1.75;
  margin-bottom: 18px;
}
.rf-code-label {
  font-size: .88rem;
  color: #333;
  font-weight: 600;
  margin-bottom: 12px;
}
.rf-code-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.rf-code-box {
  flex: 1;
  border: 2px dashed #aaa;
  border-radius: 10px;
  padding: 14px 10px;
  font-size: .95rem;
  font-weight: 700;
  color: #333;
  background: #fff;
  text-align: center;
  letter-spacing: .04em;
  min-width: 0;
  word-break: break-all;
}
.rf-share-btn {
  flex: 1.3;
  padding: 14px 10px;
  background: var(--blue-btn);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: .03em;
  white-space: nowrap;
  font-family: inherit;
  transition: background .2s;
}
.rf-share-btn:hover { background: var(--blue-btn-hover); }

/* Mobile overrides */
@media(max-width:780px) {
  .rf-wrap { border-radius: 0; padding: 0; }
  .rf-hero { margin: 0; border-radius: 20px 20px 0 0; min-height: 150px; }
  .rf-hero__content { width: 58%; top: 0; right: auto; left: 0; bottom: auto; transform: none; padding: 16px 16px 0; }
  .rf-hero__title { font-size: 1rem; }
  .rf-hero__desc { display: none; }
  .rf-tab { padding: 13px 6px; font-size: .82rem; }
  .rf-tab--desktop { display: none; }
  .rf-inner-wrap { display: none; }
  .rf-desc-section { display: block; }
  .rf-section-hd { padding-top: 20px; }
}
@media(min-width:781px) {
  .rf-desc-section { display: none; }
  /* Desktop tabs: bottom-right, white/grey style */
  .rf-tabs {
    width: auto;
    left: auto;
    right: 0;
    background: transparent;
    gap: 6px;
    padding: 0;
  }
  .rf-tab {
    flex: none;
    padding: 10px 24px;
    font-size: .85rem;
    color: #333;
    background: rgba(255,255,255,.92);
    border-bottom: none;
    border-left: none;
    border-radius: 5px;
  }
  .rf-tab:first-child { border-left: none; border-radius: 5px; }
  .rf-tab.active { background: #5a5a5a; color: #fff; border-bottom: none; border-bottom-color: transparent; }
  .rf-tab:hover:not(.active) { background: rgba(255,255,255,1); color: #111; }
  .rf-tab--desktop { display: block; }
}

/* ── History tab ── */
.rf-hist-status {
  display:inline-block;padding:2px 10px;border-radius:12px;
  font-size:.75rem;font-weight:700;
}
.rf-hist-status--paid    { background:#e8f5e9;color:#2e7d32; }
.rf-hist-status--pending { background:#fff8e1;color:#f57f17; }

/* ============================================================
   REWARD CHECK-IN PAGE
   ============================================================ */

:root { --ci-primary: #f5b614; --ci-dark: #2c2c2c; }

/* ── Page wrapper ── */
.ci-page { background:#eff0f5; min-height:100vh; padding-bottom:40px; }

/* ── Hero ── */
.ci-hero {
  background:linear-gradient(135deg,#3a1f8a 0%,#6b3fce 60%,#9b6aed 100%);
  padding:24px 16px 20px;
}
.ci-hero__title { font-size:1.6rem;font-weight:800;color:#fff; }

/* ── Coins bar ── */
.ci-coins {
  background:#fff;margin:12px 12px 0;
  border-radius:12px;padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.ci-coins__label { font-size:.85rem;font-weight:600;color:#333; }
.ci-coins__val-wrap { display:flex;align-items:center;gap:8px;margin-top:10px; }
.ci-coins__coin {
  width:36px;height:36px;border-radius:50%;
  background:var(--ci-primary);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ci-coins__coin svg { width:18px;height:18px;fill:#fff; }
.ci-coins__num {
  flex:1;background:#f4f4f4;border-radius:8px;
  padding:8px 14px;font-size:1rem;font-weight:700;color:#333;
}
.ci-coins__history { font-size:.8rem;color:#2196f3;font-weight:600;white-space:nowrap; }

/* ── Tabs ── */
.ci-tabs {
  display:flex;align-items:center;
  background:#fff;margin:12px 12px 0;
  border-radius:12px;padding:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.ci-tab {
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 4px;font-size:.75rem;font-weight:600;color:#888;
  border-radius:8px;cursor:pointer;text-decoration:none;
  transition:background .15s,color .15s;white-space:nowrap;
}
.ci-tab.active { background:var(--ci-primary);color:#fff; }
.ci-tab svg { width:16px;height:16px;flex-shrink:0; }

/* ── Divider ── */
.ci-divider { height:3px;background:var(--ci-primary);margin:10px 12px 0;border-radius:2px; }

/* ── Card ── */
.ci-card {
  background:#fff;border-radius:16px;
  margin:14px 12px;
  padding:20px 14px 24px;
  box-shadow:0 2px 10px rgba(0,0,0,.07);
}
.ci-card__title {
  font-size:.95rem;font-weight:700;color:#222;margin-bottom:4px;
}
.ci-card__subtitle {
  font-size:.75rem;color:#666;line-height:1.5;margin-bottom:20px;
}

/* ── Day grid ── */
.ci-days {
  display:flex;justify-content:space-between;gap:4px;
  margin-bottom:24px;
}
.ci-day { flex:1;display:flex;flex-direction:column;align-items:center;gap:0; }

/* circle (top) */
.ci-day__circle {
  width:42px;height:42px;border-radius:50%;
  background:var(--ci-primary);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:800;color:#222;
  position:relative;z-index:1;
  flex-shrink:0;
}
.ci-day__circle--done {
  background:var(--ci-primary);
}
.ci-day__circle--locked {
  background:#e0e0e0;
}
.ci-day__circle .ci-cancel {
  font-size:1.3rem;color:#999;line-height:1;
}

/* rectangle (bottom) */
.ci-day__rect {
  width:100%;min-height:52px;
  background:var(--ci-dark);
  border-radius:0 0 6px 6px;
  margin-top:-6px;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:7px;
  box-sizing:border-box;
}
.ci-day__rect-label {
  font-size:.62rem;font-weight:600;color:#fff;letter-spacing:.01em;
}

/* ── Check-in button ── */
.ci-btn-wrap { display:flex;justify-content:center; }
.ci-btn {
  width:80%;max-width:340px;padding:14px 0;
  background:var(--ci-primary);color:#222;
  font-size:.95rem;font-weight:800;
  border:none;border-radius:8px;cursor:pointer;
  box-shadow:0 3px 10px rgba(245,182,20,.4);
  transition:opacity .15s;
}
.ci-btn:hover { opacity:.88; }
.ci-btn:disabled { background:#ccc;color:#888;cursor:not-allowed;box-shadow:none; }

/* ============================================================
   REWARD PAGE
   ============================================================ */

:root { --reward-primary: #f5b614; }

/* ── Page wrapper ── */
.rw-page { background:#eff0f5; min-height:100vh; padding-bottom:40px; max-width:1260px; margin:0 auto; width:100%; box-sizing:border-box; }

/* ── Header banner ── */
.rw-hero {
  margin: 12px 12px 0;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  width: calc(100% - 24px);
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.rw-hero img.rw-hero-img {
  display: block;
  width: 100%;
  height: auto;
}
.rw-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5% 4%;
  width: 52%;
  box-sizing: border-box;
}
.rw-hero__title {
  font-size: 1.8rem; font-weight: 800; color: #fff;
  margin: 0 0 8px;
  line-height: 1.2;
}
.rw-hero__desc {
  font-size: .82rem; color: rgba(255,255,255,.92); line-height: 1.6;
}
@media(max-width:599px){
  .rw-hero { margin: 10px 10px 0; border-radius: 10px; }
  .rw-hero__content { width: 65%; }
  .rw-hero__title { font-size: 1.1rem; }
  .rw-hero__desc { font-size:.75rem; }
}

/* ── Coins bar ── */
.rw-coins {
  background:#fff;margin:12px 12px 0;
  border-radius:20px;padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.rw-coins__label { font-size:.85rem;font-weight:600;color:#333; }
.rw-coins__val-wrap {
  display:inline-flex;align-items:stretch;
  border:1px solid #e0e0e0;border-radius:6px;
  margin-top:10px;overflow:hidden;
}
.rw-coins__coin {
  display:flex;align-items:center;justify-content:center;
  padding:6px 8px;
  border-right:1px solid #e0e0e0;
  flex-shrink:0;
  background: #ffce01;
}
.rw-coins__coin img { width:30px;height:30px;object-fit:contain;display:block; }
.rw-coins__num {
  padding:6px 54px;
  font-size:1rem;font-weight:700;color:#333;
  display:flex;align-items:center;
}
.rw-coins__history { font-size:.8rem;color:#2196f3;font-weight:600;white-space:nowrap; }

/* ── Tabs ── */
.rw-tabs {
  display:flex;align-items:center;gap:0;
  background:#fff;margin:12px 12px 0;
  border-radius:12px;
  padding:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  overflow:hidden;
}
.rw-tab {
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 4px;font-size:.75rem;font-weight:600;color:#888;
  border-radius:8px;cursor:pointer;text-decoration:none;
  transition:background .15s,color .15s;
  white-space:nowrap;
}
.rw-tab.active { background:var(--reward-primary);color:#fff; }
.rw-tab svg { width:16px;height:16px;flex-shrink:0; }
.rw-tab img { width:18px;height:18px;object-fit:contain;flex-shrink:0; }

/* ── Divider ── */
.rw-divider { height:3px;background:var(--reward-primary);margin:10px 12px 0;border-radius:2px; }

/* ── Grid ── */
.rw-grid {
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;
  padding:10px 6px;
  background:#eff0f5;
}
@media(min-width:1024px){
  .rw-grid { grid-template-columns:repeat(5,1fr); gap:12px; padding:16px 12px; }
}

/* ── Card ── */
.rw-card {
  background:#fff;border-radius:12px;overflow:hidden;
  margin:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.07);
  display:flex;flex-direction:column;
}
.rw-card__img-wrap {
  position:relative;height:160px;overflow:hidden;
  background:#f9f9f9;
}
.rw-card__img {
  width:100%;height:100%;object-fit:contain;
  padding:8px;box-sizing:border-box;
}
.rw-card__hot {
  position:absolute;top:6px;left:6px;
  width:26px;height:26px;
  background:url('https://www.babu88p.com/static/svg/game-icon-hot.svg') center/cover no-repeat;
}
.rw-card__body { padding:8px 10px 0; }
.rw-card__points {
  font-size:.82rem;font-weight:700;color:#2196f3;
}
.rw-card__name {
  font-size:.72rem;color:#666;margin-top:2px;
  line-height:1.3;min-height:30px;
}
.rw-card__footer { padding:10px 10px 12px;text-align:center; }
.rw-card__btn {
  width:100%;padding:9px 0;border:none;border-radius:6px;
  background:var(--reward-primary);color:#fff;
  font-size:.8rem;font-weight:700;cursor:pointer;
  transition:opacity .15s;
}
.rw-card__btn:hover { opacity:.87; }
.rw-card__btn--disabled {
  background:#ccc !important;color:#888 !important;cursor:not-allowed;
}

/* ── Pagination ── */
.rw-pagination {
  display:flex;align-items:center;justify-content:center;
  gap:4px;padding:16px 12px;
}
.rw-page-btn {
  min-width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:none;cursor:pointer;
  font-size:.85rem;font-weight:600;
  background:#fff;color:#333;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
  text-decoration:none;transition:background .15s,color .15s;
}
.rw-page-btn.active { background:var(--reward-primary);color:#fff; }
.rw-page-btn:disabled,.rw-page-btn--disabled { opacity:.4;cursor:default;pointer-events:none; }
.rw-page-btn svg { width:16px;height:16px; }
.rw-page-more { color:#888;font-size:.85rem;padding:0 4px; }

/* ── Check-in card ── */
.ci-card {
  background:#fff;border-radius:16px;
  margin:14px 12px;
  padding:20px 14px 24px;
  box-shadow:0 2px 10px rgba(0,0,0,.07);
}
.ci-card__title { font-size:.95rem;font-weight:700;color:#222;margin-bottom:4px; }
.ci-card__subtitle { font-size:.75rem;color:#666;line-height:1.5;margin-bottom:20px; }
.ci-days { display:flex;justify-content:space-between;gap:4px;margin-bottom:24px; }
.ci-day { flex:1;display:flex;flex-direction:column;align-items:center; }
.ci-day__circle {
  width:42px;height:42px;border-radius:50%;
  background:url('/assets/check-in/top.svg') center/cover no-repeat;
  background-color:var(--reward-primary);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:800;color:#222;
  position:relative;z-index:1;flex-shrink:0;
}
.ci-day__circle--locked {
  background:none;
  background-color:#e0e0e0;
}
.ci-day .ci-cancel { font-size:1.3rem;color:#999;line-height:1; }
.ci-day__rect {
  width:100%;min-height:52px;
  background:url('/assets/check-in/bottom.svg') center/cover no-repeat;
  background-color:#2c2c2c;
  border-radius:0 0 6px 6px;
  margin-top:-6px;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:7px;box-sizing:border-box;
}
.ci-day__rect-label { font-size:.62rem;font-weight:600;color:#fff; }
.ci-btn-wrap { display:flex;justify-content:center; }
.ci-btn {
  width:80%;max-width:340px;padding:14px 0;
  background:var(--reward-primary);color:#222;
  font-size:.95rem;font-weight:800;
  border:none;border-radius:8px;cursor:pointer;
  box-shadow:0 3px 10px rgba(245,182,20,.4);
  transition:opacity .15s;
}
.ci-btn:hover { opacity:.88; }
.ci-btn:disabled { background:#ccc;color:#888;cursor:not-allowed;box-shadow:none; }

/* ============================================================
   SETTINGS PAGE
   ============================================================ */

@media(min-width:1024px){
  .deskAcc-right .page-content { padding-top:0 !important; margin-top:0 !important; }
  .deskAcc-right .page-content .container { padding-top:0 !important; }
  .deskAcc-right .bh-title { margin-top:0 !important; }
  #stpBreadcrumbs { display:none !important; }
}

/* -- Settings page background override -- */
html[data-page="profile/settings"] .page-content { background: var(--page-content-alt-bg); }
.bh-title { color: #111; }
.breadcrumbs__link { color: #555; }
.breadcrumbs__current { color: #999; }

.stp-wrap{
  display:flex;flex-direction:column;gap:.65rem;
  max-width:640px;
  padding-bottom:2rem;
}
.stp-section{
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:14px;
  padding:1rem 1.1rem;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
}
.stp-section-title{
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:#aaa;
  margin-bottom:.75rem;
}
/* Row */
.stp-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:.45rem 0;
  border-top:1px solid #f2f2f2;
}
.stp-row:first-of-type{border-top:none;}
.stp-label{font-size:.9rem;color:#333;}
/* Toggle */
.stp-toggle{position:relative;display:inline-flex;cursor:pointer;flex-shrink:0;}
.stp-toggle input{position:absolute;opacity:0;width:0;height:0;}
.stp-toggle-track{
  width:44px;height:24px;border-radius:12px;
  background:#ddd;
  transition:background .2s;position:relative;
}
.stp-toggle input:checked + .stp-toggle-track{background:var(--accent,#7c4dff);}
.stp-toggle-thumb{
  position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.stp-toggle input:checked + .stp-toggle-track .stp-toggle-thumb{transform:translateX(20px);}
/* Input */
.stp-input-wrap{
  position:relative;display:flex;align-items:center;
  margin-bottom:.55rem;
}
.stp-input{
  width:100%;background:#f7f8fa;
  border:1.5px solid #e0e0e0;border-radius:10px;
  color:#222;font-size:.9rem;padding:.6rem 2.4rem .6rem .9rem;
  font-family:inherit;outline:none;
  transition:border-color .18s;
}
.stp-input:focus{border-color:#7c4dff;}
.stp-input::placeholder{color:#bbb;}
.stp-eye-btn{
  position:absolute;right:.6rem;
  background:none;border:none;color:#bbb;
  cursor:pointer;display:flex;align-items:center;padding:0;
  transition:color .15s;
}
.stp-eye-btn:hover{color:#555;}
/* Primary btn */
.stp-btn-primary{
  width:100%;padding:.65rem;border-radius:10px;
  background:#f5c518;
  border:none;color:#fff;font-size:.92rem;font-weight:700;
  cursor:pointer;margin-top:.35rem;
  transition:opacity .18s;font-family:inherit;
  box-shadow:0 3px 12px rgba(245,197,24,.3);
}
.stp-btn-primary:hover{opacity:.88;}
/* Message */
.stp-msg{
  font-size:.82rem;padding:.35rem .5rem;border-radius:6px;
  margin-bottom:.35rem;
}
.stp-msg.ok {background:rgba(38,181,91,.12);color:#1a9943;}
.stp-msg.err{background:rgba(224,63,63,.1);color:#d93232;}
/* Telegram row */
.stp-tg-row{
  display:flex;align-items:center;gap:.4rem;
  background:#f7f8fa;
  border:1.5px solid #e0e0e0;border-radius:10px;
  padding:.1rem .4rem .1rem .75rem;
  margin-bottom:.5rem;
}
.stp-tg-at{font-size:1rem;color:#aaa;}
.stp-tg-input{
  flex:1;background:none;border:none;outline:none;
  color:#222;font-size:.9rem;font-family:inherit;padding:.5rem 0;
}
.stp-tg-input::placeholder{color:#bbb;}
.stp-tg-save-btn{
  background:#f5c518;
  border:none;border-radius:7px;padding:.3rem .75rem;
  color:#fff;font-size:.78rem;font-weight:700;cursor:pointer;
  white-space:nowrap;transition:opacity .15s;
  box-shadow:0 2px 8px rgba(245,197,24,.25);
}
.stp-tg-save-btn:hover{opacity:.85;}
/* Telegram notice */
.stp-tg-notice{
  font-size:.8rem;color:#666;
  background:#f5f5f5;border:1px solid #e8e8e8;border-radius:8px;
  padding:.55rem .7rem;margin-bottom:.55rem;
}
/* Select */
.stp-select-wrap{position:relative;}
.stp-select{
  width:100%;appearance:none;-webkit-appearance:none;
  background:#f7f8fa;
  border:1.5px solid #e0e0e0;border-radius:10px;
  color:#222;font-size:.9rem;font-family:inherit;
  padding:.6rem 2.4rem .6rem .9rem;outline:none;cursor:pointer;
  transition:border-color .18s;
}
.stp-select:focus{border-color:#7c4dff;}
.stp-select option{background:#fff;color:#222;}
.stp-select-chev{
  position:absolute;right:.7rem;top:50%;transform:translateY(-50%);
  width:20px;height:20px;fill:#aaa;pointer-events:none;
}
/* ============================================================
   SUPPORT PAGE
   ============================================================ */

/* SUPPORT PAGE standalone styles moved to inline <style> in pages/support.php */

/* ============================================================
   VIP PAGE
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   VIP PAGE STYLES
   ═══════════════════════════════════════════════════════════ */
.vip-page { background:#1a1a1a; min-height:100vh; padding-bottom:60px; }

/* ── Hero banner ────────────────────────────────────────── */
.vip-hero {
  position:relative;
  width:100%;
  margin-top:calc(var(--nav-h,0px) + 0px);
  overflow:hidden;
  background:none;
}
@media(min-width:1024px){
  .vip-hero { margin-top:0; }
}
.vip-hero img.vip-hero-img {
  display:block;
  width:100%;
  height:auto;
}
@media(max-width:1023px){
  .vip-hero { margin-top:calc(var(--nav-h,0px) + 0px); }
}
.vip-hero-text {
  position:absolute;
  bottom:16px;
  left:24px;
  color:#fff;
}
.vip-hero-text p { margin:0 0 4px; font-size:.9rem; line-height:1.5; text-shadow:0 1px 3px rgba(0,0,0,.5); }

/* ── VIP Tier badges section ────────────────────────────── */
.vip-tiers-section {
  background:url('/assets/vip/tier_background_desktop.jpg') center center / cover no-repeat;
  padding:32px 12%;
  text-align:center;
}
@media(max-width:1023px){ .vip-tiers-section { padding:24px 12px; } }

.vip-tiers-title {
  color:#fff;
  font-size:1.1rem;
  font-weight:700;
  margin:0 0 28px;
  letter-spacing:.02em;
}

.vip-tier-icons {
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.vip-tier-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:150px;
}
@media(max-width:1023px){ .vip-tier-item { width:80px; } }

.vip-tier-item img {
  width:130px;
  height:130px;
  object-fit:contain;
}
@media(max-width:1023px){ .vip-tier-item img { width:70px; height:70px; } }

.vip-tier-item span {
  color:#fff;
  font-size:.9rem;
  font-weight:600;
}

/* ── Be VIP girl section ───────────────────────────────── */
.vip-be-section {
  background:#1e1e1e;
  padding:0 12%;
}
@media(max-width:1023px){ .vip-be-section { padding:0; } }

.vip-be-inner {
  display:flex;
  align-items:stretch;
  min-height:280px;
}

.vip-be-img {
  width:42%;
  flex-shrink:0;
  background:url('/assets/vip/be_vip_girl.png') left center / cover no-repeat;
  min-height:260px;
}
@media(max-width:767px){ .vip-be-img { display:none; } }

.vip-be-content {
  flex:1;
  padding:32px 40px;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
@media(max-width:767px){ .vip-be-content { padding:24px 16px; } }

.vip-be-content h3 {
  font-size:1.4rem;
  margin:0 0 12px;
  color:#f5b614;
}

.vip-be-content p {
  font-size:.88rem;
  line-height:1.7;
  color:#ddd;
  margin:0 0 8px;
}

/* ── VIP data table ─────────────────────────────────────── */
.vip-table-section {
  background:#1e1e1e;
  padding:0 12% 40px;
  overflow-x:auto;
}
@media(max-width:1023px){ .vip-table-section { padding:0 0 24px; } }

.vip-table {
  width:100%;
  border-collapse:collapse;
  min-width:700px;
  table-layout:fixed;
}

.vip-table th,
.vip-table td {
  padding:10px 6px;
  border:1px solid #333;
  font-size:.82rem;
  text-align:center;
  vertical-align:middle;
  color:#ccc;
}

/* Left label column */
.vip-table td.vip-label,
.vip-table th.vip-label {
  text-align:left;
  padding-left:16px;
  color:#fff;
  width:22%;
  background:#181818;
}

/* Category header rows */
.vip-table tr.cat-row td {
  background:#2c2c2c;
  color:#f5b614;
  font-weight:700;
  font-size:.85rem;
  text-align:left;
  padding-left:16px;
}

/* Alternating section backgrounds */
.vip-table tr.light-row td { background:#242424; }
.vip-table tr.dark-row  td { background:#1a1a1a; }

/* Header row with tier icons */
.vip-table thead tr:first-child th {
  background:#2a2a2a;
  padding:10px 4px 6px;
  border-bottom:2px solid #444;
}
.vip-table thead th img {
  width:40px;
  height:40px;
  object-fit:contain;
  display:block;
  margin:0 auto 6px;
}
.vip-table thead th span {
  color:#fff;
  font-size:.8rem;
  font-weight:600;
}
.vip-table thead th.vip-label { background:#181818; }

.vip-table td img.gold-star {
  width:24px;
  height:24px;
  object-fit:contain;
  display:inline-block;
}

/* "নতুন" badge */
.vip-new-badge {
  display:inline-block;
  background:#f5b614;
  color:#111;
  font-size:.6rem;
  font-weight:700;
  padding:1px 5px;
  border-radius:3px;
  margin-left:4px;
  vertical-align:middle;
}
.vip-small-text {
  font-size:.75rem;
  color:#f5b614;
  margin-top:2px;
  display:block;
}

/* ── Find more button ───────────────────────────────────── */
.vip-findmore-wrap {
  display:flex;
  justify-content:center;
  padding:24px 0 0;
}
.vip-findmore-btn {
  background:#ffce01;
  color:#111;
  border:none;
  padding:12px 48px;
  font-size:.95rem;
  font-weight:700;
  border-radius:6px;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.vip-findmore-btn:hover { background:#e6b800; }

/* ── FAQ / T&C section ──────────────────────────────────── */
.vip-faq-section {
  background:url('/assets/vip/be_vip_girl.png') center right / auto 100% no-repeat,
             #1a1a1a;
  padding:40px 12%;
  display:flex;
  gap:32px;
}
@media(max-width:1023px){
  .vip-faq-section {
    flex-direction:column;
    padding:24px 16px;
    background:#1a1a1a;
  }
}

.vip-faq-col {
  flex:1;
  min-width:0;
}

.vip-faq-col h2 {
  font-size:1.1rem;
  font-weight:700;
  color:#fff;
  margin:0 0 20px;
  padding-bottom:10px;
  border-bottom:2px solid #f5b614;
}

.vip-faq-col p.faq-q {
  color:#f5b614;
  font-weight:700;
  font-size:.88rem;
  margin:16px 0 6px;
}

.vip-faq-col ul {
  padding-left:18px;
  margin:0 0 12px;
}
.vip-faq-col ul li {
  color:#ccc;
  font-size:.84rem;
  line-height:1.7;
  margin-bottom:4px;
}

.vip-tnc-col {
  flex:0 0 40%;
  position:relative;
}
@media(max-width:1023px){ .vip-tnc-col { flex:none; } }

.vip-tnc-col h2 {
  font-size:1.1rem;
  font-weight:700;
  color:#fff;
  margin:0 0 20px;
  padding-bottom:10px;
  border-bottom:2px solid #f5b614;
}

.vip-tnc-col p {
  color:#ccc;
  font-size:.84rem;
  line-height:1.7;
  margin-bottom:12px;
}

.vip-cashgirl {
  position:absolute;
  bottom:0;
  right:-12%;
  height:380px;
  object-fit:contain;
  pointer-events:none;
}
@media(max-width:1199px){ .vip-cashgirl { display:none; } }

/* ── Mobile joining info ─────────────────────────────────── */
.vip-join-mobile {
  background:#2c2c2c;
  border-radius:10px;
  padding:16px;
  margin:12px;
}
.vip-join-mobile p {
  color:#fff;
  font-size:.84rem;
  line-height:1.7;
  margin:0 0 8px;
}
.vip-join-mobile p.bold { font-weight:700; }
@media(min-width:1024px){ .vip-join-mobile { display:none; } }

/* Mobile tier table */
.vip-mobile-table {
  display:none;
  margin:0 12px 0;
}
@media(max-width:1023px){ .vip-mobile-table { display:block; } }
@media(min-width:1024px){ .vip-table-section .desktop-only { display:block; } }

.mobile-tier-row {
  display:flex;
  border-bottom:1px solid #333;
}
.mobile-tier-row .ml { flex:0 0 60%; color:#fff; font-size:.82rem; padding:10px 12px; background:#181818; border-right:1px solid #333; }
.mobile-tier-row .mr { flex:1; color:#ccc; font-size:.82rem; padding:10px 8px; text-align:center; background:#1a1a1a; }
.mobile-tier-cats { background:#2c2c2c; color:#f5b614; font-weight:700; font-size:.83rem; padding:8px 12px; }

/* Mobile carousel */
.vip-mobile-carousel {
  display:none;
  background:#1a1a1a;
  padding:16px 0 8px;
  text-align:center;
}
@media(max-width:1023px){ .vip-mobile-carousel { display:block; } }
@media(min-width:1024px){ .vip-mobile-carousel { display:none; } }

.carousel-row {
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:6px;
  padding:0 8px;
  overflow-x:auto;
  scrollbar-width:none;
}
.carousel-row::-webkit-scrollbar { display:none; }

.carousel-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  width:70px;
}
.carousel-item.active-tier img { transform:scale(1.2); }
.carousel-item img { width:60px; height:60px; object-fit:contain; }
.carousel-item span { color:#ccc; font-size:.72rem; }
.carousel-item.active-tier span { color:#f5b614; font-weight:700; }

/* Collapsing FAQ accordions (mobile) */
.vip-accordion-btn {
  width:100%;
  background:#2c2c2c;
  color:#fff;
  border:none;
  padding:14px 16px;
  text-align:left;
  font-size:.9rem;
  font-weight:700;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-radius:8px;
  margin-bottom:4px;
}
.vip-accordion-btn .arr { transition:transform .2s; }
.vip-accordion-btn.open .arr { transform:rotate(180deg); }
.vip-accordion-body {
  background:#fff;
  border-radius:0 0 8px 8px;
  padding:16px;
  display:none;
  margin-bottom:8px;
}
.vip-accordion-body.open { display:block; }
.vip-accordion-body p { font-size:.84rem; color:#333; margin:0 0 8px; }
.vip-accordion-body p.bold { font-weight:700; color:#111; }
.vip-accordion-body ul { padding-left:18px; margin:0 0 10px; }
.vip-accordion-body ul li { font-size:.83rem; color:#444; line-height:1.7; margin-bottom:3px; }
@media(min-width:1024px){
  .vip-accordion-wrapper { display:none; }
}
@media(max-width:1023px){
  .vip-faq-section { display:none; }
}

/* ============================================================
   VOUCHER PAGE
   ============================================================ */

/* ── Voucher page – mobile base ── */
.voucher-page {
    min-height: 60vh;
    padding-bottom: 80px;
    font-family: 'Hind Siliguri', sans-serif;
}

/* ── Mobile title bar (hidden on desktop) ── */
.voucher-title-bar {
    background: #1b1b2e;
    padding: 14px 16px;
    text-align: center;
}
.voucher-title-bar h1 {
    color: #f5c518;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    font-family: 'Hind Siliguri', sans-serif;
}

/* ── Desktop: hide mobile title bar ── */
@media(min-width:1024px) {
    .voucher-title-bar { display: none; }
    .voucher-page { padding-bottom: 0; }
}

/* ── Main white card ── */
.voucher-card {
    background: #fff;
    border-radius: 12px;
    margin: 14px;
    padding: 28px 24px 32px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
@media(min-width:1024px) {
    .voucher-card {
        margin: 0;
        border-radius: 10px;
        min-height: 400px;
    }
}

/* ── Desktop card title ── */
.voucher-card-title {
    display: none;
    font-size: 1.35rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 24px;
    font-family: 'Hind Siliguri', sans-serif;
}
@media(min-width:1024px) {
    .voucher-card-title { display: block; }
}

/* ── Question label ── */
.voucher-question {
    font-size: .97rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 12px;
    display: block;
    font-family: 'Hind Siliguri', sans-serif;
}

/* ── Input + button row ── */
.voucher-input-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.voucher-input {
    flex: 1;
    border: 1.5px solid #d9d9d9;
    border-radius: 24px;
    padding: 12px 18px;
    font-size: .97rem;
    color: #333;
    background: #fafafa;
    outline: none;
    transition: border-color .2s;
    font-family: 'Hind Siliguri', sans-serif;
}
.voucher-input::placeholder { color: #bbb; }
.voucher-input:focus { border-color: var(--blue-btn); background: #fff; }

/* ── Submit button ── */
.voucher-submit-btn {
    background: var(--blue-btn);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 12px 28px;
    font-size: .97rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
    font-family: 'Hind Siliguri', sans-serif;
    flex-shrink: 0;
}
.voucher-submit-btn:hover  { background: #1976d2; }
.voucher-submit-btn:disabled { background: #90a4ae; cursor: not-allowed; }

/* ── Message ── */
.voucher-msg {
    display: none;
    margin-top: 12px;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .92rem;
    font-weight: 600;
    font-family: 'Hind Siliguri', sans-serif;
}

/* ── History section ── */
.voucher-history-section {
    margin-top: 28px;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
}
.voucher-history-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 12px;
    font-family: 'Hind Siliguri', sans-serif;
}
.voucher-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.voucher-history-item {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vh-code  { font-size: .82rem; color: #888; font-family: monospace; letter-spacing: .5px; }
.vh-amount{ font-size: .95rem; font-weight: 700; color: #2e7d32; }
.vh-date  { font-size: .78rem; color: #aaa; margin-top: 2px; }
.voucher-history-empty {
    text-align: center;
    color: #aaa;
    font-size: .88rem;
    padding: 30px 0;
    font-family: 'Hind Siliguri', sans-serif;
}

/* ── Mobile history cards (outside card) ── */
@media(max-width:1023px) {
    .voucher-history-section { margin: 0 14px 20px; border-top: none; padding-top: 0; }
    .voucher-history-title { padding-left: 4px; border-left: 3px solid var(--blue-btn); padding-left: 8px; }
}

/* ============================================================
   WHEEL OF FORTUNE (WOF) PAGE
   ============================================================ */

/* ====================================================
   WHEEL OF FORTUNE PAGE
   ==================================================== */
.wof-page {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 15% 50%, rgba(200,30,190,0.55) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 50%, rgba(200,30,190,0.55) 0%, transparent 45%),
        linear-gradient(180deg, #1a0040 0%, #29005a 45%, #1a0040 100%);
    padding: 0.75rem 0 3rem;
    color: #fff;
    position: relative;
    overflow-x: hidden;
}
/* Glowing background orbs */
.wof-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.wof-glow--lt { width:380px;height:380px;background:rgba(210,30,200,.4);left:-80px;top:80px; }
.wof-glow--rt { width:380px;height:380px;background:rgba(210,30,200,.4);right:-80px;top:80px; }
.wof-glow--lb { width:280px;height:280px;background:rgba(180,20,200,.3);left:5%;bottom:120px; }
.wof-glow--rb { width:280px;height:280px;background:rgba(180,20,200,.3);right:5%;bottom:120px; }

.wof-inner {
    max-width:1200px;
    margin:0 auto;
    padding:0 1rem;
    position:relative;
    z-index:1;
}

/* ---- Breadcrumb ---- */
.wof-breadcrumb {
    font-size:.85rem;
    color:rgba(255,255,255,.55);
    padding-bottom:.5rem;
}
.wof-breadcrumb a { color:#fff; font-weight:600; text-decoration:none; }
.wof-breadcrumb::before { content:'• '; color:rgba(255,255,255,.4); }

/* ---- WINNERS Trophy header ---- */
.wof-trophy-hdr {
    text-align:center;
    margin-bottom:.75rem;
    padding:.25rem 0;
}
.wof-trophy-hdr__img { width:110px; height:auto; display:block; margin:0 auto .1rem; }
.wof-trophy-hdr__text {
    font-size:1.65rem;
    font-weight:900;
    letter-spacing:4px;
    text-transform:uppercase;
    background: linear-gradient(180deg,#fff 30%,#ffd700 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    text-shadow:none;
    filter: drop-shadow(0 0 12px rgba(255,200,0,.7));
}

/* ---- Main 3-col layout ---- */
.wof-main {
    display:grid;
    grid-template-columns:210px 1fr 270px;
    gap:1.25rem;
    align-items:start;
}

/* ---- Left: Prize list ---- */
.wof-prizes {
    background:rgba(8,4,48,.78);
    border-radius:12px;
    padding:.6rem .4rem;
    border:1px solid rgba(255,200,0,.18);
}
.wof-prize-item {
    display:flex;
    align-items:center;
    gap:.45rem;
    padding:.38rem .45rem;
    margin-bottom:.3rem;
    border-radius:8px;
}
.wof-prize-rank {
    width:26px;height:26px;border-radius:50%;
    background:linear-gradient(135deg,#1e5cf0,#0a3090);
    display:flex;align-items:center;justify-content:center;
    font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0;
    box-shadow:0 2px 6px rgba(30,92,240,.5);
}
.wof-prize-img { width:30px;height:30px;object-fit:contain; flex-shrink:0; }
.wof-prize-amounts {
    flex:1;display:flex;flex-direction:column;gap:0;
    font-size:.85rem;font-weight:700;color:#fff;
    line-height:1.25;
}
.wof-prize-amounts span:last-child { color:rgba(255,255,255,.5);font-size:.78rem; }

/* ---- Center: Wheel wrap ---- */
.wof-wheel-wrap {
    display:flex;flex-direction:column;align-items:center;gap:.5rem;
}
.wof-period {
    font-size:.88rem;color:rgba(255,255,255,.75);letter-spacing:.3px;
    text-align:center;
}

/* Wheel area row — three cells: coin/spin info | wheel | coin display */
.wof-wheel-row {
    display:flex;align-items:center;gap:1rem;
}
.wof-cps {
    text-align:center;min-width:70px;flex-shrink:0;
}
.wof-cps__coin { width:42px;height:42px;object-fit:contain;display:block;margin:0 auto .2rem; }
.wof-cps__num {
    display:block;font-size:2rem;font-weight:900;color:#ffd700;line-height:1;
}
.wof-cps__label { font-size:.72rem;color:rgba(255,255,255,.7);display:block; }
.wof-cps__sub   { font-size:.72rem;color:rgba(255,255,255,.8);display:block; }

.wof-canvas-wrap {
    position:relative;display:inline-block;
}
/* Red gem pointer above wheel */
.wof-pointer {
    position:absolute;top:-14px;left:50%;
    transform:translateX(-50%);
    width:20px;height:20px;
    background:radial-gradient(circle at 35% 35%,#ff8888,#cc0000);
    border-radius:50% 50% 50% 0;
    transform:translateX(-50%) rotate(-45deg);
    box-shadow:0 0 10px rgba(255,0,0,.55);
    z-index:10;
}
#wofCanvas {
    display:block;
    border-radius:50%;
    cursor:pointer;
}

/* Decorative floating coins */
.wof-coin-deco {
    position:absolute;
    width:38px;height:38px;
    object-fit:contain;
    pointer-events:none;
    animation:wofCoinFloat 2.2s ease-in-out infinite alternate;
}
@keyframes wofCoinFloat {
    from { transform:translateY(0) rotate(-8deg); }
    to   { transform:translateY(-12px) rotate(10deg); }
}

.wof-coins-display {
    min-width:70px;flex-shrink:0;
    background:rgba(8,4,48,.85);
    border:2px solid rgba(255,200,0,.45);
    border-radius:10px;
    padding:.5rem .7rem;
    text-align:center;
}
.wof-coins-display__num {
    display:block;font-size:2rem;font-weight:900;color:#fff;line-height:1;
}
.wof-coins-display small { color:rgba(255,255,255,.65);font-size:.72rem; }

/* Spin button */
.wof-spin-btn {
    background:linear-gradient(135deg,#ffd700,#c8a000);
    color:#1a0040;border:none;border-radius:25px;
    padding:.6rem 2.2rem;font-size:1rem;font-weight:800;
    cursor:pointer;letter-spacing:.5px;
    box-shadow:0 4px 16px rgba(200,160,0,.45);
    transition:transform .15s,box-shadow .15s;
    margin-top:.35rem;
}
.wof-spin-btn:hover { transform:scale(1.06);box-shadow:0 6px 24px rgba(200,160,0,.55); }
.wof-spin-btn:active { transform:scale(.96); }
.wof-spin-btn:disabled { opacity:.5;cursor:not-allowed;transform:none; }

/* ---- Right: Winners list ---- */
.wof-winners {
    background:rgba(8,4,48,.78);
    border-radius:12px;
    border:1px solid rgba(255,200,0,.18);
    overflow:hidden;
}
.wof-winners-tabs {
    display:flex;background:rgba(0,0,24,.5);position:relative;
}
.wof-winners-tab {
    flex:1;padding:.58rem .4rem;text-align:center;
    font-size:.78rem;font-weight:600;
    color:rgba(255,255,255,.55);cursor:pointer;
    border:none;background:none;transition:color .2s;
}
.wof-winners-tab.active { color:#fff; }
.wof-winners-tab-indicator {
    position:absolute;bottom:0;height:2px;
    width:50%;background:#ffd700;
    transition:left .2s ease;
}
.wof-winners-list {
    max-height:430px;overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;
}
.wof-winners-list::-webkit-scrollbar { width:3px; }
.wof-winners-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.2);border-radius:2px; }
.wof-winner-item {
    display:flex;justify-content:space-between;align-items:center;
    padding:.38rem .7rem;border-bottom:1px solid rgba(255,255,255,.04);
    font-size:.77rem;gap:.4rem;
}
.wof-winner-date { color:rgba(255,255,255,.45);flex-shrink:0; }
.wof-winner-name { flex:1;color:#e8e8ff; }
.wof-winner-amt  { color:#ffd700;font-weight:700;flex-shrink:0; }

/* ---- Wheel type selector ---- */
.wof-type-row {
    display:flex;justify-content:center;align-items:center;
    gap:14px;margin:1.5rem 0 1rem;
    flex-wrap:wrap;
}
.wof-type-nav {
    background:transparent;border:none;cursor:pointer;padding:4px;
    display:flex;align-items:center;
}
.wof-type-nav img { width:28px;height:40px; }
.wof-type-btn {
    background:rgba(8,4,48,.78);
    border:2px solid rgba(255,200,0,.28);
    border-radius:10px;
    padding:.5rem .75rem;
    color:rgba(255,255,255,.65);
    font-size:.74rem;cursor:pointer;
    text-align:center;min-width:105px;
    transition:all .2s;
}
.wof-type-btn.active {
    border-color:#ffd700;
    background:rgba(200,160,0,.18);
    color:#fff;transform:scale(1.08);
}
.wof-type-btn:hover:not(.active) { border-color:rgba(255,200,0,.55);color:#fff; }
.wof-type-btn__wheel {
    width:62px;height:62px;object-fit:contain;
    display:block;margin:0 auto .35rem;border-radius:50%;
}
.wof-type-btn__coins { font-size:.7rem;color:#ffd700;font-weight:700;display:block;margin-bottom:.15rem; }
.wof-type-btn__name  { font-size:.7rem;color:inherit;display:block;line-height:1.35; }

/* ---- Terms section ---- */
.wof-terms {
    background:rgba(8,4,40,.88);
    border-radius:12px;border:1px solid rgba(255,200,0,.12);
    padding:1.5rem 1.75rem;margin-top:.5rem;
    color:rgba(255,255,255,.82);font-size:.9rem;line-height:1.7;
}
.wof-terms__title-wrap { text-align:center;margin-bottom:1.1rem; }
.wof-terms__title {
    display:inline-block;
    background:linear-gradient(135deg,#c8a000,#ffd700);
    color:#1a0040;font-weight:800;font-size:1.1rem;
    padding:.42rem 2.2rem;border-radius:25px;letter-spacing:.5px;
}
.wof-terms p { margin-bottom:.65rem; }
.wof-terms strong { color:#ffd700; }

/* ---- Responsive — tablet ---- */
@media (max-width:960px) and (min-width:601px) {
    .wof-main { grid-template-columns:180px 1fr 220px; gap:.75rem; }
    .wof-wheel-row { gap:.5rem; }
    .wof-type-btn { min-width:90px; }
}

/* ---- Responsive — mobile (matches screenshot layout) ---- */
@media (max-width:600px) {
    .wof-page { padding:.4rem 0 4rem; }
    .wof-inner { padding:0 .3rem; }
    .wof-breadcrumb { font-size:.75rem; padding-bottom:.25rem; }

    /* Trophy header — compact */
    .wof-trophy-hdr { margin-bottom:.3rem; }
    .wof-trophy-hdr__img { width:62px; }
    .wof-trophy-hdr__text { font-size:1.05rem; letter-spacing:2px; }

    /* 3-column grid kept on mobile */
    .wof-main {
        grid-template-columns: 78px 1fr 108px;
        gap: .2rem;
        align-items: start;
    }
    /* Prevent any grid child from overflowing its column */
    .wof-main > * { min-width: 0; overflow: hidden; }

    /* ── Left: Prize list ── */
    .wof-prizes {
        padding: .25rem .15rem;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        gap: 0;
        border-width: 1px;
    }
    .wof-prize-item {
        padding: .18rem .15rem;
        gap: .18rem;
        margin-bottom: .1rem;
        border-radius: 4px;
    }
    .wof-prize-rank {
        width: 18px; height: 18px;
        font-size: .58rem;
        flex-shrink: 0;
    }
    .wof-prize-img { width: 20px; height: 20px; }
    .wof-prize-amounts { font-size: .65rem; }
    .wof-prize-amounts span:last-child { font-size: .6rem; }

    /* ── Center: Wheel ── */
    .wof-wheel-wrap { gap: .3rem; }
    .wof-period { font-size: .7rem; }

    /* Keep wheel-row horizontal: cps | canvas | coins */
    .wof-wheel-row {
        flex-direction: row;
        gap: .2rem;
        align-items: center;
        justify-content: center;
    }

    .wof-cps {
        display: block;          /* show it */
        min-width: 44px;
        flex-shrink: 0;
    }
    .wof-cps__coin  { width: 26px; height: 26px; margin-bottom:.1rem; }
    .wof-cps__num   { font-size: 1.1rem; }
    .wof-cps__label { font-size: .6rem; }
    .wof-cps__sub   { font-size: .6rem; }

    #wofCanvas {
        width:  calc(100vw - 78px - 105px - 1.25rem - 88px) !important;
        height: calc(100vw - 78px - 105px - 1.25rem - 88px) !important;
        min-width: 160px; max-width: 220px;
        min-height:160px; max-height:220px;
    }
    .wof-coin-deco { width: 22px; height: 22px; }

    .wof-coins-display {
        display: block;          /* show it */
        min-width: 44px;
        flex-shrink: 0;
        padding: .3rem .35rem;
        border-radius: 6px;
        border-width: 1px;
    }
    .wof-coins-display__num { font-size: 1.1rem; }
    .wof-coins-display small { font-size: .6rem; }

    .wof-spin-btn {
        padding: .4rem 1.4rem;
        font-size: .82rem;
        margin-top: .2rem;
    }

    /* ── Right: Winners ── */
    .wof-winners { border-radius: 6px; overflow: hidden; width: 100%; }
    .wof-winners-tab { font-size: .58rem; padding: .4rem .15rem; }
    .wof-winners-list { max-height: 290px; }
    .wof-winner-item {
        padding: .26rem .3rem;
        font-size: .6rem;
        gap: .15rem;
    }
    .wof-winner-date { display: none; }
    .wof-winner-name { font-size: .6rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52px; }
    .wof-winner-amt  { font-size: .6rem; }

    /* ── Type selector row ── */
    .wof-type-row { gap: 6px; margin: .9rem 0 .6rem; flex-wrap: nowrap; }
    .wof-type-nav img { width: 20px; height: 28px; }
    .wof-type-btn {
        min-width: 0;
        flex: 1;
        padding: .35rem .3rem;
        border-radius: 7px;
        border-width: 1px;
    }
    .wof-type-btn__wheel { width: 48px; height: 48px; margin-bottom: .2rem; }
    .wof-type-btn__coins { font-size: .6rem; }
    .wof-type-btn__name  { font-size: .6rem; }

    /* ── Terms ── */
    .wof-terms {
        padding: .85rem .8rem;
        font-size: .8rem;
        border-radius: 8px;
        margin-top: .4rem;
    }
    .wof-terms__title { font-size: .88rem; padding: .35rem 1.2rem; }
    .wof-terms p { margin-bottom: .45rem; }
}

/* ============================================================
   INCLUDES - HEADER
   ============================================================ */

/* ═══ Desktop Account Layout (1024px+) ══════════════════════════════════════ */
@media(max-width:1023px){
  .deskAcc-topnav { display:none !important; }
  .deskAcc-left   { display:none !important; }
  .deskAcc-layout { display:block !important; padding:0 !important; margin:0 !important; }
  .deskAcc-right  { width:100% !important; }
}
@media(min-width:1024px){
  /* — Grey page background — */
  body { background:#ebebeb !important; }
  .page-wrapper { background:transparent !important; }

  /* — Top nav: grey outer, white rounded card inner — */
  .deskAcc-topnav {
    background:#ebebeb;
    padding:16px 0 0;
  }
  .deskAcc-topnav__inner {
    max-width:calc(1260px - 2rem);
    margin:0 auto;
    padding:10px 1rem;
    background:#fff;
    border-radius:12px;
    box-shadow:0 1px 8px rgba(0,0,0,.09);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px 6px;
    box-sizing:border-box;
    width:calc(100% - 2rem);
  }
  .deskAcc-nav-btn {
    background:none;
    border:none;
    color:#444;
    font-size:1.05rem;
    font-weight:500;
    font-family:'Hind Siliguri',sans-serif;
    padding:10px 22px;
    cursor:pointer;
    text-decoration:none;
    display:inline-block;
    line-height:1.3;
    white-space:nowrap;
    border-radius:30px;
    transition:color .15s, background .15s;
  }
  .deskAcc-nav-btn:hover { background:#f5f5f5; color:#111; }
  .deskAcc-nav-btn.active {
    background:#f5c418 !important;
    color:#111 !important;
    font-weight:700 !important;
    border-radius:30px !important;
  }

  /* — Two-column layout — */
  .deskAcc-layout {
    display:flex;
    max-width:1260px;
    width:100%;
    margin:0 auto;
    padding:14px 1rem 32px;
    gap:16px;
    align-items:flex-start;
    box-sizing:border-box;
    background:#ebebeb;
  }

  /* — Left panel: white card — */
  .deskAcc-left {
    width:280px;
    flex-shrink:0;
    background:#fff;
    border-radius:10px;
    box-shadow:0 1px 6px rgba(0,0,0,.08);
    padding:16px 14px;
    align-self:flex-start;
    box-sizing:border-box;
  }
  .deskAcc-right { flex:1; min-width:0; border-radius: 10px;}

  /* — Left panel inner elements — */
  .dlp-welcome {
    font-size:.88rem;font-weight:700;color:#333;
    margin-bottom:8px;padding-left:2px;
    font-family:'Hind Siliguri',sans-serif;
  }
  .dlp-card {
    background:#f5f5f5;
    border-radius:10px;
    padding:13px 14px;
    margin-bottom:8px;
    font-family:'Hind Siliguri',sans-serif;
  }
  .dlp-row { display:flex;align-items:center;gap:8px; }
  .dlp-svg-icon { width:20px;height:20px;flex-shrink:0;fill:#888; }
  .dlp-img-icon { width:22px;height:22px;object-fit:contain;flex-shrink:0; }
  .dlp-blue  { color:var(--blue-btn);font-weight:700;font-size:.88rem; }
  .dlp-label { font-size:.82rem;color:#333; }
  .dlp-spacer{ margin-left:auto; }
  .dlp-bar   { height:4px;background:#ddd;border-radius:2px;margin:7px 0 3px;overflow:hidden; }
  .dlp-bar__fill { height:100%;background:#f5c518;border-radius:2px;transition:width .4s; }
  .dlp-bar__fill--done { background:#f5c518;width:100%; }
  .dlp-prog-text { font-size:.74rem;color:#666; }
  .dlp-divider { border:none;border-top:1px solid #ddd;margin:8px 0; }
  .dlp-g-text  { font-size:.82rem;color:#555;margin-bottom:3px; }
  .dlp-action-btn {
    width:100%;background:#f5c518;color:#111;border:none;border-radius:20px;
    padding:9px 14px;font-size:.84rem;font-weight:700;cursor:pointer;
    margin-top:8px;font-family:inherit;transition:background .15s;
  }
  .dlp-action-btn:hover { background:#e6b800; }
  .dlp-ref-p {
    font-size:.77rem;color:#444;line-height:1.5;margin:8px 0 6px;
  }
  .dlp-share-wrap { display:flex;gap:8px;align-items:center; }
  .dlp-ref-code {
    flex:1;background:#e0e0e0;border-radius:6px;padding:8px 10px;
    font-size:.85rem;color:var(--blue-btn);font-weight:700;text-align:center;
    word-break:break-all;
  }
  .dlp-share-btn {
    background:var(--blue-btn);border:none;border-radius:6px;
    width:36px;height:36px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background .15s;
  }
  .dlp-share-btn:hover { background:var(--blue-btn-hover); }
  .dlp-hidden { display:none !important; }
  .dlp-guest-msg {
    background:#f5f5f5;border-radius:10px;padding:18px 14px;
    text-align:center;font-size:.84rem;color:#888;
    font-family:'Hind Siliguri',sans-serif;margin-bottom:8px;
  }
}

/* ============================================================
   INCLUDES - FOOTER
   ============================================================ */

.wm-tab { flex:1; background: #1807c9; border:1.5px solid #2d2f45; color:#fff; border-radius:8px; padding:7px 4px; font-size:.82rem; cursor:pointer; font-weight:600; transition:all .2s; }
.wm-tab.active { background: #f6dd3c; border-color:var(--accent); color:#111; }
.wm-wallet-item { display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.04); border:1px solid #2d2f45; border-radius:9px; padding:10px 12px; margin-bottom:6px; }

/* ── Site Notification tab badge ────────────────────── */
.notif-tab--site { position: relative; }
.notif-site-badge {
  position: absolute; top: 2px; right: 4px;
  background: #f44336; color: #fff;
  font-size: .55rem; font-weight: 800;
  min-width: 14px; height: 14px;
  border-radius: 7px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.notif-tab--site.active { background: linear-gradient(90deg,#7c4dff,#c94bff); border-color: transparent; color: #fff; }

/* ── Site Notifications Popup ───────────────────────── */
.snp-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
  animation: snpFadeIn .25s ease;
}
@keyframes snpFadeIn { from { opacity: 0; } to { opacity: 1; } }
.snp-overlay.open { display: flex; }
.snp-box {
  position: relative;
  background: #fff;
  border-radius: 20px;
  width: 100%; max-width: 420px;
  max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
  animation: snpSlideUp .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes snpSlideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.snp-header {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.1rem 1.25rem .9rem;
  background: linear-gradient(135deg,#7c4dff 0%,#c94bff 100%);
  color: #fff; flex-shrink: 0;
}
.snp-header-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.snp-header-text { flex: 1; }
.snp-title    { font-size: 1rem; font-weight: 800; line-height: 1.2; }
.snp-subtitle { font-size: .75rem; opacity: .8; margin-top: .1rem; }
.snp-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.2); border: none;
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: background .15s;
}
.snp-close:hover { background: rgba(255,255,255,.35); }
.snp-list {
  flex: 1; overflow-y: auto;
  padding: .75rem 1.25rem;
  -webkit-overflow-scrolling: touch;
}
.snp-card {
  background: #f8f8fc; border-radius: 14px;
  border: 1px solid #ebebf5;
  padding: .9rem 1rem; margin-bottom: .6rem;
  transition: box-shadow .15s;
}
.snp-card:last-child { margin-bottom: 0; }
.snp-card--new { border-left: 3px solid #7c4dff; background: #f5f0ff; }
.snp-card__top { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .35rem; }
.snp-card__icon {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.snp-card__icon--info     { background: #e8f4fd; color: #2196f3; }
.snp-card__icon--warning  { background: #fff8e1; color: #ff9800; }
.snp-card__icon--success  { background: #e8f8ef; color: #26b55b; }
.snp-card__icon--deposit  { background: #e8f8ef; color: #26b55b; }
.snp-card__icon--withdrawal { background: #fff4e5; color: #ff9800; }
.snp-card__title { font-size: .84rem; font-weight: 700; color: #1a1a2e; flex: 1; line-height: 1.3; }
.snp-card__new-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #7c4dff; flex-shrink: 0; margin-top: 4px;
}
.snp-card__msg  { font-size: .78rem; color: #555; line-height: 1.45; word-break: break-word; }
.snp-card__time { font-size: .68rem; color: #aaa; margin-top: .3rem; }
.snp-footer {
  padding: .75rem 1.25rem 1rem;
  display: flex; gap: .65rem; flex-shrink: 0;
  border-top: 1px solid #f0f0f0;
}
.snp-ok-btn {
  flex: 1; padding: .55rem;
  border: 1.5px solid #ddd; border-radius: 12px;
  background: #fff; color: #555; font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: border-color .15s;
}
.snp-ok-btn:hover { border-color: #aaa; }
.snp-view-btn {
  flex: 2; padding: .55rem;
  border: none; border-radius: 12px;
  background: linear-gradient(90deg,#7c4dff,#c94bff);
  color: #fff; font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
}
.snp-view-btn:hover { opacity: .88; }

.notif-item{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.85rem 0;border-bottom:1px solid #f0f0f0;
}
.notif-item:last-child{border-bottom:none;}
.notif-icon{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;
}
.notif-icon--login     {background:#e8f4fd;color:#2196f3;}
.notif-icon--deposit   {background:#e8f8ef;color:#26b55b;}
.notif-icon--withdrawal{background:#fff4e5;color:#ff9800;}
.notif-icon--admin     {background:#f3e8ff;color:#7c4dff;}
.notif-body{flex:1;min-width:0;}
.notif-title{font-size:.83rem;font-weight:700;color:#1a1a2e;margin-bottom:.18rem;}
.notif-msg  {font-size:.75rem;color:#666;margin-bottom:.25rem;word-break:break-word;}
.notif-meta {display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.notif-time {font-size:.68rem;color:#aaa;}
.notif-badge{
  font-size:.62rem;font-weight:700;padding:.1rem .45rem;
  border-radius:2rem;text-transform:uppercase;
}
.notif-badge--success   {background:#e8f8ef;color:#26b55b;}
.notif-badge--rejected  {background:#ffeaea;color:#f44336;}
.notif-badge--pending   {background:#fff8e1;color:#f59e0b;}
.notif-badge--info      {background:#e8f4fd;color:#2196f3;}
.notif-amount{font-size:.78rem;font-weight:700;color:#1a1a2e;margin-left:auto;flex-shrink:0;}

/* ── Withdrawal Requests Modal ─────────────────────────── */
.wrm-overlay{
  position:fixed;inset:0;z-index:2200;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;
  padding:1rem;
}
.wrm-overlay.open{display:flex;}
.wrm-box{
  position:relative;
  background:#fff;
  border-radius:20px;
  width:100%;max-width:400px;
  max-height:85vh;
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  padding:1.5rem 1.5rem 1.75rem;
}
/* Close (X) button — top right */
.wrm-close{
  position:absolute;top:.85rem;right:.85rem;
  width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.07);border:none;
  color:#444;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s;
  flex-shrink:0;
}
.wrm-close:hover{background:rgba(0,0,0,.14);color:#111;}
/* Title */
.wrm-title{
  font-size:1.15rem;font-weight:800;
  color:#1a1a2e;
  text-align:center;
  margin-bottom:1rem;
  padding-right:1.5rem; /* avoid overlap with X */
}
/* Action row */
.wrm-action-row{
  display:flex;justify-content:flex-end;
  margin-bottom:.75rem;
}
.wrm-wd-btn{
  background:linear-gradient(90deg,#7c4dff,#c94bff);
  border:none;border-radius:20px;
  padding:.38rem 1.1rem;
  color:#fff;font-size:.82rem;font-weight:700;
  cursor:pointer;transition:opacity .18s;white-space:nowrap;
}
.wrm-wd-btn:hover{opacity:.88;}
/* List */
.wrm-list{
  overflow-y:auto;flex:1;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.12) transparent;
}
.wrm-loading,.wrm-empty{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:3rem 1rem;
  color:#999;font-size:.88rem;text-align:center;
  gap:.65rem;
}
.wrm-empty-icon{
  width:64px;height:64px;border-radius:50%;
  background:#f0f0f5;
  display:flex;align-items:center;justify-content:center;
}
.wrm-empty-icon svg{width:28px;height:28px;fill:#aaa;}
.wrm-empty-sub{font-size:.78rem;color:#bbb;}
/* Row card */
.wrm-item{
  background:#f8f8fc;border-radius:12px;
  padding:.85rem 1rem;margin-bottom:.55rem;
  border:1px solid #ebebf5;
}
.wrm-item__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem;}
.wrm-item__method{font-size:.82rem;font-weight:700;color:#1a1a2e;text-transform:uppercase;}
.wrm-item__amount{font-size:1rem;font-weight:700;color:#1a1a2e;}
.wrm-item__mid{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem;}
.wrm-item__account{font-size:.78rem;color:#666;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wrm-badge{
  display:inline-block;border-radius:20px;
  padding:.18rem .65rem;font-size:.72rem;font-weight:700;
  white-space:nowrap;flex-shrink:0;
}
.wrm-badge--pending {background:rgba(255,193,7,.15);color:#b8860b;border:1px solid rgba(255,193,7,.35);}
.wrm-badge--approved{background:rgba(38,181,91,.12);color:#1a7a3f;border:1px solid rgba(38,181,91,.3);}
.wrm-badge--rejected{background:rgba(220,53,69,.1);color:#c0392b;border:1px solid rgba(220,53,69,.25);}
.wrm-item__date{font-size:.72rem;color:#aaa;}
.wrm-item__order{font-size:.7rem;color:#bbb;margin-top:.15rem;}
/* Deposit history filter tabs */
.dep-filter-tabs{
  display:flex;gap:.4rem;
  margin-bottom:.75rem;
  flex-wrap:wrap;
}
.dep-filter-btn{
  flex:1;min-width:60px;
  padding:.35rem .5rem;
  border-radius:20px;
  border:1.5px solid #e0e0ef;
  background:#f5f5fa;
  color:#666;
  font-size:.75rem;font-weight:700;
  cursor:pointer;
  transition:all .18s;
  white-space:nowrap;
  text-align:center;
}
.dep-filter-btn.active{
  background:linear-gradient(90deg,#7c4dff,#c94bff);
  border-color:transparent;
  color:#fff;
}
.dep-filter-btn--pending.active{
  background:linear-gradient(90deg,#f59e0b,#d97706);
  border-color:transparent;
  color:#fff;
}
.dep-filter-btn--success.active{
  background:linear-gradient(90deg,#22c55e,#16a34a);
  border-color:transparent;
  color:#fff;
}
.dep-filter-btn--rejected.active{
  background:linear-gradient(90deg,#ef4444,#b91c1c);
  border-color:transparent;
  color:#fff;
}

/* ── Settings Modal ─────────────────────────────────────────────── */
.stm-overlay{
  position:fixed;inset:0;z-index:2200;
  background:rgba(0,0,0,.55);
  display:none;align-items:center;justify-content:center;
  padding:1rem;
}
.stm-overlay.open{display:flex;}
.stm-box{
  background:#f4f4f8;
  border-radius:20px;
  width:100%;max-width:420px;
  max-height:90vh;overflow-y:auto;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  -webkit-overflow-scrolling:touch;
}
.stm-header{
  position:sticky;top:0;z-index:10;
  background:#f4f4f8;
  display:flex;align-items:center;justify-content:center;
  padding:1.1rem 3rem;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.stm-title{font-weight:700;font-size:1.1rem;color:#1a1a2e;}
.stm-close{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:#888;font-size:1.2rem;cursor:pointer;
  padding:4px 7px;border-radius:50%;transition:background .15s;line-height:1;
}
.stm-close:hover{background:rgba(0,0,0,.08);}
/* Section */
.stm-section{
  background:#fff;border-radius:14px;
  margin:.75rem;padding:1rem;
  box-shadow:0 1px 4px rgba(0,0,0,.07);
}
.stm-section-title{font-weight:700;font-size:.9rem;color:#1a1a2e;margin-bottom:.75rem;}
/* Row (label + toggle) */
.stm-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:.45rem 0;
  border-top:1px solid #f0f0f5;
}
.stm-row:first-of-type{border-top:none;}
.stm-label{font-size:.88rem;color:#333;}
/* Toggle switch */
.stm-toggle{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0;}
.stm-toggle input{opacity:0;width:0;height:0;position:absolute;}
.stm-toggle-track{
  position:absolute;inset:0;border-radius:26px;
  background:#d0d0dc;transition:background .2s;cursor:pointer;
}
.stm-toggle input:checked + .stm-toggle-track{background:#7c4dff;}
.stm-toggle-thumb{
  position:absolute;top:3px;left:3px;
  width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .2s;
}
.stm-toggle input:checked + .stm-toggle-track .stm-toggle-thumb{transform:translateX(20px);}
/* Password inputs */
.stm-input-wrap{
  display:flex;align-items:center;
  background:#f0f0f5;border-radius:10px;
  margin-bottom:.55rem;overflow:hidden;
  border:1.5px solid transparent;transition:border-color .18s;
}
.stm-input-wrap:focus-within{border-color:#7c4dff;}
.stm-input-icon{padding:0 .6rem;color:#aaa;font-size:.95rem;pointer-events:none;}
.stm-input{
  flex:1;background:transparent;border:none;outline:none;
  padding:.6rem .3rem;font-size:.9rem;color:#1a1a2e;
}
.stm-input::placeholder{color:#bbb;}
.stm-eye-btn{
  background:none;border:none;color:#aaa;padding:0 .65rem;cursor:pointer;font-size:.9rem;
  transition:color .15s;flex-shrink:0;
}
.stm-eye-btn:hover{color:#7c4dff;}
/* Change password button */
.stm-pwd-btn{
  width:100%;padding:.7rem;margin-top:.2rem;
  background:#fff;border:2px solid #7c4dff;
  border-radius:10px;font-size:.93rem;font-weight:700;color:#1a1a2e;
  cursor:pointer;transition:all .2s;
}
.stm-pwd-btn:hover{background:#7c4dff;color:#fff;}
/* Telegram row */
.stm-tg-row{
  display:flex;align-items:center;
  background:#f0f0f5;border-radius:10px;overflow:hidden;
  border:1.5px solid transparent;transition:border-color .18s;
}
.stm-tg-row:focus-within{border-color:#7c4dff;}
.stm-tg-at{padding:0 .5rem 0 .75rem;color:#888;font-size:.95rem;font-weight:600;}
.stm-tg-input{
  flex:1;background:transparent;border:none;outline:none;
  padding:.6rem .3rem;font-size:.9rem;color:#1a1a2e;
}
.stm-tg-input::placeholder{color:#bbb;}
.stm-tg-save-btn{
  background:none;border:none;padding:0 .75rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .15s;
}
.stm-tg-save-btn:hover{opacity:.7;}
/* Telegram notice */
.stm-tg-notice{
  background:#5a4a8a;border-radius:8px;
  padding:.6rem .85rem;font-size:.8rem;color:#fff;
  margin-bottom:.65rem;line-height:1.45;
}
/* Select */
.stm-select-wrap{position:relative;}
.stm-select{
  width:100%;appearance:none;-webkit-appearance:none;
  background:#f0f0f5;border:1.5px solid transparent;border-radius:10px;
  padding:.6rem 2.2rem .6rem .85rem;font-size:.9rem;color:#1a1a2e;
  cursor:pointer;outline:none;transition:border-color .18s;
}
.stm-select:focus{border-color:#7c4dff;}
.stm-select-chev{
  position:absolute;right:.6rem;top:50%;transform:translateY(-50%);
  width:22px;height:22px;fill:#888;pointer-events:none;
}
/* Messages */
.stm-msg{
  border-radius:8px;padding:.45rem .75rem;font-size:.82rem;font-weight:600;margin:.4rem 0;
}
.stm-msg.ok {background:rgba(60,210,120,.15);color:#1a8a50;border:1px solid rgba(60,210,120,.3);}
.stm-msg.err{background:rgba(220,50,50,.1);color:#c0392b;border:1px solid rgba(220,50,50,.25);}
/* Theme color swatches */
.stm-theme-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;
}
.stm-theme-swatch{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  background:#f5f5fa;border:2px solid transparent;
  border-radius:12px;padding:.55rem .3rem .45rem;
  cursor:pointer;transition:all .18s;
}
.stm-theme-swatch:hover{background:#ededf5;border-color:#ccc;}
.stm-theme-swatch.active{
  border-color:#7c4dff;background:#f0ecff;
  box-shadow:0 0 0 3px rgba(124,77,255,.15);
}
.stm-swatch-dot{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.stm-swatch-lbl{
  font-size:.58rem;font-weight:700;color:#444;
  text-align:center;line-height:1.2;
}

/* ── Profile Modal ──────────────────────────────────────────────── */
.pm-overlay{
  position:fixed;inset:0;z-index:2100;
  background:rgba(0,0,0,.75);
  display:none;align-items:center;justify-content:center;
  padding:1rem;
}
.pm-overlay.open{display:flex;}
.pm-box{
  background:#fff;
  border-radius:16px;
  width:100%;max-width:420px;
  max-height:90vh;overflow-y:auto;
  position:relative;
  box-shadow:0 16px 60px rgba(0,0,0,.6);
  -webkit-overflow-scrolling:touch;
}
.pm-header{
  position:sticky;top:0;z-index:10;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  padding:1rem 3rem;
  border-bottom:1px solid rgba(0,0,0,.1);
}
.pm-title{font-weight:700;font-size:1.05rem;color:#000;}
.pm-close{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:rgba(0,0,0,.5);font-size:1.2rem;cursor:pointer;
  line-height:1;padding:4px 6px;border-radius:50%;transition:color .2s;
}
.pm-close:hover{color:#000;}
/* Card */
.pm-card{
  background: #fbe308;
  border-radius:14px;margin:1rem;padding:1rem;
  border:1px solid rgba(255,255,255,.07);
}
.pm-card__top{display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem;}
.pm-card__avatar{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,#7c4dff,#c94bff);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.2rem;color:#fff;flex-shrink:0;
}
.pm-card__info{flex:1;min-width:0;}
.pm-card__name{font-weight:700;font-size:1rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pm-card__id{font-size:.78rem;color:rgba(255,255,255,.5);margin-top:.15rem;}
.pm-card__bal{
  display:flex;align-items:center;gap:.6rem;
  background:rgba(0,0,0,.25);border-radius:10px;padding:.6rem .75rem;
  margin-bottom:.8rem;
}
.pm-card__bal-label{flex:1;font-size:.85rem;color:rgba(255,255,255,.6);}
.pm-card__bal-val{font-size:1rem;font-weight:700;color:#fff;white-space:nowrap;}
.pm-card__btns{display:flex;gap:.6rem;}
.pm-btn{
  flex:1;padding:.6rem .5rem;border-radius:10px;font-size:.88rem;font-weight:700;
  border:none;cursor:pointer;transition:opacity .18s;
}
.pm-btn:hover{opacity:.85;}
.pm-btn--outline{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.2);}
.pm-btn--primary{background:linear-gradient(90deg,rgb(124,77,255) 0%,rgb(201,75,255) 100%);color:#fff;}
/* Menu */
.pm-menu{padding:.25rem .75rem .75rem;}
.pm-menu__item{
  display:flex;align-items:center;gap:.75rem;
  padding:.75rem .5rem;border-radius:10px;
  text-decoration:none;color:#fff;
  transition:background .15s;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.pm-menu__item:last-child{border-bottom:none;}
.pm-menu__item:hover{background:rgba(255,255,255,.06);}
.pm-menu__icon{
  width:36px;height:36px;border-radius:10px;
  background:rgba(124,77,255,.25);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.pm-menu__item--exit .pm-menu__icon{background:rgba(232,48,90,.2);}
.pm-menu__text{flex:1;min-width:0;}
.pm-menu__title{font-size:.88rem;font-weight:600;color:#fff;}
.pm-menu__sub{font-size:.75rem;color:rgba(255,255,255,.45);margin-top:.1rem;}
.pm-menu__chev{width:16px;height:16px;fill:rgba(255,255,255,.3);flex-shrink:0;}

/* ── Wallet Modal ──────────────────────────────────────────────── */
.mw-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.55);
  display:none;align-items:center;justify-content:center;
  padding:1rem;
}
.mw-overlay.open{display:flex;}
.mw-box{
  background:#fff;
  border-radius:16px;
  width:100%;max-width:460px;
  max-height:90vh;overflow-y:auto;
  position:relative;
  box-shadow:0 16px 60px rgba(0,0,0,.25);
  -webkit-overflow-scrolling:touch;
}
.mw-header{
  position:sticky;top:0;z-index:10;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  padding:1rem 3rem;
  border-bottom:1px solid #eee;
}
.mw-title{font-weight:700;font-size:1.05rem;color:#111;}
.mw-close{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:#999;font-size:1.2rem;cursor:pointer;
  line-height:1;padding:4px 6px;border-radius:50%;transition:color .2s;
}
.mw-close:hover{color:#111;}
.mw-tabs{
  display:flex;background:#f5f5f5;
  border-bottom:1px solid #e8e8e8;
}
.mw-tab{
  flex:1;padding:.75rem 0;background:none;border:none;
  color:#888;font-weight:700;font-size:.95rem;cursor:pointer;
  border-radius:0;transition:all .2s;
}
.mw-tab.active{
  background:var(--accent);color:#111;border-radius:0;
}
.mw-panel{padding:.75rem 1rem 1.2rem;background:#f7f8fa;}
.mw-section{
  background:#fff;border-radius:12px;padding:.8rem .9rem;margin-bottom:.7rem;
  border:1px solid #eee;
}
.mw-section-title{
  font-size:.8rem;font-weight:700;color:#555;
  margin-bottom:.6rem;display:flex;align-items:center;gap:.3rem;
}
.mw-section-head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;}
.mw-range{font-size:.75rem;color:#888;}
/* Promo / Bonus Picker */
.mw-bonus-grid{display:flex;flex-direction:column;gap:.35rem;}
.mw-bonus-card{
  display:flex;align-items:center;gap:.6rem;
  background:#fff;border:2px solid #e0e0e0;border-radius:9px;
  padding:.45rem .7rem;cursor:pointer;transition:border-color .18s,box-shadow .18s;
  text-align:left;width:100%;
}
.mw-bonus-card:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(255,194,0,.15);}
.mw-bonus-card.active{border-color:var(--accent);background:#fffae6;box-shadow:0 2px 10px rgba(255,194,0,.25);}
.mw-bonus-pct{
  min-width:40px;height:40px;border-radius:8px;
  background:var(--accent);color:#222;font-size:.76rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  line-height:1.2;text-align:center;
}
.mw-bonus-info{flex:1;min-width:0;}
.mw-bonus-title{font-size:.82rem;font-weight:700;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mw-bonus-meta{font-size:.72rem;color:#777;margin-top:1px;}
.mw-bonus-none{
  display:flex;align-items:center;gap:.6rem;
  background:#fff;border:2px solid #e0e0e0;border-radius:9px;
  padding:.45rem .7rem;cursor:pointer;transition:border-color .18s;
  text-align:left;width:100%;
}
.mw-bonus-none:hover{border-color:#bbb;}
.mw-bonus-none.active{border-color:#888;background:#f7f7f7;}
.mw-bonus-none-icon{
  min-width:40px;height:40px;border-radius:8px;
  background:#f0f0f0;color:#888;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.mw-bonus-none-label{font-size:.82rem;font-weight:600;color:#666;}
/* Payment method grid */
.mw-pm-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;
}
.mw-pm-btn{
  background:#fff;border:2px solid #e0e0e0;
  border-radius:10px;padding:.55rem .25rem .4rem;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  position:relative;transition:border-color .18s,box-shadow .18s;
}
.mw-pm-btn:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(255,194,0,.15);}
.mw-pm-btn.active{border-color:var(--accent);box-shadow:0 2px 10px rgba(255,194,0,.25);}
.mw-pm-btn img{height:28px;width:auto;max-width:64px;object-fit:contain;}
.mw-pm-label{font-size:.72rem;color:#444;font-weight:700;}
.mw-pm-badge{
  position:absolute;top:-6px;right:-6px;
  background:#e8305a;color:#fff;font-size:.6rem;font-weight:700;
  border-radius:6px;padding:1px 4px;line-height:1.4;
}
.mw-pm-divider{
  border-top:1px dashed #e0e0e0;margin:.7rem 0 .5rem;
}
.mw-pm-account{
  background:#f5f7fa;border-radius:8px;padding:.55rem .75rem;
  font-size:.85rem;color:#222;word-break:break-all;text-align:center;
  border:1px solid #eee;
}
/* Bank Transfer details layout */
.mw-bank-details{text-align:left;}
.mw-bank-row{
  display:flex;align-items:center;gap:.5rem;
  padding:.3rem 0;border-bottom:1px solid #f0f0f0;
}
.mw-bank-row:last-child{border-bottom:none;}
.mw-bank-lbl{
  font-size:.72rem;color:#888;min-width:90px;flex-shrink:0;
}
.mw-bank-val{
  font-size:.84rem;font-weight:700;color:#111;flex:1;word-break:break-all;
}
/* UPI inline row */
.mw-upi-row{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
}
.mw-upi-val{font-size:.9rem;font-weight:700;word-break:break-all;color:#111;}
/* Copy button */
.mw-copy-btn{
  background:#fff7e0;border:1px solid var(--accent);
  color:#b38600;border-radius:6px;padding:.18rem .55rem;font-size:.7rem;
  cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;
}
.mw-copy-btn:hover{background:var(--accent);color:#111;}
/* Copy toast */
#mwCopyToast{
  position:fixed;bottom:5rem;left:50%;transform:translateX(-50%) translateY(10px);
  background:#333;border:1px solid var(--accent);color:#fff;
  font-size:.82rem;font-weight:700;padding:.45rem 1.1rem;
  border-radius:20px;box-shadow:0 4px 18px rgba(0,0,0,.2);
  opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:9999;
  white-space:nowrap;
}
#mwCopyToast.show{opacity:1;transform:translateX(-50%) translateY(0);}
/* Bank Transfer icon */
.mw-pm-icon{font-size:1.5rem;display:block;line-height:1.6;}
/* Channel */
.mw-channel-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem;
}
.mw-channel-btn{
  background:#fff;border:2px solid #e0e0e0;
  border-radius:8px;padding:.45rem;color:#444;font-size:.8rem;font-weight:600;cursor:pointer;
  transition:border-color .18s;
}
.mw-channel-btn.active{border-color:var(--accent);color:#b38600;}
/* Amount */
.mw-amount-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-bottom:.6rem;
}
.mw-amount-btn{
  background:#f5f7fa;border:1.5px solid #e0e0e0;
  border-radius:8px;padding:.4rem .2rem;color:#333;font-size:.82rem;font-weight:600;cursor:pointer;
  transition:all .15s;
}
.mw-amount-btn:hover{border-color:var(--accent);background:#fff7e0;}
.mw-amount-btn.active{background:var(--accent);color:#111;border-color:var(--accent);}
.mw-amount-input-wrap{
  display:flex;align-items:center;
  background:#fff;border:1.5px solid #ddd;border-radius:10px;overflow:hidden;
}
.mw-currency{padding:0 .65rem;color:#888;font-weight:700;}
.mw-amount-input{
  flex:1;background:transparent;border:none;color:#111;
  font-size:1rem;padding:.55rem .5rem .55rem 0;outline:none;
}
.mw-amount-input::placeholder{color:#bbb;}
/* UTR */
.mw-utr-input{
  width:100%;background:#fff;border:1.5px solid #ddd;
  border-radius:10px;color:#111;font-size:.9rem;padding:.55rem .75rem;outline:none;
  box-sizing:border-box;
}
.mw-utr-input::placeholder{color:#bbb;}
/* Reminder */
.mw-reminder{
  background:#fff;border-radius:12px;overflow:hidden;margin-bottom:.7rem;
  border:1px solid #eee;
}
.mw-reminder-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem .9rem;cursor:pointer;color:#555;font-size:.85rem;font-weight:600;
  border-bottom:1px dashed #e8e8e8;
}
.mw-reminder-arrow{font-size:1rem;transition:transform .2s;}
.mw-reminder-arrow.down{transform:rotate(180deg);}
.mw-reminder-body{padding:.7rem .9rem;display:none;}
.mw-reminder-body p{font-size:.8rem;color:#666;margin-bottom:.35rem;line-height:1.5;}
/* Messages */
.mw-msg{
  border-radius:8px;padding:.55rem .8rem;font-size:.82rem;font-weight:600;margin-bottom:.6rem;
}
.mw-msg.success{background:rgba(40,180,100,.08);border:1px solid rgba(40,180,100,.3);color:#1a8c4e;}
.mw-msg.error  {background:rgba(220,50,50,.06);border:1px solid rgba(220,50,50,.25);color:#c0392b;}
/* Submit */
.mw-submit-btn{
  width:100%;padding:.8rem;
  background:var(--accent);color:#111;font-size:1rem;font-weight:700;
  border:none;border-radius:12px;cursor:pointer;transition:opacity .2s;
}
.mw-submit-btn:hover{opacity:.88;}
/* Wager block popup */
.wager-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem;}
.wager-popup-box{background:#fff;border:1px solid rgba(255,179,0,.4);border-radius:18px;padding:1.6rem 1.4rem 1.4rem;max-width:340px;width:100%;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,.15);position:relative;}
.wager-popup-icon{font-size:2.4rem;margin-bottom:.6rem;}
.wager-popup-title{font-size:1.05rem;font-weight:700;color:#111;margin-bottom:.35rem;}
.wager-popup-sub{font-size:.8rem;color:#777;margin-bottom:1rem;}
.wager-popup-amount-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#b38600;margin-bottom:.25rem;}
.wager-popup-amount{font-size:1.9rem;font-weight:800;color:var(--accent);letter-spacing:.01em;margin-bottom:1.1rem;}
.wager-popup-note{font-size:.74rem;color:#777;background:#f7f8fa;border-radius:8px;padding:.45rem .7rem;margin-bottom:1.1rem;line-height:1.5;}
.wager-popup-btn{width:100%;padding:.72rem;border:none;border-radius:12px;font-size:.92rem;font-weight:700;cursor:pointer;background:var(--accent);color:#111;transition:opacity .2s;}
.wager-popup-btn:hover{opacity:.87;}
.mw-submit-btn--disabled{background:#e0e0e0!important;color:#aaa!important;cursor:not-allowed!important;}
/* Withdrawal */
.mw-wd-balance-row{
  display:flex;align-items:center;justify-content:space-between;
  background:#fff7e0;border-radius:12px;padding:.8rem .9rem;margin-bottom:.7rem;
  border:1px solid #ffe066;
}
.mw-wd-label{font-size:.8rem;color:#666;display:flex;align-items:center;gap:.4rem;}
.mw-refresh-btn{
  background:none;border:none;color:#888;font-size:1.1rem;cursor:pointer;
  padding:0;line-height:1;
}
.mw-wd-amount{font-size:1.4rem;font-weight:700;color:#111;}
.mw-verif-block{
  background:#fff;border-radius:12px;padding:.8rem .9rem;margin-bottom:.7rem;
  border:1px solid #eee;
}
.mw-verif-notice{
  font-size:.82rem;color:#555;line-height:1.5;
  display:flex;gap:.5rem;align-items:flex-start;
}
.mw-verif-icon{font-size:1rem;flex-shrink:0;}
.mw-verif-divider{border-top:1px dashed #e8e8e8;margin:.65rem 0;}
.mw-verif-section{margin-bottom:.5rem;}
.mw-verif-cat{font-size:.78rem;font-weight:700;margin-bottom:.3rem;}
.mw-verif-item{
  display:inline-block;border-radius:20px;padding:.3rem .85rem;font-size:.8rem;font-weight:600;
}
.mw-verif-item--missing{background:#f0f0f0;color:#888;}
.mw-verif-item--done{background:rgba(40,180,100,.1);color:#1a8c4e;}
.mw-field{
  width:100%;background:#fff;border:1.5px solid #ddd;
  border-radius:10px;color:#111;font-size:.9rem;padding:.55rem .75rem;
  outline:none;box-sizing:border-box;margin-bottom:.45rem;
}
.mw-field:focus{border-color:var(--accent);}
.mw-field::placeholder{color:#bbb;}
.mw-wd-locked{
  background:#f7f8fa;border-radius:12px;padding:1rem;
  text-align:center;color:#888;font-size:.9rem;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  margin-bottom:.7rem;border:1px solid #eee;
}
.mw-wd-locked-icon{font-size:2rem;color:#ccc;}
.mw-saved-wallet-item:hover{background:rgba(255,194,0,.07)!important;border-color:rgba(255,194,0,.35)!important;}
/* hdr-deposit-mobile hidden globally; avatar btn handles mobile deposit */
.hdr-deposit-mobile{display:none!important;}

/* ── Auth page (dedicated login/register page) ─────────────────────── */
html[data-page="auth"] body { background:#eeeeee; }
html[data-page="auth"] .page-wrapper { background:#eeeeee !important; }
html[data-page="auth"] #hdr-login-btn,
html[data-page="auth"] #hdr-register-btn-mobile { display:none !important; }
.auth-page-wrap{
  min-height:calc(100vh - 130px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px 1rem 2rem;
  box-sizing:border-box;
}
.auth-page-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 4px 24px rgba(0,0,0,0.10);
  padding:2rem;
  width:560px;
  max-width:100%;
}
@media(max-width:780px){
  .auth-page-wrap{ padding:100px 1rem 2rem; }
  .auth-page-card{ padding:1.5rem 1.2rem; }
}

.auth-tabs{display:flex;border-bottom:2px solid #eee;margin-bottom:1.2rem;}
.auth-tab{flex:1;background:none;border:none;color:#aaa;font-size:1rem;font-weight:700;padding:.75rem 0;cursor:pointer;transition:color .2s;border-bottom:2px solid transparent;margin-bottom:-2px;}
.auth-tab.active{color:#111;border-bottom:2px solid var(--accent);}
.phone-input-wrap{display:flex;align-items:center;background:#f7f7f7;border:1px solid #ddd;border-radius:8px;overflow:hidden;}
.phone-prefix{padding:0 .75rem;color:#444;font-size:.95rem;white-space:nowrap;border-right:1px solid #ddd;}
.phone-input-wrap .form-input{border:none!important;background:transparent!important;border-radius:0!important;}
.modal-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border:none;border-radius:50%;background:#f0f0f0;color:#555;font-size:.95rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:opacity .2s;}
.modal-close:hover{opacity:.7;}
.modal-box{position:relative;}
.form-msg{padding:.6rem .9rem;border-radius:8px;font-size:.85rem;font-weight:600;margin-bottom:.75rem;}
.form-msg.msg-error{background:rgba(211,47,47,.08);border:1px solid rgba(211,47,47,.3);color:#c62828;}
.form-msg.msg-success{background:rgba(46,125,50,.08);border:1px solid rgba(46,125,50,.3);color:#2e7d32;}
.fp-back-btn{display:block;width:100%;background:none;border:none;color:var(--blue-btn);font-size:.83rem;cursor:pointer;margin-top:.5rem;padding:.4rem;text-align:center;text-decoration:underline;}
.fp-back-btn:hover{opacity:.75;}

/* ============================================================
   AGENTS - DASHBOARD
   ============================================================ */

.aff-dash{padding:2rem 1rem 5rem;}
.aff-page-hd{margin-bottom:1.8rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
.aff-page-hd h1{font-size:1.5rem;font-weight:800;display:flex;align-items:center;gap:.5rem;}
.aff-page-hd h1 i{color:var(--accent);}
.aff-uid{font-size:.82rem;color:var(--text-sub);margin-top:.25rem;}
.aff-btn-logout{background:rgba(224,63,63,.15);border:1px solid rgba(224,63,63,.3);color:#ff8a8a;padding:.5rem 1.1rem;border-radius:var(--radius-sm);font-weight:700;font-size:.88rem;cursor:pointer;transition:all .2s;}
.aff-btn-logout:hover{background:rgba(224,63,63,.25);}
.aff-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem;}
@media(max-width:900px){.aff-stats{grid-template-columns:repeat(2,1fr);}}
.aff-stat{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem 1rem;text-align:center;transition:background .2s;}
.aff-stat:hover{background:var(--bg-card-hover);}
.aff-stat-icon{font-size:1.8rem;margin-bottom:.5rem;}
.aff-stat-val{font-size:1.5rem;font-weight:800;background:var(--gradient-btn);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.aff-stat-label{font-size:.75rem;color:var(--text-sub);text-transform:uppercase;letter-spacing:.5px;margin-top:.3rem;}
.aff-card2{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.2rem;}
.aff-card2 h4{font-size:1rem;font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;}
.aff-card2 h4 i{color:var(--accent);}
.aff-commission-note{font-size:.88rem;color:var(--text-sub);margin-bottom:.5rem;}
.aff-commission-note strong{color:var(--green);}
.aff-link-row{display:flex;gap:.6rem;align-items:center;margin-top:.8rem;}
@media(max-width:600px){.aff-link-row{flex-direction:column;}}
.aff-link-input{flex:1;background:rgba(255,255,255,.07);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.7rem 1rem;color:var(--text);font-family:monospace;font-size:.9rem;outline:none;}
.aff-btn-copy{background:var(--gradient-btn);color:#fff;border:none;padding:.7rem 1.3rem;border-radius:var(--radius-sm);font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity .2s;}
.aff-btn-copy:hover{opacity:.85;}
.aff-code-row{margin-top:.8rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;}
.aff-code-label{color:var(--text-sub);font-size:.88rem;}
.aff-code-val{color:var(--accent);font-size:1.1rem;font-weight:800;}
.aff-badge{display:inline-block;padding:.25rem .6rem;border-radius:6px;font-size:.78rem;font-weight:700;}
.aff-badge-active{background:rgba(38,181,91,.15);border:1px solid rgba(38,181,91,.3);color:#5de08a;}
.aff-badge-inactive{background:rgba(110,108,154,.15);border:1px solid rgba(110,108,154,.3);color:var(--text-muted);}
.aff-form-row{display:grid;grid-template-columns:1fr 1fr auto;gap:.7rem;align-items:end;}
@media(max-width:600px){.aff-form-row{grid-template-columns:1fr;}}
.aff-form-group{display:flex;flex-direction:column;gap:.35rem;}
.aff-form-group label{font-size:.82rem;color:var(--text-sub);font-weight:600;}
.aff-date-input,.aff-select{background:rgba(255,255,255,.07);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.65rem .9rem;color:var(--text);font-size:.9rem;outline:none;transition:border-color .2s;}
.aff-date-input:focus,.aff-select:focus{border-color:var(--accent);}
.aff-select option{background:#131330;}
.aff-btn-calc{background:var(--gradient-btn);color:#fff;border:none;padding:.65rem 1.3rem;border-radius:var(--radius-sm);font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity .2s;align-self:flex-end;}
.aff-btn-calc:hover{opacity:.85;}
.aff-btn-sm{background:rgba(124,77,255,.15);border:1px solid rgba(124,77,255,.25);color:var(--accent);padding:.4rem .9rem;border-radius:var(--radius-sm);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s;}
.aff-btn-sm:hover{background:rgba(124,77,255,.25);}
.aff-btn-sm-ghost{background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:.4rem .9rem;border-radius:var(--radius-sm);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s;}
.aff-btn-sm-ghost:hover{border-color:var(--accent);color:var(--accent);}
.aff-calc-results{display:none;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--border);}
.aff-calc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1rem;}
@media(max-width:600px){.aff-calc-grid{grid-template-columns:repeat(2,1fr);}}
.aff-calc-item small{display:block;color:var(--text-muted);font-size:.78rem;margin-bottom:.2rem;}
.aff-calc-val{font-size:1.05rem;font-weight:700;}
.aff-calc-highlight{background:rgba(124,77,255,.1);border:1px solid rgba(124,77,255,.22);border-radius:var(--radius-sm);padding:.9rem 1.2rem;display:flex;align-items:center;justify-content:space-between;}
.aff-calc-highlight span{color:var(--text-sub);font-weight:600;}
.aff-calc-highlight strong{font-size:1.3rem;color:var(--accent);}
.aff-table-head-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.7rem;margin-bottom:1rem;}
.aff-table-head-row h4{margin:0;font-size:1rem;font-weight:700;display:flex;align-items:center;gap:.5rem;}
.aff-table-head-row h4 i{color:var(--accent);}
.aff-table-controls{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}
.aff-search-input{background:rgba(255,255,255,.07);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.45rem .8rem;color:var(--text);font-size:.85rem;outline:none;width:200px;transition:border-color .2s;}
.aff-search-input:focus{border-color:var(--accent);}
.aff-search-input::placeholder{color:var(--text-muted);}
.aff-table-wrap{overflow-x:auto;}
.aff-table{width:100%;border-collapse:collapse;font-size:.88rem;}
.aff-table th{text-align:left;padding:.7rem .9rem;border-bottom:2px solid rgba(124,77,255,.3);color:var(--text-sub);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;}
.aff-table td{padding:.65rem .9rem;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;white-space:nowrap;}
.aff-table tbody tr:hover{background:rgba(255,255,255,.03);}
.aff-table td.c-green{color:var(--green);}.aff-table td.c-red{color:var(--red);}.aff-table td.c-yellow{color:var(--yellow);}
.aff-badge-status{display:inline-block;padding:.25rem .6rem;border-radius:6px;font-size:.78rem;font-weight:700;}
.status-paid{background:rgba(38,181,91,.15);border:1px solid rgba(38,181,91,.3);color:#5de08a;}
.status-pending{background:rgba(255,172,12,.15);border:1px solid rgba(255,172,12,.3);color:var(--yellow);}
.comm-pos{color:var(--green);font-weight:700;}.comm-neg{color:var(--red);font-weight:700;}
.aff-empty{text-align:center;color:var(--text-muted);padding:2rem;}

/* ============================================================
   AGENTS - INDEX / LOGIN
   ============================================================ */

.aff-home{padding:2.5rem 1rem 4rem;}
.aff-hero{text-align:center;padding:2rem 0 2.5rem;}
.aff-hero-icon{font-size:3.5rem;margin-bottom:.8rem;}
.aff-hero h1{font-size:2.4rem;font-weight:900;background:var(--gradient-btn);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.6rem;}
.aff-hero-sub{color:var(--text-sub);font-size:1.05rem;max-width:520px;margin:0 auto;}
.aff-action-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;margin:2rem 0;}
.aff-action-card{background:var(--gradient-btn);border-radius:var(--radius-lg);padding:2.2rem 1.8rem;text-align:center;color:#fff;text-decoration:none;display:block;transition:transform .2s,box-shadow .2s;box-shadow:var(--shadow-accent);}
.aff-action-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(124,77,255,.55);color:#fff;}
.aff-action-card-icon{font-size:3rem;margin-bottom:.8rem;}
.aff-action-card h3{font-size:1.4rem;font-weight:800;margin-bottom:.5rem;}
.aff-action-card p{font-size:.9rem;opacity:.9;line-height:1.5;}
.aff-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0;}
@media(max-width:600px){.aff-stats{grid-template-columns:1fr;}}
.aff-stat-box{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1rem;text-align:center;transition:background .2s;}
.aff-stat-box:hover{background:var(--bg-card-hover);}
.aff-stat-val{font-size:2rem;font-weight:900;background:var(--gradient-btn);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.aff-stat-lbl{color:var(--text-sub);font-size:.82rem;margin-top:.4rem;text-transform:uppercase;letter-spacing:.4px;font-weight:600;}
.aff-features{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;margin-top:1.5rem;}
.aff-features h2{font-size:1.3rem;font-weight:800;margin-bottom:1.2rem;display:flex;align-items:center;gap:.5rem;}
.aff-features h2 i{color:var(--accent);}
.aff-features ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.5rem .8rem;}
.aff-features li{color:var(--text-sub);font-size:.9rem;padding:.4rem 0;display:flex;align-items:center;gap:.5rem;}
.aff-features li::before{content:"✓";color:var(--green);font-weight:900;font-size:1rem;flex-shrink:0;}

/* ============================================================
   AGENTS - LOGIN
   ============================================================ */

/* Affiliate portal – dark theme */
.aff-page{padding:3rem 1rem 5rem;min-height:calc(100vh - var(--header-h));display:flex;align-items:flex-start;justify-content:center;}
.aff-auth-wrap{width:100%;max-width:460px;}
.aff-card{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem 2rem;backdrop-filter:blur(10px);}
.aff-page-icon{text-align:center;font-size:3rem;background:var(--gradient-btn);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.6rem;}
.aff-page-h2{text-align:center;font-size:1.7rem;font-weight:800;margin-bottom:.3rem;}
.aff-page-sub{text-align:center;color:var(--text-sub);font-size:.9rem;margin-bottom:1.8rem;}
.aff-tabs{display:flex;gap:4px;background:rgba(255,255,255,.06);border-radius:var(--radius-sm);padding:4px;margin-bottom:1.8rem;}
.aff-tab{flex:1;padding:.65rem;border:none;border-radius:6px;background:transparent;color:var(--text-sub);font-weight:700;font-size:.9rem;cursor:pointer;transition:all .2s;}
.aff-tab.active{background:var(--gradient-btn);color:#fff;box-shadow:var(--shadow-accent);}
.aff-section{display:none;}.aff-section.active{display:block;}
.aff-field{margin-bottom:1.15rem;}
.aff-field label{display:block;font-size:.82rem;font-weight:700;color:var(--text-sub);margin-bottom:.4rem;}
.aff-input{width:100%;background:rgba(255,255,255,.07);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem 1rem;color:var(--text);font-size:.93rem;outline:none;transition:border-color .2s,box-shadow .2s;}
.aff-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,77,255,.2);}
.aff-input::placeholder{color:var(--text-muted);}
.aff-helper{font-size:.78rem;color:var(--text-muted);margin-top:.3rem;}
.aff-btn{width:100%;padding:.85rem;border:none;border-radius:var(--radius-sm);background:var(--gradient-btn);color:#fff;font-weight:700;font-size:.97rem;cursor:pointer;transition:opacity .2s,transform .15s;margin-top:.4rem;}
.aff-btn:hover{opacity:.9;transform:translateY(-1px);}
.aff-alert{border-radius:var(--radius-sm);padding:.8rem 1rem;font-size:.88rem;font-weight:600;margin-bottom:1.1rem;}
.aff-alert-danger{background:rgba(224,63,63,.12);border:1px solid rgba(224,63,63,.3);color:#ff8a8a;}
.aff-alert-success{background:rgba(38,181,91,.12);border:1px solid rgba(38,181,91,.3);color:#5de08a;}
.aff-alert-info{background:rgba(124,77,255,.1);border:1px solid rgba(124,77,255,.25);color:#b39dff;}

/* ============================================================
   BONUS - DETAILS PAGE
   ============================================================ */

.details-wrapper {
    background: #f4f4f4;
    color: #1a1a1a;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
    padding-bottom: 2rem;
}
.details-wrapper::-webkit-scrollbar { width: 4px; }
.details-wrapper::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* ── Banner ── */
.details-banner {
    position: relative; width: 100%;
    background: #e4e4e4;
    overflow: hidden;
    line-height: 0;
}
.details-banner img {
    display: block; width: 100%; height: auto; max-height: 240px;
    object-fit: cover; object-position: center top;
}
.details-banner-placeholder {
    min-height: 130px;
    background: #ddd;
    display: flex; align-items: center; justify-content: center;
}
.details-banner-placeholder span { font-size: 3rem; opacity: .45; }

.close-btn {
    position: absolute; top: 10px; right: 10px;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(0,0,0,.45);
    border: none;
    color: #fff; font-size: 1.15rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .2s; z-index: 10; font-weight: 700;
}
.close-btn:hover { background: rgba(200,0,0,.8); }

.site-badge {
    position: absolute; top: 10px; right: 48px;
    background: #FFD700;
    color: #111; font-size: .72rem; font-weight: 800;
    padding: 3px 8px; border-radius: 6px; letter-spacing: .4px;
}

/* ── Title bar ── */
.details-title-bar {
    background: #fff;
    border-bottom: 1px solid #e4e4e4;
    padding: .9rem 1.25rem;
}
.details-title-bar h1 {
    font-size: 1.1rem; font-weight: 800; color: #111; line-height: 1.4;
}

/* ── Content body ── */
.details-body {
    padding: 1.1rem 1.1rem .75rem;
    max-width: 700px; margin: 0 auto;
}
.details-body h2,
.details-body h3,
.details-body .section-label {
    font-size: .93rem; font-weight: 800; color: #111;
    margin: 1.2rem 0 .55rem; padding-bottom: .3rem;
    border-bottom: 2px solid #FFD700;
}
.details-body .tagline {
    font-style: italic; color: #555;
    font-size: .88rem; margin-bottom: .75rem; line-height: 1.6;
}
.details-body ul, .details-body ol {
    padding-left: 1.4rem; margin-bottom: 1rem;
    color: #444; font-size: .9rem; line-height: 1.75;
}
.details-body ul li::marker { color: #1976d2; }
.details-body p { color: #444; font-size: .9rem; line-height: 1.7; margin-bottom: .75rem; }

/* ── Tables ── */
.details-table-wrap, .det-table-wrap {
    overflow-x: auto; margin-bottom: 1.25rem;
    border-radius: 10px;
    border: 1px solid #e4e4e4;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.details-table-wrap table, .det-auto-table, .details-body table {
    width: 100%; border-collapse: collapse; font-size: .87rem; min-width: 220px;
}
.details-table-wrap table thead th, .det-auto-table thead th, .details-body table thead th,
.details-table-wrap table th, .det-auto-table th, .details-body table th {
    background: #1976d2; color: #fff; font-weight: 700; font-size: .83rem;
    padding: .6rem .9rem; border: none;
    text-align: center; vertical-align: middle; letter-spacing: .2px;
}
.details-table-wrap table td, .det-auto-table td, .details-body table td {
    padding: .55rem .9rem; border-bottom: 1px solid #f0f0f0;
    text-align: center; vertical-align: middle; line-height: 1.4;
    font-size: .86rem; background: #fff; color: #333;
}
.details-table-wrap table tbody td:first-child, .det-auto-table tbody td:first-child, .details-body table tbody td:first-child {
    background: #fafafa; color: #111; font-weight: 600;
}
.details-table-wrap table tbody tr:nth-child(even) td, .det-auto-table tbody tr:nth-child(even) td, .details-body table tbody tr:nth-child(even) td { background: #f9f9f9; }
.details-table-wrap table tbody tr:nth-child(even) td:first-child, .det-auto-table tbody tr:nth-child(even) td:first-child, .details-body table tbody tr:nth-child(even) td:first-child { background: #f5f5f5; }
.details-table-wrap table tbody tr:hover td, .det-auto-table tbody tr:hover td { background: #fff8e1; }
.details-table-wrap table tbody tr:hover td:first-child, .det-auto-table tbody tr:hover td:first-child { background: #fff3cd; }

/* ── Structured labels & bullets ── */
.structured-section { margin-bottom: 1.4rem; }
.structured-section .s-label, .s-label {
    display: block;
    font-weight: 800; font-size: .92rem; color: #111;
    margin-top: 1.2rem; margin-bottom: .5rem; padding-bottom: .28rem;
    border-bottom: 2px solid #FFD700;
}
.s-label:first-child { margin-top: 0; }

.s-question {
    display: block;
    background: #fff8e1;
    border-left: 4px solid #FFD700; border-radius: 0 8px 8px 0;
    color: #7a5c00; font-weight: 700; font-size: .9rem;
    padding: .6rem 1rem; margin: .9rem 0 .45rem; line-height: 1.5;
}

.s-bullet { list-style: none; padding-left: 0; margin-bottom: .75rem; }
.s-bullet li {
    position: relative; display: flex; align-items: flex-start; gap: .6rem;
    background: #fff; border: 1px solid #e8e8e8;
    border-radius: 8px; padding: .55rem .85rem; margin-bottom: .4rem;
    color: #333; font-size: .89rem; line-height: 1.55; transition: background .15s;
}
.s-bullet li:hover { background: #fff8e1; border-color: #FFD700; }
.s-bullet li::before {
    content: ''; flex-shrink: 0; width: 7px; height: 7px;
    border-radius: 50%; background: #1976d2; margin-top: .43rem;
}
.terms-note { font-weight: 700; color: #c0392b; }

/* ── Footer button ── */
.details-footer { padding: .9rem 1.1rem 1.4rem; max-width: 700px; margin: 0 auto; }
.btn-deposit {
    display: block; width: 100%; padding: .55rem; border-radius: 8px; border: none;
    background: #FFD700;
    color: #111; font-size: 0.8rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 4px 14px rgba(255,215,0,.4);
    transition: background .15s, transform .15s, box-shadow .15s;
    text-align: center; text-decoration: none; letter-spacing: .2px;
}
.btn-deposit:hover { background: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,215,0,.5); }
.btn-deposit:active { transform: none; filter: brightness(.95); }

/* ── DB content HTML pass-through ── */
.db-content { color: #444; font-size: .9rem; line-height: 1.7; }
.db-content strong, .db-content b { color: #111; }
.db-content a { color: #1976d2; }
.db-content h2 { font-size: .95rem; color: #111; margin: 1.2rem 0 .5rem; border-bottom: 2px solid #FFD700; padding-bottom: .28rem; font-weight: 800; }
.db-content h3 { font-size: .9rem; color: #111; margin: 1rem 0 .4rem; font-weight: 800; }
.db-content ul, .db-content ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.db-content ul li::marker { color: #1976d2; }
.db-content p { margin-bottom: .75rem; }
.db-content table {
    width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: .87rem;
    border: 1px solid #e4e4e4; box-shadow: 0 2px 8px rgba(0,0,0,.07);
    border-radius: 10px; overflow: hidden;
}
.db-content table th {
    background: #1976d2; color: #fff; font-weight: 700;
    padding: .6rem .9rem; border: none;
    text-align: center; letter-spacing: .2px;
}
.db-content table td {
    padding: .55rem .9rem; border-bottom: 1px solid #f0f0f0;
    text-align: center; background: #fff;
    color: #333; vertical-align: middle; font-size: .86rem;
}
.db-content table td:first-child { background: #fafafa; color: #111; font-weight: 600; }
.db-content table tr:nth-child(even) td { background: #f9f9f9; }
.db-content table tr:nth-child(even) td:first-child { background: #f5f5f5; }
.db-content table tbody tr:hover td { background: #fff8e1; }
.db-content table tbody tr:hover td:first-child { background: #fff3cd; }

@media (max-width: 480px) {
    .details-title-bar h1 { font-size: .97rem; }
    .details-body { padding: .85rem; }
    .details-table-wrap table th, .details-table-wrap table td,
    .db-content table th, .db-content table td { padding: .45rem .55rem; font-size: .8rem; }
}

/* BONUS - BRIDGE styles moved to inline <style> in bonus/bonus_bridge.php */

/* PAY - TIGERPAY styles moved to inline <style> in pay/tigerpay/deposit_page.php */

/* ============================================================
   BONUS - bonus.css
   ============================================================ */

/* Bonus System Styles - bonus.css - Modern Redesign */
/* Additional styles to integrate with bonus.php */

/* Modern Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
    }
    50% {
        box-shadow: 0 0 40px rgba(118, 75, 162, 0.8);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Bonus Sections */
.bonus-section#reload-bonus-container {
    display: none;
}
.bonus-section#referral-stats-container {
    display: none;
}

.bonus-section-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 2rem 0 1.5rem 0;
    color: white;
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fadeInUp 0.6s ease-out;
    text-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

/* Deposit Bonus Cards */
.deposit-bonus-card {
    background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.1) 0%, 
        rgba(118, 75, 162, 0.1) 50%, 
        rgba(240, 147, 251, 0.1) 100%);
    border-radius: 16px;
    padding: 1.8rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.6s ease-out;
}

.deposit-bonus-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.05),
        transparent
    );
    transform: rotate(45deg);
    animation: shimmer 3s infinite;
}

.deposit-bonus-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 48px rgba(102, 126, 234, 0.4);
    border-color: rgba(102, 126, 234, 0.3);
}

.deposit-bonus-card .bonus-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.deposit-bonus-card .deposit-amount {
    font-weight: 700;
    color: white;
    font-size: 1.1rem;
}

.deposit-bonus-card .bonus-amount {
    font-weight: 900;
    color: white;
    font-size: 1.4rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.deposit-bonus-card .bonus-details {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    position: relative;
    z-index: 1;
}

/* Reload Bonus Cards */
.reload-bonus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.reload-bonus-card {
    background: linear-gradient(135deg, 
        rgba(10, 31, 68, 0.95) 0%,
        rgba(15, 45, 100, 0.95) 100%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    position: relative;
    animation: fadeInUp 0.8s ease-out;
}

.reload-bonus-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
}

.reload-bonus-card:hover::before {
    opacity: 1;
}

.reload-bonus-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.5);
    animation: glow 2s infinite;
}

.reload-bonus-card.disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(1);
}

.reload-bonus-card .bonus-header {
    padding: 2rem 1.5rem;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.reload-bonus-card .bonus-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transform: rotate(45deg);
    animation: shimmer 4s infinite;
}

.reload-bonus-card.slots .bonus-header {
    background: linear-gradient(135deg, #1b7a23 0%, #0d5ba1 50%, #081966 100%);
}

.reload-bonus-card.casino .bonus-header {
    background: linear-gradient(135deg, #f093fb 0%, #764ba2 50%, #f5576c 100%);
}

.reload-bonus-card.sports .bonus-header {
    background: linear-gradient(135deg, #4facfe 0%, #00b4d8 50%, #00f2fe 100%);
}

.reload-bonus-card .bonus-percentage {
    font-size: 3.5rem;
    font-weight: 900;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 1;
    animation: pulse 2s infinite;
}

.reload-bonus-card .bonus-body {
    padding: 2rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
}

.reload-bonus-card .bonus-details-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.reload-bonus-card .bonus-details-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s;
}

.reload-bonus-card .bonus-details-list li:hover {
    padding-left: 10px;
    color: white;
    border-color: rgba(102, 126, 234, 0.5);
}

/* Referral Stats */
.referral-stats {
    background: linear-gradient(135deg, 
        rgba(17, 1, 50, 0.95) 0%,
        rgba(30, 10, 80, 0.95) 100%);
    border-radius: 20px;
    padding: 2.5rem;
    margin: 2rem 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(102, 126, 234, 0.2);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 1s ease-out;
}

.referral-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(102, 126, 234, 0.1), transparent 70%);
    pointer-events: none;
}

.referral-stats h3 {
    text-align: center;
    color: white;
    margin-bottom: 0.75rem;
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
}

.referral-info {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2.5rem;
    font-size: 1.15rem;
    position: relative;
    z-index: 1;
}

.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin: 2.5rem 0;
    position: relative;
    z-index: 1;
}

.stat-card {
    text-align: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, 
        rgba(27, 122, 35, 0.9) 0%, 
        rgba(8, 25, 102, 0.9) 100%);
    color: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.08),
        transparent
    );
    transform: rotate(45deg);
    animation: shimmer 3s infinite;
}

.stat-card:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 15px 50px rgba(27, 122, 35, 0.5);
}

.stat-card label {
    display: block;
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 0.75rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.stat-card .stat-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 900;
    position: relative;
    z-index: 1;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Pending Referrals */
.pending-referrals,
.awarded-bonuses {
    margin: 2rem 0;
}

.pending-referral-item {
    background: linear-gradient(135deg, 
        rgba(2, 55, 107, 0.8) 0%,
        rgba(5, 45, 98, 0.8) 100%);
    padding: 1.5rem;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(102, 126, 234, 0.2);
    transition: all 0.3s;
    animation: slideInLeft 0.6s ease-out;
}

.pending-referral-item:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    border-color: rgba(102, 126, 234, 0.4);
}

.pending-referral-item .referral-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.pending-referral-item .referral-mobile {
    font-weight: 700;
    color: white;
}

.progress-bar-container {
    background: rgba(4, 51, 98, 0.6);
    border-radius: 12px;
    height: 24px;
    overflow: hidden;
    margin: 0.75rem 0;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
}

.progress-bar-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: shimmer 2s infinite;
}

.progress-bar {
    background: linear-gradient(135deg, #1b7a23 0%, #0d5ba1 50%, #081966 100%);
    height: 100%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 15px rgba(27, 122, 35, 0.6);
    position: relative;
    overflow: hidden;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer 1.5s infinite;
}

.remaining {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.5rem;
}

.awarded-bonus-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: linear-gradient(135deg, 
        rgba(5, 61, 118, 0.8) 0%,
        rgba(8, 45, 100, 0.8) 100%);
    padding: 1.5rem;
    border-radius: 16px;
    margin-bottom: 1rem;
    border: 1px solid rgba(240, 147, 251, 0.2);
    transition: all 0.3s;
    animation: fadeInUp 0.6s ease-out;
}

.awarded-bonus-item:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 24px rgba(240, 147, 251, 0.3);
    border-color: rgba(240, 147, 251, 0.4);
}

.awarded-bonus-item .fas {
    font-size: 2rem;
    color: #f093fb;
    animation: pulse 2s infinite;
}

.awarded-bonus-item .text-success {
    color: white;
    font-weight: 600;
}

.awarded-bonus-item .bonus-amount {
    font-weight: 900;
    color: white;
    margin-left: auto;
    font-size: 1.3rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.awarded-bonus-item .bonus-date {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

/* Success Modal */
.bonus-success-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInUp 0.4s ease-out;
}

.bonus-success-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
}

.modal-content {
    position: relative;
    background: linear-gradient(135deg, 
        rgba(10, 31, 68, 0.98) 0%,
        rgba(15, 45, 100, 0.98) 100%);
    border-radius: 24px;
    max-width: 550px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(102, 126, 234, 0.3);
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-header {
    background: linear-gradient(135deg, #1b7a23 0%, #0d5ba1 50%, #20c997 100%);
    color: white;
    padding: 2rem;
    text-align: center;
    border-radius: 24px 24px 0 0;
    position: relative;
    overflow: hidden;
}

.modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transform: rotate(45deg);
    animation: shimmer 3s infinite;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 800;
    position: relative;
    z-index: 1;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-body {
    padding: 2.5rem;
    text-align: center;
}

.success-animation {
    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    color: #20c997;
    margin-bottom: 1.5rem;
    font-size: 4rem;
}

@keyframes bounceIn {
    0% { 
        transform: scale(0) rotate(0deg); 
        opacity: 0;
    }
    50% { 
        transform: scale(1.3) rotate(180deg); 
    }
    100% { 
        transform: scale(1) rotate(360deg); 
        opacity: 1;
    }
}

.bonus-amount-display {
    font-size: 3.5rem;
    color: white;
    font-weight: 900;
    margin: 1.5rem 0;
    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
    animation: pulse 2s infinite;
}

.bonus-subtitle {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.bonus-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}

.detail-item {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, 
        rgba(40, 167, 69, 0.2) 0%,
        rgba(32, 201, 151, 0.2) 100%);
    border-radius: 16px;
    border: 1px solid rgba(40, 167, 69, 0.3);
    transition: all 0.3s;
}

.detail-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(40, 167, 69, 0.4);
}

.detail-item label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.detail-item span {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: white;
}

.modal-footer {
    padding: 2rem;
    text-align: center;
}

.btn-primary {
    background: linear-gradient(135deg, #1b7a23 0%, #0d5ba1 50%, #081966 100%);
    color: white;
    border: none;
    padding: 1.2rem 2.5rem;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(27, 122, 35, 0.4);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-primary:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 12px 40px rgba(27, 122, 35, 0.6);
}

/* Alerts */
.alert {
    padding: 1.5rem;
    border-radius: 16px;
    margin: 1.5rem 0;
    border: 1px solid;
    animation: slideInLeft 0.6s ease-out;
}

.alert-info {
    background: linear-gradient(135deg, 
        rgba(13, 110, 253, 0.15) 0%,
        rgba(13, 202, 240, 0.15) 100%);
    color: white;
    border-color: rgba(13, 202, 240, 0.3);
}

.alert-warning {
    background: linear-gradient(135deg, 
        rgba(255, 193, 7, 0.15) 0%,
        rgba(255, 152, 0, 0.15) 100%);
    color: white;
    border-color: rgba(255, 193, 7, 0.3);
}

.no-bonuses,
.no-data {
    text-align: center;
    padding: 3rem 2rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    font-size: 1.1rem;
    animation: fadeInUp 0.6s ease-out;
}

/* Responsive */
@media (max-width: 768px) {
    .reload-bonus-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .stats-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .bonus-details-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        width: 95%;
        border-radius: 20px;
    }
    
    .bonus-card.horizontal,
    .reload-bonus-card.horizontal {
        flex-direction: column;
    }
    
    .bonus-card.horizontal .bonus-banner,
    .reload-bonus-card.horizontal .bonus-banner {
        width: 100%;
        min-height: 150px;
        margin: 0;
        border-radius: 12px 12px 0 0;
        border-bottom: none;
        padding-bottom: 0;
    }
    
    .bonus-card.horizontal .bonus-banner img,
    .reload-bonus-card.horizontal .bonus-banner img {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        border-radius: 8px 8px 0 0;
        display: block;
    }
    
    .bonus-card.horizontal .bonus-details,
    .reload-bonus-card.horizontal .bonus-details {
        width: 100%;
    }
    
    .bonus-section-title {
        font-size: 1.5rem;
    }
    
    .referral-stats {
        padding: 1.5rem;
    }
    
    .modal-header h3 {
        font-size: 1.5rem;
    }
    
    .bonus-amount-display {
        font-size: 2.5rem;
    }
}

/* All Bonus Banner Styles - Modern Design */
.bonus-banner {
    width: 100%;
    border-radius: 16px;
    box-sizing: border-box;
    background: linear-gradient(135deg, 
        rgba(10, 31, 68, 0.95) 0%,
        rgba(15, 45, 100, 0.95) 100%);
    overflow: hidden;
    min-height: 180px;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    position: relative;
    transition: all 0.4s;
}

.bonus-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(102, 126, 234, 0.1),
        transparent
    );
    animation: shimmer 3s infinite;
}

.bonus-banner:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4);
}

.bonus-banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-sizing: border-box;
    transition: transform 0.4s;
}

.bonus-banner:hover img {
    transform: scale(1.05);
}

.bonus-card .bonus-banner {
    display: block;
    margin-bottom: 1.5rem;
}

.reload-bonus-card .bonus-banner {
    min-height: 180px;
}

.bonus-card.horizontal,
.reload-bonus-card.horizontal {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
}

.bonus-card.horizontal .bonus-banner,
.reload-bonus-card.horizontal .bonus-banner {
    width: 48%;
    margin-bottom: 0;
}

.bonus-card.horizontal .bonus-banner img,
.reload-bonus-card.horizontal .bonus-banner img {
    min-height: auto;
}

.bonus-card.horizontal .bonus-details,
.reload-bonus-card.horizontal .bonus-details {
    flex: 1;
    background: linear-gradient(135deg, 
        rgba(7, 1, 51, 0.95) 0%,
        rgba(15, 5, 80, 0.95) 100%);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.bonus-card.horizontal .bonus-title,
.reload-bonus-card.horizontal .bonus-title {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.3rem;
    font-weight: 800;
    color: white;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bonus-card.horizontal .bonus-description,
.reload-bonus-card.horizontal .bonus-description {
    color: rgba(255, 255, 255, 0.9);
    margin: 0.75rem 0 1.25rem 0;
    line-height: 1.6;
}

.bonus-card.horizontal .bonus-terms {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.reload-bonus-card.horizontal .bonus-header { 
    display: none; 
}

.reload-bonus-card.horizontal .bonus-body { 
    padding: 0; 
}

main.main-content img {
    border-radius: 16px;
    box-sizing: border-box;
    object-fit: cover;
    display: block;
    transition: all 0.4s;
}

main.main-content img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4);
}

/* ===== CELEBRITY / AMBASSADOR SECTION ===== */
.celebrity-section {
  display: block;
  position: relative;
  width: 100%;
  max-width: 1260px;
  margin: 1.8rem auto 1.2rem;
  padding: 0;
  box-sizing: border-box;
  border: 2px solid #e2c97e;
  border-radius: 14px;
  overflow: hidden;
}
.celebrity-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(90deg,#1a1a2e,#2d2d4e);
  font-size: .75rem;
  font-weight: 700;
  color: #f5d87a;
  letter-spacing: .3px;
}
@media(min-width:1280px) {
  .celebrity-section { max-width: 1360px; }
}
.celebrity-slider {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 23.85%;
  height: 0;
  background: #c8941a;
  border-radius: 14px;
  overflow: hidden;
}
.celebrity-slide {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.celebrity-slide.active {
  opacity: 1;
}
.celebrity-section .carousel-controls {
  position: absolute;
  bottom: 12px;
  left: 16px;
  display: flex;
  gap: 6px;
  z-index: 5;
}
.celebrity-section .control-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, border-color 0.25s;
}
.celebrity-section .control-dot.active {
  background: #ffb300;
  border-color: #fff;
}
@media(max-width:780px) {
  .celebrity-slider { padding-bottom: 23.85%; }
}

/* ============================================================
   LUCKY SPORTS STANDALONE PAGE
   ============================================================ */
body.ls-page {
  font-family:'Segoe UI',Arial,sans-serif;font-size:13px;
  background:#f0f0f0;color:#222;
  display:flex;flex-direction:column;min-height:100%;
}
.ls-hdr-right { display:flex;align-items:center; }

/* ============================================================
   SUPPORT / LIVE CHAT PAGE
   ============================================================ */
body.support-page { height:100%;width:100%;overflow:hidden;background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
#loading { position:fixed;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:#fff;gap:1rem;font-size:.95rem;color:#888; }
.spinner { width:40px;height:40px;border:4px solid #eee;
  border-top-color:#1ABC7B;border-radius:50%;
  animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ============================================================
   PROFILE MODALS (referral, gift-code, mobile-verify)
   ============================================================ */
.p-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.65);
  z-index:9000;display:flex;align-items:center;
  justify-content:center;padding:16px;
}
.p-modal {
  background:#1a1d2e;border-radius:16px;width:100%;max-width:420px;
  overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.p-modal--wide { max-width:460px;max-height:90vh;display:flex;flex-direction:column; }
.p-modal__hd {
  padding:20px 20px 16px;display:flex;align-items:center;justify-content:space-between;
}
.p-modal__hd--shrink { flex-shrink:0; }
.p-modal__hd--yellow { background:linear-gradient(135deg,#f7971e,#ffd200); }
.p-modal__hd--purple { background:linear-gradient(135deg,#667eea,#764ba2); }
.p-modal__hd--teal   { background:linear-gradient(135deg,#11998e,#38ef7d); }
.p-modal__hd-row     { display:flex;align-items:center;gap:10px; }
.p-modal__title      { color:#fff;font-weight:700;font-size:1.1rem; }
.p-modal__close {
  border:none;color:#fff;border-radius:50%;width:32px;height:32px;
  cursor:pointer;font-size:1.2rem;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.25);
}
.p-modal__close--sm { background:rgba(255,255,255,.15);font-size:1.1rem; }
.p-modal__close--lt { background:rgba(255,255,255,.2);font-size:1.1rem; }
.p-modal__body        { padding:20px; }
.p-modal__body--lg    { padding:24px; }
.p-modal__body--scroll{ padding:20px;overflow-y:auto;flex:1; }
.p-modal__infobox {
  background:#0d0f1c;border:1.5px solid #2d2f45;border-radius:12px;
  padding:14px 16px;margin-bottom:12px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.p-modal__infobox--mb16 { margin-bottom:16px; }
.p-modal__box {
  background:#0d0f1c;border:1.5px solid #2d2f45;border-radius:12px;
  padding:14px 16px;margin-bottom:16px;
}
.p-modal__row       { display:flex;align-items:center;gap:8px; }
.p-modal__row--gap10{ gap:10px; }
.p-modal__list-row  { display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #1e2035; }
.p-modal__list-row--sb { display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #1e2035; }
.p-modal__stats     { display:flex;gap:10px;margin-bottom:16px; }
.p-modal__stat-card { flex:1;background:#0d0f1c;border:1px solid #2d2f45;border-radius:10px;padding:12px;text-align:center; }
.p-modal__stat-val  { color:#ffd200;font-weight:800;font-size:1.5rem; }
.p-modal__stat-lbl  { color:#667;font-size:.75rem;margin-top:2px; }
.p-modal__label     { color:#aab;font-size:.75rem;letter-spacing:.05em;margin-bottom:4px; }
.p-modal__label--mb6{ margin-bottom:6px; }
.p-modal__label--mb8{ margin-bottom:8px; }
.p-modal__label--block { display:block;color:#aab;font-size:.82rem;margin-bottom:6px;letter-spacing:.04em; }
.p-modal__code      { color:#ffd200;font-weight:800;font-size:1.2rem;letter-spacing:.12em;font-family:monospace; }
.p-modal__link-box  { flex:1;color:#ccd;font-size:.8rem;font-family:monospace;background:#12152a;border:1px solid #2d2f45;border-radius:7px;padding:7px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.p-modal__note      { color:#556;font-size:.72rem;margin-top:6px; }
.p-modal__note--sm  { color:#667;font-size:.75rem;margin-top:2px; }
.p-modal__section-hd{ color:#aab;font-size:.78rem;letter-spacing:.05em;margin-bottom:8px; }
.p-modal__section-hd--sm { color:#aab;font-size:.8rem;letter-spacing:.05em;margin-bottom:8px; }
.p-modal__list      { max-height:180px;overflow-y:auto; }
.p-modal__empty     { text-align:center;color:#556;padding:20px;font-size:.85rem; }
.p-modal__empty--lg { text-align:center;color:#556;padding:24px;font-size:.85rem; }
.p-modal__flex1     { flex:1;min-width:0; }
.p-modal__btn {
  background:linear-gradient(135deg,#667eea,#764ba2);border:none;
  color:#fff;border-radius:8px;padding:9px 14px;
  font-weight:700;cursor:pointer;font-size:.82rem;white-space:nowrap;
}
.p-modal__btn--shrink { flex-shrink:0; }
.p-modal__btn--yellow { background:linear-gradient(135deg,#f7971e,#ffd200); }
.p-modal__btn--wide   { border-radius:10px;padding:12px 18px;font-size:.9rem;min-width:80px; }
.p-modal__btn--full {
  width:100%;background:linear-gradient(135deg,#11998e,#38ef7d);border:none;
  color:#fff;border-radius:10px;padding:13px;font-weight:700;cursor:pointer;font-size:.95rem;
}
.p-modal__msg    { display:none;border-radius:8px;padding:10px 14px;font-size:.88rem;margin-bottom:16px; }
.p-modal__msg--mt{ display:none;margin-top:10px;border-radius:8px;padding:9px 14px;font-size:.85rem; }
.p-modal__form-group { margin-bottom:16px; }
.p-modal__input  { flex:1;background:#0d0f1c;border:1.5px solid #2d2f45;border-radius:10px;color:#fff;padding:12px 14px;font-size:.95rem;outline:none;text-transform:uppercase; }
.p-modal__otp-input { width:100%;box-sizing:border-box;background:#0d0f1c;border:1.5px solid #2d2f45;border-radius:10px;color:#fff;padding:13px 14px;font-size:1.3rem;letter-spacing:.3em;text-align:center;outline:none;margin-bottom:12px; }
.p-modal__mobile-box { background:#0d0f1c;border:1.5px solid #2d2f45;border-radius:10px;padding:12px 16px;margin-bottom:16px;display:flex;align-items:center;gap:10px; }
.p-modal__phone-num  { color:#ccd;font-weight:600;font-family:monospace;letter-spacing:.1em; }
.p-modal__resend-wrap{ margin-top:10px;text-align:center; }
.p-modal__resend-btn { background:none;border:none;color:#38ef7d;font-size:.82rem;cursor:pointer;text-decoration:underline; }
.p-modal__desc       { color:#aab;font-size:.88rem;margin:0 0 16px; }
.p-modal__desc--sm   { color:#aab;font-size:.88rem;margin:0 0 14px; }
.p-modal__verified     { display:none;text-align:center;padding:16px 0; }
.p-modal__verified-ico { font-size:2.5rem;margin-bottom:10px; }
.p-modal__verified-ttl { color:#5dde85;font-weight:700;font-size:1.05rem; }
.p-modal__verified-sub { color:#667;font-size:.84rem;margin-top:6px; }
/* Referral user list items (JS innerHTML) */
.p-ref-item   { display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #1e2035; }
.p-ref-avatar { width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f7971e,#ffd200);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;color:#fff;font-size:.9rem; }
.p-ref-info   { flex:1;min-width:0; }
.p-ref-name   { color:#ccd;font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.p-ref-detail { color:#556;font-size:.75rem;margin-top:2px; }
.p-ref-id     { color:#aab;font-size:.75rem;flex-shrink:0; }
/* Gift code history list (JS innerHTML) */
.p-gh-item   { display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #1e2035; }
.p-gh-code   { color:#ccd;font-size:.88rem;font-family:monospace; }
.p-gh-date   { color:#556;font-size:.75rem;margin-top:2px; }
.p-gh-amount { color:#5dde85;font-weight:700;font-size:.95rem;white-space:nowrap;margin-left:12px; }
/* Profile list verified badge */
.prof-verify-badge { display:none;background:#28a745;color:#fff;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:20px;margin-right:4px; }

/* ============================================================
   HOME PAGE extra utilities
   ============================================================ */
.sec-pt-xs { padding-top:.5rem; }
.sec-pt-sm { padding-top:.75rem; }
.text-accent      { color:var(--accent); }
.text-accent-bold { color:var(--accent);font-weight:700;margin-left:.3rem; }
.announce-notice  { color:var(--accent);font-weight:700; }
.promo-banner--md         { min-height:145px;padding:1.4rem 1.5rem; }
.promo-banner__title--lg  { font-size:1.05rem; }
.promo-banner__sub--w     { max-width:280px; }
.promo-banner__btn--mt    { margin-top:.7rem; }
.promo-banner__deco       { position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:4rem;opacity:.15;pointer-events:none; }
.app-dl-row     { display:flex;gap:.5rem;align-items:flex-end;justify-content:center; }
.app-phone-sm   { font-size:5.5rem;opacity:.5;transform:translateY(6px); }
.app-phone-lg   { font-size:7rem;opacity:.65; }
.app-btn--gap   { gap:.5rem; }
.app-btn--light { color:#111;background:#fff;gap:.5rem; }
.app-icon--android { color:#3ddc84;font-size:1.15rem; }
.icon-lg           { font-size:1.15rem; }
/* Match card empty state (JS innerHTML) */
.match-empty     { display:flex;align-items:center;justify-content:center;min-height:80px;width:100%;color:rgba(0,0,0,.45);font-size:.8rem;text-decoration:none; }
.match-empty__cta{ color:var(--accent);margin-left:.3rem; }
/* Skeleton loading bars */
.skel-bar      { background:rgba(0,0,0,.06);border-radius:4px;display:block; }
.skel-bar--t   { height:10px;width:60%;margin:.4rem 0; }
.skel-bar--w70 { height:12px;width:70%; }
.skel-bar--w65 { height:12px;width:65%; }
/* Game grid empty cell */
.grid-cell-empty { padding:1rem;color:rgba(255,255,255,.4);font-size:.85rem; }

/* ============================================================
   RESULTS PAGE
   ============================================================ */
.res-login-wrap { text-align:center;padding:3rem 1rem; }
.res-login-ico  { font-size:2.5rem;color:#f59e0b;margin-bottom:1rem;display:block; }
.res-login-msg  { font-size:1rem;margin-bottom:1.25rem;color:#ccc; }
.res-login-btn  { background:#f59e0b;color:#000;padding:.6rem 1.6rem;border-radius:8px;font-weight:600;text-decoration:none; }
.res-datepicker-hidden { position:absolute;opacity:0;pointer-events:none;width:1px;height:1px; }
.res-cal-ico    { font-size:.75rem;margin-left:.35rem; }

/* ============================================================
   404 PAGE
   ============================================================ */
.error-page       { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;gap:1rem; }
.error-page__ico  { font-size:5rem;opacity:.25; }
.error-page__code { font-size:4rem;font-weight:900;background:var(--bg-gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.error-page__ttl  { font-size:1.1rem;font-weight:700;color:var(--text-color-contrast-main); }
.error-page__msg  { color:var(--text-color-main);max-width:320px; }
.error-page__btn  { margin-top:1rem;padding:.6rem 1.75rem;background:var(--bg-gradient-primary);color:#fff;border-radius:.5rem;font-weight:700;font-size:.875rem; }

/* ============================================================
   VIP PAGE
   ============================================================ */
.vip-small-lbl { color:#ccc;font-size:.82rem;display:block;margin-bottom:6px; }
.vip-sub-color { color:#aaa; }
.vip-mt        { margin-top:8px; }
.vip-select    { width:100%;padding:10px;background:#2c2c2c;color:#fff;border:1px solid #444;border-radius:6px;font-size:.88rem; }

/* ============================================================
   SETTINGS PAGE
   ============================================================ */
.setting-note   { font-size:.78rem;color:#999; }
.setting-hint   { font-size:.8rem;color:rgba(255,255,255,.4);margin-top:.3rem; }
.setting-accent { color:#7c4dff; }
.setting-lbl    { color:#333; }

/* ============================================================
   REWARD / CHECK-IN PAGES
   ============================================================ */
.rwd-svg-ico  { width:18px;height:18px;fill:#222; }
.rwd-star-val { font-size:.9rem;font-weight:800;color:#222; }
.rwd-star-ico { font-size:1.3rem;color:#bbb;line-height:1; }
.checkin-bottom-bg { background-image:url('/assets/check-in/bottom.svg');background-size:cover; }

/* ============================================================
   BETTING PASS PAGE
   ============================================================ */
.bp-logged-wrap { flex-direction:column;gap:14px; }
.bp-flex-col    { flex:1;margin:0; }

/* ============================================================
   REFERRAL PAGE
   ============================================================ */
.ref-qr-img  { width:160px;height:160px;display:none;border-radius:4px; }
.ref-pill-mb0{ margin-bottom:0; }

/* ============================================================
   WOF PAGE
   ============================================================ */
.wof-coin-canvas { position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:8; }

/* ============================================================
   GAMES PAGE
   ============================================================ */
.game-grid-empty     { grid-column:1/-1;text-align:center;padding:3rem;color:var(--text-muted); }
.game-grid-empty-alt { grid-column:1/-1;text-align:center;padding:3rem;color:var(--text-muted,#aaa); }
.game-img-fit        { object-fit:contain;background:#0d0d22; }
.game-ph-ico         { font-size:2.5rem;margin-bottom:.75rem;opacity:.4; }
.game-ph-ico--lg     { font-size:2.5rem;margin-bottom:1rem;opacity:.4; }
.game-cat-mt         { margin-top:.75rem; }

/* ── VIP mobile wrappers (migrated from inline) ── */
.vip-mobile-select-wrap { padding:12px;background:#1a1a1a; }
.vip-mobile-data-wrap   { margin:0;padding:0 12px 12px;background:#1a1a1a; }
.vip-mobile-cta-wrap    { padding:12px;display:flex;justify-content:center; }
.vip-accordion-wrapper  { padding:12px;background:#1a1a1a; }

/* Game launch page wrapper */
.gl-page-wrap { margin:0;padding:0; }

.ls-tv-ico { font-size:2rem;margin-bottom:.6rem;display:block;color:#ccc; }