/*
 * TipPay 打赏页面扩展样式（基于 GlassUI）
 */

/* ========== 滑动公告 ========== */
.marquee-wrap{
    margin-bottom:20px;overflow:hidden;position:relative;
    padding:10px 16px;
    background:linear-gradient(135deg,rgba(59,110,245,.08),rgba(102,126,234,.05));
    border:1px solid rgba(59,110,245,.12);border-radius:var(--radius-md);
    display:flex;align-items:center;gap:10px;
}
.marquee-tag{
    flex-shrink:0;font-size:11px;font-weight:700;color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    padding:3px 10px;border-radius:var(--radius-pill);letter-spacing:.5px;
    box-shadow:0 2px 8px rgba(59,110,245,.25);
}
.marquee-viewport{flex:1;overflow:hidden;}
.marquee-track{
    display:inline-block;white-space:nowrap;
    animation:marquee 18s linear infinite;
    font-size:13px;color:var(--text-secondary);
}
.marquee-track span{padding-right:60px;}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ========== 金额选择 ========== */
.section-label{font-size:12.5px;font-weight:600;color:var(--text-secondary);margin:0 0 10px;display:flex;align-items:center;gap:6px}
.section-label::before{content:'';width:3px;height:14px;border-radius:2px;background:linear-gradient(135deg,var(--primary),var(--primary-dark))}
.amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.amount-btn{
    position:relative;padding:14px 6px;text-align:center;cursor:pointer;
    background:rgba(255,255,255,.35);border:1.5px solid rgba(77,120,255,.08);
    border-radius:var(--radius-md);transition:all .2s;
}
.amount-btn:hover{background:rgba(255,255,255,.55);transform:translateY(-1px)}
.amount-btn .num{font-size:18px;font-weight:700;color:var(--primary);line-height:1.2}
.amount-btn .unit{font-size:11px;color:var(--text-muted)}
.amount-btn.selected{border-color:var(--primary);background:rgba(59,110,245,.08);box-shadow:0 0 0 2px var(--primary),0 4px 16px rgba(59,110,245,.12)}
.amount-btn.selected .num{color:var(--primary-dark)}

.custom-amount{margin-bottom:18px}
.custom-amount .form-input{font-size:15px;font-weight:700;text-align:center}
.amount-suffix{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--text-muted);font-weight:600}

/* ========== 支付方式 ========== */
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.pay-method{
    position:relative;padding:16px 14px;cursor:pointer;
    background:rgba(255,255,255,.35);border:1.5px solid rgba(77,120,255,.08);
    border-radius:var(--radius-md);transition:all .2s;
    display:flex;align-items:center;gap:12px;
}
.pay-method:hover{background:rgba(255,255,255,.55)}
.pay-method.selected{border-color:var(--primary);background:rgba(59,110,245,.06);box-shadow:0 0 0 2px var(--primary)}
.pay-method.disabled{opacity:.45;cursor:not-allowed}
.pay-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pay-icon svg{width:24px;height:24px}
.pay-icon-alipay{background:linear-gradient(135deg,#1677ff,#0099ff)}
.pay-icon-wxpay{background:linear-gradient(135deg,#07c160,#06ad56)}
.pay-name{font-size:14px;font-weight:600}
.pay-desc{font-size:11.5px;color:var(--text-muted);margin-top:1px}
.pay-check{position:absolute;top:8px;right:10px;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(77,120,255,.2);display:flex;align-items:center;justify-content:center;transition:all .2s}
.pay-method.selected .pay-check{background:var(--primary);border-color:var(--primary)}
.pay-method.selected .pay-check::after{content:'';width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}

/* ========== 动态视频头像 ========== */
.video-avatar{
    width:80px;height:80px;border-radius:50%;object-fit:cover;
    border:3px solid rgba(255,255,255,0.8);
    box-shadow:0 4px 20px rgba(59,110,245,0.25);
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
}
.video-avatar::-webkit-media-controls{display:none !important}

/* ========== 支付成功弹窗 ========== */
.modal-mask{position:fixed;inset:0;z-index:9999;background:rgba(20,30,60,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:all .3s}
.modal-mask.show{opacity:1;visibility:visible}
.success-modal{width:100%;max-width:380px;padding:36px 28px;text-align:center;transform:scale(.9);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.modal-mask.show .success-modal{transform:scale(1)}
.success-ring{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 8px 28px rgba(22,163,74,.35);animation:pop .5s cubic-bezier(.16,1,.3,1)}
@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.success-ring svg{width:38px;height:38px}
.success-amount{font-size:32px;font-weight:700;color:var(--primary);margin-bottom:4px}
.success-amount .yuan{font-size:18px;font-weight:600}
.success-sub{font-size:13px;color:var(--text-secondary);margin-bottom:20px}
.success-info{background:rgba(255,255,255,.4);border:1px solid rgba(77,120,255,.08);border-radius:var(--radius-md);padding:14px;margin-bottom:20px;text-align:left}
.success-info .row{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0}
.success-info .row .k{color:var(--text-muted)}
.success-info .row .v{color:var(--text-primary);font-weight:600}

/* ========== 加载态 ========== */
.btn .spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ========== 背景音乐 - SVG黑胶唱片机 ========== */
.music-disc{
    position:fixed;top:16px;right:16px;z-index:1001;
    width:52px;height:52px;
    cursor:pointer;
    /* 丝滑滑入动画：从右侧弹出来 */
    transform:translateX(200px) scale(.4);
    opacity:0;
    animation:disc-slide-in .8s cubic-bezier(.34,1.56,.64,1) forwards;
    animation-delay:.3s;
    filter:drop-shadow(0 4px 16px rgba(0,0,0,.25));
    transition:filter .3s;
}
@keyframes disc-slide-in{
    0%{transform:translateX(200px) scale(.4);opacity:0}
    60%{opacity:1}
    100%{transform:translateX(0) scale(1);opacity:1}
}
.music-disc:hover{filter:drop-shadow(0 6px 20px rgba(59,110,245,.25))}
.music-disc svg{display:block;width:52px;height:52px}

/* 唱片旋转（播放时） */
#musicDisc{
    transform-box:view-box;
    transform-origin:128px 128px;
}
.music-disc.playing #musicDisc{
    animation:rotateDisc 3s linear infinite;
}
@keyframes rotateDisc{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

/* 彩色渐变动画 - stop颜色循环 */
@keyframes colorShift {
    0% { stop-color: #ff4081; }
    25% { stop-color: #ffeb3b; }
    50% { stop-color: #00e5ff; }
    75% { stop-color: #76ff03; }
    100% { stop-color: #ff4081; }
}
.color-stop-1 { animation: colorShift 4s linear infinite; }

@keyframes colorShift2 {
    0% { stop-color: #7b1fa2; }
    25% { stop-color: #ff9800; }
    50% { stop-color: #2196f3; }
    75% { stop-color: #ff5252; }
    100% { stop-color: #7b1fa2; }
}
.color-stop-2 { animation: colorShift2 4s linear infinite; }

/* 唱针臂（暂停时抬起-55deg，播放时落下-8deg） */
#musicTonearm{
    transform-box:view-box;
    transform-origin:220px 36px;
    transform:rotate(-55deg);
    transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.music-disc.playing #musicTonearm{
    transform:rotate(-8deg);
}

/* ========== 官方公告弹窗 ========== */
.notice-popup-mask{
    position:fixed;inset:0;z-index:10000;
    background:rgba(15,20,40,.55);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;padding:24px;
    opacity:0;visibility:hidden;transition:all .35s cubic-bezier(.16,1,.3,1);
}
.notice-popup-mask.show{opacity:1;visibility:visible}
.notice-popup{
    width:100%;max-width:400px;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(40px) saturate(1.6);
    -webkit-backdrop-filter:blur(40px) saturate(1.6);
    border:1px solid rgba(255,255,255,.7);
    border-radius:16px;
    box-shadow:0 0 0 1px rgba(77,120,255,.1),inset 0 1px 0 rgba(255,255,255,.9),0 12px 48px rgba(0,0,0,.15);
    overflow:hidden;
    transform:translateY(20px) scale(.96);
    transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.notice-popup-mask.show .notice-popup{transform:translateY(0) scale(1)}
.notice-popup-header{
    display:flex;align-items:center;gap:8px;
    padding:14px 18px;
    background:linear-gradient(135deg,rgba(59,110,245,.08),rgba(102,126,234,.04));
    border-bottom:1px solid rgba(77,120,255,.08);
}
.notice-popup-logo{
    width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;
}
.notice-popup-badge{
    font-size:10px;font-weight:700;color:#fff;
    background:linear-gradient(135deg,#f59e0b,#d97706);
    padding:2px 8px;border-radius:10px;letter-spacing:.5px;
    flex-shrink:0;
}
.notice-popup-title{
    font-size:15px;font-weight:700;color:#1a1d2e;flex:1;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.notice-popup-close{
    font-size:22px;cursor:pointer;color:#8b93a8;
    width:28px;height:28px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;transition:all .2s;flex-shrink:0;
    line-height:1;
}
.notice-popup-close:hover{background:rgba(0,0,0,.05);color:#1a1d2e}
.notice-popup-body{
    padding:18px;font-size:13.5px;color:#5a6278;line-height:1.8;
    max-height:280px;overflow-y:auto;word-break:break-word;
}
.notice-popup-footer{padding:0 18px 18px}

/* ========== 联系客服（玻璃透明） ========== */
.kefu-btn{
    position:fixed;bottom:24px;right:16px;z-index:1001;
    width:48px;height:48px;border-radius:50%;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(20px) saturate(1.5);
    -webkit-backdrop-filter:blur(20px) saturate(1.5);
    border:1px solid rgba(255,255,255,.35);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 20px rgba(0,0,0,.08),inset 0 1px 1px rgba(255,255,255,.4);
    cursor:pointer;transition:all .3s;color:var(--primary);
}
.kefu-btn svg{width:24px;height:24px}
.kefu-btn:hover{
    transform:scale(1.1);
    background:rgba(255,255,255,.28);
    box-shadow:0 6px 28px rgba(59,110,245,.15),inset 0 1px 1px rgba(255,255,255,.5);
}
.kefu-mask{
    position:fixed;inset:0;z-index:10000;background:rgba(15,20,40,.45);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;padding:24px;
    opacity:0;visibility:hidden;transition:all .3s;
}
.kefu-mask.show{opacity:1;visibility:visible}
.kefu-modal{
    width:100%;max-width:360px;padding:28px 24px;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(40px) saturate(1.6);
    -webkit-backdrop-filter:blur(40px) saturate(1.6);
    border:1px solid rgba(255,255,255,.7);
    border-radius:16px;
    box-shadow:0 12px 48px rgba(0,0,0,.15);
    transform:scale(.92);transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.kefu-mask.show .kefu-modal{transform:scale(1)}
.kefu-title{font-size:18px;font-weight:700;text-align:center;margin-bottom:20px;color:#1a1d2e}
.kefu-body{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.kefu-item{
    display:flex;align-items:center;gap:10px;
    padding:14px 16px;background:rgba(255,255,255,.4);
    border:1px solid rgba(77,120,255,.06);border-radius:var(--radius-md);
    font-size:14px;color:#1a1d2e;cursor:pointer;
    text-decoration:none;transition:all .2s;
}
.kefu-item:hover{background:rgba(59,110,245,.06);transform:translateX(4px)}
.kefu-ico{font-size:18px}
.kefu-empty{text-align:center;color:#8b93a8;padding:20px 0}

/* ========== 特效画布 ========== */
#fx-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}

@media(max-width:480px){
    .amount-grid{grid-template-columns:repeat(3,1fr)}
    .pay-methods{grid-template-columns:1fr}
    .music-disc{top:12px;right:12px;width:48px;height:48px}
    .music-disc svg{width:48px;height:48px}
    .kefu-btn{bottom:20px;right:12px;width:44px;height:44px}
}