/* 详情页组件样式。
 *
 * .agent-price-display / .x-gift-* 逐条照抄参考站 daituai.cc 的
 * assets/user/css/item-agent-price.css（?x_gift=2），.api-cc-project-picker 两条
 * 照抄它的 assets/user/css/item-api-cc.css；末尾的 order:-1 是本项目补充：
 * 参考站的接码项目是插件注入在表单最前面，本站由 widget 渲染在表单末尾，
 * 用 flex order 把它提到最前（form.vstack 是 flex column）。
 *
 * 主题模板在 /data/themes（PVC）上，构建期改不了，所以样式文件挂在镜像的
 * 静态资源里，由 index_var() 补丁在 <head> 里引入。
 */

.agent-price-display {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: -6px 0 14px;
}

.agent-price-display[hidden] {
    display: none;
}

.agent-price-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-left: 2px solid var(--acg-primary);
    background: rgba(255, 255, 255, 0.35);
    color: var(--acg-text-muted);
    font-size: 13px;
    line-height: 1.4;
    user-select: text;
}

.agent-price-label,
.agent-price-value {
    white-space: nowrap;
}

.agent-price-value {
    color: #ff5c8e;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .agent-price-display {
        gap: 5px;
        margin-bottom: 12px;
    }

    .agent-price-row {
        padding: 2px 6px;
        font-size: 12px;
    }
}

.x-gift-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

.x-gift-check-button {
    min-width: 116px;
    min-height: 42px;
    border: 1px solid var(--acg-primary);
    border-radius: 6px;
    padding: 0 14px;
    background: var(--acg-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.x-gift-check-button i {
    margin-right: 6px;
}

.x-gift-check-button:disabled {
    cursor: wait;
    opacity: 0.7;
}

.x-gift-check-button.is-loading i {
    animation: x-gift-spin 0.9s linear infinite;
}

.x-gift-check-result {
    min-height: 20px;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
}

.x-gift-check-result.is-checking {
    color: var(--acg-text-muted);
}

.x-gift-check-result.is-success {
    color: #178f55;
}

.x-gift-check-result.is-error {
    color: #d73a49;
}

@keyframes x-gift-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 575.98px) {
    .x-gift-input-row {
        grid-template-columns: 1fr;
    }

    .x-gift-check-button {
        width: 100%;
    }
}

.api-cc-project-picker select {
    min-height: 42px;
}

.api-cc-project-picker option:disabled {
    color: #8a8f98;
}

/* 接码项目置顶：.vstack 是 flex column，order:-1 让它排在下单表单最前面 */
form.vstack > .api-cc-project-picker {
    order: -1;
}

/* ── 批发价卡片（照「购买弹窗」设计稿的绿系样式）─────────────────────────────
 * 由 item.js 的 _SetWholesaleMsg 按商品 config.wholesale 渲染，只在配了批发价的
 * 商品详情页出现；类名 bulk-price-* 独立命名，不碰站内任何既有选择器。 */
.bulk-price-card {
    margin-top: 14px;
    border: 1px solid #bfe8d0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.bulk-price-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #e9f8ef;
}

.bulk-price-title {
    font-size: 13px;
    font-weight: 800;
    color: #0f2f22;
}

.bulk-price-sub {
    font-size: 11px;
    color: #7a8494;
}

.bulk-price-table {
    width: 100%;
    border-collapse: collapse;
}

.bulk-price-table thead th {
    padding: 8px 12px;
    background: #fafbfc;
    color: #7a8494;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
}

.bulk-price-table tbody td {
    padding: 9px 12px;
    border-top: 1px solid #f0f2f5;
    color: #517462;
    font-size: 13px;
    text-align: left;
    vertical-align: middle;
}

.bulk-price-table tbody td b {
    color: #0f2f22;
    font-weight: 800;
}

.bulk-price-table tbody td.bulk-price-price {
    color: #16a34a;
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.bulk-price-save {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: #e9f8ef;
    color: #16a34a;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.bulk-price-save.is-flat {
    background: #f0f2f5;
    color: #7a8494;
}

.bulk-price-table tbody tr.active {
    background: #e9f8ef;
}

.bulk-price-table tbody tr.active td:first-child {
    box-shadow: inset 3px 0 0 #16a34a;
}

.bulk-price-cur {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    vertical-align: 1px;
}

/* ── 支付方式卡片（圆标 + 「推荐」徽章，照「购买弹窗」设计稿）───────────────
 * 只作用于商品详情页 .cash-pay 里的支付列表；用户中心充值页（.btn-pay）与
 * 后台页面不受影响。 */
.cash-pay .pay-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cash-pay .pay-list .pay {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid #cdeada;
    border-radius: 11px;
    background: #fff;
    color: #0f2f22;
    font-size: 12px;
    font-weight: 700;
}

.cash-pay .pay-list .pay:hover {
    border-color: #059669;
}

.cash-pay .pay-list .pay img {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    object-fit: cover;
}

.cash-pay .pay-list .pay .pay-mark {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 7px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.cash-pay .pay-list .pay .mark-wechat {
    background: #22c55e;
}

.cash-pay .pay-list .pay .mark-xlayer {
    background: #0f172a;
}

.cash-pay .pay-list .pay .mark-polygon {
    background: #8247e5;
}

.cash-pay .pay-list .pay .mark-trc20 {
    background: #eb0029;
}

.cash-pay .pay-list .pay em.pay-tag {
    font-style: normal;
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 9px;
    font-weight: 800;
}

/* 窄屏收尾（第 2 批追加）：≤576px 支付列表改单列，通道名的「推荐」徽章不拆字。
 * 桌面/平板上双列网格在窄屏会把「USDT（X Layer）」和徽章挤成两三行；这里让每行
 * 独占一列宽度，名称与徽章保持单行，与参考站截图一致。只影响 .cash-pay 支付区。 */
@media (max-width: 575.98px) {
    .cash-pay .pay-list {
        grid-template-columns: 1fr;
    }
}

.cash-pay .pay-list .pay em.pay-tag {
    white-space: nowrap;
}

.cash-pay .pay-list .pay > span:not(.pay-mark) {
    white-space: nowrap;
}