/**
 * File: css/changelog-filter.css
 *
 * Changelog platform filter (All / iOS / Android).
 * Matches the site's purple theme and remains usable on mobile.
 */

.changelog-filter{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:50px;
  margin-top:22px;
}

.changelog-filter__btn{
  border:1px solid rgba(20,20,20,.12);
  background:#fff;
  padding:10px 18px;
  border-radius:999px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  transition:transform .06s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}

.changelog-filter__btn:active{
  transform:translateY(1px);
}

.changelog-filter__btn.is-active{
  background:var(--theme-color,#7b5cff);
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}

@media (max-width: 575.98px){
  .changelog-filter{
    gap:10px;
    margin-top:18px;
    flex-wrap:wrap;
  }
  .changelog-filter__btn{
    padding:9px 14px;
    font-size:0.95rem;
  }
}

/* --- Outer pill wrapper for the filter --- */
.changelog-filter{
  width: fit-content;     /* пилюля по контенту */
  max-width: 100%;
  margin: 0 auto;         /* по центру */
  gap: 50px;              /* расстояние между кнопками */
  padding: 6px 10px;      /* можно уменьшать/увеличивать */
  border:1px solid rgba(20,20,20,.18);
  border-radius:999px;
  background:transparent;
  margin-top: 25px;
}

.changelog-filter__btn{
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  color:inherit;
}

.changelog-filter__btn.is-active{
  background:var(--theme-color,#7b5cff);
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}

@media (max-width: 575.98px){
  .changelog-filter{
    gap:20;
    padding:6px;
    flex-wrap:nowrap;
  }
}