/* Общий вид страниц авторизации: вход, регистрация, восстановление пароля.
   Свои классы (auth*) намеренно не пересекаются с .windowLoginIn из main.css —
   там подписи полей строчные, из-за чего поля «съезжали» друг к другу.
   31.07.2026 */

.authPage{ max-width:520px; margin:50px auto 100px; padding:0 10px; }

.authCard{ background:#f5f5f3; border:1px solid #e4e4e0; }
.authCard__head{ padding:28px 30px 22px; border-bottom:1px solid #e4e4e0; background:#fff; }
.authCard__head h1{ margin:0; color:#333; font-size:26px; line-height:1.25; text-align:center; }
.authCard__head h1 + .authSteps{ margin-top:20px; }
.authCard__body{ padding:26px 30px 30px; }

/* шаги (только на восстановлении) */
.authSteps{ display:flex; align-items:center; justify-content:center; }
.authStep{ display:flex; align-items:center; color:#9a9a97; font-size:14px; white-space:nowrap; }
.authStep i{
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; margin-right:8px; border-radius:50%;
    background:#d8d8d4; color:#fff; font-style:normal; font-weight:700; font-size:13px;
    transition:background .25s;
}
.authStep--on{ color:#333; }
.authStep--on i{ background:#27ae60; }
.authStepLine{ flex:0 1 46px; height:2px; margin:0 12px; background:#d8d8d4; transition:background .25s; }
.authStepLine--on{ background:#27ae60; }

.authLead{ margin:0 0 22px; color:#5c5c5c; font-size:15px; line-height:1.55; }

.authField{ margin-bottom:18px; }
.authField label{
    display:block; margin-bottom:7px;
    color:#4a4a4a; font-size:15px; font-weight:700;
}
.authField input{
    display:block; width:100%; box-sizing:border-box;
    padding:11px 13px; font-size:17px;
    font-family:"PT Sans",segoe ui,Arial,Helvetica,sans-serif;
    color:#333; background:#fff; border:1px solid #c9c9c4; border-radius:3px;
    transition:border-color .15s, box-shadow .15s;
}
.authField input::placeholder{ color:#c2c2be; }
.authField input:hover{ border-color:#a9a9a3; }
.authField input:focus{ outline:none; border-color:#27ae60; box-shadow:0 0 0 3px rgba(39,174,96,.15); }

.authInputWrap{ position:relative; }
.authInputWrap input{ padding-right:96px; }
.authEye{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    background:none; border:0; padding:6px 8px;
    color:#1e789b; font-size:14px; font-family:inherit; cursor:pointer;
}
.authEye:hover{ color:#333; text-decoration:underline; }

input.authCodeInput{
    max-width:230px; letter-spacing:12px; text-indent:12px;
    font-size:26px; font-weight:700; text-align:center; color:#27ae60;
}

.authSep{ position:relative; text-align:center; margin:26px 0 20px; }
.authSep:before{ content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:#e0e0dc; }
.authSep span{
    position:relative; display:inline-block; padding:0 12px;
    background:#f5f5f3; color:#8b8b88; font-size:14px;
}

.authSent{
    margin-bottom:24px; padding:16px 18px;
    background:#fff; border:1px solid #d8ecdf; border-left:4px solid #27ae60; border-radius:3px;
}
.authSent__title{ color:#1f7a45; font-size:15px; font-weight:700; margin-bottom:8px; }
.authSent__list{ margin:0; padding:0; list-style:none; }
.authSent__list li{ color:#333; font-size:15px; line-height:1.55; padding-left:18px; position:relative; }
.authSent__list li:before{
    content:''; position:absolute; left:2px; top:9px;
    width:6px; height:6px; border-radius:50%; background:#27ae60;
}
.authSent__list b{ color:#1e789b; }
.authSent__note{ color:#8b8b88; font-size:13px; margin-top:10px; line-height:1.5; }

.authRules{ list-style:none; margin:0 0 4px; padding:0; }
.authRules li{ display:flex; align-items:center; color:#9a9a97; font-size:14px; line-height:1.9; }
.authRules li b{
    display:inline-block; width:16px; height:16px; margin-right:9px; border-radius:50%;
    background:#dededa; position:relative; flex:0 0 auto;
}
.authRules li b:after{
    content:''; position:absolute; left:5px; top:2px;
    width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.authRules li.ok{ color:#1f7a45; }
.authRules li.ok b{ background:#27ae60; }

.authMsg{ font-size:15px; line-height:1.5; margin:2px 0 0; display:none; }
.authMsg--err{ color:#CA3D3D; }
.authMsg--ok{ color:#1f7a45; }
.authMsg a{ color:#1e789b; }

.authBtn{
    display:block; width:100%; margin-top:20px; padding:13px 20px;
    background:#27ae60; border:0; border-bottom:2px solid #1f9952; border-radius:3px;
    color:#fff; font-size:16px; font-weight:700; cursor:pointer;
    font-family:"PT Sans",segoe ui,Arial,Helvetica,sans-serif;
    transition:background .15s;
}
.authBtn:hover{ background:#31c26e; }
.authBtn[disabled]{ background:#bcc7c0; border-bottom-color:#aab5ae; cursor:default; }

.authBusy{ display:none; align-items:center; margin-top:14px; color:#1e789b; font-size:15px; }
.authSpin{
    display:inline-block; width:16px; height:16px; margin-right:10px;
    border:2px solid #cfe3ec; border-top-color:#1e789b; border-radius:50%;
    animation:authSpin .7s linear infinite;
}
@keyframes authSpin{ to{ transform:rotate(360deg); } }

.authFoot{
    margin-top:22px; padding-top:18px; border-top:1px solid #e4e4e0;
    display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center;
    color:#9a9a97; font-size:14px;
}
.authFoot a{ color:#1e789b; }
.authFoot a:hover{ color:#333; }

.authDone{ text-align:center; padding:14px 0 20px; }
.authDone__ico{
    width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
    background:#27ae60; color:#fff; font-size:34px; line-height:64px;
}
.authDone__title{ color:#333; font-size:22px; font-weight:700; margin-bottom:8px; }
.authDone__text{ color:#5c5c5c; font-size:15px; }

.authLinks{ margin-top:22px; text-align:center; font-size:16px; color:#c6c6c2; }
.authLinks a{ color:#1e789b; margin:0 8px; }
.authLinks a:hover{ color:#333; }

@media screen and (max-width:600px){
    .authPage{ margin:24px auto 60px; }
    .authCard__head{ padding:22px 16px 18px; }
    .authCard__head h1{ font-size:21px; }
    .authCard__body{ padding:20px 16px 24px; }
    .authStep{ font-size:12px; }
    .authStep i{ width:21px; height:21px; margin-right:6px; font-size:12px; }
    .authStepLine{ flex-basis:22px; margin:0 8px; }
    input.authCodeInput{ max-width:100%; letter-spacing:10px; font-size:23px; }
}