/* 浏览器兼容性修复 */

/* 移动端触摸优化 */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 允许表单元素和文本区域选择 */
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* 滚动条样式优化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  border: none;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Firefox 滚动条 */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* 弹性盒模型浏览器前缀 */
.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

/* 过渡动画浏览器前缀 */
.transition {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* 变换浏览器前缀 */
.transform {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* 动画浏览器前缀 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-moz-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-ms-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 媒体查询优化 */
@media screen and (-webkit-min-device-pixel-ratio: 1.5),
       screen and (min-resolution: 144dpi) {
  /* 高分辨率屏幕样式 */
  .high-res-image {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

/* iOS Safari 特定修复 */
@supports (-webkit-touch-callout: none) {
  /* iOS 滚动优化 */
  .scrollable {
    -webkit-overflow-scrolling: touch;
  }
  
  /* iOS 表单元素样式 */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea {
    -webkit-appearance: none;
    border-radius: 4px;
  }
}

/* Android Chrome 特定修复 */
@supports (-webkit-appearance: none) and (not (input[type="checkbox"]::-webkit-inner-spin-button)) {
  /* Android 表单元素样式 */
  input[type="number"] {
    -webkit-appearance: textfield;
  }
}

/* 微信浏览器特定修复 */
@media screen and (min-width: 320px) {
  /* 微信字体缩放问题修复 */
  body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
  }
}

/* 禁止缩放 */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: pan-x pan-y;
}

/* 修复iOS上的点击延迟 */
.clickable {
  cursor: pointer;
  touch-action: manipulation;
}

/* 修复图片拉伸问题 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 修复视频全屏问题 */
video {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* 修复flexbox在旧浏览器中的问题 */
.flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flex-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* 修复渐变背景在旧浏览器中的问题 */
.gradient-bg {
  background: #01459A;
  background: -moz-linear-gradient(top, #01459A 0%, #006DB7 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #01459A), color-stop(100%, #006DB7));
  background: -webkit-linear-gradient(top, #01459A 0%, #006DB7 100%);
  background: -o-linear-gradient(top, #01459A 0%, #006DB7 100%);
  background: -ms-linear-gradient(top, #01459A 0%, #006DB7 100%);
  background: linear-gradient(to bottom, #01459A 0%, #006DB7 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#01459A', endColorstr='#006DB7', GradientType=0);
}