/* Шапка CSRAY. Старые полосы neo (.navbar.row / .second_nav) больше не выводятся. */

.cs-header {
  position: sticky; top: 0; z-index: 100;
  margin: 0 calc(50% - 50vw) 24px;
  background: rgb(10 10 10 / 72%);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--c-line);
}
.cs-header__inner {
  position: relative;
  display: flex; align-items: center; gap: 28px;
  max-width: var(--container); height: var(--header-h);
  margin: 0 auto; padding: 0 24px;
}
.cs-logo { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--c-accent); white-space: nowrap; text-decoration: none; }
.cs-logo:hover { color: var(--c-accent-hover); }
.cs-logo__svg svg { height: 24px; width: auto; display: block; }

.cs-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.cs-nav .dropdown { position: relative; }
.cs-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-pill);
  color: var(--c-text-2); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.cs-nav__link:hover { color: var(--c-text); }
.cs-nav__link.is-active { color: var(--c-text); background: var(--c-surface-2); }
.cs-nav__chev { width: 10px; height: 6px; }

.cs-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px;
  padding: 6px; background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: 14px;
}
.cs-dropdown.dropdown_show { display: block; }
.cs-dropdown__item { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.cs-dropdown__item:hover, .cs-dropdown__item.is-active { background: var(--c-surface-3); }
.cs-dropdown__title { font-size: 14px; font-weight: 500; color: var(--c-text); }
.cs-dropdown__desc { font-size: 12px; color: var(--c-text-2); }

.cs-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cs-icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--c-text-2); cursor: pointer; flex: none;
}
.cs-icon-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.cs-icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
.cs-actions .pay_button, .cs-actions .auth_user_btn { height: 36px; padding: 0 16px; font-size: 13px; border: 0; }
.cs-actions .pay_button { background: var(--c-surface-2); color: var(--c-text); }
.cs-actions .pay_button:hover { background: var(--c-surface-3); }
.cs-actions .auth_user_btn svg { display: none; }

/* Поиск (логика — search.js: классы users_found / users_notfound на #open_search) */
.cs-search { position: relative; width: 260px; }
.cs-search .modal-searchcontent { position: static; padding: 0; background: none; }
.cs-search .input-search { position: relative; margin: 0; }
.cs-search input[name="_steam_id"] {
  width: 100%; height: 36px; padding: 0 12px 0 34px;
  background: var(--c-surface-2); border-radius: var(--r-pill); font-size: 13px;
}
.cs-search .input__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; }
.cs-search .input__icon svg { width: 13px; height: 13px; fill: var(--c-text-2); }
.cs-search .modal_users_container {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-height: 420px; overflow: auto;
  background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: 14px; padding: 6px;
}
.cs-search.users_found .modal_users_container,
.cs-search.users_notfound .modal_users_container { display: block; }
.cs-search .modal_users_header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 12px; color: var(--c-text-2); }
.cs-search .modal_users_header svg { width: 12px; height: 12px; fill: currentColor; }
.cs-search .modal_users_header .load svg { animation: cs-spin 1s linear infinite; }
.cs-search .modal_blocks_content > a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; text-decoration: none; }
.cs-search .modal_blocks_content > a:hover { background: var(--c-surface-3); }
.cs-search .modal_blocks_content img { width: 28px; height: 28px; border-radius: 50%; }
.cs-search .modal_user_content { min-width: 0; }
.cs-search .modal_blocks_content h3 { font-size: 13px; font-weight: 600; margin: 0; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-search .modal_blocks_content p { font-size: 11px; color: var(--c-text-2); margin: 0; }
.cs-search .modal_blocks_content > a > svg { display: none; }
.cs-search-toggle { display: none; }
@keyframes cs-spin { to { transform: rotate(360deg); } }

/* Уведомления и профиль — общие поповеры (app.js: класс modalActive) */
.cs-popover {
  display: none; position: absolute; top: calc(var(--header-h) - 4px); right: 24px; width: 300px;
  padding: 8px; background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: 16px;
  z-index: 110;
}
.cs-popover.modalActive { display: block; opacity: 1 !important; }
.user__notifications .notification { position: absolute; inset: 0; pointer-events: none; }
#main_notifications_badge { display: none; }
#main_notifications_badge:not(:empty) {
  display: block;
  position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; overflow: hidden; text-indent: -99px;
  border-radius: 50%; background: var(--c-accent);
}
.notifications__header { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 10px; font-size: 13px; font-weight: 600; }
.noty_clear_all { color: var(--c-accent); cursor: pointer; font-weight: 500; }
.notifications__main { max-height: 360px; overflow: auto; }

.cs-profile { cursor: pointer; flex: none; }
.cs-profile .user__avatar { width: 32px; height: 32px; }
.cs-profile .user__avatar img { width: 32px; height: 32px; border-radius: 50%; display: block; }
.cs-profile__head { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--c-line); margin-bottom: 6px; text-decoration: none; }
.cs-profile__name { font-weight: 600; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-profile__balance { font-size: 12px; color: var(--c-text-2); }
.cs-profile__links a, .cs-profile__logout { display: block; padding: 9px 10px; border-radius: 10px; font-size: 14px; color: var(--c-text); text-decoration: none; }
.cs-profile__links a:hover, .cs-profile__logout:hover { background: var(--c-surface-3); }
.cs-profile__logout { color: var(--c-err) !important; border-top: 1px solid var(--c-line); margin-top: 6px; border-radius: 0 0 10px 10px; text-transform: none; font-weight: 500; letter-spacing: 0; background: none; justify-content: flex-start; }

/* Бургер и мобильное меню (app.js: класс mmactive) */
.header_burger { display: none; width: 36px; height: 36px; margin: 0; position: relative; cursor: pointer; flex: none; }
.header_burger span, .header_burger::before, .header_burger::after {
  content: ""; position: absolute; left: 9px; right: auto; bottom: auto; width: 18px; height: 1.5px;
  border-radius: 1px; background-color: var(--c-text);
  transition: transform var(--ease), opacity var(--ease);
}
.header_burger::before { top: 12px; }
.header_burger span { top: 17px; }
.header_burger::after { top: 22px; }
.header_burger.mmactive::before { top: 12px; transform: translateY(5px) rotate(45deg); }
.header_burger.mmactive span { transform: none; opacity: 0; }
.header_burger.mmactive::after { top: 22px; bottom: auto; transform: translateY(-5px) rotate(-45deg); }
.cs-mobile-menu { display: none; }

@media (max-width: 960px) {
  .cs-nav { display: none; }
  .header_burger { display: block; }
  .cs-mobile-menu.mmactive {
    display: block; opacity: 1; visibility: visible; transform: none; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: var(--c-bg); padding: 16px; overflow: auto; z-index: 105;
  }
  .cs-mobile-menu .header_list { list-style: none; margin: 0; padding: 0; }
  .cs-mobile-menu .header_list a {
    display: block; padding: 14px 4px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
    border-bottom: 1px solid var(--c-line); color: var(--c-text); text-decoration: none; cursor: pointer;
    text-transform: none;
  }
  .cs-mobile-menu .header_list li { padding: 0; margin: 0; background: none; text-transform: none; }
}
@media (max-width: 767px) {
  .cs-header { margin-bottom: 16px; }
  .cs-header__inner { padding: 0 16px; gap: 12px; }
  .cs-actions { gap: 6px; }
  .cs-actions .pay_button { display: none; }
  .cs-search { display: none; }
  .cs-search-toggle { display: inline-flex; }
  .cs-header.cs-search-open .cs-search {
    display: block; position: absolute; top: var(--header-h); left: 0; right: 0; width: auto;
    padding: 10px 16px; background: var(--c-bg); border-bottom: 1px solid var(--c-line);
  }
  .cs-header.cs-search-open .cs-search .modal_users_container { left: 16px; right: 16px; width: auto; }
  .cs-popover { right: 16px; left: 16px; width: auto; }
  .cs-actions .auth_user_btn { padding: 0 12px; font-size: 12px; }
}