/*
| KedaiPabz game / product page: 2027 layer (redx/show). Additive.
*/

/* ---------- Header banner: slow zoom + parallax ---------- */
.kp-redx-head{isolation:isolate}
.kp-redx-head-bg{animation:kpgKen 16s ease-out both;will-change:transform}
@keyframes kpgKen{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.kp-redx-logo{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.kp-redx-head:hover .kp-redx-logo{transform:rotate(-4deg) scale(1.04)}
.kp-redx-title{background:linear-gradient(90deg,#fff 30%,#e9d5ff 60%,#fff 90%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:kpgTitle 6s ease-in-out infinite}
@keyframes kpgTitle{50%{background-position:100% 0}}

/* ---------- Step progress (Account -> Package -> Pay) ---------- */
.kpg-steps{position:sticky;top:calc(env(safe-area-inset-top,0px) + 86px);z-index:40;display:flex;align-items:center;gap:6px;
  margin:12px 0 4px;padding:8px;border-radius:18px;border:1px solid rgba(255,255,255,.07);
  background:rgba(12,8,22,.78);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.kpg-step{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;border-radius:12px;
  color:rgba(255,255,255,.45);font-size:11.5px;font-weight:800;transition:color .35s ease,background .35s ease;cursor:pointer;border:0;background:transparent;font-family:inherit}
.kpg-step b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:10px;background:rgba(255,255,255,.07);transition:background .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.kpg-step.is-current{color:#fff;background:rgba(124,58,237,.22)}
.kpg-step.is-current b{background:linear-gradient(135deg,#7c3aed,#c026d3);transform:scale(1.1)}
.kpg-step.is-done{color:#86efac}
.kpg-step.is-done b{background:rgba(34,197,94,.22)}
.kpg-sep{flex:0 0 14px;height:2px;border-radius:2px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.kpg-sep::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#22c55e,#a855f7);transform:scaleX(0);transform-origin:left;transition:transform .5s ease}
.kpg-sep.is-done::after{transform:scaleX(1)}

/* ---------- Section flash when a step completes ---------- */
@keyframes kpgPulse{0%{box-shadow:0 0 0 0 rgba(168,85,247,.55)}100%{box-shadow:0 0 0 18px rgba(168,85,247,0)}}
.kpg-pulse{animation:kpgPulse .9s ease-out 1;border-radius:24px}

/* ---------- Tabs (UC / Packs): sliding pill ---------- */
.kp-redx-tabs{position:relative}
.kpg-pill{position:absolute;top:6px;bottom:6px;left:0;border-radius:15px;z-index:0;pointer-events:none;
  background:linear-gradient(145deg,rgba(124,58,237,.38),rgba(88,28,135,.26));border:1px solid rgba(168,85,247,.42);
  box-shadow:0 10px 26px rgba(88,28,135,.3);transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1)}
.kp-redx-tabs.kpg-has-pill .kp-redx-tab{position:relative;z-index:1}
.kp-redx-tabs.kpg-has-pill .kp-redx-tab.is-active{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
[data-rx-panel]:not([hidden]){animation:kpgPanel .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes kpgPanel{from{opacity:0;transform:translateY(8px)}}

/* ---------- Sticky mobile buy bar ---------- */
.kpg-buy{position:fixed;left:12px;right:12px;bottom:calc(104px + env(safe-area-inset-bottom,0px));z-index:1150;display:flex;align-items:center;gap:12px;
  padding:10px 10px 10px 16px;border-radius:22px;background:rgba(18,11,32,.94);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(167,139,250,.32);box-shadow:0 22px 50px rgba(0,0,0,.55),0 0 40px rgba(124,58,237,.2);
  transform:translateY(140%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease;pointer-events:none}
.kpg-buy.show{transform:none;opacity:1;pointer-events:auto}
.kpg-buy-copy{flex:1;min-width:0}
.kpg-buy-copy small{display:block;color:rgba(255,255,255,.5);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.kpg-buy-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;color:#fff}
.kpg-buy-price{font-size:17px;font-weight:900;color:#e9d5ff;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpg-buy button{flex:0 0 auto;min-height:44px;padding:0 16px;border:0;border-radius:15px;background:linear-gradient(90deg,#7c3aed,#a855f7);color:#fff;font:inherit;font-weight:900;font-size:13px;cursor:pointer;box-shadow:0 10px 26px rgba(124,58,237,.4)}
@media (min-width:981px){.kpg-buy{left:auto;right:24px;bottom:24px;width:420px}}

@media (prefers-reduced-motion:reduce){
  .kp-redx-head-bg,.kp-redx-title,[data-rx-panel]:not([hidden]),.kpg-pulse{animation:none!important}
}