/*!
 * assets/user/css/index.css —— 前台页面样式（首页 / 列表 / 详情 / 订单 / 查询）
 */

/* ---------- 首页布局 ---------- */
.shop-layout { padding-top: 22px; }

.shop-hero { margin-bottom: 16px; }

.shop-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    color: var(--rs-muted);
    font-size: .85rem;
}

.shop-cats { margin-bottom: 16px; }

.item-message {
    grid-column: 1 / -1;
    padding: 46px 16px;
    text-align: center;
    color: var(--rs-muted);
}

/* ---------- 侧栏 ---------- */
.side-panel + .side-panel { margin-top: 16px; }

.uptime-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: .85rem;
    color: var(--rs-muted);
}

/* ---------- 商品详情 ---------- */
.item-head { display: flex; gap: 20px; flex-wrap: wrap; }
.item-head__cover {
    flex: 0 0 210px; max-width: 210px; height: 210px;
    border-radius: var(--rs-radius); background-size: cover; background-position: center;
    box-shadow: var(--rs-shadow-sm); cursor: zoom-in;
}
.item-head__main { flex: 1 1 320px; min-width: 260px; }
.item-head__title { font-size: 1.32rem; font-weight: 800; margin: 0 0 8px; letter-spacing: -.2px; }
.item-head__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.item-price {
    font-size: 2rem; font-weight: 800; color: var(--rs-accent);
    letter-spacing: -1px; line-height: 1.1; margin: 4px 0 14px;
}
.item-price .unit { font-size: 1rem; font-weight: 700; margin-right: 2px; }

.vstack { display: flex; flex-direction: column; gap: 15px; }
.vstack__row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.vstack__label { flex: 0 0 74px; font-size: .87rem; font-weight: 700; color: var(--rs-text-2); padding-top: 8px; }
.vstack__ctrl { flex: 1 1 240px; min-width: 200px; }

.checkout-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 16px 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--rs-primary) 10%, transparent), color-mix(in srgb, var(--rs-accent) 10%, transparent));
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius);
    margin-top: 4px;
}
.checkout-bar__sum { font-size: .88rem; color: var(--rs-muted); }
.checkout-bar__amount { font-size: 1.6rem; font-weight: 800; color: var(--rs-accent); letter-spacing: -.6px; }

/* 购买区下方的支付备注 */
.item-pay-note { margin-top: 14px; line-height: 1.75; overflow-wrap: anywhere; }

.detail-body { line-height: 1.85; color: var(--rs-text-2); font-size: .95rem; }
.detail-body p { margin: 0 0 10px; }
.detail-body img { max-width: 100%; border-radius: 12px; box-shadow: var(--rs-shadow-sm); margin: 6px 0; }
.detail-body a { font-weight: 600; }

/* ---------- 订单 / 支付 ---------- */
.order-status {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-radius: var(--rs-radius);
    font-weight: 700; font-size: .98rem;
    background: var(--rs-surface-2); border: 1px solid var(--rs-border);
}
.order-status--ok { background: color-mix(in srgb, var(--rs-success) 13%, transparent); border-color: color-mix(in srgb, var(--rs-success) 30%, transparent); color: var(--rs-success); }
.order-status--wait { background: color-mix(in srgb, var(--rs-warning) 13%, transparent); border-color: color-mix(in srgb, var(--rs-warning) 30%, transparent); color: #b45309; }
[data-theme="dark"] .order-status--wait { color: #fbbf24; }

.order-no {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700; letter-spacing: .4px; color: var(--rs-primary);
}

.card-box { border: 1px dashed var(--rs-border-strong); border-radius: var(--rs-radius); padding: 14px; background: var(--rs-surface-2); }

/* ---------- 查询页 ---------- */
.query-form { max-width: 520px; margin: 0 auto; }
.query-result { max-width: 720px; margin: 20px auto 0; }

/* ---------- 移动端 ---------- */
@media (max-width: 767.98px) {
    .item-head__cover { flex: 0 0 100%; max-width: 100%; height: 180px; }
    .item-price { font-size: 1.7rem; }
    .vstack__label { flex-basis: 100%; padding-top: 0; }
    .checkout-bar { flex-direction: column; align-items: stretch; text-align: center; }
    .checkout-bar .rs-btn { width: 100%; }
}