/* 移动端徽章显示样式 */

/* 移动端底部导航栏用户头像样式 */
.m-navbar .mobile-user-avatar {
    position: relative;
}

.m-navbar .mobile-user-avatar .avatar-container {
    position: relative;
    display: inline-block;
    margin-bottom: 2px;
}

.m-navbar .mobile-user-avatar .mobile-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 移动端SVIP徽章样式 */
.m-navbar .mobile-user-avatar .svip-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #fff;
    z-index: 1;
}

/* 移动端用户中心头像徽章样式 */
.d-block.d-lg-none .avatar {
    position: relative;
    display: inline-block;
}

.d-block.d-lg-none .avatar .svip-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(25%, 25%);
    z-index: 1;
}

/* 移动端响应式调整 */
@media (max-width: 768px) {
    /* 确保移动端头像和徽章正确显示 */
    .avatar .svip-badge {
        width: 20px;
        height: 20px;
        border: 2px solid #fff;
    }
    
    /* 移动端底部导航栏徽章调整 */
    .m-navbar .mobile-user-avatar .svip-badge {
        width: 10px;
        height: 10px;
        border: 1px solid #fff;
    }
    
    /* 移动端用户中心头像大小调整 */
    .d-block.d-lg-none .avatar img {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    /* 小屏幕设备进一步调整 */
    .m-navbar .mobile-user-avatar .mobile-avatar {
        width: 20px;
        height: 20px;
    }
    
    .m-navbar .mobile-user-avatar .svip-badge {
        width: 8px;
        height: 8px;
    }
}

/* 个人信息页面勋章显示样式 */
.card-body .exclusive-badge,
.card-body .exclusive-badge img,
.card-body .me-3.exclusive-badge,
.card-body .me-3.exclusive-badge img {
    max-width: 24px;
    max-height: 24px;
    width: auto;
    height: auto;
}

/* 移动端个人信息页面勋章样式优化 */
@media (max-width: 768px) {
    .card-body .exclusive-badge,
    .card-body .exclusive-badge img,
    .card-body .me-3.exclusive-badge,
    .card-body .me-3.exclusive-badge img {
        max-width: 20px;
        max-height: 20px;
    }
    
    /* 勋章容器样式调整 */
    .card-body .d-flex.align-items-center {
        flex-wrap: wrap;
    }
    
    .card-body .d-flex.align-items-center .me-3 {
        margin-right: 0.75rem !important;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .card-body .exclusive-badge,
    .card-body .exclusive-badge img,
    .card-body .me-3.exclusive-badge,
    .card-body .me-3.exclusive-badge img {
        max-width: 18px;
        max-height: 18px;
    }
}

/* 通用专属勋章样式 */
.exclusive-badge {
    max-width: 24px;
    max-height: 24px;
    width: auto;
    height: auto;
    border-radius: 4px;
    object-fit: contain;
}

/* 头像旁边的专属勋章样式 */
.avatar-badge.exclusive-badge {
    max-width: 20px;
    max-height: 20px;
    margin-left: 4px;
    vertical-align: middle;
}

/* 移动端头像旁边的专属勋章 */
@media (max-width: 768px) {
    .avatar-badge.exclusive-badge {
        max-width: 16px;
        max-height: 16px;
        margin-left: 2px;
    }
}