/* --- 1. ШРИФТЫ И ПЕРЕМЕННЫЕ --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --main-white-color: #000000a8;
  --bg-muted: var(--main-white-color);
  --main-white-gray-color: var(--main-white-color);
  --hazard-color: #ffb400;
  --info-bg: #5a0000;
  --info-text: #fff;
  --info-color: #8f0000;
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-white: rgba(255, 255, 255, 0.08);
  --radius-lg: 16px;
  --radius-md: 12px;
}

/* --- 2. БАЗОВЫЕ СТИЛИ --- */
html {
  scrollbar-gutter: stable;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: #080808;
  margin: 0;
}

.language-switcher { display: none !important; }

/* --- 3. СТРУКТУРА СЕТКИ (LAYOUT) --- */
.grid-wrapper {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}

.grid-wrapper:has(.profile-sidebar:not(:empty)) {
  grid-template-columns: 3fr 1fr !important;
}

.product-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 15px !important;
}

@media (min-width: 1400px) {
  .product-cards { grid-template-columns: repeat(5, 1fr) !important; }
}

/* --- 4. ШАПКА И НАВИГАЦИЯ --- */
.navbar {
  background-color: transparent;
  margin-top: 10px;
  height: 50px;
}

.nav-item {
  border: 1px solid transparent !important;
  transition: all 0.3s ease !important;
  border-radius: var(--radius-md) !important;
}

.nav-item:hover {
  background: var(--glass-white) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff !important;
}

.auth-btn, .balance-btn, .profile-btn {
  border: 1px solid transparent !important;
  transition: all 0.3s ease !important;
  border-radius: var(--radius-md) !important;
}

.auth-btn:hover, .balance-btn:hover, .profile-btn:hover {
  background: var(--glass-white) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff !important;
}

/* --- 5. КАТЕГОРИИ И КНОПКИ --- */
.app-button {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--glass-border) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease !important;
}

.app-button:hover, .app-button--active {
  background: var(--glass-white) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px);
}

.app-button--primary:hover, .app-button--primary.app-button--active {
  color: inherit;
}

.search-input {
  border: 1px solid var(--glass-border) !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border-radius: 10px !important;
  padding: 12px 25px !important;
  backdrop-filter: blur(8px);
  color: #fff !important;
  transition: 0.3s;
}

.search-input:focus {
  background: var(--glass-white) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px);
}

/* --- 6. КАРТОЧКИ ТОВАРОВ --- */
@keyframes cardAppear {
  from { 
    opacity: 0; 
    transform: translateY(20px) scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

.product-card {
    background-color: inherit
}

.product-cards > div {
  animation: cardAppear 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  will-change: transform, opacity;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md);
  background: #00000040 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

.product-cards > div:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.product-card-name {
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0px 0 !important;
}

.product-card-footer {
  height: inherit !important;
  max-height: 25% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  border-top: 1px solid var(--glass-border);
}

.product-card-discount-price {
  margin-left: 6px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255, 180, 0, 0.2);
}

/* --- 7. МОДАЛЬНЫЕ ОКНА --- */
.modal-overlay {
  background-color: rgb(0 0 0 / 60%) !important;
  backdrop-filter: blur(10px) !important;
}

.modal {
  border: 1px solid #4c4c4c !important;
  border-radius: var(--radius-lg) !important;
  background: #0f0f0f !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8) !important;
}

.product-modal-title { font-size: 18px; }
.product-modal-description { font-size: 12px !important; line-height: 1.6 !important; }
.modal-primary-button-text { color: #fff; }

.modal-primary-button {
  border: 1px solid var(--glass-border) !important;
  transition: all 0.3s ease !important;
  background-color: inherit;
  padding-right: 2rem;
}

.modal-primary-button:hover {
  background: var(--glass-white) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff !important;
}

/* --- 8. САЙДБАР ПРОФИЛЯ --- */
.profile-sidebar__header { display: none; }
.profile-sidebar__footer { border: inherit; }
.recharge-panel { background: inherit; }

.profile-sidebar__link {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(10px);
  border-radius: 8px !important;
  margin-bottom: 5px !important;
  transition: all 0.3s ease !important;
  color: #888 !important;
}

.profile-sidebar__link:hover, 
.profile-sidebar__link--active,
.profile-sidebar__link.active {
  background: var(--glass-white) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

/* --- 9. ПРОЧЕЕ --- */
.banner-elem {
  background-color: #00000059 !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--glass-border);
}

.banner { margin-top: auto !important; }

.footer {
  font-size: 10px !important;
  border-top: 1px solid var(--glass-border);
  padding: 30px 0 !important;
  opacity: 0.6;
}

/* --- 10. МОБИЛЬНАЯ АДАПТИВНОСТЬ --- */
@media (max-width: 500px) {
  .product-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .product-card-footer { padding-left: 15px; padding-right: 15px; }
  .product-card-name { font-size: 8px !important; line-height: 1.2; }
  .product-card-price { font-size: 10px; }
  .recharge-panel-bonuses { grid-row-gap: 5px; }
}

@media (min-width: 650px) {
  .recharge-panel-bonuses { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 992px) {
  .navbar-links { overflow: initial; height: initial; z-index: 999;}
  .grid-wrapper:has(.profile-sidebar:not(:empty)) { grid-template-columns: inherit !important; }
}