/*
|--------------------------------------------------------------------------
| KedaiPabz UX layer (global, additive)
|--------------------------------------------------------------------------
| Loaded on every page by layouts/app. Adds motion and feedback on top of
| the existing design without changing it. Everything respects the phone's
| "reduce motion" setting.
*/

/* ---------- Top progress bar (page navigation / form submit) ---------- */
.kpx-bar{position:fixed;top:0;left:0;z-index:2147483600;height:3px;width:0;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,#7c3aed,#c026d3,#a855f7);box-shadow:0 0 12px rgba(192,38,211,.7);
  transition:width .25s ease,opacity .3s ease}
.kpx-bar.on{opacity:1}

/* ---------- Page entrance ---------- */
@keyframes kpxPageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.kp-app-main{animation:kpxPageIn .38s cubic-bezier(.2,.8,.2,1) backwards}

/* ---------- Scroll reveal (applied by JS to cards below the fold) ---------- */
.kpx-reveal{opacity:0;transform:translateY(18px) scale(.985);transition:opacity .55s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1);transition-delay:var(--kpx-delay,0ms)}
.kpx-reveal.kpx-in{opacity:1;transform:none}

/* ---------- Press feedback ---------- */
button:not([disabled]),[role="button"],a[class*="btn"],a[class*="card"],a[class*="tab"]{-webkit-tap-highlight-color:transparent}
button:not([disabled]):active,[role="button"]:active,a[class*="btn"]:active,a[class*="card"]:active{transform:scale(.975);transition:transform .08s ease}

/* ---------- Images fade in when loaded ---------- */
img.kpx-img{opacity:0;transition:opacity .45s ease}
img.kpx-img.kpx-loaded{opacity:1}

/* ---------- Toasts ---------- */
.kpx-toasts{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:2147483601;
  display:flex;flex-direction:column;gap:8px;width:min(420px,calc(100% - 24px));pointer-events:none}
.kpx-toast{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;pointer-events:auto;
  background:rgba(20,12,34,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(167,139,250,.28);box-shadow:0 18px 44px rgba(0,0,0,.5);color:#f5f3ff;font-size:13px;font-weight:700;line-height:1.4;
  animation:kpxToastIn .35s cubic-bezier(.2,.8,.2,1) both}
.kpx-toast i{font-size:16px}
.kpx-toast.ok{border-color:rgba(34,197,94,.4)}.kpx-toast.ok i{color:#4ade80}
.kpx-toast.err{border-color:rgba(239,68,68,.45)}.kpx-toast.err i{color:#f87171}
.kpx-toast.info i{color:#c4b5fd}
.kpx-toast.out{animation:kpxToastOut .3s ease both}
@keyframes kpxToastIn{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes kpxToastOut{to{opacity:0;transform:translateY(-10px) scale(.96)}}

/* ---------- Back to top ---------- */
.kpx-top{position:fixed;right:14px;bottom:calc(112px + env(safe-area-inset-bottom,0px));z-index:900;width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;border:1px solid rgba(167,139,250,.3);background:rgba(20,12,34,.9);color:#e9d5ff;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(0,0,0,.45);cursor:pointer;
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.kpx-top.show{opacity:1;transform:none;pointer-events:auto}
@media (min-width:981px){.kpx-top{bottom:24px}}

/* ---------- Confetti canvas ---------- */
.kpx-confetti{position:fixed;inset:0;z-index:2147483602;pointer-events:none}

/* ---------- Skeleton shimmer (use class="kpx-skeleton" on placeholders) ---------- */
.kpx-skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.05);border-radius:12px}
.kpx-skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:kpxShimmer 1.4s infinite}
@keyframes kpxShimmer{to{transform:translateX(100%)}}

/* ---------- Nicer focus for keyboard users only ---------- */
:focus-visible{outline:2px solid #a855f7;outline-offset:2px;border-radius:8px}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion:reduce){
  .kp-app-main,.kpx-toast,.kpx-reveal{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
  img.kpx-img{opacity:1!important;transition:none!important}
}

/*
|==========================================================================
| KP-UX v2: modern platform features and design polish
|==========================================================================
*/

/* ---------- Cross-page view transitions (Chrome/Edge/Safari 18+, ignored elsewhere) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root){animation:kpxVtOut .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:kpxVtIn .32s cubic-bezier(0,0,.2,1) both}
@keyframes kpxVtOut{to{opacity:0;transform:translateY(-6px) scale(.995)}}
@keyframes kpxVtIn{from{opacity:0;transform:translateY(10px) scale(.995)}}

/* ---------- Global polish ---------- */
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:rgba(168,85,247,.45);color:#fff}
*{scrollbar-width:thin;scrollbar-color:rgba(167,139,250,.35) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:rgba(167,139,250,.3);border-radius:99px}
*::-webkit-scrollbar-track{background:transparent}
img{image-rendering:auto}
input,select,textarea{transition:border-color .2s ease,box-shadow .2s ease}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(168,85,247,.35),0 0 24px rgba(168,85,247,.25)!important;border-color:rgba(192,132,252,.7)!important}

/* ---------- Glass header when scrolled ---------- */
html.kpx-scrolled body > header, html.kpx-scrolled .kp-header, html.kpx-scrolled .kp-app-header{
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 12px 40px rgba(0,0,0,.35);transition:box-shadow .3s ease}

/* ---------- Spotlight that follows the finger / mouse on cards ---------- */
.kpx-spot-host{position:relative;isolation:isolate}
.kpx-spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(192,132,252,.16),transparent 45%);mix-blend-mode:screen}
.kpx-spot-host:hover > .kpx-spot,.kpx-spot-host.kpx-touch > .kpx-spot{opacity:1}

/* ---------- 3D tilt (mouse only) ---------- */
.kpx-tilt{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;transform-style:preserve-3d}
.kpx-tilt.kpx-tilting{transition:transform .08s linear;box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 40px rgba(124,58,237,.18)}

/* ---------- Shine sweep on gradient buttons ---------- */
.kpx-shine{position:relative;overflow:hidden;isolation:isolate}
.kpx-shine > .kpx-shine-bar{position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:kpxShine 5.5s ease-in-out infinite}
.kpx-shine:hover > .kpx-shine-bar{animation-duration:1.4s}
@keyframes kpxShine{0%,70%{left:-60%}100%{left:130%}}

/* ---------- Install app pill + network status ---------- */
.kpx-pill{position:fixed;left:50%;bottom:calc(112px + env(safe-area-inset-bottom,0px));z-index:1200;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-radius:999px;max-width:calc(100% - 24px);
  background:rgba(20,12,34,.95);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(167,139,250,.35);box-shadow:0 18px 44px rgba(0,0,0,.5);color:#f5f3ff;font-size:12.5px;font-weight:800;
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.kpx-pill.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.kpx-pill img{width:28px;height:28px;border-radius:9px}
.kpx-pill button{border:0;border-radius:999px;min-height:34px;padding:0 14px;font:inherit;font-weight:900;cursor:pointer}
.kpx-pill .go{background:linear-gradient(90deg,#7c3aed,#a855f7);color:#fff}
.kpx-pill .no{background:transparent;color:rgba(255,255,255,.55);padding:0 8px}
@media (min-width:981px){.kpx-pill{bottom:24px}}

/* ---------- Count-up numbers ---------- */
[data-countup]{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .kpx-tilt,.kpx-shine > .kpx-shine-bar{animation:none!important;transition:none!important;transform:none!important}
  html{scroll-behavior:auto}
}

/*
|==========================================================================
| KP-UX v3: navbar, bottom dock, footer
|==========================================================================
*/

/* ---------- Navbar: glass when scrolled, hides while reading (phones) ---------- */
.kp-global-navbar{transition:translate .38s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,background-color .3s ease}
html.kpx-scrolled .kp-global-navbar{
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 14px 40px rgba(0,0,0,.4),0 1px 0 rgba(167,139,250,.14)}
.kp-mobile-dock{transition:translate .42s cubic-bezier(.2,.8,.2,1)}
@media (max-width:980px){
  html.kpx-hide-bars .kp-global-navbar{translate:0 -110%}
  html.kpx-hide-bars .kp-mobile-dock{translate:0 150%}
  /* things that sit on top of the bars follow them */
  html.kpx-hide-bars .kpg-steps{top:calc(env(safe-area-inset-top,0px) + 10px)}
  html.kpx-hide-bars .kpg-buy,html.kpx-hide-bars .kpx-pill{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  html.kpx-hide-bars .kpx-top{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .kpg-steps,.kpg-buy,.kpx-pill,.kpx-top{transition-property:top,bottom,transform,opacity;transition-duration:.4s}
}

/* Desktop nav links: sliding underline */
@media (min-width:981px){
  .kp-global-nav-link{position:relative}
  .kp-global-nav-link:not(.is-active) > .kpx-underline{position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,#a855f7,#c026d3);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}
  .kp-global-nav-link:hover > .kpx-underline{transform:scaleX(1)}
}

/* Cart badge + wallet amount */
@keyframes kpxBadge{0%{transform:scale(1)}35%{transform:scale(1.45)}60%{transform:scale(.9)}100%{transform:scale(1)}}
.kpx-badge-bump{animation:kpxBadge .5s cubic-bezier(.2,.8,.2,1)}
.kp-global-wallet-amount{font-variant-numeric:tabular-nums}

/* Marquee: pause when touched / hovered */
.kp-global-marquee:hover .kp-global-marquee-track,.kp-global-marquee.kpx-hold .kp-global-marquee-track{animation-play-state:paused!important}

/* Mobile menu: links cascade in */
.kp-global-mobile-shell.is-open .kp-global-mobile-links > *{animation:kpxCascade .45s cubic-bezier(.2,.8,.2,1) both}
.kp-global-mobile-shell.is-open .kp-global-mobile-links > *:nth-child(1){animation-delay:.04s}
.kp-global-mobile-shell.is-open .kp-global-mobile-links > *:nth-child(2){animation-delay:.08s}
.kp-global-mobile-shell.is-open .kp-global-mobile-links > *:nth-child(3){animation-delay:.12s}
.kp-global-mobile-shell.is-open .kp-global-mobile-links > *:nth-child(4){animation-delay:.16s}
.kp-global-mobile-shell.is-open .kp-global-mobile-links > *:nth-child(5){animation-delay:.2s}
.kp-global-mobile-shell.is-open .kp-global-mobile-links > *:nth-child(6){animation-delay:.24s}
.kp-global-mobile-shell.is-open .kp-global-mobile-links > *:nth-child(n+7){animation-delay:.28s}
@keyframes kpxCascade{from{opacity:0;transform:translateX(-14px)}}

/* ---------- Bottom dock: springy taps ---------- */
.kp-mobile-dock-items > a,.kp-mobile-dock-items > button{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.kp-mobile-dock-items > a:active,.kp-mobile-dock-items > button:active{transform:scale(.88)}
.kpx-dock-pop i,.kpx-dock-pop .kp-mobile-dock-avatar{animation:kpxDockPop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes kpxDockPop{40%{transform:translateY(-5px) scale(1.18)}}
#kp-mobile-dock-active{transition-timing-function:cubic-bezier(.3,1.3,.5,1)!important}

/* ---------- Footer ---------- */
.kp-footer-link-arrow{transition:transform .25s ease}
.kp-footer-link:hover .kp-footer-link-arrow{transform:translateX(4px)}
.kp-footer-quick-link{transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease}
.kp-footer-quick-link:hover{transform:translateY(-3px)}
.kp-global-social a{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.kp-global-social a:hover{transform:translateY(-3px) rotate(-6deg)}
.kpx-foot-in{animation:kpxCascade .6s cubic-bezier(.2,.8,.2,1) both}

@media (prefers-reduced-motion:reduce){
  .kp-global-navbar,.kp-mobile-dock{transition:none}
  html.kpx-hide-bars .kp-global-navbar,html.kpx-hide-bars .kp-mobile-dock{translate:none}
  .kp-global-mobile-shell.is-open .kp-global-mobile-links > *,.kpx-foot-in{animation:none!important}
}


/*
|==========================================================================
| KP-UX v4: footer upgrades
|==========================================================================
*/
.kpx-top.kpx-top-hide{opacity:0!important;pointer-events:none!important;transform:translateY(12px) scale(.9)!important}

.kpx-foot-extra{display:grid;gap:12px;margin:16px 0 4px}
.kpx-foot-label{color:rgba(255,255,255,.4);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.kpx-pay{display:flex;flex-wrap:wrap;gap:6px}
.kpx-pay span{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:12px;font-size:11px;font-weight:800;color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.kpx-pay i{color:#c4b5fd}
.kpx-pay .kpx-secure{color:#86efac;border-color:rgba(34,197,94,.22);background:rgba(34,197,94,.06)}
.kpx-pay .kpx-secure i{color:#4ade80}

.kpx-foot-ctas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kpx-foot-cta{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;border-radius:18px;text-decoration:none;color:#fff;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(0,0,0,.2));font:inherit;text-align:left;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s}
.kpx-foot-cta:hover{transform:translateY(-2px);border-color:rgba(192,132,252,.35)}
.kpx-foot-cta:active{transform:scale(.97)}
.kpx-foot-cta b{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:11px;font-size:15px}
.kpx-foot-cta.app b{background:linear-gradient(145deg,#7c3aed,#c026d3)}
.kpx-foot-cta.tg b{background:linear-gradient(145deg,#229ED9,#1c7fb0)}
.kpx-foot-cta span{display:grid;gap:1px;min-width:0}
.kpx-foot-cta strong{font-size:12px;line-height:1.2}
.kpx-foot-cta small{font-size:10px;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.kpx-live{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:10px;font-weight:800;color:#86efac}
.kpx-live::before{content:'';width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:kpxLiveDot 2s ease-out infinite}
@keyframes kpxLiveDot{80%,100%{box-shadow:0 0 0 7px rgba(74,222,128,0)}}

.kp-global-social.kpx-soon{opacity:.45}
@media (prefers-reduced-motion:reduce){.kpx-live::before{animation:none}}


/*
| KP-UX v5: popups always centred on the screen
| (no lingering transform/filter on page wrappers; finished reveals drop theirs)
*/
.kp-app-main{transform:none;filter:none}
.kpx-reveal.kpx-in{transform:none!important;will-change:auto}
.kpx-reveal.kpx-done{transition:none}