/* =========================================================================
   科米主题 Komi — 支付 / 付费内容样式
   ========================================================================= */

/* ---- 付费内容区块 ---- */
.komi-paid {
    margin: 28px 0;
    border-radius: var(--komi-radius);
    border: 1px solid var(--komi-border);
}
.komi-paid--locked {
    text-align: center;
    padding: 36px 24px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--komi-primary) 6%, transparent), var(--komi-surface));
}
.komi-paid__lock { font-size: 40px; }
.komi-paid__title { font-size: 18px; font-weight: 700; margin: 8px 0; }
.komi-paid__price { font-size: 26px; font-weight: 800; color: var(--komi-primary); margin-bottom: 16px; }
.komi-paid__msg { margin-top: 10px; font-size: 14px; color: var(--komi-text-muted); }

.komi-paid--unlocked {
    padding: 20px 24px;
    background: color-mix(in srgb, #16a34a 7%, var(--komi-surface));
    border-color: color-mix(in srgb, #16a34a 30%, var(--komi-border));
}
.komi-paid__label {
    font-size: 13px; font-weight: 600; color: #16a34a; margin-bottom: 10px;
}
.komi-paid__content { line-height: 1.85; }

/* ---- 充值 ---- */
.komi-recharge__presets { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.komi-amount {
    border: 1px solid var(--komi-border); background: var(--komi-surface);
    color: var(--komi-text); border-radius: var(--komi-radius-sm);
    padding: 12px 22px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.komi-amount.is-active { border-color: var(--komi-primary); color: var(--komi-primary); background: color-mix(in srgb, var(--komi-primary) 10%, transparent); }
.komi-recharge__custom { display: flex; flex-direction: column; gap: 6px; max-width: 260px; margin-bottom: 16px; }
.komi-recharge__custom input {
    padding: 10px 14px; border: 1px solid var(--komi-border);
    border-radius: var(--komi-radius-sm); background: var(--komi-surface); color: var(--komi-text);
}
.komi-recharge__gateways { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.komi-recharge__amount { width: 100%; font-weight: 700; margin-bottom: 4px; }

/* ---- 订单状态 ---- */
.komi-status { font-size: 12px; padding: 2px 10px; border-radius: 999px; }
.komi-status--paid { background: color-mix(in srgb, #16a34a 15%, transparent); color: #16a34a; }
.komi-status--pending { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.komi-status--closed,
.komi-status--refunded { background: var(--komi-bg); color: var(--komi-text-muted); }