/* 头像选择*/
/* 头像选中时打钩图标样式*/
.check-icon {
    position: absolute;
    bottom: 3px; /* 钩子下边距位置 */
    right: 1px; /* 钩子右边距位置 */
    color: white; /* 钩子色彩 */
    background-color: #b35eea; /* 钩子背景色 */
    border-radius: 50%; /* 钩子形状 */
    padding: 1px; /* 钩子内边距 */
    font-size: 12px; /* 钩子大小 */
    display: none; /* 默认隐藏 */
}

/* 头像选择样式*/
.avatar-selection {
    display: flex ; /* 横向排列 */
    /*flex-direction: row ;*/
    flex-wrap: wrap; /* 换行 */
    gap: 10px; /* 间隔 */
    margin-top: 10px; /* 上边距 */
}

/* 头像选项样式*/
.avatar-option {
    position: relative; /* 为打钩图标定位做准备 */
    width: 60px;
    height: 60px;
    border: 2px solid transparent;
    border-radius: 50%;
    overflow: hidden; /* 溢出部分隐藏 */
    cursor: pointer; /* 鼠标样式 */
    transition: all 0.3s ease;
}

/* 鼠标悬停样式 */
.avatar-option:hover {
    border-color: #620bda; /* 鼠标悬停时边框色彩 */
    transform: scale(1.1); /* 鼠标悬停时缩放 */
}

/* 选中样式 */
.avatar-option.selected {
    border-color: #ea2001; /* 选中时内边框色彩 */
    box-shadow: 0 0 0 3px rgb(69, 27, 71); /* 阴影-选中时外边框色彩 */
}

.avatar-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-option.selected .check-icon {
    display: block; /* 头像选中时显示打钩 */
}