/**
 * 火彩商城 - 导航组件样式
 * Apple Store 风格导航栏
 */

/* ===== 通知栏 ===== */
.notice-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  z-index: var(--z-notice-bar);
  background: var(--color-primary-gradient);
  color: white;
  padding: 0 16px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transform: translateY(0);
  transition: transform var(--transition-base) var(--ease-out);
}

.notice-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.notice-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.notice-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

/* 文字滚动包装器 */
.notice-text-wrapper {
  display: inline-block;
  white-space: nowrap;
  animation: notice-scroll 18s linear infinite;
  will-change: transform;
}

/* 文字滚动：从右向左无缝循环 */
@keyframes notice-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.notice-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base) var(--ease-out);
  color: white;
}

.notice-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.notice-close svg {
  width: 14px;
  height: 14px;
}

/* ===== 状态栏 ===== */
.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  z-index: var(--z-status-bar);
  background: var(--color-warning-bg);
  border-bottom: 1px solid var(--color-warning);
  padding: 0 16px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transform: translateY(0);
  transition: transform var(--transition-base) var(--ease-out);
}

/* 当通知栏也存在时，状态栏应该显示在通知栏下方 */
body.has-notice .status-bar {
  top: 44px; /* 通知栏的高度 */
}

/* 当没有通知栏时，状态栏在顶部 */
body:not(.has-notice) .status-bar {
  top: 0;
}

.status-bar.info {
  background: var(--color-info-bg);
  border-bottom-color: var(--color-info);
}

.status-bar.success {
  background: var(--color-success-bg);
  border-bottom-color: var(--color-success);
}

.status-bar.warning {
  background: var(--color-warning-bg);
  border-bottom-color: var(--color-warning);
}

.status-bar.error {
  background: var(--color-error-bg);
  border-bottom-color: var(--color-error);
}

.status-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.status-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.status-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

/* 文字滚动包装器 */
.status-text-wrapper {
  display: inline-block;
  white-space: nowrap;
  animation: status-scroll 18s linear infinite;
  will-change: transform;
}

/* 文字滚动：从右向左无缝循环 */
@keyframes status-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.status-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-base) var(--ease-out);
}

.status-close:hover {
  background: rgba(0, 0, 0, 0.2);
}

.status-close svg {
  width: 12px;
  height: 12px;
}

/* ===== 通知栏和状态栏动画效果 ===== */

/* 垂直翻滚动画 (逐行切换，类似公告栏) */
.notice-text-wrapper-vscroll,
.status-text-wrapper-vscroll {
  display: block;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2em;
  position: relative;
}

.vscroll-container {
  /* 动画由 JavaScript 动态计算，根据行数决定总时长 */
}

/* 垂直滚动：逐行向上切换显示 */
.vscroll-container.vscroll-animate {
  animation: vscroll-line-by-line var(--vscroll-duration, 18s) steps(1) infinite;
}

@keyframes vscroll-line-by-line {
  0% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-1.2em);
  }
  35% {
    transform: translateY(-1.2em);
  }
  40% {
    transform: translateY(-2.4em);
  }
  55% {
    transform: translateY(-2.4em);
  }
  60% {
    transform: translateY(-3.6em);
  }
  75% {
    transform: translateY(-3.6em);
  }
  80% {
    transform: translateY(-4.8em);
  }
  95% {
    transform: translateY(-4.8em);
  }
  100% {
    transform: translateY(0);
  }
}

/* 淡入淡出动画 (类似翻滚效果) */
.notice-text-wrapper-fade,
.status-text-wrapper-fade {
  display: block;
  animation: text-fade var(--animation-speed, 18s) ease-in-out infinite;
}

@keyframes text-fade {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
  45% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0;
    transform: translateY(-10px);
  }
  55% {
    opacity: 0;
    transform: translateY(10px);
  }
  60% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 滑动动画 (从下向上) */
.notice-text-wrapper-slide,
.status-text-wrapper-slide {
  display: block;
  animation: text-slide var(--animation-speed, 18s) ease-in-out infinite;
}

@keyframes text-slide {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(0);
  }
  45% {
    opacity: 0;
    transform: translateY(20px);
  }
  55% {
    opacity: 0;
    transform: translateY(-20px);
  }
  60% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 打字机动画 */
.notice-text-wrapper-typewriter,
.status-text-wrapper-typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid currentColor;
  animation:
    typing var(--animation-speed, 18s) steps(40, end) infinite,
    blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  0% {
    width: 0;
  }
  10%, 90% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: currentColor;
  }
}

/* 脉冲动画 */
.notice-text-wrapper-pulse,
.status-text-wrapper-pulse {
  display: block;
  animation: text-pulse var(--animation-speed, 18s) ease-in-out infinite;
}

@keyframes text-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.98);
  }
}

/* 无动画 (静态显示) */
.notice-animation-none .notice-text-wrapper,
.status-animation-none .status-text-wrapper {
  animation: none !important;
}

/* 为滚动动画使用动态速度 */
.notice-animation-scroll .notice-text-wrapper,
.status-animation-scroll .status-text-wrapper {
  animation-duration: var(--animation-speed, 18s);
}

/* ===== 主导航栏 ===== */
.nav-blur {
  backdrop-filter: var(--backdrop-blur) var(--backdrop-saturate);
  -webkit-backdrop-filter: var(--backdrop-blur) var(--backdrop-saturate);
  background-color: var(--backdrop-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
}

/* 当有通知栏时调整导航栏位置 */
body.has-notice .site-nav {
  top: var(--notice-height);
}

body.has-notice.has-status .site-nav {
  top: calc(var(--notice-height) + var(--status-height));
}

/* 导航栏容器 */
.nav-container {
  width: 100%;
  max-width: var(--container-2xl);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 0 var(--space-6);
}

/* 站点品牌区块样式 */
#block-huocaimall-site-branding {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

#block-huocaimall-site-branding a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text-primary);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  transition: color var(--transition-base) var(--ease-out);
}

#block-huocaimall-site-branding a:hover {
  color: var(--color-primary);
}

#block-huocaimall-site-branding img {
  height: 32px;
  width: auto;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text-primary);
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.nav-logo:hover {
  color: var(--color-primary);
}

.nav-logo-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-logo-text {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  letter-spacing: -0.5px;
}

/* ===== 自定义导航栏结构 ===== */
.site-nav-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-6);
}

.nav-brand {
  flex-shrink: 0;
}

.nav-logo-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text-primary);
  font-weight: var(--font-semibold);
  transition: color var(--transition-base) var(--ease-out);
}

.nav-logo-link:hover {
  color: var(--color-primary);
}

.nav-logo-img {
  height: 32px;
  width: auto;
}

.nav-logo-icon {
  width: 32px;
  height: 32px;
}

.nav-logo-text {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  letter-spacing: -0.5px;
}

/* 导航菜单 */
.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-menu-desktop {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav-menu-desktop-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* 菜单项样式 - 水平导航 */
.nav-menu-desktop-inner .menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu-desktop-inner .menu-item {
  margin: 0;
  padding: 0;
}

.nav-menu-desktop-inner .menu-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: color var(--transition-base) var(--ease-out);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

.nav-menu-desktop-inner .menu-link:hover,
.nav-menu-desktop-inner .menu-link.is-active {
  color: var(--color-primary);
}

/* 右侧操作区 */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.nav-action-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-text-secondary);
  transition: color var(--transition-base) var(--ease-out);
  position: relative;
}

.nav-action-item:hover {
  color: var(--color-primary);
}

.nav-action-item svg {
  width: 18px;
  height: 18px;
}

/* 图标导航项 - 垂直布局 */
.icon-nav-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: color var(--transition-base) var(--ease-out);
  min-width: 70px;
  border-radius: var(--radius-md);
}

.icon-nav-wrapper:hover,
.icon-nav-wrapper:focus {
  color: var(--color-primary);
  background: rgba(0, 102, 204, 0.05);
}

.icon-nav-wrapper.active {
  color: var(--color-primary);
}

.icon-nav-icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-nav-icon svg {
  width: 24px;
  height: 24px;
}

.icon-nav-label {
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  font-weight: var(--font-normal);
  text-align: center;
}

/* 导航右侧操作区 */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-action-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  transition: all var(--transition-base) var(--ease-out);
  cursor: pointer;
  text-decoration: none;
}

.nav-action-item:hover {
  background: rgba(0, 102, 204, 0.08);
  color: var(--color-primary);
}

.nav-action-item svg {
  width: 22px;
  height: 22px;
}

/* 徽章计数 */
.nav-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--color-error);
  color: white;
  font-size: 10px;
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 次级横向滚动导航 */
.secondary-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--backdrop-blur) var(--backdrop-saturate);
  -webkit-backdrop-filter: var(--backdrop-blur) var(--backdrop-saturate);
  border-bottom: 1px solid var(--color-border);
  overflow-x: hidden;
  width: 100%;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  z-index: var(--z-secondary-nav);
}

body.has-notice .secondary-nav {
  top: calc(var(--nav-height) + var(--notice-height));
}

body.has-notice.has-status .secondary-nav {
  top: calc(var(--nav-height) + var(--notice-height) + var(--status-height));
}

/* 图标+文字垂直布局导航项 */
.nav-item-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--color-text-primary);
  transition: color var(--transition-base) var(--ease-out);
  position: relative;
  min-width: 56px;
  flex-shrink: 0;
}

.nav-item-icon:hover,
.nav-item-icon:focus {
  color: var(--color-primary);
}

.nav-item-icon.active {
  color: var(--color-primary);
}

.nav-item-icon.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px 2px 0 0;
}

.nav-item-icon-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.nav-item-icon-icon svg {
  width: 20px;
  height: 20px;
}

.nav-item-icon-label {
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  font-weight: var(--font-normal);
  text-align: center;
}

/* 横向滚动容器 */
.scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
}

/* 隐藏滚动条 */
.scroll-container::-webkit-scrollbar {
  display: none;
}

.scroll-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 滚动容器露出下一张 */
.scroll-container-peek {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin-right: -12px;
  padding-right: 12px;
}

.scroll-container-peek::-webkit-scrollbar {
  height: 4px;
}

.scroll-container-peek::-webkit-scrollbar-track {
  background: transparent;
}

.scroll-container-peek::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.scroll-container-peek:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
}

/* 面包屑导航 */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  list-style: none;
  margin: 0;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb-item:not(:last-child)::after {
  content: '/';
  color: var(--color-text-light);
}

.breadcrumb-link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-base) var(--ease-out);
}

.breadcrumb-link:hover {
  color: var(--color-primary);
}

.breadcrumb-item.active .breadcrumb-link {
  color: var(--color-text-primary);
  pointer-events: none;
}

/* 移动端菜单按钮 */
.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base) var(--ease-out);
}

.mobile-menu-btn:hover {
  background: rgba(0, 102, 204, 0.08);
}

.mobile-menu-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: all var(--transition-base) var(--ease-out);
}

.mobile-menu-btn span:nth-child(2) {
  margin: 4px 0;
}

/* 移动端抽屉菜单 */
.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  background: var(--color-bg-white);
  transform: translateX(-100%);
  transition: transform var(--transition-slow) var(--ease-in-out);
  overflow-y: auto;
}

.mobile-drawer.open {
  transform: translateX(0);
}

.mobile-drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-modal) - 1);
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base) var(--ease-out);
}

.mobile-drawer-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* ===== 响应式 ===== */
@media (min-width: 768px) {
  .nav-menu {
    gap: var(--space-2);
  }

  .icon-nav-wrapper {
    padding: var(--space-2) var(--space-4);
  }

  .mobile-menu-btn {
    display: none;
  }

  /* 桌面端二级导航栏优化 */
  .secondary-nav .scroll-container {
    justify-content: center;
    overflow-x: visible;
  }

  .nav-item-icon {
    flex-direction: row;
    gap: var(--space-2);
    min-width: auto;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-base) var(--ease-out),
                color var(--transition-base) var(--ease-out);
  }

  .nav-item-icon:hover,
  .nav-item-icon:focus {
    background-color: rgba(0, 122, 255, 0.08);
  }

  .nav-item-icon.active::after {
    display: none;
  }

  .nav-item-icon.active {
    background-color: rgba(0, 122, 255, 0.12);
  }

  .nav-item-icon-icon {
    margin-bottom: 0;
    margin-right: var(--space-1);
  }

  .nav-item-icon-label {
    font-size: var(--text-sm);
  }
}

@media (max-width: 767px) {
  .nav-menu {
    display: none;
  }

  .mobile-drawer .nav-menu {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    gap: 0;
  }

  .icon-nav-wrapper {
    width: 100%;
    min-width: auto;
    padding: var(--space-3);
    border-radius: var(--radius-md);
  }
}