/* ═══════════════════════════════════════════════════════════
   PAYMENT MODAL V5 — 弥散光 · 丰富层次 · 温暖渐变  
   ═══════════════════════════════════════════════════════════ */

.pay-dialog{
    --gold: #e2a84b;
    --gold-lt: #f5d590;
    --gold-dk: #a06b1f;
    --rose: #e8507a;
    --bg: #131118;
    --surface: #1b1922;
    --card-bg: #211f2b;
    --txt: #d5d0e0;
    --txt2: #8a839d;
    --border: rgba(255,255,255,.07);

    width: 960px;
    max-width: 96vw;
    background: var(--bg);
    border-radius: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    color: var(--txt);
    font-family: -apple-system,'PingFang SC','Microsoft YaHei','Segoe UI',sans-serif;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(226,168,75,.1),
        0 50px 100px -20px rgba(0,0,0,.85),
        0 0 80px -10px rgba(226,168,75,.06);
    animation: payIn .4s cubic-bezier(.16,1,.3,1);
}
@keyframes payIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}

/* ── 弥散光 ── */
.pay-glow{
    position: absolute;
    top: -80px; left: -60px;
    width: 500px; height: 350px;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(226,168,75,.25) 0%, transparent 70%),
        radial-gradient(ellipse at 80% 30%, rgba(139,92,246,.18) 0%, transparent 65%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

/* ── Close ── */
.pay-x{
    position:absolute;top:18px;right:20px;z-index:20;
    width:34px;height:34px;border:none;border-radius:50%;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
    color:#888;font-size:15px;cursor:pointer;
    display:grid;place-items:center;transition:.3s;
}
.pay-x:hover{background:rgba(255,255,255,.14);color:#fff;transform:rotate(90deg)}

/* ═══  HEADER (Clean Native Tabs) ═══ */
.pay-head {
    position: relative;
    z-index: 1;
    padding: 30px 40px 0;
}

.pay-tabs {
    display: flex;
    gap: 36px;
    border-bottom: 1px solid rgba(255,255,255,0.08); /* 极细的地平线 */
    padding-bottom: 14px;
    position: relative;
}

.pay-tab {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent; /* 绝对不要任何背景色框 */
    border: none;
    padding: 0;
}

.pay-tab-i {
    font-size: 15px;
    opacity: 0.5;
    transition: all 0.3s;
}

.pay-tab:hover:not(.is-on) {
    color: rgba(255, 255, 255, 0.8);
}
.pay-tab:hover:not(.is-on) .pay-tab-i {
    opacity: 0.8;
}

/* ★ 高亮状态：纯净无框，全靠字重和色彩发力 */
.pay-tab.is-on {
    color: var(--gold-lt);
    font-weight: bold;
    text-shadow: 0 0 15px rgba(226,168,75,0.2);
}

.pay-tab.is-on .pay-tab-i {
    color: var(--gold-lt);
    opacity: 1;
}

/* 精致发光游标 */
.pay-tab.is-on::after {
    content: '';
    position: absolute;
    bottom: -16px; /* 贴合父级的 border-bottom */
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: var(--gold-lt);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(226,168,75,0.6);
}

/* ═══  BODY  ═══ */
.pay-main{
    display: flex;
    flex: 1;
    position: relative;
    z-index: 1;
}

/* ── L: OPTIONS ── */
.pay-pick {
    flex: 1;
    padding: 32px 36px 0px 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── 动态海报展示（替代原有的计费选项区） ── */
.pay-material-showcase {
    position: relative;
    width: 100%;
    /* 高度可以吃满也可以定高以保持美感 */
    min-height: 260px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    margin-bottom: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.06);
}

.showcase-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
}

.showcase-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 60px 24px 24px;
    /*background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%);*/
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.showcase-title {
    font-size: 24px;
    color: var(--gold-lt);
    margin: 0 0 6px 0;
    font-weight: bold;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.showcase-desc {
    font-size: 14px;
    /*color: rgba(255,255,255,0.7);*/
    color: var(--gold-lt);
    margin: 0;
    line-height: 1.5;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* 
 * =======================================================
 * [MODIFIED BY AI ARCHITECT]: SVIP BLACK EDITION CSS
 * - 重构了 .pay-vip-showcase 为拟物化数字货币卡形式
 * - 增加 .vip-premium-card, .vpc-glow 等高光发散金箔效果
 * - 剔除无用的 2x2 旧版 Grid 特权
 * =======================================================
 */
.pay-vip-showcase {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.vip-premium-card {
    position: relative;
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #2b2b2d 0%, #17171a 100%);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.08);
    margin-bottom: 60px;
    border: 1px solid rgba(226,168,75,0.25);
}

.vpc-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(226,168,75,0.12), transparent 60%);
    transform: rotate(30deg);
    pointer-events: none;
}

.vpc-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.vpc-badge {
    background: linear-gradient(90deg, #F9D423 0%, #FF4E50 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 2px;
}

.vpc-crown {
    color: var(--gold-lt);
    font-size: 20px;
    opacity: 0.85;
}

.vpc-middle {
    position: relative;
    z-index: 1;
}

.vpc-title {
    font-size: 28px;
    margin: 0 0 4px 0;
    color: #fff;
    letter-spacing: 2px;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    background: linear-gradient(135deg, #FFEAB5 0%, #D4AF37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vpc-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    margin: 0;
}

.vpc-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    color: rgba(226,168,75,0.5);
    font-size: 12px;
    font-family: monospace;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
}

.vpc-bottom i {
    font-size: 26px;
    opacity: 0.6;
}

/* ── 黑金卡底部附注网格权益 ── */
.vip-features-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.v-feat-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.03);
    transition: all 0.3s ease;
}

.v-feat-item:hover {
    background: linear-gradient(135deg, rgba(226,168,75,0.06), transparent);
    border-color: rgba(226,168,75,0.2);
    transform: translateY(-2px);
}

.v-feat-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(226,168,75,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-lt);
    font-size: 14px;
}

.v-feat-text h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
}

.v-feat-text p {
    margin: 0;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    line-height: 1.3;
}

/* ── CARDS ── */
.pay-cards-wrap {
    width: 100%;
}
.pay-cards{
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.pay-cards::-webkit-scrollbar{height:3px}
.pay-cards::-webkit-scrollbar-thumb{background:rgba(226,168,75,.25);border-radius:2px}

.p-card{
    flex: 0 0 calc(25% - 11px);
    min-width: 135px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: all .35s cubic-bezier(.25,1,.5,1);
}

/* 卡片顶部装饰线 */
.p-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--gold-dk),var(--gold),var(--gold-dk));
    opacity:0;transition:opacity .3s;
}

.p-card:hover:not(.active){
    border-color:rgba(226,168,75,.2);
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(0,0,0,.3);
}
.p-card:hover:not(.active)::before{opacity:.5}

.p-card .p-card-inner{
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    position: relative;
    z-index: 1;
}

/* ★ Active Card — 核心视觉亮点 */
.p-card.active{
    background: linear-gradient(160deg, #fef0d0 0%, #f0cb72 35%, #d4a040 70%, #c08a28 100%);
    border-color: transparent;
    transform: translateY(-5px);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.2) inset,
        0 16px 40px rgba(208,160,64,.35),
        0 0 60px rgba(226,168,75,.12);
}
.p-card.active::before{display:none}
.p-card.active .duration,
.p-card.active .old-price,
.p-card.active .new-price,
.p-card.active .p-card-exp{color:#4a3000!important}
.p-card.active .old-price{opacity:.45}

.best-value .badge{
    position:absolute;top:0;right:0;
    background:linear-gradient(135deg,#ff5252,#e53935);
    color:#fff;font-size:11px;font-weight:800;
    padding:4px 12px;
    border-radius:0 16px 0 12px;
    letter-spacing:.5px;
    box-shadow:0 4px 12px rgba(229,57,53,.4);
    z-index:2;
}

.p-card .duration{font-size:17px;font-weight:800;color:#eee}
.p-card .old-price{font-size:12px;color:#777;text-decoration:line-through}
.p-card .new-price{
    font-size:32px;font-weight:900;line-height:1;letter-spacing:-1px;
    color:var(--gold-lt);
    text-shadow:0 2px 10px rgba(226,168,75,.15);
}
.p-card .new-price span{font-size:14px;margin-right:2px;font-weight:700}
.p-card .p-card-exp{font-size:11px;color:#999;margin-top:auto;padding-top:6px;border-top:1px dashed rgba(255,255,255,.06)}

/* ── ADDON MODULE (High-End Switch Block) ── */
.pay-addon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    margin-top: auto;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    backdrop-filter: blur(10px);
}
.pay-addon:hover {
    border-color: rgba(226,168,75,0.3);
    background: linear-gradient(135deg, rgba(226,168,75,0.08), rgba(226,168,75,0.02));
}

.addon-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.addon-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.addon-fire {
    color: #ef5350;
    font-size: 16px;
    filter: drop-shadow(0 2px 4px rgba(239,83,80,0.4));
    animation: hotPulse 1.5s infinite alternate;
}
@keyframes hotPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.15);opacity:1}}

.addon-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

.addon-tag {
    background: linear-gradient(90deg, #ef5350, #e53935);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
}

.addon-desc {
    font-size: 12px;
    color: var(--txt2);
    padding-left: 24px;
}

.addon-action {
    display: flex;
    align-items: center;
    gap: 16px;
}

.addon-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.addon-old { font-size: 12px; color: #5a5470; text-decoration: line-through; }
.addon-new { font-size: 18px; font-weight: 900; color: var(--gold-lt); }

/* iOS Style Switch */
.addon-switch {
    position: relative;
    width: 44px;
    height: 24px;
    cursor: pointer;
}
.addon-switch input { opacity: 0; width: 0; height: 0; }
.addon-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(255,255,255,0.1);
    transition: .35s;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.1);
}
.addon-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: #999;
    transition: .35s;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.addon-switch input:checked + .addon-slider { background-color: var(--gold); border-color: var(--gold); }
.addon-switch input:checked + .addon-slider:before { transform: translateX(20px); background-color: #fff; }

/* ── R: CHECKOUT (Glass UI) ── */
.pay-checkout {
    width: 330px;
    min-width: 330px;
    padding: 32px 32px 32px 0;
    display: flex;
    flex-direction: column;
}

.checkout-glass {
    flex: 1;
    background: linear-gradient(180deg, rgba(26,24,36,0.8) 0%, rgba(19,17,24,0.9) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
}

/* Top internal glow */
.checkout-glass::before {
    content: '';
    position: absolute;
    top: -20px; left: 0; right: 0; height: 120px;
    background: radial-gradient(ellipse at top, rgba(226,168,75,0.15), transparent 70%);
    pointer-events: none;
}

.checkout-sum {
    border-bottom: 1px dashed rgba(255,255,255,0.12);
    padding-bottom: 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.sum-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--txt2);
}
.sum-row.highlight .sum-val { color: #ef5350; font-weight: 700; }
.sum-val.old { text-decoration: line-through; opacity: 0.6; }

.checkout-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.total-lbl { font-size: 15px; font-weight: 600; color: #fff; }
.total-val { display: flex; align-items: baseline; color: var(--gold-lt); }
.total-val .currency { font-size: 20px; font-weight: 800; margin-right: 4px; }
.total-val .amount {
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
    background: linear-gradient(180deg, #fff 0%, var(--gold-lt) 40%, var(--gold) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 15px rgba(226,168,75,0.25));
}

.checkout-qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0,0,0,0.3);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 0;
    border: 1px solid rgba(255,255,255,0.03);
    position: relative;
    z-index: 1;
}

.qr-box {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 12px;
    padding: 6px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    margin-bottom: 16px;
    overflow: hidden;
}
.qr-box img { width: 100%; height: 100%; display: block; border-radius: 8px; }

/* 扫描光效 */
.qr-scan-line {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 38px;
    background: linear-gradient(180deg, transparent, rgba(7,193,96,0.4), transparent);
    border-bottom: 1px solid #07c160;
    box-shadow: 0 4px 10px rgba(7,193,96,0.3);
    animation: scan 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}
@keyframes scan {
    0% { top: -40px; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: 140px; opacity: 0; }
}

.qr-brands {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #888;
}
.qr-brands i { font-size: 16px; }

.checkout-legal {
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    margin: 16px 0 0;
}
.checkout-legal a { color: var(--gold); text-decoration: none; transition: color 0.2s; }
.checkout-legal a:hover { color: var(--gold-lt); }

/* ═══  RESPONSIVE  ═══ */
@media(max-width:768px){
    .pay-dialog{border-radius:18px 18px 0 0}
    .pay-main{flex-direction:column}
    .pay-pick{border-right:none;padding:20px}
    .pay-checkout{width:100%;min-width:unset;padding:20px}
    .pay-tabs{overflow-x:auto;gap:0}
    .p-card{flex:0 0 calc(50% - 7px);min-width:110px}
    .pay-glow{width:300px;height:200px;top:-40px}
}

/* General Modal Mobile Adaptation */
@media (max-width: 768px) {
    .glass-modal {
        width: 96%;
        max-height: 90vh;
        border-radius: 12px;
    }
    .modal-header {
        padding: 12px 15px;
    }
    .modal-title {
        font-size: 16px;
    }
    .modal-close {
        width: 36px;
        height: 36px;
    }
    .modal-body {
        padding: 15px;
        padding-bottom: calc(15px + env(safe-area-inset-bottom));
    }
    .modal-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px;
    }
    .modal-filter-bar .date-group {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: nowrap;
        width: 100%;
    }
    .modal-filter-bar .date-group .modal-input {
        width: 48% !important;
        min-width: 0;
        box-sizing: border-box;
    }
    .modal-overlay .notification-modal {
        max-width: 96% !important;
    }
}