/* ZELIX TOPUP — premium mobile-first experience */
:root{--mobile-gold:#ffb300;--mobile-gold-soft:#ffe08a;--mobile-panel:rgba(14,14,22,.88);--mobile-line:rgba(255,255,255,.1)}
html{scroll-padding-bottom:96px}
body{min-width:0}

@media(max-width:768px){
  html{height:auto!important;min-height:100%;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:auto!important;touch-action:pan-y pinch-zoom}
  body{height:auto!important;min-height:100dvh!important;overflow-x:hidden!important;overflow-y:visible!important;overscroll-behavior-y:auto!important;touch-action:pan-y pinch-zoom;padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;background-attachment:scroll!important}
  body>.app,body>main,.app{height:auto!important;min-height:0!important;overflow-x:clip!important;overflow-y:visible!important;touch-action:pan-y pinch-zoom}
  body::before{background-size:34px 34px!important;opacity:.58!important}
  .particles{opacity:.42;pointer-events:none}

  /* Compact luxury app bar */
  .ztopup-header{display:contents;position:relative;z-index:80;pointer-events:none}
  .ztopup-header .header,.ztopup-header .z-bottom-nav{pointer-events:auto}
  .ztopup-header .header{position:sticky!important;top:0!important;min-height:66px;padding:9px 12px!important;gap:8px!important;background:linear-gradient(180deg,rgba(7,7,11,.97),rgba(7,7,11,.9))!important;border-bottom:1px solid rgba(255,179,0,.2)!important;box-shadow:0 12px 34px rgba(0,0,0,.42),0 1px 0 rgba(255,179,0,.08)!important}
  .ztopup-header .logo{gap:8px!important;min-width:0!important}
  .ztopup-header .logo-mark{width:42px!important;height:42px!important;min-width:42px;border-radius:14px!important}
  .ztopup-header .brand{font-size:13px!important;letter-spacing:.055em!important;white-space:nowrap}
  .ztopup-header .z-brand-full{display:none!important}
  .ztopup-header .z-brand-mobile{display:inline!important;font-size:15px;letter-spacing:.11em}
  .ztopup-header .header-actions{gap:7px!important;min-width:0}
  .ztopup-header .z-support-btn{width:42px!important;height:42px!important;padding:0!important;justify-content:center;border-radius:14px!important;background:linear-gradient(145deg,rgba(255,179,0,.13),rgba(255,255,255,.035))!important;border-color:rgba(255,179,0,.3)!important}
  .ztopup-header .z-support-label{display:none!important}

  /* Creative flag language capsule */
  .ztopup-header .z-lang-switch{height:42px;padding:4px!important;gap:2px;border-radius:14px!important;border:1px solid rgba(255,179,0,.24)!important;background:linear-gradient(145deg,rgba(255,179,0,.1),rgba(255,255,255,.035))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.25)}
  .ztopup-header .z-lang-globe{display:none}
  .ztopup-header .z-lang-switch button{min-width:34px!important;height:32px!important;min-height:32px!important;padding:0 5px!important;display:flex;align-items:center;justify-content:center;gap:3px;border-radius:10px!important;font-size:11px!important;transition:transform .2s ease,background .2s ease!important}
  .ztopup-header .z-lang-switch button span{font-size:13px;line-height:1}
  .ztopup-header .z-lang-switch button b{font:900 9px/1 Orbitron,Rajdhani,sans-serif}
  .ztopup-header .z-lang-switch button.active{background:linear-gradient(135deg,#ffe89a,#ffb300 60%,#ff8500)!important;box-shadow:0 5px 16px rgba(255,179,0,.34)!important;transform:translateY(-1px)}

  /* Five-item floating bottom dock, E-pin highlighted */
  .ztopup-header .z-bottom-nav{left:10px!important;right:10px!important;bottom:8px!important;border:1px solid rgba(255,179,0,.2)!important;border-radius:22px!important;padding-bottom:env(safe-area-inset-bottom)!important;background:linear-gradient(180deg,rgba(19,19,28,.94),rgba(8,8,13,.97))!important;box-shadow:0 18px 52px rgba(0,0,0,.62),0 0 30px rgba(255,179,0,.09)!important;overflow:visible!important}
  .ztopup-header .z-bnav-inner{height:66px!important;padding:0 6px!important}
  .ztopup-header .z-bnav-item{min-width:0;gap:3px!important;border-radius:16px}
  .ztopup-header .z-bnav-icon{width:23px!important;height:23px!important}
  .ztopup-header .z-bnav-label{font-size:9px!important;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ztopup-header .z-bnav-indicator{top:auto!important;bottom:3px!important;width:18px!important;height:2px!important;border-radius:4px!important}
  .ztopup-header .z-bnav-epin .z-bnav-icon{width:44px!important;height:44px!important;margin-top:-24px;border-radius:15px;background:linear-gradient(135deg,#ffe794,#ffb300 58%,#ff7b00);color:#171006;box-shadow:0 10px 30px rgba(255,179,0,.42),0 0 0 5px rgba(8,8,13,.95)}
  .ztopup-header .z-bnav-epin .z-bnav-icon svg{width:23px!important;height:23px!important}
  .ztopup-header .z-bnav-epin .z-bnav-label{color:#ffd666;font-weight:900!important}

  /* Universal mobile spacing and touch rhythm */
  main,.main{max-width:100%!important}
  main.relative.z-10,.main{padding-left:14px!important;padding-right:14px!important}
  input,select,textarea{font-size:16px!important;min-height:52px!important}
  button,a,[role=button]{-webkit-tap-highlight-color:transparent}
  .ztopup-header button:active,.ztopup-header a:active,#grid button:active,.panel button:active{transform:scale(.98)}
  dialog{width:calc(100vw - 24px)!important;max-height:calc(100dvh - 28px)!important;padding:20px 16px!important;border-radius:24px!important}
  #toast{position:fixed!important;left:14px!important;right:14px!important;bottom:96px!important;text-align:center!important;width:auto!important}

  /* Home */
  .app{padding-bottom:12px!important}
  .hero{border-radius:20px!important;border:1px solid rgba(255,179,0,.18);box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 30px rgba(255,179,0,.08)}
  .hero-art{aspect-ratio:16/9!important;min-height:0!important;border-radius:20px!important}
  .banner-slide img{border-radius:20px!important;object-fit:cover!important}
  .dots{margin:12px 0 18px!important}
  .dot{width:7px!important;height:7px!important}
  .dot.active{width:25px!important;border-radius:99px!important}
  .stats{display:flex!important;gap:10px!important;overflow-x:auto!important;scroll-snap-type:x mandatory;padding:2px 1px 12px!important;margin-top:0!important;scrollbar-width:none}
  .stats::-webkit-scrollbar{display:none}
  .stat{flex:0 0 78%!important;min-height:122px!important;padding:17px!important;scroll-snap-align:start;border-radius:20px!important;text-align:left!important;background:linear-gradient(145deg,rgba(24,24,35,.88),rgba(8,8,13,.92))!important}
  .stat-icon{width:42px!important;height:42px!important;margin:0 0 12px!important}
  .stat h3{font-size:16px!important}
  .trust-banner{margin:18px 0 26px!important;border-radius:20px!important}
  .section-head{align-items:flex-end!important;margin-bottom:14px!important}
  .section-title{font-size:20px!important}
  .see-all{font-size:11px!important}
  .category-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .category-card{min-height:174px!important;border-radius:20px!important;padding:0!important}
  .game-art{inset:8px 8px 49px!important;border-radius:15px!important}
  .game-art img{padding:7px!important}
  .game-name{font-size:12px!important;left:10px!important;right:42px!important;bottom:13px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .arrow{width:30px!important;height:30px!important;right:8px!important;bottom:8px!important}

  /* Product/category cards */
  #categoryHeader{padding:16px!important;margin-bottom:16px!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(24,24,35,.85),rgba(8,8,13,.9))!important}
  #catBanner{height:128px!important;border-radius:16px!important}
  #catMeta{text-align:left!important;margin-top:5px}
  #searchInput{width:150px!important}
  #grid{grid-template-columns:1fr!important;gap:12px!important}
  #grid>div{border-radius:22px!important;padding:16px!important;background:linear-gradient(145deg,rgba(23,23,34,.88),rgba(8,8,13,.94))!important;box-shadow:0 12px 32px rgba(0,0,0,.28)}
  #grid .buy-now,#grid .add-cart{min-height:46px!important;flex:1;padding:10px 8px!important;font-size:12px!important}
  #grid .qty-dec,#grid .qty-inc{min-width:34px!important;min-height:40px!important}

  /* Cart / checkout */
  #cartList+div{border-radius:24px!important;padding:18px!important;background:linear-gradient(145deg,rgba(24,24,35,.9),rgba(8,8,13,.95))!important}
  #checkoutBtn{min-height:56px!important;border-radius:16px!important}

  /* E-pin */
  .hero h1{font-size:clamp(30px,10vw,44px)!important;line-height:1.02!important;margin-top:16px!important}
  .steps{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px!important;padding-bottom:6px}
  .step{flex:0 0 82%;scroll-snap-align:start;border-radius:20px!important}
  .panel{padding:18px 15px!important;border-radius:22px!important}
  .redeem{box-shadow:0 18px 50px rgba(0,0,0,.4),0 0 36px rgba(255,179,0,.1)!important}

  /* Floating layers must never capture the page when closed. */
  .ztopup-header .z-drawer,.ztopup-header .z-drawer-scrim{pointer-events:none!important}
  .ztopup-header .z-drawer.z-open,.ztopup-header .z-drawer-scrim.z-open{pointer-events:auto!important}
  .auth-overlay:not(.active){pointer-events:none!important;visibility:hidden!important}
  .zt-chat:not(.open){pointer-events:none!important}
  .zt-chat.open{pointer-events:auto!important;touch-action:pan-y!important}
  .zt-chat-log,.zt-chat-start{overscroll-behavior:contain;touch-action:pan-y!important;-webkit-overflow-scrolling:touch}
  .stats,.steps{touch-action:pan-x pan-y!important;-webkit-overflow-scrolling:touch}
}

@media(max-width:430px){
  .ztopup-header .brand{display:block!important}
  .ztopup-header .logo-mark{width:40px!important;height:40px!important;min-width:40px}
  .ztopup-header .z-lang-switch{height:40px}
  .ztopup-header .z-lang-switch button{min-width:32px!important;padding:0 4px!important}
  .ztopup-header .z-lang-switch button span{display:none}
  .ztopup-header .z-support-btn{width:40px!important;height:40px!important}
}

@media(max-width:360px){
  main.relative.z-10,.main{padding-left:11px!important;padding-right:11px!important}
  .ztopup-header .header{padding-left:9px!important;padding-right:9px!important}
  .ztopup-header .z-lang-switch button{min-width:30px!important}
  .category-card{min-height:158px!important}
  .stat{flex-basis:88%!important}
}

@media(min-width:769px){
  .ztopup-header .z-brand-mobile{display:none}
  .ztopup-header .z-lang-globe{display:grid;place-items:center;width:25px;color:#ffca45;font-weight:900}
  .ztopup-header .z-lang-switch button{display:flex;align-items:center;gap:4px}
  .ztopup-header .z-lang-switch button span{font-size:13px}
  .ztopup-header .z-lang-switch button b{font:800 9px/1 Orbitron,Rajdhani,sans-serif}
}

@media(max-width:768px){
  .ztopup-header .z-support-btn,.ztopup-header .z-lang-switch,.ztopup-header .z-theme-btn{display:none!important}
  .ztopup-header .z-burger{display:inline-flex!important;width:42px!important;height:42px!important;align-items:center!important;justify-content:center!important}
  .ztopup-header .z-drawer{display:flex!important}
  .ztopup-header .z-drawer-scrim{display:block!important}
  :root[data-theme="light"] .ztopup-header .header{background:rgba(255,255,255,.96)!important;border-bottom-color:rgba(18,23,34,.1)!important;box-shadow:0 12px 34px rgba(35,43,58,.12)!important}
  :root[data-theme="light"] .ztopup-header .brand{color:#172033!important}
  :root[data-theme="light"] .ztopup-header .z-bottom-nav{background:rgba(255,255,255,.96)!important;border-color:rgba(18,23,34,.1)!important;box-shadow:0 16px 42px rgba(35,43,58,.15)!important}
  :root[data-theme="light"] .ztopup-header .z-bnav-item{color:#6a7487!important}
  :root[data-theme="light"] .ztopup-header .z-bnav-item.active{color:#a96e00!important}
  :root[data-theme="light"] .ztopup-header .z-bnav-epin .z-bnav-icon{box-shadow:0 10px 26px rgba(255,179,0,.3),0 0 0 5px #fff!important}
}