<template>
  <view class="container">
    <!-- 退款状态提示 -->
    <view v-if="refundDisabled" class="refund-status-banner" :class="bannerType">
      <view class="banner-dot"></view>
      <text class="banner-title">{{ refundBannerTitle }}</text>
      <text class="banner-desc">{{ refundBannerDesc }}</text>
      <button class="banner-back-btn" @click="goBack">返回订单详情</button>
    </view>

    <!-- 退款商品选择 -->
    <view v-if="!refundDisabled" class="section-block product-section">
      <text class="section-title">选择退款商品</text>
      <view class="product-list">
        <view
          v-for="(product, index) in orderInfo.products"
          :key="index"
          :class="['product-item', {
            'product-item-selected': selectedProducts.includes(index),
            'product-item-refunded': isProductFullyRefunded(index)
          }]"
        >
          <view class="product-main" @click="isProductFullyRefunded(index) ? null : toggleProductSelect(index)">
            <view class="product-checkbox">
              <view v-if="isProductFullyRefunded(index)" class="checkbox-icon refunded">
                <text>✓</text>
              </view>
              <view v-else :class="['checkbox-icon', { checked: selectedProducts.includes(index) }]">
                <text v-if="selectedProducts.includes(index)">✓</text>
              </view>
            </view>
            <view class="product-image">
              <image v-if="product.image" :src="product.image" mode="aspectFill"></image>
              <view v-else class="image-placeholder"></view>
            </view>
            <view class="product-detail">
              <view class="name-container" @click.stop="showProductName(product.name)">
                <text class="product-name">{{ product.name }}</text>
                <text v-if="product.name.length > 12" class="expand-tip">...</text>
              </view>
              <view class="product-meta">
                <text class="product-price">¥{{ (product.price || 0).toFixed(2) }}</text>
                <text class="product-quantity-label">
                  购买：x{{ product.quantity }}
                  <text v-if="(product.refundedQuantity || 0) > 0" class="refunded-tag">
                    已退{{ product.refundedQuantity }}件
                  </text>
                </text>
              </view>
            </view>
          </view>

          <view v-if="selectedProducts.includes(index)" class="refund-quantity-selector">
            <view class="selector-row">
              <text class="selector-label">退款数量</text>
              <view class="quantity-control">
                <view
                  :class="['control-btn', (product.refundQuantity || 1) > 1 ? '' : 'disabled']"
                  @click.stop="decreaseQuantity(index)"
                >
                  <text>-</text>
                </view>
                <view class="quantity-display">
                  <text class="quantity-text">{{ product.refundQuantity || 1 }}</text>
                </view>
                <view
                  :class="['control-btn', (product.refundQuantity || 1) < getRemainingQuantity(index) ? '' : 'disabled']"
                  @click.stop="increaseQuantity(index)"
                >
                  <text>+</text>
                </view>
              </view>
            </view>
            <view class="refund-amount-preview">
              <text class="preview-label">退款金额</text>
              <text class="preview-value">¥{{ ((product.price || 0) * (product.refundQuantity || 1)).toFixed(2) }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="selected-tip">
        已选择 {{ selectedProducts.length }} 件商品，共 {{ refundQuantity }} 件
      </view>
    </view>

    <!-- 自定义退款金额（未选择商品时可用） -->
    <view class="section-block custom-amount-section">
      <text class="section-title">自定义退款金额</text>
      <view v-if="selectedProducts.length > 0" class="custom-amount-display">
        <text class="calculated-hint">已根据所选商品自动计算退款金额</text>
        <text class="calculated-amount">¥{{ refundAmount.toFixed(2) }}</text>
      </view>
      <view v-else class="custom-amount-input-wrapper">
        <view class="custom-amount-input">
          <text class="currency-symbol">¥</text>
          <input
            v-model="customRefundAmount"
            type="digit"
            placeholder="请输入退款金额"
            class="amount-input"
          />
        </view>
        <text class="amount-hint">
          退款金额不能超过实付金额 ¥{{ (orderInfo.paidAmount || orderInfo.totalAmount || 0).toFixed(2) }}
        </text>
      </view>
    </view>

    <!-- 退款原因 -->
    <view class="section-block reason-section">
      <text class="section-title">退款原因</text>
      <radio-group @change="handleReasonChange">
        <label class="radio-item" v-for="(reason, index) in refundReasons" :key="index">
          <view class="radio-wrapper">
            <radio :value="reason.value" :checked="selectedReason === reason.value" color="#999999" />
          </view>
          <text class="radio-label">{{ reason.label }}</text>
        </label>
      </radio-group>

      <view v-if="selectedReason === '4'" class="remark-input-wrapper">
        <textarea
          v-model="refundRemark"
          class="remark-textarea"
          placeholder="请详细描述您的问题或投诉内容"
          maxlength="100"
          :show-confirm-bar="false"
        />
        <text class="remark-count">{{ refundRemark.length }}/100</text>
      </view>
    </view>

    <!-- 退款信息 -->
    <view class="section-block info-section">
      <text class="section-title">退款信息</text>
      <view class="info-row">
        <text class="info-label">订单编号：</text>
        <text class="info-value">{{ orderInfo.orderNo || '-' }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">订单总金额：</text>
        <text class="info-value">¥{{ (orderInfo.totalAmount || 0).toFixed(2) }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">退款数量：</text>
        <text class="info-value">{{ refundQuantity }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">退款总金额：</text>
        <text class="info-value refund-amount">¥{{ refundAmount.toFixed(2) }}</text>
      </view>
      <view class="info-row" v-if="orderInfo.payTime">
        <text class="info-label">退款期限：</text>
        <text :class="['info-value', isRefundExpired ? 'expired' : '']">{{ refundExpireText }}</text>
      </view>
    </view>

    <!-- 提示信息 -->
    <view class="section-block tip-section">
      <text class="tip-text">• 请选择需要退款的商品</text>
      <text class="tip-text">• 退款申请提交后，工作人员将尽快处理</text>
      <text class="tip-text">• 退款金额将原路返回至您的支付账户</text>
    </view>

    <!-- 确认提交按钮 -->
    <button class="submit-btn" @click="submitRefund">确认提交</button>

    <!-- 联系客服 -->
    <view class="contact-section">
      <CustomerServiceButton
        mode="link"
        :title="'退款咨询 - ' + (orderInfo?.orderNo || '')"
        :path="'/pages/refund/refund?orderId=' + String(orderInfo?.id || '')"
      >
        退款遇到问题？联系客服
      </CustomerServiceButton>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { checkAuth } from '../../utils/auth';
import { getOrderDetail } from '../../api/order';
import type { OrderInfo } from '../../api/order';
import { post } from '../../utils/request';
import { logger } from '../../utils/logger';


const orderId = ref<string>('');

const orderInfo = ref<OrderInfo>({
  id: '',
  orderNo: '',
  outTradeNo: '',
  hahaOrderNo: '',
  deviceId: '',
  totalAmount: 0,
  payStatus: '',
  status: 0,
  createTime: '',
  products: []
});

const selectedProducts = ref<number[]>([]);

const refundQuantity = computed(() => {
  return selectedProducts.value.reduce((sum, index) => {
    const product = orderInfo.value.products[index];
    return sum + (product.refundQuantity || 1);
  }, 0);
});

const refundAmount = computed(() => {
  return selectedProducts.value.reduce((sum, index) => {
    const product = orderInfo.value.products[index];
    if (product) {
      return sum + (product.price || 0) * (product.refundQuantity || 1);
    }
    return sum;
  }, 0);
});

const isRefundExpired = computed(() => {
  if (!orderInfo.value.payTime) return false;
  const payTime = new Date(orderInfo.value.payTime);
  const now = new Date();
  const diffTime = now.getTime() - payTime.getTime();
  const diffDays = diffTime / (1000 * 60 * 60 * 24);
  return diffDays > 7;
});

const refundExpireText = computed(() => {
  if (!orderInfo.value.payTime) return '';
  const payTime = new Date(orderInfo.value.payTime);
  const now = new Date();
  const diffTime = now.getTime() - payTime.getTime();
  const diffDays = diffTime / (1000 * 60 * 60 * 24);
  if (diffDays > 7) {
    return '已超过退款期限';
  } else {
    const remainingDays = Math.ceil(7 - diffDays);
    return `剩余 ${remainingDays} 天`;
  }
});

// 是否禁用退款（待审核 / 已全额退款）
const refundDisabled = computed(() => {
  if (!orderInfo.value.id) return false;
  if (orderInfo.value.refundStatus === 'PENDING') return true;
  const paid = orderInfo.value.paidAmount || orderInfo.value.totalAmount || 0;
  const refunded = orderInfo.value.refundAmount || 0;
  return refunded >= paid;
});

const bannerType = computed(() => {
  if (orderInfo.value.refundStatus === 'PENDING') return 'pending';
  return 'full';
});

const refundBannerTitle = computed(() => {
  if (orderInfo.value.refundStatus === 'PENDING') return '退款审核中';
  return '已全额退款';
});

const refundBannerDesc = computed(() => {
  if (orderInfo.value.refundStatus === 'PENDING') return '您的退款申请已提交，正在审核中，请耐心等待';
  return '该订单已全额退款，无需再次申请';
});

const goBack = () => {
  uni.navigateBack();
};

const selectedReason = ref('');
const refundRemark = ref('');
const customRefundAmount = ref<string>('');

const refundReasons = [
  { label: '订单扣款错误', value: '1' },
  { label: '扣款金额与实际金额不符', value: '2' },
  { label: '商品过期或变质', value: '3' },
  { label: '其他（请填写投诉内容）', value: '4' }
];

const handleReasonChange = (e: any) => {
  selectedReason.value = e.detail.value;
  if (selectedReason.value !== '4') {
    refundRemark.value = '';
  }
};

// 获取剩余可退数量
const getRemainingQuantity = (index: number): number => {
  const product = orderInfo.value.products[index];
  return (product.quantity || 0) - (product.refundedQuantity || 0);
};

// 商品是否已全额退款
const isProductFullyRefunded = (index: number): boolean => {
  return getRemainingQuantity(index) <= 0;
};

const toggleProductSelect = (index: number) => {
  if (isProductFullyRefunded(index)) return;
  const selectedIndex = selectedProducts.value.indexOf(index);
  if (selectedIndex > -1) {
    orderInfo.value.products[index].refundQuantity = undefined;
    selectedProducts.value.splice(selectedIndex, 1);
  } else {
    if (!orderInfo.value.products[index].refundQuantity) {
      orderInfo.value.products[index].refundQuantity = 1;
    }
    selectedProducts.value.push(index);
  }
};

const showProductName = (productName: string) => {
  uni.showModal({
    title: '商品名称',
    content: productName,
    showCancel: false,
    confirmText: '知道了'
  });
};

const decreaseQuantity = (index: number) => {
  const product = orderInfo.value.products[index];
  if (product.refundQuantity && product.refundQuantity > 1) {
    product.refundQuantity--;
  }
};

const increaseQuantity = (index: number) => {
  const product = orderInfo.value.products[index];
  const maxQty = getRemainingQuantity(index);
  if ((product.refundQuantity || 1) < maxQty) {
    if (!product.refundQuantity) {
      product.refundQuantity = 2;
    } else {
      product.refundQuantity++;
    }
  }
};

const loadOrderDetail = async () => {
  if (!orderId.value) {
    uni.showToast({ title: '订单 ID 缺失', icon: 'none' });
    setTimeout(() => { uni.navigateBack(); }, 1500);
    return;
  }

  try {
    const detail = await getOrderDetail({ orderId: orderId.value });
    orderInfo.value = detail;

    // 检查是否已全额退款
    const paidAmount = detail.paidAmount || detail.totalAmount || 0;
    if ((detail.refundAmount || 0) >= paidAmount) {
      return; // refundDisabled computed will show banner
    }

    // 检查是否有待审核的退款申请
    if (detail.refundStatus === 'PENDING') {
      return; // refundDisabled computed will show banner
    }

    if (detail.payTime) {
      const payTime = new Date(detail.payTime);
      const now = new Date();
      const diffTime = now.getTime() - payTime.getTime();
      const diffDays = diffTime / (1000 * 60 * 60 * 24);

      if (diffDays > 7) {
        uni.showModal({
          title: '退款期限已过',
          content: '该订单已完成超过7天，不支持申请退款',
          showCancel: false,
          confirmText: '知道了',
          success: () => { uni.navigateBack(); }
        });
        return;
      }
    }

    selectedProducts.value = [];
  } catch (error) {
    logger.error('加载订单详情失败:', error);
    uni.showToast({ title: '加载订单详情失败', icon: 'none' });
    setTimeout(() => { uni.navigateBack(); }, 1500);
  }
};

onMounted(() => {
  checkAuth();
});

onLoad((options) => {
  if (options && options.orderId) {
    orderId.value = String(options.orderId);
    loadOrderDetail();
  } else {
    uni.showToast({ title: '订单 ID 缺失', icon: 'none' });
    setTimeout(() => { uni.navigateBack(); }, 1500);
  }
});

const submitRefund = async () => {
  // 校验：必须选择商品或输入自定义金额
  if (selectedProducts.value.length === 0) {
    const amount = parseFloat(customRefundAmount.value);
    if (!customRefundAmount.value || isNaN(amount) || amount <= 0) {
      uni.showToast({ title: '请选择退款商品或输入退款金额', icon: 'none' });
      return;
    }
    const maxAmount = orderInfo.value.paidAmount || orderInfo.value.totalAmount || 0;
    if (amount > maxAmount) {
      uni.showToast({ title: '退款金额不能超过实付金额', icon: 'none' });
      return;
    }
  }

  if (!selectedReason.value) {
    uni.showToast({ title: '请选择退款原因', icon: 'none' });
    return;
  }

  if (selectedReason.value === '4' && !refundRemark.value.trim()) {
    uni.showToast({ title: '请填写投诉内容', icon: 'none' });
    return;
  }

  const reasonMap: Record<string, string> = {
    '1': '订单扣款错误',
    '2': '扣款金额与实际金额不符',
    '3': '商品过期或变质',
    '4': '其他'
  };

  let reasonText = reasonMap[selectedReason.value] || '用户申请退款';

  if (selectedReason.value === '4' && refundRemark.value.trim()) {
    reasonText = `其他：${refundRemark.value.trim()}`;
  }

  // 构建请求体
  const body: Record<string, any> = {
    orderId: orderId.value,
    reason: reasonText,
  };

  if (selectedProducts.value.length > 0) {
    body.products = selectedProducts.value.map(index => {
      const product = orderInfo.value.products[index];
      return {
        orderGoodsId: product.orderGoodsId || product.id,
        productId: product.productId,
        productName: product.name,
        pic: product.pic || product.image,
        quantity: product.refundQuantity || 1,
        price: product.price
      };
    });
  } else {
    body.refundAmount = parseFloat(customRefundAmount.value);
  }

  try {
    // 统一走退款申请接口，支付分订单同样创建退款记录由后端处理
    await post('/payment/refund', body);

    uni.showToast({ title: '退款申请已提交', icon: 'success' });
    setTimeout(() => { uni.navigateBack(); }, 1500);
  } catch (error: any) {
    logger.error('退款申请失败:', error);
    uni.showToast({ title: '退款失败，请重试', icon: 'none' });
  }
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: $color-bg-secondary;
  padding-top: 20rpx;
  padding-bottom: 40rpx;
}

/* 退款状态横幅 */
.refund-status-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 40rpx;
  margin: 30rpx;
  background-color: $color-bg-primary;
  border-radius: $radius-lg;
  box-shadow: $shadow-md;
  text-align: center;

  .banner-dot {
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    margin-bottom: 24rpx;
  }

  .banner-title {
    font-size: 36rpx;
    font-weight: 600;
    color: $color-text-primary;
    margin-bottom: 16rpx;
  }

  .banner-desc {
    font-size: 28rpx;
    color: $color-text-secondary;
    line-height: 1.6;
    margin-bottom: 40rpx;
  }

  .banner-back-btn {
    background-color: $color-bg-primary;
    border: 2rpx solid $color-border;
    border-radius: $radius-xl;
    font-size: 28rpx;
    color: $color-text-secondary;
    padding: 20rpx 60rpx;

    &::after {
      border: none;
    }

    &:active {
      background-color: $color-bg-secondary;
      transform: scale(0.97);
    }
  }

  &.pending {
    .banner-dot {
      background-color: $color-warning;
      animation: banner-dot-pulse 1.5s ease-in-out infinite;
    }
  }

  &.full {
    .banner-dot {
      background-color: $color-success;
    }
  }
}

@keyframes banner-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.product-section {
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.product-item {
  display: flex;
  flex-direction: column;
  background-color: $color-bg-primary;
  border-radius: 12rpx;
  padding: 24rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.product-item-selected {
  border-color: $color-success;
  background-color: #f6ffed;
}

.product-item-refunded {
  opacity: 0.55;
  background-color: $color-bg-secondary;

  .checkbox-icon.refunded {
    background-color: $color-success;
    border-color: $color-success;
    opacity: 0.6;

    text {
      color: $color-bg-primary;
      font-size: 26rpx;
      font-weight: bold;
    }
  }
}

.product-item:active {
  background-color: $color-bg-secondary;
}

.product-main {
  display: flex;
  align-items: center;
  width: 100%;
}

.product-checkbox {
  margin-right: 20rpx;
  flex-shrink: 0;
}

.checkbox-icon {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  border: 3rpx solid $color-border;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;

  &.checked {
    background-color: $color-success;
    border-color: $color-success;
    box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);

    text {
      color: #ffffff;
      font-size: 26rpx;
      font-weight: bold;
    }
  }
}

.product-image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 12rpx;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 20rpx;
  background-color: $color-bg-tertiary;
  box-shadow: $shadow-sm;

  image {
    width: 100%;
    height: 100%;
  }
}

.image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, $color-bg-tertiary, $color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: $color-text-secondary;
  font-size: 40rpx;
}

.product-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 8rpx;
}

.name-container {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 100%;
}

.product-name {
  font-size: 28rpx;
  color: $color-text-primary;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.expand-tip {
  font-size: 26rpx;
  color: $color-info;
  margin-left: 8rpx;
  flex-shrink: 0;
  padding: 4rpx 12rpx;
  background-color: #e6f7ff;
  border-radius: 6rpx;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8rpx;
}

.product-price {
  font-size: 32rpx;
  color: $color-error;
  font-weight: 600;
}

.product-quantity-label {
  font-size: 24rpx;
  color: $color-text-secondary;
  background-color: $color-bg-tertiary;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
}

.refunded-tag {
  font-size: 22rpx;
  color: $color-warning;
  margin-left: $spacing-xs;
}

/* 退款数量选择器 */
.refund-quantity-selector {
  margin-top: 20rpx;
  margin-left: 56rpx;
  padding: 20rpx 24rpx;
  background-color: #fafffe;
  border-radius: 12rpx;
  border: 1rpx solid #d9f7be;
}

.selector-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.selector-label {
  font-size: 28rpx;
  color: $color-success;
  font-weight: 500;
  flex-shrink: 0;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.control-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 12rpx;
  background-color: $color-bg-primary;
  border: 2rpx solid $color-border;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  color: $color-text-primary;
  transition: all 0.2s;

  &:active {
    background-color: $color-bg-tertiary;
    transform: scale(0.95);
  }

  &.disabled {
    background-color: $color-bg-secondary;
    border-color: $color-bg-tertiary;
    color: $color-text-tertiary;

    &:active {
      background-color: $color-bg-secondary;
      transform: none;
    }
  }
}

.quantity-display {
  min-width: 80rpx;
  height: 60rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $color-bg-primary;
  border: 2rpx solid $color-success;
  border-radius: 12rpx;
  padding: 0 16rpx;
}

.quantity-text {
  font-size: 32rpx;
  color: $color-success;
  font-weight: 600;
}

/* 退款金额预览 */
.refund-amount-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 1rpx dashed #d9f7be;
}

.preview-label {
  font-size: 26rpx;
  color: $color-text-secondary;
}

.preview-value {
  font-size: 30rpx;
  color: $color-error;
  font-weight: 600;
}

/* 区域块 */
.section-block {
  background-color: $color-bg-primary;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  color: $color-text-primary;
  font-weight: 500;
  margin-bottom: 30rpx;
  display: block;
}

/* 选项列表 */
radio-group {
  display: block;
}

.radio-item {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.radio-wrapper {
  margin-right: 16rpx;
  display: flex;
  align-items: center;

  radio {
    transform: scale(1.1);
  }
}

.radio-label {
  font-size: 28rpx;
  color: $color-text-primary;
  line-height: 1.5;
}

/* 备注输入框 */
.remark-input-wrapper {
  margin-top: 24rpx;
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 12rpx;
  border: 2rpx solid #e8e8e8;
}

.remark-textarea {
  width: 100%;
  min-height: 160rpx;
  padding: 20rpx;
  background-color: $color-bg-primary;
  border-radius: 8rpx;
  border: 2rpx solid $color-border;
  font-size: 28rpx;
  color: $color-text-primary;
  line-height: 1.6;
  box-sizing: border-box;

  &:focus {
    border-color: $color-info;
  }
}

.remark-count {
  display: block;
  text-align: right;
  font-size: 24rpx;
  color: $color-text-secondary;
  margin-top: 12rpx;
}

/* 信息区域 */
.info-section {
  padding-bottom: 20rpx;
}

.info-row {
  display: flex;
  align-items: center;
  padding: 18rpx 0;
}

.info-label {
  font-size: 28rpx;
  color: $color-text-secondary;
  min-width: 200rpx;
}

.info-value {
  font-size: 28rpx;
  color: $color-text-primary;
  flex: 1;
  text-align: right;

  &.expired {
    color: $color-error;
    font-weight: 600;
  }
}

.refund-amount {
  color: $color-error;
  font-weight: 500;
}

/* 提交按钮 */
.submit-btn {
  margin: 40rpx 30rpx;
  background: linear-gradient(135deg, $color-primary-light, $color-primary);
  border: none;
  border-radius: $radius-xl;
  font-size: 32rpx;
  color: $color-text-primary;
  padding: 24rpx 0;
  line-height: 1;
  font-weight: 600;
  box-shadow: $shadow-primary;

  &::after {
    border: none;
  }

  &:active {
    transform: scale(0.97);
    opacity: 0.9;
  }
}

/* 提示信息 */
.tip-section {
  background-color: $color-primary-bg;
  border: 1rpx solid $color-primary-light;
  border-radius: 8rpx;
  padding: 24rpx 30rpx;
  margin: 30rpx;
}

.tip-text {
  display: block;
  font-size: 24rpx;
  color: $color-warning;
  line-height: 1.8;
}

.selected-tip {
  text-align: right;
  font-size: 26rpx;
  color: $color-success;
  margin-top: 20rpx;
  padding: 16rpx 20rpx;
  background-color: #f6ffed;
  border-radius: 8rpx;
  font-weight: 500;
}

/* 自定义金额 */
.custom-amount-section {
  padding-bottom: 20rpx;
}

.custom-amount-display {
  text-align: center;
  padding: $spacing-md;
  background-color: #f6ffed;
  border-radius: $radius-md;
  border: 1rpx solid #b7eb8f;
}

.calculated-hint {
  display: block;
  font-size: 24rpx;
  color: $color-text-secondary;
  margin-bottom: $spacing-sm;
}

.calculated-amount {
  font-size: 44rpx;
  color: $color-warning;
  font-weight: 700;
}

.custom-amount-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: $spacing-sm;
}

.custom-amount-input {
  display: flex;
  align-items: center;
  background-color: $color-bg-primary;
  border: 2rpx solid $color-border;
  border-radius: $radius-md;
  padding: 20rpx $spacing-md;

  &:focus-within {
    border-color: $color-primary;
  }
}

.currency-symbol {
  font-size: 36rpx;
  color: $color-text-primary;
  font-weight: 600;
  margin-right: $spacing-sm;
}

.amount-input {
  flex: 1;
  font-size: 32rpx;
  color: $color-text-primary;
  height: 60rpx;
}

.amount-hint {
  font-size: 24rpx;
  color: $color-text-secondary;
  line-height: 1.6;
}

.contact-section {
  text-align: center;
  padding: 20rpx 0 60rpx;
  font-size: 26rpx;
}
</style>
