/**
 * BTCY 前端优化 - 移动端交互样式
 * 包含：底部导航、滑动卡片、触摸优化、响应式布局
 */

/* ==========================================
   1. 移动端底部导航栏
   ========================================== */

.btcy-mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  padding: 0;
  margin: 0;
  list-style: none;
}

.btcy-mobile-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #666;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 4px;
}

.btcy-mobile-bottom-nav-item i {
  font-size: 20px;
  margin-bottom: 4px;
}

.btcy-mobile-bottom-nav-item span {
  font-size: 11px;
  line-height: 1;
}

.btcy-mobile-bottom-nav-item:active {
  background: rgba(180, 160, 120, 0.1);
}

.btcy-mobile-bottom-nav-item.active {
  color: #b4a078;
}

.btcy-mobile-bottom-nav-item.active i {
  animation: btcy-heartbeat 0.6s ease-in-out;
}

/* 商城主题底部导航 */
.btcy-mobile-bottom-nav-mall .btcy-mobile-bottom-nav-item.active {
  color: #667eea;
}

/* 新闻主题底部导航 */
.btcy-mobile-bottom-nav-news .btcy-mobile-bottom-nav-item.active {
  color: #00c6fb;
}

/* 元宇宙主题底部导航 */
.btcy-mobile-bottom-nav-metaverse .btcy-mobile-bottom-nav-item.active {
  color: #a18cd1;
}

/* 移动端显示底部导航 */
@media (max-width: 767px) {
  .btcy-mobile-bottom-nav {
    display: flex;
  }
  
  body {
    padding-bottom: 60px;
  }
  
  /* 移动端隐藏传统页脚 */
  .footer-primary {
    display: none;
  }
}

/* ==========================================
   2. 滑动卡片组件
   ========================================== */

.btcy-mobile-swipe-container {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  display: flex;
  gap: 12px;
  padding: 12px 0;
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
}

.btcy-mobile-swipe-container::-webkit-scrollbar {
  display: none;
}

.btcy-mobile-swipe-card {
  scroll-snap-align: start;
  flex: 0 0 85%;
  min-width: 85%;
}

/* 商品卡片移动端样式 */
.btcy-mobile-swipe-card .tc-gridbox {
  margin: 0;
  height: 100%;
}

/* 新闻卡片移动端样式 */
.btcy-mobile-swipe-card .btcy-news-item {
  margin-bottom: 0;
  height: 100%;
}

/* ==========================================
   3. 触摸优化
   ========================================== */

/* 触摸目标最小44px (Apple HIG标准) */
@media (max-width: 767px) {
  .btn,
  .navbar-nav > li > a,
  .list-actions a,
  .pagination > li > a,
  .pagination > li > span {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 16px;
  }
  
  /* 禁用移动端点击延迟 */
  * {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  /* 链接触摸反馈 */
  a:active,
  button:active {
    opacity: 0.7;
  }
}

/* ==========================================
   4. 移动端导航增强
   ========================================== */

@media (max-width: 767px) {
  /* 汉堡菜单按钮增大 */
  .navbar-toggle {
    padding: 12px;
    margin-right: 8px;
  }
  
  .navbar-toggle .icon-bar {
    height: 3px;
    margin: 5px 0;
  }
  
  /* 导航菜单展开动画 */
  .navbar-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  .navbar-collapse.in {
    max-height: 80vh;
    overflow-y: auto;
  }
  
  /* 导航菜单项触摸优化 */
  .navbar-nav > li > a {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }
  
  /* 当前页高亮 */
  .navbar-nav > li.active > a {
    background: rgba(180, 160, 120, 0.1);
    border-left: 3px solid #b4a078;
    padding-left: 13px;
  }
  
  /* 用户区域触摸优化 */
  .navbar-nav .user > a {
    padding: 14px 16px;
  }
}

/* ==========================================
   5. 移动端列表优化
   ========================================== */

@media (max-width: 767px) {
  /* 新闻列表卡片化 */
  .list-boxes {
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  
  .list-boxes h2 {
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  .list-boxes p {
    font-size: 14px;
    line-height: 1.5;
  }
  
  .list-actions {
    margin-top: 12px;
  }
  
  .list-actions a {
    margin-right: 16px;
  }
  
  /* 商品列表网格优化 */
  .tc-gridbox-container {
    width: 50%;
    padding: 8px;
  }
  
  .tc-gridbox {
    margin: 0;
  }
  
  .tc-gridbox .item-name {
    font-size: 14px;
  }
  
  .tc-gridbox .price-detail {
    font-size: 16px;
  }
}

/* ==========================================
   6. 移动端详情页优化
   ========================================== */

@media (max-width: 767px) {
  /* 文章内容优化 */
  .article-box {
    padding: 16px;
  }
  
  .article-box h1,
  .article-box h2,
  .article-box h3 {
    font-size: 20px;
    margin: 20px 0 12px;
  }
  
  .article-box p {
    font-size: 15px;
    line-height: 1.7;
  }
  
  .article-box img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  /* 商品详情图片滑动 */
  .item-images-container {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    gap: 8px;
  }
  
  .item-images-container img {
    scroll-snap-align: center;
    flex: 0 0 100%;
  }
}

/* ==========================================
   7. 移动端表单优化
   ========================================== */

@media (max-width: 767px) {
  /* 输入框触摸优化 */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px; /* 防止iOS自动缩放 */
    padding: 12px;
    min-height: 44px;
  }
  
  /* 按钮优化 */
  button,
  .btn {
    min-height: 44px;
    padding: 12px 20px;
  }
  
  /* 搜索框优化 */
  .navbar-form {
    padding: 10px 16px;
  }
  
  .navbar-form input[type="text"] {
    width: 100%;
  }
}

/* ==========================================
   8. 移动端手势操作提示
   ========================================== */

/* 滑动提示 */
.btcy-swipe-hint {
  position: relative;
}

.btcy-swipe-hint::after {
  content: '\f053\00a0\00a0';
  font-family: FontAwesome;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  animation: btcy-floatLeftRight 1.5s ease-in-out infinite;
}

/* 下拉刷新提示 */
.btcy-pull-refresh-hint {
  text-align: center;
  padding: 12px;
  color: #999;
  font-size: 13px;
  display: none;
}

.btcy-pull-refresh-hint.show {
  display: block;
}

/* 上滑加载更多 */
.btcy-load-more-hint {
  text-align: center;
  padding: 16px;
  color: #666;
  font-size: 14px;
}

.btcy-load-more-hint .fa {
  margin-right: 8px;
  animation: btcy-rotateSlow 1s linear infinite;
}

/* ==========================================
   9. 移动端特殊效果
   ========================================== */

@media (max-width: 767px) {
  /* 粒子背景降级为静态渐变 */
  #particles-container {
    background: linear-gradient(135deg, rgba(180, 160, 120, 0.05) 0%, rgba(212, 165, 116, 0.1) 100%);
  }
  
  .btcy-metaverse-wrapper #particles-container {
    background: linear-gradient(135deg, rgba(45, 27, 105, 0.3) 0%, rgba(17, 0, 28, 0.5) 100%);
  }
  
  /* 禁用复杂动画 */
  .btcy-animate-float,
  .btcy-animate-float-slow,
  .btcy-animate-rotate {
    animation: none;
  }
  
  .btcy-animate-gradient {
    animation: none;
    background-size: 100% 100%;
  }
  
  /* 简化阴影效果 */
  .tc-gridbox:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: none;
  }
}

/* ==========================================
   10. 小屏手机优化 (<=480px)
   ========================================== */

@media (max-width: 480px) {
  /* 商品列表改为单列 */
  .tc-gridbox-container {
    width: 100%;
  }
  
  /* 底部导航文字缩小 */
  .btcy-mobile-bottom-nav-item i {
    font-size: 18px;
  }
  
  .btcy-mobile-bottom-nav-item span {
    font-size: 10px;
  }
  
  /* 标题字号缩小 */
  h1 {
    font-size: 24px;
  }
  
  h2 {
    font-size: 20px;
  }
  
  h3 {
    font-size: 18px;
  }
  
  /* 间距缩小 */
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ==========================================
   11. 平板优化 (768px - 991px)
   ========================================== */

@media (min-width: 768px) and (max-width: 991px) {
  /* 网格列数调整 */
  .tc-gridbox-container {
    width: 33.333%;
  }
  
  /* 侧边栏调整 */
  .col-md-3 {
    width: 100%;
  }
}

/* ==========================================
   12. 横屏模式优化
   ========================================== */

@media (max-width: 991px) and (orientation: landscape) {
  /* 底部导航隐藏 */
  .btcy-mobile-bottom-nav {
    display: none;
  }
  
  body {
    padding-bottom: 0;
  }
  
  .footer-primary {
    display: block;
  }
}