/* панель табов */

.atomy-tabs {
  position: relative;
  gap: .5rem !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scrollbar-width: none;
}

.atomy-tabs::-webkit-scrollbar {
  display: none;
}

/* кнопки */

.atomy-tabs .nav-link {
  border-radius: 999px;
  padding: .35rem .6rem;
  border: 1px solid var(--brand-atomt-btncolor);
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 1px 3px rgba(0,0,0,.06);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
  font-size: 15px;
  color: var(--brand-atomt-btncolor);
  border-color: var(--brand-atomt-btncolor);
  background-color: var(--bs-light);
}

/* ≤480px */

@media (max-width:480px) {
  .atomy-tabs .nav-link {
    padding: .3rem .55rem;
    font-size: 14px;
  }
}

/* ≤380px */

@media (max-width:380px) {
  .atomy-tabs .nav-link {
    padding: .28rem .5rem;
    font-size: 13px;
  }
}

/* ≤340px — сверхкомпактно */

@media (max-width:340px) {
  .atomy-tabs .nav-link {
    padding: .26rem .45rem;
    font-size: 12px;
  }
}

.atomy-tabs .nav-link:hover {
  color: var(--bs-light);
  border-color: var(--brand-atomt-btncolor);
  background-color: var(--brand-atomy-color);
}

.atomy-tabs .nav-link.active {
  color: var(--bs-light);
  border-color: var(--brand-atomt-btncolor);
  background-color: var(--brand-atomt-btncolor);
}

/* СКОЛЬЗЯЩИЙ ИНДИКАТОР (рейл) — внутри UL, не обрезается */

.atomy-tabs .atomy-rail {
  position: absolute;
  left: 0;
  bottom: 3px;
  height: 3px;
  border-radius: 3px;
  background: #04A6E1;
  transform: translateX(0);
  width: 0;
  transition: transform .20s ease, width .20s ease, opacity .2s;
  pointer-events: none;
  opacity: .9;
}

/* чтобы контент не перекрывал панель визуально */

.tab-content {
  position: relative;
  z-index: 1;
}