<template>
  <view class="page-order-detail">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <view class="navbar-left" @tap="goBack">
          <u-icon name="arrow-left" :size="20" color="#ffffff" />
        </view>
        <text class="navbar-title">订单详情</text>
        <view class="navbar-right"></view>
      </view>
    </view>

    <scroll-view v-if="order.id" scroll-y class="detail-content">
      <!-- 状态卡片 -->
      <view class="status-card" :class="`status-${order.status}`">
        <view class="status-icon-wrapper">
          <u-icon :name="getStatusIcon(order.status)" :size="20" color="#ffffff" />
        </view>
        <view class="status-info">
          <text class="status-text">{{ getStatusText(order.status) }}</text>
          <text class="status-desc">{{ getStatusDesc(order.status) }}</text>
        </view>
      </view>

      <!-- 房源信息卡片 -->
      <view class="section-card room-card">
        <view class="card-header">
          <view class="header-icon">
            <u-icon name="home-fill" :size="16" color="#FF6B35" />
          </view>
          <text class="card-title">房源信息</text>
        </view>
        <view class="room-content" @tap="goRoomDetail">
          <view class="room-image-wrapper">
            <image
              class="room-image"
              :src="order.room?.coverImage || '/static/default-room.png'"
              mode="aspectFill"
            />
          </view>
          <view class="room-info">
            <text class="room-name">{{ order.room?.name }}</text>
            <view class="merchant-row">
              <u-icon name="shop" :size="12" color="#999" />
              <text class="merchant-name">{{ order.merchant?.shopName }}</text>
            </view>
          </view>
          <view class="arrow-icon">
            <u-icon name="arrow-right" :size="16" color="#CCCCCC" />
          </view>
        </view>
      </view>

      <!-- 入住信息卡片 -->
      <view class="section-card">
        <view class="card-header">
          <view class="header-icon">
            <u-icon name="calendar-fill" :size="16" color="#FF6B35" />
          </view>
          <text class="card-title">入住信息</text>
        </view>
        <view class="info-list">
          <view class="info-item">
            <view class="info-left">
              <view class="info-icon">
                <u-icon name="calendar" :size="14" color="#FF6B35" />
              </view>
              <text class="info-label">入住日期</text>
            </view>
            <text class="info-value">{{ formatDate(order.checkInDate) }}</text>
          </view>
          <view class="info-item">
            <view class="info-left">
              <view class="info-icon">
                <u-icon name="calendar" :size="14" color="#FF6B35" />
              </view>
              <text class="info-label">离店日期</text>
            </view>
            <text class="info-value">{{ formatDate(order.checkOutDate) }}</text>
          </view>
          <view class="info-item">
            <view class="info-left">
              <view class="info-icon">
                <u-icon name="clock" :size="14" color="#FF6B35" />
              </view>
              <text class="info-label">入住晚数</text>
            </view>
            <text class="info-value highlight">{{ order.nights }}晚</text>
          </view>
          <view class="info-item">
            <view class="info-left">
              <view class="info-icon">
                <u-icon name="home" :size="14" color="#FF6B35" />
              </view>
              <text class="info-label">房间套数</text>
            </view>
            <text class="info-value">{{ order.roomCount || 1 }}套</text>
          </view>
          <view class="info-item">
            <view class="info-left">
              <view class="info-icon">
                <u-icon name="account" :size="14" color="#FF6B35" />
              </view>
              <text class="info-label">入住人数</text>
            </view>
            <text class="info-value">{{ order.guestCount || 1 }}人</text>
          </view>
        </view>
      </view>

      <!-- 联系人信息卡片 -->
      <view class="section-card">
        <view class="card-header">
          <view class="header-icon">
            <u-icon name="account-fill" :size="16" color="#FF6B35" />
          </view>
          <text class="card-title">联系人信息</text>
        </view>
        <view class="info-list">
          <view class="info-item">
            <view class="info-left">
              <view class="info-icon">
                <u-icon name="account" :size="14" color="#999" />
              </view>
              <text class="info-label">联系人</text>
            </view>
            <text class="info-value">{{ order.contactName }}</text>
          </view>
          <view class="info-item">
            <view class="info-left">
              <view class="info-icon">
                <u-icon name="phone" :size="14" color="#999" />
              </view>
              <text class="info-label">联系电话</text>
            </view>
            <view class="info-value-row">
              <text class="info-value">{{ order.contactPhone }}</text>
              <view class="call-btn" @tap.stop="callPhone">
                <u-icon name="phone-fill" :size="12" color="#FF6B35" />
                <text class="call-text">拨打</text>
              </view>
            </view>
          </view>
          <view v-if="order.contactIdCard" class="info-item">
            <view class="info-left">
              <view class="info-icon">
                <u-icon name="coupon" :size="14" color="#999" />
              </view>
              <text class="info-label">身份证号</text>
            </view>
            <text class="info-value">{{ maskIdCard(order.contactIdCard) }}</text>
          </view>
        </view>
      </view>

      <!-- 费用明细卡片 -->
      <view class="section-card price-card">
        <view class="card-header">
          <view class="header-icon">
            <u-icon name="rmb-circle-fill" :size="16" color="#FF6B35" />
          </view>
          <text class="card-title">费用明细</text>
        </view>
        <view class="price-list">
          <view class="price-item">
            <text class="price-label">房费</text>
            <text class="price-value">¥{{ order.roomAmount }}</text>
          </view>
          <view v-if="order.couponDiscount > 0" class="price-item discount-item">
            <text class="price-label">优惠券</text>
            <text class="price-value discount">-¥{{ order.couponDiscount }}</text>
          </view>
          <view class="price-divider"></view>
          <view class="price-item total-item">
            <text class="price-label">实付金额</text>
            <view class="price-total">
              <text class="price-symbol">¥</text>
              <text class="price-amount">{{ order.payAmount }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 订单信息卡片 -->
      <view class="section-card">
        <view class="card-header">
          <view class="header-icon">
            <u-icon name="list" :size="16" color="#FF6B35" />
          </view>
          <text class="card-title">订单信息</text>
        </view>
        <view class="info-list">
          <view class="info-item">
            <view class="info-left">
              <view class="info-icon">
                <u-icon name="list" :size="14" color="#999" />
              </view>
              <text class="info-label">订单号</text>
            </view>
            <view class="info-value-row">
              <text class="info-value order-no">{{ order.orderNo }}</text>
              <view class="copy-btn" @tap.stop="copyOrderNo">
                <text class="copy-text">复制</text>
              </view>
            </view>
          </view>
          <view class="info-item">
            <view class="info-left">
              <view class="info-icon">
                <u-icon name="clock" :size="14" color="#999" />
              </view>
              <text class="info-label">下单时间</text>
            </view>
            <text class="info-value">{{ formatDateTime(order.createdAt) }}</text>
          </view>
          <view v-if="order.paymentMethod" class="info-item">
            <view class="info-left">
              <view class="info-icon">
                <u-icon name="rmb-circle" :size="14" color="#999" />
              </view>
              <text class="info-label">支付方式</text>
            </view>
            <text class="info-value">{{ paymentMethodLabels[order.paymentMethod] }}</text>
          </view>
          <view v-if="order.paidAt" class="info-item">
            <view class="info-left">
              <view class="info-icon">
                <u-icon name="checkmark-circle" :size="14" color="#999" />
              </view>
              <text class="info-label">支付时间</text>
            </view>
            <text class="info-value">{{ formatDateTime(order.paidAt) }}</text>
          </view>
          <view v-if="order.cancelReason" class="info-item">
            <view class="info-left">
              <view class="info-icon">
                <u-icon name="info-circle" :size="14" color="#999" />
              </view>
              <text class="info-label">取消原因</text>
            </view>
            <text class="info-value">{{ order.cancelReason }}</text>
          </view>
        </view>
      </view>

      <!-- 底部占位 -->
      <view class="bottom-placeholder"></view>
    </scroll-view>

    <!-- 加载状态 -->
    <view v-else class="loading-state">
      <view class="loading-spinner">
        <view class="spinner-dot"></view>
        <view class="spinner-dot"></view>
        <view class="spinner-dot"></view>
      </view>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 底部操作栏 -->
    <view v-if="order.id && getActions().length > 0" class="action-bar">
      <view class="action-buttons">
        <view
          v-for="action in getActions()"
          :key="action.type"
          :class="['action-btn', `btn-${action.style}`]"
          @tap="handleAction(action.type)"
        >
          <text class="btn-text">{{ action.text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { getOrderDetail, cancelOrder, payOrder } from '@/api/user/order';
import { createReview, checkOrderReviewed } from '@/api/user/review';

const paymentMethodLabels: Record<string, string> = {
  wechat: '微信支付',
  alipay: '支付宝',
  balance: '余额支付',
};

const statusLabels: Record<string, string> = {
  pending_pay: '待支付',
  pending_confirm: '待确认',
  confirmed: '已确认',
  pending_checkin: '待入住',
  checked_in: '已入住',
  completed: '已完成',
  cancelled: '已取消',
  refunding: '退款中',
  refunded: '已退款',
};

function getStatusText(status: string): string {
  return statusLabels[status] || status;
}

function getStatusIcon(status: string): string {
  const iconMap: Record<string, string> = {
    pending_pay: 'rmb-circle-fill',
    pending_confirm: 'clock-fill',
    confirmed: 'checkmark-circle-fill',
    pending_checkin: 'calendar-fill',
    checked_in: 'home-fill',
    completed: 'checkmark-circle-fill',
    cancelled: 'close-circle-fill',
    refunding: 'reload',
    refunded: 'checkmark-circle-fill',
  };
  return iconMap[status] || 'info-circle-fill';
}

function getStatusDesc(status: string): string {
  const descMap: Record<string, string> = {
    pending_pay: '请尽快完成支付，超时订单将自动取消',
    pending_confirm: '商家正在确认您的订单，请耐心等待',
    confirmed: '订单已确认，期待您的入住',
    pending_checkin: '订单已确认，期待您的入住',
    checked_in: '祝您入住愉快',
    completed: '感谢您的入住，期待再次光临',
    cancelled: '订单已取消',
    refunding: '退款正在处理中，请耐心等待',
    refunded: '退款已完成',
  };
  return descMap[status] || '';
}

const order = ref<any>({});
const orderNo = ref('');
const reviewed = ref(false);

onMounted(() => {
  const pages = getCurrentPages();
  const page = pages[pages.length - 1] as any;
  orderNo.value = page.options?.orderNo || page.$page?.options?.orderNo;
  if (orderNo.value) fetchDetail();

  // 监听评价提交事件
  uni.$on('reviewSubmitted', (data: any) => {
    if (data.orderNo === orderNo.value) {
      fetchDetail();
    }
  });
});

onUnmounted(() => {
  // 移除事件监听
  uni.$off('reviewSubmitted');
});

async function fetchDetail() {
  try {
    const res = await getOrderDetail(orderNo.value);
    order.value = res.data;
    // 检查是否已评价
    if (order.value?.status === 'completed') {
      const reviewRes = await checkOrderReviewed(orderNo.value);
      reviewed.value = reviewRes.data?.reviewed || false;
    }
  } catch (e) {
    console.error('获取订单详情失败:', e);
    uni.showToast({ title: '加载失败', icon: 'none' });
  }
}

function goBack() {
  uni.navigateBack();
}

function goRoomDetail() {
  if (order.value?.room?.id) {
    uni.navigateTo({ url: `/pages/room-detail/index?id=${order.value.room.id}` });
  }
}

function formatDate(dateStr: string): string {
  if (!dateStr) return '';
  const d = new Date(dateStr);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
}

function formatDateTime(dateStr: string): string {
  if (!dateStr) return '';
  const d = new Date(dateStr);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
}

function maskIdCard(idCard: string): string {
  if (!idCard || idCard.length < 8) return idCard;
  return idCard.substring(0, 6) + '********' + idCard.substring(idCard.length - 4);
}

function callPhone() {
  if (order.value?.contactPhone) {
    uni.makePhoneCall({
      phoneNumber: order.value.contactPhone,
    });
  }
}

function copyOrderNo() {
  if (order.value?.orderNo) {
    uni.setClipboardData({
      data: order.value.orderNo,
      success: () => {
        uni.showToast({ title: '订单号已复制', icon: 'success' });
      },
    });
  }
}

function getActions() {
  const status = order.value?.status;
  if (!status) return [];

  const actionMap: Record<string, any[]> = {
    pending_pay: [
      { type: 'cancel', text: '取消订单', style: 'default', icon: 'close-circle' },
      { type: 'pay', text: '立即支付', style: 'primary', icon: 'rmb-circle' },
    ],
    pending_confirm: [
      { type: 'cancel', text: '取消订单', style: 'default', icon: 'close-circle' },
      { type: 'contact', text: '联系商家', style: 'default', icon: 'phone' },
    ],
    confirmed: [
      { type: 'cancel', text: '取消订单', style: 'default', icon: 'close-circle' },
      { type: 'contact', text: '联系商家', style: 'default', icon: 'phone' },
    ],
    pending_checkin: [
      { type: 'contact', text: '联系商家', style: 'default', icon: 'phone' },
    ],
    completed: reviewed.value
      ? []
      : [{ type: 'review', text: '评价订单', style: 'primary', icon: 'edit' }],
  };

  return actionMap[status] || [];
}

function handleAction(type: string) {
  switch (type) {
    case 'pay':
      handlePay();
      break;
    case 'cancel':
      handleCancel();
      break;
    case 'contact':
      handleContact();
      break;
    case 'review':
      handleReview();
      break;
  }
}

function handlePay() {
  uni.showModal({
    title: '支付订单',
    content: `确认支付¥${order.value.payAmount}？`,
    success: async (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '支付中...' });
        try {
          await payOrder(orderNo.value, 'wechat');
          uni.hideLoading();
          uni.showToast({ title: '支付成功', icon: 'success' });
          fetchDetail();
        } catch (e: any) {
          uni.hideLoading();
          uni.showToast({ title: e.message || '支付失败', icon: 'none' });
        }
      }
    },
  });
}

function handleCancel() {
  const isPaid = order.value?.status === 'pending_confirm' || order.value?.status === 'confirmed' || order.value?.status === 'pending_checkin';
  uni.showModal({
    title: '取消订单',
    content: isPaid ? '订单已支付，取消后退款将原路返回至您的微信账户，确认取消？' : '确定取消此订单？',
    success: async (res) => {
      if (res.confirm) {
        const reason = '用户主动取消';
        uni.showLoading({ title: '处理中...' });
        try {
          await cancelOrder(orderNo.value, reason);
          uni.hideLoading();
          uni.showToast({ title: isPaid ? '已取消，退款将在1-3个工作日原路返回' : '已取消', icon: 'success' });
          fetchDetail();
        } catch (e: any) {
          uni.hideLoading();
          uni.showToast({ title: e.message || '操作失败', icon: 'none' });
        }
      }
    },
  });
}

function handleContact() {
  uni.showToast({ title: '联系商家功能开发中', icon: 'none' });
}

function handleReview() {
  uni.navigateTo({
    url: `/pages/review-create/index?orderNo=${orderNo.value}`,
  });
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';
@import '@/static/styles/mixins.scss';

.page-order-detail {
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF5F0 0%, #F5F7FA 100%);
  display: flex;
  flex-direction: column;
}

/* ========== 自定义导航栏 ========== */
.custom-navbar {
  background: linear-gradient(135deg, #FF8C5A 0%, #FF6B35 100%);
  padding: 0 24rpx;
}

.navbar-content {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-left,
.navbar-right {
  width: 80rpx;
  display: flex;
  align-items: center;
}

.navbar-left {
  justify-content: flex-start;
  padding: 12rpx;
  margin-left: -12rpx;
  transition: opacity 0.3s ease;

  &:active {
    opacity: 0.6;
  }
}

.navbar-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  color: #ffffff;
}

/* ========== 详情内容 ========== */
.detail-content {
  flex: 1;
  overflow-y: auto;
}

/* ========== 状态卡片 ========== */
.status-card {
  margin: 24rpx 24rpx 16rpx;
  padding: 32rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  gap: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -40rpx;
    right: -40rpx;
    width: 160rpx;
    height: 160rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
  }
}

.status-pending_pay {
  background: linear-gradient(135deg, #FFB800 0%, #FF8C00 100%);
}

.status-pending_confirm,
.status-confirmed,
.status-pending_checkin {
  background: linear-gradient(135deg, #69C0FF 0%, #4A90E2 100%);
}

.status-checked_in {
  background: linear-gradient(135deg, #73D13D 0%, #52C41A 100%);
}

.status-completed {
  background: linear-gradient(135deg, #95DE64 0%, #52C41A 100%);
}

.status-cancelled {
  background: linear-gradient(135deg, #BFBFBF 0%, #8C8C8C 100%);
}

.status-refunding,
.status-refunded {
  background: linear-gradient(135deg, #FF7875 0%, #FF4D4F 100%);
}

.status-icon-wrapper {
  width: 80rpx;
  height: 80rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.status-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  position: relative;
  z-index: 1;
}

.status-text {
  font-size: 36rpx;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.status-desc {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
}

/* ========== 卡片通用样式 ========== */
.section-card {
  margin: 0 24rpx 16rpx;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 24rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.header-icon {
  width: 40rpx;
  height: 40rpx;
  background: linear-gradient(135deg, #FFF5F0 0%, #FFE8DD 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1A1A1A;
}

/* ========== 房源卡片 ========== */
.room-card {
  padding: 24rpx;
}

.room-content {
  display: flex;
  align-items: center;
  gap: 20rpx;
  transition: all 0.3s ease;

  &:active {
    opacity: 0.7;
  }
}

.room-image-wrapper {
  flex-shrink: 0;
}

.room-image {
  width: 160rpx;
  height: 120rpx;
  border-radius: 16rpx;
  background: #F5F7FA;
}

.room-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  min-width: 0;
}

.room-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.merchant-row {
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.merchant-name {
  font-size: 24rpx;
  color: #999;
}

.arrow-icon {
  flex-shrink: 0;
}

/* ========== 信息列表 ========== */
.info-list {
  display: flex;
  flex-direction: column;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #F5F7FA;

  &:last-child {
    border-bottom: none;
  }
}

.info-left {
  display: flex;
  align-items: center;
  gap: 12rpx;
  flex: 1;
  min-width: 0;
}

.info-icon {
  width: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-label {
  font-size: 26rpx;
  color: #666;
}

.info-value {
  font-size: 26rpx;
  color: #1A1A1A;
  font-weight: 500;
  text-align: right;
}

.info-value.highlight {
  color: #FF6B35;
  font-weight: 600;
}

.info-value-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.order-no {
  font-family: 'Courier New', monospace;
  font-size: 24rpx;
}

.call-btn,
.copy-btn {
  display: flex;
  align-items: center;
  gap: 4rpx;
  padding: 8rpx 16rpx;
  background: linear-gradient(135deg, #FFF5F0 0%, #FFE8DD 100%);
  border-radius: 20rpx;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
    background: #FFE8DD;
  }
}

.call-text,
.copy-text {
  font-size: 22rpx;
  color: #FF6B35;
  font-weight: 600;
}

/* ========== 费用明细 ========== */
.price-card {
  background: linear-gradient(135deg, #FFFBF8 0%, #FFF5F0 100%);
}

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

.price-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 0;
}

.discount-item {
  .price-value {
    color: #52C41A;
  }
}

.price-label {
  font-size: 26rpx;
  color: #666;
}

.price-value {
  font-size: 26rpx;
  color: #1A1A1A;
  font-weight: 500;
}

.price-divider {
  height: 1rpx;
  background: linear-gradient(90deg, transparent 0%, #FFE8DD 50%, transparent 100%);
  margin: 12rpx 0;
}

.total-item {
  padding: 20rpx 0 0;
}

.price-total {
  display: flex;
  align-items: baseline;
  gap: 4rpx;
}

.price-symbol {
  font-size: 28rpx;
  color: #FF6B35;
  font-weight: 600;
}

.price-amount {
  font-size: 44rpx;
  color: #FF6B35;
  font-weight: 700;
  line-height: 1;
}

/* ========== 底部占位 ========== */
.bottom-placeholder {
  height: 180rpx;
}

/* ========== 加载状态 ========== */
.loading-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  padding: 120rpx 0;
}

.loading-spinner {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.spinner-dot {
  width: 12rpx;
  height: 12rpx;
  background: #FF6B35;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;

  &:nth-child(1) {
    animation-delay: -0.32s;
  }

  &:nth-child(2) {
    animation-delay: -0.16s;
  }
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.loading-text {
  font-size: 24rpx;
  color: #999;
}

/* ========== 底部操作栏 ========== */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  padding: 20rpx 24rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
  z-index: 100;
}

.action-buttons {
  display: flex;
  gap: 16rpx;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 24rpx;
  border-radius: 48rpx;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.96);
  }
}

.btn-default {
  background: #ffffff;
  border: 2rpx solid #E5E5E5;

  .btn-text {
    color: #666;
  }

  &:active {
    background: #F5F7FA;
  }
}

.btn-primary {
  background: linear-gradient(135deg, #FF8C5A 0%, #FF6B35 100%);
  border: none;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.25);

  .btn-text {
    color: #ffffff;
  }

  &:active {
    box-shadow: 0 2rpx 8rpx rgba(255, 107, 53, 0.3);
  }
}

.btn-text {
  font-size: 28rpx;
  font-weight: 600;
}
</style>
