#navbar-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}
.nav-menu-icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.3s ease;
}

/* 导航图标默认和hover状态的背景图片 */
.nav-icon-home {
    background-image: url('../img/home.png');
}

.nav-item:hover .nav-icon-home, .nav-item.active .nav-icon-home {
    background-image: url('../img/home-hover.png');
}

.nav-icon-search {
    background-image: url('../img/search.png');
}

.nav-item:hover .nav-icon-search, .nav-item.active .nav-icon-search {
    background-image: url('../img/search-hover.png');
}

.nav-icon-booking {
    background-image: url('../img/booking.png');
}

.nav-item:hover .nav-icon-booking, .nav-item.active .nav-icon-booking {
    background-image: url('../img/booking-hover.png');
}

.nav-icon-chat {
    background-image: url('../img/chat.png');
}

.nav-item:hover .nav-icon-chat, .nav-item.active .nav-icon-chat {
    background-image: url('../img/chat-hover.png');
}

.nav-icon-mypage {
    background-image: url('../img/mypage.png');
}

.nav-item:hover .nav-icon-mypage, .nav-item.active .nav-icon-mypage {
    background-image: url('../img/mypage-hover.png');
}

.active span {
    color: rgb(249,115,22);
}

.dropdown-menu .active {
    color: rgb(240, 114, 56);
}
.dropdown-menu-icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.8rem;
    background-size: cover;
    transition: all 0.3s ease;
}
.dropdown-menu-icon-setting {
    background-image: url('../img/setting.png');
}
.dropdown-menu-icon-feedback {
    background-image: url('../img/feedback.png');
}
.dropdown-menu-icon-logout {
    background-image: url('../img/logout.png');
}
.dropdown-menu li:hover .dropdown-menu-icon-setting, .dropdown-menu li.active .dropdown-menu-icon-setting {
    background-image: url('../img/setting-hover.png');
}
.dropdown-menu li:hover .dropdown-menu-icon-feedback, .dropdown-menu li.active .dropdown-menu-icon-feedback {
    background-image: url('../img/feedback-hover.png');
}
.dropdown-menu li:hover .dropdown-menu-icon-logout, .dropdown-menu li.active .dropdown-menu-icon-logout {
    background-image: url('../img/logout-hover.png');
}

/* 为移动设备页面内容添加底部间距，避免被导航栏遮挡 */
@media (max-width: 767px) {
    body {
        padding-bottom: 3.8rem !important;
    }
}