/*
|==========================================================================
| 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-bg:light-dark(rgba(241,238,245,0.97),rgba(14,9,22,.97));--kpn-line:rgba(var(--kp-theme-primary-rgb),.22);--kpn-v:var(--kp-theme-primary);--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);border:1px solid light-dark(rgba(24,19,33,0.092),rgba(255,255,255,.08));
  background:rgba(255,255,255,.04);background:light-dark(rgba(24,19,33,0.036),rgba(255,255,255,.04));color:var(--kp-theme-text);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(var(--kp-theme-primary-rgb),.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;box-shadow:0 0 0 2px light-dark(rgba(11,7,18,0.35),#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);background:light-dark(rgba(18,12,30,0.45),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;color:light-dark(#1a161d,#fff);box-shadow:0 -20px 60px rgba(0,0,0,.55);box-shadow:0 -20px 60px light-dark(rgba(0,0,0,0.193),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);background:light-dark(rgba(24,19,33,0.162),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);color:light-dark(rgba(24,19,33,0.75),rgba(255,255,255,.45));font-size:11px}
.kpn-link{background:none;border:0;color:#c4b5fd;color:light-dark(#2e264e,#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;color:light-dark(#1a161d,#fff);transition:background .2s;position:relative}
.kpn-note:hover{background:rgba(255,255,255,.04);background:light-dark(rgba(24,19,33,0.036),rgba(255,255,255,.04))}
.kpn-note.is-new{background:rgba(var(--kp-theme-primary-rgb),.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);background:light-dark(rgba(24,19,33,0.045),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);color:light-dark(rgba(24,19,33,0.85),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);color:light-dark(rgba(24,19,33,0.75),rgba(255,255,255,.35));margin-top:3px}
.kpn-empty{padding:26px 10px;text-align:center;color:rgba(255,255,255,.45);color:light-dark(rgba(24,19,33,0.75),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);border-bottom:1px solid light-dark(rgba(24,19,33,0.069),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,var(--kp-theme-primary),var(--kp-theme-secondary));box-shadow:0 10px 26px rgba(var(--kp-theme-primary-rgb),.4);color:light-dark(#fff,currentColor)}
.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;color:light-dark(#a08103,#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);background:light-dark(rgba(24,19,33,0.036),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.06);border:1px solid light-dark(rgba(24,19,33,0.069),rgba(255,255,255,.06));text-decoration:none;color:#fff;color:light-dark(#1a161d,#fff)}
.kpn-stat small{display:block;font-size:10px;font-weight:800;color:rgba(255,255,255,.45);color:light-dark(rgba(24,19,33,0.75),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;background:light-dark(rgba(24,19,33,0.032),rgba(255,255,255,.035))!important;color:#fff!important;color:light-dark(#1a161d,#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;color:light-dark(#2e264e,#c4b5fd);width:16px;text-align:center}
.kpn-links .kp-nav-dropdown-danger{color:#fca5a5!important;color:light-dark(#582a2a,#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);background:light-dark(rgba(24,19,33,0.032),rgba(255,255,255,.035));margin-bottom:8px;text-decoration:none;color:#fff;color:light-dark(#1a161d,#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);color:light-dark(rgba(24,19,33,0.75),rgba(255,255,255,.5))}
.kpn-again i{margin-left:auto;color:#c4b5fd;color:light-dark(#2e264e,#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);box-shadow:0 30px 80px light-dark(rgba(0,0,0,0.21),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);border-bottom:1px solid light-dark(rgba(24,19,33,0.069),rgba(255,255,255,.06))}
.kpn-spot-in i{color:#c4b5fd;color:light-dark(#2e264e,#c4b5fd)}
.kpn-spot-in input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;color:light-dark(#1a161d,#fff);font-size:17px;font-weight:700}
.kpn-spot-in button{background:rgba(255,255,255,.06);background:light-dark(rgba(24,19,33,0.054),rgba(255,255,255,.06));border:0;color:#fff;color:light-dark(#1a161d,#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);color:light-dark(rgba(24,19,33,0.75),rgba(255,255,255,.38))}
.kpn-res{display:flex;align-items:center;gap:12px;padding:9px;border-radius:15px;color:#fff;color:light-dark(#1a161d,#fff);text-decoration:none}
.kpn-res.is-sel,.kpn-res:hover{background:rgba(var(--kp-theme-primary-rgb),.14)}
.kpn-res img{width:44px;height:44px;border-radius:12px;object-fit:cover;flex:0 0 44px;background:#1a1222;background:light-dark(#edeaf0,#1a1222)}
.kpn-res b{display:block;font-size:14px}
.kpn-res span{font-size:11px;color:rgba(255,255,255,.5);color:light-dark(rgba(24,19,33,0.75),rgba(255,255,255,.5))}
.kpn-res em{margin-left:auto;font-style:normal;font-size:12px;font-weight:900;color:var(--kp-theme-text);white-space:nowrap}
.kpn-chip{display:inline-flex;margin:4px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.05);background:light-dark(rgba(24,19,33,0.045),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.07);border:1px solid light-dark(rgba(24,19,33,0.081),rgba(255,255,255,.07));color:var(--kp-theme-text);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:linear-gradient(90deg,light-dark(rgba(24,19,33,0.027),rgba(255,255,255,.03)),light-dark(rgba(24,19,33,0.063),rgba(255,255,255,.07)),light-dark(rgba(24,19,33,0.027),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,var(--kp-theme-primary),var(--kp-theme-secondary) 60%,#f472b6)!important;box-shadow:0 10px 28px rgba(var(--kp-theme-primary-rgb),.55),0 0 0 4px #0b0712!important;box-shadow:0 10px 28px rgba(var(--kp-theme-primary-rgb),.55),0 0 0 4px light-dark(rgba(11,7,18,0.35),#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;box-shadow:0 0 0 2px light-dark(rgba(11,7,18,0.35),#0b0712),0 0 12px #facc15;animation:kpnPulse 1.6s ease-in-out infinite;color:light-dark(#fff,currentColor)}
.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;box-shadow:0 0 0 2px light-dark(rgba(11,7,18,0.35),#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;color:light-dark(#1a161d,#fff);font-size:12px;font-weight:800;
  background:rgba(18,11,28,.94);background:light-dark(rgba(239,236,244,0.94),rgba(18,11,28,.94));border:1px solid rgba(34,211,238,.35);box-shadow:0 14px 40px rgba(0,0,0,.5);box-shadow:0 14px 40px light-dark(rgba(0,0,0,0.175),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;color:light-dark(#fff,currentColor)}
.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);color:light-dark(rgba(24,19,33,0.8),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(var(--kp-theme-primary-rgb),.2);background:linear-gradient(120deg,rgba(var(--kp-theme-primary-rgb),.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);color:light-dark(rgba(24,19,33,0.85),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,var(--kp-theme-primary),var(--kp-theme-primary));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);background:light-dark(rgba(24,19,33,0.045),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.08);border:1px solid light-dark(rgba(24,19,33,0.092),rgba(255,255,255,.08));color:rgba(255,255,255,.75);color:light-dark(rgba(26,22,29,0.75),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%}

/* v1.37.4 Inbox panel */
.kpn-ib{position:relative;border-radius:16px;margin-bottom:4px;transition:background .2s}
.kpn-ib:hover{background:rgba(255,255,255,.04);background:light-dark(rgba(24,19,33,0.036),rgba(255,255,255,.04))}
.kpn-ib.is-new{background:rgba(var(--kp-theme-primary-rgb),.09)}
.kpn-ib.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-ib.is-live{border:1px solid rgba(251,191,36,.35);background:linear-gradient(135deg,rgba(251,191,36,.10),transparent 70%)}
.kpn-ib.is-live::after{background:#f59e0b;box-shadow:0 0 10px #f59e0b}
.kpn-ib-main{display:flex;gap:11px;align-items:flex-start;padding:11px 26px 8px 11px;text-decoration:none;color:#fff;color:light-dark(#1a161d,#fff)}
.kpn-ib-main b{display:block;font-size:13px}
.kpn-ib-main span{display:block;font-size:12px;color:rgba(255,255,255,.6);color:light-dark(rgba(24,19,33,0.85),rgba(255,255,255,.6));margin-top:2px;white-space:pre-line;overflow-wrap:anywhere}
.kpn-ib-main em{display:block;font-style:normal;font-size:10px;color:rgba(255,255,255,.35);color:light-dark(rgba(24,19,33,0.75),rgba(255,255,255,.35));margin-top:3px}
.kpn-ib-main em.kpn-ib-cd{color:#fbbf24;color:light-dark(#b45309,#fbbf24);font-weight:800}
.kpn-ib-act{display:flex;gap:6px;flex-wrap:wrap;padding:0 11px 11px 60px}
.kpn-ib-btn,.kpn-ib-code{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:10px;font:inherit;font-size:12px;font-weight:900;text-decoration:none;cursor:pointer;border:0}
.kpn-ib-btn{color:#fff;background:linear-gradient(135deg,var(--kp-theme-primary),var(--kp-theme-secondary))}
.kpn-ib-code{color:inherit;background:rgba(255,255,255,.06);background:light-dark(rgba(24,19,33,0.05),rgba(255,255,255,.06));border:1px dashed rgba(255,255,255,.2);border:1px dashed light-dark(rgba(24,19,33,0.2),rgba(255,255,255,.2));font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:#fff;color:light-dark(#1a161d,#fff)}
.kpn-ib-code small{font-family:inherit;font-size:9px;letter-spacing:.06em;opacity:.6;text-transform:uppercase}
.kpn-ib-code.is-ok{border-color:#22c55e;color:#22c55e}
.kpn-ib-spin{display:block;margin:0 0 8px;padding:10px 12px;border-radius:14px;font-size:12.5px;font-weight:800;text-decoration:none;color:#fff;color:light-dark(#1a161d,#fff);background:rgba(250,204,21,.10);border:1px solid rgba(250,204,21,.25)}