/* ======================================================================
   Bet777 — page shell (winpkr-style mobile casino)
   RTL-first alignment. Urdu labels stay native.
   ====================================================================== */

/* Force consistent RTL text flow inside app canvas */
html[dir="rtl"] .app,
.app[dir="rtl"]{
  text-align: right;
  direction: rtl;
}

/* Numbers / IDs always LTR */
.ltr, .lt, .num, .money, .uid{
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

/* Page header (sticky sub-nav style) */
.pg-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 14px 6px;
}
.pg-head h1{
  margin:0; flex:1; text-align:center;
  font-size:18px; font-weight:800; color:#fff;
  font-family:'Hind','Noto Nastaliq Urdu',sans-serif;
}
.pg-head .back{
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#2a1550,#160828);
  border:1px solid rgba(168,85,247,.35); color:#e9d5ff;
  flex-shrink:0;
}
.pg-sub{
  text-align:center; color:#b9a8d8; font-size:12px;
  margin:0 14px 12px; line-height:1.5;
}

/* Banner hero card */
.pg-banner{
  margin:0 12px 12px; padding:18px 16px;
  border-radius:18px; position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 80% 120% at 100% 0%, rgba(251,191,36,.22), transparent 55%),
    linear-gradient(135deg,#4c1d95 0%,#6d28d9 45%,#1e0b3a 100%);
  border:1px solid rgba(251,191,36,.28);
  box-shadow:0 12px 32px rgba(109,40,217,.35);
  text-align:right;
}
.pg-banner.cash{
  background:
    radial-gradient(ellipse 80% 120% at 0% 0%, rgba(34,211,238,.25), transparent 55%),
    linear-gradient(135deg,#0e7490 0%,#155e75 45%,#0c1a2e 100%);
  border-color:rgba(34,211,238,.35);
}
.pg-banner.ref{
  background:
    radial-gradient(ellipse 80% 120% at 100% 0%, rgba(236,72,153,.28), transparent 55%),
    linear-gradient(135deg,#9d174d 0%,#be185d 40%,#1e0b2e 100%);
  border-color:rgba(251,113,133,.4);
}
.pg-banner.reward{
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(251,191,36,.3), transparent 55%),
    linear-gradient(135deg,#b45309 0%,#d97706 40%,#1e0b2e 100%);
  border-color:rgba(251,191,36,.4);
}
.pg-banner h2{
  margin:0 0 6px; font-size:18px; font-weight:900; color:#fff;
  font-family:'Hind',sans-serif;
}
.pg-banner p{ margin:0; font-size:12px; color:rgba(255,255,255,.85); line-height:1.55; }
.pg-banner .amt{
  margin-top:10px; font-size:28px; font-weight:900; color:#fde047;
  font-family:'Space Grotesk',sans-serif; direction:ltr; text-align:right;
}

/* Section title */
.sec-title{
  display:flex; align-items:center; gap:8px;
  padding:4px 14px 10px;
  font-size:14px; font-weight:800; color:#fff;
  font-family:'Hind',sans-serif;
}
.sec-title .dot{
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg,#fde047,#a855f7);
  box-shadow:0 0 10px rgba(168,85,247,.6);
  flex-shrink:0;
}

/* Promo / feature cards */
.card-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  padding:0 12px 14px;
}
.f-card{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#1c0c36,#120624);
  border:1px solid rgba(168,85,247,.28);
  border-radius:16px; padding:14px 12px;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.3);
}
.f-card.wide{ grid-column:1 / -1; text-align:right;
  display:flex; align-items:center; gap:12px; padding:14px; }
.f-card.wide .f-body{ flex:1; min-width:0; }
.f-card.hot{
  border-color:rgba(251,191,36,.4);
  background:linear-gradient(180deg,rgba(251,191,36,.1),#120624);
}
.f-ic{
  width:48px; height:48px; margin:0 auto 10px; border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  color:#fff; box-shadow:0 6px 16px rgba(168,85,247,.4);
}
.f-card.hot .f-ic{
  background:linear-gradient(135deg,#fbbf24,#f97316); color:#3b0764;
  box-shadow:0 6px 16px rgba(251,191,36,.4);
}
.f-card.wide .f-ic{ margin:0; flex-shrink:0; }
.f-ic svg{ width:22px; height:22px; }
.f-card h3{ margin:0 0 4px; font-size:13px; font-weight:800; color:#fff; }
.f-amt{
  font-size:20px; font-weight:900; margin:0 0 4px;
  background:linear-gradient(135deg,#fde047,#fbbf24);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-family:'Space Grotesk',sans-serif; direction:ltr;
}
.f-desc{ font-size:11px; color:#b9a8d8; margin:0 0 12px; line-height:1.4; min-height:30px; }
.f-card.wide .f-desc{ min-height:0; }
.f-btn{
  width:100%; padding:10px; border:none; border-radius:10px;
  background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff;
  font-size:12px; font-weight:800; cursor:pointer; font-family:inherit;
}
.f-card.hot .f-btn{
  background:linear-gradient(135deg,#fbbf24,#f97316); color:#3b0764;
}
.f-btn:disabled, .f-btn.claimed{
  background:rgba(168,85,247,.15) !important; color:#8b7aa8 !important; cursor:not-allowed;
}
.f-btn.claimed{ background:linear-gradient(135deg,#22c55e,#16a34a) !important; color:#fff !important; }
.f-card.wide .f-btn{ width:auto; padding:10px 16px; flex-shrink:0; }

/* Balance strip */
.bal-strip{
  margin:0 12px 12px; padding:14px 16px; border-radius:16px;
  background:linear-gradient(180deg,#190a31,#120624);
  border:1px solid rgba(168,85,247,.28);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.bal-strip .lbl{ font-size:12px; color:#b9a8d8; margin:0 0 2px; }
.bal-strip .val{
  font-size:22px; font-weight:900; color:#fde047;
  font-family:'Space Grotesk',sans-serif; direction:ltr; text-align:right;
}

/* Profile alignment */
.prof-hero{
  text-align:center; padding:18px 16px 8px;
}
.prof-av{
  width:84px; height:84px; margin:0 auto 12px; border-radius:50%;
  background:linear-gradient(145deg,#a855f7,#6d28d9);
  display:grid; place-items:center; font-size:34px; font-weight:900; color:#fff;
  font-family:'Space Grotesk',sans-serif;
  border:3px solid rgba(251,191,36,.5);
  box-shadow:0 10px 28px rgba(168,85,247,.5);
}
.prof-hero h1{ margin:0 0 4px; font-size:20px; color:#fff; font-weight:800; text-align:center; }
.prof-hero p{ margin:0; color:#b9a8d8; font-size:13px; text-align:center; direction:ltr; }

.stat-3{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
  padding:0 12px 12px;
}
.stat-3 .s{
  text-align:center; padding:12px 6px; border-radius:14px;
  background:linear-gradient(180deg,#190a31,#120624);
  border:1px solid rgba(168,85,247,.22);
}
.stat-3 .s .n{
  font-size:15px; font-weight:800; color:#fde047;
  font-family:'Space Grotesk',sans-serif; direction:ltr;
}
.stat-3 .s .l{ font-size:10px; color:#b9a8d8; margin-top:4px; }

/* Stat rows RTL-safe */
.stat-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; text-align:right;
}
.stat-lbl{ text-align:right; }
.stat-val{ text-align:left; direction:ltr; flex-shrink:0; }

/* Referral box */
.ref-box{
  margin:0 12px 14px; padding:20px 16px; border-radius:18px; text-align:center;
  background:linear-gradient(135deg,#9d174d,#be185d 50%,#4a044e);
  border:1px solid rgba(251,113,133,.35);
  color:#fff;
}
.ref-box h3{ margin:0 0 8px; font-size:17px; font-weight:900; }
.ref-box .big{
  font-size:32px; font-weight:900; margin:0 0 6px;
  font-family:'Space Grotesk',sans-serif; direction:ltr; color:#fde047;
}
.ref-box p{ margin:0 0 14px; font-size:12px; opacity:.92; }
.ref-row{ display:flex; gap:8px; max-width:320px; margin:0 auto; direction:ltr; }
.ref-row input{
  flex:1; padding:11px 12px; border:none; border-radius:10px;
  background:rgba(255,255,255,.16); color:#fff; font-weight:700;
  text-align:center; font-family:'Space Grotesk',sans-serif; font-size:13px;
}
.ref-row button{
  padding:11px 16px; border:none; border-radius:10px;
  background:#fff; color:#9d174d; font-weight:800; cursor:pointer; font-family:inherit;
}

/* Cashback tiers */
.tier{
  margin:0 12px 10px; padding:14px; border-radius:14px;
  background:linear-gradient(180deg,#190a31,#120624);
  border:1px solid rgba(168,85,247,.25);
  display:flex; align-items:center; gap:12px; text-align:right;
}
.tier .t-ic{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  display:grid; place-items:center; color:#fff; font-weight:900;
  font-family:'Space Grotesk',sans-serif; font-size:13px;
}
.tier .t-body{ flex:1; min-width:0; }
.tier .t-body h4{ margin:0 0 2px; font-size:13px; color:#fff; font-weight:800; }
.tier .t-body p{ margin:0; font-size:11px; color:#b9a8d8; }
.tier .pct{
  font-size:18px; font-weight:900; color:#fde047;
  font-family:'Space Grotesk',sans-serif; direction:ltr;
}

/* Steps list */
.steps{
  margin:0 12px 14px; padding:14px 16px; border-radius:14px;
  background:linear-gradient(180deg,#190a31,#120624);
  border:1px solid rgba(168,85,247,.22);
  list-style:none; counter-reset:st;
}
.steps li{
  counter-increment:st; position:relative;
  padding:8px 0 8px 0; padding-inline-start:36px;
  font-size:13px; color:#d9c7f5; line-height:1.5;
  border-bottom:1px solid rgba(168,85,247,.1);
}
.steps li:last-child{ border-bottom:none; }
.steps li::before{
  content:counter(st);
  position:absolute; inset-inline-start:0; top:8px;
  width:24px; height:24px; border-radius:8px;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  color:#fff; font-size:11px; font-weight:800;
  display:grid; place-items:center;
  font-family:'Space Grotesk',sans-serif;
}
.steps li strong{ color:#fde047; }

/* Toast */
.toast2{
  position:fixed; top:70px; left:50%; transform:translateX(-50%);
  padding:12px 24px; border-radius:12px; font-size:13px; font-weight:700;
  z-index:10000;
}
.toast2.success{ background:linear-gradient(135deg,#10b981,#059669); color:#fff; }
.toast2.error{ background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; }

/* Sidebar RTL alignment fixes */
.sb{ text-align:right; }
.sb-user{
  flex-direction:row;
  text-align:right;
}
.sb-user > div:last-child{
  text-align:start !important; /* balance block at visual start in RTL */
}
.sb-bal-lbl, .sb-bal{ text-align:start; }
.sb-id{ text-align:start !important; direction:ltr; }
.sb-name{ text-align:right; }
.sb-link{
  flex-direction:row;
  justify-content:flex-start;
  text-align:right;
}
.sb-link-ic{ margin:0; }
.sb-acct-left{ flex-direction:row; }
.sb-tile-lbl{ text-align:center; line-height:1.35; min-height:2.6em; display:flex; align-items:center; justify-content:center; }

/* Panel default right align under RTL */
html[dir="rtl"] .panel{ text-align:right; }
html[dir="rtl"] .panel h2,
html[dir="rtl"] .panel h3{ text-align:right; }
html[dir="rtl"] .auth-label{ text-align:right; }
html[dir="rtl"] .auth-input{ text-align:right; }
html[dir="rtl"] .auth-input[type="number"],
html[dir="rtl"] .auth-input.ltr{ text-align:left; direction:ltr; }

/* Bottom safe space */
.pg-end{ height:100px; }

/* Sub nav chips (promo family) */
.subnav{
  display:flex; gap:8px; overflow-x:auto; padding:0 12px 12px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.subnav::-webkit-scrollbar{ display:none; }
.subnav a{
  flex:0 0 auto; padding:8px 14px; border-radius:999px;
  font-size:12px; font-weight:800; white-space:nowrap;
  border:1px solid rgba(168,85,247,.3);
  background:#160a2e; color:#e9d5ff;
}
.subnav a.on{
  background:linear-gradient(180deg,#a855f7,#7c3aed);
  border-color:transparent; color:#fff;
  box-shadow:0 4px 14px rgba(168,85,247,.4);
}

/* ===== Mobile smoothness (perf) — no transform traps, no sticky jank ===== */
html,body{
  overscroll-behavior-y:none;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:auto;
}
body{
  overflow-x:hidden;
  /* keep document as the scroll container — smooth & sticky-friendly */
}
/* CRITICAL: never put transform/filter on stage/app — it breaks position:fixed botnav */
.stage,.app{
  transform:none!important;
  filter:none!important;
  perspective:none!important;
  will-change:auto!important;
}
.app{
  overflow-x:hidden!important;
  overflow-y:visible!important;
  padding-bottom:calc(92px + env(safe-area-inset-bottom,0px));
}
.botnav{
  position:fixed!important;
  bottom:max(10px, env(safe-area-inset-bottom,0px))!important;
  left:50%!important;
  transform:translate3d(-50%,0,0)!important;
  z-index:9990!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.topbar{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:rgba(10,4,24,.97)!important;
}
@media (max-width:760px){
  .topbar,.glass,.drawer-panel,.modal-sheet,.promo-card,.gc,.card,.botnav{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .bg-particles,.auth-particles,#particles{display:none!important}
  *{scroll-behavior:auto}
  img,video{max-width:100%;height:auto}
  .game-card,.gcard,.tile,.sb-tile,.lg{
    will-change:auto!important;
    transition:opacity .12s ease!important;
  }
  .gcard:hover,.lg:hover{transform:none!important}
  .gcard:hover .gcard-bg{transform:none!important}
  .mqr,.marquee,.ticker-track{animation-duration:60s!important}
  .orb,.particle,.sparkle,.fire-fx,.hero-orb,.float-orb{display:none!important}
  /* Cut continuous expensive animations */
  .b7-logo-word .brand-line,#site-preloader .pl-word{animation:none!important}
  .gcard .live-dot{animation:none!important;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}