/* ======================================================================
   DonateTeam — STEAM.CSS
   Стили для страницы Steam сервиса
   ====================================================================== */

/* ========== 0) TOKENS / АЛИАСЫ ======================================= */
:root{
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Jura", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-accent:  "Jura", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --steam-bg: var(--bg, #0f0f0f);
  --steam-panel: var(--panel, #151515);
  --steam-panel-2: var(--panel-2, #111111);
  --steam-text: var(--text, #fff);
  --steam-muted: var(--muted, #bdbdbd);

  --steam-brand: var(--brand, #a75eff);
  --steam-brand-2: var(--brand-2, #8a3df6);
  --steam-brand-soft: var(--brand-soft, rgba(167,94,255,.35));

  --steam-border: var(--border-soft, 1px solid rgba(255,255,255,.06));
  --steam-shadow: var(--card-shadow, 0 8px 24px rgba(0,0,0,.35));

  --steam-radius: var(--radius, 16px);
}

/* ========== 1) БАЗА =================================================== */
/* ВАЖНО: Админ-режим НЕ должен влиять на стили страницы Steam.
   Админ-режим используется только для скрытия/показа карточек на главной странице.
   Все стили страницы Steam должны быть одинаковыми независимо от админ-режима. */
body{ font-family: var(--font-body); }
.steam-title, .faq-title, .desc-title, .footer-title{ font-family: var(--font-heading); }
[hidden]{ display:none !important; }

/* ========== 2) НАВИГАЦИЯ ============================================== */
.navigation{ margin-block-start: var(--space-4); margin-block-end: var(--space-4); padding-bottom: 0; }
.navigation .page-1400{
  display: flex; align-items: center; justify-content: flex-start; height: 35px;
}

.nav-crumbs{ display: flex; align-items: center; height: 100%; }

.navigation-link, .navigation-current, .navigation-sep{
  display: flex; align-items: center; height: 100%;
  font-size: 20px; line-height: 1;
}
.navigation-link{
  font-weight: 700; color: #fff; text-decoration: none !important;
  transition: color .25s ease, filter .25s ease;
}
.navigation-link:hover{
  color: var(--steam-brand);
  text-shadow: none;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--steam-brand) 45%, transparent));
}
.navigation-current{ color:#fff; font-weight:700; }
.navigation-sep{ margin-inline: var(--space-2); color: var(--steam-muted); }

/* ========== 3) ШАПКА STEAM (лого + тайтл в одной строке) ============= */
.steam-header{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  padding: var(--space-6) 0;
  text-align: center;
}

.steam-logo{
  width: 120px;
  height: 120px;
  border-radius: var(--steam-radius);
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.steam-title{
  font-size: var(--game-h2, 34px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--steam-text);
  margin: 0;
  font-family: var(--font-heading);
  white-space: nowrap;
}

/* ========== 4) ПЕРЕКЛЮЧАТЕЛИ ВАЛЮТ ===================================== */
.steam-currency-selector {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: var(--space-3);
  background: var(--steam-panel);
  border: var(--steam-border);
  border-radius: var(--steam-radius);
  box-shadow: var(--steam-shadow);
}

.steam-currency-btn {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  background: var(--dt-select-idle-bg);
  border: none; /* Убираем border полностью */
  border-radius: calc(var(--steam-radius) * 0.75);
  color: var(--dt-select-idle-text);
  font-size: var(--game-text-md, 16px);
  font-weight: 600;
  font-family: var(--font-accent);
  cursor: pointer;
  transition: var(--dt-interactive-transition-shadow);
  text-align: center;
  white-space: nowrap;
  display: flex;
  box-shadow: var(--dt-select-idle-shadow);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  position: relative;
  transform: none;
}

/* Флаги для валют */
.steam-currency-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: var(--space-2);
  width: 24px;
  height: 18px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.steam-currency-flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

.steam-currency-text {
  display: inline-block;
}

/* Индикатор загрузки для валидации */
.pay-modal__input-wrapper--loading::after {
  content: '';
  position: absolute;
  right: 46px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(168, 85, 247, 0.3);
  border-top-color: var(--steam-brand, #a855f7);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  z-index: 2;
}

@keyframes spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

.steam-input-wrapper:has(.steam-help-btn) .pay-modal__input-wrapper--loading::after {
  right: 48px; /* Сдвигаем левее, если есть кнопка помощи */
}

.steam-currency-btn:hover:not(.active) {
  background: var(--dt-select-hover-bg);
  color: var(--dt-select-hover-text);
  box-shadow: var(--dt-select-hover-shadow);
  transform: none;
}

.steam-currency-btn:hover:not(.active) .steam-currency-text {
  color: var(--dt-select-hover-text);
  text-shadow: var(--dt-select-hover-text-shadow);
}

.steam-currency-btn {
  position: relative;
}
.steam-currency-btn.active {
  background: var(--dt-select-selected-bg);
  border: none; /* Полностью убираем border */
  cursor: default;
  position: relative;
  color: var(--dt-select-selected-text);
  box-shadow: var(--dt-select-selected-shadow);
  transform: none;
}

.steam-currency-btn.active .steam-currency-text {
  color: var(--dt-select-selected-text);
  font-weight: 700;
  text-shadow: var(--dt-select-text-shadow);
}

.steam-currency-btn.active .steam-currency-flag {
  filter: drop-shadow(0 0 4px var(--steam-brand-soft)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  opacity: 1;
}

/* Усиление свечения при hover для активных кнопок валют */
.steam-currency-btn.active:hover {
  background: var(--dt-select-selected-hover-bg);
  color: var(--dt-select-selected-hover-text);
  box-shadow: var(--dt-select-selected-hover-shadow);
  transform: none;
}

.steam-currency-btn.active:hover .steam-currency-text {
  color: var(--dt-select-selected-hover-text);
  text-shadow: var(--dt-select-selected-hover-text-shadow);
}

.steam-currency-btn:active {
  background: var(--dt-select-pressed-bg, var(--dt-control-pressed-background));
  color: var(--dt-select-pressed-text, var(--dt-control-pressed-color));
  box-shadow: var(--dt-select-pressed-shadow, var(--dt-control-pressed-shadow));
  text-shadow: none;
  transform: none;
}

.steam-currency-btn:focus-visible {
  background: var(--dt-control-focus-visible-background, var(--dt-select-hover-bg));
  color: var(--dt-control-focus-visible-color, var(--dt-select-hover-text));
  box-shadow: var(--dt-control-focus-visible-shadow, var(--dt-select-hover-shadow));
  outline: var(--dt-control-focus-visible-outline, var(--dt-interactive-focus-outline));
  outline-offset: var(--dt-control-focus-visible-outline-offset, var(--dt-interactive-focus-outline-offset));
  transform: none;
}

/* ========== 5) ПОЛЯ ВВОДА ============================================== */
.steam-main-content {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-4) 0;
}

.steam-input-group {
  margin-bottom: var(--space-6);
}

.steam-input-label {
  display: block;
  font-size: var(--game-text-md, 16px);
  font-weight: 600;
  color: var(--steam-text);
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
}

.steam-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: var(--steam-radius);
  background: var(--dt-interactive-field-bg);
  box-shadow: var(--dt-interactive-field-idle-shadow);
  transition: box-shadow var(--dt-interactive-transition), background var(--dt-interactive-transition), opacity var(--dt-interactive-transition);
  transform: none;
}
.steam-input-wrapper:hover {
  box-shadow: var(--dt-interactive-field-hover-shadow);
}
.steam-input-wrapper:focus-within {
  background: var(--dt-field-wrapper-focus-within-background, var(--dt-interactive-field-bg));
  box-shadow: var(--dt-interactive-field-focus-shadow);
}

.steam-input {
  flex: 1;
  background: var(--dt-field-input-background, transparent);
  border: var(--dt-field-input-border, 0);
  border-radius: var(--steam-radius);
  padding: var(--space-3) var(--space-4);
  color: var(--dt-field-input-color, var(--dt-input-idle-text));
  font-size: var(--game-text-md, 16px);
  font-weight: 500;
  font-family: var(--font-body);
  box-shadow: var(--dt-field-input-shadow, none);
  outline: var(--dt-field-input-outline, none);
  caret-color: var(--dt-field-input-caret-color, currentColor);
  transition: background var(--dt-interactive-transition), color var(--dt-interactive-transition), opacity var(--dt-interactive-transition);
  min-height: 44px;
  position: relative;
  transform: none;
}

.steam-input::placeholder {
  color: var(--dt-input-placeholder);
}

.steam-input {
  position: relative;
}
.steam-input:focus,
.steam-input.pay-modal__input:focus {
  outline: none;
  background: var(--dt-field-input-background, transparent);
  border: var(--dt-field-input-border, 0);
  box-shadow: var(--dt-field-input-shadow, none) !important;
}

/* Кнопка "Где взять?" - как у UID */
.steam-help-btn.pay-modal__help-btn--inside {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  z-index: 1;
}

.steam-help-btn.pay-modal__help-btn--inside:hover {
  color: var(--steam-brand, #a855f7);
  background: rgba(168, 85, 247, 0.2);
  border-color: rgba(168, 85, 247, 0.4);
  transform: translateY(-50%) scale(1.05);
}

.steam-help-btn.pay-modal__help-btn--inside:active {
  transform: translateY(-50%) scale(0.98);
}

.steam-help-btn.pay-modal__help-btn--inside svg {
  width: 16px;
  height: 16px;
}

/* Добавляем padding-right для input, чтобы текст не перекрывался с кнопкой */
.steam-input-wrapper .steam-input {
  padding-right: 46px; /* Место для кнопки (28px + 10px справа + 8px отступ) */
}

/* Валидация: зеленый фон + галочка (как у UID) */
.steam-input.pay-modal__input--filled,
#steam-username.pay-modal__input--filled {
  background: var(--dt-field-input-background, transparent) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--dt-field-input-color, var(--dt-input-idle-text)) !important;
  box-shadow: none !important;
  position: relative;
  padding-right: 36px !important;
}

/* Подсказки и ошибки (используем стили из game.css) */
.pay-modal__hint {
  font-size: 12px;
  line-height: 1.3;
  color: var(--steam-muted, #6b7280);
  margin-top: 4px;
  opacity: 0.8;
  font-family: var(--font-body);
}

.pay-modal__error {
  font-size: 14px;
  line-height: 1.4;
  color: #ef4444;
  margin-top: 6px;
  display: block;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  min-height: 20px;
  font-family: var(--font-body);
}

.pay-modal__error:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
}

.steam-input[aria-invalid="true"],
.steam-amount-input[aria-invalid="true"] {
  border-color: var(--dt-input-invalid-border, rgba(255,113,113,.82));
}

.steam-input-wrapper:has(.steam-input[aria-invalid="true"]),
.steam-amount-input-wrapper:has(.steam-amount-input[aria-invalid="true"]) {
  box-shadow: var(--dt-interactive-field-error-shadow);
}

/* Галочка валидации (используем стили из game.css) */
.steam-input-wrapper .pay-modal__checkmark {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(34, 197, 94, 1);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Для поля с кнопкой помощи - сдвигаем галочку левее */
.steam-input-wrapper:has(.steam-help-btn) .pay-modal__checkmark,
.steam-input-wrapper:has(.pay-modal__help-btn--inside) .pay-modal__checkmark {
  right: 48px; /* Сдвигаем левее, чтобы не перекрывалась с кнопкой помощи */
}

/* ========== 6) СУММА И БАЛАНС ========================================= */
.steam-amount-section {
  margin-bottom: var(--space-6);
}

.steam-amount-group-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: flex-end;
  margin-bottom: var(--space-4);
}

@media (max-width: 768px) {
  .steam-amount-group-wrapper {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

.steam-amount-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}


.steam-amount-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: var(--steam-radius);
  background: var(--dt-interactive-field-bg);
  box-shadow: var(--dt-interactive-field-idle-shadow);
  transition: box-shadow var(--dt-interactive-transition), background var(--dt-interactive-transition), opacity var(--dt-interactive-transition);
  transform: none;
}
.steam-amount-input-wrapper:hover {
  box-shadow: var(--dt-interactive-field-hover-shadow);
}
.steam-amount-input-wrapper:focus-within {
  background: var(--dt-field-wrapper-focus-within-background, var(--dt-interactive-field-bg));
  box-shadow: var(--dt-interactive-field-focus-shadow);
}

.steam-amount-input {
  flex: 1;
  background: var(--dt-field-input-background, transparent);
  border: var(--dt-field-input-border, 0);
  border-radius: var(--steam-radius);
  padding: var(--space-3) var(--space-4);
  padding-right: 60px; /* Место для символа валюты */
  color: var(--dt-field-input-color, var(--dt-input-idle-text));
  font-size: var(--game-text-lg, 18px);
  font-weight: 600;
  font-family: var(--font-accent);
  box-shadow: var(--dt-field-input-shadow, none);
  outline: var(--dt-field-input-outline, none);
  caret-color: var(--dt-field-input-caret-color, currentColor);
  transition: background var(--dt-interactive-transition), color var(--dt-interactive-transition), opacity var(--dt-interactive-transition);
  min-height: 44px;
  transform: none;
}

.steam-amount-input::placeholder {
  color: var(--dt-input-placeholder);
}

.steam-amount-input:focus,
.steam-amount-input.pay-modal__input:focus {
  outline: none;
  background: var(--dt-field-input-background, transparent);
  border: var(--dt-field-input-border, 0);
  box-shadow: var(--dt-field-input-shadow, none) !important;
}

.steam-currency-symbol {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--steam-text);
  font-size: var(--game-text-lg, 18px);
  font-weight: 600;
  font-family: var(--font-accent);
  pointer-events: none;
  user-select: none;
}

/* Выезжающий блок с информацией о колебаниях валют */
.steam-currency-notice {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--steam-radius);
  color: rgba(34, 197, 94, 1);
  font-size: var(--game-text-sm, 14px);
  line-height: 1.5;
  font-family: var(--font-body);
  animation: slideDown 0.3s ease;
}

.steam-currency-notice p {
  margin: 0;
  color: rgba(34, 197, 94, 1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 200px;
  }
}

/* ========== 7) КНОПКА ОПЛАТИТЬ ========================================= */
.steam-pay-btn,
button.steam-pay-btn,
.steam-pay-btn.btn-pay {
  width: 100%;
  cursor: pointer;
  padding: var(--space-4) var(--space-6);
  border: none !important; /* Убираем border */
  border-radius: var(--steam-radius);
  font-size: var(--game-text-lg, 18px);
  font-weight: 600;
  color: var(--dt-primary-idle-text);
  background: var(--dt-primary-idle-bg);
  font-family: var(--font-accent);
  transition: var(--dt-interactive-transition-shadow);
  min-height: 52px;
  position: relative !important;
  box-shadow: var(--dt-primary-idle-shadow) !important;
  text-shadow: none;
  transform: none;
}

/* Интенсивный яркий бордюр и свечение только в активном состоянии (не disabled) - используем токены */
.steam-pay-btn:not(:disabled):not([aria-busy="true"]),
button.steam-pay-btn:not(:disabled):not([aria-busy="true"]),
.steam-pay-btn.btn-pay:not(:disabled):not([aria-busy="true"]) {
  background: var(--dt-primary-idle-bg);
  box-shadow: var(--dt-primary-idle-shadow) !important;
  color: var(--dt-primary-idle-text);
  transform: none;
}

.steam-pay-btn:hover:not(:disabled):not([aria-busy="true"]),
button.steam-pay-btn:hover:not(:disabled):not([aria-busy="true"]),
.steam-pay-btn.btn-pay:hover:not(:disabled):not([aria-busy="true"]) {
  background: var(--dt-primary-hover-bg);
  color: var(--dt-primary-hover-text);
  box-shadow: var(--dt-primary-hover-shadow) !important;
  transform: none;
}

.steam-pay-btn:active:not(:disabled):not([aria-busy="true"]),
button.steam-pay-btn:active:not(:disabled):not([aria-busy="true"]),
.steam-pay-btn.btn-pay:active:not(:disabled):not([aria-busy="true"]) {
  background: var(--dt-primary-pressed-bg);
  color: var(--dt-primary-pressed-text);
  box-shadow: var(--dt-primary-pressed-shadow) !important;
  transform: none;
}

.steam-pay-btn:focus-visible,
button.steam-pay-btn:focus-visible,
.steam-pay-btn.btn-pay:focus-visible {
  outline: var(--dt-interactive-focus-outline);
  outline-offset: var(--dt-interactive-focus-outline-offset);
  transform: none;
}

.steam-pay-btn:disabled,
button.steam-pay-btn:disabled,
.steam-pay-btn.btn-pay:disabled {
  background: var(--dt-primary-idle-bg);
  border: none !important;
  color: var(--dt-input-disabled-text);
  opacity: var(--dt-interactive-disabled-opacity);
  cursor: var(--dt-interactive-disabled-cursor);
  transform: none !important;
  box-shadow: var(--dt-select-idle-shadow) !important;
}

.steam-pay-btn:disabled:hover,
button.steam-pay-btn:disabled:hover,
.steam-pay-btn.btn-pay:disabled:hover,
.steam-pay-btn[aria-busy="true"],
button.steam-pay-btn[aria-busy="true"],
.steam-pay-btn.btn-pay[aria-busy="true"] {
  background: var(--dt-primary-idle-bg);
  color: var(--dt-input-disabled-text);
  box-shadow: var(--dt-select-idle-shadow) !important;
  transform: none !important;
}

.steam-fee-note {
  margin-top: var(--space-3);
  font-size: var(--game-text-sm, 14px);
  color: rgba(255, 255, 255, 0.6);
  display: none;
}

.steam-fee-note.is-visible {
  display: block;
  text-align: center;
}

/* ========== 7.5) БЛОК "ПРИДЕТ НА БАЛАНС" ============================== */
.steam-balance-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.steam-balance-preview-value {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--steam-panel);
  border: var(--steam-border);
  border-radius: var(--steam-radius);
  transition: all 0.2s ease;
}

.steam-balance-preview-amount {
  font-weight: 700;
  color: rgba(34, 197, 94, 1);
  font-family: var(--font-accent);
  font-size: var(--game-text-lg, 18px);
  line-height: 1.2;
  transition: all 0.3s ease;
}

.steam-balance-preview-amount.updating {
  animation: pulse 0.5s ease;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

.steam-balance-preview-currency {
  font-weight: 600;
  color: var(--steam-text);
  font-size: var(--game-text-lg, 18px);
  font-family: var(--font-accent);
  transition: all 0.3s ease;
}

.steam-balance-preview-currency.updating {
  animation: pulse 0.5s ease;
}

.steam-error-note {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--steam-radius);
  color: rgba(239, 68, 68, 1);
  font-size: var(--game-text-sm, 14px);
  text-align: center;
}


/* ========== 8) ОПИСАНИЕ =============================================== */
/* Steam description наследует компактный game-page pattern: заголовок + caret, без FAQ-card. */
.steam-desc,
#steam-desc {
  margin-block: var(--space-8);
}

.steam-desc .desc-title,
#steam-desc .desc-title {
  color: var(--steam-text);
  font-family: var(--font-heading);
}

.steam-desc .arrow-icon,
#steam-desc .arrow-icon {
  color: var(--steam-brand);
}

.steam-desc .desc-intro,
#steam-desc .desc-intro {
  margin-block: var(--space-3) 0;
}

.steam-desc .extra-description,
#steam-desc .extra-description {
  margin-top: var(--space-4);
}

/* Скрываем корзину на странице Steam */
#cart,
.cart,
#cart-drawer,
.cart-drawer,
.cart-drawer__overlay,
.cart-drawer__sheet,
.mobile-bar,
.mobile-bar__inner,
#mobile-dock,
.js-cart-list,
.cart-drawer__list,
.cart-items,
.cart-items-wrap,
.cart-header,
.cart-title,
.cart-total,
.cart-count,
.cart-actions,
.cart-clear-btn,
.cart-close,
.cart-mode-switch,
#checkout-btn,
.cart-nav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  max-width: 0 !important;
  max-height: 0 !important;
}

/* ========== 9) АДАПТИВ ================================================= */

/* Мобильные устройства */
@media (max-width: 699px) {
  .steam-header {
    padding: var(--space-4) 0;
    gap: var(--space-3);
    flex-direction: row; /* Оставляем в строке на мобильных */
    align-items: center;
  }

  .steam-logo {
    width: 80px;
    height: 80px;
  }

  .steam-title {
    font-size: var(--game-h3, 22px);
  }

  .steam-currency-selector {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .steam-currency-btn {
    flex: 1 1 calc(50% - var(--space-1));
    min-width: calc(50% - var(--space-1));
    font-size: var(--game-text-sm, 14px);
    padding: var(--space-2) var(--space-3);
  }

  .steam-currency-btn::before {
    font-size: 18px;
  }

  .steam-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  .steam-help-btn.pay-modal__help-btn--inside {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }

  .steam-main-content {
    padding: var(--space-2) 0;
  }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
  .steam-logo {
    width: 80px;
    height: 80px;
  }

  .steam-title {
    font-size: 20px;
  }

  .steam-currency-btn {
    font-size: 13px;
    padding: 10px 12px;
  }

  .steam-currency-btn::before {
    font-size: 16px;
  }

  .steam-amount-input {
    font-size: var(--game-text-md, 16px);
  }

  .steam-pay-btn {
    font-size: var(--game-text-md, 16px);
    padding: var(--space-3) var(--space-4);
    min-height: 48px;
  }
}

/* Десктоп: центрируем контент */
@media (min-width: 700px) {
  .steam-main-content {
    max-width: 600px;
  }
}

/* Большие экраны */
@media (min-width: 1024px) {
  .steam-main-content {
    max-width: 700px;
  }
}

/* ========== 10) МОДАЛКА ОПЛАТЫ =========================================== */
/* Стили для модалки оплаты наследуются из game.css */
/* Дополнительные стили только для исправления конфликтов */

/* Гарантируем правильное позиционирование модалки */
.pay-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Гарантируем, что модалка видна когда активна */
.pay-modal.active {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Гарантируем, что модалка скрыта когда не активна */
.pay-modal:not(.active),
.pay-modal[hidden],
.pay-modal[aria-hidden="true"]:not(.active) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Гарантируем правильное позиционирование окна модалки */
.pay-modal__window {
  position: relative !important;
  z-index: 2 !important;
  margin: auto !important;
  /* Убеждаемся, что окно не выходит за пределы viewport */
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - 32px) !important;
}

/* Гарантируем правильное позиционирование кнопки закрытия внутри окна */
.pay-modal__window .pay-modal__close {
  position: absolute !important;
  right: 16px !important;
  top: 16px !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  /* Убеждаемся, что кнопка не выходит за пределы окна */
  margin: 0 !important;
  /* Убираем любые трансформации, которые могут сдвинуть кнопку */
  transform: none !important;
}

/* Гарантируем, что шаги правильно отображаются - как в game.css */
.pay-modal.active .pay-step.is-active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  max-width: none !important;
  max-height: none !important;
}

/* Гарантируем, что неактивные шаги скрыты */
.pay-modal.active .pay-step:not(.is-active) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Гарантируем, что overlay правильно позиционирован */
.pay-modal__overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

/* Гарантируем, что overlay правильно позиционирован */
.pay-modal__overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

/* ========== 11) МОДАЛКА ПОМОЩИ (UID/Username) ============================= */
/* Базовая структура модалки помощи - как в game.css */
.uid-help-modal {
  position: fixed;
  inset: 0;
  z-index: 100000; /* Выше, чем pay-modal */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

/* Гарантируем, что модалка помощи скрыта по умолчанию */
.uid-help-modal[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Гарантируем, что модалка помощи видна только когда aria-hidden="false" */
.uid-help-modal[aria-hidden="false"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Overlay - затемненный фон с размытием */
.uid-help-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Окно модалки */
.uid-help-modal__window {
  position: relative;
  z-index: 2;
  width: clamp(300px, 90vw, 600px);
  max-width: 90vw;
  background: #11131b;
  color: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.75);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 90vh;
  overflow-y: auto;
  margin: 20px;
}

/* Контент модалки */
.uid-help-modal__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 8px;
}

/* Изображение в модалке */
.uid-help-modal__image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Крестик в модалке помощи */
.uid-help-modal__close {
  position: absolute;
  right: 16px;
  top: 16px;
  width: var(--close-btn-size, 32px);
  height: var(--close-btn-size, 32px);
  background: var(--close-btn-base-bg, rgba(255, 255, 255, 0.08));
  border: none;
  border-radius: var(--close-btn-border-radius, 50%); /* Круглые */
  color: var(--close-btn-base-color, var(--steam-muted, #9ca3af));
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  z-index: 1000;
  pointer-events: auto !important;
  touch-action: manipulation;
  box-shadow: none;
}
.uid-help-modal__close:hover {
  background: var(--close-btn-hover-bg, rgba(168, 85, 247, 0.15));
  color: var(--close-btn-hover-color, var(--steam-brand, #a855f7));
  /* Используем токен для единого hover-эффекта (адаптируем для Steam) */
  box-shadow:
    inset 0 0 0 1px var(--steam-brand, #a855f7),
    0 0 8px var(--steam-brand-soft, rgba(168,85,255,.35));
}

/* Адаптив для мобильных */
@media (max-width: 520px) {
  .uid-help-modal__window {
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    padding: 20px;
    margin: 20px;
  }
}