/* ==========================================================================
   AUTH / LOGIN FORM (extracted from main.css)
   Moved out of main.css to keep global styles clean.
   Includes compact email-code UI (like call-auth).
   ========================================================================== */

/* Весь блок формы авторизации */
#auth_phone_conteiner{
    margin:auto;
    border-radius:5px;
    box-shadow:1px 1px 10px #000;
    background-color:var(--cl_row_catalog,#d2f2ff)!important;
    padding:20px;

    /* компактнее + дружелюбно к мобиле */
    max-width:420px;
    width:calc(100% - 30px);
    box-sizing:border-box;
}

/* Заголовок формы авторизации */
.authform_header{
    position:relative;
    text-align:center;
    font-size:40px;
    color:var(--cl_form_text,black)!important;
    margin:0 0 10px 0;
}
.authform_header h1{ margin:0; font-size:inherit; line-height:1.1; }

/* Поля формы авторизации */
.auth_fields{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    width:100%;
    flex-direction:column;
    align-content:center;
}

/* Поля ввода */
.auth_fields input{
    text-decoration:none;
    position:relative;
    width:90%;
    display:block;
    margin:9px auto;
    font-size:18px;
    color:black;
    padding:8px;
    background:white;
    border:none;
    text-align:center;
    outline:none;
    font-weight:bold;
    transition:all .2s ease-in-out;
    box-sizing:border-box;
}

/* Телефон */
#txt_auth_phone{
    max-width:245px;
    font-weight:normal;
}

/* Кнопки */
.auth_fields input[type="button"]{
    background-color:var(--cl_form_button,#ffc838);
    color:black;
    font-weight:bold;
}
.auth_fields input[type="button"]:not([disabled]):active,
.auth_fields input:not([type='button']):focus{
    outline:none;
    box-shadow:3px 3px 10px #333;
    background:#f1fbff;
    opacity:.85;
}

#but_auth_phone,#but_registration{
    max-width:243px;
    width:-webkit-fill-available;
    width:150px;
}
#but_auth_phone:disabled,#but_registration:disabled{
    cursor:not-allowed;
    opacity:.4;
}

/* Блок кнопок формы */
.block_buttons{
    display:flex;
    justify-content:center;
    flex-direction:column;
}

/* Надписи-ссылки */
#goto_in_password,#goto_in_restore{
    text-align:center;
    cursor:pointer;
    width:fit-content;
    align-self:center;
}
#goto_in_password:hover,#goto_in_restore:hover{
    text-decoration:underline var(--cl_hover_link,#1a97d5);
    color:var(--cl_hover_link,#1a97d5);
}

/* -------- Password mode -------- */
.block_password{
    display:flex;
    align-items:center;
    justify-content:center;
    width:80%;
    margin: 0 auto;
}
#txt_auth_password{ font-weight:normal; max-width:245px; }
#close_block_passwords{
    align-self:center;
    cursor:pointer;
    font-weight:bold;
    line-height:1;
    padding:2px 6px;
    user-select:none;
}
#close_block_passwords:hover{ color:var(--cl_hover_link,#1a97d5); }

/* Отображение/скрытие пароля */
.pass_wrap{ position: relative; display: inline-block; }
.pass_wrap input{padding-right: 35px; /* место под глаз */}
/* Кнопка-глаз */
.pass_eye{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: .75;
    -webkit-tap-highlight-color: transparent; /* убрать серый флэш */
    touch-action: manipulation;
}
.pass_eye{
    text-decoration: none !important;
    border: 0;
    padding: 0;
    line-height: 1;
    box-shadow: none;
}

/* на всякий случай — если там вдруг <a> вместо <button> */
.pass_eye:hover,
.pass_eye:focus,
.pass_eye:active{
    text-decoration: none !important;
    outline: none;
}
.pass_eye:focus-visible{
    outline: 2px solid rgba(0,0,0,.25);
    outline-offset: 2px;
}
.pass_eye:hover{ opacity: 1; }
/* Простая “иконка” через CSS (можно заменить на svg/картинку) */
.pass_eye::before{
    content: "👁";
    display: block;
    font-size: 18px;
    line-height: 26px;
    text-align: center;
}
/* Перечёркнутый глаз (когда пароль ПОКАЗАН или СКРЫТ — выбери логику) */
.pass_eye.is_on::after{
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    top: 55%;
    height: 2px;
    background: #333;
    transform: translateY(-50%) rotate(-35deg);
    border-radius: 2px;
    opacity: .85;
}

/* -------- Call mode -------- */
.auth_fields #block_accept{
    justify-content:center;
    align-items:center;
    gap:10px;
}

/* -------- Email code mode (compact) -------- */
.block_email{
    width:100%;
    margin-top:6px;
    position:relative;
    max-width:420px;
    box-sizing:border-box;
}
.block_email .email_row{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    width:80%;
    margin: 0 auto;
}

/* Поле 6-значного кода */
#txt_auth_email_code{
    width:190px;
    max-width:135px;
    font-weight:normal;
}

/* Кнопка подтверждения */
#but_auth_email_verify{
    width:110px;
    max-width:160px;
    cursor: pointer;
}

/* Крестик закрытия email блока (не раздувает ряд) */
#close_block_email{
    position:absolute;
    right:15px;
    top:20px;
    width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-weight:bold;
    line-height:1;
    user-select:none;
}
#close_block_email:hover{ color:var(--cl_hover_link,#1a97d5); }

/* Метаданные (куда отправлено / таймер / попытки) */
#block_email_accept.email_meta{
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:2px;
    font-size:12px;
    line-height:1.2;
    max-width:200px;
}
#email_sent_to{
    max-width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.email_meta_line{
    display:flex;
    align-items:center;
    gap:10px;
    font-variant-numeric:tabular-nums;
}
#watch_timer_email{ min-width:46px; text-align:center; font-size: 16px; }
#email_attempts_left{ white-space:nowrap; }

/* Режим скрытия блоков */
.hide_mode {display: none;}

/* 2FA TOTP */
.auth_login_error{
    margin:0 0 12px 0;
    padding:10px 12px;
    border-radius:8px;
    background:rgba(220,53,69,.10);
    color:#842029;
    font-size:14px;
    text-align:center;
}
.block_totp{
    width:100%;
    margin-top:8px;
    padding:12px;
    border:1px dashed rgba(0,0,0,.15);
    border-radius:12px;
    background:rgba(0,0,0,.02);
    box-sizing:border-box;
}
.totp_header{
    text-align:center;
    font-size:18px;
    font-weight:bold;
    margin-bottom:6px;
}
.totp_hint{
    text-align:center;
    font-size:13px;
    opacity:.85;
    margin-bottom:10px;
}
.totp_row{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin:10px 0;
}
.totp_row input[type="text"],
.totp_row input[type="button"]{
    max-width:245px;
}
#but_auth_recovery_verify {font-size: 16px;}
#txt_auth_totp_code,
#txt_auth_recovery_code{
    font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-variant-numeric:tabular-nums;
}
#txt_auth_totp_code{ letter-spacing:.18em; font-size: 16px; }
.totp_row--timer{ margin-top:0; }
#watch_timer_totp{
    min-width:72px;
    text-align:center;
    font-weight:bold;
    font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.totp_actions{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:center;
    margin-top:8px;
}
#goto_totp_recovery,
#goto_totp_code,
#close_block_totp{
    text-align:center;
    cursor:pointer;
    width:fit-content;
    align-self:center;
}
#goto_totp_recovery:hover,
#goto_totp_code:hover,
#close_block_totp:hover{
    text-decoration:underline var(--cl_hover_link,#1a97d5);
    color:var(--cl_hover_link,#1a97d5);
}

/* МОБИЛЬНАЯ ВЕРСИЯ */
html.is-mobile #auth_phone_conteiner{ padding:16px; width:calc(100% - 20px); }
html.is-mobile .authform_header{ font-size:32px; }
html.is-mobile .auth_fields input{ font-size:16px; }
html.is-mobile #txt_auth_email_code{ width:170px; }
html.is-mobile #but_auth_email_verify{ width:100px; }
html.is-mobile #close_block_passwords{padding: 2px 0 2px 14px;}