/**
 * 移动端底部导航菜单样式
 * AkMobileMenu Plugin
 */

/* 🔥🔥🔥 关键优化：菜单默认立即可见，避免闪烁和延迟 */
.ak-mobile-menu {
  /* 默认就是可见的，确保页面跳转时立即显示 */
  opacity: 1 !important;
  visibility: visible !important;
  /* 使用content-visibility优化渲染性能 */
  content-visibility: auto;
  /* 提升渲染优先级 */
  contain: layout style paint;
  /* 🔥 禁用所有过渡效果，防止闪烁 */
  transition: none !important;
  animation: none !important;
}

/* 🔥 ready状态确保完全可见（无过渡） */
.ak-mobile-menu.ak-ready {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  animation: none !important;
}

/* 移动端显示 (≤768px) */
@media (max-width: 768px) {
  .ak-mobile-menu {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--menu-height, 60px);
    background-color: var(--menu-bg-color, #ffffff);
    /* 🔥🔥🔥 超高z-index确保始终在最顶层 */
    z-index: 999999 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding-bottom: env(safe-area-inset-bottom, 0);
    /* 🔥 禁用过渡效果，防止闪烁 */
    transition: none !important;
    justify-content: space-around;
    align-items: center;
    /* 🔥 关键：默认始终可见，禁止任何隐藏 */
    transform: translateY(0) translateZ(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* 🔥🔥🔥 GPU加速和渲染优化 */
    will-change: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* 强制使用GPU加速 */
    transform: translate3d(0, 0, 0);
    /* 提升到独立图层，优先渲染 */
    isolation: isolate;
  }

  /* 隐藏状态 - 仅在用户滚动时才会使用 */
  .ak-mobile-menu.hidden:not(.force-visible) {
    transform: translateY(100%);
    transition: transform 0.2s ease-in-out;
  }

  /* 🔥 强制显示状态 - 页面跳转和加载时绝对可见 */
  .ak-mobile-menu.force-visible {
    transform: translateY(0) translate3d(0, 0, 0) !important;
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    /* 🔥 使用最高优先级确保可见 */
    display: flex !important;
    /* 🔥 强制渲染优先级 */
    contain: none !important;
    will-change: auto !important;
  }
  
  /* 🔥 导航中状态 - 点击后到新页面加载完成前 */
  .ak-mobile-menu.navigating {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    transition: none !important;
    /* 添加微妙的加载效果 */
    background: linear-gradient(
      90deg, 
      var(--menu-bg-color, #ffffff) 0%, 
      var(--menu-bg-color, #ffffff) 40%,
      rgba(255, 107, 107, 0.05) 50%,
      var(--menu-bg-color, #ffffff) 60%,
      var(--menu-bg-color, #ffffff) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }
  
  /* 加载动画效果 */
  @keyframes shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  /* 菜单项 */
  .ak-mobile-menu-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    text-decoration: none;
    color: var(--menu-text-color, #666666);
    /* 🔥 只对特定属性应用过渡，避免opacity被意外改变 */
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
    position: relative;
    cursor: pointer;
    min-width: 0;
    /* 🔥 确保菜单项始终不透明 */
    opacity: 1 !important;
    /* 🔥🔥🔥 关键修复：使用实心背景色，不能用 transparent */
    background-color: var(--menu-bg-color, #ffffff);
  }

  /* 菜单项悬停效果 */
  .ak-mobile-menu-item:hover,
  .ak-mobile-menu-item:focus {
    color: var(--menu-active-color, #ff6b6b);
    background-color: rgba(0, 0, 0, 0.03);
    text-decoration: none;
    outline: none;
  }

  /* 激活状态 */
  .ak-mobile-menu-item.active {
    color: var(--menu-active-color, #ff6b6b);
    /* 🔥🔥🔥 关键修复：激活状态也要有实心背景色 */
    background-color: var(--menu-bg-color, #ffffff);
    /* 🔥 确保激活状态也保持不透明 */
    opacity: 1 !important;
  }

  /* 图标容器 */
  .ak-menu-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    /* 🔥 确保图标容器始终不透明 */
    opacity: 1 !important;
  }

  /* 图标 */
  .ak-mobile-menu-item i {
    font-size: var(--menu-icon-size, 24px);
    line-height: 1;
    transition: transform 0.2s ease;
    /* 🔥 确保图标始终不透明 */
    opacity: 1 !important;
  }

  /* 图标悬停缩放效果 */
  .ak-mobile-menu-item:hover i,
  .ak-mobile-menu-item.active i {
    transform: scale(1.1);
  }

  /* 文字 */
  .ak-menu-text {
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
    /* 🔥 确保文字始终不透明 */
    opacity: 1 !important;
  }

  /* 徽章 */
  .ak-menu-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background-color: #ff4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    animation: badgePulse 2s ease-in-out infinite;
  }

  /* 徽章脉冲动画 */
  @keyframes badgePulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  /* 避免与底部菜单重叠，为页面底部添加内边距 */
  body {
    padding-bottom: calc(var(--menu-height, 60px) + env(safe-area-inset-bottom, 0));
  }

  /* 🔥🔥🔥 产品详情页按钮区域避让底部菜单 - 调整bottom值 */
  /* 重要：只在JS添加了ak-adjusted类时才调整，确保只在移动端菜单启用时生效 */
  .product-btns.ak-adjusted {
    /* 关键：调整底部位置，避免被菜单遮挡 */
    bottom: calc(var(--menu-height, 60px) + env(safe-area-inset-bottom, 0)) !important;
    z-index: 10 !important;
    /* 添加过渡效果，使移动更流畅 */
    transition: bottom 0.3s ease !important;
  }

  /* 为产品详情页添加额外的底部空间 */
  .product-detail .product-btns.ak-adjusted,
  .product-info .product-btns.ak-adjusted,
  [class*="product"] .product-btns.ak-adjusted {
    bottom: calc(var(--menu-height, 60px) + env(safe-area-inset-bottom, 0)) !important;
  }

  /* 确保按钮容器在移动端有足够的底部空间 */
  .product-btns.ak-adjusted .quantity-btns,
  .product-btns.ak-adjusted .add-wishlist {
    position: relative;
    z-index: 1;
  }
  
  /* 🔥 处理产品按钮区域的padding，确保底部有足够空间 */
  .product-btns.ak-adjusted .quantity-btns,
  .product-btns.ak-adjusted > * {
    margin-bottom: 0 !important;
  }

  /* 🔥🔥🔥 购物车底部结账栏避让底部菜单 - 动态调整 */
  .cart-mb-total {
    /* 默认：如果元素是fixed定位，调整bottom值 */
    /* 注意：JS会动态覆盖这个值，所以这里只是作为后备 */
    position: fixed !important;
    z-index: 99 !important;
    /* 添加过渡效果，使调整更平滑 */
    transition: bottom 0.3s ease, transform 0.3s ease;
    /* 确保元素始终可见且可交互 */
    pointer-events: auto !important;
    /* 确保背景不透明，避免被菜单遮挡 */
    background-color: #fff !important;
  }
  
  /* 🔥 已调整的元素（由JS添加ak-adjusted类） */
  .cart-mb-total.ak-adjusted {
    /* JS会动态设置bottom值，这里确保样式优先级 */
    position: fixed !important;
    z-index: 99 !important;
    pointer-events: auto !important;
    /* 确保按钮可点击 */
    pointer-events: auto !important;
  }
  
  /* 🔥 确保结账按钮完全可见且可点击 */
  .cart-mb-total.ak-adjusted .btn-checkout {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    /* 确保按钮不被遮挡 */
    margin: 0 !important;
    padding: 0.5rem 1rem !important;
  }
  
  /* 🔥 如果购物车结账栏不是fixed定位，使用transform（备用方案） */
  .cart-mb-total:not([style*="position: fixed"]):not([style*="position:fixed"]):not(.ak-adjusted) {
    position: relative !important;
    transform: translateY(calc(-1 * (var(--menu-height, 60px) + env(safe-area-inset-bottom, 0)))) !important;
    transition: transform 0.3s ease;
    bottom: auto !important;
  }
  
  /* 🔥 支持地址栏在底部的情况 - 使用视口单位作为额外保障 */
  @supports (height: 100dvh) {
    .cart-mb-total.ak-adjusted {
      /* 使用动态视口高度单位，自动适应地址栏变化 */
      max-height: calc(100dvh - var(--menu-height, 60px) - env(safe-area-inset-bottom, 0));
    }
  }

  /* 🔥🔥🔥 结账页面底部提交订单栏样式 */
  .submit-checkout-wrap {
    /* 默认：如果元素是fixed定位，调整bottom值 */
    /* 注意：JS会动态覆盖这个值，所以这里只是作为后备 */
    position: fixed !important;
    z-index: 99 !important;
    /* 添加过渡效果，使调整更平滑 */
    transition: bottom 0.3s ease, transform 0.3s ease;
    /* 确保元素始终可见且可交互 */
    pointer-events: auto !important;
    /* 确保背景不透明，避免被菜单遮挡 */
    background-color: #fff !important;
  }
  
  /* 🔥 已调整的元素（由JS添加ak-adjusted类） */
  .submit-checkout-wrap.ak-adjusted {
    /* JS会动态设置bottom值，这里确保样式优先级 */
    position: fixed !important;
    z-index: 99 !important;
    pointer-events: auto !important;
    /* 确保按钮可点击 */
    pointer-events: auto !important;
  }
  
  /* 🔥 确保提交订单按钮完全可见且可点击 */
  .submit-checkout-wrap.ak-adjusted #submit-checkout {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    /* 确保按钮不被遮挡 */
    margin: 0 !important;
  }
  
  /* 🔥 如果提交订单栏不是fixed定位，使用transform（备用方案） */
  .submit-checkout-wrap:not([style*="position: fixed"]):not([style*="position:fixed"]):not(.ak-adjusted) {
    position: relative !important;
    transform: translateY(calc(-1 * (var(--menu-height, 60px) + env(safe-area-inset-bottom, 0)))) !important;
    transition: transform 0.3s ease;
    bottom: auto !important;
  }
  
  /* 🔥 支持地址栏在底部的情况 - 使用视口单位作为额外保障 */
  @supports (height: 100dvh) {
    .submit-checkout-wrap.ak-adjusted {
      /* 使用动态视口高度单位，自动适应地址栏变化 */
      max-height: calc(100dvh - var(--menu-height, 60px) - env(safe-area-inset-bottom, 0));
    }
  }


  @keyframes scrollUpHint {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3px);
    }
  }

  /* 点击反馈效果 */
  .ak-mobile-menu-item:active {
    transform: scale(0.95);
    background-color: rgba(0, 0, 0, 0.05);
    /* 🔥 确保点击时也保持不透明 */
    opacity: 1 !important;
  }
  
  /* 🔥 导航中的菜单项样式 */
  .ak-mobile-menu.navigating .ak-mobile-menu-item.active {
    position: relative;
  }
  
  /* 🔥 添加微妙的加载指示器 */
  .ak-mobile-menu.navigating .ak-mobile-menu-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--menu-active-color, #ff6b6b);
    border-radius: 2px;
    animation: loadingPulse 0.8s ease-in-out infinite;
  }
  
  @keyframes loadingPulse {
    0%, 100% {
      opacity: 0.5;
      width: 20px;
    }
    50% {
      opacity: 1;
      width: 30px;
    }
  }

  /* 无边框样式（可选） */
  .ak-mobile-menu.no-border {
    border-top: none;
  }

  /* 无阴影样式（可选） */
  .ak-mobile-menu.no-shadow {
    box-shadow: none;
  }
}

/* 平板和桌面端隐藏 */
@media (min-width: 769px) {
  .ak-mobile-menu {
    display: none !important;
  }
  
  body {
    padding-bottom: 0 !important;
  }
}

/* 适配超小屏幕 (≤375px) */
@media (max-width: 375px) {
  .ak-menu-text {
    font-size: 10px;
  }

  .ak-mobile-menu-item i {
    font-size: calc(var(--menu-icon-size, 24px) * 0.9);
  }

  .ak-mobile-menu-item {
    padding: 6px 2px;
  }
}

/* 横屏适配 */
@media (max-width: 768px) and (orientation: landscape) {
  .ak-mobile-menu {
    height: calc(var(--menu-height, 60px) * 0.8);
  }

  .ak-mobile-menu-item {
    padding: 4px 2px;
  }

  .ak-menu-text {
    font-size: 10px;
  }

  .ak-mobile-menu-item i {
    font-size: calc(var(--menu-icon-size, 24px) * 0.85);
  }
}

/* 🔥 禁用默认加载动画，防止闪烁 */
/* 加载动画已被force-visible机制替代，菜单始终立即可见 */
@keyframes menuSlideUp {
  from {
    transform: translateY(0) translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translateY(0) translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* 🔥 菜单默认立即可见，完全禁用动画 */
.ak-mobile-menu {
  animation: none !important;
}

/* 🔥 所有状态下都禁用动画，确保无闪烁 */
.ak-mobile-menu:not(.force-visible):not(.navigating) {
  animation: none !important;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .ak-mobile-menu {
    border-top-width: 2px;
  }
  
  .ak-mobile-menu-item {
    font-weight: 600;
  }
}

/* 🌙 深色模式支持 - 完整优化版 */
@media (prefers-color-scheme: dark) {
  /* 菜单容器 - 深色背景 */
  .ak-mobile-menu {
    background-color: #1a1a1a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.6), 0 -1px 4px rgba(0, 0, 0, 0.4);
    /* 添加平滑过渡 */
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }

  /* 菜单项 - 深色背景 */
  .ak-mobile-menu-item {
    color: #b0b0b0 !important;
    background-color: #1a1a1a !important;
    /* 添加平滑的颜色过渡 */
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
  }

  /* 菜单项悬停效果 - 深色模式 */
  .ak-mobile-menu-item:hover,
  .ak-mobile-menu-item:focus {
    color: #ff8787 !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
  }

  /* 激活状态 - 深色模式 */
  .ak-mobile-menu-item.active {
    color: #ff8787 !important;
    background-color: rgba(255, 107, 107, 0.15) !important;
  }

  /* 激活状态图标发光效果 */
  .ak-mobile-menu-item.active i {
    filter: drop-shadow(0 0 4px rgba(255, 135, 135, 0.5));
  }

  /* 点击反馈效果 - 深色模式 */
  .ak-mobile-menu-item:active {
    background-color: rgba(255, 255, 255, 0.12) !important;
  }

  /* 徽章 - 深色模式优化 */
  .ak-menu-badge {
    background-color: #ff5252;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(255, 82, 82, 0.4), 0 0 0 2px #1a1a1a;
  }

  /* 导航中状态 - 深色模式 */
  .ak-mobile-menu.navigating {
    background: linear-gradient(
      90deg, 
      #1a1a1a 0%, 
      #1a1a1a 40%,
      rgba(255, 107, 107, 0.1) 50%,
      #1a1a1a 60%,
      #1a1a1a 100%
    ) !important;
  }

  /* 导航加载指示器 - 深色模式 */
  .ak-mobile-menu.navigating .ak-mobile-menu-item.active::after {
    background: #ff8787;
    box-shadow: 0 0 8px rgba(255, 135, 135, 0.6);
  }

  /* 禁用状态 - 深色模式 */
  .ak-mobile-menu-item.disabled {
    color: rgba(176, 176, 176, 0.4) !important;
  }

  /* 文字在深色模式下的优化 */
  .ak-menu-text {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  /* 图标在深色模式下的优化 */
  .ak-mobile-menu-item i {
    filter: brightness(1.1);
  }

  /* 产品按钮区域 - 深色模式 */
  .product-btns.ak-adjusted {
    background-color: rgba(26, 26, 26, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* 购物车结账栏 - 深色模式 */
  .cart-mb-total {
    background-color: rgba(26, 26, 26, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* 🌙 深色模式 + 高对比度组合 */
@media (prefers-color-scheme: dark) and (prefers-contrast: high) {
  .ak-mobile-menu {
    border-top-width: 2px;
    border-top-color: rgba(255, 255, 255, 0.3);
  }

  .ak-mobile-menu-item {
    color: #e0e0e0 !important;
    font-weight: 600;
  }

  .ak-mobile-menu-item.active {
    color: #ffb3b3 !important;
  }

  .ak-menu-badge {
    border: 2px solid #1a1a1a;
    font-weight: 700;
  }
}

/* 可访问性：聚焦指示器 */
.ak-mobile-menu-item:focus-visible {
  outline: 2px solid var(--menu-active-color, #ff6b6b);
  outline-offset: -2px;
  border-radius: 4px;
}

/* 禁用状态 */
.ak-mobile-menu-item.disabled {
  /* 使用颜色变淡而不是透明度，避免看到后面的元素 */
  color: rgba(102, 102, 102, 0.5);
  pointer-events: none;
  opacity: 1 !important;
}

.ak-mobile-menu-item.disabled i,
.ak-mobile-menu-item.disabled .ak-menu-text {
  opacity: 0.5 !important;
}

/* 自定义滚动条（如果菜单项过多需要横向滚动） */
.ak-mobile-menu::-webkit-scrollbar {
  display: none;
}

.ak-mobile-menu {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 🔥🔥🔥 终极修复：强制所有菜单项及其子元素始终不透明 🔥🔥🔥 */
/* 使用最高优先级选择器，覆盖任何可能的样式 */
.ak-mobile-menu .ak-mobile-menu-item,
.ak-mobile-menu .ak-mobile-menu-item *,
.ak-mobile-menu .ak-mobile-menu-item::before,
.ak-mobile-menu .ak-mobile-menu-item::after,
.ak-mobile-menu .ak-mobile-menu-item.active,
.ak-mobile-menu .ak-mobile-menu-item:hover,
.ak-mobile-menu .ak-mobile-menu-item:focus,
.ak-mobile-menu .ak-mobile-menu-item:active,
.ak-mobile-menu .ak-mobile-menu-item:visited,
.ak-mobile-menu .ak-mobile-menu-item:link {
  opacity: 1 !important;
}

/* 🔥 确保图标和文字也始终不透明 */
.ak-mobile-menu .ak-menu-icon-wrapper,
.ak-mobile-menu .ak-mobile-menu-item i,
.ak-mobile-menu .ak-menu-text {
  opacity: 1 !important;
}

/* 🔥 禁用状态例外：允许子元素半透明，但容器本身不透明 */
.ak-mobile-menu .ak-mobile-menu-item.disabled {
  opacity: 1 !important;
}

.ak-mobile-menu .ak-mobile-menu-item.disabled i,
.ak-mobile-menu .ak-mobile-menu-item.disabled .ak-menu-text {
  opacity: 0.5 !important;
}