@use '@/styles/variables.scss' as *;

// 固定悬浮于页面顶部；默认透明（沉浸式，透出页面渐变背景），滚动后切换为主题色底
.navBar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  transition: background $transition-base, box-shadow $transition-base;
}

// 滚动态：主题色底 + 浮层阴影，保证白字标题在内容之上仍可读
.navBarSolid {
  background: $color-primary;
  box-shadow: $shadow-float;
}

.navContent {
  display: flex;
  align-items: center;
  justify-content: center;
  // 右侧留出胶囊按钮区域（胶囊约 87px 宽 + 边距）；返回按钮与胶囊对称占位，标题仍居中
  padding: 0 200rpx;
  box-sizing: border-box;
  position: relative;
}

.navTitle {
  font-size: 32rpx;
  font-weight: $font-weight-semibold;
  color: $color-text-white;
  @include text-ellipsis;
}

// 返回按钮：左箭头圆底，与右侧胶囊按钮视觉对称
.backBtn {
  position: absolute;
  left: 32rpx;
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  @include flex-center;
}

.backArrow {
  font-size: 40rpx;
  font-weight: $font-weight-bold;
  color: $color-text-white;
  line-height: 1;
  // 微调视觉居中（‹ 字符偏上）
  margin-top: -4rpx;
}