@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --loneliness-bg: #09090b;
  --loneliness-bg-card: #18181b;
  --loneliness-border: #27272a;
  --loneliness-text: #a1a1aa;
  --loneliness-text-muted: #71717a;
  --loneliness-text-bright: #d4d4d8;
  --loneliness-accent: #72b6ff;
  --loneliness-accent-hover: #72b6ff;
  --loneliness-font: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --background: transparent !important;
}


/* Базовый фон и шрифт */
body,
.app-wrapper {
  font-family: var(--loneliness-font) !important;
  background-image: none !important;
  color: var(--loneliness-text) !important;
}

/* Шапка (navbar) */
header.wrapper .navbar,
.wrapper .navbar {
  background: rgb(24, 24, 27) !important;
}

.navbar-brand,
.navbar-brand a {
  color: var(--loneliness-text-bright) !important;
  font-weight: 600;
}

.nav-link {
  color: var(--loneliness-text) !important;
  background-color: transparent !important;
}

.nav-link:hover {
  color: var(--loneliness-accent) !important;
  background-color: transparent !important;
}

.auth-btn,
.balance-btn,
.profile-btn,
.lang-label.auth-btn {
  color: var(--loneliness-text) !important;
  border-color: var(--loneliness-border) !important;
  background: transparent !important;
}

.auth-btn:hover,
.profile-btn:hover {
  color: var(--loneliness-accent) !important;
  border-color: var(--loneliness-accent) !important;
}

.balance-btn {
  color: var(--loneliness-accent) !important;
}

/* Основная область */
main.wrapper {
  background: transparent !important;
}

/* Баннер — приглушить, под тёмную тему */
.banner img {
  opacity: 0.9;
}

/* Сетка и колонки */
.grid-wrapper {
  background: transparent !important;
  grid-template-columns: 4fr 0fr;
  gap: 0px;
}

.grid-wrapper:has(.profile-info),
.grid-wrapper:has(.profile-sidebar) {
  grid-template-columns: 4fr 1fr;
}

.wrapper .left-column h2.mb-4.text-xl.font-semibold {
  display: none !important;
}
body :has(.profile-sidebar) ~ .footer,
body :has(.profile-sidebar) ~ * .footer,
body :has(.profile-info) ~ .footer,
body :has(.profile-sidebar) .footer {
  display: none !important;
}

.table {
	width: 100%;
  border: 0px;
	border-radius: 20px;
	overflow: hidden;
	border-collapse: collapse;
}

.profile-info {
	background-color: var(--loneliness-bg-card);
}
.profile-sidebar__link:hover {
	background-color: #fff0;
	color: var(--loneliness-accent);
}

.profile-sidebar__header {
	display: none;
}

.profile-sidebar__footer {
	text-align: center;
	color: var(--loneliness-text);
	border: #fff0;
	border-radius: 0rem;
	margin-top: 0px;
}

.profile-sidebar__footer > .profile-sidebar__link:hover {
	border-radius: 0 0 .5rem .5rem;
	background-color: #fff0;
	color: var(--error-color);
}

.left-column,
.right-column {
  background: transparent !important;
}

/* Кнопки категорий (Все, Оружие, ...) */
.products-types-buttons .app-button {
  background: var(--loneliness-bg-card) !important;
  border: 1px solid var(--loneliness-border) !important;
  color: var(--loneliness-text) !important;
}

.products-types-buttons .app-button:hover {
  border-color: var(--loneliness-accent) !important;
  color: var(--loneliness-accent) !important;
}

.products-types-buttons .app-button--active,
.app-button--active {
  background: var(--loneliness-accent) !important;
  border-color: var(--loneliness-accent) !important;
  color: var(--loneliness-bg) !important;
}

.products-types-buttons .app-button--active:hover,
.app-button--active:hover {
  border-color: var(--loneliness-accent) !important;
  color: var(--loneliness-bg) !important;
  background: var(--loneliness-accent) !important;
  cursor: default;
  opacity: 1;
}

/* Дополнительно для всех кнопок, которые могут быть активными */
.app-button--active {
  pointer-events: none; /* Отключает все события мыши на активной кнопке */
}

.app-button--success:hover, .app-button--success.app-button--active {
	background-color: var(--loneliness-accent);
	color: var(--main-white-color);
}

.app-button, .products-types-buttons .app-button {
	border: 1px solid var(--loneliness-border) !important;
}

/* Если вдруг на профиле появится .app-button — сбрасываем твои изменения */
body:has(.profile-sidebar) .app-button,
body:has(.profile-sidebar) .app-button--success {
  border: 1px solid var(--loneliness-border) !important;
  color: var(--loneliness-text);
}

body:has(.profile-sidebar) .app-button--success:hover,
body:has(.profile-sidebar) .app-button--success.app-button--active {
  background-color: var(--loneliness-accent);
  color: var(--main-white-color);
}

/* Поле поиска */
.search-input {
  background: var(--loneliness-bg-card) !important;
  border: 1px solid var(--loneliness-border) !important;
  color: var(--loneliness-text-bright) !important;
}

.search-input::placeholder {
  color: var(--loneliness-text-muted) !important;
}

.search-input:focus {
  border-color: var(--loneliness-accent) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.2);
}

/* Карточки товаров */
.product-card {
  aspect-ratio: 2 / 2;
  position: relative !important;
  background: var(--loneliness-bg-card) !important;
  border: 1px solid var(--loneliness-border) !important;
  border-radius: 8px;
  backdrop-filter: blur(8px);
}

.product-card:hover {
  border-color: #3f3f46 !important;
  box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.15);
}

.product-card-image-container {
  position: relative;
  background-color: var(--loneliness-bg) !important;
  border-bottom: 1px solid var(--loneliness-border);
}

/* Стоимость — левый верхний угол карточки (картинки) */
.product-card-footer > div {
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  display: flex;
  flex-direction: column-reverse;
}

/* Нижний блок: только центрирование названия, без изменения высоты и шрифтов */
.product-card .product-card-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  font-family: var(--loneliness-font) !important;
}

/* Название товара — по центру, цвет. Шрифт не трогаем. */
.product-card .product-card-footer .product-card-name,
.product-card-name {
  text-align: center !important;
  color: var(--loneliness-text-bright) !important;
  font-weight: 500;
  font-family: var(--loneliness-font) !important;
}

.product-card-price {
  color: var(--loneliness-accent) !important;
}

.product-card-old-price {
  color: var(--loneliness-text-muted) !important;
  text-decoration: line-through;
}

.product-card-discount-price {
  color: var(--loneliness-accent) !important;
}

.product-card-badge-percentage {
  background: var(--loneliness-accent) !important;
  color: var(--loneliness-bg) !important;
}

/* Блок мониторинга сервера (правая колонка) */
.monitoring {
  background: var(--loneliness-bg-card) !important;
  border: 1px solid var(--loneliness-border) !important;
  border-radius: 8px;
}

.monitoring-header,
.monitoring-title {
  color: var(--loneliness-text-bright) !important;
}

.monitoring-title-span {
  color: var(--loneliness-text-muted) !important;
}

.monitoring-progress-bar {
  background: var(--loneliness-bg) !important;
  border: 1px solid var(--loneliness-border);
  border-radius: 4px;
}

.monitoring-progress-fill {
  background: var(--loneliness-accent) !important;
}

.monitoring-status-text,
.monitoring-status-overlay {
  color: var(--loneliness-text-bright) !important;
}

/* Баннеры в правой колонке (инфо-блоки) */
.banner-elem {
  background: var(--loneliness-bg-card) !important;
  border: 1px solid var(--loneliness-border) !important;
  border-radius: 8px;
  color: var(--loneliness-text) !important;
}

.bunner-title,
.banner-elem .banner-item-link {
  color: var(--loneliness-text-bright) !important;
}

.banner-content,
.banner-elem p {
  color: var(--loneliness-text) !important;
}



.footer-link a,
.footer a {
  color: var(--loneliness-text) !important;
}

.footer-link a:hover,
.footer a:hover {
  color: var(--loneliness-accent) !important;
}

/* NProgress (полоска загрузки) — оранжевый акцент */
#nprogress .bar {
  background: var(--loneliness-accent) !important;
}

#nprogress .peg {
  box-shadow: 0 0 10px var(--loneliness-accent), 0 0 5px var(--loneliness-accent) !important;
}

#nprogress .spinner-icon {
  border-top-color: var(--loneliness-accent) !important;
  border-left-color: var(--loneliness-accent) !important;
}

/* Кнопки в модалках и формах (если есть) */
button[type="submit"],
.app-button--primary {
  background: var(--loneliness-accent) !important;
  border-color: var(--loneliness-accent) !important;
  color: var(--loneliness-bg) !important;
}

/* Мобильное меню */
.navbar-mobile .navbar-brand {
  color: var(--loneliness-text-bright) !important;
}

.navbar-toggler {
  color: var(--loneliness-text) !important;
  border-color: var(--loneliness-border) !important;
}

.navbar-toggler:hover {
  color: var(--loneliness-accent) !important;
  border-color: var(--loneliness-accent) !important;
}

/* Убираем фон при наведении именно с nav-item */
.navbar .nav-item:hover,
.navbar-nav .nav-item:hover,
.nav-item:hover {
    background-color: transparent !important;
}

/* На всякий случай убираем и с самого nav-link */
.nav-link:hover,
.nav-link:focus {
    background-color: transparent !important;
}

/* Если есть .active или другие состояния */
.nav-item.active,
.nav-item:active,
.nav-link.active,
.nav-link:active {
    background-color: transparent !important;
}

/* 1. Закругление 45px со всех сторон у модального окна */
.modal {
  max-width: 90vw;
  position: relative;
  box-shadow: 0 4px 20px #0003;
  transition: inherit;
  border-radius: 45px;          /* ← все углы 45px */
  background: var(--bg-muted);
  margin: 30px 0;
  overflow: hidden;             /* чтобы контент не вылезал за закругления */
}

/* 2. Полностью скрываем кнопку "Закрыть" */
.modal-close-button {
  display: none !important;
}

/* 3. Оформляем modal-primary-button в стиле amount-control */
.modal-footer-buttons {
  display: flex;
  justify-content: center;      /* центрируем кнопку */
  margin: 0;
}

/* Делаем кнопку похожей на amount-control-counter */
.modal-primary-button {
  /* Базовые стили как у amount-control */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 278px;             /* можно подстроить под ваш дизайн */
  height: 40px;                 /* примерно как у счётчика */
  
  /* Оформление в стиле amount-control */
  background: var(--main-bg-color);        /* тёмный фон как у карточек */
  border: 1px;
  border-radius: 8px;
  color: var(--loneliness-accent);
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover-эффект как у ваших кнопок категорий */
.modal-primary-button:hover {
  border-color: var(--loneliness-accent);
  background: rgba(114, 182, 255, 0.08);     /* лёгкий акцентный фон */
}

/* Текст внутри кнопки */
.modal-primary-button-text {
  color: var(--loneliness-accent);
  margin: 0;
}

/* Если хотите, чтобы кнопка выглядела ещё ближе к amount-control-counter */
.modal-primary-button {
  padding: 0 1.5rem;
}

.amount-control {
  display: flex;
  flex-direction: initial;
  justify-content: space-between;
  gap: .5rem;
}
.amount-control-counter {
  overflow: visible;
}

.amount-control-total {
  gap:10px;
  min-width: 110px;
}

.product-modal-inputs {
	display: flex;
	flex-direction: inherit;
	gap: .5rem;
}

.amount-control-counter-button:hover {
	background-color: transparent;
}

.product-cards {
  grid-template-columns: repeat(6,1fr);
}

.recharge-panel-input{
  background-color: #121212;;
}

.recharge-panel-input.changed {
	background-color: #222;
}

.text-input:focus {
  outline: none;
  box-shadow: 0 0 0 1.5px var(--loneliness-text) !important;
}