/* KalHeshbon Mobile Safe UI 1.0.0 */

html {
    overflow-x: clip;
}

body {
    max-width: 100%;
}

@media (max-width: 900px) {
    html,
    body {
        max-width: 100%;
        overflow-x: clip !important;
    }

    body.kh-msafe-has-bottom::after {
        content: "";
        display: block;
        width: 1px;
        height: calc(var(--kh-msafe-reserve, 76px) + env(safe-area-inset-bottom));
        pointer-events: none;
    }

    .kh-msafe-managed {
        box-sizing: border-box !important;
        max-width: calc(100vw - (var(--kh-msafe-gap, 14px) * 2)) !important;
    }

    .kh-msafe-bottom {
        bottom: calc(env(safe-area-inset-bottom) + var(--kh-msafe-offset, var(--kh-msafe-gap, 14px))) !important;
        top: auto !important;
    }

    .kh-msafe-top {
        top: calc(env(safe-area-inset-top) + var(--kh-msafe-offset, var(--kh-msafe-gap, 14px))) !important;
        bottom: auto !important;
    }

    .kh-msafe-left {
        left: var(--kh-msafe-gap, 14px) !important;
        right: auto !important;
    }

    .kh-msafe-right {
        right: var(--kh-msafe-gap, 14px) !important;
        left: auto !important;
    }

    /* WhatsApp becomes a compact safe mobile control. */
    .kh-msafe-whatsapp {
        width: var(--kh-msafe-size, 54px) !important;
        min-width: var(--kh-msafe-size, 54px) !important;
        max-width: var(--kh-msafe-size, 54px) !important;
        height: var(--kh-msafe-size, 54px) !important;
        min-height: var(--kh-msafe-size, 54px) !important;
        max-height: var(--kh-msafe-size, 54px) !important;
        padding: 0 !important;
        border-radius: 999px !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        line-height: 1 !important;
        font-size: 0 !important;
        white-space: nowrap !important;
    }

    .kh-msafe-whatsapp a,
    .kh-msafe-whatsapp button {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        border-radius: inherit !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        font-size: 0 !important;
        overflow: hidden !important;
    }

    .kh-msafe-whatsapp svg,
    .kh-msafe-whatsapp i,
    .kh-msafe-whatsapp img,
    .kh-msafe-whatsapp [class*="icon"] {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        font-size: 24px !important;
        line-height: 24px !important;
        display: block !important;
        margin: 0 !important;
    }

    /* Keep floating cart/exit controls finger-friendly but compact. */
    .kh-msafe-cart,
    .kh-msafe-close {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .kh-msafe-cart {
        max-width: 64px !important;
        max-height: 64px !important;
    }

    .kh-msafe-close {
        width: 46px !important;
        height: 46px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
    }

    /* Never let floating media or labels create horizontal scrolling. */
    .kh-msafe-managed img,
    .kh-msafe-managed svg,
    .kh-msafe-managed canvas {
        max-width: 100% !important;
    }
}