/* ============================================================
 * LXMall v180.css（v1.8.0 营销与增值组件 · 源文件）
 * 构建：python3 scripts/build_assets.py → v180.min.css
 * 包含：首页营销区块（秒杀/拼团/领券/满减/预售）、倒计时、
 *       GEO 横幅、幻灯、收银台营销行、沙箱收银台
 * ============================================================ */

/* ---------- 首页营销容器 ---------- */
.wm-marketing { display: grid; gap: 1.6rem; }

.wm-mkt-section {
    background: var(--ftm-surface, #fff);
    border: 1px solid var(--ftm-border, #e8eaf0);
    border-radius: 16px;
    padding: 1.15rem 1.25rem 1.3rem;
    box-shadow: var(--ftm-shadow-1, 0 1px 8px rgba(16,19,34,.05));
}

.wm-mkt-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.wm-mkt-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--ftm-text, #1f2333);
    letter-spacing: .01em;
}

.wm-mkt-icon { width: 27px; height: 27px; flex: 0 0 auto; }

.wm-mkt-more {
    margin-left: auto;
    font-size: .85rem;
    color: var(--ftm-primary, #4f46e5);
    font-weight: 600;
}
.wm-mkt-more:hover { color: var(--ftm-primary-dark, #4338ca); }

/* ---------- 倒计时（v1.8.2：黑色数码块降低红色面积，保留红色标签提示紧迫） ---------- */
.wm-countdown {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(225,45,39,.06);
    border: 1px solid rgba(225,45,39,.22);
    border-radius: 999px;
    padding: .28rem .8rem;
}
.wm-cd-label { font-size: .76rem; color: var(--ftm-urgent, #e11d2f); font-weight: 600; }
.wm-cd-box {
    min-width: 30px; text-align: center;
    background: #1f2333; color: #fff;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 7px; padding: .16rem .3rem;
    font-size: .82rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.wm-countdown i { color: var(--ftm-urgent, #e11d2f); font-style: normal; font-weight: 700; }

/* ---------- 营销商品卡（秒杀/拼团/预售共用骨架） ---------- */
.wm-mkt-card {
    display: flex;
    gap: .85rem;
    background: var(--ftm-surface, #fff);
    border: 1px solid var(--ftm-border, #e8eaf0);
    border-radius: 13px;
    padding: .65rem;
    height: 100%;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.wm-mkt-card:hover {
    box-shadow: var(--ftm-shadow-2, 0 12px 28px rgba(16,19,34,.09));
    transform: translateY(-3px);
    border-color: transparent;
    color: inherit;
}

.wm-mkt-thumb {
    position: relative;
    width: 108px;
    height: 108px;
    flex: 0 0 auto;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ftm-surface-2, #f8fafc);
}
.wm-mkt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wm-mkt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: .1rem .15rem; }
.wm-mkt-name { font-weight: 600; font-size: .88rem; color: var(--ftm-text, #1f2333); }

.wm-seckill-off {
    position: absolute; top: 6px; left: 6px;
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: #fff; font-size: .72rem; font-weight: 700;
    border-radius: 7px; padding: .16rem .45rem;
    box-shadow: 0 2px 8px rgba(225,29,72,.35);
}
.wm-seckill-prices { display: flex; align-items: baseline; gap: .45rem; margin-top: .3rem; flex-wrap: wrap; }
.wm-seckill-price { color: var(--ftm-urgent, #e11d2f); font-weight: 800; font-size: 1.06rem; font-variant-numeric: tabular-nums; }
.wm-seckill-origin { color: var(--ftm-text-3, #9aa3b5); font-size: .76rem; }

.wm-seckill-stock { margin-top: auto; }
.wm-seckill-stock .progress { height: 6px; border-radius: 4px; background: rgba(225,45,39,.14); }
.wm-seckill-stock small { color: var(--ftm-text-3, #9aa3b5); font-size: .72rem; }

.wm-gbuy-tag {
    position: absolute; top: 6px; left: 6px;
    background: linear-gradient(135deg, #6366f1, #4338ca);
    color: #fff; font-size: .72rem; font-weight: 700;
    border-radius: 7px; padding: .16rem .45rem;
    box-shadow: 0 2px 8px rgba(67,56,202,.4);
}
.wm-gbuy-prices { display: flex; align-items: baseline; gap: .45rem; margin-top: .3rem; flex-wrap: wrap; }
.wm-gbuy-price { color: var(--ftm-primary, #4f46e5); font-weight: 800; font-size: 1.06rem; font-variant-numeric: tabular-nums; }
.wm-gbuy-origin { color: var(--ftm-text-3, #9aa3b5); font-size: .76rem; }
.wm-gbuy-save {
    background: rgba(79,70,229,.1); color: var(--ftm-primary-dark, #4338ca);
    font-size: .7rem; font-weight: 700; border-radius: 6px; padding: .12rem .4rem;
}

/* ---------- 预售卡 ---------- */
.wm-presale-tag {
    position: absolute; top: 6px; left: 6px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff; font-size: .72rem; font-weight: 700;
    border-radius: 7px; padding: .16rem .45rem;
    box-shadow: 0 2px 8px rgba(217,119,6,.4);
}
.wm-presale-prices { display: flex; align-items: baseline; gap: .5rem; margin-top: .3rem; flex-wrap: wrap; }
.wm-presale-deposit { color: #d97706; font-weight: 800; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.wm-presale-full { color: var(--ftm-text-3, #9aa3b5); font-size: .76rem; }
.wm-presale-window { margin-top: auto; font-size: .72rem; color: var(--ftm-text-2, #5b6478); }
.wm-presale-window .bi { color: #d97706; }

/* ---------- 满减横幅（v1.8.2：绿色 → 品牌色系，与主色和谐） ---------- */
.wm-manjian-strip {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    background: linear-gradient(120deg, rgba(79,70,229,.06), rgba(14,165,233,.05));
    border: 1px dashed rgba(79,70,229,.32);
    border-radius: 13px;
    padding: .85rem 1.1rem;
}
.wm-manjian-strip .wm-mk-strip-title {
    display: inline-flex; align-items: center; gap: .45rem;
    font-weight: 800; color: var(--ftm-primary-dark, #4338ca); font-size: 1rem;
    white-space: nowrap;
}
.wm-mj-chip {
    display: inline-flex; align-items: center;
    background: var(--ftm-surface, #fff);
    border: 1px solid rgba(79,70,229,.28);
    color: var(--ftm-primary-dark, #4338ca);
    border-radius: 999px;
    padding: .3rem .85rem;
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
}
.wm-mj-chip b { font-size: .95rem; }

/* ---------- 优惠券卡（v1.8.2：降饱和 —— 价值区淡雅品牌色，领取按钮为唯一强调） ---------- */
.wm-coupon-card {
    display: flex;
    align-items: stretch;
    background: var(--ftm-surface, #fff);
    border: 1px solid var(--ftm-border, #e8eaf0);
    border-radius: 13px;
    overflow: hidden;
    height: 100%;
    transition: box-shadow .2s ease, transform .2s ease;
    position: relative;
}
.wm-coupon-card::before,
.wm-coupon-card::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    background: var(--ftm-bg, #f5f6fa);
    border: 1px solid var(--ftm-border, #e8eaf0);
    border-radius: 50%;
    left: 118px;
    z-index: 1;
}
.wm-coupon-card::before { top: -8px; border-top: 0; }
.wm-coupon-card::after { bottom: -8px; border-bottom: 0; }

.wm-coupon-value {
    flex: 0 0 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, rgba(79,70,229,.10), rgba(124,58,237,.16));
    color: var(--ftm-primary-dark, #4338ca);
    border-right: 1px dashed rgba(79,70,229,.30);
    padding: .9rem .5rem;
}
.wm-coupon-value b { font-size: 1.55rem; font-weight: 800; line-height: 1; }
.wm-coupon-value small { font-size: .68rem; opacity: .75; letter-spacing: .08em; margin-top: .2rem; }

.wm-coupon-info { flex: 1; min-width: 0; padding: .8rem .9rem; display: flex; flex-direction: column; justify-content: center; }
.wm-coupon-name { font-weight: 700; font-size: .9rem; color: var(--ftm-text, #1f2333); }
.wm-coupon-cond { color: var(--ftm-text-3, #9aa3b5); font-size: .76rem; margin-top: .25rem; }

.wm-coupon-btn {
    align-self: center;
    margin-right: .85rem;
    background: var(--ftm-primary-grad, linear-gradient(135deg, #6366f1, #4f46e5 55%, #7c3aed));
    color: #fff;
    border-radius: 999px;
    padding: .42rem 1.05rem;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    transition: filter .15s ease, transform .15s ease;
    box-shadow: 0 3px 10px rgba(79,70,229,.28);
}
.wm-coupon-btn:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.wm-coupon-btn.claimed { background: var(--ftm-border, #e8eaf0); color: var(--ftm-text-3, #9aa3b5); pointer-events: none; }

/* ---------- 收银台营销行 ---------- */
.wm-checkout-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.wm-ct {
    display: inline-flex; align-items: center; gap: .3rem;
    border-radius: 7px;
    padding: .28rem .6rem;
    font-size: .76rem;
    font-weight: 600;
}
.wm-ct-seckill { background: rgba(225,45,39,.09); color: var(--ftm-urgent, #c81e1e); }
.wm-ct-group   { background: rgba(79,70,229,.09); color: var(--ftm-primary-dark, #4338ca); }
.wm-ct-coupon  { background: rgba(245,158,11,.12); color: #b45309; }
.wm-ct-manjian { background: rgba(22,163,74,.1); color: #15803d; }
.wm-ct-presale { background: rgba(217,119,6,.12); color: #b45309; }
.wm-ct-ship    { background: rgba(14,165,233,.1); color: #0369a1; }

/* ---------- GEO 横幅 ---------- */
.wm-geo-banner {
    background: linear-gradient(90deg, #4338ca, #6366f1);
    color: #fff;
    font-size: .85rem;
}
.wm-geo-banner-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
}
.wm-geo-close {
    background: rgba(255,255,255,.18);
    border: 0;
    color: #fff;
    border-radius: 50%;
    width: 22px; height: 22px;
    line-height: 1;
    cursor: pointer;
}

/* ---------- 幻灯 ---------- */
.wm-slider { background: #0f172a; }
.wm-slide { position: relative; }
.wm-slide-img { width: 100%; height: 460px; object-fit: cover; display: block; }
.wm-slide-plain { background: linear-gradient(120deg, #0f172a 0%, #312e81 55%, #6366f1 100%); }
.wm-slide-plain .wm-slide-img { display: none; }
.wm-slide-link { display: block; position: relative; }
.wm-slide-caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .8rem;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 4rem;
    background: linear-gradient(90deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.15) 55%, transparent 80%);
}
.wm-slide-title { color: #fff; font-weight: 800; font-size: 2.35rem; letter-spacing: .01em; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.wm-slide-sub { color: rgba(255,255,255,.92); font-size: 1.05rem; max-width: 560px; }
.wm-slide-btn {
    align-self: flex-start;
    background: #fff;
    color: #1f2333;
    border-radius: 999px;
    padding: .6rem 1.5rem;
    font-weight: 700;
    font-size: .92rem;
    transition: transform .18s ease, box-shadow .18s ease;
}
.wm-slide-link:hover .wm-slide-btn { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.wm-slider .carousel-indicators { margin-bottom: .9rem; }
.wm-slider .carousel-indicators [data-bs-target] { width: 26px; height: 4px; border-radius: 2px; }
.wm-slider .carousel-control-prev-icon,
.wm-slider .carousel-control-next-icon { width: 2.4rem; height: 2.4rem; }

@media (max-width: 767.98px) {
    .wm-slide-img { height: 300px; }
    .wm-slide-caption { padding: 0 1.4rem; }
    .wm-slide-title { font-size: 1.5rem; }
    .wm-slide-sub { font-size: .9rem; }
    .wm-mkt-thumb { width: 92px; height: 92px; }
}

/* ---------- 沙箱收银台（--gw-brand 由控制器注入） ---------- */
.mockgate { --gw-brand: #1677ff; }
.mockgate .mg-hero { background: var(--gw-brand); color: #fff; }
.mockgate .mg-btn { background: var(--gw-brand); }

.wm-cd-days {
    background: var(--ftm-surface, #fff);
    color: var(--ftm-urgent, #e11d2f);
    border: 1px solid rgba(225,45,39,.3);
    border-radius: 7px;
    padding: .1rem .35rem;
    font-size: .78rem;
    font-weight: 700;
    margin-right: .1rem;
    font-variant-numeric: tabular-nums;
}