/* APPKIT_RUNTIME_NAVBAR_BUBBLE_HEIGHT_FIXED_FINAL_CSS */

html,
body {
    margin: 0 !important;
}

body.vk-theme-runtime-active.vk-theme-home-route,
body.vk-theme-runtime-active.vk-theme-home-route .vk-app,
body.vk-theme-runtime-active.vk-theme-home-route .vk-app-shell,
body.vk-theme-runtime-active.vk-theme-home-route .vk-shell,
body.vk-theme-runtime-active.vk-theme-home-route .vk-page,
body.vk-theme-runtime-active.vk-theme-home-route .vk-content,
body.vk-theme-runtime-active.vk-theme-home-route .vk-container,
body.vk-theme-runtime-active.vk-theme-home-route .vk-main,
body.vk-theme-runtime-active.vk-theme-home-route main,
body.vk-theme-runtime-active.vk-theme-home-route main.vk-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.vk-theme-runtime-active.vk-theme-home-route .vk-main,
body.vk-theme-runtime-active.vk-theme-home-route main.vk-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

body.vk-theme-runtime-active.vk-theme-home-route.vk-theme-hide-home-header .vk-header,
body.vk-theme-runtime-active.vk-theme-home-route.vk-theme-hide-home-header .vk-app-header,
body.vk-theme-runtime-active.vk-theme-home-route.vk-theme-hide-home-header header.vk-header {
    display: none !important;
}

#vkThemeRuntimeRoot,
.tpl-app,
.vk-theme-app,
.vk-template-app,
.theme-app {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#vkThemeRuntimeRoot {
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: var(--vk-bg, #f8fafc);
    color: var(--vk-text, #0f172a);
}

/* Pakai navbar theme builder saja, navbar runtime lama disembunyikan agar tidak dobel */
body.vk-theme-runtime-active .vk-bottom-nav:not(.vk-theme-rendered-navbar) {
    display: none !important;
}

/* Base navbar: full kanan-kiri, pendek, tidak membesar ke atas */
.vk-theme-rendered-navbar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    z-index: 2147482000 !important;

    width: 100% !important;
    max-width: 100% !important;
    height: calc(76px + env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
    max-height: none !important;

    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(var(--vk-navbar-count, 3), minmax(0, 1fr)) !important;
    align-items: end !important;
    gap: 4px !important;

    padding: 8px 16px calc(8px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;

    background: rgba(255,255,255,.96) !important;
    border-top: 1px solid rgba(148,163,184,.22) !important;
    box-shadow: 0 -12px 34px rgba(15,23,42,.14) !important;
    backdrop-filter: blur(18px) !important;
    border-radius: 0 !important;
}

.vk-theme-rendered-navbar a {
    position: relative !important;
    min-width: 0 !important;
    height: 58px !important;
    display: grid !important;
    justify-items: center !important;
    align-items: center !important;
    align-content: center !important;
    gap: 3px !important;

    text-decoration: none !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
}

.vk-theme-rendered-navbar a b {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;

    display: grid !important;
    place-items: center !important;
    border-radius: 13px !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 16px !important;
    line-height: 1 !important;
    transform: none !important;
    background: rgba(15,23,42,.06) !important;
    box-shadow: none !important;
}

.vk-theme-rendered-navbar a span {
    display: block !important;
    max-width: 92px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.vk-theme-rendered-navbar a.active {
    color: var(--vk-primary, #2563eb) !important;
}

/* Model rounded full bawah */
.vk-theme-rendered-navbar.theme-navbar-floating_pill,
.vk-theme-rendered-navbar.theme-navbar-pill_soft,
.vk-theme-rendered-navbar.theme-navbar-glass_bottom {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 28px 28px 0 0 !important;
}

/* Model 3: bubble tengah menonjol, navbar tetap pendek */
.vk-theme-rendered-navbar.theme-navbar-pill_center,
.vk-theme-rendered-navbar.theme-navbar-center_bubble {
    height: calc(78px + env(safe-area-inset-bottom)) !important;
    border-radius: 28px 28px 0 0 !important;
}

.vk-theme-rendered-navbar.theme-navbar-pill_center a.is-center-action,
.vk-theme-rendered-navbar.theme-navbar-center_bubble a.is-center-action {
    overflow: visible !important;
}

.vk-theme-rendered-navbar.theme-navbar-pill_center a.is-center-action b,
.vk-theme-rendered-navbar.theme-navbar-center_bubble a.is-center-action b {
    position: absolute !important;
    left: 50% !important;
    top: -48px !important;
    transform: translateX(-50%) !important;

    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;

    border-radius: 999px !important;
    background: linear-gradient(145deg, var(--vk-primary, #2563eb), var(--vk-secondary, #06b6d4)) !important;
    color: #fff !important;
    border: 10px solid var(--vk-bg, #f8fafc) !important;
    box-shadow: 0 24px 54px rgba(15,23,42,.30) !important;
    font-size: 28px !important;
}

.vk-theme-rendered-navbar.theme-navbar-pill_center a.is-center-action span,
.vk-theme-rendered-navbar.theme-navbar-center_bubble a.is-center-action span {
    margin-top: 36px !important;
}

/* Model 4: QR / Action Bubble Tengah lebih menonjol */
.vk-theme-rendered-navbar.theme-navbar-qr_center {
    height: calc(80px + env(safe-area-inset-bottom)) !important;
    border-radius: 28px 28px 0 0 !important;
}

.vk-theme-rendered-navbar.theme-navbar-qr_center a.is-center-action {
    overflow: visible !important;
}

.vk-theme-rendered-navbar.theme-navbar-qr_center a.is-center-action b {
    position: absolute !important;
    left: 50% !important;
    top: -58px !important;
    transform: translateX(-50%) !important;

    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    min-height: 84px !important;

    border-radius: 999px !important;
    background: var(--vk-accent, #f59e0b) !important;
    color: #fff !important;
    border: 11px solid var(--vk-bg, #f8fafc) !important;
    box-shadow: 0 28px 62px rgba(15,23,42,.34) !important;
    font-size: 32px !important;
}

.vk-theme-rendered-navbar.theme-navbar-qr_center a.is-center-action span {
    margin-top: 42px !important;
}

/* Model 5 / Classic / Solid Tabs: full bawah solid */
.vk-theme-rendered-navbar.theme-navbar-solid_red_dock,
.vk-theme-rendered-navbar.theme-navbar-solid_tabs,
.vk-theme-rendered-navbar.theme-navbar-classic {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: var(--vk-primary, #2563eb) !important;
}

.vk-theme-rendered-navbar.theme-navbar-solid_red_dock a,
.vk-theme-rendered-navbar.theme-navbar-solid_tabs a,
.vk-theme-rendered-navbar.theme-navbar-classic a {
    color: rgba(255,255,255,.84) !important;
}

.vk-theme-rendered-navbar.theme-navbar-solid_red_dock a.active,
.vk-theme-rendered-navbar.theme-navbar-solid_tabs a.active,
.vk-theme-rendered-navbar.theme-navbar-classic a.active {
    color: #fff !important;
}

.vk-theme-rendered-navbar.theme-navbar-solid_red_dock a b,
.vk-theme-rendered-navbar.theme-navbar-solid_tabs a b,
.vk-theme-rendered-navbar.theme-navbar-classic a b {
    background: rgba(255,255,255,.14) !important;
}

/* Model 6: Zipay curve full bawah, bubble kiri */
.vk-theme-rendered-navbar.theme-navbar-zipay_curve {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: var(--vk-primary, #2563eb) !important;
    padding-left: 104px !important;
}

.vk-theme-rendered-navbar.theme-navbar-zipay_curve a {
    color: rgba(255,255,255,.86) !important;
}

.vk-theme-rendered-navbar.theme-navbar-zipay_curve a.is-first b {
    position: fixed !important;
    left: 18px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;

    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    min-height: 78px !important;

    border-radius: 999px !important;
    background: var(--vk-primary, #2563eb) !important;
    color: #fff !important;
    border: 10px solid var(--vk-bg, #f8fafc) !important;
    box-shadow: 0 24px 54px rgba(15,23,42,.32) !important;
    font-size: 30px !important;
}

/* Clean Icons */
.vk-theme-rendered-navbar.theme-navbar-clean_icons a span {
    display: none !important;
}

/* APPKIT_STEP37A_LABEL_AND_ROUTE_FIX */
.vk-theme-rendered-navbar[data-label="0"] a span {
    display: none !important;
}

body.vk-theme-runtime-active:not(.vk-theme-home-route) .vk-app-shell > header.vk-header,
body.vk-theme-runtime-active:not(.vk-theme-home-route) .vk-app-shell > header.vk-page-header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}