/* pages/dingdanxiangqing/dingdanxiangqing.wxss */

/* 页面基础样式 */
.dingdanxiangqing-page {
    min-height: 100vh;
    background-color: #f8f9fa;
    padding-bottom: 140rpx;
  }
  
  /* 加载中状态 */
  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;
  }
  
  .loading-spinner {
    width: 80rpx;
    height: 80rpx;
    border: 8rpx solid #e0e0e0;
    border-top-color: #4caf50;
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
    margin-bottom: 30rpx;
  }
  
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  .loading-text {
    font-size: 30rpx;
    color: #666666;
  }
  
  /* 内容区域 */
  .content-container {
    padding: 25rpx;
  }
  
  /* 商品图片和介绍区域 */
  .shangpin-area {
    display: flex;
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 25rpx;
    margin-bottom: 25rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  }
  
  .shangpin-image-container {
    flex-shrink: 0;
    width: 180rpx;
    height: 180rpx;
    margin-right: 25rpx;
  }
  
  .shangpin-image {
    width: 100%;
    height: 100%;
    border-radius: 12rpx;
    background-color: #f5f5f5;
  }
  
  .shangpin-jieshao {
    flex: 1;
    display: flex;
    align-items: flex-start;
  }
  
  .jieshao-text {
    font-size: 28rpx;
    line-height: 42rpx;
    color: #333333;
    font-weight: 400;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* 通用区域样式 */
  .info-title {
    font-size: 32rpx;
    color: #333333;
    font-weight: 600;
    margin-bottom: 20rpx;
    padding-bottom: 12rpx;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.08);
  }
  
  .section-subtitle {
    font-size: 28rpx;
    color: #555555;
    font-weight: 500;
    display: block;
  }
  
  /* 左右布局的订单信息项 */
  .dingdan-info-area {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 25rpx;
    margin-bottom: 25rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  }
  
  .info-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18rpx;
    padding: 12rpx 0;
  }
  
  .info-item-row:last-child {
    margin-bottom: 0;
  }
  
  .item-label {
    font-size: 28rpx;
    color: #666666;
    font-weight: 400;
    flex-shrink: 0;
    min-width: 150rpx;
  }
  
  /* 右侧区域容器 */
  .item-right-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  
  .item-value {
    font-size: 28rpx;
    color: #333333;
    font-weight: 500;
    word-break: break-all;
    text-align: right;
    margin-right: 15rpx;
  }
  
  /* 特殊样式 */
  .jine-red {
    color: #ff4444 !important;
    font-weight: 600 !important;
    font-size: 32rpx !important;
  }
  
  .zhuangtai-text {
    font-weight: 600 !important;
    font-size: 30rpx !important;
    color: #333333 !important;
  }
  
  /* 复制按钮 */
  .copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #4caf50;
    background-color: #e8f5e9;
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
    border: 1rpx solid #4caf50;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .copy-btn-hover {
    background-color: #c8e6c9;
    transform: scale(0.95);
  }
  
  .copy-icon {
    font-size: 20rpx;
    margin-right: 6rpx;
  }
  
  .copy-text {
    font-weight: 500;
  }
  
  /* 服务区域 */
  .fuwu-area {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 25rpx;
    margin-bottom: 25rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  }
  
  /* 打手交付图片网格 */
  .dashou-jiaofu-container {
    margin-bottom: 20rpx;
    margin-top: 15rpx;
  }
  
  .jiaofu-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -5rpx;
  }
  
  .jiaofu-image-item {
    width: calc(33.333% - 10rpx);
    margin: 5rpx;
    aspect-ratio: 1/1;
  }
  
  .jiaofu-image {
    width: 100%;
    height: 100%;
    border-radius: 12rpx;
    background-color: #f5f5f5;
    transition: transform 0.2s ease;
  }
  
  .jiaofu-image:active {
    transform: scale(0.95);
  }
  
  /* 打手留言 */
  .dashou-liuyan-container {
    margin-top: 15rpx;
  }
  
  .liuyan-content {
    font-size: 26rpx;
    line-height: 40rpx;
    color: #555555;
    padding: 15rpx;
    background-color: #f9f9f9;
    border-radius: 12rpx;
    border-left: 4rpx solid #4caf50;
  }
  
  /* 结算区域 */
  .jiesuan-area {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 25rpx;
    margin-bottom: 25rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  }
  
  /* 星星评分布局修正 */
  .pingfen-container {
    margin-bottom: 25rpx;
  }
  
  .xingxing-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10rpx;
  }
  
  .xingxing-wrapper {
    display: flex;
    align-items: center;
  }
  
  .xingxing-icon {
    font-size: 52rpx;
    color: #cccccc;
    margin-right: 10rpx;
    transition: all 0.3s ease;
    cursor: pointer;
    /* 去掉点击时的蓝色矩形框 */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    border: none;
    background: none;
  }
  
  .xingxing-icon:last-child {
    margin-right: 0;
  }
  
  .xingxing-active {
    color: #FFD700;
    text-shadow: 0 0 10rpx rgba(255, 215, 0, 0.5);
    transform: scale(1.1);
  }
  
  .xingxing-icon:active {
    transform: scale(0.9);
  }
  
  /* 留言输入 */
  .liuyan-input-container {
    margin-top: 15rpx;
  }
  
  .liuyan-textarea {
    width: 100%;
    min-height: 120rpx;
    font-size: 28rpx;
    color: #333333;
    background-color: #f9f9f9;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-top: 10rpx;
    box-sizing: border-box;
  }
  
  .zi-shu {
    display: block;
    text-align: right;
    font-size: 24rpx;
    color: #999999;
    margin-top: 8rpx;
  }
  
  /* 底部安全区域 */
  .safe-area {
    height: 40rpx;
  }
  
  /* 结单按钮容器修正 */
  .jiedan-btn-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(255,255,255,0.9), transparent);
    padding: 20rpx 30rpx;
    backdrop-filter: blur(10rpx);
    z-index: 100;
  }
  
  .jiedan-btn {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: #ffffff;
    border: none;
    border-radius: 50rpx;
    height: 90rpx;
    font-size: 32rpx;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6rpx 20rpx rgba(76, 175, 80, 0.3);
    transition: all 0.3s ease;
    width: 100%;
    /* 垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .jiedan-btn::after {
    border: none;
  }
  
  .btn-hover {
    transform: translateY(-2rpx);
    box-shadow: 0 8rpx 25rpx rgba(76, 175, 80, 0.4);
  }
  
  .btn-text {
    position: relative;
    z-index: 2;
    /* 确保文字垂直居中 */
    line-height: 1;
  }
  
  /* 按钮闪光特效 */
  .btn-sparkle {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 1%, transparent 10%);
    animation: sparkle 2s infinite linear;
    z-index: 1;
  }
  
  @keyframes sparkle {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  /* 响应式调整 */
  @media (max-width: 375px) {
    .shangpin-image-container {
      width: 160rpx;
      height: 160rpx;
    }
    
    .xingxing-icon {
      font-size: 48rpx;
    }
    
    .jiedan-btn {
      height: 85rpx;
      font-size: 30rpx;
    }
    
    .item-label {
      min-width: 140rpx;
      font-size: 26rpx;
    }
    
    .item-value {
      font-size: 26rpx;
    }
    
    .jiedan-btn-container {
      padding: 20rpx 25rpx;
    }
  }