/*
 * Overrides the old mobile bottom tab bar (position:fixed; bottom:0) to sticky top.
 * Loaded after the Vite bundle so an apply without a fresh npm build still fixes mobile.
 * Harmless once public.css itself ships sticky.
 */
.camp-nav {
    position: sticky !important;
    top: 0 !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 40;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--color-rule);
    background-color: var(--color-paper);
    background-image: none;
}

.camp-tabs {
    justify-content: flex-start !important;
    gap: 0.25rem;
    overflow-x: auto;
    padding-block: 0.25rem;
    margin-inline: -0.25rem;
    padding-inline: 0 !important;
}

.camp-tabs > li {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

.camp-tab {
    flex-direction: row !important;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    gap: 0.375rem !important;
    min-height: 2.75rem !important;
    padding: 0 0.875rem 0 0.375rem !important;
    border-radius: 9999px;
    text-align: center;
}

.camp-tab-pill {
    width: 2rem !important;
    height: 2rem !important;
}

.camp-tab:hover {
    background-color: var(--color-wash);
}

.camp-tab:hover .camp-tab-pill {
    background-color: transparent !important;
}

.camp-tab[aria-current] {
    font-weight: 800;
    background-color: var(--color-brand) !important;
    color: #000000;
}

.camp-tab[aria-current]:hover {
    background-color: var(--color-brand) !important;
    color: #000000;
}

.camp-tab[aria-current] .camp-tab-pill {
    background-color: transparent !important;
    color: #000000;
}

body.has-tabbar {
    padding-bottom: 0 !important;
}

html:has(> body.has-tabbar) {
    scroll-padding-top: 4rem;
    scroll-padding-bottom: 0;
}