/* ==========================================================================
   Auth-страницы магазина: /signup/, /login/, /forgotpassword/ (+ set password).
   Единый вид с попапом Tools (components/artistcab/*, tokens: --primary #c01714).
   Шаблоны форм — ядро Webasyst (wa-system/signup, wa-system/login), из темы
   не переопределяются → только этот CSS + auth.custom.js. Подключается из
   signup.html / login.html / forgotpassword.html со своим ?v= (CDN кэширует
   mastershop.custom.css на 4 ч под версией темы).
   Спека: docs/superpowers/specs/2026-09-07-unified-auth-ux-design.md § 6
   ========================================================================== */

.wa-signup-form-wrapper,
.wa-login-form-wrapper,
.wa-forgotpassword-form-wrapper,
.wa-set-password-form-wrapper{
    max-width: 520px;
}

.wa-signup-form-wrapper .wa-field,
.wa-login-form-wrapper .wa-field,
.wa-forgotpassword-form-wrapper .wa-field,
.wa-set-password-form-wrapper .wa-field{
    margin-bottom: 16px;
}

.wa-signup-form-wrapper .wa-name,
.wa-login-form-wrapper .wa-name,
.wa-forgotpassword-form-wrapper .wa-name,
.wa-set-password-form-wrapper .wa-name{
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
}

.wa-signup-form-wrapper .wa-value p,
.wa-login-form-wrapper .wa-value p{
    margin: 0;
}

.wa-signup-form-wrapper .wa-value input[type="text"],
.wa-signup-form-wrapper .wa-value input[type="email"],
.wa-signup-form-wrapper .wa-value input[type="tel"],
.wa-signup-form-wrapper .wa-value input[type="password"],
.wa-login-form-wrapper .wa-value input[type="text"],
.wa-login-form-wrapper .wa-value input[type="email"],
.wa-login-form-wrapper .wa-value input[type="password"],
.wa-forgotpassword-form-wrapper .wa-value input[type="text"],
.wa-set-password-form-wrapper .wa-value input[type="text"],
.wa-set-password-form-wrapper .wa-value input[type="password"]{
    box-sizing: border-box;
    width: 100%;
    padding: 10px 18px;
    border: 1px solid #dcdcdc;
    border-radius: 100px;
    background: #fff;
    font-size: 15px;
    line-height: 1.4;
    color: #000;
}

.wa-signup-form-wrapper .wa-value input:focus,
.wa-login-form-wrapper .wa-value input:focus,
.wa-forgotpassword-form-wrapper .wa-value input:focus,
.wa-set-password-form-wrapper .wa-value input:focus{
    outline: none;
    border-color: #999;
}

.wa-signup-form-wrapper .wa-value input::placeholder,
.wa-login-form-wrapper .wa-value input::placeholder,
.wa-forgotpassword-form-wrapper .wa-value input::placeholder{
    color: #9a9a9a;
    opacity: 1;
}

.wa-signup-form-wrapper .wa-error-msg,
.wa-login-form-wrapper .wa-error-msg,
.wa-forgotpassword-form-wrapper .wa-error-msg,
.wa-set-password-form-wrapper .wa-error-msg{
    display: block;
    margin-top: 5px;
    color: #c01714;
    font-size: 13px;
    font-style: normal;
}

/* Скрытое ядром поле «Подтвердите пароль» — синхронизируется auth.custom.js */
.auth-hidden-field{
    display: none !important;
}

/* Пароль + «показать» */
.auth-password-box{
    position: relative;
    display: block;
}
.auth-password-box input{
    padding-right: 44px !important;
}
.auth-eye{
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #6b6b6b;
    padding: 0;
    margin: 0;
}
.auth-eye::before{
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg>") center / contain no-repeat;
}
.auth-eye.is-on::before{
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/><line x1='1' y1='1' x2='23' y2='23'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/><line x1='1' y1='1' x2='23' y2='23'/></svg>");
}
.auth-eye:hover{ color: #000; }
.auth-eye:focus-visible{ outline: 2px solid #c01714; outline-offset: -2px; border-radius: 100px; }

/* Кнопки */
.wa-signup-form-wrapper .wa-buttons-wrapper input[type="submit"],
.wa-login-form-wrapper .wa-buttons-wrapper input[type="submit"],
.wa-forgotpassword-form-wrapper .wa-forgotpassword-button input[type="submit"],
.wa-set-password-form-wrapper .wa-buttons-wrapper input[type="submit"],
.auth-btn{
    display: inline-block;
    border: 0;
    border-radius: 100px;
    padding: 12px 28px;
    background: #c01714;
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    text-transform: none;
}
.wa-signup-form-wrapper .wa-buttons-wrapper input[type="submit"]:hover,
.wa-login-form-wrapper .wa-buttons-wrapper input[type="submit"]:hover,
.wa-forgotpassword-form-wrapper .wa-forgotpassword-button input[type="submit"]:hover,
.wa-set-password-form-wrapper .wa-buttons-wrapper input[type="submit"]:hover,
.auth-btn:hover{
    background: #940402;
    color: #fff;
}
.auth-btn--outline{
    background: #fff;
    color: #000;
    border: 1px solid #dcdcdc;
}
.auth-btn--outline:hover{ background: #f0f0f0; color: #000; }
.auth-btn--outline:disabled{ opacity: .5; cursor: default; background: #fff; }
.auth-btn--ghost{
    background: transparent;
    color: #4f4f50;
    text-decoration: underline;
    padding-left: 8px;
    padding-right: 8px;
}
.auth-btn--ghost:hover{ background: transparent; color: #000; }

.wa-forgotpassword-form-wrapper .wa-forgotpassword-button{
    margin-top: 12px;
}

.wa-signup-form-wrapper .wa-login-url,
.wa-login-form-wrapper .wa-signup-url,
.wa-forgotpassword-form-wrapper .wa-login-url,
.wa-field-remember-me label{
    margin-top: 12px;
    font-size: 14px;
    color: #4f4f50;
}
.wa-login-form-wrapper .wa-login-forgotpassword-url{
    display: inline-block;
    margin-top: 8px;
    font-size: 14px;
    color: #4f4f50;
}

/* Сообщения ядра (восстановление пароля: «инструкция отправлена») */
.wa-forgotpassword-form-wrapper .wa-info-messages-wrapper{
    padding: 24px;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    background: #fff;
    text-align: center;
    font-size: 14px;
    color: #4f4f50;
}
.wa-forgotpassword-form-wrapper .wa-info-messages-wrapper > a{
    display: inline-block;
    margin-top: 12px;
}

/* Карточка состояний: «Подтвердите email», приветствие */
.auth-panel,
.auth-welcome{
    max-width: 520px;
    padding: 24px;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    background: #fff;
    text-align: center;
}
.auth-panel__icon{ font-size: 34px; line-height: 1; color: #c01714; }
.auth-panel__title,
.auth-welcome__title{ margin: 12px 0 0; font-size: 18px; font-weight: 600; }
.auth-panel__text,
.auth-panel__hint,
.auth-panel__note,
.auth-welcome__text{ margin: 8px 0 0; color: #4f4f50; font-size: 14px; }
.auth-panel__note.is-error{ color: #c01714; }
.auth-panel__actions,
.auth-welcome__actions{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}
.auth-panel__link{ font-size: 14px; color: #4f4f50; text-decoration: underline; }
.auth-panel__link:hover{ color: #000; }
@media (min-width: 640px){
    .auth-welcome__actions{ flex-direction: row; justify-content: center; flex-wrap: wrap; }
}

/* Перебиваем закэшированный (CDN, 4 ч) блок 2026-08-28 из mastershop.custom.css,
   который подключён в самом низу layout и потому выигрывает по порядку. */
#page .wa-buttons-wrapper input[type="submit"],
#page .wa-forgotpassword-button input[type="submit"],
#page .auth-btn{
    background: #c01714;
}
#page .wa-buttons-wrapper input[type="submit"]:hover,
#page .wa-forgotpassword-button input[type="submit"]:hover,
#page .auth-btn:hover{
    background: #940402;
}
#page .auth-btn--outline{ background: #fff; }
#page .auth-btn--outline:hover{ background: #f0f0f0; }
#page .auth-btn--ghost,
#page .auth-btn--ghost:hover{ background: transparent; }
#page .wa-error-msg{ color: #c01714; }

/* Базовый CSS темы ограничивает ширину input[type=text]; телефон — type=tel,
   и правило его не ловит. Выравниваем все поля по ширине обёртки. */
#page .wa-value input[type="text"],
#page .wa-value input[type="email"],
#page .wa-value input[type="tel"],
#page .wa-value input[type="password"]{
    width: 100%;
    max-width: 100%;
}

/* Мобильный: кнопка на всю ширину (как в попапе tools) */
@media (max-width: 639px){
    #page .wa-buttons-wrapper input[type="submit"],
    #page .wa-forgotpassword-button input[type="submit"],
    #page .wa-set-password-form-wrapper .wa-buttons-wrapper input[type="submit"]{
        display: block;
        width: 100%;
    }
}

/* Тема красит кнопку восстановления серым с !important
   (.wa-forgotpassword-button input[type=submit]) — перебиваем тем же оружием. */
#page .wa-forgotpassword-button input[type="submit"]{
    background: #c01714 !important;
    color: #fff !important;
}
#page .wa-forgotpassword-button input[type="submit"]:hover{
    background: #940402 !important;
}
#page .wa-forgotpassword-button{
    display: block;
}

/* Десктоп: контентная колонка широкая, а форма/карточка узкие — центрируем,
   иначе справа остаётся пустое поле (замечание владельца 2026-09-07). */
#page .wa-signup-form-wrapper,
#page .wa-login-form-wrapper,
#page .wa-forgotpassword-form-wrapper,
#page .wa-set-password-form-wrapper,
#page .auth-panel,
#page .auth-welcome{
    margin-left: auto;
    margin-right: auto;
}
#page > h1,
#page > .page-h1,
#page .wrap-content > h1{
    text-align: center;
}
#page .wrap-content{
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Подсказка «ссылка уже использована» над формой входа */
.auth-hint{
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    background: #faf7f7;
    text-align: center;
}
.auth-hint__title{
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}
.auth-hint__text,
.auth-hint__note{
    margin: 6px 0 0;
    font-size: 14px;
    color: #4f4f50;
}
.auth-hint__note.is-error{ color: #c01714; }
.auth-hint__resend{
    margin-top: 12px;
}

/* Тема режет поля формы регистрации: max-width 400px !important
   (mastershop.shop.min.css) — из-за этого поля уже карточки, а кнопка «показать
   пароль» повисала справа от поля. Выравниваем всё по ширине карточки. */
#page .wa-value input[type="text"],
#page .wa-value input[type="email"],
#page .wa-value input[type="tel"],
#page .wa-value input[type="password"]{
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 18px !important;
}
#page .auth-password-box input[type="text"],
#page .auth-password-box input[type="password"]{
    padding-right: 44px !important;
}

/* На /login/ тема ограничивает контейнер поля (max-width 450px !important) —
   поля были уже карточки. */
#page .wa-field,
#page .wa-value{
    width: 100% !important;
    max-width: 100% !important;
}

/* Экран приветствия после подтверждения email: что получил клиент + куда дальше */
.auth-welcome{
    max-width: 640px;
    text-align: left;
}
.auth-welcome .auth-panel__icon,
.auth-welcome__title,
.auth-welcome__text{
    text-align: center;
}
.auth-perks{
    list-style: none;
    margin: 16px auto 0;
    padding: 0;
    max-width: 520px;
    font-size: 14px;
    color: #000;
}
.auth-perks li{
    position: relative;
    padding: 6px 0 6px 28px;
    line-height: 1.4;
}
.auth-perks li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #c01714;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 10px no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 10px no-repeat, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.auth-welcome__actions{
    margin-top: 22px;
}
.auth-welcome__links{
    margin-top: 14px;
    text-align: center;
    font-size: 14px;
    color: #4f4f50;
}
.auth-welcome__links a{
    color: #4f4f50;
    text-decoration: underline;
}
.auth-welcome__links a:hover{ color: #000; }
.auth-welcome__links span{ margin: 0 8px; }

/* Длинная подпись кнопки на мобильном переносится — держим по центру */
.auth-btn{
    text-align: center;
    white-space: normal;
}