/* Mobile Navigation Bar */
.lightbox-mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--mobile-nav-height) + var(--safe-area-inset-bottom));
  padding-bottom: var(--safe-area-inset-bottom);
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: none;
  align-items: center;
  justify-content: space-around;
  z-index: calc(var(--lightbox-z-index) + 1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 移动端显示导航栏 */
@media (max-width: 768px) {
  .lightbox.active .lightbox-mobile-nav {
    display: flex;
  }
}

@media (hover: none) and (pointer: coarse) {
  .lightbox.active .lightbox-mobile-nav {
    display: flex;
  }
}

/* 导航按钮 */
.nav-btn {
  min-width: var(--touch-target-min-size);
  min-height: var(--touch-target-min-size);
  width: var(--touch-target-min-size);
  height: var(--touch-target-min-size);
  background-color: transparent;
  border: none;
  border-radius: var(--border-radius-md);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-mobile-fast) var(--easing-default),
              transform var(--duration-mobile-fast) var(--easing-default);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

/* 触摸反馈 */
.nav-btn:active {
  transform: scale(0.9);
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.nav-btn:disabled:active {
  transform: none;
}

/* 计数器 */
.nav-counter {
  font-size: var(--font-size-sm);
  color: white;
  font-weight: var(--font-weight-medium);
  min-width: 60px;
  text-align: center;
  user-select: none;
}

/* SVG图标 */
.nav-btn svg {
  pointer-events: none;
}

/* 信息按钮特殊样式 */
.nav-info.active {
  background-color: rgba(255, 255, 255, 0.2);
}