/* ============================================================
 * 红豆商城 · 全局交互反馈层（v46）
 * 入口页 + 商城的每一页都加载，且放在全部样式表最后。
 *
 * 1. 关掉移动端浏览器「点哪儿哪儿亮一块」的蓝色/灰色高亮（tap-highlight）
 *    —— 入口页 / 商城 / 后台统一，不再出现难看的蓝块
 * 2. 键盘可达性保留：只有鼠标/触摸点出来的焦点才不画外框（:focus-visible）
 * 3. Material 风格点击波纹 .hd-ripple（由 shop/assets/js/ui.js 生成元素）
 * 4. 全部可点元素统一的按压反馈：缩放 + 底色/亮度变化，一眼能看见
 * ============================================================ */

/* ---- 1. 点击高亮：全站关掉（入口页原来漏了这条，导致点按钮还冒蓝块） ---- */
html, body { -webkit-tap-highlight-color: transparent; }
* { -webkit-tap-highlight-color: transparent; }
body { -webkit-touch-callout: none; }
:focus:not(:focus-visible) { outline: none; }

/* ---- 2. 点击波纹：从手指/鼠标按下的那个点扩散 ----
 * 颜色与强度按场景分：浅底元素用「深色低透明度」，深底/主色元素用白色高一点的透明度。
 * 不透明度用「先保持、后衰减」——整段线性淡出的话，等圆圈长大时已经快透明了。
 * 通过 CSS 变量出参，宿主元素只需要覆盖 --rip-* 三个值。 */
.hd-ripple {
    position: absolute; border-radius: 50%; pointer-events: none;
    /* v53: 波纹默认用主色（朱砂），不再用灰黑的 currentColor —— 品牌感更强 */
    background: var(--rip-bg, var(--accent, currentColor));
    transform: scale(0);
    animation: hd-ripple-out .6s cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes hd-ripple-out {
    0%   { transform: scale(0);   opacity: var(--rip-op, .25); }
    55%  { transform: scale(.82); opacity: var(--rip-mid, .2); }
    100% { transform: scale(1);   opacity: 0; }
}
/* 深底元素（填充按钮 / 主色胶囊 / hero 按钮）上换白色波纹，亮一点才看得见。
 * 注意 nav-pill-accent 是「浅底主色字」，用默认深色波纹即可。 */
.btn-primary, .btn-gradient, .chip.is-primary, .isekai-hero-link {
    --rip-bg: #fff; --rip-op: .42; --rip-mid: .34;
}

/* ---- 3. 按压反馈：所有可点元素 ----
 * v47：品牌 logo、汉堡菜单、规格选择、数量加减、分享、支付方式、展开全文、
 * 登录/注册页签、会员中心快捷入口、hero 按钮 全部补齐（对应 ui.js 的选择器）。 */
.btn, .chip, .subcat, .nav-pill, .nav-icon-btn, .nav-toggle, .navbar-brand,
.hd-skin-fab, .hd-skin-item, .skin-menu__item, .layout-menu__item, .drawer-link,
.account-tabs button, .auth-tabs button, .amt-chip, .pay, .pay-method, .variant-item,
.change-num-sub, .change-num-add, .desc-more, .shared-button, .acc-quick__item,
.theme-seg__btn, .msg-item, [data-tab], .isekai-hero-link, .item-card, .link-card, .promo-banner {
    transition: transform .14s var(--ease, cubic-bezier(.22, .61, .36, 1)),
                background-color .14s var(--ease, cubic-bezier(.22, .61, .36, 1)),
                border-color .14s var(--ease, cubic-bezier(.22, .61, .36, 1)),
                box-shadow .14s var(--ease, cubic-bezier(.22, .61, .36, 1)),
                opacity .14s var(--ease, cubic-bezier(.22, .61, .36, 1));
}
.btn:active { transform: scale(.96) translateY(1px); filter: brightness(.94); }
.chip:active, .subcat:active, .nav-pill:active { transform: scale(.92); }
.nav-icon-btn:active, .nav-toggle:active, .hd-skin-fab:active, .hd-skin-item:active,
.drawer-link:active, .skin-menu__item:active, .layout-menu__item:active,
.account-tabs button:active, .auth-tabs button:active, .amt-chip:active, .pay:active,
.pay-method:active, .variant-item:active, .acc-quick__item:active { transform: scale(.94); }
.change-num-sub:active, .change-num-add:active, .shared-button:active { transform: scale(.9); }
.theme-seg__btn:active { transform: scale(.9); }
.desc-more:active { transform: scale(.97); }
.msg-item:active { transform: scale(.992); }
[data-tab]:active { transform: scale(.97); }
.navbar-brand:active, .isekai-hero-link:active { transform: scale(.96); }
.item-card:active, .link-card:active, .promo-banner:active { transform: scale(.98); }
/* v53: 按压反馈从「变个灰底」升级为「主色染色 + 边框点亮 + 阴影收紧」，
 * 松手回弹 —— 每类控件都有符合自己形态的明确反馈： */
/* 填充按钮：压暗 + 下沉 + 阴影收紧（物理按压感） */
.btn-primary:active, .btn-gradient:active {
    filter: brightness(.88);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .22);
}
/* 实心主色胶囊：保持实心、压暗一点，不再按成浅红 */
.chip.is-primary:active {
    background: var(--accent); border-color: var(--accent); color: #fff;
    filter: brightness(.88);
}
/* 描边/文字按钮：主色染色点亮 */
.btn-outline:active {
    background: var(--accent-soft); border-color: var(--accent);
    color: var(--accent-ink); box-shadow: none;
}
.btn-text:active, .btn-ghost:active { background: var(--accent-soft); color: var(--accent-ink); }
/* 浅底胶囊/规格：浅主色底 + 主色描边 */
.chip:active, .subcat:active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-ink);
}
/* 商品卡：主色描边代替灰底，按下像「被选中」 */
.item-card:active { background: var(--surface); border-color: var(--accent); }
.link-card:active { border-color: var(--card-color, var(--accent)); }
.promo-banner:active { border-color: var(--promo-color, var(--accent)); }
/* 桌面悬停：填充按钮微微上浮 + 主色泛光（松手/移开即回落） */
@media (hover: hover) {
    .btn-primary { transition: transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease), filter .18s var(--ease, ease); }
    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 38%, transparent);
    }
}
/* 图片类（不能装波纹子元素）：用透明度做按压反馈 */
.item-cover:active { opacity: .85; }
/* 行内文字链接（装不下波纹）：用变淡做反馈 */
.auth-guest a:active, .desc-scroll a:active, .footer a:active { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
    .hd-ripple { display: none; }
    .btn:active, .chip:active, .subcat:active, .nav-pill:active, .nav-icon-btn:active,
    .nav-toggle:active, .navbar-brand:active, .hd-skin-fab:active, .hd-skin-item:active,
    .drawer-link:active, .skin-menu__item:active, .layout-menu__item:active,
    .account-tabs button:active, .auth-tabs button:active, .item-card:active, .link-card:active,
    .promo-banner:active, .amt-chip:active, .pay:active, .pay-method:active, .variant-item:active,
    .change-num-sub:active, .change-num-add:active, .desc-more:active, .shared-button:active,
    .acc-quick__item:active, .isekai-hero-link:active, .theme-seg__btn:active { transform: none; }
}