/*
|==========================================================================
| KP-NAV: spotlight search, bell, account sheet, live order pill,
| dock (Orders centre button, badges), footer help strip
|==========================================================================
*/
:root{--kpn-bg:rgba(14,9,22,.97);--kpn-line:rgba(168,85,247,.22);--kpn-v:#a855f7;--kpn-c:#22d3ee}

/* ---------- Header: wallet balance visible on phones ---------- */
@media (max-width:980px) and (min-width:360px){
  .kp-global-nav-wallet .kp-global-wallet-amount{display:inline-block!important;font-size:11px;font-weight:900;margin-left:4px;letter-spacing:-.01em}
  .kp-global-nav-wallet{width:auto!important;padding:0 10px 0 7px!important;gap:2px}
}

/* ---------- Header buttons we add (search, bell) ---------- */
.kpn-hbtn{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);color:#e9d5ff;font-size:16px;cursor:pointer;transition:transform .15s,background .2s;flex:0 0 auto}
.kpn-hbtn:active{transform:scale(.92)}
.kpn-hbtn:hover{background:rgba(168,85,247,.14)}
.kpn-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:linear-gradient(135deg,#ef4444,#f97316);
  color:#fff;font-size:10px;font-weight:900;display:grid;place-items:center;box-shadow:0 0 0 2px #0b0712;animation:kpnPop .45s cubic-bezier(.3,1.6,.5,1)}
.kpn-hbtn.kpn-ring i{animation:kpnRing 1.2s ease-in-out 2}
@keyframes kpnRing{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}}
@keyframes kpnPop{from{transform:scale(0)}to{transform:scale(1)}}
@media (min-width:981px){.kpn-hbtn.kpn-search-btn{display:none}}

/* ---------- Overlay + sheets ---------- */
.kpn-backdrop{position:fixed;inset:0;z-index:2147483000;background:rgba(5,3,9,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .25s}
.kpn-backdrop.is-on{opacity:1;pointer-events:auto}
.kpn-sheet{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:2147483001;max-height:min(78vh,640px);overflow:auto;
  padding:16px;border-radius:26px;border:1px solid var(--kpn-line);background:var(--kpn-bg);color:#fff;box-shadow:0 -20px 60px rgba(0,0,0,.55);
  transform:translateY(115%);transition:transform .42s cubic-bezier(.2,.9,.2,1);overscroll-behavior:contain}
.kpn-sheet.is-on{transform:none}
.kpn-sheet::before{content:"";display:block;width:42px;height:5px;border-radius:9px;background:rgba(255,255,255,.18);margin:-6px auto 12px}
@media (min-width:981px){
  .kpn-sheet{left:auto;right:24px;top:84px;bottom:auto;width:380px;transform:translateY(-10px) scale(.97);opacity:0;pointer-events:none;transition:all .22s}
  .kpn-sheet.is-on{transform:none;opacity:1;pointer-events:auto}
  .kpn-sheet::before{display:none}
}
.kpn-h{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:900;font-size:16px;margin-bottom:10px}
.kpn-h small{font-weight:700;color:rgba(255,255,255,.45);font-size:11px}
.kpn-link{background:none;border:0;color:#c4b5fd;font-weight:800;font-size:12px;cursor:pointer;padding:6px}

/* notifications */
.kpn-note{display:flex;gap:11px;align-items:flex-start;padding:11px;border-radius:16px;text-decoration:none;color:#fff;transition:background .2s;position:relative}
.kpn-note:hover{background:rgba(255,255,255,.04)}
.kpn-note.is-new{background:rgba(168,85,247,.09)}
.kpn-note.is-new::after{content:"";position:absolute;right:12px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--kpn-v);box-shadow:0 0 10px var(--kpn-v)}
.kpn-note-i{flex:0 0 38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.05);font-size:18px}
.kpn-note b{display:block;font-size:13px}
.kpn-note span{display:block;font-size:12px;color:rgba(255,255,255,.6);margin-top:2px}
.kpn-note em{display:block;font-style:normal;font-size:10px;color:rgba(255,255,255,.35);margin-top:3px}
.kpn-empty{padding:26px 10px;text-align:center;color:rgba(255,255,255,.45);font-size:13px}

/* account sheet */
.kpn-prof{display:flex;align-items:center;gap:12px;padding:6px 4px 14px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:12px}
.kpn-av{flex:0 0 52px;height:52px;border-radius:18px;display:grid;place-items:center;font-weight:900;font-size:22px;background:linear-gradient(135deg,#7c3aed,#c026d3);box-shadow:0 10px 26px rgba(124,58,237,.4)}
.kpn-prof b{display:block;font-size:16px}
.kpn-badge{display:inline-block;margin-top:4px;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:900;background:rgba(250,204,21,.12);color:#fde68a;border:1px solid rgba(250,204,21,.25)}
.kpn-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.kpn-stat{padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);text-decoration:none;color:#fff}
.kpn-stat small{display:block;font-size:10px;font-weight:800;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.08em}
.kpn-stat b{font-size:17px}
.kpn-links{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.kpn-links .kp-nav-dropdown-link,.kpn-links form{margin:0}
.kpn-links .kp-nav-dropdown-link{display:flex!important;align-items:center;gap:9px;min-height:46px;padding:0 12px!important;border-radius:14px!important;
  background:rgba(255,255,255,.035)!important;color:#fff!important;font-size:13px!important;font-weight:800!important;width:100%;text-decoration:none;border:0}
.kpn-links .kp-nav-dropdown-link i{color:#c4b5fd;width:16px;text-align:center}
.kpn-links .kp-nav-dropdown-danger{color:#fca5a5!important}
.kpn-links .kpn-wide{grid-column:1/-1}

/* buy again */
.kpn-again{display:flex;align-items:center;gap:11px;padding:10px;border-radius:16px;background:rgba(255,255,255,.035);margin-bottom:8px;text-decoration:none;color:#fff}
.kpn-again img{width:46px;height:46px;border-radius:12px;object-fit:cover}
.kpn-again b{display:block;font-size:13px}.kpn-again span{font-size:11px;color:rgba(255,255,255,.5)}
.kpn-again i{margin-left:auto;color:#c4b5fd}

/* ---------- Spotlight search ---------- */
.kpn-spot{position:fixed;left:50%;top:max(14px,env(safe-area-inset-top,0px));z-index:2147483002;width:min(640px,calc(100% - 20px));
  transform:translate(-50%,-14px) scale(.98);opacity:0;pointer-events:none;transition:all .22s cubic-bezier(.2,.9,.2,1)}
.kpn-spot.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.kpn-spot-box{border-radius:24px;border:1px solid var(--kpn-line);background:var(--kpn-bg);box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}
.kpn-spot-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.kpn-spot-in i{color:#c4b5fd}
.kpn-spot-in input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font-size:17px;font-weight:700}
.kpn-spot-in button{background:rgba(255,255,255,.06);border:0;color:#fff;border-radius:10px;padding:7px 10px;font-weight:800;font-size:12px}
.kpn-spot-list{max-height:min(62vh,520px);overflow:auto;padding:8px}
.kpn-spot-sec{padding:8px 8px 4px;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.kpn-res{display:flex;align-items:center;gap:12px;padding:9px;border-radius:15px;color:#fff;text-decoration:none}
.kpn-res.is-sel,.kpn-res:hover{background:rgba(168,85,247,.14)}
.kpn-res img{width:44px;height:44px;border-radius:12px;object-fit:cover;flex:0 0 44px;background:#1a1222}
.kpn-res b{display:block;font-size:14px}
.kpn-res span{font-size:11px;color:rgba(255,255,255,.5)}
.kpn-res em{margin-left:auto;font-style:normal;font-size:12px;font-weight:900;color:#d8b4fe;white-space:nowrap}
.kpn-chip{display:inline-flex;margin:4px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);color:#e9d5ff;font-size:12px;font-weight:800;cursor:pointer}
.kpn-skel{height:58px;border-radius:15px;margin:6px 0;background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.07),rgba(255,255,255,.03));background-size:200% 100%;animation:kpnSk 1.1s linear infinite}
@keyframes kpnSk{to{background-position:-200% 0}}

/* ---------- Dock: Orders centre button + badges ---------- */
.kp-mobile-dock-item[data-nav-key="orders"] .kp-mobile-dock-icon{
  width:50px!important;height:50px!important;margin-top:-26px;border-radius:18px!important;color:#fff!important;font-size:19px;
  background:linear-gradient(140deg,#7c3aed,#c026d3 60%,#f472b6)!important;box-shadow:0 10px 28px rgba(168,85,247,.55),0 0 0 4px #0b0712!important;
  transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.kp-mobile-dock-item[data-nav-key="orders"]:active .kp-mobile-dock-icon{transform:scale(.9) rotate(-6deg)}
.kp-mobile-dock-item[data-nav-key="orders"].kpn-holding .kp-mobile-dock-icon{transform:scale(1.12)}
.kp-mobile-dock-item{position:relative}
.kpn-dot{position:absolute;top:4px;right:calc(50% - 20px);width:10px;height:10px;border-radius:50%;background:#facc15;box-shadow:0 0 0 2px #0b0712,0 0 12px #facc15;animation:kpnPulse 1.6s ease-in-out infinite}
.kpn-num{position:absolute;top:-22px;right:calc(50% - 32px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#22d3ee;color:#04121a;font-size:10px;font-weight:900;display:grid;place-items:center;box-shadow:0 0 0 2px #0b0712;z-index:2}
@keyframes kpnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

/* ---------- Live order pill ---------- */
.kpn-live{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:2147482990;display:flex;align-items:center;gap:10px;
  max-width:calc(100% - 24px);padding:9px 14px 9px 10px;border-radius:999px;text-decoration:none;color:#fff;font-size:12px;font-weight:800;
  background:rgba(18,11,28,.94);border:1px solid rgba(34,211,238,.35);box-shadow:0 14px 40px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transform:translate(-50%,160%);transition:transform .5s cubic-bezier(.2,.9,.2,1),bottom .4s,border-color .3s}
.kpn-live.is-on{transform:translate(-50%,0)}
.kpn-live .kpn-spin{width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:3px solid rgba(34,211,238,.2);border-top-color:#22d3ee;animation:kpnRot .8s linear infinite}
.kpn-live.is-done{border-color:rgba(34,197,94,.55)}
.kpn-live.is-done .kpn-spin{border:0;animation:none;background:#22c55e;display:grid;place-items:center}
.kpn-live.is-done .kpn-spin::after{content:"✓";color:#04150a;font-size:13px;font-weight:900}
.kpn-live span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpn-live small{color:rgba(255,255,255,.55);font-weight:700;white-space:nowrap}
@keyframes kpnRot{to{transform:rotate(360deg)}}
@media (min-width:981px){.kpn-live{bottom:24px;left:auto;right:24px;transform:translateY(160%)}.kpn-live.is-on{transform:none}}
html.kpx-hide-bars .kpn-live{bottom:calc(16px + env(safe-area-inset-bottom,0px))}

/* ---------- Footer help strip ---------- */
.kpn-help{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;margin:0 0 22px;padding:16px;border-radius:22px;
  border:1px solid rgba(168,85,247,.2);background:linear-gradient(120deg,rgba(124,58,237,.18),rgba(34,211,238,.06))}
.kpn-help b{display:block;font-size:15px}
.kpn-help span{font-size:12px;color:rgba(255,255,255,.6)}
.kpn-help a,.kpn-help button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:14px;border:0;font-weight:900;font-size:13px;
  color:#fff;background:linear-gradient(90deg,#7c3aed,#a855f7);text-decoration:none;cursor:pointer;white-space:nowrap}
.kpn-pay{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.kpn-pay i{font-style:normal;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.75)}
@media (max-width:520px){.kpn-help{grid-template-columns:1fr}.kpn-help a,.kpn-help button{justify-content:center}}

@media (prefers-reduced-motion:reduce){
  .kpn-sheet,.kpn-spot,.kpn-live,.kpn-backdrop{transition:none}
  .kpn-dot,.kpn-live .kpn-spin,.kpn-hbtn.kpn-ring i,.kpn-skel{animation:none}
}

/* ---------- v1.1 tidy: header fits on phones ---------- */
@media (max-width:980px){
  .kp-global-nav-actions{gap:6px!important}
  .kp-global-brand{flex:0 0 auto!important;min-width:92px}
  .kp-global-brand img{min-width:92px;width:auto;height:auto;max-height:30px;object-fit:contain}
  .kpn-hbtn,.kp-global-nav-actions .kp-global-nav-action:not(.kp-global-nav-wallet):not(.kp-global-join){width:40px;height:40px;min-width:40px;border-radius:13px}
  .kp-global-nav-wallet{width:auto!important;min-width:0}
  .kp-global-nav-wallet img{display:none!important}
  .kp-global-nav-wallet .kp-global-wallet-amount{margin-left:0!important}
}
@media (max-width:440px){
  .kpn-hbtn.kpn-search-btn{display:none} /* search stays in the menu and on Explore */
}
@media (max-width:359px){
  .kp-global-nav-wallet{display:none!important}
}
/* pages never scroll sideways because of one long word */
.kp-redx-stack > *{min-width:0;max-width:100%}