.hide_box{z-index:999;filter:alpha(opacity=50);background:rgba(0,0,0,0.6);opacity:0.6;-moz-opacity:0.6;left:0;top:0;height:100%;width:100%;position:fixed;display:none;backdrop-filter:blur(5px);}
.shang_box{width:580px;padding:20px;background-color:#fff;border-radius:16px;position:fixed;z-index:1000;left:50%;top:50%;margin-left:-290px;margin-top:-320px;border:1px solid #eee;box-shadow:0 20px 60px rgba(0,0,0,0.2);display:none;}
.shang_box img{border:none;border-width:0;max-width:100%;height:auto;}
.dashang{display:block;width:120px;margin:20px auto 10px;height:36px;line-height:36px;padding:0 20px;background:linear-gradient(135deg,#E74851,#ff6b6b);color:#fff;text-align:center;text-decoration:none;border-radius:20px;font-weight:bold;font-size:16px;transition:all 0.3s;box-shadow:0 4px 15px rgba(231,72,81,0.3);}
.dashang:hover{opacity:0.9;transform:translateY(-2px);box-shadow:0 6px 20px rgba(231,72,81,0.4);}
.shang_tit{width:100%;height:60px;text-align:center;line-height:60px;color:#333;font-size:18px;font-weight:600;margin-bottom:15px;border-bottom:1px solid #eee;}
.shang_tit p{color:#666;text-align:center;font-size:14px;font-weight:normal;margin-top:-10px;}
.pay_methods{display:flex;justify-content:center;gap:20px;margin-bottom:15px;}
.pay_option{display:flex;align-items:center;gap:8px;padding:10px 20px;border-radius:25px;background:#f5f5f5;color:#666;cursor:pointer;transition:all 0.3s;font-size:14px;}
.pay_option:hover{background:#eee;}
.pay_option.active{background:#E74851;color:#fff;}
.pay_icon{font-size:18px;}
.shang_payimg{display:none;width:300px;padding:15px;border:1px solid #f0f0f0;margin:0 auto;border-radius:12px;background:#fafafa;}
.shang_payimg img{display:block;margin:0 auto;width:280px;height:280px;object-fit:contain;}
.pay_explain{text-align:center;margin:10px auto 20px;font-size:13px;color:#999;}
.shang_info{text-align:center;margin-bottom:20px;}
.shang_info p{color:#666;text-align:center;font-size:13px;line-height:1.6;}
.shang_info #shang_info_text{color:#E74851;font-weight:bold;}
.shang_close{float:right;color:#999;font-size:24px;text-decoration:none;margin-right:5px;line-height:24px;width:24px;height:24px;text-align:center;border-radius:50%;transition:all 0.3s;}
.shang_close:hover{color:#333;background:#f0f0f0;}

.qrcode_grid{display:flex;justify-content:center;gap:30px;padding:20px 0;border-top:1px solid #eee;margin-top:10px;}
.qrcode_item{text-align:center;}
.qrcode_item img{width:160px;height:160px;border-radius:8px;border:1px solid #eee;padding:8px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,0.05);}
.qrcode_item p{margin-top:10px;font-size:14px;color:#666;font-weight:500;}

@media (max-width: 768px) {
    .shang_box{
        width: 92%;
        max-width: 400px;
        margin-left: -46%;
        margin-top: -45%;
        padding: 15px;
    }
    .shang_payimg{
        width: 100%;
    }
    .shang_payimg img{
        width: 100%;
        max-width: 250px;
        height: auto;
    }
    .dashang{
        width: 100px;
        font-size: 14px;
        padding: 8px 16px;
    }
    .qrcode_grid{
        gap: 15px;
    }
    .qrcode_item img{
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 480px) {
    .qrcode_grid{
        gap: 10px;
        padding: 15px 0;
    }
    .qrcode_item img{
        width: 100px;
        height: 100px;
    }
    .qrcode_item p{
        font-size: 12px;
    }
}