/**
 * Servers.HUB — дополнительные стили поверх Tailwind (Play CDN).
 * Утилиты Tailwind подключаются через CDN в ServersHub\Core\Assets.
 *
 * Gilroy: локальные .ttf в resources/fonts/Gilroy/ (имена как в архиве, суффикс _0).
 * Unbounded: WOFF2-подмножества в resources/fonts/Unbounded/ (~80 KB vs ~1 MB TTF).
 */

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-Thin_0.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-UltraLight_0.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-Light_0.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-Regular_0.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-Medium_0.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-Semibold_0.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-Bold_0.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-Extrabold_0.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-Heavy_0.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-Black_0.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-ThinItalic_0.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-UltraLightItalic_0.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-LightItalic_0.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-RegularItalic_0.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-MediumItalic_0.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-SemiboldItalic_0.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-BoldItalic_0.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-ExtraboldItalic_0.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-HeavyItalic_0.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy/Gilroy-BlackItalic_0.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Unbounded;
  src: url('../fonts/Unbounded/Unbounded-cyrillic.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Unbounded;
  src: url('../fonts/Unbounded/Unbounded-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* Внутренняя шапка: тень как в макете; z-index чтобы тень не перекрывалась следующим main. */
.sh-site-header {
  position: relative;
  z-index: 30;
  box-shadow: 0 4px 9.5px rgba(5, 10, 65, 0.05);
}

/* Моб. меню (герой + inner): переключение иконки в details без group-open в CDN. */
.sh-mobile-nav[open] .sh-mobile-nav-burger {
  display: none;
}

.sh-mobile-nav[open] .sh-mobile-nav-close {
  display: block;
}

/* Сайдбар фильтров: chevron как в макете (primary, поворот при open/closed) */
details.sh-filter > summary .sh-filter-chevron {
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}

details.sh-filter[open] > summary .sh-filter-chevron {
  transform: rotate(180deg);
}

details.sh-filter[open] > summary {
  padding-bottom: 0 !important;
}

/* Числовые поля фильтра — без стрелок, как контролы в макете */
.sh-filter-num[type='number'] {
  -moz-appearance: textfield;
}
.sh-filter-num[type='number']::-webkit-outer-spin-button,
.sh-filter-num[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Двойной range «Количество игроков»: только ползунки, без ring (артефакты по краям) */
[data-sh-player-range] .sh-pr-range {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 16px;
  margin: 0;
  padding: 0;
  outline: none;
}

[data-sh-player-range] .sh-pr-range::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}

[data-sh-player-range] .sh-pr-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #6faf5b;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  margin-top: -5px;
}

[data-sh-player-range] .sh-pr-range::-moz-range-track {
  height: 6px;
  background: transparent;
}

[data-sh-player-range] .sh-pr-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #6faf5b;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  transform: translateY(0);
}

.sh-pr-zmin {
  z-index: 2;
}

.sh-pr-zmax {
  z-index: 3;
}

#sh-archive-advanced[open] .sh-adv-chevron {
  transform: rotate(180deg);
}

/* Пагинация списков карточек / серверов */
.sh-pagination .screen-reader-text,
.navigation.sh-pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sh-pagination,
.sh-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-pagination .page-numbers {
  display: inline-flex;
  min-width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: #fff;
  padding: 0 0.65rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  color: #0e0e0e;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  gap:4px;
}

.sh-pagination .page-numbers li{
  border: 1px solid rgb(14 14 14 / 0.1);
  border-radius: 0.75rem;
}

.sh-pagination .page-numbers li:hover:not(.current):not(.dots) {
  border-color: #6faf5b;
}
.sh-pagination .page-numbers:hover {
  color: #6faf5b;
} 
.sh-pagination .page-numbers.current {
  border-color: #6faf5b;
  background: #6faf5b;
  color: #0e0e0e;
  cursor: default;
}

.sh-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  min-width: auto;
  padding: 0 0.25rem;
  cursor: default;
}

.sh-pagination .page-numbers.prev,
.sh-pagination .page-numbers.next {
  min-width: auto;
  padding: 0 1rem;
}