/**
 * 支付相关样式
 *
 * @package Xuhuan
 * @since 1.5.0
 */

/* ============================================
   价格显示
   ============================================ */

.model-price-section {
    margin: 20px 0;
    padding: 16px;
    background: var(--bg-tertiary, linear-gradient(135deg, #fff5f5 0%, #fff 100%));
    border: 1px solid var(--border-light, #ffe0e0);
    border-radius: 12px;
}

.model-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.price-label {
    font-size: 14px;
    color: var(--text-muted, #666);
}

.price-value {
    font-size: 28px;
    font-weight: 700;
    color: #e53935;
}

.price-value.free {
    color: #4caf50;
    font-size: 20px;
}

.price-original {
    font-size: 14px;
    color: var(--text-muted, #999);
    text-decoration: line-through;
}

.price-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 10px;
}

.price-tag.purchased {
    background: #e8f5e9;
    color: #2e7d32;
}

.price-tag.author {
    background: #e3f2fd;
    color: #1565c0;
}

/* ============================================
   购买按钮
   ============================================ */

.btn-purchase {
    background: linear-gradient(135deg, #ff6b6b 0%, #e53935 100%);
    color: #fff;
    border: none;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-purchase:hover {
    background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(229, 57, 53, 0.4);
}

.btn-purchase:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-purchase .icon {
    width: 20px;
    height: 20px;
}

/* 已购买状态 */
.btn-purchased {
    background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
}

.btn-purchased:hover {
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

/* ============================================
   支付弹窗
   ============================================ */

.payment-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
}

.payment-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.payment-modal {
    background: var(--bg-primary, #fff);
    border-radius: 16px;
    max-width: 420px;
    width: 100%;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.35),
        0 10px 30px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(0, 0, 0, 0.08);
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s ease;
    pointer-events: auto;
}

.payment-modal-backdrop.active .payment-modal {
    transform: scale(1) translateY(0);
}

.payment-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light, #eee);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.payment-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin: 0;
}

.payment-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-tertiary, #f5f5f5);
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-muted, #666);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.payment-modal-close:hover {
    background: var(--bg-hover, #eee);
    color: var(--text-primary, #333);
}

.payment-modal-body {
    padding: 24px;
}

.payment-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-light, #eee);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* ============================================
   支付信息
   ============================================ */

.payment-info {
    text-align: center;
    margin-bottom: 24px;
}

.payment-product-name {
    font-size: 16px;
    color: var(--text-primary, #333);
    margin-bottom: 16px;
    padding: 0 20px;
    line-height: 1.5;
}

.payment-amount {
    font-size: 36px;
    font-weight: 700;
    color: #e53935;
}

.payment-amount::before {
    content: '¥';
    font-size: 20px;
    margin-right: 4px;
}

/* ============================================
   支付方式选择
   ============================================ */

.payment-methods {
    margin-bottom: 20px;
}

.payment-methods-title {
    font-size: 14px;
    color: var(--text-muted, #666);
    margin-bottom: 12px;
}

.payment-method-item {
    display: flex;
    align-items: center;
    padding: 16px;
    border: 2px solid var(--border-light, #eee);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 12px;
}

.payment-method-item:hover {
    border-color: var(--primary-color, #1890ff);
    background: var(--primary-light, #f0f7ff);
}

.payment-method-item.selected {
    border-color: var(--primary-color, #1890ff);
    background: var(--primary-light, #f0f7ff);
}

.payment-method-item input {
    display: none;
}

.payment-method-icon {
    width: 40px;
    height: 40px;
    margin-right: 12px;
}

.payment-method-icon.wechat {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><rect fill="%2307C160" width="48" height="48" rx="8"/><path fill="%23fff" d="M33.6 27.2c.8 0 1.6-.4 2-.8s.8-1.2.8-2c0-.8-.4-1.6-.8-2s-1.2-.8-2-.8-1.6.4-2 .8-.8 1.2-.8 2c0 .8.4 1.6.8 2s1.2.8 2 .8zm-7.2 0c.8 0 1.6-.4 2-.8s.8-1.2.8-2c0-.8-.4-1.6-.8-2s-1.2-.8-2-.8-1.6.4-2 .8-.8 1.2-.8 2c0 .8.4 1.6.8 2s1.2.8 2 .8zM24 8C15.2 8 8 14 8 21.6c0 4.4 2.4 8.4 6 11.2l-1.6 4.8 5.6-2.8c1.6.4 3.6.8 5.2.8.4 0 .8 0 1.2-.1-.4-1.2-.8-2.4-.8-3.7 0-6.4 5.6-11.6 12.4-11.6.8 0 1.6.1 2.4.2C37.2 13.6 31.2 8 24 8zm-6.8 10.8c-.8 0-1.6-.4-2-.8s-.8-1.2-.8-2c0-.8.4-1.6.8-2s1.2-.8 2-.8 1.6.4 2 .8.8 1.2.8 2c0 .8-.4 1.6-.8 2s-1.2.8-2 .8zm8 0c-.8 0-1.6-.4-2-.8s-.8-1.2-.8-2c0-.8.4-1.6.8-2s1.2-.8 2-.8 1.6.4 2 .8.8 1.2.8 2c0 .8-.4 1.6-.8 2s-1.2.8-2 .8z"/></svg>') no-repeat center;
    background-size: contain;
}

.payment-method-icon.alipay {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><rect fill="%231677FF" width="48" height="48" rx="8"/><path fill="%23fff" d="M35.2 28.8c-2.4-.8-4.8-1.6-6.4-2.4 1.6-2.4 2.4-5.6 3.2-8.8h-8v-2.4h9.6v-2.4h-9.6v-4h-4v4h-9.6v2.4h9.6v2.4h-8v2.4h12.8c-.8 2.4-2.4 4.8-4 6.4-2.4-1.6-4.8-2.4-7.2-2.4-3.2 0-5.6 2.4-5.6 4.8s2.4 4.8 5.6 4.8c2.4 0 4.8-1.6 6.4-4 2.4 1.6 5.6 3.2 9.6 4.8l5.6-6.4z"/></svg>') no-repeat center;
    background-size: contain;
}

.payment-method-icon.balance {
    background: linear-gradient(135deg, #ff9a56 0%, #ff6b35 100%);
    border-radius: 8px;
    position: relative;
}
.payment-method-icon.balance::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.9);
    border-radius: 2px 2px 8px 8px;
    box-sizing: border-box;
}
.payment-method-icon.balance::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 8px;
    border: 2px solid rgba(255,255,255,0.9);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    box-sizing: border-box;
}

.payment-method-icon.points {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 8px;
    position: relative;
}
.payment-method-icon.points::after {
    content: '★';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: rgba(255,255,255,0.95);
}

.payment-method-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary, #333);
}

.payment-method-check {
    margin-left: auto;
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color, #ddd);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.payment-method-item.selected .payment-method-check {
    border-color: var(--primary-color, #1890ff);
    background: var(--primary-color, #1890ff);
}

.payment-method-item.selected .payment-method-check::after {
    content: '✓';
    color: #fff;
    font-size: 14px;
}

/* ============================================
   支付状态
   ============================================ */

.payment-status {
    text-align: center;
    padding: 40px 20px;
}

.payment-status-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-status-icon.loading {
    border: 3px solid #eee;
    border-top-color: #1890ff;
    animation: spin 1s linear infinite;
}

.payment-status-icon.success {
    background: #52c41a;
    color: #fff;
    font-size: 32px;
}

.payment-status-icon.error {
    background: #ff4d4f;
    color: #fff;
    font-size: 32px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.payment-status-text {
    font-size: 16px;
    color: var(--text-primary, #333);
    margin-bottom: 8px;
}

.payment-status-desc {
    font-size: 14px;
    color: var(--text-muted, #999);
}

/* ============================================
   微信二维码
   ============================================ */

.wechat-qrcode-container {
    margin: 20px 0;
    text-align: center;
}

.wechat-qrcode-box {
    display: inline-block;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    border: 2px solid #07C160;
}

.wechat-qrcode-box img,
.wechat-qrcode-box canvas {
    display: block;
}

.wechat-qrcode-tip {
    margin-top: 12px;
    font-size: 14px;
    color: var(--text-muted, #666);
}

/* ============================================
   多层定价类型价格显示
   ============================================ */

.price-value.login-required {
    color: #1890ff;
    font-size: 18px;
}

.price-value.vip-only {
    color: #d4a017;
    font-size: 18px;
    font-weight: 600;
}

.price-value.points {
    color: #722ed1;
    font-size: 20px;
}

.price-vip-tag {
    display: inline-block;
    padding: 3px 8px;
    background: linear-gradient(135deg, #ffd700, #daa520);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    margin-left: 8px;
}

/* VIP按钮 */
.btn-vip {
    background: linear-gradient(135deg, #ffd700 0%, #d4a017 100%);
    color: #fff;
    border: none;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-vip:hover {
    background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 160, 23, 0.4);
}

/* 积分按钮 */
.btn-points {
    background: linear-gradient(135deg, #9b59b6 0%, #722ed1 100%);
    color: #fff;
    border: none;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-points:hover {
    background: linear-gradient(135deg, #722ed1 0%, #531dab 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(114, 46, 209, 0.4);
}

/* ============================================
   用户中心订单列表
   ============================================ */

.user-orders {
    margin-top: 24px;
}

.order-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.order-item {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--card-shadow, 0 2px 8px rgba(0, 0, 0, 0.06));
    border: 1px solid var(--card-border, transparent);
    transition: all 0.3s;
}

.order-item:hover {
    box-shadow: var(--card-hover-shadow, 0 4px 16px rgba(0, 0, 0, 0.1));
}

.order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light, #f0f0f0);
}

.order-no {
    font-size: 14px;
    color: var(--text-muted, #666);
}

.order-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.order-status.status-pending {
    background: #fff7e6;
    color: #d48806;
}

.order-status.status-paid {
    background: #f6ffed;
    color: #389e0d;
}

.order-status.status-cancelled,
.order-status.status-expired {
    background: #f5f5f5;
    color: #8c8c8c;
}

.order-status.status-refunded {
    background: #e6f7ff;
    color: #096dd9;
}

.order-body {
    display: flex;
    align-items: center;
    gap: 16px;
}

.order-product {
    flex: 1;
}

.order-product-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary, #333);
    margin-bottom: 4px;
}

.order-product-title a {
    color: inherit;
    text-decoration: none;
}

.order-product-title a:hover {
    color: var(--primary-color, #1890ff);
}

.order-time {
    font-size: 13px;
    color: var(--text-muted, #999);
}

.order-amount {
    font-size: 20px;
    font-weight: 600;
    color: #e53935;
}

.order-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light, #f0f0f0);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* ============================================
   支付提示
   ============================================ */

.payment-notice {
    background: var(--warning-light, #fffbe6);
    border: 1px solid var(--warning-color, #ffe58f);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 16px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.payment-notice-icon {
    color: var(--warning-color, #faad14);
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.payment-notice-text {
    font-size: 13px;
    color: var(--text-secondary, #666);
    line-height: 1.5;
}

/* ============================================
   支付成功提示
   ============================================ */

.payment-success-banner {
    background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
    color: #fff;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.payment-success-banner .icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.payment-success-banner .text {
    flex: 1;
}

.payment-success-banner .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

.payment-success-banner .desc {
    font-size: 13px;
    opacity: 0.9;
}

/* ============================================
   响应式
   ============================================ */

@media (max-width: 768px) {
    .payment-modal {
        max-width: 100%;
        margin: 0 16px;
        border-radius: 12px;
    }
    
    .model-price-section {
        padding: 12px;
    }
    
    .price-value {
        font-size: 24px;
    }
    
    .payment-amount {
        font-size: 28px;
    }
    
    .order-body {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .order-amount {
        margin-top: 8px;
    }
}

/* ============================================
   深色模式
   ============================================ */

[data-theme="dark"] .model-price-section {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .price-label {
    color: var(--text-muted);
}

[data-theme="dark"] .payment-modal {
    background: var(--bg-primary);
}

[data-theme="dark"] .payment-modal-header {
    border-color: var(--border-color);
}

[data-theme="dark"] .payment-modal-title {
    color: var(--text-primary);
}

[data-theme="dark"] .payment-modal-close {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

[data-theme="dark"] .payment-modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .payment-modal-footer {
    border-color: var(--border-color);
}

[data-theme="dark"] .payment-product-name {
    color: var(--text-primary);
}

[data-theme="dark"] .payment-method-item {
    border-color: var(--border-color);
    background: var(--bg-secondary);
}

[data-theme="dark"] .payment-method-item:hover,
[data-theme="dark"] .payment-method-item.selected {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

[data-theme="dark"] .payment-method-name {
    color: var(--text-primary);
}

[data-theme="dark"] .order-item {
    background: var(--bg-primary);
}

[data-theme="dark"] .order-header {
    border-color: var(--border-color);
}

[data-theme="dark"] .order-product-title {
    color: var(--text-primary);
}

[data-theme="dark"] .payment-notice {
    background: var(--warning-light);
    border-color: var(--warning-color);
}

[data-theme="dark"] .payment-notice-icon {
    color: var(--warning-color);
}

[data-theme="dark"] .payment-notice-text {
    color: var(--text-secondary);
}

/* 价格相关 */
[data-theme="dark"] .price-label {
    color: var(--text-muted);
}

[data-theme="dark"] .price-value {
    color: #f87171;
}

[data-theme="dark"] .price-value.free {
    color: var(--success-color);
}

[data-theme="dark"] .price-original {
    color: var(--text-muted);
}

[data-theme="dark"] .price-tag.purchased {
    background: var(--success-bg);
    color: var(--success-color);
}

[data-theme="dark"] .price-tag.author {
    background: var(--info-bg);
    color: var(--info-color);
}

[data-theme="dark"] .price-value.login-required {
    color: var(--text-secondary);
}

[data-theme="dark"] .price-value.vip-only {
    color: #fbbf24;
}

[data-theme="dark"] .price-value.points {
    color: #a1a1aa;
}

[data-theme="dark"] .price-vip-tag {
    background: #fbbf24;
    color: #09090b;
}

/* 购买按钮 - 扁平 */
[data-theme="dark"] .btn-purchase {
    background: #e4e4e7;
    color: #09090b;
    box-shadow: none;
}

[data-theme="dark"] .btn-purchase:hover {
    background: #ffffff;
    color: #09090b;
    transform: none;
    box-shadow: none;
}

[data-theme="dark"] .btn-purchase:disabled {
    background: #3f3f46;
    color: #71717a;
}

[data-theme="dark"] .btn-purchased {
    background: var(--success-color);
    color: #09090b;
}

[data-theme="dark"] .btn-purchased:hover {
    background: var(--success-dark);
    box-shadow: none;
}

/* VIP 按钮 */
[data-theme="dark"] .btn-vip {
    background: #fbbf24;
    color: #09090b;
}

[data-theme="dark"] .btn-vip:hover {
    background: #fcd34d;
    color: #09090b;
    transform: none;
    box-shadow: none;
}

/* 积分按钮 */
[data-theme="dark"] .btn-points {
    background: #a1a1aa;
    color: #09090b;
}

[data-theme="dark"] .btn-points:hover {
    background: #d4d4d8;
    color: #09090b;
    transform: none;
    box-shadow: none;
}

/* 支付弹窗阴影 */
[data-theme="dark"] .payment-modal {
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 10px 30px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color);
}

/* 支付金额 */
[data-theme="dark"] .payment-amount {
    color: #f87171;
}

/* 支付方式标题 */
[data-theme="dark"] .payment-methods-title {
    color: var(--text-muted);
}

/* 选中钩 */
[data-theme="dark"] .payment-method-check {
    border-color: var(--border-strong);
}

[data-theme="dark"] .payment-method-item.selected .payment-method-check {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #09090b;
}

/* 支付状态 */
[data-theme="dark"] .payment-status-icon.loading {
    border-color: var(--border-color);
    border-top-color: var(--primary-color);
}

[data-theme="dark"] .payment-status-icon.success {
    background: var(--success-color);
}

[data-theme="dark"] .payment-status-icon.error {
    background: var(--danger-color);
}

[data-theme="dark"] .payment-status-text {
    color: var(--text-primary);
}

[data-theme="dark"] .payment-status-desc {
    color: var(--text-muted);
}

/* 二维码区域 */
[data-theme="dark"] .wechat-qrcode-box {
    background: #ffffff;
    border-color: #4ade80;
}

[data-theme="dark"] .wechat-qrcode-tip {
    color: var(--text-muted);
}

/* 订单相关 */
[data-theme="dark"] .order-item {
    box-shadow: none;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .order-item:hover {
    box-shadow: none;
    border-color: var(--border-strong);
}

[data-theme="dark"] .order-no {
    color: var(--text-muted);
}

[data-theme="dark"] .order-status.status-pending {
    background: var(--warning-bg);
    color: var(--warning-color);
}

[data-theme="dark"] .order-status.status-paid {
    background: var(--success-bg);
    color: var(--success-color);
}

[data-theme="dark"] .order-status.status-cancelled,
[data-theme="dark"] .order-status.status-expired {
    background: rgba(161, 161, 170, 0.12);
    color: #a1a1aa;
}

[data-theme="dark"] .order-status.status-refunded {
    background: var(--info-bg);
    color: var(--info-color);
}

[data-theme="dark"] .order-product-title a:hover {
    color: var(--primary-hover);
}

[data-theme="dark"] .order-time {
    color: var(--text-muted);
}

[data-theme="dark"] .order-amount {
    color: #f87171;
}

[data-theme="dark"] .order-actions {
    border-color: var(--border-color);
}

/* 成功横幅 */
[data-theme="dark"] .payment-success-banner {
    background: var(--success-color);
    color: #09090b;
}

[data-theme="dark"] .payment-success-banner .icon {
    background: rgba(0, 0, 0, 0.15);
}

/* ============================================
   统一支付弹窗模板样式
   ============================================ */

/* 支付表单容器 */
.tah-payment-form {
    padding: 0;
}

/* 商品信息卡片 - 高端玻璃拟态设计 */
.tah-product-info {
    position: relative;
    border-radius: 20px;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.9) 100%);
    border: 1px solid rgba(226,232,240,0.8);
    box-shadow: 
        0 4px 24px rgba(0,0,0,0.04),
        0 1px 2px rgba(0,0,0,0.02),
        inset 0 1px 0 rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

/* 商品卡片装饰光效 */
.tah-product-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7, #ec4899);
    opacity: 0.8;
}

.tah-product-info .product-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.tah-product-info .product-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    padding: 5px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(99,102,241,0.35);
}

.tah-product-info .product-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    line-height: 1.4;
}

.tah-product-info .product-subtitle {
    font-size: 13px;
    color: var(--text-muted, #64748b);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tah-product-info .product-subtitle::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--text-muted, #94a3b8);
    border-radius: 50%;
}

.tah-product-info .product-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px dashed rgba(148,163,184,0.3);
}

.tah-product-info .original-price {
    font-size: 14px;
    color: var(--text-muted, #94a3b8);
    text-decoration: line-through;
    opacity: 0.8;
}

.tah-product-info .current-price {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

/* 支付方式区域 */
.tah-payment-methods-section {
    margin-bottom: 24px;
}

.tah-payment-methods-section .payment-section-title {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    margin-bottom: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tah-payment-methods-section .payment-section-title::before {
    content: '';
    display: block;
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
    border-radius: 2px;
}

/* 支付方式网格 */
.tah-payment-methods .payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 12px;
}

/* 支付方式单选项 - 高端卡片设计 */
.tah-payment-methods .payment-method-radio {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 12px;
    border-radius: 16px;
    border: 2px solid transparent;
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    box-shadow: 
        0 2px 12px rgba(0,0,0,0.04),
        0 1px 3px rgba(0,0,0,0.02),
        inset 0 1px 0 rgba(255,255,255,0.9);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tah-payment-methods .payment-method-radio::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: all 0.3s ease;
}

.tah-payment-methods .payment-method-radio:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(0,0,0,0.08),
        0 2px 6px rgba(0,0,0,0.04);
}

.tah-payment-methods .payment-method-radio:hover::before {
    background: linear-gradient(135deg, #94a3b8, #64748b);
}

.tah-payment-methods .payment-method-radio.active {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(99,102,241,0.15),
        0 2px 6px rgba(99,102,241,0.08);
}

.tah-payment-methods .payment-method-radio.active::before {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* 支付方式图标 */
.tah-payment-methods .payment-method-radio .payment-icon-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    transition: transform 0.3s ease;
}

.tah-payment-methods .payment-method-radio:hover .payment-icon-img,
.tah-payment-methods .payment-method-radio.active .payment-icon-img {
    transform: scale(1.08);
}

.tah-payment-methods .payment-method-radio .payment-method-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}

.tah-payment-methods .payment-method-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    text-align: center;
    transition: color 0.2s ease;
}

.tah-payment-methods .payment-method-radio.active .payment-method-name {
    color: #4f46e5;
}

/* 选中勾选标记 - 更精致的设计 */
.tah-payment-methods .payment-method-radio.active::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 0 14px 0 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 11px;
    background-repeat: no-repeat;
    background-position: 7px 6px;
    box-shadow: 0 2px 6px rgba(99,102,241,0.4);
}

/* 支付按钮 - 高端渐变设计 */
.tah-payment-submit {
    margin-top: 24px;
}

.tah-pay-button {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 17px;
    padding: 16px 28px;
    border: none;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    background-size: 200% 100%;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 16px rgba(99,102,241,0.35),
        0 2px 4px rgba(99,102,241,0.2),
        inset 0 1px 0 rgba(255,255,255,0.2);
    letter-spacing: 0.3px;
}

/* 按钮光泽效果 */
.tah-pay-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255,255,255,0.3), 
        transparent
    );
    transition: left 0.6s ease;
}

.tah-pay-button:hover {
    background-position: 100% 0;
    box-shadow: 
        0 8px 28px rgba(99,102,241,0.45),
        0 4px 8px rgba(99,102,241,0.25),
        inset 0 1px 0 rgba(255,255,255,0.25);
    transform: translateY(-2px);
}

.tah-pay-button:hover::before {
    left: 100%;
}

.tah-pay-button:active {
    transform: translateY(0);
    box-shadow: 
        0 4px 16px rgba(99,102,241,0.35),
        0 2px 4px rgba(99,102,241,0.2);
}

.tah-pay-button:disabled,
.tah-pay-button.loading {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
    background-position: 0 0;
}

.tah-pay-button .pay-price-text {
    font-weight: 800;
    font-size: 18px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.tah-pay-button .pay-button-text {
    font-weight: 600;
}

/* 错误提示 */
.tah-payment-modal__error {
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted, #94a3b8);
    font-size: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.tah-payment-modal__error::before {
    content: '';
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #fecaca, #fca5a5);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ef4444' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'/%3E%3C/svg%3E");
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: center;
}

/* 统一弹窗内容容器 */
.tah-modal-content {
    padding: 0;
    overflow: hidden;
}

.tah-modal-content .modal-body {
    padding: 24px 28px 28px;
}

/* 入场动画 */
@keyframes tah-modal-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tah-slide-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tah-gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.tah-modal-content .tah-payment-form {
    animation: tah-modal-fade-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.tah-modal-content .tah-product-info {
    animation: tah-slide-up 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s backwards;
}

.tah-modal-content .tah-payment-methods-section {
    animation: tah-slide-up 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.12s backwards;
}

.tah-modal-content .tah-payment-submit {
    animation: tah-slide-up 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
}

/* 商品卡片顶部渐变动画 */
.tah-product-info::before {
    background-size: 200% 100%;
    animation: tah-gradient-shift 3s ease infinite;
}

/* 支付方式选中动画 */
@keyframes tah-check-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.tah-payment-methods .payment-method-radio.active::after {
    animation: tah-check-pop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 安全提示标识 */
.tah-payment-submit::after {
    content: '🔒 安全支付';
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    margin-top: 14px;
    letter-spacing: 0.5px;
}

/* 深色模式 - 高端暗夜风格 */
[data-theme="dark"] .tah-product-info {
    background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.9) 100%);
    border-color: rgba(71,85,105,0.5);
    box-shadow: 
        0 4px 24px rgba(0,0,0,0.2),
        0 1px 2px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

[data-theme="dark"] .tah-product-info::before {
    opacity: 0.9;
}

[data-theme="dark"] .tah-product-info .product-header {
    border-color: rgba(71,85,105,0.3);
}

[data-theme="dark"] .tah-product-info .product-title {
    color: #f1f5f9;
}

[data-theme="dark"] .tah-product-info .product-subtitle {
    color: #94a3b8;
}

[data-theme="dark"] .tah-product-info .product-subtitle::before {
    background: #64748b;
}

[data-theme="dark"] .tah-product-info .product-price {
    border-top-color: rgba(71,85,105,0.4);
}

[data-theme="dark"] .tah-product-info .current-price {
    background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .tah-payment-methods-section .payment-section-title {
    color: #94a3b8;
}

[data-theme="dark"] .tah-payment-methods-section .payment-section-title::before {
    background: linear-gradient(180deg, #818cf8, #a78bfa);
}

[data-theme="dark"] .tah-payment-methods .payment-method-radio {
    background: linear-gradient(135deg, rgba(30,41,59,0.9) 0%, rgba(15,23,42,0.8) 100%);
    box-shadow: 
        0 2px 12px rgba(0,0,0,0.15),
        0 1px 3px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.03);
}

[data-theme="dark"] .tah-payment-methods .payment-method-radio::before {
    background: linear-gradient(135deg, #475569, #334155);
}

[data-theme="dark"] .tah-payment-methods .payment-method-radio:hover {
    box-shadow: 
        0 8px 24px rgba(0,0,0,0.2),
        0 2px 6px rgba(0,0,0,0.12);
}

[data-theme="dark"] .tah-payment-methods .payment-method-radio:hover::before {
    background: linear-gradient(135deg, #64748b, #475569);
}

[data-theme="dark"] .tah-payment-methods .payment-method-radio.active {
    background: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(139,92,246,0.1) 100%);
    box-shadow: 
        0 8px 24px rgba(99,102,241,0.2),
        0 2px 6px rgba(99,102,241,0.1);
}

[data-theme="dark"] .tah-payment-methods .payment-method-radio.active::before {
    background: linear-gradient(135deg, #818cf8, #a78bfa);
}

[data-theme="dark"] .tah-payment-methods .payment-method-name {
    color: #cbd5e1;
}

[data-theme="dark"] .tah-payment-methods .payment-method-radio.active .payment-method-name {
    color: #a5b4fc;
}

[data-theme="dark"] .tah-payment-methods .payment-method-radio.active::after {
    background: linear-gradient(135deg, #818cf8, #a78bfa);
    box-shadow: 0 2px 6px rgba(129,140,248,0.4);
}

[data-theme="dark"] .tah-pay-button {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    box-shadow: 
        0 4px 16px rgba(99,102,241,0.3),
        0 2px 4px rgba(99,102,241,0.15),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

[data-theme="dark"] .tah-pay-button:hover {
    box-shadow: 
        0 8px 28px rgba(99,102,241,0.35),
        0 4px 8px rgba(99,102,241,0.2),
        inset 0 1px 0 rgba(255,255,255,0.15);
}

[data-theme="dark"] .tah-payment-modal__error {
    color: #94a3b8;
}

/* 响应式 */
@media (max-width: 480px) {
    .tah-product-info {
        padding: 16px 18px;
        border-radius: 16px;
    }
    
    .tah-product-info .product-tag {
        font-size: 10px;
        padding: 4px 10px;
    }
    
    .tah-product-info .product-title {
        font-size: 14px;
    }
    
    .tah-payment-methods .payment-methods-grid {
        grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
        gap: 10px;
    }
    
    .tah-payment-methods .payment-method-radio {
        padding: 14px 8px;
        border-radius: 14px;
    }
    
    .tah-payment-methods .payment-method-radio .payment-icon-img,
    .tah-payment-methods .payment-method-radio .payment-method-icon {
        width: 36px;
        height: 36px;
    }
    
    .tah-payment-methods .payment-method-name {
        font-size: 12px;
    }
    
    .tah-product-info .current-price {
        font-size: 24px;
    }
    
    .tah-pay-button {
        padding: 14px 22px;
        font-size: 16px;
        border-radius: 14px;
    }
    
    .tah-pay-button .pay-price-text {
        font-size: 16px;
    }
    
    .tah-modal-content .modal-body {
        padding: 16px 18px 20px;
    }
}