/* ROYALS 888 MOBILE DRAWER + BANGLA/ENGLISH UI */
:root{
  --r-bg:#07101d;
  --r-panel:#101a2a;
  --r-panel2:#162235;
  --r-gold:#ffd84a;
  --r-gold2:#c89116;
  --r-red:#ff3155;
  --r-muted:#9aa8ba;
  --r-green:#31d65b;
  --r-line:rgba(255,216,74,.16);
}
body{
  background:radial-gradient(circle at top,#101a2a 0,#07101d 58%,#03070d 100%)!important;
}
.rp-app{
  max-width:860px;
  margin:0 auto;
  padding-bottom:88px!important;
}

/* TOP HEADER LIKE APP */
.rp-top{
  height:74px!important;
  display:grid!important;
  grid-template-columns:54px 1fr 54px!important;
  align-items:center!important;
  gap:8px!important;
  padding:10px 14px!important;
  background:linear-gradient(180deg,rgba(9,16,28,.98),rgba(9,16,28,.78))!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
  position:sticky!important;
  top:0!important;
  z-index:900!important;
  backdrop-filter:blur(14px)!important;
}
.rp-menu{
  width:46px!important;
  height:46px!important;
  border-radius:15px!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(255,255,255,.03)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  color:#e9f1ff!important;
  font-size:0!important;
  position:relative!important;
}
.rp-menu::before{
  content:"☰";
  font-size:28px;
  line-height:1;
  color:#dce6f7;
}
.rp-menu:active{transform:scale(.94)}
.rp-logo{
  justify-self:center!important;
  max-width:152px!important;
  height:54px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:transparent!important;
}
.rp-logo .royals-logo-img{
  max-width:145px!important;
  max-height:54px!important;
}
.rp-auth{
  justify-content:flex-end!important;
  gap:6px!important;
}
.rp-auth .rp-balance,
.rp-auth .rp-btn.login,
.rp-auth .rp-btn.reg,
.rp-auth .rp-search{
  display:none!important;
}
.rp-notify{
  position:relative;
  width:46px;
  height:46px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  font-size:23px;
}
.rp-notify i{
  position:absolute;
  right:4px;
  top:3px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:999px;
  background:#ff3155;
  color:#fff;
  font-size:11px;
  font-style:normal;
  display:grid;
  place-items:center;
  font-weight:900;
}

/* TOP BALANCE CARDS */
.rp-wallet-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:10px 12px 12px;
}
.rp-wallet-card{
  min-height:58px;
  border-radius:13px;
  background:linear-gradient(145deg,rgba(23,35,53,.98),rgba(12,20,33,.98));
  border:1px solid rgba(255,255,255,.055);
  box-shadow:0 10px 28px rgba(0,0,0,.24);
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:9px;
  color:#fff;
}
.rp-wallet-card .wc-icon{
  color:var(--r-gold);
  font-size:22px;
  width:28px;
  text-align:center;
}
.rp-wallet-card small{
  display:block;
  color:#b7c2d1;
  font-size:12px;
  white-space:nowrap;
}
.rp-wallet-card b{
  display:block;
  font-size:20px;
  letter-spacing:.4px;
  margin-top:2px;
  white-space:nowrap;
}
.rp-wallet-card .wc-add{
  margin-left:auto;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--r-green);
  color:#09230f;
  display:grid;
  place-items:center;
  font-size:24px;
  font-weight:950;
}
@media(max-width:420px){
  .rp-wallet-card{padding:9px 8px;gap:6px}
  .rp-wallet-card b{font-size:17px}
  .rp-wallet-card small{font-size:11px}
}

/* SIDEBAR: hidden until menu tap */
.rp-side{
  position:fixed!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:min(82vw,390px)!important;
  height:100dvh!important;
  transform:translateX(-105%)!important;
  transition:transform .28s cubic-bezier(.2,.9,.2,1)!important;
  z-index:2000!important;
  background:
    radial-gradient(circle at top left,rgba(255,216,74,.10),transparent 32%),
    linear-gradient(180deg,#0b1422 0%,#09111d 100%)!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  box-shadow:26px 0 60px rgba(0,0,0,.55)!important;
  overflow:auto!important;
  padding:18px 22px!important;
}
.rp-side.open{transform:translateX(0)!important}
.rp-shade{
  position:fixed!important;
  inset:0!important;
  background:rgba(0,0,0,.62)!important;
  backdrop-filter:blur(2px)!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:.25s!important;
  z-index:1900!important;
}
.rp-shade.open{opacity:1!important;pointer-events:auto!important}
.side-top{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  margin-bottom:16px;
}
.side-close{
  width:42px;
  height:42px;
  border:0;
  background:transparent;
  color:#c7d1df;
  font-size:34px;
  line-height:1;
}
.side-logo{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  margin:0!important;
  padding:0!important;
}
.side-logo .royals-logo-img{
  max-width:140px!important;
  max-height:58px!important;
}
.side-user{
  display:flex;
  align-items:center;
  gap:12px;
  margin:12px 0 18px;
}
.side-avatar{
  width:72px;
  height:72px;
  border-radius:50%;
  border:3px solid var(--r-gold);
  background:linear-gradient(135deg,#1b2b42,#0b1422);
  display:grid;
  place-items:center;
  font-size:34px;
  box-shadow:0 0 18px rgba(255,216,74,.22);
}
.side-name{
  font-size:19px;
  font-weight:900;
  color:#fff;
  line-height:1.2;
}
.side-id{
  color:#bac6d8;
  font-size:14px;
  margin-top:4px;
}
.side-vip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  margin-left:4px;
  color:#ffd84a;
  background:rgba(255,216,74,.10);
  padding:3px 7px;
  border-radius:999px;
}
.side-balance{
  background:linear-gradient(145deg,#162235,#0f1a2a);
  border:1px solid rgba(255,255,255,.055);
  border-radius:15px;
  padding:12px;
  margin:10px 0;
  display:flex;
  align-items:center;
  gap:10px;
}
.side-balance .bal-icon{color:var(--r-gold);font-size:24px;width:30px}
.side-balance small{display:block;color:#b8c4d3;font-size:13px}
.side-balance b{display:block;color:#fff;font-size:24px;margin-top:4px}
.side-balance .plus{
  margin-left:auto;
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#31d65b;
  color:#06240f;
  font-size:25px;
  font-weight:950;
}
.side-bonus{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:9px 0 16px;
  color:#b9c4d4;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-bottom:14px;
}
.side-bonus b{
  color:var(--r-gold);
  border-bottom:1px solid var(--r-gold);
  font-size:18px;
}
.side-list{
  display:flex!important;
  flex-direction:column!important;
  gap:2px!important;
  margin-top:4px!important;
}
.side-list a,
.side-wide{
  height:48px!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  color:#c5cfde!important;
  background:transparent!important;
  border:0!important;
  border-radius:12px!important;
  padding:0 2px!important;
  font-size:17px!important;
  font-weight:800!important;
}
.side-list a:hover,
.side-list a.active,
.side-wide:hover{
  color:#fff!important;
  background:rgba(255,255,255,.045)!important;
}
.side-list a span,
.side-wide span{
  width:34px;
  text-align:center;
  font-size:24px;
  filter:grayscale(.20);
}
.side-lang{
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:14px 0;
  margin:14px 0;
}
.side-lang-title{
  color:#b9c4d4;
  font-size:16px;
  margin-bottom:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.lang-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.lang-btn{
  height:56px;
  border-radius:12px;
  background:#111b2a;
  color:#dfe7f4;
  border:1px solid rgba(255,255,255,.18);
  font-size:17px;
  font-weight:900;
}
.lang-btn.active{
  color:#b9ffcf;
  border-color:#31d65b;
  box-shadow:inset 0 0 0 1px rgba(49,214,91,.25);
}
.side-logout{
  color:#ff596c!important;
  font-weight:950!important;
  margin-top:10px!important;
}

/* HOME TABS LIKE SCREENSHOT */
.tabs{
  gap:12px!important;
  padding:10px 4px 12px!important;
  border:0!important;
}
.tabs a{
  min-width:78px!important;
  height:64px!important;
  border-radius:14px!important;
  background:rgba(17,27,42,.88)!important;
  color:#b7c2d1!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:7px 8px!important;
  position:relative!important;
  box-shadow:none!important;
}
.tabs a .tab-icon{
  font-size:24px;
  line-height:1;
  filter:grayscale(1);
  opacity:.78;
}
.tabs a.active,
.tabs a:hover{
  color:var(--r-gold)!important;
}
.tabs a.active .tab-icon,
.tabs a:hover .tab-icon{
  filter:none;
  opacity:1;
  transform:scale(1.08);
}
.tabs a.active::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:3px;
  border-radius:8px;
  background:var(--r-gold);
  box-shadow:0 0 12px rgba(255,216,74,.55);
}

/* BOTTOM NAV LIKE IMAGE */
.bottom{
  height:86px!important;
  background:linear-gradient(180deg,rgba(16,25,39,.96),rgba(8,14,24,.98))!important;
  border-top:1px solid rgba(255,255,255,.06)!important;
  box-shadow:0 -12px 38px rgba(0,0,0,.56)!important;
}
.bottom a{
  color:#98a5b6!important;
  font-size:13px!important;
  gap:3px!important;
}
.bottom a span{
  font-size:27px!important;
  filter:grayscale(1);
  opacity:.86;
}
.bottom a.active{
  color:var(--r-gold)!important;
}
.bottom a.active span{
  filter:none;
  opacity:1;
  text-shadow:0 0 15px rgba(255,216,74,.55);
}
.bottom a.wallet{
  position:relative!important;
}
.bottom a.wallet span{
  width:76px!important;
  height:76px!important;
  margin-top:-38px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,#ffe57a 0%,#d49a16 62%,#8b5700 100%)!important;
  border:7px solid #151d2c!important;
  color:#0b111c!important;
  filter:none!important;
  box-shadow:0 0 24px rgba(255,216,74,.40), inset 0 0 12px rgba(255,255,255,.42)!important;
}
.bottom a.wallet.active span{
  transform:translateY(-2px) scale(1.04);
}
.float{right:14px!important;bottom:118px!important}
.float a{
  width:60px!important;
  height:60px!important;
  background:linear-gradient(135deg,#1d9bf0,#53fbff)!important;
}

/* HOME BENGALI POLISH */
.module-grid a{
  color:#d8e2f1!important;
}
.title{
  color:#fff!important;
}
.title::first-letter{
  color:var(--r-red);
}

@media(max-width:560px){
  .rp-app{padding-left:10px!important;padding-right:10px!important}
  .hero{margin-top:6px!important}
  .game-grid{grid-template-columns:repeat(3,1fr)!important;gap:10px!important}
}



/* ROYALS 888 SAME-TO-SAME NAVBAR / DRAWER FINAL */
.rp-top{
  height:76px!important;
  display:grid!important;
  grid-template-columns:56px 1fr 56px!important;
  align-items:center!important;
  padding:10px 14px!important;
  background:
    radial-gradient(circle at top,rgba(255,216,74,.10),transparent 38%),
    linear-gradient(180deg,#0c1725 0%,#07101d 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
  box-shadow:0 7px 24px rgba(0,0,0,.34)!important;
}
.rp-menu{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  width:50px!important;
  height:50px!important;
  border-radius:14px!important;
  place-items:center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  z-index:1200!important;
}
.rp-menu::before{
  content:"☰"!important;
  color:#dce8f6!important;
  font-size:34px!important;
  font-weight:400!important;
  line-height:1!important;
}
.rp-logo{
  justify-self:center!important;
  align-self:center!important;
  height:56px!important;
  width:156px!important;
}
.rp-logo img{
  width:150px!important;
  max-width:150px!important;
  max-height:58px!important;
  object-fit:contain!important;
}
.rp-top-right{
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
}
.rp-notify{
  display:grid!important;
  width:48px!important;
  height:48px!important;
  border-radius:15px!important;
  place-items:center!important;
  background:transparent!important;
  border:0!important;
  font-size:27px!important;
  color:#f7d44a!important;
  text-decoration:none!important;
  position:relative!important;
}
.rp-notify i{
  position:absolute!important;
  right:1px!important;
  top:1px!important;
  min-width:19px!important;
  height:19px!important;
  border-radius:999px!important;
  background:#ff3155!important;
  color:#fff!important;
  font-size:11px!important;
  display:grid!important;
  place-items:center!important;
  font-style:normal!important;
  font-weight:900!important;
}

/* logged out top auth strip */
.rp-guest-strip{
  display:grid!important;
  grid-template-columns:1fr 1fr auto auto!important;
  gap:8px!important;
  padding:10px 12px!important;
  background:#07101d!important;
}
.rp-guest-strip a,
.rp-guest-strip button{
  height:42px!important;
  border-radius:12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:14px!important;
  font-weight:950!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:#111c2e!important;
  color:#fff!important;
  text-decoration:none!important;
}
.rp-guest-strip .login-btn{
  background:linear-gradient(135deg,#ffd84a,#d9900f)!important;
  color:#080d14!important;
  border:0!important;
}
.rp-guest-strip .reg-btn{
  background:linear-gradient(135deg,#31d65b,#159a3b)!important;
  color:#031208!important;
  border:0!important;
}
.rp-guest-strip .lang-mini.active{
  border-color:#ffd84a!important;
  color:#ffd84a!important;
}

/* drawer exact */
.rp-side{
  width:min(82vw,392px)!important;
  padding:20px 22px!important;
  background:
    linear-gradient(90deg,rgba(7,16,29,.98),rgba(13,25,40,.98)),
    radial-gradient(circle at 16% 0%,rgba(255,216,74,.09),transparent 26%)!important;
}
.side-top{
  grid-template-columns:52px 1fr 52px!important;
  margin-bottom:20px!important;
}
.side-close{
  color:#d5dfec!important;
  font-size:42px!important;
  width:52px!important;
  height:52px!important;
}
.side-logo img{
  max-width:150px!important;
  max-height:66px!important;
}
.side-user{
  margin-top:20px!important;
  margin-bottom:18px!important;
}
.side-avatar{
  width:74px!important;
  height:74px!important;
  background:linear-gradient(135deg,#e8f4ff,#9fc7e8)!important;
  color:#092238!important;
}
.side-name{
  font-size:20px!important;
  text-transform:uppercase!important;
}
.side-id{
  font-size:15px!important;
}
.side-balance{
  min-height:72px!important;
  padding:13px 14px!important;
}
.side-balance b{
  font-size:25px!important;
}
.side-list a{
  height:52px!important;
  font-size:18px!important;
}
.side-list a span{
  font-size:25px!important;
  color:#aeb9c7!important;
}
.side-lang-title{
  font-size:18px!important;
}
.lang-btn{
  height:58px!important;
  font-size:18px!important;
}
.side-auth-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:14px 0;
}
.side-auth-row a{
  height:52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:950;
}
.side-auth-row .login{
  background:linear-gradient(135deg,#ffd84a,#d9900f);
  color:#07101d;
}
.side-auth-row .register{
  background:linear-gradient(135deg,#31d65b,#159a3b);
  color:#031208;
}
@media(max-width:420px){
  .rp-top{grid-template-columns:52px 1fr 52px!important;padding:10px 10px!important}
  .rp-logo,.rp-logo img{width:140px!important;max-width:140px!important}
  .rp-guest-strip{grid-template-columns:1fr 1fr 58px 58px!important;gap:6px!important}
  .rp-guest-strip a,.rp-guest-strip button{font-size:13px!important}
}



/* ROYALS 888 MOBILE NAV WIDTH + GUEST AUTH/LANG GROUP FIX */
html,body{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}
.rp-app{
  width:100%!important;
  max-width:480px!important;
  margin:0 auto!important;
  overflow-x:hidden!important;
  padding-left:0!important;
  padding-right:0!important;
}
.rp-top{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  grid-template-columns:50px minmax(0,1fr) 50px!important;
  column-gap:4px!important;
  padding:8px 10px!important;
  box-sizing:border-box!important;
}
.rp-menu,
.rp-notify{
  width:46px!important;
  height:46px!important;
}
.rp-menu::before{
  font-size:30px!important;
}
.rp-logo{
  width:100%!important;
  min-width:0!important;
  max-width:150px!important;
  justify-self:center!important;
}
.rp-logo img,
.rp-logo .royals-logo-img{
  max-width:138px!important;
  width:138px!important;
  max-height:52px!important;
  object-fit:contain!important;
}
.rp-top-right{
  min-width:0!important;
  width:50px!important;
}

/* logged-out row: left side Login/Register, right side BN/EN */
.rp-guest-strip{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;
  padding:8px 10px!important;
  overflow:hidden!important;
}
.guest-auth-group{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}
.guest-lang-group{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:4px!important;
  padding:4px!important;
  border-radius:14px!important;
  background:#0b1524!important;
  border:1px solid rgba(255,255,255,.12)!important;
}
.rp-guest-strip a,
.rp-guest-strip button{
  margin:0!important;
  box-sizing:border-box!important;
}
.rp-guest-strip .login-btn,
.rp-guest-strip .reg-btn{
  width:100%!important;
  min-width:0!important;
  height:42px!important;
  padding:0 8px!important;
  white-space:nowrap!important;
  font-size:14px!important;
}
.rp-guest-strip .lang-mini{
  width:43px!important;
  min-width:43px!important;
  height:34px!important;
  padding:0!important;
  border-radius:10px!important;
  font-size:13px!important;
  line-height:1!important;
  background:transparent!important;
}
.rp-guest-strip .lang-mini.active,
.rp-guest-strip .lang-mini:hover{
  background:linear-gradient(135deg,#ffd84a,#d9900f)!important;
  color:#07101d!important;
  border-color:transparent!important;
}

/* side drawer fully mobile */
.rp-side{
  width:min(86vw,360px)!important;
  max-width:360px!important;
  box-sizing:border-box!important;
}
.side-list a{
  min-width:0!important;
}
.side-list a b{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* balance row fits small screens */
.rp-wallet-row{
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  padding:0!important;
  margin:8px 10px 10px!important;
}
.rp-wallet-card{
  min-width:0!important;
  padding:8px 8px!important;
}
.rp-wallet-card b{
  font-size:16px!important;
}
.rp-wallet-card small{
  font-size:11px!important;
}

/* category tab horizontal scroll, no side overflow */
.tabs{
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:none!important;
  padding-left:10px!important;
  padding-right:10px!important;
  box-sizing:border-box!important;
}
.tabs::-webkit-scrollbar{display:none!important}
.tabs a{
  flex:0 0 auto!important;
  min-width:70px!important;
}

@media(max-width:370px){
  .rp-top{
    grid-template-columns:46px minmax(0,1fr) 46px!important;
    padding:7px 8px!important;
  }
  .rp-menu,
  .rp-notify{
    width:42px!important;
    height:42px!important;
  }
  .rp-logo img,
  .rp-logo .royals-logo-img{
    max-width:126px!important;
    width:126px!important;
  }
  .rp-guest-strip{
    gap:6px!important;
    padding:7px 8px!important;
  }
  .guest-auth-group{
    gap:6px!important;
  }
  .rp-guest-strip .login-btn,
  .rp-guest-strip .reg-btn{
    height:39px!important;
    font-size:13px!important;
    padding:0 5px!important;
  }
  .guest-lang-group{
    gap:3px!important;
    padding:3px!important;
  }
  .rp-guest-strip .lang-mini{
    width:36px!important;
    min-width:36px!important;
    height:32px!important;
    font-size:12px!important;
  }
}



/* ROYALS 888 FINAL TOP NAV: LOGO+MENU LEFT, LOGIN/REGISTER RIGHT */
.rp-guest-strip,
.guest-lang-group,
.lang-mini{
  display:none!important;
}

.rp-top-final{
  width:100%!important;
  max-width:100%!important;
  height:74px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  padding:9px 10px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

.rp-brand-left{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex:1 1 auto!important;
}

.rp-top-final .rp-logo{
  order:1!important;
  width:auto!important;
  max-width:132px!important;
  height:54px!important;
  flex:0 1 132px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
}

.rp-top-final .rp-logo img,
.rp-top-final .rp-logo .royals-logo-img{
  width:auto!important;
  max-width:128px!important;
  max-height:54px!important;
  object-fit:contain!important;
}

.rp-top-final .rp-menu{
  order:2!important;
  flex:0 0 42px!important;
  width:42px!important;
  height:42px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  border:0!important;
  background:rgba(255,255,255,.035)!important;
  border-radius:13px!important;
}

.rp-top-final .rp-menu::before{
  content:"☰"!important;
  font-size:29px!important;
  color:#dce8f6!important;
  line-height:1!important;
}

.rp-top-final .rp-top-right{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
}

.top-login-btn,
.top-reg-btn{
  height:40px!important;
  min-width:68px!important;
  padding:0 12px!important;
  border-radius:12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-decoration:none!important;
  font-size:14px!important;
  font-weight:950!important;
  white-space:nowrap!important;
}

.top-login-btn{
  background:linear-gradient(135deg,#ffd84a,#d9900f)!important;
  color:#07101d!important;
  border:0!important;
}

.top-reg-btn{
  background:linear-gradient(135deg,#31d65b,#159a3b)!important;
  color:#031208!important;
  border:0!important;
}

.rp-top-final.is-login .rp-top-right{
  width:50px!important;
}

.rp-top-final.is-login .rp-notify{
  width:46px!important;
  height:46px!important;
}

@media(max-width:390px){
  .rp-top-final{
    padding:8px 8px!important;
    gap:5px!important;
  }
  .rp-brand-left{
    gap:5px!important;
  }
  .rp-top-final .rp-logo{
    max-width:112px!important;
    flex-basis:112px!important;
  }
  .rp-top-final .rp-logo img,
  .rp-top-final .rp-logo .royals-logo-img{
    max-width:110px!important;
  }
  .rp-top-final .rp-menu{
    width:39px!important;
    height:39px!important;
    flex-basis:39px!important;
  }
  .rp-top-final .rp-menu::before{
    font-size:26px!important;
  }
  .rp-top-final .rp-top-right{
    gap:5px!important;
  }
  .top-login-btn,
  .top-reg-btn{
    min-width:58px!important;
    height:38px!important;
    padding:0 7px!important;
    font-size:13px!important;
  }
}

@media(max-width:340px){
  .rp-top-final .rp-logo{
    max-width:96px!important;
    flex-basis:96px!important;
  }
  .rp-top-final .rp-logo img,
  .rp-top-final .rp-logo .royals-logo-img{
    max-width:94px!important;
  }
  .top-login-btn,
  .top-reg-btn{
    min-width:52px!important;
    padding:0 5px!important;
    font-size:12px!important;
  }
}



/* ROYALS 888 HARD MOBILE VIEW FIX - CENTERED PHONE LAYOUT */
html,
body{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow-x:hidden!important;
  background:#07101d!important;
}

*{
  box-sizing:border-box!important;
}

body{
  display:block!important;
}

/* force whole site to mobile-app width on desktop and full width on phone */
.rp-app{
  width:100%!important;
  max-width:430px!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
  overflow-x:hidden!important;
  position:relative!important;
}

/* everything inside app must not exceed mobile width */
.rp-app > *,
.hero,
.vip-strip,
.notice,
.module-grid,
.tabs,
.title,
.game-grid,
.rp-wallet-row,
.rp-top,
.bottom{
  max-width:100%!important;
  min-width:0!important;
}

/* top bar mobile width */
.rp-top-final,
.rp-top{
  width:100%!important;
  max-width:430px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  left:auto!important;
  right:auto!important;
  overflow:hidden!important;
}

/* no shifted content */
.hero{
  width:calc(100% - 20px)!important;
  margin:10px!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
}

.hero .slide{
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
}

/* the bonus/vip cards were making page too wide */
.vip-strip{
  width:calc(100% - 20px)!important;
  margin:10px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  overflow:hidden!important;
}

.vip-strip > *,
.promo-card,
.vip-box{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

/* notice full mobile */
.notice{
  width:calc(100% - 20px)!important;
  margin:10px!important;
  overflow:hidden!important;
}

/* categories/game grids stay inside mobile */
.module-grid{
  width:calc(100% - 20px)!important;
  margin:10px!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:8px!important;
}

.module-grid a{
  min-width:0!important;
  overflow:hidden!important;
}

.tabs{
  width:100%!important;
  margin:0!important;
  padding:8px 10px 12px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  display:flex!important;
  gap:8px!important;
  scrollbar-width:none!important;
  -webkit-overflow-scrolling:touch!important;
}

.tabs::-webkit-scrollbar{
  display:none!important;
}

.tabs a{
  flex:0 0 70px!important;
  min-width:70px!important;
  max-width:78px!important;
}

.title{
  width:calc(100% - 20px)!important;
  margin:12px 10px 8px!important;
}

.game-grid{
  width:calc(100% - 20px)!important;
  margin:0 10px 96px!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:10px!important;
  overflow:hidden!important;
}

.game-card{
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}

/* bottom nav must match the mobile app width and stay centered */
.bottom{
  width:100%!important;
  max-width:430px!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  margin:0!important;
}

/* floating buttons inside phone frame */
.float{
  right:calc((100vw - min(100vw,430px))/2 + 12px)!important;
}

/* side drawer starts at phone frame left, not page left on desktop */
.rp-side{
  left:calc((100vw - min(100vw,430px))/2)!important;
  width:min(86vw,360px)!important;
  max-width:360px!important;
}

.rp-shade{
  left:0!important;
  right:0!important;
}

/* small phones */
@media(max-width:430px){
  .rp-app{
    max-width:100%!important;
  }
  .rp-top,
  .rp-top-final,
  .bottom{
    max-width:100%!important;
  }
  .bottom{
    left:0!important;
    transform:none!important;
  }
  .float{
    right:12px!important;
  }
  .rp-side{
    left:0!important;
    width:86vw!important;
  }
}

@media(max-width:360px){
  .module-grid{
    grid-template-columns:repeat(4,1fr)!important;
    gap:6px!important;
  }
  .game-grid{
    grid-template-columns:repeat(3,1fr)!important;
    gap:7px!important;
  }
  .tabs a{
    flex-basis:64px!important;
    min-width:64px!important;
  }
}



/* ROYALS 888 FINAL MOBILE HEADER FIX - LOGO + MENU LEFT, AUTH RIGHT */
.rp-guest-strip,
.guest-auth-group,
.guest-lang-group,
.lang-mini{
  display:none!important;
}

.rp-top-final,
.rp-top{
  width:100%!important;
  max-width:430px!important;
  height:64px!important;
  min-height:64px!important;
  margin:0 auto!important;
  padding:5px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:6px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  background:linear-gradient(180deg,#0b1625 0%,#07101d 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
}

.rp-brand-left{
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:190px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  overflow:hidden!important;
}

/* logo must show on the left */
.rp-top-final .rp-logo,
.rp-top .rp-logo{
  order:1!important;
  flex:0 0 auto!important;
  width:96px!important;
  max-width:96px!important;
  height:52px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  background:transparent!important;
  overflow:visible!important;
}

.rp-top-final .rp-logo img,
.rp-top-final .rp-logo .royals-logo-img,
.rp-top .rp-logo img,
.rp-top .rp-logo .royals-logo-img{
  display:block!important;
  width:auto!important;
  max-width:96px!important;
  max-height:50px!important;
  object-fit:contain!important;
  opacity:1!important;
  visibility:visible!important;
  filter:drop-shadow(0 0 8px rgba(255,216,74,.35))!important;
}

/* menu/navigation option beside logo */
.rp-top-final .rp-menu,
.rp-top .rp-menu{
  order:2!important;
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.035)!important;
  color:#dce8f6!important;
  box-shadow:none!important;
}

.rp-top-final .rp-menu::before,
.rp-top .rp-menu::before{
  content:"☰"!important;
  font-size:27px!important;
  line-height:1!important;
  color:#dce8f6!important;
}

/* right side auth */
.rp-top-final .rp-top-right,
.rp-top .rp-top-right{
  flex:0 0 auto!important;
  min-width:0!important;
  width:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
}

.top-login-btn,
.top-reg-btn{
  height:38px!important;
  min-width:64px!important;
  padding:0 9px!important;
  border-radius:12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-decoration:none!important;
  border:0!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:950!important;
  white-space:nowrap!important;
}

.top-login-btn{
  background:linear-gradient(135deg,#ffd84a,#d9900f)!important;
  color:#07101d!important;
}

.top-reg-btn{
  background:linear-gradient(135deg,#31d65b,#159a3b)!important;
  color:#031208!important;
}

/* logged in right notification only */
.rp-top-final.is-login .rp-top-right{
  width:46px!important;
}

.rp-top-final.is-login .rp-notify{
  display:grid!important;
  width:42px!important;
  height:42px!important;
  place-items:center!important;
  background:transparent!important;
  border:0!important;
  font-size:24px!important;
}

/* start content closer to top */
.hero{
  margin-top:8px!important;
}

@media(max-width:380px){
  .rp-top-final,
  .rp-top{
    height:60px!important;
    min-height:60px!important;
    padding:5px 8px!important;
    gap:4px!important;
  }
  .rp-brand-left{
    max-width:165px!important;
    gap:4px!important;
  }
  .rp-top-final .rp-logo,
  .rp-top .rp-logo{
    width:82px!important;
    max-width:82px!important;
  }
  .rp-top-final .rp-logo img,
  .rp-top-final .rp-logo .royals-logo-img,
  .rp-top .rp-logo img,
  .rp-top .rp-logo .royals-logo-img{
    max-width:82px!important;
    max-height:46px!important;
  }
  .rp-top-final .rp-menu,
  .rp-top .rp-menu{
    flex-basis:35px!important;
    width:35px!important;
    height:35px!important;
    min-width:35px!important;
  }
  .rp-top-final .rp-menu::before,
  .rp-top .rp-menu::before{
    font-size:24px!important;
  }
  .top-login-btn,
  .top-reg-btn{
    min-width:56px!important;
    height:36px!important;
    font-size:13px!important;
    padding:0 6px!important;
    border-radius:11px!important;
  }
}

@media(max-width:330px){
  .rp-brand-left{
    max-width:145px!important;
  }
  .rp-top-final .rp-logo,
  .rp-top .rp-logo{
    width:70px!important;
    max-width:70px!important;
  }
  .rp-top-final .rp-logo img,
  .rp-top-final .rp-logo .royals-logo-img,
  .rp-top .rp-logo img,
  .rp-top .rp-logo .royals-logo-img{
    max-width:70px!important;
  }
  .top-login-btn,
  .top-reg-btn{
    min-width:50px!important;
    font-size:12px!important;
    padding:0 5px!important;
  }
}



/* ROYALS 888 - 777 STYLE CATEGORY DRAWER + HORIZONTAL TAB SLIDER */
html,body{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  background:#07101d!important;
}
.rp-app{
  width:100%!important;
  max-width:430px!important;
  margin:0 auto!important;
  overflow-x:hidden!important;
  position:relative!important;
}

/* top header exactly mobile-app style */
.rp-top-final,.rp-top{
  height:64px!important;
  min-height:64px!important;
  max-width:430px!important;
  width:100%!important;
  margin:0 auto!important;
  padding:7px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  background:linear-gradient(180deg,#101b2a,#091320)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.rp-brand-left{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
  flex:1 1 auto!important;
  max-width:170px!important;
}
.rp-menu{
  order:1!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  border:0!important;
  background:transparent!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  margin:0!important;
  border-radius:10px!important;
}
.rp-menu::before{
  content:"☰"!important;
  font-size:32px!important;
  color:#b9c7d8!important;
  line-height:1!important;
}
.rp-side.open ~ .rp-shade + .rp-top .rp-menu::before,
body.side-open .rp-menu::before{
  content:"⇐"!important;
}
.rp-logo{
  order:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  max-width:96px!important;
  width:96px!important;
  height:50px!important;
  margin:0!important;
  padding:0!important;
}
.rp-logo .royals-logo-img,
.rp-logo img{
  max-width:96px!important;
  max-height:48px!important;
  object-fit:contain!important;
  display:block!important;
}
.rp-top-right{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex:0 0 auto!important;
}
.top-login-btn,.top-reg-btn{
  height:38px!important;
  min-width:74px!important;
  padding:0 12px!important;
  border-radius:8px!important;
  font-size:15px!important;
  font-weight:900!important;
  text-decoration:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
}
.top-login-btn{
  background:#0f7c5d!important;
  color:#fff!important;
}
.top-reg-btn{
  background:transparent!important;
  color:#ffd84a!important;
  border:2px solid #ffd84a!important;
}
.rp-search-btn{
  width:38px!important;
  height:38px!important;
  border:0!important;
  background:transparent!important;
  color:#aebbd0!important;
  display:grid!important;
  place-items:center!important;
  font-size:28px!important;
  text-decoration:none!important;
}
.rp-notify{
  width:42px!important;
  height:42px!important;
  background:transparent!important;
  border:0!important;
  display:grid!important;
  place-items:center!important;
  font-size:25px!important;
}

/* drawer overlay */
.rp-shade{
  position:fixed!important;
  inset:0!important;
  z-index:1900!important;
  background:rgba(0,0,0,.58)!important;
  backdrop-filter:blur(1.5px)!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .22s ease!important;
}
.rp-shade.open{opacity:1!important;pointer-events:auto!important}

/* 777 style left category drawer */
.rp-side{
  position:fixed!important;
  top:0!important;
  bottom:0!important;
  left:calc((100vw - min(100vw,430px))/2)!important;
  z-index:2000!important;
  width:min(50vw,210px)!important;
  max-width:210px!important;
  min-width:170px!important;
  height:100dvh!important;
  transform:translateX(-110%)!important;
  transition:transform .25s cubic-bezier(.2,.9,.2,1)!important;
  background:#121d2c!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  box-shadow:20px 0 60px rgba(0,0,0,.55)!important;
  padding:10px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
.rp-side.open{transform:translateX(0)!important}

/* hide old account drawer pieces if left behind */
.side-top,.side-user,.side-balance,.side-bonus,.side-list,.side-auth-row,.side-logout{
  display:none!important;
}

.cat-drawer-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
}
.cat-card{
  min-height:76px!important;
  border-radius:8px!important;
  background:#172437!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  color:#cbd6e5!important;
  text-decoration:none!important;
  font-weight:900!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)!important;
}
.cat-card .ci{
  font-size:29px!important;
  line-height:1!important;
  filter:grayscale(.25)!important;
  opacity:.9!important;
}
.cat-card .ct{
  font-size:15px!important;
  line-height:1.08!important;
  text-align:center!important;
}
.cat-card.active{
  background:#0c7b5d!important;
  color:#fff!important;
  box-shadow:0 8px 24px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.08)!important;
}
.cat-card.active .ci{
  filter:none!important;
}
.cat-wide{
  grid-column:1 / -1!important;
  min-height:58px!important;
  flex-direction:row!important;
  justify-content:flex-start!important;
  padding:0 14px!important;
  gap:12px!important;
}
.cat-promo-row{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin:12px 0!important;
}
.cat-promo{
  height:56px!important;
  border-radius:8px!important;
  color:#fff!important;
  text-decoration:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-weight:900!important;
  background:linear-gradient(135deg,#278bff,#7ab7ff)!important;
  overflow:hidden!important;
}
.cat-promo.reward{
  background:linear-gradient(135deg,#ffa414,#ffd94d)!important;
  color:#fff!important;
}
.cat-invite{
  height:66px!important;
  border-radius:9px!important;
  background:linear-gradient(135deg,#8737ff,#d25cff)!important;
  color:#fff!important;
  text-decoration:none!important;
  font-weight:900!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  margin:10px 0 12px!important;
}
.cat-line{
  height:54px!important;
  border-radius:8px!important;
  background:#111b2b!important;
  color:#aab7c9!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 12px!important;
  margin:8px 0!important;
  font-weight:800!important;
}
.cat-line span:first-child{
  font-size:24px!important;
  width:26px!important;
  text-align:center!important;
}
.side-lang{
  display:block!important;
  border:0!important;
  padding:0!important;
  margin:8px 0!important;
}
.side-lang-title{
  display:none!important;
}
.lang-row{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}
.lang-btn{
  height:42px!important;
  border-radius:8px!important;
  background:#111b2b!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:#aab7c9!important;
  font-weight:900!important;
}
.lang-btn.active{
  color:#fff!important;
  background:#0c7b5d!important;
  border-color:#0c7b5d!important;
}

/* Main horizontal category strip like 777 */
.tabs{
  display:flex!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  gap:10px!important;
  padding:10px 14px 12px!important;
  margin:0!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:none!important;
  scroll-snap-type:x proximity!important;
}
.tabs::-webkit-scrollbar{display:none!important}
.tabs a{
  flex:0 0 72px!important;
  height:66px!important;
  border-radius:0!important;
  background:transparent!important;
  color:#b9c5d4!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  padding:4px!important;
  text-decoration:none!important;
  position:relative!important;
  scroll-snap-align:start!important;
}
.tabs a .tab-icon{
  font-size:28px!important;
  line-height:1!important;
  filter:grayscale(1)!important;
  opacity:.82!important;
}
.tabs a b{
  font-size:15px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.tabs a.active,
.tabs a:hover{
  color:#ffd84a!important;
}
.tabs a.active .tab-icon,
.tabs a:hover .tab-icon{
  filter:none!important;
  opacity:1!important;
  transform:scale(1.06)!important;
}
.tabs a.active::after{
  content:""!important;
  position:absolute!important;
  left:10px!important;
  right:10px!important;
  bottom:0!important;
  height:4px!important;
  border-radius:8px!important;
  background:#ffd84a!important;
  box-shadow:0 0 12px rgba(255,216,74,.7)!important;
}
.tabs::after{
  content:"›"!important;
  flex:0 0 34px!important;
  height:50px!important;
  border-radius:50%!important;
  background:#101b2a!important;
  color:#cbd6e5!important;
  display:grid!important;
  place-items:center!important;
  font-size:30px!important;
  align-self:center!important;
}

/* section title */
.title{
  font-size:22px!important;
  font-weight:950!important;
  margin:14px 14px 12px!important;
}
.title span:first-child{
  color:#fff!important;
}

/* desktop preview: drawer starts at centered mobile frame */
@media(max-width:430px){
  .rp-side{left:0!important;width:50vw!important;max-width:210px!important;min-width:170px!important}
}
@media(max-width:360px){
  .rp-side{width:54vw!important;min-width:168px!important}
  .cat-card{min-height:70px!important}
  .cat-card .ct{font-size:13px!important}
  .top-login-btn,.top-reg-btn{min-width:58px!important;font-size:13px!important;padding:0 8px!important}
  .rp-logo,.rp-logo img,.rp-logo .royals-logo-img{max-width:84px!important;width:84px!important}
}



/* ROYALS 888 TOP LINE HARD FIX - NO BLANK SPACE, LOGO + MENU VISIBLE */
html,body{
  margin:0!important;
  padding:0!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  background:#07101d!important;
}

body > *:first-child{
  margin-top:0!important;
}

.rp-app{
  width:100%!important;
  max-width:430px!important;
  min-height:100vh!important;
  margin:0 auto!important;
  padding-top:0!important;
  overflow-x:hidden!important;
  position:relative!important;
}

/* remove any old/extra guest/auth strip causing blank height */
.rp-guest-strip,
.guest-auth-group,
.guest-lang-group,
.lang-mini{
  display:none!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
}

/* force the navbar to be the first tight row */
.rp-top,
.rp-top-final{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  max-width:430px!important;
  height:54px!important;
  min-height:54px!important;
  max-height:54px!important;
  margin:0 auto!important;
  padding:4px 10px!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:6px!important;
  overflow:hidden!important;
  z-index:1200!important;
  background:linear-gradient(180deg,#101b2a 0%,#081321 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:none!important;
  transform:none!important;
}

/* left side: logo then 3-line nav */
.rp-brand-left{
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:160px!important;
  height:46px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  overflow:visible!important;
  order:1!important;
}

.rp-logo{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 82px!important;
  width:82px!important;
  max-width:82px!important;
  height:46px!important;
  max-height:46px!important;
  min-width:82px!important;
  margin:0!important;
  padding:0!important;
  opacity:1!important;
  visibility:visible!important;
  background:transparent!important;
  overflow:visible!important;
  order:1!important;
  text-decoration:none!important;
}

.rp-logo img,
.rp-logo .royals-logo-img{
  display:block!important;
  width:auto!important;
  max-width:82px!important;
  max-height:44px!important;
  object-fit:contain!important;
  opacity:1!important;
  visibility:visible!important;
}

.logo-fallback{
  display:none;
  color:#ffd84a!important;
  font-weight:950!important;
  font-size:13px!important;
  line-height:1.05!important;
  letter-spacing:.3px!important;
  text-shadow:0 0 10px rgba(255,216,74,.35)!important;
}

.rp-menu{
  order:2!important;
  flex:0 0 38px!important;
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  opacity:1!important;
  visibility:visible!important;
  border:0!important;
  background:transparent!important;
  border-radius:8px!important;
  box-shadow:none!important;
  transform:none!important;
  font-size:0!important;
}

.rp-menu::before{
  content:"☰"!important;
  display:block!important;
  color:#dce8f6!important;
  font-size:30px!important;
  line-height:1!important;
  font-weight:600!important;
  opacity:1!important;
  visibility:visible!important;
}

/* right side: login / register */
.rp-top-right{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:196px!important;
  height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  order:2!important;
  overflow:visible!important;
  margin:0!important;
  padding:0!important;
}

.top-login-btn,
.top-reg-btn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:38px!important;
  min-width:68px!important;
  max-width:88px!important;
  padding:0 10px!important;
  border-radius:8px!important;
  margin:0!important;
  text-decoration:none!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:950!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.top-login-btn{
  background:#0f7c5d!important;
  color:#fff!important;
  border:0!important;
}

.top-reg-btn{
  background:transparent!important;
  color:#ffd84a!important;
  border:2px solid #ffd84a!important;
}

/* logged in: only notification right */
.rp-top-final.is-login .rp-top-right{
  width:44px!important;
  max-width:44px!important;
}

.rp-notify{
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  height:40px!important;
  background:transparent!important;
  border:0!important;
  color:#ffd84a!important;
  font-size:24px!important;
}

/* next content starts immediately under top line */
.rp-top + .rp-wallet-row,
.rp-top + .rp-side + .rp-shade + .hero,
.rp-top + .hero{
  margin-top:6px!important;
}

.hero{
  margin-top:8px!important;
}

/* if drawer is closed it must not occupy layout space */
.rp-side{
  position:fixed!important;
  margin:0!important;
}

/* compact for very small phones */
@media(max-width:380px){
  .rp-top,.rp-top-final{
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
    padding:4px 8px!important;
    gap:4px!important;
  }
  .rp-brand-left{
    max-width:140px!important;
    gap:5px!important;
  }
  .rp-logo{
    flex-basis:70px!important;
    width:70px!important;
    max-width:70px!important;
    min-width:70px!important;
  }
  .rp-logo img,
  .rp-logo .royals-logo-img{
    max-width:70px!important;
    max-height:40px!important;
  }
  .rp-menu{
    flex-basis:34px!important;
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
  }
  .rp-menu::before{
    font-size:26px!important;
  }
  .top-login-btn,.top-reg-btn{
    height:35px!important;
    min-width:58px!important;
    max-width:70px!important;
    padding:0 6px!important;
    font-size:13px!important;
  }
  .rp-top-right{
    gap:5px!important;
    max-width:150px!important;
  }
}

@media(max-width:330px){
  .rp-brand-left{
    max-width:122px!important;
  }
  .rp-logo{
    flex-basis:62px!important;
    width:62px!important;
    max-width:62px!important;
    min-width:62px!important;
  }
  .rp-logo img,
  .rp-logo .royals-logo-img{
    max-width:62px!important;
  }
  .top-login-btn,.top-reg-btn{
    min-width:52px!important;
    max-width:62px!important;
    font-size:12px!important;
    padding:0 4px!important;
  }
}



/* ROYALS 888 EXACT 777JAYA MOBILE LOOK */
html,body{
  margin:0!important;
  padding:0!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  background:#07101d!important;
}
*{box-sizing:border-box!important}
.rp-app{
  width:100%!important;
  max-width:430px!important;
  min-height:100vh!important;
  margin:0 auto!important;
  padding:0 0 86px!important;
  background:#07101d!important;
  overflow-x:hidden!important;
  position:relative!important;
}

/* TOP BAR: menu + logo left, auth/search right */
.rp-top-final,.rp-top{
  width:100%!important;
  max-width:430px!important;
  height:58px!important;
  min-height:58px!important;
  margin:0 auto!important;
  padding:6px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  background:linear-gradient(180deg,#101b2a,#0b1624)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.03)!important;
  overflow:hidden!important;
  position:relative!important;
  z-index:1200!important;
}
.rp-brand-left{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:158px!important;
  height:46px!important;
  overflow:visible!important;
}
.rp-menu{
  order:1!important;
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  background:transparent!important;
  font-size:0!important;
  line-height:1!important;
}
.rp-menu::before{
  content:"☰"!important;
  font-size:31px!important;
  font-weight:700!important;
  color:#9eafc5!important;
  line-height:1!important;
}
.rp-logo{
  order:2!important;
  width:86px!important;
  min-width:86px!important;
  max-width:86px!important;
  height:45px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-decoration:none!important;
  background:transparent!important;
  margin:0!important;
  padding:0!important;
}
.rp-logo img,.rp-logo .royals-logo-img{
  display:block!important;
  max-width:86px!important;
  max-height:43px!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
}
.logo-fallback{
  display:none;
  font-weight:950!important;
  color:#ffd84a!important;
  font-size:12px!important;
  line-height:1.05!important;
}
.rp-top-right{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex:0 0 auto!important;
  min-width:0!important;
}
.top-login-btn,.top-reg-btn{
  height:38px!important;
  min-width:78px!important;
  border-radius:8px!important;
  padding:0 13px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-decoration:none!important;
  font-size:15px!important;
  font-weight:950!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.top-login-btn{
  background:#0f7c5d!important;
  color:#fff!important;
  border:0!important;
}
.top-reg-btn{
  background:transparent!important;
  color:#ffd84a!important;
  border:2px solid #ffd84a!important;
}
.rp-search-btn{
  width:34px!important;
  height:38px!important;
  color:#9eafc5!important;
  display:grid!important;
  place-items:center!important;
  text-decoration:none!important;
  font-size:31px!important;
  line-height:1!important;
}
.rp-notify{
  width:42px!important;
  height:42px!important;
  background:transparent!important;
  border:0!important;
  display:grid!important;
  place-items:center!important;
  font-size:24px!important;
}

/* banner like reference */
.hero{
  width:calc(100% - 24px)!important;
  margin:12px 12px 8px!important;
  height:132px!important;
  min-height:132px!important;
  border-radius:13px!important;
  overflow:hidden!important;
  background:#111b2c!important;
}
.hero .slide{
  height:132px!important;
  min-height:132px!important;
  border-radius:13px!important;
  padding:18px 18px!important;
}
.hero .slide h1{
  font-size:26px!important;
  line-height:1.05!important;
  color:#ffd84a!important;
  margin:0 0 9px!important;
  max-width:60%!important;
}
.hero .slide p{
  font-size:13px!important;
  line-height:1.25!important;
  margin:0 0 10px!important;
  max-width:64%!important;
}
.hero .slide .cta{
  height:40px!important;
  padding:0 18px!important;
  border-radius:14px!important;
  font-size:16px!important;
}

/* notice */
.notice{
  width:calc(100% - 24px)!important;
  margin:8px 12px!important;
  min-height:34px!important;
  height:34px!important;
  border:0!important;
  background:transparent!important;
  color:#69bba5!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
}

/* horizontal category slider */
.tabs{
  width:100%!important;
  display:flex!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  gap:10px!important;
  padding:8px 12px 13px!important;
  margin:0!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:none!important;
}
.tabs::-webkit-scrollbar{display:none!important}
.tabs a{
  flex:0 0 70px!important;
  min-width:70px!important;
  height:64px!important;
  background:transparent!important;
  color:#cbd5e1!important;
  text-decoration:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  position:relative!important;
}
.tabs a .tab-icon{
  font-size:27px!important;
  line-height:1!important;
  filter:grayscale(1)!important;
  opacity:.86!important;
}
.tabs a b{
  font-size:15px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.tabs a.active,.tabs a:hover{
  color:#ffd84a!important;
}
.tabs a.active .tab-icon,.tabs a:hover .tab-icon{
  filter:none!important;
  opacity:1!important;
}
.tabs a.active::after{
  content:""!important;
  position:absolute!important;
  left:8px!important;
  right:8px!important;
  bottom:0!important;
  height:4px!important;
  background:#ffd84a!important;
  border-radius:999px!important;
  box-shadow:0 0 12px rgba(255,216,74,.6)!important;
}

/* game area */
.title{
  width:calc(100% - 24px)!important;
  margin:16px 12px 12px!important;
  font-size:22px!important;
  line-height:1!important;
  font-weight:950!important;
  color:#fff!important;
}
.game-grid{
  width:calc(100% - 24px)!important;
  margin:0 12px 94px!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:14px!important;
}
.game-card{
  aspect-ratio:1 / 1.36!important;
  border-radius:10px!important;
  overflow:hidden!important;
  padding:0!important;
  background:#121b2c!important;
}
.game-card .game-img{
  height:70%!important;
  display:grid!important;
  place-items:center!important;
  font-size:44px!important;
  background:linear-gradient(135deg,#18c76d,#e73535)!important;
}
.game-card h3{
  margin:4px 3px 0!important;
  font-size:15px!important;
  line-height:1.1!important;
  color:#fff!important;
}
.game-card p{
  font-size:11px!important;
  margin:3px 0!important;
  opacity:.55!important;
}

/* bottom nav exact reference */
.bottom,.bottom-777{
  position:fixed!important;
  left:50%!important;
  bottom:0!important;
  transform:translateX(-50%)!important;
  width:100%!important;
  max-width:430px!important;
  height:76px!important;
  padding:6px 8px 8px!important;
  display:grid!important;
  grid-template-columns:repeat(5,1fr)!important;
  align-items:end!important;
  background:rgba(11,22,36,.94)!important;
  backdrop-filter:blur(10px)!important;
  border-top:1px solid rgba(31,211,169,.35)!important;
  box-shadow:0 -8px 32px rgba(0,0,0,.45)!important;
  z-index:1600!important;
}
.bottom a{
  height:62px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  text-decoration:none!important;
  color:#9aa6b8!important;
  font-size:13px!important;
  font-weight:850!important;
}
.bottom a span{
  font-size:28px!important;
  line-height:1!important;
  filter:grayscale(1)!important;
  opacity:.86!important;
}
.bottom a b{
  font-size:13px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}
.bottom a.active{
  color:#ffd84a!important;
}
.bottom a.active span{
  filter:none!important;
  color:#1fd3a9!important;
  text-shadow:0 0 16px rgba(31,211,169,.55)!important;
}
.bottom a.wallet{
  position:relative!important;
}
.bottom a.wallet span{
  width:76px!important;
  height:76px!important;
  border-radius:50%!important;
  margin-top:-38px!important;
  background:radial-gradient(circle,#ffffff 0 34%,#1fd3a9 38%,#0a9f83 75%,#064e46 100%)!important;
  border:7px solid #152034!important;
  display:grid!important;
  place-items:center!important;
  color:#0d5a49!important;
  font-size:34px!important;
  font-weight:950!important;
  filter:none!important;
  box-shadow:0 0 18px rgba(31,211,169,.55), inset 0 0 14px rgba(255,255,255,.65)!important;
}
.bottom a.wallet b{
  margin-top:-2px!important;
}

/* floating buttons right */
.float{
  right:calc((100vw - min(100vw,430px))/2 + 14px)!important;
  bottom:92px!important;
}
.float a{
  width:58px!important;
  height:58px!important;
  border-radius:50%!important;
  background:linear-gradient(135deg,#24c8ff,#2ad7ef)!important;
}

/* drawer reference */
.rp-side{
  left:calc((100vw - min(100vw,430px))/2)!important;
  width:min(50vw,210px)!important;
  max-width:210px!important;
  min-width:170px!important;
  background:#121d2c!important;
}
@media(max-width:430px){
  .rp-side{left:0!important}
  .bottom{left:0!important;transform:none!important;max-width:100%!important}
  .float{right:14px!important}
}
@media(max-width:380px){
  .rp-top{height:56px!important;min-height:56px!important;padding:6px 9px!important}
  .rp-brand-left{max-width:132px!important;gap:6px!important}
  .rp-logo{width:70px!important;min-width:70px!important;max-width:70px!important}
  .rp-logo img,.rp-logo .royals-logo-img{max-width:70px!important}
  .rp-menu{width:34px!important;min-width:34px!important}
  .rp-menu::before{font-size:27px!important}
  .top-login-btn,.top-reg-btn{min-width:58px!important;font-size:13px!important;padding:0 7px!important}
  .rp-search-btn{width:28px!important;font-size:27px!important}
  .game-grid{gap:10px!important}
}


/* FULL CLEAN MODE - MATCH REFERENCE UI ONLY */
body,html{
  overflow-x:hidden!important;
  background:#07101d!important;
}
.float,.rp-side,.rp-chat,.chat-widget,.support-float{
  display:none!important;
}
.hero,.notice,.tabs,.game-grid{
  width:100%!important;
  max-width:430px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
main,.rp-app{
  padding-bottom:86px!important;
  overflow:hidden!important;
}
.bottom{
  z-index:9999!important;
}



/* ROYALS SUPPORT OPTIONS */
.support-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.35)}



/* ROYALS 888 CLEAN 777 DRAWER FINAL */
/* remove the extra circled sections */
.vip-strip,
.promo-card,
.vip-box,
.module-grid{
  display:none!important;
  height:0!important;
  max-height:0!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}

/* floating extras hidden for clean reference */
.float,
.rp-chat,
.chat-widget,
.support-float,
.facebook-float,
.telegram-float{
  display:none!important;
}

/* keep clean mobile flow: banner -> notice -> tabs -> game title -> games */
.rp-app{
  width:100%!important;
  max-width:430px!important;
  margin:0 auto!important;
  overflow-x:hidden!important;
  padding-bottom:82px!important;
  background:#07101d!important;
}

/* drawer must work; override old clean-mode display:none */
.rp-side{
  display:block!important;
  position:fixed!important;
  top:0!important;
  bottom:0!important;
  left:calc((100vw - min(100vw,430px))/2)!important;
  z-index:2500!important;
  width:min(50vw,210px)!important;
  max-width:210px!important;
  min-width:170px!important;
  height:100dvh!important;
  transform:translateX(-112%)!important;
  transition:transform .24s cubic-bezier(.2,.9,.2,1)!important;
  background:#121d2c!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  box-shadow:20px 0 60px rgba(0,0,0,.58)!important;
  padding:10px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
.rp-side.open{
  transform:translateX(0)!important;
}
.rp-shade{
  display:block!important;
  position:fixed!important;
  inset:0!important;
  z-index:2400!important;
  background:rgba(0,0,0,.60)!important;
  backdrop-filter:blur(1.5px)!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .22s ease!important;
}
.rp-shade.open{
  opacity:1!important;
  pointer-events:auto!important;
}

/* drawer content */
.cat-drawer-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
}
.cat-card{
  min-height:76px!important;
  border-radius:8px!important;
  background:#172437!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  color:#cbd6e5!important;
  text-decoration:none!important;
  font-weight:900!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)!important;
}
.cat-card .ci{
  font-size:29px!important;
  line-height:1!important;
  filter:grayscale(.35)!important;
  opacity:.86!important;
}
.cat-card .ct{
  font-size:15px!important;
  line-height:1.08!important;
  text-align:center!important;
}
.cat-card.active,
.cat-card:hover{
  background:#0c7b5d!important;
  color:#fff!important;
}
.cat-card.active .ci,
.cat-card:hover .ci{
  filter:none!important;
  opacity:1!important;
}
.cat-wide{
  grid-column:1 / -1!important;
  min-height:58px!important;
  flex-direction:row!important;
  justify-content:flex-start!important;
  padding:0 14px!important;
  gap:12px!important;
}
.cat-promo-row{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin:12px 0!important;
}
.cat-promo{
  height:56px!important;
  border-radius:8px!important;
  color:#fff!important;
  text-decoration:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-weight:900!important;
  background:linear-gradient(135deg,#278bff,#7ab7ff)!important;
}
.cat-promo.reward{
  background:linear-gradient(135deg,#ffa414,#ffd94d)!important;
}
.cat-invite{
  height:66px!important;
  border-radius:9px!important;
  background:linear-gradient(135deg,#8737ff,#d25cff)!important;
  color:#fff!important;
  text-decoration:none!important;
  font-weight:900!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  margin:10px 0 12px!important;
}
.cat-line{
  height:54px!important;
  border-radius:8px!important;
  background:#111b2b!important;
  color:#aab7c9!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 12px!important;
  margin:8px 0!important;
  font-weight:800!important;
  text-decoration:none!important;
}
.cat-line span:first-child{
  font-size:24px!important;
  width:26px!important;
  text-align:center!important;
}
.side-lang{
  display:block!important;
  border:0!important;
  padding:0!important;
  margin:8px 0!important;
}
.lang-row{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}
.lang-btn{
  height:42px!important;
  border-radius:8px!important;
  background:#111b2b!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:#aab7c9!important;
  font-weight:900!important;
}
.lang-btn.active{
  color:#fff!important;
  background:#0c7b5d!important;
  border-color:#0c7b5d!important;
}

/* top tabs remain clean slider */
.tabs{
  display:flex!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:none!important;
}
.tabs::-webkit-scrollbar{display:none!important}
.tabs a.active{
  color:#ffd84a!important;
}
.tabs a.active .tab-icon{
  filter:none!important;
  opacity:1!important;
}
.tabs a.active::after{
  background:#ffd84a!important;
}

/* mobile frame drawer alignment */
@media(max-width:430px){
  .rp-side{left:0!important;width:50vw!important;max-width:210px!important;min-width:170px!important}
}



/* ROYALS 888 ROUND SUPPORT FLOAT + PROFILE BOTTOM FIX */
.float,
.support-float,
.support-float-stack{
  display:block!important;
}

.support-float-stack{
  position:fixed!important;
  right:calc((100vw - min(100vw,430px))/2 + 14px)!important;
  bottom:94px!important;
  z-index:1800!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:10px!important;
  pointer-events:auto!important;
}

.sf-btn{
  width:56px!important;
  height:56px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  text-decoration:none!important;
  color:#fff!important;
  font-weight:950!important;
  font-size:25px!important;
  border:3px solid rgba(255,255,255,.85)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.45), 0 0 22px rgba(34,211,238,.34)!important;
  overflow:hidden!important;
}

.sf-live{
  background:linear-gradient(135deg,#22d3ee,#0284c7)!important;
  font-size:27px!important;
}

.sf-telegram{
  background:linear-gradient(135deg,#38bdf8,#2563eb)!important;
}

.sf-whatsapp{
  background:linear-gradient(135deg,#22c55e,#15803d)!important;
}

.sf-facebook{
  background:linear-gradient(135deg,#3b82f6,#1d4ed8)!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:31px!important;
}

.sf-btn[href="#"],
.sf-btn[href=""]{
  opacity:.45!important;
  filter:grayscale(.7)!important;
}

/* bottom nav right item is members/profile now */
.bottom a[href*="/user/profile"] span{
  filter:grayscale(1);
}
.bottom a[href*="/user/profile"].active span,
.bottom a[href*="/user/profile"]:hover span{
  filter:none!important;
}

/* make sure old global clean rule does not hide this */
.support-float-stack,
.support-float-stack *{
  visibility:visible!important;
  opacity:1;
}

@media(max-width:430px){
  .support-float-stack{
    right:14px!important;
  }
}
@media(max-width:360px){
  .sf-btn{
    width:50px!important;
    height:50px!important;
    font-size:22px!important;
  }
  .support-float-stack{
    bottom:90px!important;
    gap:8px!important;
  }
}


/* BRANDING/NAV FINAL ORDER: logo occupies the old menu position; 3-line menu occupies the old logo position. */
.rp-top-final .rp-brand-left,
.rp-top .rp-brand-left{flex-direction:row!important}
.rp-top-final .rp-logo,
.rp-top .rp-logo{order:1!important}
.rp-top-final .rp-menu,
.rp-top .rp-menu{order:2!important}
@media(max-width:380px){
  .rp-top-final .rp-logo,.rp-top .rp-logo{order:1!important}
  .rp-top-final .rp-menu,.rp-top .rp-menu{order:2!important}
}


/* V38 configurable storefront header order */
.rp-top-final[data-header-layout="logo_menu"] .rp-logo,.rp-top[data-header-layout="logo_menu"] .rp-logo{order:1!important}
.rp-top-final[data-header-layout="logo_menu"] .rp-menu,.rp-top[data-header-layout="logo_menu"] .rp-menu{order:2!important}
.rp-top-final[data-header-layout="menu_logo"] .rp-menu,.rp-top[data-header-layout="menu_logo"] .rp-menu{order:1!important}
.rp-top-final[data-header-layout="menu_logo"] .rp-logo,.rp-top[data-header-layout="menu_logo"] .rp-logo{order:2!important}


/* V103: Admin-bound user floating support icons only; no support center page required */
.support-float-stack{
  bottom:var(--sf-bottom,94px)!important;
}
.support-float-stack.support-float-left{
  left:calc((100vw - min(100vw,430px))/2 + 14px)!important;
  right:auto!important;
}
.support-float-stack.support-float-right{
  right:calc((100vw - min(100vw,430px))/2 + 14px)!important;
  left:auto!important;
}
.sf-btn{
  width:var(--sf-size,56px)!important;
  height:var(--sf-size,56px)!important;
}
.sf-btn img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
  border-radius:50%!important;
}
.sf-btn i{
  font-style:normal!important;
}
@media(max-width:430px){
  .support-float-stack.support-float-left{left:14px!important}
  .support-float-stack.support-float-right{right:14px!important}
}


/* V104: show all admin-enabled support icons, even before a link is set */
.support-float-stack{z-index:99990!important;gap:9px!important;}
.support-float-stack .sf-btn[data-empty-link="1"]{opacity:1!important;filter:none!important;}
.support-float-stack .sf-btn img + i{display:none;}
.support-float-stack .sf-btn img[style*="display: none"] + i{display:inline!important;}
.support-float-stack .sf-btn{background-clip:padding-box!important;}