/* 商品图片预览样式优化 */

.image-preview-container {
  display: inline-block;
  
  :deep(.el-image) {
    transition: all 0.3s ease;
    
    &:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
  }
  
  :deep(.el-image__inner) {
    object-fit: cover;
    transition: opacity 0.3s ease;
  }
  
  :deep(.el-image__preview) {
    cursor: zoom-in;
  }
}

/* 图片预览弹窗样式优化 */
:global(.el-image-viewer__wrapper) {
  z-index: 3000 !important;
}

:global(.el-image-viewer__canvas) {
  display: flex;
  align-items: center;
  justify-content: center;
}

:global(.el-image-viewer__img) {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

/* 预览导航按钮样式 */
:global(.el-image-viewer__btn) {
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &:hover {
    background-color: rgba(0, 0, 0, 0.9);
  }
}

/* 关闭按钮样式 */
:global(.el-image-viewer__close) {
  top: 40px;
  right: 40px;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  
  &:hover {
    background-color: rgba(0, 0, 0, 0.9);
  }
}

/* 加载指示器样式 */
:global(.el-image-viewer__actions) {
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 20px;
  padding: 8px 16px;
}

/* 响应式优化 */
@media (max-width: 768px) {
  :global(.el-image-viewer__img) {
    max-width: 95vw;
    max-height: 95vh;
  }
  
  :global(.el-image-viewer__close) {
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
  }
}