/**
 * Xmoney_UnitRate — 列表卡片 + PDP 展示样式
 * 规范：xm- 前缀强制；移动优先（375px 基准）；8pt 网格。
 * 任务ID：2026091201
 *
 * 20260913-FE-LISTING-01（宋董拍板）：卡片 5 行（价格/单位金额/汇率/银盾/加购）
 * 垂直节奏统一 5px —— 对齐 Luma 原生「标题↔评价」间距（@indent__xs = 5px，
 * _listings.less .product-item-name）。5px 为 8pt 网格例外（§1.3.1 ≤10% 例外条款），
 * 与主题 _overrides.less 同任务块的 .price-box 覆写配套；价格框下方间距由本块
 * margin-bottom 5px 与 .xm-badge-list margin 共同构成。
 *
 * 2026091301（宋董拍板）：列表卡片追加「可供金额」行；PDP 卡片移除单位金额行，
 * 构成 = 汇率行 + 可供金额行。
 *
 * 20260913-FE-SPACING-12（宋董拍板 2026-09-13 下午）：卡片行距 5px → 12px，
 * 取代 20260913-FE-LISTING-01 的 5px 统一节奏（@indent__xs 对齐裁决作废）。
 * 影响：三行信息组内行距、信息组↔银盾间距；银盾上下边距在 badge.css 同步调整。
 *
 * 20260914-FE-UNITRATE-TIP（宋董拍板 2026-09-14）：定价汇率行追加纯 CSS tooltip。
 * 触发器 = <button> + SVG info 图标（禁 Emoji）；:hover + :focus 双通道，移动端 tap = focus，
 * 零 JS 依赖（无 requirejs 时序/生产模式合并 JS 风险）。气泡相对 .xm-listing-rate 定位，
 * left:0/right:0 宽度恒等于卡片宽 —— 任何栅格列宽下均无水平溢出，免定位计算。
 */

/* ---- 列表卡片 ---- */
.xm-listing-unitrate {
    margin: 0 0 12px;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #8a8a8a; /* 标签弱化，数值单独提色 */
}

.xm-listing-unitrate > div + div {
    margin-top: 12px; /* 单位金额 ↔ 汇率 ↔ 可供 同组行距，与全卡节奏一致 */
}

.xm-listing-unit-amount-value {
    font-weight: 600;
    color: #333;
}

.xm-listing-rate {
    position: relative; /* tooltip 气泡定位锚点（20260914-FE-UNITRATE-TIP） */
    color: #1979c3;
}

.xm-listing-rate-value {
    font-weight: 600;
}

/* 可供金额行（2026091301）：数值提色规则与单位金额行一致，节奏继承 > div + div 的 5px */
.xm-listing-available-value {
    font-weight: 600;
    color: #333;
}

/* ---- 定价汇率 tooltip（20260914-FE-UNITRATE-TIP，纯 CSS 零 JS） ---- */
.xm-rate-tip-trigger {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    padding: 2px;
    border: 0;
    background: none;
    color: #1979c3; /* 与定价汇率行同色 */
    cursor: pointer;
    vertical-align: middle;
}

.xm-rate-tip-icon {
    display: block;
}

/* 气泡相对 .xm-listing-rate 定位：left/right 0 = 恒等于卡片宽，无水平溢出 */
.xm-rate-tip-bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 20;
    padding: 8px 12px;
    border-radius: 4px;
    background: #2b2b2b;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    white-space: normal;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
    pointer-events: none; /* 不遮挡上方价格框/下方加购区 */
}

/* 小三角：靠右对齐触发器（触发器位于行尾） */
.xm-rate-tip-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 8px;
    border: 5px solid transparent;
    border-top-color: #2b2b2b;
}

.xm-rate-tip-trigger:hover .xm-rate-tip-bubble,
.xm-rate-tip-trigger:focus .xm-rate-tip-bubble {
    opacity: 1;
    visibility: visible;
}

/* ---- PDP ---- */
.xm-pdp-unitrate {
    margin: 8px 0 16px;
    padding: 8px 16px;
    background: #f5f5f5;
    border-radius: 4px;
    font-size: 1.4rem;
    line-height: 1.8;
}

.xm-pdp-unit-amount-label,
.xm-pdp-rate-label,
.xm-pdp-available-label {
    color: #575757;
}

.xm-pdp-unit-amount-value {
    font-weight: 600;
}

.xm-pdp-rate-value {
    font-weight: 700;
    color: #1979c3;
}

/* 可供金额行（2026091301）：PDP 卡片 = 汇率行 + 可供金额行（单位金额行已按拍板移除） */
.xm-pdp-available-value {
    font-weight: 600;
}

/* ---- 桌面端（≥ 768px） ---- */
@media (min-width: 768px) {
    .xm-listing-unitrate {
        font-size: 1.3rem;
    }

    .xm-pdp-unitrate {
        display: inline-block;
        margin: 8px 0;
    }
}