/**
 * 移动端底部固定导航（≤1024px）；PC 隐藏
 */

@media (max-width: 1024px) {
  #haru-bottom-toolbar.nhp-mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1020;
    display: flex !important;
    align-items: stretch;
    justify-content: space-around;
    width: 100%;
    max-width: 100%;
    max-height: none;
    min-height: 3.5rem;
    padding: 0.35rem 0 calc(0.35rem + env(safe-area-inset-bottom, 0px));
    margin: 0;
    background: #fff;
    border-top: 1px solid #e3e6e8;
    box-shadow: none;
    box-sizing: border-box;
  }

  body {
    padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .nhp-mobile-bottom-nav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.25rem 0.15rem;
    border: none;
    background: transparent;
    color: #5a6a73;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    /* 覆盖 style.css 全局 button / [type=button] 深色底与固定高度 */
    -webkit-appearance: none;
    appearance: none;
    height: auto;
    line-height: inherit;
    border-radius: 0;
    box-shadow: none;
  }

  /* button 元素需更高优先级，压过主题 button { background-color: #758064 } */
  #haru-bottom-toolbar.nhp-mobile-bottom-nav .nhp-mobile-bottom-nav__item,
  #haru-bottom-toolbar.nhp-mobile-bottom-nav button.nhp-mobile-bottom-nav__item,
  #haru-bottom-toolbar.nhp-mobile-bottom-nav .nhp-mobile-cat-trigger {
    background: transparent !important;
    background-color: transparent !important;
    color: #5a6a73 !important;
    display: flex !important;
    height: auto !important;
    line-height: inherit !important;
    padding: 0.25rem 0.15rem !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: 600;
    text-transform: none;
  }

  .nhp-mobile-bottom-nav__item:hover,
  .nhp-mobile-bottom-nav__item:focus-visible,
  #haru-bottom-toolbar.nhp-mobile-bottom-nav button.nhp-mobile-bottom-nav__item:hover,
  #haru-bottom-toolbar.nhp-mobile-bottom-nav button.nhp-mobile-bottom-nav__item:focus-visible {
    color: var(--nhp-green, #2c4c3b) !important;
    background: transparent !important;
    background-color: transparent !important;
    outline: none;
  }

  .nhp-mobile-bottom-nav__item.is-active {
    color: var(--nhp-green, #2c4c3b);
  }

  .nhp-mobile-bottom-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 1.35rem;
  }

  .nhp-mobile-bottom-nav__icon .phosphor::before {
    display: block;
  }

  .nhp-mobile-bottom-nav__item.is-active .nhp-mobile-bottom-nav__icon .phosphor::before {
    font-weight: 700;
  }

  .nhp-mobile-bottom-nav__label {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

@media (min-width: 1025px) {
  #haru-bottom-toolbar.nhp-mobile-bottom-nav {
    display: none !important;
  }
}