/**
 * Native-app keyboard avoidance: keep fields in the visual viewport.
 */

:root {
    --kf-keyboard-inset: 0px;
    --kf-vv-height: 100dvh;
    --kf-vv-offset-top: 0px;
}

html:has(body.kf-login-page.kf-keyboard-open) {
    background: #0b1710 !important;
    overflow: hidden !important;
}

/* Login / PIN / complete-profile: fill the visible viewport, form docks to the keyboard */
body.kf-login-page.kf-keyboard-open {
    --kf-login-bar-h: 0px;
    height: var(--kf-vv-height, 100dvh) !important;
    min-height: var(--kf-vv-height, 100dvh) !important;
    max-height: var(--kf-vv-height, 100dvh) !important;
    overflow: hidden !important;
    overscroll-behavior: none;
    background: #0b1710 !important;
}

body.kf-login-page.kf-keyboard-open .kf-app,
body.kf-login-page.kf-keyboard-open .kf-hero-fullbleed,
body.kf-login-page.kf-keyboard-open .kf-login-stack {
    height: var(--kf-vv-height, 100dvh) !important;
    min-height: var(--kf-vv-height, 100dvh) !important;
    max-height: var(--kf-vv-height, 100dvh) !important;
    background: #0b1710 !important;
}

body.kf-login-page .kf-login-stack {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.kf-login-page.kf-keyboard-open .kf-login-stack,
body.kf-login-page.kf-keyboard-open .kf-card.cpf-card {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.kf-login-page.kf-keyboard-open .kf-sheet,
html.kf-android-webview body.kf-login-page.kf-keyboard-open .kf-sheet {
    margin-top: auto !important;
    padding-bottom: 8px !important;
}

body.kf-login-page.kf-keyboard-open .kf-login-bg {
    max-height: none;
}

/* Hide the fixed contact strip so it cannot sit on top of the field */
body.kf-login-page.kf-keyboard-open .kph-contact-bar {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(110%) !important;
}

@media (min-width: 768px) {
    body.kf-login-page.kf-keyboard-open .kph-contact-bar {
        transform: translateX(-50%) translateY(110%) !important;
    }
}

body.kf-login-page.kf-keyboard-open .kf-card.cpf-card {
    max-height: calc(var(--kf-vv-height, 100dvh) - 24px) !important;
    height: auto !important;
    overflow: hidden !important;
}

body.kf-login-page .kf-pin-box {
    scroll-margin: 0 !important;
    scroll-margin-block: 0 !important;
}

/* PIN pills: extra ring must not change box size while hopping digits */
body.kf-login-page.cpf-page .cpf-pin-step input.kf-pin-box.cpf-pin-pill:focus {
    outline: none;
}

html.kf-android-webview body.kf-login-page.kf-keyboard-open .kf-app,
html.kf-android-webview body.kf-login-page.kf-keyboard-open .kf-hero-fullbleed,
html.kf-android-webview body.kf-login-page.kf-keyboard-open .kf-login-stack {
    height: var(--kf-vv-height, 100dvh) !important;
    min-height: var(--kf-vv-height, 100dvh) !important;
    max-height: var(--kf-vv-height, 100dvh) !important;
}

html.kf-android-webview body.kf-login-page.kf-keyboard-open .kph-contact-bar {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(110%) !important;
}

/* Guest login bottom sheet (Pay Now / grocery) */
body.kf-keyboard-open .kga {
    top: var(--kf-vv-offset-top, 0px);
    height: var(--kf-vv-height, 100dvh);
    bottom: auto;
}

body.kf-keyboard-open .kga__panel {
    max-height: calc(var(--kf-vv-height, 100dvh) - 8px);
    padding-bottom: 12px;
}

/* Portal forms: extra bottom space so the focused field can scroll up */
body.kf-keyboard-open.bh-page {
    padding-bottom: var(--kf-keyboard-inset, 0px);
}