/* 移动端响应式修复 */

/* 确保移动端导航菜单正确显示 */
@media (max-width: 768px) {
  /* 防止移动端横向滚动 */
  body {
    overflow-x: hidden;
  }

  /* 移动端导航菜单背景 */
  .mobile-menu-backdrop {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* 移动端菜单项触摸优化 */
  .mobile-menu-item {
    min-height: 44px; /* iOS推荐的最小触摸目标 */
    display: flex;
    align-items: center;
  }

  /* 移动端按钮触摸优化 */
  .mobile-button {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 移动端表单优化 */
  .mobile-input {
    font-size: 16px; /* 防止iOS缩放 */
    padding: 12px 16px;
    border-radius: 8px;
  }

  /* 移动端卡片布局优化 */
  .mobile-card {
    margin-bottom: 1rem;
    border-radius: 12px;
  }

  /* 移动端文字大小优化 */
  .mobile-text-sm {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .mobile-text-base {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* 移动端间距优化 */
  .mobile-spacing-tight {
    padding: 1rem;
  }

  .mobile-spacing-normal {
    padding: 1.5rem;
  }

  /* 移动端网格布局优化 */
  .mobile-grid-single {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* 移动端隐藏元素 */
  .mobile-hidden {
    display: none !important;
  }

  /* 移动端显示元素 */
  .mobile-only {
    display: block !important;
  }

  /* 移动端全宽元素 */
  .mobile-full-width {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 移动端滚动优化 */
  .mobile-scroll-smooth {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* 移动端阴影优化 */
  .mobile-shadow-soft {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  /* 移动端过渡优化 */
  .mobile-transition {
    transition: all 0.2s ease-in-out;
  }

  /* 移动端安全区域 */
  .mobile-safe-top {
    padding-top: env(safe-area-inset-top);
  }

  .mobile-safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mobile-safe-left {
    padding-left: env(safe-area-inset-left);
  }

  .mobile-safe-right {
    padding-right: env(safe-area-inset-right);
  }

  /* 移动端视口高度修复 */
  .mobile-vh-fix {
    height: 100vh;
    height: -webkit-fill-available;
  }
}

/* 平板端优化 */
@media (min-width: 768px) and (max-width: 1024px) {
  .tablet-hidden {
    display: none !important;
  }

  .tablet-only {
    display: block !important;
  }

  /* 平板端网格布局 */
  .tablet-grid-two {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 桌面端专用样式 */
@media (min-width: 1025px) {
  .desktop-only {
    display: block !important;
  }

  .mobile-only {
    display: none !important;
  }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 500px) {
  .landscape-compact {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* 高DPI屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .high-dpi-border {
    border-width: 0.5px;
  }
}

/* 暗色模式下的移动端优化 */
@media (max-width: 768px) {
  .dark .mobile-menu-backdrop {
    background-color: rgba(0, 0, 0, 0.8);
  }

  .dark .mobile-shadow-soft {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

/* 动画性能优化 */
@media (prefers-reduced-motion: reduce) {
  .mobile-transition {
    transition: none;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}