/* Shared bottom navigation - used by every logged-in page via includes/bottom_nav.php
   Sizes measured from the reference (1080px-wide screenshot = 390 css px, 1 css px = 2.769 screenshot px):
   bar height 59px, centre button 53px, notch radius 32px, icons 31px, labels 12px. */
.bottom-nav-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px;
    height: calc(59px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 59px;
    align-items: start;
    background: transparent;
    z-index: 95;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* white bar with the round notch; the soft lavender shadow follows the notch */
.nav-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    pointer-events: none;
    filter: drop-shadow(0 -1px 5px rgba(112, 112, 200, .2));
}
.nav-bg-l, .nav-bg-r { flex: 1 1 0; height: 100%; background: #fff; }
.nav-bg-l { margin-right: -1px; border-top-left-radius: 14px; }
.nav-bg-r { margin-left: -1px; border-top-right-radius: 14px; }
.nav-bg-c { flex: none; display: block; position: relative; z-index: 1; }

.nav-tab-item {
    position: relative;
    z-index: 2;
    height: 59px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4.2px;
    padding-top: 8.6px;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    --tab-stroke: #767f96;
    --tab-accent: #d6d9e3;
    color: #767f96;
}
.nav-tab-item.active {
    --tab-stroke: #ec5a5a;
    --tab-accent: #ffd0d0;
    color: #ec5a5a;
}
.nav-tab-svg { width: 28px; height: 28px; display: block; flex: none; pointer-events: none; }
.nav-tab-label { font-size: 12px; font-weight: 500; line-height: 13px; letter-spacing: .4px; white-space: nowrap; }

.nav-tab-promotion {
    position: relative;
    z-index: 3;
    height: 59px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 40.8px;
    text-decoration: none;
    color: #767f96;
    outline: none;
}
.nav-promo-button {
    position: absolute;
    top: -22.7px;
    left: 50%;
    width: 53px;
    height: 53px;
    margin-left: -26.5px;
    border-radius: 50%;
    background: linear-gradient(180deg, #f95a5a 0%, #ff9f93 100%);
    box-shadow: 0 0 0 1.4px #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: transform .15s ease;
}
.nav-promo-button svg { width: 100%; height: 100%; display: block; }
.nav-tab-promotion:active .nav-promo-button { transform: scale(.94); }
.promo-label { font-size: 12px; font-weight: 500; line-height: 13px; letter-spacing: .4px; white-space: nowrap; }
.nav-tab-promotion.active .promo-label { color: #ec5a5a; }