/**
 * 医院卡片收藏按钮 + 小黑卡（B9 批）
 *
 * 规范来源：`.ai/CONVENTIONS.md` §性能红线 + `.ai/FRONTEND-ARCHIVE.md` 第 3.4 节（卡片）。
 * 只服务「医院卡片上那颗按钮」，所以跟着卡片页的资源一起走
 * （入队见 includes/class-template-loader.php 的 enqueue_archive_assets()）。
 *
 * 回滚口径：本批的前端只落在**这一个文件**里（按钮 / +1 动画 / 小黑卡 / 图区定位上下文），
 * 删掉本文件再去掉入队那两段，一行残留都不留 —— 所以连 `.unithmemd-card { position }`
 * 这条（本来更像 archive.css 的东西）也放在这里。
 */

/* -------------------------------------------------------------------------
 * 1. 定位上下文：按钮要绝对定位到「图区右上角」，父容器必须是 position: relative
 *    （`.unithmemd-card` 原本是 static；图区是卡片第一行，所以卡片右上角 = 图区右上角）
 * ---------------------------------------------------------------------- */
.unithmemd-card {
    position: relative;
}

/* -------------------------------------------------------------------------
 * 2. 按钮本体（压在图片上的小胶囊）
 * ---------------------------------------------------------------------- */
.unithmemd-fav-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 0;
    border-radius: 20px;
    color: #6b7280;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease;
    z-index: 5; /* 图区是 relative 定位的兄弟节点 ⇒ 按钮要显式压上去 */
}

.unithmemd-fav-btn:hover {
    color: #111;
}

.unithmemd-fav-btn:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

/* 已收藏：实心红（心形与数字一起变色） */
.unithmemd-fav-btn.is-favorited {
    color: #e11d48;
}

/* 请求在飞：淡一点，顺便说明「点了，等结果」，连点也不会有第二份反馈 */
.unithmemd-fav-btn[aria-busy="true"] {
    opacity: 0.6;
    cursor: default;
}

.unithmemd-fav-btn__icon {
    display: inline-flex;
}

.unithmemd-fav-btn__icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

/*
 * 空心 / 实心互斥靠 `hidden` 属性切换（JS 只改 hidden）。
 * 必须显式补这两条：上面 `.unithmemd-fav-btn__icon svg { display: block }` 是作者样式，
 * 会盖掉浏览器默认的 `[hidden] { display: none }` ⇒ 不补的话两个心会同时出现
 * （B8.2 的 `.unithmemd-quote-login-link` 就是踩在这条上，这里提前堵住）。
 */
.unithmemd-fav-btn__heart-empty[hidden],
.unithmemd-fav-btn__heart-filled[hidden] {
    display: none;
}

.unithmemd-fav-btn__count {
    font-variant-numeric: tabular-nums; /* 9 → 10 时数字不跳宽 */
}

/* -------------------------------------------------------------------------
 * 3. +1 动画（只在「变成已收藏」时飞一次）
 * ---------------------------------------------------------------------- */
.unithmemd-fav-btn__pop {
    position: absolute;
    top: -8px;
    right: 0;
    color: #e11d48;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    animation: unithmemd-fav-pop 600ms ease-out forwards;
}

@keyframes unithmemd-fav-pop {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-24px);
        opacity: 0;
    }
}

/* -------------------------------------------------------------------------
 * 4. 小黑卡（顶部居中，2 秒后由 JS 移除）
 *    position: fixed + 挂在 body 上 ⇒ 不受卡片 `overflow: hidden` 与主题容器影响。
 * ---------------------------------------------------------------------- */
.unithmemd-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    box-sizing: border-box;
    background: #111;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    pointer-events: none; /* 它只是通知：下面那一层照旧可点 */
    z-index: 99999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    animation: unithmemd-toast-in 200ms ease-out;
}

@keyframes unithmemd-toast-in {
    0% {
        transform: translate(-50%, -8px);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}