<!-- 支付页面 -->
<template>
	<view class="payment-page">
		<scroll-view class="payment-content" direction="vertical">
			<!-- 支付成功样式头部 -->
			<view class="payment-amount-header">
				<text class="amount-label">支付金额</text>
				<view class="amount-value-row">
					<text class="amount-currency">¥</text>
					<text class="amount-number">{{ amount.toFixed(2) }}</text>
				</view>
				<text class="order-no-text">订单号: {{ orderNo }}</text>
			</view>

			<!-- 支付方式 -->
			<view class="methods-section-new">
				<view class="section-header">
					<text class="section-title">选择支付方式</text>
				</view>
				<view class="method-list">
					<view v-for="method in paymentMethods" 
								:key="method.id" 
								class="method-item-modern"
								@click="selectMethod(method)">
						<view class="method-left">
							<image class="method-img" :src="getMethodBrandIcon(method.id)" mode="aspectFit" />
							<view class="method-info">
								<text class="method-name">{{ method.name }}</text>
								<text class="method-desc" v-if="method.id === 'balance'">当前余额: ¥{{ userBalance.toFixed(2) }}</text>
								<text class="method-desc" v-else>{{ method.description }}</text>
							</view>
						</view>
						<view class="method-right">
							<view :class="['radio-circle', { checked: selectedMethod === method.id }]">
								<view class="radio-inner" v-if="selectedMethod === method.id"></view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 弹窗式密码输入层 -->
			<view v-if="showPassword" class="password-popup-mask" @click="closePasswordPopup">
				<view class="password-popup-content" @click.stop="">
					<view class="popup-header">
						<text class="popup-close" @click="closePasswordPopup">✕</text>
						<text class="popup-title">请输入支付密码</text>
						<view class="popup-placeholder"></view>
					</view>
					
					<view class="popup-amount-info">
						<text class="popup-amount-label">支付金额</text>
						<view class="popup-amount-row">
							<text class="popup-currency">¥</text>
							<text class="popup-value">{{ amount.toFixed(2) }}</text>
						</view>
					</view>

					<view class="password-input-row">
						<view v-for="(_, index) in 6" 
									:key="index" 
									class="password-box">
							<view v-if="password.length > index" class="password-dot"></view>
						</view>
					</view>
					
					<text class="forgot-password-link" @click="forgotPassword">忘记密码？</text>
					
					<!-- 这里的密码键盘会被放在页面底部，但我们可以通过 CSS 控制它 -->
					
					<!-- 移动键盘到弹窗内部 -->
					<view class="password-keyboard-popup">
						<view class="keyboard-grid">
							<view v-for="num in 9" 
										:key="num" 
										class="keyboard-key"
										@click="inputPassword(num.toString())">
								<text class="key-text">{{ num }}</text>
							</view>
							<view class="keyboard-key"></view>
							<view class="keyboard-key" @click="inputPassword('0')">
								<text class="key-text">0</text>
							</view>
							<view class="keyboard-key" @click="deletePassword">
								<text class="key-text">⌫</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部支付按钮 -->
		<view class="payment-bottom" v-if="!showPassword">
			<view class="price-summary">
				<text class="summary-label">需支付:</text>
				<text class="summary-price">¥{{ amount.toFixed(2) }}</text>
			</view>
			<button class="pay-btn" 
							:class="{ disabled: isPaying || (selectedMethod === 'balance' && userBalance < amount) }"
							@click="confirmPayment">
				<text v-if="!isPaying" class="pay-text">{{ getPayButtonText() }}</text>
				<text v-else class="pay-text">支付中...</text>
			</button>
		</view>

	</view>
</template>

<script setup lang="uts">
import { ref, onMounted, watch, computed, onUnmounted } from 'vue'
import { supabaseService } from '@/utils/supabaseService.uts'

type PaymentMethodType = {
	id: string
	name: string
	description: string
	icon: string
	enabled: boolean
}

const orderId = ref<string>('')
const orderNo = ref<string>('')
const amount = ref<number>(0)
const paymentMethods = ref<Array<PaymentMethodType>>([])
const selectedMethod = ref<string>('wechat')
const userBalance = ref<number>(0)
const isPaying = ref<boolean>(false)
const showPassword = ref<boolean>(false)
const password = ref<string>('')

// 价格相关变量
const productAmount = ref<number>(0) // 商品总价
const deliveryFee = ref<number>(0) // 运费
const discountAmount = ref<number>(0) // 优惠减免

// 加载支付方式（必须在 onMounted 之前定义）
const loadPaymentMethods = () => {
	const methods: PaymentMethodType[] = [
		{
			id: 'wechat',
			name: '微信支付',
			description: '推荐安装微信5.0及以上版本使用',
			icon: '💳',
			enabled: true
		},
		{
			id: 'alipay',
			name: '支付宝',
			description: '推荐安装支付宝10.0及以上版本使用',
			icon: '💳',
			enabled: true
		},
		{
			id: 'balance',
			name: '余额支付',
			description: '使用账户余额支付',
			icon: '💰',
			enabled: true
		},
		{
			id: 'bankcard',
			name: '银行卡支付',
			description: '支持储蓄卡、信用卡',
			icon: '💳',
			enabled: true
		}
	]
	paymentMethods.value = methods
}

// 加载用户余额（必须在 onMounted 之前定义）
const loadUserBalance = async () => {
	try {
        const balance = await supabaseService.getUserBalanceNumber()
        userBalance.value = balance
	} catch (err) {
		console.error('加载用户余额异常:', err)
        userBalance.value = 0
	}
}

// 计算价格明细（必须在 onMounted 之前定义）
const calculatePriceDetails = (totalAmount: number) => {
	// 模拟计算各项费用
	// 假设商品总价占总金额的80%，运费占10%，优惠减免占10%
	productAmount.value = totalAmount * 0.8
	deliveryFee.value = totalAmount * 0.1
	discountAmount.value = totalAmount * 0.1
	
	// 确保总和等于应付金额
	const calculatedTotal = productAmount.value + deliveryFee.value - discountAmount.value
	if (Math.abs(calculatedTotal - totalAmount) > 0.01) {
		// 调整商品总价以匹配应付金额
		productAmount.value = totalAmount + discountAmount.value - deliveryFee.value
	}
}

// 更新本地存储中的订单状态（必须在 onMounted 之前定义）
const updateOrderInStorage = (targetOrderId: string, status: number) => {
	try {
        // 尝试从 'orders' 读取 (checkout页面写入的key)
		const ordersStr = uni.getStorageSync('orders')
		let orders: Record<string, any>[] = []
		if (ordersStr != null && ordersStr !== '') {
			const parsed = JSON.parse(ordersStr as string)
			if (Array.isArray(parsed)) {
				for (let i = 0; i < parsed.length; i++) {
                    // 使用 JSON 序列化转换
                    const itemStr = JSON.stringify(parsed[i])
                    const itemParsed = JSON.parse(itemStr)
                    if (itemParsed != null) {
                        orders.push(itemParsed as Record<string, any>)
                    }
				}
			}
		}
		
		let foundIndex = -1
		for (let i = 0; i < orders.length; i++) {
			const o = orders[i]
			if (o['id'] === targetOrderId) {
				foundIndex = i
				break
			}
		}
		
		if (foundIndex !== -1) {
			orders[foundIndex]['status'] = status
			orders[foundIndex]['payment_status'] = status === 2 ? 1 : 0 // 2=待发货(已支付), 1=待支付(未支付)
			orders[foundIndex]['updated_at'] = new Date().toISOString()
            // 确保更新的是 'orders' key
			uni.setStorageSync('orders', JSON.stringify(orders))
            console.log('订单状态已更新到Storage (orders):', targetOrderId, status)
		} else {
            // 本地缓存中没有订单数据是正常的，数据在数据库中
            console.log('本地缓存中无订单数据，已忽略:', targetOrderId)
        }
	} catch (e) {
		console.error('更新订单状态失败', e)
	}
}

// 取消支付，更新订单状态（必须在 goBack 之前定义）
const cancelPayment = async () => {
	try {
		// 这里应该调用API更新订单状态为待支付（status: 1）
		// 模拟更新订单状态
        
        // 更新本地存储
        updateOrderInStorage(orderId.value, 1) // 1: 待支付
		
		// 发布订单更新事件，让profile页面可以刷新数据
		uni.$emit('orderUpdated', { orderId: orderId.value, status: 1 })
		
		uni.showToast({
			title: '已保存到待支付订单',
			icon: 'success'
		})
		
		// 延迟返回，让用户看到提示
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
		
	} catch (err) {
		console.error('取消支付异常:', err)
		uni.showToast({
			title: '操作失败',
			icon: 'none'
		})
	}
}

// 返回（必须在 onBackPress 之前定义）
const goBack = () => {
	uni.showModal({
		title: '取消支付',
		content: '确定要取消支付吗？取消后订单将保存到待支付订单中',
		confirmText: '取消支付',
		cancelText: '继续支付',
		success: (res) => {
			if (res.confirm) {
				// 用户确认取消支付，更新订单状态为待支付
				cancelPayment()
			}
		}
	})
}

// 加载订单信息（必须在 onMounted 之前定义）
const loadOrderInfo = async () => {
	try {
        if (orderId.value == '') return

        const order = await supabaseService.getOrderDetail(orderId.value)
        if (order != null) {
            // 使用 JSON 序列化转换对象
            const orderStr = JSON.stringify(order)
            const orderParsed = JSON.parse(orderStr)
            if (orderParsed == null) {
                console.error('订单数据解析失败')
                return
            }
            const orderObj = orderParsed as UTSJSONObject
            
            const orderNoVal = orderObj.getString('order_no')
            if (orderNoVal != null) {
                orderNo.value = orderNoVal
            }
            
            const totalAmount = orderObj.getNumber('total_amount')
            const dbAmount = totalAmount ?? 0
            if (dbAmount > 0) {
                 amount.value = dbAmount
            }
            const items = orderObj.get('items')
            if (items != null && Array.isArray(items) && items.length > 0) {
                // Could update product name etc if displayed
            }
        } else {
             // Fallback or error
             console.warn('Order not found in DB', orderId.value)
             if (orderNo.value == '') orderNo.value = 'ORD_PENDING_' + Date.now()
        }
	} catch (err) {
		console.error('加载订单信息异常:', err)
	}
}

// 生命周期
onLoad((options) => {
    if (options != null) {
        const orderIdValue = options['orderId']
        if (orderIdValue != null) {
            orderId.value = orderIdValue as string
            loadOrderInfo()
        }
        
        const amountValue = options['amount']
        if (amountValue != null) {
            amount.value = parseFloat(amountValue.toString())
        }
        
        // 获取传递的价格详情
        const productAmountValue = options['productAmount']
        if (productAmountValue != null) {
            productAmount.value = parseFloat(productAmountValue.toString())
        }
        const deliveryFeeValue = options['deliveryFee']
        if (deliveryFeeValue != null) {
            deliveryFee.value = parseFloat(deliveryFeeValue.toString())
        }
        const discountAmountValue = options['discountAmount']
        if (discountAmountValue != null) {
            discountAmount.value = parseFloat(discountAmountValue.toString())
        }
        
        // 如果没有传详情，尝试根据总价估算（兼容旧逻辑，但优先使用传参）
        if (productAmountValue == null && amount.value > 0) {
            calculatePriceDetails(amount.value)
        }
        
        loadPaymentMethods()
        loadUserBalance()
    }
})

onMounted(() => {
    // onMounted 中的逻辑已移到 onLoad 中
})

// 监听返回操作（包含系统返回键和导航栏返回按钮）
onBackPress((options) => {
	// 如果是通过代码主动调用 navigateBack 返回，则允许
	if (options.from === 'navigateBack') {
		return false
	}
	
	// 否则拦截返回，显示确认弹窗
	goBack()
	return true
})

// 获取当前用户ID
const getCurrentUserId = (): string => {
	const userStore = uni.getStorageSync('userInfo')
	if (userStore != null) {
        // 使用 JSON 序列化转换
        const userStr = JSON.stringify(userStore)
        const userParsed = JSON.parse(userStr)
        if (userParsed != null) {
            const userObj = userParsed as UTSJSONObject
            const id = userObj.getString('id')
            if (id != null) {
                return id
            }
        }
	}
	return ''
}

// 获取支付方式图标
const getMethodIcon = (methodId: string): string => {
	if (methodId === 'wechat') {
		return '💳'
	} else if (methodId === 'alipay') {
		return '💳'
	} else if (methodId === 'balance') {
		return '💰'
	} else if (methodId === 'bankcard') {
		return '💳'
	}
	return '💳'
}

// 获取支付品牌图片
const getMethodBrandIcon = (methodId: string): string => {
	if (methodId === 'wechat') {
		return '/static/logo.png' // 替换为真实的微信支付图标路径
	} else if (methodId === 'alipay') {
		return '/static/logo.png' // 替换为真实的支付宝图标路径
	} else if (methodId === 'balance') {
		return '/static/logo.png' // 替换为真实的余额支付图标路径
	} else if (methodId === 'bankcard') {
		return '/static/logo.png' // 替换为真实的银行卡支付图标路径
	}
	return '/static/logo.png'
}

// 选择支付方式
const selectMethod = (method: PaymentMethodType) => {
	if (!method.enabled) {
		uni.showToast({
			title: '该支付方式暂不可用',
			icon: 'none'
		})
		return
	}
	
	selectedMethod.value = method.id
	// 切换方式时，除非点击支付，否则不自动弹出密码
	showPassword.value = false
	password.value = '' // 清空密码
}

// 关闭密码弹窗
const closePasswordPopup = () => {
	showPassword.value = false
	password.value = ''
}

// 获取支付按钮文本
const getPayButtonText = (): string => {
	if (selectedMethod.value === 'balance' && userBalance.value < amount.value) {
		return '余额不足'
	}
	
	if (selectedMethod.value === 'wechat') {
		return '微信支付'
	} else if (selectedMethod.value === 'alipay') {
		return '支付宝支付'
	} else if (selectedMethod.value === 'balance') {
		return '余额支付'
	} else if (selectedMethod.value === 'bankcard') {
		return '银行卡支付'
	}
	return '确认支付'
}

// 减少商品库存
// const reduceStock = (orderId: string) => {
    // Update should happen on server side during payment processing
// }

// 确认支付
const confirmPayment = async () => {
	if (isPaying.value) return
	
	// 余额支付或银行卡支付检查密码
	if (selectedMethod.value === 'balance' || selectedMethod.value === 'bankcard') {
		if (selectedMethod.value === 'balance' && userBalance.value < amount.value) {
			uni.showToast({
				title: '余额不足',
				icon: 'none'
			})
			return
		}
		
		if (!showPassword.value) {
			showPassword.value = true
			password.value = ''
			return
		}
		
		if (password.value.length !== 6) {
			uni.showToast({
				title: '请输入6位支付密码',
				icon: 'none'
			})
			return
		}
	}
	
	isPaying.value = true
	uni.showLoading({ title: '支付中...' })
	
	try {
        console.log('[confirmPayment] 开始支付, orderId:', orderId.value, 'method:', selectedMethod.value)
        
        const success = await supabaseService.payOrder(orderId.value, selectedMethod.value, amount.value)
        console.log('[confirmPayment] 支付结果:', success)

        if (!success) {
            console.error('[confirmPayment] payOrder 返回 false')
            uni.hideLoading()
            uni.showToast({
                title: '支付处理失败',
                icon: 'none'
            })
            isPaying.value = false
            return
        }
		
		uni.hideLoading()
		
		updateOrderInStorage(orderId.value, 2)
		
		uni.showToast({
			title: '支付成功',
			icon: 'success',
			duration: 2000
		})
		
		uni.$emit('orderUpdated', { orderId: orderId.value, status: 2 })
		
		setTimeout(() => {
			uni.redirectTo({
				url: `/pages/mall/consumer/payment-success?orderId=${orderId.value}`
			})
		}, 1500)
		
	} catch (err) {
		console.error('[confirmPayment] 支付异常:', err)
		uni.hideLoading()
		uni.showToast({
			title: '支付失败',
			icon: 'none'
		})
		isPaying.value = false
	}
}

// 获取支付方式代码
const getPaymentMethodCode = (methodId: string): number => {
	if (methodId === 'wechat') {
		return 1
	} else if (methodId === 'alipay') {
		return 2
	} else if (methodId === 'balance') {
		return 3
	} else if (methodId === 'bankcard') {
		return 4
	}
	return 0
}

// 验证密码（必须在 watch 之前定义）
const verifyPassword = async () => {
	// 这里应该验证支付密码，这里简单模拟
	const userId = getCurrentUserId()
	
	try {
		// 模拟验证
		await new Promise<void>((resolve: (value: void) => void) => {
			setTimeout(() => {
				resolve()
			}, 500)
		})
		
		// 假设密码正确
		const isCorrect = true
		
		if (isCorrect) {
			// 密码正确，继续支付
			confirmPayment()
		} else {
			password.value = ''
			uni.showToast({
				title: '密码错误',
				icon: 'none'
			})
		}
		
	} catch (err) {
		console.error('验证密码异常:', err)
	}
}

// 输入密码
const inputPassword = (num: string) => {
	if (password.value.length >= 6) return
	password.value += num
}

// 删除密码
const deletePassword = () => {
	if (password.value.length > 0) {
		password.value = password.value.slice(0, -1)
	}
}

// 监听密码输入
watch(password, (newPassword: string) => {
	if (newPassword.length === 6) {
		// 自动验证密码
		verifyPassword()
	}
})

// 忘记密码
const forgotPassword = () => {
	uni.navigateTo({
		url: '/pages/user/forgot-password'
	})
}

// 在组件卸载时移除返回键监听
onUnmounted(() => {
	// uni.offBackPress() 在uni-app中不需要手动移除
})
</script>

<style scoped>
.payment-page {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	overflow: hidden;
}

.payment-header {
	background-color: #ffffff;
	padding: 15px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #e5e5e5;
}

.back-btn {
	font-size: 24px;
	color: #333333;
	padding: 5px;
	margin-right: 15px;
}

.header-title {
	font-size: 18px;
	font-weight: bold;
	color: #333333;
}

.payment-content {
	flex: 1;
	/* overflow-y: auto; */
	background-color: #f8f8f8;
}

.payment-amount-header {
	background-color: #ffffff;
	padding: 40px 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}

.amount-label {
	font-size: 14px;
	color: #666;
	margin-bottom: 10px;
}

.amount-value-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    margin-bottom: 10px;
}

.amount-currency {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-right: 4px;
}

.amount-number {
    font-size: 40px;
    font-weight: bold;
    color: #333;
}

.order-no-text {
    font-size: 13px;
    color: #999;
}

.methods-section-new {
    background-color: #ffffff;
    margin: 0 12px;
    border-radius: 12px;
    padding: 15px;
}

.section-header {
    margin-bottom: 15px;
}

.section-title {
	font-size: 16px;
	font-weight: bold;
	color: #333333;
}

.method-list {
	display: flex;
	flex-direction: column;
}

.method-item-modern {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 0.5px solid #f5f5f5;
}

.method-item-modern:last-child {
    border-bottom: none;
}

.method-left {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.method-img {
    width: 28px;
    height: 28px;
    margin-right: 12px;
}

.method-info {
    display: flex;
    flex-direction: column;
}

.method-name {
	font-size: 15px;
	color: #333;
}

.method-desc {
	font-size: 11px;
	color: #999;
	margin-top: 2px;
}

.radio-circle {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radio-circle.checked {
    border-color: #ff5000;
    background-color: #ff5000;
}

.radio-inner {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #ffffff;
}

.balance-section {
	background-color: #ffffff;
	padding: 15px;
	margin-bottom: 10px;
}

.balance-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.balance-label {
	font-size: 14px;
	color: #333333;
}

.balance-value {
	font-size: 18px;
	color: #ff4757;
	font-weight: bold;
}

.balance-tip {
	padding: 10px;
	background-color: #fff0f0;
	border-radius: 5px;
}

.tip-text {
	font-size: 12px;
	color: #ff4757;
}

/* 密码输入弹窗 */
.password-popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	z-index: 1000;
}

.password-popup-content {
	background-color: #ffffff;
	border-radius: 16px 16px 0 0;
	padding: 20px 0; /* 减少左右内边距，让键盘撑满 */
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: slideUp 0.3s ease-out;
	width: 100%;
}

@keyframes slideUp {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

.popup-header {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
	padding: 0 20px;
}

.popup-close {
	font-size: 20px;
	color: #999;
	padding: 4px;
}

.popup-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
}

.popup-placeholder {
	width: 28px;
}

.popup-amount-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 30px;
}

.popup-amount-label {
	font-size: 14px;
	color: #666;
	margin-bottom: 8px;
}

.popup-amount-row {
	display: flex;
	flex-direction: row;
	align-items: baseline;
}

.popup-currency {
	font-size: 18px;
	font-weight: bold;
	color: #333;
	margin-right: 2px;
}

.popup-value {
	font-size: 32px;
	font-weight: bold;
	color: #333;
}

.password-input-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-bottom: 20px;
}

.password-box {
	width: 45px;
	height: 45px;
	border: 1px solid #ddd;
	border-right: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f9f9f9;
}

.password-box:first-child {
	border-radius: 4px 0 0 4px;
}

.password-box:last-child {
	border-right: 1px solid #ddd;
	border-radius: 0 4px 4px 0;
}

.password-dot {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: #000;
}

.forgot-password-link {
	font-size: 13px;
	color: #576b95;
	margin-bottom: 20px;
}

.password-section {
    /* 移除旧的样式或保持隐藏 */
    display: none;
}

/* 弹窗专用键盘样式 */
.password-keyboard-popup {
	width: 100%;
	background-color: #f5f5f5;
	padding: 6px;
	padding-bottom: env(safe-area-inset-bottom);
}

/* 键盘样式优化 */
.password-keyboard {
	display: none; /* 隐藏独立键盘 */
}

.keyboard-grid {
	display: flex;
	flex-wrap: wrap;
	background-color: #f5f5f5;
}

.keyboard-key {
	width: 33.33%;
	background-color: #ffffff;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid #f5f5f5;
	box-sizing: border-box;
	border-radius: 8px;
}

.keyboard-key:active {
	background-color: #e0e0e0;
}

.key-text {
	font-size: 22px;
	font-weight: 500;
	color: #333333;
}

.payment-bottom {
	background-color: #ffffff;
	border-top: 1px solid #f0f0f0;
	padding: 12px 16px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.price-summary {
	display: flex;
	flex-direction: row;
	align-items: baseline;
}

.summary-label {
	font-size: 14px;
	color: #333333;
	margin-right: 4px;
}

.summary-price {
	font-size: 24px;
	color: #ff5000;
	font-weight: bold;
}

.pay-btn {
	background-color: #ff5000;
	color: #ffffff;
	padding: 0 40px;
	height: 44px;
	line-height: 44px;
	border-radius: 22px;
	font-size: 16px;
	font-weight: bold;
	border: none;
    margin: 0;
}

.pay-btn.disabled {
	background-color: #cccccc;
	opacity: 0.6;
}

.password-keyboard {
	background-color: #ffffff;
	border-top: 1px solid #e5e5e5;
	padding: 10px;
}

.keyboard-grid {
	display: flex;
	flex-wrap: wrap;
	/* grid-template-columns: repeat(3, 1fr); uvue unsupported */
	/* grid-gap: 1px; uvue unsupported */
	background-color: #e5e5e5;
}

.keyboard-key {
	width: 33.33%;
	background-color: #ffffff;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #f5f5f5; /* mimic grid gap */
	box-sizing: border-box;
}

.key-text {
	font-size: 24px;
	color: #333333;
}
</style>

