/* ===================================================================
   Узкие страницы-формы: вход, регистрация, сброс и смена пароля, ввод
   IP для раскрутки, добавление сервера, экраны подтверждения, правила
   оплаты и страницы ошибок.

   Раскладка одна: панель на 460px по центру экрана. Поля, подписи,
   кнопки и сообщения об ошибках берутся из global.css.

   Значения — только из tokens.css.
   =================================================================== */

.authentication,
.boost {
    display: flex;
    justify-content: center;
}

/* Поверхность, рамку, радиус и внутренний отступ даёт .card из
   global.css — здесь только ширина панели. Своего padding у панели нет:
   32px были бы третьим значением внутреннего отступа карточки на сайте,
   где их ровно два. */
.boost-box,
.authorization,
.registration,
.new-password {
    width: 100%;
    max-width: var(--w-form);
}

/* Заголовок панели — по центру, содержимое формы — по левому краю.
   Раньше центрирование стояло на всей панели: подписи полей уезжали
   влево из-за собственного text-align, а ссылки под формой оставались
   по центру, и колонка выглядела рассыпанной. */
.boost-box__title,
.authorization__title,
.registration__title,
.new-password__title {
    margin: 0 0 var(--sp-6);
    font-size: var(--fs-display);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-snug);
    line-height: var(--lh-tight);
    text-align: center;
}

.authorization__form,
.registration__form,
.new-password__form,
.boost-box__form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

/* Внутри формы поля уже расставлены gap-ом — свой отступ группе не нужен. */
.authorization__form .field + .field,
.registration__form .field + .field,
.new-password__form .field + .field,
.boost-box__form .field + .field {
    margin-top: 0;
}

.authorization__input,
.registration__input,
.new-password__input {
    position: relative;
    display: flex;
    align-items: center;
}

.authorization__input--field,
.registration__input--field,
.new-password__input--field {
    /* Место под кнопку-глаз, чтобы текст не заезжал под неё. */
    padding-right: var(--sp-9);
}

/* ---- Показать/скрыть пароль ---- */

.password-toggle-button {
    position: absolute;
    right: var(--sp-1);
    top: 50%;
    transform: translateY(-50%);
    width: var(--control-h-xs);
    height: var(--control-h-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--r-sm);
    background: none;
    cursor: pointer;
}

.password-toggle-icon {
    display: block;
    width: var(--icon-sm);
    height: var(--icon-sm);
    opacity: 0.5;
    transition: opacity var(--dur) var(--ease);
}

.password-toggle-button:hover .password-toggle-icon {
    opacity: 1;
}

/* ---- Кнопка отправки ----
   Размер задаёт .button--lg + .button--block из global.css. Здесь остался
   только отступ от последнего поля: раньше каждая из пяти форм заводила
   себе и высоту, и ширину заново. */

.boost-box__form > .button,
.authorization__form > .button,
.registration__form > .button,
.new-password__form > .button,
.add-server-btn-wrapper {
    margin-top: var(--sp-2);
}

.add-server-btn-wrapper {
    width: 100%;
}

.success-box .button,
.payment-success .button {
    margin-top: var(--sp-1);
}

/* ---- Ссылки под формой ---- */

.registration__login,
.authorization__registration,
.authorization__password {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-small);
    color: var(--text-4);
    text-align: center;
}

.authorization__password + .authorization__registration {
    margin-top: var(--sp-2);
}

.registration__login-link,
.authorization__registration-link,
.authorization__password-link {
    color: var(--accent);
    font-weight: var(--fw-medium);
}

.registration__login-link:hover,
.authorization__registration-link:hover,
.authorization__password-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ------------------------------------------------------------------
   Экраны подтверждения: письмо отправлено, пароль изменён, оплата
   ------------------------------------------------------------------ */

.success-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.success-box__icon {
    width: var(--box-xl);
    height: var(--box-xl);
    margin-bottom: var(--sp-5);
}

.success-box .boost-box__title {
    margin-bottom: var(--sp-3);
}

.success-box__text {
    margin: 0 0 var(--sp-6);
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    color: var(--text-3);
}

.payment-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
    text-align: center;
}

.payment-success__text {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    color: var(--text-3);
}

/* ------------------------------------------------------------------
   Добавление сервера: подтверждение прав
   ------------------------------------------------------------------ */

.new-server__form-description {
    margin: 0 0 var(--sp-5);
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    color: var(--text-3);
}

.new-server__confirmation {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

/* ------------------------------------------------------------------
   Правила оплаты
   ------------------------------------------------------------------ */

.payment-rules {
    max-width: var(--w-narrow);
    margin-inline: auto;
}

.payment-rules__block {
    width: 100%;
    margin-bottom: var(--sp-3);
}

.payment-rules__text {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    color: var(--text-2);
}

.payment-rules__list {
    list-style: none;
    padding: 0;
    margin: var(--sp-3) 0 0;
}

.payment-rules__list-item {
    position: relative;
    padding-left: var(--sp-5);
    margin-bottom: var(--sp-2);
    font-size: var(--fs-body);
    line-height: var(--lh-snug);
    color: var(--text-2);
}

.payment-rules__list-item:last-child {
    margin-bottom: 0;
}

/* Маркер списка нейтральный. Жёлтая точка перед каждой строкой на
   странице правил давала два десятка акцентных пятен подряд. */
.payment-rules__icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-5);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
}

.payment-rules__icon {
    height: var(--icon-lg);
    width: auto;
    opacity: 0.75;
}

/* ------------------------------------------------------------------
   Страницы ошибок
   ------------------------------------------------------------------ */

.error {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: var(--sp-8) var(--sp-9);
}

.error__number {
    margin: 0 0 var(--sp-2);
    /* Нейтральный, а не акцент. 88px жёлтым — самое крупное жёлтое пятно на
       сайте, и доставалось оно ошибке: акцент помечает главное действие,
       текущее состояние и купленное место, а номер 404 — ни то, ни другое,
       ни третье. Заметности ему хватает кегля. */
    color: var(--text-3);
    font-size: var(--fs-mega);
    /* Своих начертаний Montserrat у нас четыре — 400/500/600/700;
       на 800 браузер рисовал синтетический жирный. */
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

.error__title {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-display);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-snug);
}

.error__description {
    max-width: var(--measure-sm);
    margin: 0 0 var(--sp-6);
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    color: var(--text-3);
}

.error__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
}

/* ==================================================================
   Адаптив
   ================================================================== */

@media (max-width: 768px) {
}

@media (max-width: 480px) {
    .new-server__confirmation {
        flex-wrap: wrap;
    }

    .error__actions > * {
        width: 100%;
    }
}