/* kngx-safearea.css ?v=s6 — iPhone Safari bottom address pill (2026-10-04). CSS only.
   az.kngx.ca lets the page scroll under the translucent address pill. kngx client pages did not:
   care.css overflow-x:hidden turned body into a scrollport, app.css height:100% capped it, and
   72px/100px bottom padding painted a solid band above the pill so the disclaimer was cut off.
   --kx-bottom-safe stays 0 in the browser (standalone still uses the home-indicator inset).
   iOS phones: document scrolls (overflow-x:clip, overflow-y:visible, height:auto, min-height:100lvh)
   and client shell padding-bottom is 0 so content occupies the strip behind the pill. */

:root{--kx-bottom-safe:0px;--kx-nav-h:64px}
@media (display-mode:standalone){
  :root{--kx-bottom-safe:env(safe-area-inset-bottom,0px)}
}

/* dvh instead of vh for full-height body (100vh is the LARGE viewport on iOS; dvh follows the visible one) */
/* Large viewport so the page background reaches the strip behind Safari's bottom address pill.
   100dvh is the short viewport and stops above that pill, which paints a solid dead band. */
@supports (height:100lvh){
  body{min-height:100lvh}
}
@supports (height:100dvh) and (not (height:100lvh)){
  body{min-height:100dvh}
}

@supports (-webkit-touch-callout:none){
@media (max-width:63.99rem){

  /* ---- fixed bottom nav (Home / Account / Funds / Promotions, kngx-bottomnav.js): raised so its tap targets sit above the bar ---- */
  html body #kxBnav,
  html.kx-bnav body #kxBnav{
    bottom:calc(4px + var(--kx-bottom-safe)) !important;
  }
  /* kngx-loader.css (tabbar1) pads the bar by env(safe-area-inset-bottom); the bar is now lifted by `bottom`, so drop the dead padding (same selector, loads later) */
  html body #kxBnav:not(#kx1){
    padding-bottom:0 !important;
  }
  /* Safari address pill: content must scroll THROUGH that strip, same as az.kngx.ca.
     care.css sets overflow-x:hidden on html,body, which forces overflow-y to auto and
     makes the body a 100%-tall scrollport that ends above the pill. The 72px/100px
     body and .main pads then paint a solid band where the address bar sits, so the
     risk warning is cut off above it. clip + visible keeps sideways clipping without
     a scrollport; height:auto lets the document (and the disclaimer) reach the pill. */
  html.kx-bnav:not(.chat-open):not(.kyc-open):not(.gift-open):not(.contest-open):not(.rank-open):not(.rank-av-zoom-open):not(.kngx-summon-on),
  html.kx-bnav:not(.chat-open):not(.kyc-open):not(.gift-open):not(.contest-open):not(.rank-open):not(.rank-av-zoom-open):not(.kngx-summon-on) body,
  html:has(.shell):not(.chat-open):not(.kyc-open):not(.gift-open):not(.contest-open):not(.rank-open):not(.rank-av-zoom-open):not(.kngx-summon-on),
  html:has(.shell):not(.chat-open):not(.kyc-open):not(.gift-open):not(.contest-open):not(.rank-open):not(.rank-av-zoom-open):not(.kngx-summon-on) body{
    height:auto !important;
    min-height:100lvh;
    overflow-x:clip !important;
    overflow-y:visible !important;
  }
  html body:has(#kxBnav),
  html.kx-bnav body,
  html body:has(.shell){
    padding-bottom:0 !important;
  }
  html.kx-bnav .main,
  body:has(#kxHome) .main,
  html body:has(.shell) .main{
    padding-bottom:0 !important;
  }

  /* "More" sheet and full-screen menu / profile panel: sit above nav + bar; last item reachable */
  html.kx-more-open body #side,
  html.kx-more-open body .side{
    bottom:calc(var(--kx-bottom-safe) + 84px) !important;
    max-height:min(68vh,calc(100vh - var(--kx-bottom-safe) - 150px)) !important;
  }
  @supports (height:100dvh){
    html.kx-more-open body #side,
    html.kx-more-open body .side{max-height:min(68dvh,calc(100dvh - var(--kx-bottom-safe) - 150px)) !important}
  }
  html.kx-more-open body #kxHamOverlay{padding-bottom:calc(24px + var(--kx-bottom-safe)) !important}
  html body .kx-prof-panel{padding-bottom:calc(24px + var(--kx-bottom-safe)) !important}

  /* consent banner: pages without the nav -> clear the bar; pages with the nav -> sit above the nav */
  html body #kngx-consent-banner{bottom:calc(16px + var(--kx-bottom-safe)) !important}
  html.kx-bnav body #kngx-consent-banner{bottom:calc(10px + var(--kx-bottom-safe) + var(--kx-nav-h) + 12px) !important}

  /* toasts (deposit / withdrawal / dashboard) */
  html body .wd-toast,
  html body .dep-toast,
  html body .dash-toast-stack{bottom:calc(16px + var(--kx-bottom-safe)) !important}
  html.kx-bnav body .wd-toast,
  html.kx-bnav body .dash-toast-stack{bottom:calc(10px + var(--kx-bottom-safe) + var(--kx-nav-h) + 12px) !important}

  /* open Care composer: keep the input row above the bar */
  html body #kngx-chat-root.open .kchat-composer-wrap,
  html body .kchat.open .kchat-composer-wrap{
    padding-bottom:calc(.85rem + var(--kx-bottom-safe)) !important;
  }

  /* modal gates (deposit: confirm / card / address / sign-in): scrollable content ends above the bar */
  html body .dep-confirm-gate,
  html body .kngx-sec-gate{
    padding-bottom:calc(24px + var(--kx-bottom-safe));
  }

  /* landing sticky CTA (only if present): lifted above the bar */
  html body .sticky-cta{
    bottom:var(--kx-bottom-safe) !important;
    padding-bottom:.85rem !important;
  }
}
}


/* Deposit palette on deposit + earn (and every client shell). Hide Comfort/Pro. */
#kxDensity,.kx-density{display:none !important}
html body:has(.shell),
html body:has(#dep-wizard-lock){
  background:#070D0A !important;
  color:#E7EEE9 !important;
}
html body:has(.shell) .abar,
html body:has(#dep-wizard-lock) .abar{
  background:#0C1410 !important;
  color:#F2F5F3 !important;
  border-bottom:1px solid rgba(232,200,114,.28) !important;
}
html body:has(.shell) #kxBnav .in,
html body:has(#dep-wizard-lock) #kxBnav .in{
  background:rgba(12,20,16,.55) !important;
  background-image:linear-gradient(180deg, rgba(255,255,255,.14), rgba(12,20,16,.35)) !important;
  border:1px solid rgba(232,200,114,.32) !important;
  border-radius:36px !important;
  -webkit-backdrop-filter:blur(22px) saturate(180%) !important;
  backdrop-filter:blur(22px) saturate(180%) !important;
}
html body:has(.shell) .main .card,
html body:has(#dep-wizard-lock) .dep-card,
html body:has(#dep-wizard-lock) .card{
  background:rgba(12,20,16,.82) !important;
  color:#E7EEE9 !important;
  border:1px solid rgba(232,200,114,.32) !important;
}