/* wangzhikang-mobile.css - 移动端优化美化 v1.0
 * 目标设备: iPhone (iOS 15+), Android (Android 10+), 鸿蒙 (HarmonyOS 2+)
 * 断点: 480px / 768px / 1024px
 * 设计原则: 触摸优先 (最小 44px), 单列布局, 底部导航, 简化头部
 */

/* ============ 全局基础 (所有设备) ============ */
*, *::before, *::after {
  -webkit-tap-highlight-color: rgba(16, 185, 129, 0.15);
  -webkit-touch-callout: none;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
}
body {
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
  overflow-x: hidden;
}
img, video {
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none;
}
button, input, select, textarea {
  font-family: inherit;
  font-size: 16px; /* 防止 iOS 自动缩放 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input, textarea {
  border-radius: 8px;
}

/* ============ 480px 以下 (小屏手机) ============ */
@media (max-width: 480px) {
  /* 容器 */
  .container, [class*="container"] {
    padding: 0 12px !important;
    max-width: 100% !important;
  }

  /* 头部 - 折叠为单行 */
  .top-bar, .top-nav, .header-top, [class*="TopBar"], [class*="topbar"] {
    display: none !important;
  }
  header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }
  header .header-content,
  header [class*="header-content"] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 56px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }
  header .logo,
  header [class*="logo"] {
    height: 36px !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }
  header .logo img {
    height: 36px !important;
    width: 36px !important;
  }

  /* 导航 - 隐藏主导航,显示汉堡菜单按钮 */
  header nav,
  header [class*="main-nav"],
  header [class*="primary-nav"],
  header [class*="nav-menu"] {
    display: none !important;
  }

  /* 汉堡菜单按钮 */
  .wzk-mobile-menu-btn,
  [class*="hamburger"],
  [class*="menu-toggle"] {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    gap: 5px;
    -webkit-tap-highlight-color: transparent;
  }
  .wzk-mobile-menu-btn span,
  [class*="hamburger"] span {
    display: block;
    width: 22px;
    height: 2px;
    background: #064e3b;
    border-radius: 2px;
    transition: all 0.3s;
  }

  /* 主菜单 - 全屏抽屉 */
  .wzk-mobile-drawer,
  [class*="mobile-drawer"],
  [class*="mobile-menu"] {
    position: fixed !important;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .wzk-mobile-drawer.open,
  [class*="mobile-drawer"].open {
    transform: translateX(0);
  }

  /* 标题字号 */
  h1 { font-size: 1.5rem !important; line-height: 1.3 !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.125rem !important; }
  h4, h5, h6 { font-size: 1rem !important; }

  /* 按钮 - 触摸友好 */
  button, .btn, [class*="btn-"], a[class*="button"] {
    min-height: 44px !important;
    padding: 10px 20px !important;
    font-size: 0.95rem !important;
    border-radius: 8px !important;
  }
  button:has(span:only-child), a:has(span:only-child) {
    min-width: 44px;
  }

  /* 表单输入 - 16px 字号防缩放 */
  input[type="text"], input[type="password"], input[type="email"],
  input[type="tel"], input[type="number"], input[type="search"],
  textarea, select {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    border: 1px solid #d1d5db !important;
    background: #fff !important;
  }
  input:focus, textarea:focus, select:focus {
    outline: 2px solid #10b981 !important;
    outline-offset: 1px !important;
  }

  /* 卡片 - 单列布局 */
  .grid, [class*="grid"], [class*="card-grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .card, [class*="-card"], [class*="Card"] {
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  }

  /* 商品卡 */
  .product-card, [class*="product-card"] {
    display: flex !important;
    flex-direction: column !important;
    margin: 8px 0 !important;
  }
  .product-image, [class*="product-image"] {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
  }

  /* 弹窗 - 底部弹起 */
  .modal, [class*="modal"], [class*="Modal"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 90vh !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
  }
  .modal-backdrop, [class*="modal-backdrop"] {
    align-items: flex-end !important;
  }

  /* 弹窗内的按钮 */
  .modal button, .modal [class*="btn-"] {
    min-height: 44px !important;
    font-size: 1rem !important;
  }

  /* 表格 - 横向滚动 */
  table, [class*="table"] {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 隐藏桌面端特定元素 */
  .desktop-only, [class*="desktop-only"] {
    display: none !important;
  }

  /* 显示移动端特定元素 */
  .mobile-only, [class*="mobile-only"] {
    display: block !important;
  }

  /* 浮动按钮位置 */
  .float-btn, [class*="float-"] {
    bottom: 76px !important; /* 留出底部导航空间 */
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
  }

  /* 社交二维码位置 (营销页) */
  #wzk-market-sidebar, .wzk-market-sidebar {
    right: 8px !important;
    bottom: 76px !important;
    width: 200px !important;
    max-height: 50vh !important;
  }
  #wzk-market-modal .wzk-modal-body {
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 底部导航栏 - 添加 (如不存在) */
  body::after {
    content: "";
    display: block;
    height: 60px;
  }
  .wzk-bottom-nav, [class*="bottom-nav"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    background: #fff !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    z-index: 998 !important;
    border-top: 1px solid #e5e7eb !important;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .wzk-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #6b7280;
    font-size: 0.7rem;
    min-height: 60px;
    padding: 6px 4px;
  }
  .wzk-bottom-nav a.active {
    color: #10b981;
  }
  .wzk-bottom-nav a span {
    font-size: 1.4rem;
    margin-bottom: 2px;
  }
}

/* ============ 481px - 768px (大屏手机/小平板) ============ */
@media (min-width: 481px) and (max-width: 768px) {
  .container, [class*="container"] {
    padding: 0 16px !important;
  }
  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.5rem !important; }
  h3 { font-size: 1.25rem !important; }
  .grid, [class*="grid-"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  header nav, header [class*="main-nav"] {
    display: none !important;
  }
  .wzk-mobile-menu-btn {
    display: flex !important;
  }
  button, .btn {
    min-height: 44px !important;
  }
  .top-bar, .top-nav {
    display: none !important;
  }
  .modal {
    width: 90% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }
}

/* ============ 769px - 1024px (平板) ============ */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    max-width: 100% !important;
    padding: 0 24px !important;
  }
  .grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  h1 { font-size: 2rem !important; }
}

/* ============ 横屏 (orientation: landscape) 优化 ============ */
@media (max-width: 1024px) and (orientation: landscape) {
  header {
    position: sticky;
    top: 0;
  }
  .modal, [class*="modal"] {
    max-height: 85vh !important;
  }
}

/* ============ 鸿蒙 (HarmonyOS) 特定优化 ============ */
@supports (-webkit-touch-callout: none) and (not (hover: none)) {
  /* 鸿蒙 WebView 检测 */
  button, a {
    -webkit-tap-highlight-color: rgba(16, 185, 129, 0.2);
  }
}

/* ============ 安全区域 (iPhone X+/鸿蒙刘海) ============ */
@supports (padding: max(0px)) {
  header {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .wzk-bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .modal {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* ============ 暗色模式 (鸿蒙/iOS 自动) ============ */
@media (prefers-color-scheme: dark) {
  /* 保持浅色以保护品牌一致性 */
}

/* ============ 减少动画 (无障碍) ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============ iOS 安全滚动 ============ */
.scroll-container, [class*="scroll-container"], .modal-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ============ 触摸反馈 (所有平台) ============ */
.wzk-touch-feedback {
  position: relative;
  overflow: hidden;
}
.wzk-touch-feedback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 185, 129, 0.15);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.wzk-touch-feedback:active::after {
  opacity: 1;
  transition: opacity 0s;
}

/* ============ 性能优化 ============ */
.wzk-lazy-img {
  opacity: 0;
  transition: opacity 0.3s;
}
.wzk-lazy-img.loaded {
  opacity: 1;
}

/* ============ 营销中心移动端特别优化 ============ */
@media (max-width: 480px) {
  /* 活动卡 - 单列,大图占主导 */
  .activity-card, [class*="activity-card"] {
    width: 100% !important;
    margin: 8px 0 !important;
  }
  /* 11 个游戏 - 单列 */
  .activity-card-grid, [class*="activity-grid"] {
    grid-template-columns: 1fr !important;
  }
  /* 转盘 */
  .wzk-lucky-wheel, [class*="lucky-wheel"] {
    width: 280px !important;
    height: 280px !important;
  }
  /* 直播/众筹/拼单 - 按钮全宽 */
  .wzk-modal-box [data-live-buy], .wzk-modal-box [data-crowdfund], .wzk-modal-box [data-group] {
    width: 100% !important;
    min-height: 48px !important;
  }
  /* 弹窗标题 */
  .wzk-modal-title {
    font-size: 1.1rem !important;
    padding: 12px 16px !important;
  }
  .wzk-modal-body {
    padding: 12px !important;
  }
}

/* ============ 会员中心移动端 ============ */
@media (max-width: 480px) {
  .signin-calendar, [class*="signin-calendar"], [class*="calendar"] {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
  }
  .signin-calendar > div, [class*="calendar"] > div {
    aspect-ratio: 1 / 1 !important;
    font-size: 0.75rem !important;
    min-height: 36px !important;
  }
}

/* ============ 后台管理移动端 ============ */
@media (max-width: 768px) {
  .admin-sidebar, [class*="admin-sidebar"] {
    transform: translateX(-100%) !important;
    transition: transform 0.3s !important;
    z-index: 1001 !important;
  }
  .admin-sidebar.open {
    transform: translateX(0) !important;
  }
  .admin-content, [class*="admin-content"] {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .admin-table, [class*="data-table"] {
    font-size: 0.85rem !important;
  }
  .admin-table th, .admin-table td,
  [class*="data-table"] th, [class*="data-table"] td {
    padding: 8px 4px !important;
  }
}

/* ============ 性能/无障碍 ============ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}