/*
 * Экраны платёжного пути: ожидание оплаты, успех, апгрейд до VIP.
 *
 * В оригинале всё это лежало инлайновыми <style> внутри самих страниц:
 *   wait_pay.php      → .wait-*, .btn-back-prof, .ok, .err
 *   success-page.php  → спиннер-галочка, .msg-wrap, .btn-go-back
 *   vip-upgrade.php   → .upgrade-*, .uc-*, .convert-arrow, .vip-badge
 *
 * В main.css (legacy.css) ни одного из этих классов нет.
 */

/* ============================================================
   wait_pay.php
   ============================================================ */

.wait-wrap {
  min-height: calc(100vh - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.wait-card {
  width: 100%;
  max-width: 520px;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  padding: 24px 20px;
  text-align: center;
}

.wait-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.wait-text {
  font-size: 18px;
  color: #e4e8f0;
  margin-bottom: 6px;
}

.wait-sub {
  font-size: 14px;
  color: #afc1da;
  margin-bottom: 18px;
}

.btn-back-prof {
  margin-top: 14px;
  display: inline-block;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: #e4e8f0;
  text-decoration: none;
}

.ok {
  color: #5aec81;
}

.err {
  color: #d85b66;
}

/* ============================================================
   success-page.php

   Оригинал — самодостаточный документ: он обнулял поля у всех
   элементов и растягивал body. Здесь то же самое делает обёртка
   .success-screen: сбрасывать поля глобально нельзя, файл живёт
   в одном приложении с остальными страницами.

   По той же причине спиннер заскоплен: класс .spinner в оригинале
   занят дважды — здесь это SVG-галочка, а в vip-upgrade.php
   круглый лоадер.
   ============================================================ */

.success-screen {
  --brand: #0083ed;
  --periwinkle: hsl(240, 90%, 70%);
  --light-blue: hsl(210, 90%, 70%);
  --orange: hsl(15, 90%, 70%);
  --magenta: hsl(300, 90%, 70%);
  --light-green: hsl(105, 40%, 70%);
  --light-teal: hsl(150, 40%, 70%);
  --purple: hsl(270, 90%, 70%);

  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family:
    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
}

.success-screen * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ---------- spinner ---------- */
.success-screen .spinner {
  color: var(--brand);
  width: 5.5em;
  height: auto;
  display: block;
  overflow: visible;
  margin-top: -50px;
}

.success-screen .spinner circle,
.success-screen .spinner g,
.success-screen .spinner path {
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.success-screen .spinner__check,
.success-screen .spinner__pop-start,
.success-screen .spinner__worm {
  transform-origin: 24px 24px;
}

.success-screen .spinner__check {
  animation-name: check;
}

.success-screen .spinner__worm {
  animation-name: worm;
}

.success-screen .spinner__pop-dot {
  animation-name: pop-dot;
}

.success-screen .spinner__pop-dot-group {
  animation-name: pop-dot-group1;
}

.success-screen .spinner__pop-dot-group + .spinner__pop-dot-group {
  animation-name: pop-dot-group2;
}

.success-screen .spinner__pop-end {
  animation-name: pop-end;
  stroke: var(--brand);
}

.success-screen .spinner__pop-start {
  animation-name: pop-start;
  fill: var(--brand);
}

/* ---------- подпись и кнопка ---------- */
.msg-wrap {
  text-align: center;
  opacity: 0;
  transform: translateY(-5px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.msg-wrap.reveal {
  opacity: 1;
  transform: translateY(0);
}

.txt-type-success {
  color: var(--brand);
  line-height: 1.4;
  margin-bottom: 12px;
  padding: 0 16px;
  font-size: 17px;
  font-family: sans-serif;
}

.btn-go-back {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  margin: 0 auto;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 131, 237, 0.25);
  transition:
    transform 0.12s ease,
    opacity 0.12s ease;
  font-weight: bold;
}

.btn-go-back:active {
  transform: translateY(1px);
  opacity: 0.9;
}

/* ---------- keyframes ---------- */
@keyframes check {
  from,
  64% {
    stroke-dashoffset: -36.7;
    transform: scale(1);
  }
  75%,
  77% {
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    stroke-dashoffset: 13.7;
    transform: scale(1);
  }
  79% {
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    stroke-dashoffset: 13.7;
    transform: scale(0.4);
  }
  87% {
    animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
    stroke-dashoffset: 13.7;
    transform: scale(1.4);
  }
  93%,
  to {
    stroke-dashoffset: 13.7;
    transform: scale(1);
  }
}

@keyframes pop-dot {
  from,
  80% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
    transform: translate(0, 6px);
  }
  90%,
  to {
    transform: translate(0, 0);
  }
}

@keyframes pop-dot-group1 {
  from,
  82.5%,
  90%,
  to {
    opacity: 0;
  }
  85%,
  87.5% {
    opacity: 1;
  }
}

@keyframes pop-dot-group2 {
  from,
  82.5%,
  to {
    opacity: 0;
  }
  85%,
  90% {
    opacity: 1;
  }
}

@keyframes pop-end {
  from {
    animation-timing-function: steps(1, end);
    opacity: 0;
    r: 18px;
    stroke-width: 4px;
  }
  82.5% {
    animation-timing-function: linear;
    opacity: 1;
    r: 18px;
    stroke-width: 4px;
  }
  84%,
  to {
    opacity: 0;
    r: 19px;
    stroke-width: 3px;
  }
}

@keyframes pop-start {
  from {
    animation-timing-function: steps(1, end);
    opacity: 0;
    transform: scale(0.35);
  }
  76% {
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    opacity: 1;
    transform: scale(0.35);
  }
  82.5% {
    animation-timing-function: steps(1, start);
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes worm {
  from {
    stroke-dashoffset: -51.84;
    transform: rotate(-119deg);
  }
  60% {
    stroke-dashoffset: -51.84;
    transform: rotate(calc(-119deg + 3turn));
  }
  64% {
    animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
    stroke-dashoffset: -51.84;
    transform: rotate(calc(-119deg + 3.2turn));
  }
  72.5%,
  to {
    stroke-dashoffset: -138.23;
    transform: rotate(calc(-119deg + 3.2turn));
  }
}

/* ============================================================
   vip-upgrade.php
   ============================================================ */

.upgrade-container {
  padding: 20px;
  text-align: center;
}

.upgrade-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.upgrade-card.source {
  border-color: rgba(255, 255, 255, 0.2);
}

.upgrade-card.target {
  background: linear-gradient(135deg, rgba(79, 139, 255, 0.1) 0%, rgba(142, 84, 233, 0.1) 100%);
  border: 1px solid rgba(79, 139, 255, 0.4);
  box-shadow: 0 0 20px rgba(79, 139, 255, 0.1);
}

.uc-title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  font-weight: 600;
}

.uc-value {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.uc-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.convert-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -10px 0 10px;
  position: relative;
  z-index: 2;
}

.arrow-circle {
  width: 40px;
  height: 40px;
  background: #1c1c1e;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #4f8bff;
  font-size: 16px;
}

.info-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin-bottom: 30px;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px;
  border-radius: 10px;
}

.upgrade-btn {
  background: linear-gradient(92deg, #4f8bff 0%, #8e54e9 100%);
  color: white;
  font-family: Roboto-Medium;
  font-size: 16px;
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(79, 139, 255, 0.3);
  transition:
    transform 0.2s,
    opacity 0.2s;
  text-decoration: none;
  display: block;
  text-align: center;
}

.upgrade-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.upgrade-btn.disabled {
  background: #333;
  color: #777;
  box-shadow: none;
  pointer-events: none;
}

.vip-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 215, 0, 0.2);
  color: #ffd700;
  font-size: 10px;
  font-family: Roboto-Medium;
  padding: 4px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}