/**
 * UpPay global color tokens — source of truth matches index.html (homepage).
 * Layout/spacing live in HTML/Tailwind; this file is colors, mood, and shared hovers only.
 */
:root {
  --bg: #08090f;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-2: rgba(255, 255, 255, 0.028);
  --text: #f8fafc;
  --text-2: #b7c4db;
  --border: rgba(255, 255, 255, 0.09);
  --accent: #7c5cff;
  --accent-hover: #9375ff;
  --accent-muted: #b39cff;
  --glow: rgba(124, 92, 255, 0.34);
  --focus: rgba(124, 92, 255, 0.34);
  --success: #16a34a;
  --warning: #d97706;
  --error: #dc2626;
  --nav-bg: rgba(8, 12, 23, 0.86);
  --hero-bg: rgba(17, 24, 42, 0.88);
  --hero-surface: rgba(26, 35, 58, 0.92);
  --hero-border: rgba(173, 189, 224, 0.22);
  --dropdown-bg: rgba(10, 14, 26, 0.98);
  --ui-radius: 24px;
  --ui-space-4: 1rem;
  --input-bg: rgba(9, 14, 28, 0.94);
  --card-solid: rgba(19, 26, 45, 0.92);
  --panel-elevated: rgba(18, 25, 44, 0.96);
  --panel-muted: rgba(39, 50, 76, 0.74);
  --footer-bar: rgba(4, 8, 18, 0.96);
  --control-raised: rgba(67, 80, 112, 0.45);
  --control-raised-hover: rgba(92, 106, 142, 0.58);
  --chat-log-bg: rgba(15, 23, 42, 0.88);
  --bubble-user: rgba(51, 65, 85, 0.72);
  --bubble-peer: rgba(30, 41, 59, 0.88);
  --discount-badge: rgba(124, 92, 255, 0.92);
  --uppay-pay-cta-bg: #74ed7c;
  --uppay-pay-cta-bg-hover: #5ee868;
  --uppay-pay-cta-text: #0a0d0a;
  --uppay-pay-cta-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
  --uppay-pay-cta-shadow-hover: 0 10px 32px rgba(0, 0, 0, 0.28), 0 0 18px rgba(116, 237, 124, 0.28);
  --cta-from: #080f1e;
  --cta-to: #0a081c;
  --cta-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --cta-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(79, 125, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

*,
::before,
::after {
  transition:
    border-color 0.2s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    color 0.2s ease;
}

html {
  color-scheme: dark;
}

body {
  background:
    radial-gradient(ellipse 1400px 480px at 50% -6%, rgba(88, 28, 220, 0.13), transparent 52%),
    #08090f;
  color: var(--text);
}

/* Главная: чуть светлее база и мягкое фиолетовое свечение (остальные страницы без изменений). */
body.uppay-home {
  --bg: #0e0f17;
  background:
    radial-gradient(ellipse 900px 340px at 50% 112%, rgba(98, 52, 210, 0.062), transparent 55%),
    radial-gradient(ellipse 1000px 420px at 78% 36%, rgba(124, 92, 255, 0.095), transparent 58%),
    radial-gradient(ellipse 920px 480px at 14% 74%, rgba(125, 168, 228, 0.05), transparent 56%),
    radial-gradient(ellipse 1400px 520px at 50% -8%, rgba(96, 36, 225, 0.175), transparent 54%),
    linear-gradient(180deg, #10121c 0%, #0d0f17 40%, #13151f 100%);
  color: var(--text);
}

header {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: linear-gradient(to bottom, rgba(7, 11, 21, 0.94), rgba(7, 11, 21, 0.78)) !important;
  border-bottom-color: rgba(161, 177, 214, 0.18) !important;
}

body.uppay-home header {
  background: linear-gradient(to bottom, rgba(13, 17, 30, 0.92), rgba(13, 17, 30, 0.74)) !important;
  border-bottom-color: rgba(185, 198, 236, 0.24) !important;
}

/* Homepage only: frosted glass bento shells */
.uppay-home main section,
.uppay-home main article,
.uppay-home main aside,
.uppay-home .ui-card {
  background: rgba(255, 255, 255, 0.065);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.115) !important;
  border-radius: 28px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.095),
    0 20px 42px rgba(0, 0, 0, 0.2),
    0 0 72px rgba(124, 92, 255, 0.045);
}

/* Hero: без стеклянной оболочки секции — иначе бегущие плашки внутри уже размытого фона (#hero = .uppay-home main section),
   и их backdrop-filter нечем «оживить» (визуально плоский серый прямоугольник). Виджет справа (#heroQuickPick) со своим фоном. */
.uppay-home main section#hero {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Игры и сервисы на главной — без оболочки-секции; лёгкий локальный «туман» вместо ровной тьмы. */
.uppay-home main section#home-games-block,
.uppay-home main section#brands-services {
  background:
    radial-gradient(ellipse 92% 58% at 50% 44%, rgba(132, 105, 255, 0.072), transparent 72%),
    radial-gradient(ellipse 72% 48% at 18% 62%, rgba(120, 168, 225, 0.042), transparent 68%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.uppay-home main section#home-games-block a:hover,
.uppay-home main section#brands-services a:hover {
  box-shadow: none !important;
  border-color: transparent !important;
}

.uppay-home main a:hover,
.uppay-home main button:hover,
.uppay-home .ui-card a:hover,
.uppay-home .ui-card button:hover {
  box-shadow:
    0 0 28px rgba(124, 92, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-color: rgba(124, 92, 255, 0.34) !important;
}

/* Reusable premium dark surface for internal pages and key content blocks */
.uppay-surface-panel {
  background: rgba(14, 16, 24, 0.76) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.uppay-surface-panel--soft {
  background: rgba(18, 21, 31, 0.64) !important;
}

/* Primary CTA — same gradient mood as #heroQuickAction on the homepage */
.uppay-cta {
  background: linear-gradient(145deg, var(--cta-from), var(--cta-to)) !important;
  border: 1px solid rgba(79, 125, 255, 0.14) !important;
  color: #e2e8f0 !important;
  box-shadow: var(--cta-shadow);
}

.uppay-cta:hover {
  background: linear-gradient(145deg, #101b32, #120f28) !important;
  box-shadow: var(--cta-shadow-hover);
}

/* Global payment CTA: same visual language as the home quick-pay button */
.uppay-payment-cta,
.uppay-cta--buy,
.uppay-hero-modal__submit {
  background: var(--uppay-pay-cta-bg) !important;
  border: none !important;
  color: var(--uppay-pay-cta-text) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
  box-shadow: var(--uppay-pay-cta-shadow) !important;
  transition:
    transform 0.18s ease,
    background 0.16s ease,
    box-shadow 0.18s ease !important;
}

.uppay-payment-cta:hover:not(:disabled),
.uppay-cta--buy:hover:not(:disabled),
.uppay-hero-modal__submit:hover:not(:disabled) {
  background: var(--uppay-pay-cta-bg-hover) !important;
  color: var(--uppay-pay-cta-text) !important;
  box-shadow: var(--uppay-pay-cta-shadow-hover) !important;
  transform: translateY(-2px) scale(1.02);
}

.uppay-payment-cta:active:not(:disabled),
.uppay-cta--buy:active:not(:disabled),
.uppay-hero-modal__submit:active:not(:disabled) {
  transform: translateY(0) scale(0.98) !important;
}

.uppay-payment-cta:disabled,
.uppay-cta--buy:disabled,
.uppay-hero-modal__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.uppay-payment-cta span,
.uppay-cta--buy span {
  color: inherit !important;
  font-weight: 600 !important;
}

.uppay-payment-cta .uppay-rub,
.uppay-cta--buy .uppay-rub {
  color: inherit !important;
  font-weight: 600 !important;
}

/* Символ ₽ — обычное начертание внутри жирных сумм */
.uppay-rub {
  font-weight: 400 !important;
  font-synthesis: none;
}

/* Карточки номиналов: цена semi-bold вместе с ₽ */
.nom-card .uppay-rub {
  font-weight: 600 !important;
}

/* Subtle full-page vignette (replaces green-tinted overlays on donate pages) */
.uppay-vignette {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: -10;
  background: radial-gradient(ellipse 80% 50% at 50% -20%, var(--glow), transparent);
}

.uppay-vignette--soft {
  background: radial-gradient(ellipse 70% 40% at 50% -10%, var(--glow), transparent);
}

/* Warning callouts — same hue as --warning, tuned for dark UI */
.uppay-banner-warn {
  border: 1px solid color-mix(in srgb, var(--warning) 42%, transparent);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: #fbbf24;
}

.uppay-discount-badge {
  background: var(--discount-badge);
  color: #fff;
}

.uppay-inline-warn-text {
  color: #fbbf24;
}

.uppay-inline-accent-text {
  color: var(--accent);
}

/* Payment method tabs (donate flows) */
.uppay-paytab-on {
  border-color: var(--uppay-pay-tab-selected-border, rgba(79, 125, 255, 0.45)) !important;
  background: var(--uppay-pay-tab-selected-bg, rgba(79, 125, 255, 0.1)) !important;
  color: var(--uppay-pay-tab-selected-color, inherit) !important;
}

/**
 * Единый отклик на клик для кнопок по сайту.
 * Не трогаем оплату: СБП/карта (.pay-tab), «Купить» (.uppay-cta--buy), «Оплатить» на главной (#heroQuickPayBtn),
 * сабмит модалки героя (#heroModalSubmitBtn), карточки номиналов игр (.nom-card), чипы App Store (свои стили),
 * колокол уведомлений.
 */
@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):not(.pay-tab):not(.uppay-cta--buy):not(#heroModalSubmitBtn):not(#heroQuickPayBtn):not(
      .nom-card
    ):not(.uppay-app-region-pill):not(.uppay-app-nom-pill):not(.uppay-notif-btn) {
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  button:not(:disabled):not(.pay-tab):not(.uppay-cta--buy):not(#heroModalSubmitBtn):not(#heroQuickPayBtn):not(
      .nom-card
    ):not(.uppay-app-region-pill):not(.uppay-app-nom-pill):not(.uppay-notif-btn):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(79, 125, 255, 0.14);
  }

  button:not(:disabled):not(.pay-tab):not(.uppay-cta--buy):not(#heroModalSubmitBtn):not(#heroQuickPayBtn):not(
      .nom-card
    ):not(.uppay-app-region-pill):not(.uppay-app-nom-pill):not(.uppay-notif-btn):active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
  }
}

/* Предупреждение у оплаты по региону: класс-маркер .uppay-checkout-region-only; цвет — в разметке (напр. text-white/95). */