/* 图标样式 */
.action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer; /* 显示点击光标 */
    fill: white !important; /* 默认白色 */
    background: none;
    border: none;
    padding: 0;
    pointer-events: auto !important; /* 确保图标可点击 */
    position: relative; /* 为伪元素定位 */
}

.action-icon svg {
    width: 24px;
    height: 24px;
}

/* 关注图标（星形） */
.follow2-btn.favourited {
    fill: #ffc107 !important; /* 黄色 */
}

/* 订阅图标（心形） */
.subscription-btn.subscribed {
    fill: #dc3545 !important; /* 红色 */
    cursor: default !important; /* 已订阅时显示默认光标 */
}

/* 打赏图标（礼物） */
.reward-btn {
    fill: white !important; /* 始终白色 */
}

/* 悬停提示文字 */
.action-icon:hover::after {
    content: attr(data-tooltip); /* 使用 data-tooltip 属性作为文字 */
    position: absolute;
    left: calc(100% + 8px); /* 显示在图标右侧，增加间距 */
    top: 50%;
    transform: translateY(-50%);
    background: #343a40; /* 深色背景 */
    color: white !important; /* 白色文字 */
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 1000; /* 确保在其他元素上方 */
    opacity: 1; /* 确保可见 */
    visibility: visible; /* 确保显示 */
}

/* 默认隐藏提示文字 */
.action-icon::after {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease; /* 平滑过渡 */
}