/* Скины CSRAY. Разметку и JS модуля (WeaponPaints / CsraySkinBridge) не трогаем — только вид. */

/* Разделы «Скины / Агенты / Музыка» — сегмент-переключатель */
.servers_wrap {
  display: inline-flex !important; gap: 2px; padding: 3px; margin: 8px 0 16px;
  background: var(--c-surface-2); border-radius: 12px; grid-template-columns: none;
}
.servers_wrap .servers_button {
  display: inline-flex; align-items: center; gap: 8px; width: auto; height: auto; min-height: 0;
  padding: 8px 16px; border: 0 !important; border-radius: 9px; background: none; box-shadow: none; cursor: pointer;
}
.servers_wrap .servers_button svg { width: 16px; height: 16px; fill: var(--c-text-2); }
.servers_wrap .servers_button b { font-size: 14px; font-weight: 500; color: var(--c-text-2); }
.servers_wrap .servers_button span { display: none; }
.servers_wrap .servers_button:hover b { color: var(--c-text); }
.servers_wrap .servers_button.server_buttons_active { background: var(--c-surface-3) !important; }
.servers_wrap .servers_button.server_buttons_active b { color: var(--c-text); }
.servers_wrap .servers_button.server_buttons_active svg { fill: var(--c-accent); }

/* Панель: сторона T/CT, поиск, сервер */
.choosing_all { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0; margin-bottom: 16px; background: none; border: 0; }
.block_sides { display: inline-flex; gap: 2px; padding: 2px; background: var(--c-surface-2); border-radius: 10px; }
.choosing_sides { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 8px; background: none; }
.choosing_sides.active, .choosing_sides.choosing_sides_active { background: var(--c-surface-3); }
.search-skin-input { flex: 1; min-width: 200px; position: relative; display: flex; align-items: center; background: var(--c-surface-2); border-radius: var(--r-pill); padding: 0 14px; border: 0; }
.search-skin-input svg { width: 13px; height: 13px; fill: var(--c-text-2); flex: none; }
.search-skin-input input { background: none !important; border: 0 !important; height: 38px; width: 100%; padding: 0 0 0 10px; }
.choosing_servers { padding: 8px 14px; border: 0; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-text); font-weight: 500; }

/* Колонка категорий оружия */
.blocks-sort > #sort-skins { width: 48px; height: 48px; border: 0 !important; border-radius: 12px; background: var(--c-surface); }
.blocks-sort > #sort-skins:hover { background: var(--c-surface-2); }
.blocks-sort > #sort-skins.active { background: var(--c-surface-3) !important; }
.blocks-sort > #sort-skins > b { background: var(--c-surface-2); color: var(--c-text); border-radius: 8px; padding: 4px 8px; }

/* Карточки оружия */
.blocks-skins { gap: 12px; }
.block-skin-fon {
  background: var(--c-surface); border: 0; border-radius: 16px; box-shadow: none;
  transition: background var(--ease);
}
.block-skin-fon:hover { background: var(--c-surface-2); }
.block-skin-fon.choice_active { border-bottom: 0; box-shadow: inset 0 0 0 1px var(--c-accent); color: var(--c-text); }
.block-skin-info b { font-size: 13px; font-weight: 600; color: var(--c-text); }
.block-skin-info span { font-size: 11px; color: var(--c-text-2); }
/* Кнопка «Выбрать скин»: модуль красит текст серым, а при наведении — оранжевым по оранжевому */
.block-skin-fon[id] .button-skin, .block-skin-fon[id]:hover .button-skin, .button-skin {
  background: var(--c-accent); color: #fff !important; border-radius: 0 0 16px 16px;
  font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.block-skin-fon[id] .button-skin:hover, .button-skin:hover { background: var(--c-accent-hover); color: #fff !important; }
.block-skin-fon[id]:hover { border-bottom: 0; color: inherit; }

/* Окно выбора скина */
.skin-modal .fon-modal { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 22px; box-shadow: none; }
.skin-modal .text_modal { font-weight: 700; letter-spacing: -0.02em; }
.skin-modal .my-info-skin a { color: var(--c-accent); }
.skin-modal-overlay { background: rgb(0 0 0 / 72%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sk-modal-input, .sk-modal-setting-form input { background: var(--c-surface-2); border: 0; border-radius: var(--r-field); color: var(--c-text); }
.sk-modal-setting-button, .sk-modal-button { background: var(--c-accent); color: #fff; border: 0; border-radius: var(--r-pill); font-weight: 600; }
.pagination-btn { background: var(--c-surface-2); color: var(--c-text-2); border: 0; border-radius: var(--r-pill); }
.pagination-btn.active { background: var(--c-accent); color: #fff; }

@media (max-width: 767px) {
  .servers_wrap { display: flex !important; width: 100%; }
  .servers_wrap .servers_button { flex: 1; justify-content: center; padding: 8px; }
  .servers_wrap .servers_button b { font-size: 13px; }
  .blocks-skins { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .block-skin-fon { height: 140px; }
  .block-skin-img img { max-width: 80%; }
}