/* 收藏 + 分享 通用组件样式：独立文件，供各页面复用 */

/* ===== 收藏/分享按钮附属 tip 气泡：挂在所点按钮正上方，带小箭头 ===== */
.fx-tip {
    position: absolute;
    bottom: calc(100% + .55rem);   /* 按钮上方留出箭头间距 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    white-space: nowrap;
    padding: .4rem .75rem;
    border-radius: .5rem;
    font-size: .8125rem;
    /* Token 驱动：亮色 = 深底浅字，暗色 = 浅底深字，自动适配明暗主题 */
    color: var(--bs-body-bg);
    background: var(--bs-emphasis-color);
    box-shadow: var(--bs-box-shadow-sm);
    pointer-events: none;   /* 纯提示，不拦截鼠标 */
}
.fx-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: .3rem solid transparent;
    border-top-color: var(--bs-emphasis-color);   /* 与气泡同色的向下小箭头 */
}
.fx-tip-enter-active, .fx-tip-leave-active {
    transition: opacity .2s ease, transform .2s ease;
}
.fx-tip-enter-from, .fx-tip-leave-to {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);   /* 从按钮方向浮现 */
}

/* ===== 收藏/分享按钮配色：统一的品牌淡蓝 tonal（次级行动组，主 CTA 让位给页面的渐变按钮） ===== */
.fx-btn-tonal {
    --bs-btn-color: var(--app-tag-text);            /* 品牌色文字 */
    --bs-btn-bg: var(--app-tag-bg);                 /* 淡蓝调性底，明暗主题自适配 */
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-white);          /* 悬停反转为品牌实底 */
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: transparent;
    --bs-btn-font-weight: 600;
}

/* ===== 收藏/分享按钮统一悬停特效：同样的上浮 + 中性柔影，动效语言一致 ===== */
.fx-btn-hover {
    transition: transform .2s ease, box-shadow .2s ease;
}
.fx-btn-hover:hover,
.fx-btn-hover:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 .35rem .9rem rgba(2, 6, 23, .15);
}
.fx-btn-hover:active {
    /* 按下回落 */
    transform: translateY(0);
    box-shadow: none;
}