/**
 * WeChat Environment Adaptation Styles
 * 微信环境适配样式
 * 
 * 包含:
 * - iOS安全区域适配
 * - 微信浏览器特定样式
 * - 刘海屏适配
 */

/* ============================================
   iOS Safe Area Variables
   iOS安全区域变量
   ============================================ */

:root {
  /* 定义CSS变量来存储安全区域的inset值 */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  
  /* 常用的安全区域组合 */
  --safe-area-padding-top: max(var(--spacing-lg), env(safe-area-inset-top));
  --safe-area-padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
}

/* ============================================
   iOS Device Specific Styles
   iOS设备特定样式
   ============================================ */

/* iOS设备基础样式 */
.ios-device {
  /* 防止iOS橡皮筋效果 */
  -webkit-overflow-scrolling: touch;
}

/* iOS输入框样式重置 */
.ios-device input,
.ios-device textarea,
.ios-device select {
  /* 移除iOS默认的圆角和阴影 */
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius-sm);
}

/* iOS按钮样式重置 */
.ios-device button {
  -webkit-appearance: none;
  appearance: none;
}

/* 防止iOS双击缩放 */
.ios-device * {
  touch-action: manipulation;
}

/* ============================================
   WeChat Browser Specific Styles
   微信浏览器特定样式
   ============================================ */

/* 微信浏览器基础样式 */
.wechat-browser {
  /* 禁用微信内置的长按菜单 */
  -webkit-touch-callout: none;
}

/* 微信浏览器中的图片 */
.wechat-browser img {
  /* 防止长按保存图片 */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 可点击的图片需要恢复pointer-events */
.wechat-browser img.clickable,
.wechat-browser .product-card__image img,
.wechat-browser .order-item__image img {
  pointer-events: auto;
}

/* ============================================
   Safe Area Adaptation for Fixed Elements
   固定定位元素的安全区域适配
   ============================================ */

/* 底部导航栏 - 适配iOS安全区域 */
.bottom-nav {
  padding-bottom: var(--safe-area-inset-bottom);
  /* 确保最小高度包含安全区域 */
  min-height: calc(56px + var(--safe-area-inset-bottom));
}

/* 底部导航项 - 调整内边距 */
.supports-safe-area .bottom-nav__item {
  padding-bottom: calc(var(--spacing-sm) + var(--safe-area-inset-bottom));
}

/* 固定底部的结算栏 */
.cart-footer,
.checkout-footer {
  padding-bottom: calc(var(--spacing-lg) + var(--safe-area-inset-bottom));
}

/* 页面内容区域 - 避免被底部导航遮挡 */
.employee-purchase-container {
  padding-bottom: calc(70px + var(--safe-area-inset-bottom));
}

/* 顶部固定元素 - 适配刘海屏 */
.page-header,
.fixed-header {
  padding-top: var(--safe-area-inset-top);
}

/* Toast消息 - 避免被刘海遮挡 */
.toast {
  top: calc(20px + var(--safe-area-inset-top));
}

/* 模态框 - 适配安全区域 */
.modal {
  padding-top: var(--safe-area-inset-top);
  padding-bottom: var(--safe-area-inset-bottom);
}

/* ============================================
   Landscape Mode Adaptation
   横屏模式适配
   ============================================ */

@media (orientation: landscape) {
  /* 横屏时调整安全区域 */
  .supports-safe-area .bottom-nav {
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
  }
  
  .supports-safe-area .page-content {
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
  }
}

/* ============================================
   WeChat Specific Fixes
   微信特定问题修复
   ============================================ */

/* 修复微信浏览器中的滚动问题 - 仅移动端 */
@media (max-width: 768px) {
  .wechat-browser body {
    /* 防止页面弹性滚动 */
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .wechat-browser .page-wrapper,
  .wechat-browser .employee-purchase-container {
    /* 允许内容区域滚动 */
    position: relative;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 修复微信中输入框被键盘遮挡的问题 */
.wechat-browser.ios-device input:focus,
.wechat-browser.ios-device textarea:focus {
  /* 输入框获得焦点时的处理由JavaScript完成 */
  transform: translateZ(0);
}

/* ============================================
   Notch (刘海屏) Specific Styles
   刘海屏特定样式
   ============================================ */

/* iPhone X及以上设备的刘海屏适配 */
@supports (padding: max(0px)) {
  /* 使用max()函数确保至少有基础padding */
  .bottom-nav {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  
  .page-header {
    padding-top: max(0px, env(safe-area-inset-top));
  }
}

/* ============================================
   WeChat Dark Mode Support (Optional)
   微信深色模式支持（可选）
   ============================================ */

@media (prefers-color-scheme: dark) {
  .wechat-browser {
    /* 如果需要支持深色模式，在这里添加样式 */
    /* 目前保持默认浅色主题 */
  }
}

/* ============================================
   Utility Classes for Safe Area
   安全区域工具类
   ============================================ */

/* 添加顶部安全区域内边距 */
.safe-area-top {
  padding-top: var(--safe-area-inset-top);
}

/* 添加底部安全区域内边距 */
.safe-area-bottom {
  padding-bottom: var(--safe-area-inset-bottom);
}

/* 添加左侧安全区域内边距 */
.safe-area-left {
  padding-left: var(--safe-area-inset-left);
}

/* 添加右侧安全区域内边距 */
.safe-area-right {
  padding-right: var(--safe-area-inset-right);
}

/* 添加所有方向的安全区域内边距 */
.safe-area-all {
  padding-top: var(--safe-area-inset-top);
  padding-right: var(--safe-area-inset-right);
  padding-bottom: var(--safe-area-inset-bottom);
  padding-left: var(--safe-area-inset-left);
}

/* ============================================
   Debug Helpers (Development Only)
   调试辅助（仅开发环境）
   ============================================ */

/* 显示安全区域边界（开发时使用） */
.show-safe-area::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: var(--safe-area-inset-top) solid rgba(255, 0, 0, 0.3);
  border-right: var(--safe-area-inset-right) solid rgba(0, 255, 0, 0.3);
  border-bottom: var(--safe-area-inset-bottom) solid rgba(0, 0, 255, 0.3);
  border-left: var(--safe-area-inset-left) solid rgba(255, 255, 0, 0.3);
  pointer-events: none;
  z-index: 99999;
}

/* ============================================
   Performance Optimizations
   性能优化
   ============================================ */

/* 使用GPU加速优化滚动性能 */
.wechat-browser .scroll-container {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: scroll-position;
}

/* 修复固定定位元素的性能 */
.wechat-browser .bottom-nav,
.wechat-browser .fixed-header {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* ============================================
   LightGallery Mobile Adaptation
   LightGallery 移动端适配修复
   ============================================ */

/* 强制全屏容器，确保不受父级样式干扰 */
.lg-outer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 10000 !important;
  /* 恢复默认背景色，避免 background: none 导致的透明问题 */
  background-color: rgba(0, 0, 0, 0.9) !important;
}

/* 遮罩层，确保在底层 */
.lg-backdrop {
  z-index: 9999 !important;
  background-color: #000 !important;
  opacity: 0.8 !important;
}

/* 针对移动端深度清理可能干扰的卡片样式 */
.lg-outer .lg-img-wrap,
.lg-outer .lg-item,
.lg-outer .lg-object {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 确保图片在容器内正确缩放 */
.lg-outer .lg-image {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* 调整移动端工具栏位置，适配刘海屏 */
.lg-toolbar {
  padding-top: var(--safe-area-inset-top) !important;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent) !important;
  z-index: 10002 !important;
}

/* 画廊子标题区域 */
.lg-sub-html {
  background-color: rgba(0, 0, 0, 0.6) !important;
  z-index: 10001 !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}

/* 解决 vConsole 遮挡操作按钮的问题 */
.lg-on #__vconsole {
  display: none !important;
}

/* 当画廊打开时隐藏干扰元素 */
body.lg-on .ep-bottom-nav {
  display: none !important;
}