/* =========================================================
   会员随机优惠弹窗
   深墨绿邀请函 + 金色价签
   ========================================================= */

.promo-mask {
    position: fixed; inset: 0; z-index: 2400;
    display: none; align-items: center; justify-content: center;
    padding: 22px; background: rgba(18, 16, 13, 0.7);
    backdrop-filter: blur(4px);
}
.promo-mask.show { display: flex; }

.promo-card {
    position: relative; width: 100%; max-width: 332px;
    padding: 26px 24px 18px; border-radius: 20px;
    text-align: center; overflow: hidden;
    background:
        radial-gradient(220px 140px at 92% -8%, rgba(216, 183, 124, 0.22), transparent 70%),
        linear-gradient(158deg, #2F3B2C 0%, #1F2A20 55%, #18211A 100%);
    border: 1px solid rgba(216, 183, 124, 0.34);
    box-shadow: 0 26px 64px rgba(12, 12, 10, 0.42);
    animation: promoIn .3s ease-out;
}
.promo-card::before {
    content: ''; position: absolute; inset: 7px; border-radius: 14px;
    border: 1px solid rgba(216, 183, 124, 0.15); pointer-events: none;
}
.promo-seal {
    position: absolute; right: 18px; top: 20px;
    width: 56px; height: 56px; border-radius: 50%;
    border: 1px solid rgba(216, 183, 124, 0.28);
    display: flex; align-items: center; justify-content: center;
    color: rgba(216, 183, 124, 0.28);
    font-family: 'STKaiti', 'KaiTi', serif; font-size: 26px;
    transform: rotate(-9deg); pointer-events: none;
}
.promo-close {
    position: absolute; top: 10px; right: 12px; z-index: 3;
    width: 28px; height: 28px; border: none; border-radius: 50%;
    background: transparent; color: rgba(246, 238, 223, 0.55);
    font-size: 21px; line-height: 28px; cursor: pointer;
}

.promo-kicker {
    font-size: 8.5px; letter-spacing: 2.6px;
    color: #D8B77C; margin-bottom: 9px;
}
.promo-title {
    font-family: 'STKaiti', 'KaiTi', serif;
    font-size: 25px; font-weight: 700; letter-spacing: 3px;
    color: #F6EEDF; margin-bottom: 6px;
}
.promo-sub {
    font-size: 10.5px; line-height: 1.6;
    color: rgba(246, 238, 223, 0.5); margin-bottom: 17px;
}

.promo-offer {
    position: relative; z-index: 1; text-align: left;
    padding: 13px 15px 12px; margin-bottom: 14px;
    border-radius: 12px;
    border: 1px solid rgba(216, 183, 124, 0.22);
    background: rgba(255, 255, 255, 0.045);
}
.promo-offer-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 9.5px; letter-spacing: 0.8px;
    color: rgba(246, 238, 223, 0.52);
}
.promo-offer-head em {
    font-style: normal; color: #D8B77C; font-weight: 600;
    letter-spacing: 1px;
}
.promo-price-row { display: flex; align-items: baseline; gap: 9px; margin-top: 2px; }
.promo-original { font-size: 12px; color: rgba(246, 238, 223, 0.5); }
.promo-original s { text-decoration: line-through; text-decoration-color: rgba(216, 183, 124, 0.5); }
.promo-now {
    font-size: 33px; line-height: 1.1; color: #E8C98F;
    font-weight: 600; letter-spacing: -0.5px;
}
.promo-now b { font-weight: 600; }
.promo-save {
    margin-top: 3px; font-size: 9.5px; letter-spacing: 0.5px;
    color: rgba(216, 183, 124, 0.82);
}

.promo-divider {
    display: flex; align-items: center; gap: 10px;
    margin: 13px 0 10px;
    font-size: 8.5px; letter-spacing: 2px;
    color: rgba(246, 238, 223, 0.32);
}
.promo-divider::before, .promo-divider::after {
    content: ''; height: 1px; flex: 1;
    background: rgba(216, 183, 124, 0.14);
}
.promo-benefits {
    list-style: none; margin: 0 0 16px; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
    text-align: left;
}
.promo-benefits li {
    font-size: 10.5px; line-height: 1.5;
    color: rgba(246, 238, 223, 0.6);
    padding-left: 13px; position: relative;
}
.promo-benefits li::before {
    content: '◇'; position: absolute; left: 0; top: 0;
    font-size: 7px; color: #D8B77C;
}

.promo-buy {
    width: 100%; height: 44px; border: none; border-radius: 12px;
    cursor: pointer; font-family: inherit;
    background: linear-gradient(135deg, #E9CE9F 0%, #C9A66C 100%);
    color: #241E15; font-size: 13px; font-weight: 700; letter-spacing: 1px;
}
.promo-buy:active { transform: scale(.99); }
.promo-later {
    margin-top: 9px; border: none; background: transparent;
    color: rgba(246, 238, 223, 0.4); font-family: inherit;
    font-size: 10px; letter-spacing: 0.5px; cursor: pointer;
}
.promo-fine {
    margin-top: 10px; font-size: 8.5px;
    color: rgba(246, 238, 223, 0.24); letter-spacing: 0.5px;
}

@keyframes promoIn {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}