/**
 * 茶九度茶饮培训 - 创新底部导航栏
 * Innovative Tab Bar with Fluid Shape & Center Button
 */

/* ========== 底部导航栏容器 ========== */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--tabbar-height);
  z-index: var(--z-fixed);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* 流体形状背景 */
.tab-bar-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

/* 波浪形状SVG背景 */
.tab-bar-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  pointer-events: none;
}

.tab-bar-wave svg {
  width: 100%;
  height: 100%;
}

.tab-bar-wave path {
  fill: var(--glass-bg-light);
  filter: drop-shadow(0 -4px 10px rgba(0, 0, 0, 0.05));
}

/* ========== 导航项容器 ========== */
.tab-bar-items {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  width: 100%;
  max-width: var(--screen-width);
  height: 100%;
  padding: 0 var(--space-lg);
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 8px);
}

/* ========== 普通导航项 ========== */
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 50px;
  position: relative;
  cursor: pointer;
  transition: all var(--transition-normal);
  -webkit-tap-highlight-color: transparent;
}

/* 图标 */
.tab-item-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  transition: all var(--transition-bounce);
  position: relative;
}

.tab-item-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* 文字标签 */
.tab-item-label {
  font-size: 10px;
  color: var(--color-text-tertiary);
  margin-top: 2px;
  transition: all var(--transition-normal);
  opacity: 0.8;
  transform: translateY(2px);
}

/* ========== 选中状态 ========== */
.tab-item.active .tab-item-icon {
  color: var(--color-primary);
  transform: scale(1.15) translateY(-2px);
}

.tab-item.active .tab-item-label {
  color: var(--color-primary);
  opacity: 1;
  transform: translateY(0);
  font-weight: var(--font-weight-medium);
}

/* 选中背景光晕 */
.tab-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

/* 点击涟漪效果 */
.tab-item::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 107, 53, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s, opacity 0.4s;
  opacity: 0;
}

.tab-item:active::after {
  width: 60px;
  height: 60px;
  opacity: 1;
}

/* ========== 中心凸起按钮（购物车） ========== */
.tab-item-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 72px;
  height: 50px;
  z-index: 10;
}

.tab-item-center-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gradient-primary-button);
  box-shadow: var(--shadow-primary-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  transition: all var(--transition-bounce);
  cursor: pointer;
  border: 3px solid var(--color-bg-white);
}

.tab-item-center-btn:hover {
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 12px 32px rgba(255, 107, 53, 0.5);
}

.tab-item-center-btn:active {
  transform: translateX(-50%) scale(0.95);
}

/* 购物车图标 */
.tab-item-center-icon {
  width: 24px;
  height: 24px;
  color: var(--color-text-white);
}

.tab-item-center-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* 中心按钮文字 */
.tab-item-center-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 1px;
  font-weight: var(--font-weight-medium);
}

/* ========== 购物车角标 ========== */
.tab-item-center-badge {
  position: absolute;
  top: -2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
  background: var(--color-error);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-bg-white);
  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.4);
  animation: badge-pop 0.3s var(--transition-bounce);
}

@keyframes badge-pop {
  0% { transform: scale(0); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* 角标数字变化动画 */
.tab-item-center-badge.updating {
  animation: badge-bounce 0.4s var(--transition-bounce);
}

@keyframes badge-bounce {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(0.9); }
  75% { transform: scale(1.1); }
}

/* ========== 添加商品时的动画 ========== */
.tab-item-center-btn.adding {
  animation: cart-bounce 0.5s var(--transition-spring);
}

@keyframes cart-bounce {
  0% { transform: translateX(-50%) scale(1); }
  20% { transform: translateX(-50%) scale(1.15) rotate(-5deg); }
  40% { transform: translateX(-50%) scale(0.95) rotate(5deg); }
  60% { transform: translateX(-50%) scale(1.08) rotate(-3deg); }
  80% { transform: translateX(-50%) scale(0.98) rotate(2deg); }
  100% { transform: translateX(-50%) scale(1) rotate(0); }
}

/* 商品飞入动画轨迹（通过JS添加） */
.fly-to-cart {
  position: fixed;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary);
  z-index: var(--z-toast);
  pointer-events: none;
  animation: fly-arc 0.6s ease-in forwards;
}

@keyframes fly-arc {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

/* ========== 导航栏不同页面适配 ========== */

/* 首页 - 透明底部 */
.tab-bar.transparent .tab-bar-bg {
  background: transparent;
  box-shadow: none;
  border: none;
}

/* 深色背景页面 */
.tab-bar.dark .tab-item-icon,
.tab-bar.dark .tab-item-label {
  color: rgba(255, 255, 255, 0.6);
}

.tab-bar.dark .tab-item.active .tab-item-icon,
.tab-bar.dark .tab-item.active .tab-item-label {
  color: var(--color-text-white);
}

/* ========== 隐藏导航栏（特定页面） ========== */
.tab-bar.hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* ========== 页面底部安全区占位 ========== */
.tab-bar-placeholder {
  height: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0));
}

/* ========== 导航项图标SVG定义 ========== */
/*
  图标使用内联SVG，以下为参考：
  
  首页：
  <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
  
  培训：
  <svg viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
  
  商城：
  <svg viewBox="0 0 24 24"><path d="M19 6h-2c0-2.76-2.24-5-5-5S7 3.24 7 6H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-7-3c1.66 0 3 1.34 3 3H9c0-1.66 1.34-3 3-3zm7 17H5V8h14v12zm-7-8c-1.66 0-3-1.34-3-3H7c0 2.76 2.24 5 5 5s5-2.24 5-5h-2c0 1.66-1.34 3-3 3z"/></svg>
  
  购物车：
  <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
  
  我的：
  <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
*/