/**
 * category-tabs.css — light-DOM mirror styles for <category-tabs>
 *
 * Same design as the shadow-DOM version in category-tabs.js, usable when the
 * markup is written directly in the page instead of the Web Component.
 * All design values come from css/tokens.css via var(--y888-*).
 *
 * Markup contract:
 *   <nav class="category-tabs" role="tablist">
 *     <button class="category-tabs__nav-arrow category-tabs__nav-arrow--prev">‹</button>
 *     <div class="category-tabs__scroller">
 *       <button class="category-tab category-tab--active" data-tab-id="hot" role="tab">
 *         <span class="category-tab__item">
 *           <span class="category-tab__icon"><img ...></span>
 *           <p class="category-tab__label">Hot</p>
 *         </span>
 *       </button>
 *       ...
 *       <span class="category-tabs__line"></span>
 *     </div>
 *     <button class="category-tabs__nav-arrow category-tabs__nav-arrow--next">›</button>
 *   </nav>
 */

.category-tabs {
  display: block;
  position: relative;
  width: 100%;
  background: var(--y888-bg, #000000);
}

.category-tabs__scroller {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
}

.category-tabs__scroller::-webkit-scrollbar {
  display: none;
}

.category-tab {
  flex: none;
  padding: 0 0.08rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
  color: var(--y888-text-dim, #9a9a9a);
  background: none;
  border: 0;
  font-family: inherit;
}

.category-tab__item {
  padding-top: 0.06rem;
  width: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.category-tab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.7rem;
  height: 0.54rem;
  font-size: 0.7rem;
}

.category-tab__icon img {
  width: 0.7rem;
  height: 0.54rem;
  pointer-events: none;
}

.category-tab__label {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 0.06rem;
  margin-bottom: 0;
  height: 2em;
  width: 100%;
  font-size: var(--y888-font-size-md, 0.24rem);
  line-height: 1;
  text-align: center;
  word-break: break-word;
}

.category-tab--active {
  /* Reference: NO color change on active tab — same as inactive */
  color: var(--y888-text-dim, #9a9a9a);
}

.category-tabs__line {
  /* Reference: NO underline indicator — hidden */
  display: none;
  position: absolute;
  bottom: 0.15rem;
  left: 0;
  z-index: 1;
  width: 0.5556rem;
  height: 0.04rem;
  background: var(--y888-primary, #eb05f2);
  border-radius: 0.04rem;
  transition: left var(--y888-transition-fast, 0.15s ease);
  pointer-events: none;
}

.category-tabs__nav-arrow {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.36rem;
  height: 0.36rem;
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  font-size: 0.14rem;
  z-index: 2;
  padding: 0;
}

.category-tabs__nav-arrow--prev {
  left: 0.05rem;
}

.category-tabs__nav-arrow--next {
  right: -0.02rem;
}

.category-tabs__nav-arrow[hidden] {
  display: none;
}