/* ===========================================================
   大型块自动设置为选项卡
   =========================================================== */

.pro-tabs {
  position: relative;
  overflow: visible;
  z-index: 1;
}

.pro-tabs.active-tab {
  z-index: 2;
}

/* 共享切换条：放在所有 .pro-tabs 之前 */
.pro-tabs-switcher {
  position: relative;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 100%;
  padding: 0 20px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: -61px;
}

.pro-tabs-switcher::-webkit-scrollbar {
  display: none;
}

@media (max-width: 549px) {
  .pro-tabs-switcher {
    /*background: rgba(0, 0, 0, 0.8);*/
  }
  .pro-tabs-switcher button {
    font-size: 10px !important;
    min-width: auto;
  }
}

/* 基础按钮样式 */
.pro-tabs-switcher button {
  background: transparent;
  color: #fff;
  border: 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
  padding: 0 4px;
  line-height: 60px;
  white-space: nowrap;
  position: relative; /* 关键：用于定位下划线 */
   max-width: auto;
}

/* 默认线条：存在但宽度为 0 */
.pro-tabs-switcher button::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;         /* 你原本 margin-top:-2px，我换成 bottom 更稳 */
  height: 2px;
  width: 0;
  background: #fff;
  border-radius: 2px;
  transition: width 0.3s ease; /* 动画在这里 */
}

/* 激活 OR hover 都是白色文字 */
.pro-tabs-switcher button.active,
.pro-tabs-switcher button:hover {
  color: #fff;
}

/* 激活时：下划线从 0 → 100% 展开 */
.pro-tabs-switcher button.active::after {
  width: 100%;
}


/* 禁止内容块自身的动画，避免切换抖动 */
.pro-tabs,
.pro-tabs * {
  transition: none !important;
  animation: none !important;
}



@media (max-width: 768px) {
  .pro-tabs-switcher {
    justify-content: flex-start;   /* 不再强制居中 */
    padding: 0 16px;               /* 给左右留出可视区 */
    scroll-padding-left: 16px;     /* 滚动到最左时也保留内边距 */
   
  }

}


.pro-tabs {
  cursor: grab;
  user-select: none; /* Prevents text selection while dragging */
}

.pro-tabs:active {
  cursor: grabbing;
}

.pro-tabs-switcher button.active {

  color: #fff;
}

.pro-tabs-container {
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}
.pro-tabs-container:active {
    cursor: grabbing;
}