/* Overlay that holds the sign-up form (shown after the wheel spin).
   The card itself (.signup) is styled in index.css — keep the slot transparent. */
.overlay-form {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.65);
  box-sizing: border-box;
  overflow-y: auto;
  padding: 20px;
  display: none;
}

/* Центрируем слот через margin: auto во flex-контейнере, а не top: 50% +
   translate(-50%). При absolute-центрировании карточка выше экрана уезжает
   верхом за нулевую точку скролла: заголовок, крестик и поле email становятся
   недоступны. margin: auto центрирует, пока место есть, и честно отдаёт
   карточку скроллу, когда его не хватает. display: flex ставит openSignupForm. */
.overlay-form .signup-slot {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  /* index.css на ширине >= 1019px центрирует слот через top/left/transform —
     гасим это явно, иначе карточку уводит вверх на половину её высоты. */
  position: static;
  top: auto;
  left: auto;
  transform: none;
  margin: auto;
}

@media (max-width: 1018px) {
  .overlay-form .signup-slot {
    max-width: min(440px, 92vw);
  }
}

/* "You won" prize banner above the Sign Up title */
.signup__won {
  text-align: center;
  background: linear-gradient(
    180deg,
    rgba(255, 218, 69, 0.16) 0%,
    rgba(255, 218, 69, 0.04) 100%
  );
  border: 1px solid rgba(255, 218, 69, 0.45);
  border-radius: 12px;
  padding: 10px 14px 12px;
  margin-bottom: 16px;
}

.signup__won-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #ffda45;
}

.signup__won-prize {
  margin: 4px 0 0;
  font-family: "Poppins", var(--font-display), sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
}

.signup__won-prize strong {
  color: #ffda45;
}

.signup__won-prize span {
  color: #ff6da7;
}

.signup__won-note {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* -------------------- Sign-up API: errors and captcha -------------------- */

/* Ошибки формы. Место под каждую зарезервировано заранее: блок всегда в
   потоке, но пока ошибки нет — он полностью прозрачный и читается как обычный
   отступ. Приходит ошибка — она занимает ровно этот отступ, поэтому форма не
   меняет высоту, а поля и кнопка под ней не съезжают вниз. */
.field__error,
.form__error {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: transparent;
}

/* Ровно одна строка — столько занимает типичная ошибка под полем */
.field__error {
  min-height: 1.35em;
}

/* У пароля ошибка уехала в тултип, но пустой слот под полем оставляем: без
   него расстояние между инпутами было бы разным — под email и currency место
   под ошибку зарезервировано, а под паролем нет. */
.field--password::after {
  content: "";
  display: block;
  /* Кегль тот же, что у .field__error: min-height задан в em, и без этого
     слот считался бы от 16px поля и был бы выше настоящей строки ошибки. */
  font-size: 12px;
  line-height: 1.35;
  min-height: 1.35em;
}


.field__error--visible,
.form__error--visible {
  color: #ff6b6b;
}

/* Нижнее красное поле: рамка и фон тоже проявляются только вместе с ошибкой.
   min-height считан под однострочную ошибку: 16px строки + 20px padding + рамка. */
.form__error {
  box-sizing: border-box;
  min-height: 38px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  text-align: center;
}

.form__error--visible {
  border-color: rgba(255, 107, 107, 0.45);
  background: rgba(255, 107, 107, 0.1);
}
/* Узкие экраны: самые длинные сообщения (err.emailInvalid и его аналоги в
   it/es/pt/el) переносятся на вторую строку, когда карточка уже ~370px, а
   нижнее красное поле — примерно до 400px. Резервируем под них вторую строку,
   иначе форма всё-таки дёрнется. Пороги замерены по всем пяти языкам; terms и
   captcha в строку влезают везде, их не трогаем.
   Слоты трёх инпутов поднимаем вместе, чтобы промежутки остались равными. */
@media (max-width: 410px) {
  .field > .field__error,
  .field--password::after {
    min-height: 2.7em;
  }
}

@media (max-width: 430px) {
  .form__error {
    min-height: 55px;
  }
}

.form__error--success {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.45);
  background: rgba(74, 222, 128, 0.1);
}

.captcha {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.captcha:not(:empty) {
  min-height: 65px;
}

.submit--loading {
  opacity: 0.65;
  pointer-events: none;
}

/* Крестик формы. Показывается только когда форму открыли кнопкой Sign Up:
   после выигрыша закрывать нечего — приз уже зафиксирован. */
.signup {
  position: relative;
}

.signup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}

.signup__close:hover {
  background: rgba(0, 0, 0, 0.6);
}


/* ------------------------- подсказка по паролю ---------------------------- */

/* Требования к паролю — длинный текст в три строки, под полем он съедал треть
   формы. Держим его в тултипе у знака вопроса: по наведению это просто
   справка, а при ошибке ввода тултип открывается сам и знак краснеет.
   Тултип абсолютный, так что появление ошибки высоту формы не меняет. */
.pw-hint {
  position: absolute;
  top: 50%;
  right: 42px;
  transform: translateY(-50%);
  line-height: 0;
}

/* Пароль теперь делит правый край с глазом — освобождаем место под оба */
.input--with-eye {
  padding-right: 68px;
}

.pw-hint__btn {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.pw-hint__btn:hover {
  color: #fff;
  border-color: #fff;
}

.pw-hint__bubble {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  right: -8px;
  z-index: 3;
  width: max-content;
  max-width: 250px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: #241127;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  font-size: 11px;
  line-height: 1.4;
  text-align: left;
  color: rgba(255, 255, 255, 0.8);
  white-space: normal;
  /* Пузырь висит над полем email — сквозь него должно кликаться */
  pointer-events: none;
}

/* Хвостик пузыря смотрит на знак вопроса */
.pw-hint__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 12px;
  border: 6px solid transparent;
  border-top-color: #241127;
}

.pw-hint:hover .pw-hint__bubble,
.pw-hint__btn:focus-visible + .pw-hint__bubble,
.pw-hint--open .pw-hint__bubble {
  display: block;
}

/* Ошибка ввода: знак краснеет, тултип держится открытым и показывает только
   текст ошибки — правила в нём в этот момент уже лишние. */
.pw-hint--error .pw-hint__btn {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.7);
}

.pw-hint--error .pw-hint__rules {
  display: none;
}

.pw-hint--error .pw-hint__bubble {
  border-color: rgba(255, 107, 107, 0.45);
}

/* Ошибка пароля живёт в тултипе — там она ничего не двигает, так что место
   под неё резервировать не надо: пустая строка только раздувала бы пузырь. */
.pw-hint .field__error {
  display: none;
  min-height: 0;
  margin: 0;
}

.pw-hint .field__error--visible {
  display: block;
}