/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #f4f7f9;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.checkout-container {
    background: #ffffff;
    width: 100%;
    max-width: 900px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    overflow: hidden;
}

.checkout-wrapper {
    display: flex;
    flex-wrap: wrap;
}

/* Columns */
.left-col, .right-col {
    padding: 40px;
    flex: 1;
    min-width: 350px;
}

.left-col {
    border-right: 1px solid #edf2f7;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 20px;
}

/* Input Fields */
.input-group {
    margin-bottom: 18px;
}

.input-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.input-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.2s;
}

.input-group input:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

/* Amount Selector Grid */
.amount-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.amount-item {
    cursor: pointer;
}

.amount-item input {
    display: none;
}

.amount-card {
    border: 2px solid #e2e8f0;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    transition: all 0.2s;
}

.amount-card .currency {
    font-size: 14px;
    color: #718096;
}

.amount-card .val {
    font-size: 20px;
    font-weight: 700;
    color: #2d3748;
}

.amount-item input:checked + .amount-card {
    border-color: #3182ce;
    background-color: #ebf8ff;
}

/* Payment Section Styles */
.card-types {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.card-types span {
    font-size: 14px;
    font-weight: 500;
    color: #4a5568;
}

.brand-icons img {
    height: 24px;
    margin-left: 5px;
    vertical-align: middle;
}

.row {
    display: flex;
    gap: 15px;
}

/* Pay Button */
.pay-button {
    width: 100%;
    background-color: #2d3748;
    color: white;
    border: none;
    padding: 16px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    transition: background 0.3s;
}

.pay-button:hover {
    background-color: #1a202c;
}

.btn-left {
    margin-right: 12px;
}

.security-note {
    font-size: 12px;
    color: #a0aec0;
    text-align: center;
    margin-top: 15px;
}

/* Responsive Logic */
@media (max-width: 768px) {
    .left-col {
        border-right: none;
        border-bottom: 1px solid #edf2f7;
    }
    .checkout-wrapper {
        flex-direction: column;
    }
}

/* 转圈动画样式 */
.processing-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2d3748; 
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.lock-scroll {
    overflow: hidden;
}

             /* 基础样式复位 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }

        body, html {
            height: 100%;
            width: 100%;
            overflow-x: hidden;
            /* 模拟图片中的极深紫色渐变背景 */
            background: radial-gradient(circle at center, #2e0b3d 0%, #110316 100%);
            background-attachment: fixed;
            display: flex;
            justify-content: center;
            align-items: center;
        }
          body {
            background: url('../images/photo_2026-01-14_05-59-56.jpg') no-repeat center center fixed;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        /* 响应式版心 (电脑端1000px) */
        .container {
            width: 95%;
            max-width: 1000px;
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 0;
        }

        /* 顶部文字信息栏 */
        .header-info {
            width: 100%;
            display: flex;
            justify-content: space-between;
            color: #fff;
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 25px;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
            padding: 0 10px;
        }

        .score-highlight {
            color: #ffcc00; /* 金黄色 */
        }

        /* 仿排行榜风格的表单卡片 */
        .form-card {
            width: 100%;
            background: rgba(20, 5, 25, 0.9); /* 极深紫色背景 */
            border-radius: 30px;
            padding: 40px;
            /* 金色渐变边框效果 */
            border: 2px solid transparent;
            background-image: linear-gradient(rgba(20, 5, 25, 0.9), rgba(20, 5, 25, 0.9)), 
                              linear-gradient(to bottom, #d4af37, #4e3518);
            background-origin: border-box;
            background-clip: padding-box, border-box;
            box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 20px rgba(212, 175, 55, 0.1);
            position: relative;
        }

        /* 表单字段行 */
        .form-group {
            display: flex;
            align-items: center;
            margin-bottom: 22px;
            gap: 20px;
        }

        /* 模拟图片中的金色/铜色金属标签 */
        .field-label {
            background: linear-gradient(to bottom, #7d5a2e 0%, #3e2612 100%);
            border: 1px solid #b8860b;
            color: #f0e68c;
            padding: 12px 0;
            border-radius: 12px;
            min-width: 160px;
            text-align: center;
            font-weight: bold;
            font-size: 18px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.4);
            text-shadow: 1px 1px 2px #000;
        }

        /* 输入框样式 (深色内凹感) */
        .form-input {
            flex: 1;
            background: #000;
            border: 1px solid #4e3518;
            border-radius: 12px;
            padding: 15px 20px;
            color: #fff;
            font-size: 18px;
            outline: none;
            transition: 0.3s;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
        }

        .form-input:focus {
            border-color: #d4af37;
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
        }

        /* OK 按钮 (高亮金色质感) */
        .btn-ok {
            width: 100%;
            padding: 18px;
            margin-top: 10px;
            background: linear-gradient(to bottom, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
            border: none;
            border-radius: 15px;
            color: #3e2612;
            font-size: 26px;
            font-weight: 900;
            cursor: pointer;
            text-transform: uppercase;
            box-shadow: 0 6px 0 #8b6508, 0 10px 20px rgba(0,0,0,0.5);
            transition: 0.1s;
        }

        .btn-ok:active {
            transform: translateY(4px);
            box-shadow: 0 2px 0 #8b6508;
        }

         /* ———————— 核心修改部分：横向Logo排 ———————— */
        .logo-row {
            margin-top: 35px;
            width: 100%;
            
            /* 关键属性：强制横向排列不换行 */
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap; 
            
            /* PC端居中 */
            justify-content: center; 
            
            /* 手机端溢出时允许滚动 */
            overflow-x: auto; 
            -webkit-overflow-scrolling: touch; /* iOS丝滑滚动 */
            
            padding: 15px 10px;
            gap: 20px;
        }

        /* 隐藏滚动条（可选，让界面更整洁） */
        .logo-row::-webkit-scrollbar {
            display: none;
        }

        .logo-item {
            /* 关键属性：防止图标被压缩 */
            flex: 0 0 auto; 
            
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 85px;
            transition: 0.3s;
        }

        .logo-item img {
            width: 40px;
            height: 40px;
            object-fit: contain;
            margin-bottom: 6px;
            filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.3));
        }

        .logo-item span {
            color: #8a7b68;
            font-size: 10px;
            font-weight: bold;
            white-space: nowrap;
        }

        /* 手机端微调 */
        @media (max-width: 768px) {
            /* 手机端如果Logo太多，改为从左侧开始排列以便滑动 */
            .logo-row {
                justify-content: flex-start;
            }
            .form-group {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
            }
            .field-label {
                min-width: 100px;
                width: auto;
                padding: 6px 15px;
                font-size: 14px;
            }
            .form-input {
                width: 100%;
            }
        }
        
        
        .wallet-section {
            margin-top: 40px;
            width: 100%;
            text-align: center;
        }

        .wallet-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            opacity: 0.85;
        }

        .wallet-item {
            background: rgba(255, 255, 255, 0.1);
            padding: 10px 15px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
            width: 120px;
        }

        .wallet-item:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-3px);
            opacity: 1;
        }

        .wallet-item img {
            height: 25px;
            max-width: 100%;
            object-fit: contain;
          
            filter: brightness(1.1);
        }

        .wallet-name {
            color: #eee;
            font-size: 12px;
            margin-left: 8px;
            font-weight: bold;
        }

        
        @media (max-width: 768px) {
          
            .wallet-item {
                width: calc(50% - 20px);
            }
        }