.list-group{
    --bs-list-group-active-bg: #D0DCFB;
    --bs-list-group-active-color: #283F78;
}

/* 右侧抽屉响应式宽度 */
.responsive-drawer {
    width: 400px !important; /* PC端宽度 */
}
/* 导航栏样式 */
.navbar-nav{
    gap: 20px;
}

/* 手机端导航栏优化 */
@media (max-width: 767.98px) {
    .navbar-nav {
        gap: 0;
        padding-top: 1rem;
    }
    
    .navbar-nav .nav-item {
        text-align: center;
        border-bottom: 1px solid #e9ecef;
    }
    
    .navbar-nav .nav-item:last-child {
        border-bottom: none;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
    }
    .responsive-drawer {
        width: 280px !important;
    }
}

/* 导航栏选中状态样式 */
.navbar-nav .nav-link {
    position: relative;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 3px;
    background-color: #4581EB;
    border-radius: 1.5px 1.5px 0 0;
}

/* 悬停效果 */
.navbar-nav .nav-link:hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 3px;
    background-color: #4581EB;
    opacity: 0.5;
    border-radius: 1.5px 1.5px 0 0;
}

.navbar-nav .nav-link.active:hover::after {
    opacity: 1;
}

/* 手机端选中状态样式调整 */
@media (max-width: 767.98px) {
    .navbar-nav .nav-link.active::after,
    .navbar-nav .nav-link:hover::after {
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: 2px;
        border-radius: 0;
    }
}
#search{
    border-color: #D9D9D9;
    background-color: #F2F2F2;
    font-size: 14px;
}
@media (min-width: 769px) {
    #search {
        width: 50% !important;
    }
}
@media (max-width: 768px) {
    #search {
        width: 100% !important;
    }
}
@media (max-width: 576px) {
    .navbar .container{
        padding-left: 10px;
        padding-right: 10px;
    }
}
#search::placeholder{
    color: #AFAFAF;
    padding: 0 10px;
}
#productTabs{
    border-left: none;
    border-right: none;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
#productTabs .nav-item button{
    border: none;
    color: #999999;
    text-decoration: none;
    font-weight: normal;
}
#productTabs .nav-item .active{
    color: #24223E;
}