/* ==== Neon Glass UI — Pay Screen ==== */
@import 'variables.css';

:root{
  --bg1:#0b0f1a; 
  --bg2:#0d1224;
  --text:#e7f2ff;
  --muted:#a6b3c8;

  --accent:#6cf0ff;        /* бирюзовый неон */
  --accent2:#8b5cf6;       /* фиолетовый неон */

  --glass: rgba(255,255,255,.08);
  --glass-strong: rgba(255,255,255,.14);
  --ring: rgba(108,240,255,.55);

  --radius:22px;
  --blur:14px;

  --shadow: 0 0 22px rgba(108,240,255,.25), 0 0 60px rgba(139,92,246,.18);
  --shadow-strong: 0 0 28px rgba(108,240,255,.55), 0 0 80px rgba(139,92,246,.35);
}

*{ box-sizing: border-box }
html, body{ height:100% }
body{
  margin:0;
  color:var(--text);
  font:16px/1.45 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at -10% 10%, rgba(139,92,246,.22), transparent 60%),
    radial-gradient(900px 600px at 110% 0%, rgba(108,240,255,.22), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg1));
  overflow-x:hidden;
  overflow-y:hidden;
}

html, body, * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none; /* iOS long-press меню */
    touch-action: manipulation;   /* меньше шансов на double-tap zoom в Chrome/Android */
}

/* плавность без «прыжков» */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth }
}

/* Заголовок */

h1 {
  font-family: var(--second-family);
  margin: 0 0 30px;
  padding: 0;
  text-align: center;
  font-weight: 800;
  font-size: clamp(2  rem, 5vw, 3rem);
  letter-spacing: .2px;
  text-shadow: 0 0 20px rgba(108,240,255,.18), 0 0 24px rgba(139,92,246,.12);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}



/* Контейнер страницы */
.wrap{
  min-height: calc(100dvh - 80px);
  display:grid;
  place-items:center;
  padding: 20px;
  position:relative;
}

/* Стеклянная карточка под форму (используем сам <form>) */
#payment-form {
  width: min(880px, 92vw);
  display: grid;
  gap: 16px;
  padding: clamp(16px, 3vw, 24px);
  border-radius: var(--radius);

  /* Прозрачный фон и без блюра */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  /* Убираем рамку и тень */
  border: none;
  box-shadow: none;

  position: relative;
  overflow: visible;
}

/* Анимированные неоновые «пятна» позади формы */
#payment-form::before,
#payment-form::after{
  content:"";
  position:absolute; inset:auto;
  width:360px; height:360px; border-radius:50%;
  filter: blur(50px) saturate(140%);
  pointer-events:none; opacity:.8;
  animation: float 9s ease-in-out infinite;
}
#payment-form::before{
  top:-140px; right:-120px;
  background: radial-gradient(closest-side, rgba(108,240,255,.35), transparent 70%);
}
#payment-form::after{
  bottom:-140px; left:-140px;
  background: radial-gradient(closest-side, rgba(139,92,246,.30), transparent 70%);
  animation-direction: reverse;
  animation-duration: 11s;
}
@keyframes float{
  0%,100%{ transform: translate3d(0,0,0) scale(1) }
  50%{ transform: translate3d(0,8px,0) scale(1.03) }
}

/* Кнопки выбора оплаты */
.pay-button{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;

  padding: 16px 18px;
  border-radius: 18px;

  color: var(--text);
  font-weight: 700;
  letter-spacing: .2px;

  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);

  cursor: pointer;
  outline: none;
  text-align: left;

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

/* расположение кнопок одна под другой на мобиле */
.pay-button + .pay-button{
  margin-top: 12px;
}

.pay-button:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-strong);
  border-color: var(--ring);
}

.pay-button:active{
  transform: translateY(0);
  box-shadow: var(--shadow);
}

/* текст на кнопке */
.button-text{
  font-size: clamp(1rem, 2.8vw, 1.15rem);
}

/* неоновый круг справа */
.glow-circle{
  position: relative;
  width: 54px; height: 54px;
  display:grid; place-items:center;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(108,240,255,.25), rgba(139,92,246,.25));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow);
  overflow:hidden;
  isolation:isolate; /* чтобы фильтр не резал кнопке тени */
}
.glow-circle::before{
  content:"";
  position:absolute; inset:-30%;
  background: conic-gradient(from 0deg, rgba(108,240,255,.45), rgba(139,92,246,.45), rgba(108,240,255,.45));
  filter: blur(18px) saturate(140%);
  animation: spin 8s linear infinite;
  opacity:.65;
}
@keyframes spin{ to{ transform: rotate(1turn) } }

/* Спиннер загрузки */
.spinner{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(5,8,15,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
  z-index: 50;
}
.spinner.show{ opacity:1; visibility: visible }

.spinner::before{
  content:"";
  width:72px; height:72px; border-radius:50%;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: var(--accent);
  border-right-color: var(--accent2);
  box-shadow: 0 0 24px rgba(108,240,255,.35), 0 0 40px rgba(139,92,246,.25) inset;
  animation: spin 1.1s linear infinite;
}

/* Фокус и доступность */
.pay-button:focus-visible{
  box-shadow: 0 0 0 3px rgba(108,240,255,.22), var(--shadow-strong);
  border-color: var(--ring);
}

/* Телега-тема (если миниапп шлёт переменные темы) — мягкая адаптация */
:root {
  /* если Telegram WebApp задаёт css-переменные, можно слегка их учесть: */
  --tg-bg: var(--bg1);
  --tg-text: var(--text);
}
body{ color: var(--tg-text) }

/* Мобилки/тач: выключаем залипающий hover, оставляем короткий отклик на тап */
@media (hover: none), (pointer: coarse){
  .pay-button:hover{
    transform: none;
    box-shadow: var(--shadow);
    border-color: rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  }

  /* Короткий отклик на нажатие (tap) */
  .pay-button:active{
    transform: translateY(1px) scale(.995);
    box-shadow: 0 0 0 3px rgba(108,240,255,.16), var(--shadow);
  }

  /* Если вдруг кнопка остаётся в focus после тапа — делаем его мягким */
  .pay-button:focus{
    box-shadow: var(--shadow);
    border-color: rgba(255,255,255,.14);
  }
}

/* Убираем синий подсвет при тапе в iOS/Android */
* { -webkit-tap-highlight-color: transparent; }