/* ===== home-steam-fix.css — блок «Пополнить Steam» (тёмный дизайн под сайт, ПК) ===== */

.card-modern {
  border-radius: 20px !important;
  padding: 22px 24px !important;
  margin-bottom: 24px !important;
  background: rgba(18, 20, 30, 0.72) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ---- Шапка ---- */
.steam-head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}

.steam-head-logo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a3f5f, #0b1622);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.steam-head-logo i {
  font-size: 1.5rem;
  color: #e5edf5;
}

.steam-head-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.steam-head-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.steam-head-badge {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
}

.steam-promo-link {
  background: none;
  border: none;
  padding: 0;
  color: #60a5fa;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  transition: color 0.2s ease;
}

.steam-promo-link:hover {
  color: #93c5fd;
}

.steam-promo-link .fa-chevron-right {
  font-size: 0.65rem;
}

/* ---- Поля + кнопка в одну строку ---- */
.steam-pay-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.steam-field {
  flex: 1 !important;
  background: rgba(8, 10, 18, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  padding: 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  transition: border-color 0.2s ease !important;
}

.steam-field:focus-within {
  border-color: rgba(59, 130, 246, 0.5) !important;
}

.steam-field label {
  font-size: 0.72rem !important;
  color: #8b93a7 !important;
  margin-bottom: 4px !important;
}

.steam-field .input-modern {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  padding: 0 !important;
}

.steam-field .input-modern::placeholder {
  color: #5f5f6b !important;
  font-weight: 400 !important;
}

/* Убираем белую обводку поля ввода (перебивает #amountInput/#steamLogin из base.css) */
.card-modern #steamLogin,
.card-modern #amountInput,
.card-modern #steamLogin:focus,
.card-modern #amountInput:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.steam-amount-inner {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.steam-amount-inner .input-modern {
  flex: 1 !important;
  min-width: 0 !important;
}

/* ---- Валюта — кружочки ---- */
.currency-selector {
  display: flex !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.currency-option {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #94a3b8 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.currency-option.active {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  color: #fff !important;
}

/* ---- Кнопка оплаты — отдельной строкой под полями, на всю ширину ----
   Высокая специфичность (.card-modern .pay-btn-blue), чтобы перебить
   инлайн-стили в index.html с «пузырьками» и абсолютным позиционированием. */
.card-modern .pay-btn-blue {
  position: static !important;
  overflow: visible !important;
  display: flex !important;
  width: 100% !important;
  margin-top: 14px !important;
  padding: 15px 24px !important;
  border: none !important;
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.3) !important;
  animation: none !important;
}

/* Убираем «пузырьки» и блики из инлайн-стилей */
.card-modern .pay-btn-blue::before,
.card-modern .pay-btn-blue::after {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
}

.card-modern .pay-btn-blue span {
  position: static !important;
}

.card-modern .pay-btn-blue:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(59, 130, 246, 0.5) !important;
}

.card-modern .pay-btn-blue:active {
  transform: scale(0.98) !important;
}

/* ---- Адаптив: узкий ПК / планшет ---- */
@media (max-width: 860px) {
  .steam-pay-row {
    flex-wrap: wrap !important;
  }

  .steam-field {
    flex: 1 1 100% !important;
  }
}