/* Premium Bottom Navigation Dock */

.bnav {
    border-top: none !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -4px 24px rgba(11, 61, 110, 0.08) !important;
    border-radius: 24px 24px 0 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    padding-top: 8px !important;
}

.bnav-btn {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* Base icon state */
.bnav-btn i {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.15rem;
}

/* Active State Enhancements */
.bnav-btn.active {
    color: var(--em-deep) !important;
}

.bnav-btn.active i {
    transform: translateY(-2px) scale(1.1);
    color: var(--em-deep);
}

.bnav-btn.active span {
    font-weight: 800;
    transform: translateY(2px);
}

/* Active Bubble Background */
.bnav-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 44px;
    height: 44px;
    background: var(--em-glow);
    border-radius: 50%;
    z-index: -1;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
}

.bnav-btn.active::before {
    transform: translate(-50%, -60%) scale(1);
    opacity: 1;
}

/* Fix active dot indicator */
.bnav-btn::after {
    display: none !important; /* Hide old dot indicator if exists */
}

/* Dark mode adjustments for bnav */
html.dark .bnav {
    background: rgba(30, 41, 59, 0.95) !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4) !important;
}

html.dark .bnav-btn.active {
    color: var(--em) !important;
}

html.dark .bnav-btn.active i {
    color: var(--em);
}

html.dark .bnav-btn::before {
    background: rgba(56, 189, 248, 0.15);
}