/* Карточка регистрации, экран успеха и футер — вынуто из grams-folder/assets/index.css
   без изменений, чтобы форма выглядела так же, как на лендинге с колесом. */
:root {
  --color-bg: #150316;
  --color-red: #c81419;
  --color-red-dark: #7e0000;
  --color-blue: #40B6FF;
  --color-gold: ##faeab4;
  --color-gold-dark: #b7580f;
  --color-green: #59c72f;
  --color-green-dark: #1c7a17;
  --font-display: "Inter", sans-serif;
}
.signup {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  background: linear-gradient(#2e082cf0 0%, #1a041bf5 100%);
  border: 1px solid #f9d04759;
  border-radius: 16px;
  width: 100%;
  padding: 22px 22px 18px;
  box-shadow: 0 18px 44px #0000008c;
}
.signup__head {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.signup__title {
  font-family: var(--font-display);
  margin: 0;
  font-size: 22px;
  font-weight: 800;
}
.signup__steps {
  align-items: center;
  gap: 8px;
  display: flex;
}
.step {
  color: #10240c;
  background: #ffffff29;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}
.step--active {
  background: var(--color-green);
}
.signup__prize {
  color: var(--color-gold);
  background: #f9d0471f;
  border: 1px solid #f9d04766;
  border-radius: 10px;
  margin: 12px 0 0;
  padding: 8px 12px;
  font-size: 13px;
}
.signup__prize strong {
  color: #fff;
}
.signup__sub {
  text-align: center;
  color: #ffffffbf;
  margin: 14px 0 12px;
  font-size: 13px;
}
.signup__form {
  flex-direction: column;
  gap: 12px;
  display: flex;
}
.field {
  flex-direction: column;
  gap: 4px;
  display: flex;
}
.input {
  color: #fff;
  background: #0e020fbf;
  border: 1px solid #ffffff24;
  border-radius: 10px;
  outline: none;
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.15s;
}
.input::placeholder {
  color: #ffffff73;
}
.input:focus {
  border-color: var(--color-gold);
}
.input--error {
  border-color: var(--color-red);
}
.input-wrap {
  position: relative;
}
.input--with-eye {
  padding-right: 44px;
}
.eye {
  color: #ffffff8c;
  cursor: pointer;
  background: 0 0;
  border: none;
  padding: 4px;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
.eye:hover {
  color: #fff;
}
.select-wrap {
  display: block;
  position: relative;
}
.select-label {
  letter-spacing: 0.3px;
  color: #ffffff80;
  pointer-events: none;
  font-size: 10px;
  position: absolute;
  top: 6px;
  left: 14px;
}
.input--select {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, #0000 50%, #fff9 50%),
    linear-gradient(135deg, #fff9 50%, #0000 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-repeat: no-repeat;
  background-size: 6px 6px;
  padding-top: 20px;
  padding-bottom: 8px;
}
.input--select option {
  color: #fff;
  background: #1a041b;
}
.field__error {
  color: #ff7a7a;
  margin: 0;
  font-size: 12px;
}
.field__error--check {
  margin-top: -6px;
}
.check {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  display: flex;
}
.check__box {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.check__mark {
  background: #0e020fbf;
  border: 1.5px solid #ffffff59;
  border-radius: 6px;
  flex: 0 0 20px;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  transition: background 0.15s, border-color 0.15s;
  display: inline-flex;
}
.check__mark--error {
  border-color: var(--color-red);
}
.check__box:checked + .check__mark {
  background: var(--color-green);
  border-color: var(--color-green);
}
.check__box:checked + .check__mark:after {
  content: "";
  border: 2px solid #0e2408;
  border-width: 0 2px 2px 0;
  width: 5px;
  height: 9px;
  transform: rotate(45deg) translateY(-1px);
}
.check__text {
  color: #ffffffd9;
}
.check__text a {
  color: var(--color-green);
  text-decoration: none;
}
.check__text a:hover {
  text-decoration: underline;
}
.signup__error {
  color: #ffb3b3;
  background: #c814192e;
  border: 1px solid #c814198c;
  border-radius: 10px;
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
}
.signup__error a {
  color: #fff;
  font-weight: 700;
}
.submit {
  background: linear-gradient(
    180deg,
    var(--color-green) 0%,
    var(--color-green-dark) 100%
  );
  color: #fff;
  width: 100%;
  font-family: var(--font-display);
  cursor: pointer;
  border: none;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  font-size: 16px;
  font-weight: 800;
  transition: filter 0.15s;
  display: flex;
  box-shadow: 0 6px 16px #1c7a1773;
}
.submit:hover:not(:disabled) {
  filter: brightness(1.1);
}
.submit:disabled {
  filter: grayscale(0.3) brightness(0.8);
  cursor: wait;
}
.submit--link {
  text-decoration: none;
}
.spinner {
  border: 2px solid #ffffff59;
  border-top-color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: 0.7s linear infinite spin;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.signup__aux {
  text-align: center;
  color: #ffffffd9;
  margin: 0;
  font-size: 13px;
}
.signup__aux--muted {
  color: #ffffff8c;
}
.signup__aux a {
  color: var(--color-green);
  font-weight: 700;
  text-decoration: none;
}
.signup__aux a:hover {
  text-decoration: underline;
}
.success {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  display: flex;
}
.success__icon {
  background: linear-gradient(
    180deg,
    var(--color-green) 0%,
    var(--color-green-dark) 100%
  );
  color: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  font-size: 30px;
  font-weight: 900;
  display: flex;
  box-shadow: 0 6px 18px #1c7a1780;
}
.success__text {
  color: #ffffffd9;
  margin: 0;
  font-size: 14px;
}
.success__text strong {
  color: var(--color-gold);
}
.footer {
  z-index: 2;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #0000002e;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px 55px;
  margin-top: -11%;
  padding: 20px;
  display: flex;
  position: relative;
}
.footer-logo {
  filter: brightness(0.7);
}
.visa {
  height: 20px;
}
.mastercard {
  height: 23px;
}
.google {
  height: 28px;
}
.apple {
  height: 26px;
}
.deal,
.revolut,
.bank,
.interac {
  height: 32px;
}
.kryptonim {
  height: 16px;
}
@media (width <= 750px) {
  .footer {
    gap: 25px 38px;
  }
  .visa {
    height: 12px;
  }
  .mastercard {
    height: 15px;
  }
  .google {
    height: 16px;
  }
  .apple {
    height: 17px;
  }
  .deal {
    height: 23px;
  }
  .revolut,
  .bank {
    height: 20px;
  }
  .interac {
    height: 26px;
  }
  .kryptonim {
    height: 12px;
  }
}
/* -------------------- Экран успешной регистрации ------------------------ */

/* Живёт в той же карточке, что и форма: form.js прячет форму и раскрывает
   этот блок на SUCCESS_DELAY мс, после чего уводит на бренд. Базовые
   .success / .success__icon / .success__text объявлены выше. */

.signup [hidden] {
  /* .signup__form и .signup__head объявлены через display: flex —
     без !important атрибут hidden их не перебьёт */
  display: none !important;
}

.success__icon {
  animation: 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both success-pop;
}

@keyframes success-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.success__title {
  font-family: var(--font-display);
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}

/* Разметка приза приезжает из шапки формы как есть: strong — сумма,
   span — подпись. Цвета те же, что в .signup__won-prize. */
.success__prize {
  font-family: "Poppins", var(--font-display), sans-serif;
  margin: 2px 0 0;
  /* Голый текст между strong и span — слово «Bonus» у секторов 4768/4762 */
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.9);
}

.success__prize strong {
  display: block;
  font-size: 28px;
  font-weight: 900;
  color: #f9d047;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.success__prize span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  color: #59c72f;
}

/* Полоска отсчёта. Длительность приходит из form.js через --success-delay,
   иначе анимация и таймер редиректа разъедутся. */
.success__bar {
  width: 100%;
  max-width: 240px;
  height: 4px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.success__bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-green) 0%, #4ffba8 100%);
  transform: scaleX(0);
  transform-origin: left center;
  animation: var(--success-delay, 1800ms) linear forwards success-bar;
}

@keyframes success-bar {
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .success__icon {
    animation: none;
  }
}