﻿/* ====== 购买按钮 ====== */
.tqr-buy-area { padding:4px 0 0; }
.tqr-buy-area.tqr-detail { padding:12px 0 0; border-top:1px solid #edf2f7; margin-top:12px; }
.tqr-buy-btn {
    display:block !important; width:100% !important;
    padding:12px 20px !important;
    background:linear-gradient(135deg,#4f6ef7 0%,#3b5de7 100%) !important;
    color:#fff !important; border:none !important;
    border-radius:8px !important; font-size:14px !important;
    font-weight:600 !important; cursor:pointer !important;
    text-align:center !important; letter-spacing:0.3px;
    transition:all .25s ease !important;
    box-shadow:0 3px 10px rgba(74,108,247,0.25) !important;
    line-height:1.4 !important;
}
.tqr-buy-btn:hover {
    background:linear-gradient(135deg,#3b5de7 0%,#2f4fcf 100%) !important;
    transform:translateY(-1px) !important;
    box-shadow:0 6px 16px rgba(74,108,247,0.35) !important;
}
.tqr-buy-btn:active { transform:translateY(0px) !important; }
.tqr-btn-detail { padding:13px 20px !important; font-size:15px !important; border-radius:10px !important; }
/* ====== 弹窗遮罩 ====== */
.tqr-overlay {
    display:none !important; position:fixed !important;
    z-index:999999 !important; left:0 !important; top:0 !important;
    width:100% !important; height:100% !important;
    background:rgba(0,0,0,.45) !important;
    backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
}
.tqr-overlay.active {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}
/* ====== 弹窗主体 ====== */
.tqr-modal {
    width:92% !important; max-width:400px !important;
    background:#fff !important; border-radius:18px !important;
    overflow:hidden !important;
    box-shadow:0 25px 70px rgba(0,0,0,.2) !important;
    animation:tqrFadeIn .3s ease !important;
    position:relative !important;
}
@keyframes tqrFadeIn {
    from{opacity:0;transform:scale(.93) translateY(12px)}
    to{opacity:1;transform:scale(1) translateY(0)}
}
/* ====== 弹窗头部 - 顶部色条装饰 ====== */
.tqr-modal::before {
    content:''; display:block; height:4px;
    background:linear-gradient(90deg,#4f6ef7,#7c5cfc);
}
.tqr-modal-header {
    padding:24px 28px 14px; text-align:center; position:relative;
}
.tqr-modal-header .tqr-bag {
    width:44px; height:44px; border-radius:12px;
    background:linear-gradient(135deg,#eef2ff,#e0e7ff);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 12px; font-size:20px;
}
.tqr-modal-header h3 {
    margin:0 0 4px !important; font-size:17px !important;
    font-weight:600 !important; color:#1a202c !important;
    letter-spacing:-0.2px;
}
.tqr-modal-header .tqr-sub {
    font-size:12px; color:#94a3b8; margin:0;
}
.tqr-modal-header .tqr-amount {
    font-size:30px; font-weight:700; color:#1e293b;
    margin:10px 0 0; letter-spacing:-1px;
}
.tqr-modal-header .tqr-amount small {
    font-size:16px; font-weight:400; color:#94a3b8;
    margin-right:2px;
}
.tqr-close {
    position:absolute !important; top:12px !important; right:14px !important;
    width:30px !important; height:30px !important; padding:0 !important;
    border:none !important; border-radius:8px !important;
    background:transparent !important; color:#94a3b8 !important;
    font-size:20px !important; line-height:30px !important;
    text-align:center !important; cursor:pointer !important;
    transition:all .2s !important;
}
.tqr-close:hover { background:#f1f4f9 !important; color:#475569 !important; }
/* ====== 弹窗内容 ====== */
.tqr-modal-body { padding:14px 28px 24px; }
/* ====== 支付方式 ====== */
.tqr-methods { display:flex; gap:10px; margin:0; }
.tqr-method {
    flex:1 !important; padding:18px 8px !important;
    border:1.5px solid #e2e8f0 !important; border-radius:13px !important;
    cursor:pointer !important; transition:all .2s ease !important;
    background:#fff !important; text-align:center !important;
    user-select:none !important;
}
.tqr-method .tqr-method-icon { display:block; margin-bottom:6px; }
.tqr-method .tqr-method-icon svg { display:block; margin:0 auto; }
.tqr-method .tqr-method-name {
    display:block; font-size:14px !important;
    font-weight:600 !important; color:#1e293b !important;
    margin:0 !important; line-height:1.3;
}
.tqr-method .tqr-method-desc {
    display:block; font-size:11px !important;
    color:#94a3b8 !important; margin:3px 0 0 !important;
}
.tqr-method-wx.selected, .tqr-method-wx:hover { border-color:#07c160 !important; background:#f0fff5 !important; }
.tqr-method-ali.selected, .tqr-method-ali:hover { border-color:#1677ff !important; background:#f0f5ff !important; }
.tqr-method.disabled { opacity:.45 !important; cursor:default !important; pointer-events:none !important; }
/* ====== 二维码区域 ====== */
.tqr-qr-wrap { display:none; padding:14px 0 2px; text-align:center; }
.tqr-qr-wrap.show { display:block; animation:tqrFadeIn .35s ease; }
.tqr-qr-inner {
    display:flex; justify-content:center; padding:14px;
    background:#f8fafc; border-radius:12px;
    border:1.5px dashed #e2e8f0;
}
.tqr-qr-inner canvas, .tqr-qr-inner img { display:block; margin:0 auto; border-radius:4px; }
.tqr-qr-hint { margin:10px 0 0; font-size:13px; color:#64748b; }
/* ====== 状态栏 ====== */
.tqr-status {
    margin:14px 0 0; padding:10px 14px;
    background:#f1f5f9; border-radius:10px;
    font-size:13px; color:#475569;
    display:flex; align-items:center; justify-content:center; gap:8px;
}
.tqr-dot {
    width:7px; height:7px; border-radius:50%;
    background:#4f6ef7; display:inline-block;
    animation:tqrPulse 1.2s ease-in-out infinite;
}
@keyframes tqrPulse {
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.3;transform:scale(.7)}
}
.tqr-status.success { background:#f0fdf4; color:#16a34a; }
.tqr-status.success .tqr-dot { background:#16a34a; animation:none; }
.tqr-status-done { font-weight:600; }
/* ====== 协议 ====== */
.tqr-agreement { font-size:11px; color:#cbd5e1; margin:16px 0 0; text-align:center; }
/* ====== 响应式 ====== */
@media(max-width:480px){
    .tqr-modal { width:94% !important; border-radius:14px !important; }
    .tqr-modal-header { padding:18px 20px 12px; }
    .tqr-modal-body { padding:12px 20px 20px; }
    .tqr-method { padding:14px 6px !important; }
    .tqr-methods { gap:8px; }
}

/* ====== 验证付款按钮 ====== */
.tqr-verify-btn {
    display:block; width:100%; margin:10px 0 0; padding:10px 14px;
    background:#4f6ef7; color:#fff; border:none; border-radius:10px;
    font-size:13px; font-weight:600; cursor:pointer; text-align:center;
    transition:all .2s ease; box-shadow:0 2px 8px rgba(79,110,247,0.25);
}
.tqr-verify-btn:hover { background:#3b5de7; }
.tqr-verify-btn:disabled { opacity:.6; cursor:not-allowed; }