/**
 * 单选按钮修复样式 - 解决布局抖动问题
 * 
 * 该样式文件解决了点击价格趋势选项时导致整行抖动的布局问题
 * 
 * 问题原因：
 * - JavaScript和CSS同时应用了transform变换，导致效果叠加
 * - 缺乏布局隔离，一个元素的变化会影响整行元素
 * - 未设置合适的transform-origin和过渡效果
 * 
 * 修复方案：
 * 1. 使用transform-origin确保缩放效果以元素中心点为基准
 * 2. 添加CSS contain属性隔离布局影响范围
 * 3. 使用will-change提前通知浏览器变换效果，优化性能
 * 4. 移除JavaScript中的transform操作，统一使用CSS效果
 * 5. 减小缩放幅度，并添加平滑过渡效果
 * 
 * 性能考量：
 * - 使用CSS过渡代替JavaScript动画可减少主线程负担
 * - contain属性能够显著减少重排范围，提高渲染性能
 * - will-change属性用于关键元素，但避免过度使用（可能占用额外内存）
 */

/* 为单选按钮容器添加布局隔离 */
.input__radio-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
  /* 添加以下属性隔离布局影响 */
  contain: layout style;
  position: relative;
  z-index: 1;
}

/* 为单选按钮标签添加稳定布局 */
.input__radio-buttons input[type="radio"]+label {
  /* 保持原有样式 */
  opacity: 1;
  border: none;
  border-radius: 40px;
  background: var(--input-bg-color);
  padding: 8px 16px;
  font-size: 1.25rem;
  font-family: inherit;
  font-weight: bold;
  margin: 8px;
  
  /* 添加新样式以防止抖动 */
  transform-origin: center center;
  will-change: transform;
  position: relative;
  display: inline-block;
  /* 添加平滑过渡 */
  transition: transform 0.15s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

/* 修改悬停效果，减少缩放幅度 */
.input__radio-buttons input[type="radio"]:not(:checked)+label:hover {
  cursor: pointer;
  background: var(--radio-hover-bg-color);
  /* 减小缩放以减少抖动 */
  transform: scale(1.05);
  box-shadow: 0 1px 6px var(--shadow-5), 0 3px 6px var(--shadow-9);
}

/* 为选中状态添加平滑过渡 */
.input__radio-buttons input[type="radio"]:checked+label {
  background: var(--color-blue);
  color: var(--radio-checked-text-color);
  /* 添加微小的缩放效果提供反馈，但不会导致布局抖动 */
  transform: scale(1.02);
}

/* 修复整行布局 */
.form__row {
  /* 保持原有样式 */
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
  justify-content: center;
  align-items: center;
  
  /* 添加新样式以防止抖动 */
  contain: layout style;
  position: relative;
}