.custom-auth-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 9999;
    padding: 64px 100px;
}
.modal-inner {
    background: #000;
    color: #fff;
    width: 100%;
    max-width: 420px;
    max-width: 564px;
    height: 100%;
    border-radius: 40px;
    padding: 32px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
div.screen {
    max-width: 410px;
}
.modal-inner a {
    text-align: center;
    color: #FAFF00; text-decoration: none; display: block; font-size: 14px;
}
.modal-inner a:hover{
    color: #FAFF00;
}
#to-recover {
    text-align: left;
}
#back-to-main-from-pass{
    margin: 24px 0;
}
#back-to-main-from-recover {
    margin-top: 24px;
}
.modal-close {
    position: absolute; /*top: 15px; right: 20px; font-size: 28px; cursor: pointer; color: #fff; line-height: 1;*/
    cursor: pointer;
    width: 3.22108346vw;
  height: 3.22108346vw;
  background: url(/live-auth-close.svg) no-repeat center / contain;
  top: -2.48901903vw;
  right: -2.48901903vw;
}
.modal-title { display: block;font-size: 32px; font-weight: 600; text-align: center; margin-bottom: 30px; text-transform: none;}
.authuserphone-consent, .authuserphone-consent a, .checkboxes, .checkboxes a, .code-timeout{
    text-align: left;
    line-height: 1;
    font-size: 12.8px;
    margin: 24px 0 14px;
}
.authuserphone-consent a, .checkboxes a, .code-text a {
    display: contents;
}
.phone-field, .input-field {
    position: relative; margin-bottom: 20px;
}
.phone-field input, .input-field input {
    width: 100%; padding: 18px 12px 6px; background: #fff; color: #000; border: none; border-radius: 12px; font-size: 17px;
}
.input-label {
    font-family: 'Normalidad UltraExtended', sans-serif;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000; pointer-events: none; font-weight: 900;
}
.flag {
    position: absolute; top: 14px; left: 18px; width: 28px; height: 20px; background: url('/live-auth-ru.png') center/cover; border-radius: 2px;
}
.toggle-pass {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: calc(50% - 12.5px);
    opacity: 0.3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 40px;
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
    transform: translate(-50%, );
}
.toggle-pass:after {
    content: '';
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDMiIGhlaWdodD0iNDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00MC41NiAyLjQ0YTEuNSAxLjUgMCAwMTAgMi4xMmwtNy40MzcgNy40MzhjMy41OTUgMS42NjUgNi43NzMgNC4yMTEgOS4xMTcgNy42NTlhMS41IDEuNSAwIDAxLS4wMjMgMS43MmMtNi4zMzcgOC44MDItMTcuNzggMTIuMjQzLTI3Ljg3NSA5LjQwMkw1LjA2IDQwLjA2MWExLjUgMS41IDAgMDEtMi4xMjItMi4xMjJsOC4yNjctOC4yNjdjLTMuOTQ3LTEuNjkxLTcuNTYtNC40My0xMC40MTEtOC4yOGExLjUgMS41IDAgMDEuMDM0LTEuODI5YzUuMzE3LTYuNjQ2IDEzLjM5NS05LjkzOCAyMS4yMzQtOS45MzggMi43MTcgMCA1LjQyNi4zOTYgNy45OTUgMS4xOTVsOC4zODEtOC4zOGExLjUgMS41IDAgMDEyLjEyMiAwek0yNy42MTkgMTMuMjZhMjQuMjc3IDI0LjI3NyAwIDAwLTUuNTU1LS42MzVjLTYuNjY3IDAtMTMuNDU0IDIuNjU1LTE4LjEzMiA3LjkxMiAyLjY3MSAzLjI1MiA2IDUuNTA3IDkuNTkgNi44MmwxNC4wOTctMTQuMDk2ek0xNi44MyAyOC4yOTJjOC4xNDggMS42NSAxNi45NzktMS4xNTQgMjIuMzA0LTcuODEzLTIuMTY1LTIuODItNS4wNDQtNC44OTQtOC4yOTEtNi4yTDE2LjgzIDI4LjI5MnoiIGZpbGw9IiMwMDAiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIyIDI1LjVhNC41IDQuNSAwIDEwMC05IDQuNSA0LjUgMCAwMDAgOXptMCAyLjVhNyA3IDAgMTAwLTE0IDcgNyAwIDAwMCAxNHoiIGZpbGw9IiMwMDAiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQxLjIzLjY5NmEyLjUgMi41IDAgMDEuMDc0IDMuNTM1bC0zNS41IDM3YTIuNSAyLjUgMCAxMS0zLjYwOC0zLjQ2MmwzNS41LTM3YTIuNSAyLjUgMCAwMTMuNTM1LS4wNzN6IiBmaWxsPSIjZmZmIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00MS4wMzguOTE4YTEuNSAxLjUgMCAwMS4wNDQgMi4xMmwtMzUuNSAzN2ExLjUgMS41IDAgMDEtMi4xNjQtMi4wNzZsMzUuNS0zN2ExLjUgMS41IDAgMDEyLjEyLS4wNDR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 19px;
    height: 22px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
.toggle-pass:hover{
    opacity: 1;
}
.toggle-pass.visible {
    opacity: 1;
}
.toggle-pass.visible::after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDMiIGhlaWdodD0iMjMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjkzIDExLjUzN2M5LjM0NCAxMS4zNzQgMjYuNzIxIDEwLjU0NyAzNS4yMDQtLjA1OS0zLjk4Ny01LjE5NS0xMC4zOTQtNy44NTMtMTcuMDcyLTcuODUzLTYuNjY2IDAtMTMuNDUzIDIuNjU1LTE4LjEzMSA3LjkxMnpNMjIuMDY0LjYyNWM3LjgzNiAwIDE1LjU5NyAzLjI5NiAyMC4xNzcgMTAuMDMxYTEuNSAxLjUgMCAwMS0uMDIzIDEuNzJjLTkuNTczIDEzLjI5Ny0zMC43OTcgMTQuMzYtNDEuNDIyLjAxN2ExLjUgMS41IDAgMDEuMDM0LTEuODNDNi4xNDYgMy45MTcgMTQuMjI0LjYyNSAyMi4wNjMuNjI1eiIgZmlsbD0iIzAwMCIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjIgMTYuNWE0LjUgNC41IDAgMTAwLTkgNC41IDQuNSAwIDAwMCA5em0wIDIuNWE3IDcgMCAxMDAtMTQgNyA3IDAgMDAwIDE0eiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
}
.yellow-btn {
    width: 100%; background-color: #FAFF00; color: #000; border: none; height: 54px; border-radius: 6px;
    font-size: 18px; font-weight: 600; cursor: pointer; margin-top: 10px; font-family: 'Normalidad UltraExtended', sans-serif;
        -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, opacity 0.3s ease-in-out;
    -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, opacity 0.3s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, opacity 0.3s ease-in-out;
}
.yellow-btn:disabled { background-color: #ccc; cursor: not-allowed; }
.yellow-btn:hover {
    background-color: #faff60;
}

.links { text-align: center; margin-top: 25px; }
.links a { color: #FAFF00; text-decoration: none; display: block; margin: 8px 0; font-size: 14px;  margin-bottom: 24px;}

.code-text { text-align: left; font-size: 14px; margin: 16px 0; line-height: 1.4; }
.code-text span:not(#code-phone) {
    font-weight: 900;
    font-size: 18px;
    display: block;
    margin-bottom: 24px;
}
#sms-code { width: 100%; 
    text-align: left; 
    font-size: 30px; 
    font-weight: 700;
    letter-spacing: 8px; 
    padding: 2px 12px;
    margin-bottom: 14px;
    border: 2px solid #d9dcde;
    border-radius: 6px;
    height: 54px;
    text-align: center;
}
#sms-code:hover,#sms-code:focus, #sms-code:not(:placeholder-shown) {
    border-color: #338eef; 
}
#new-code, #code-timeout{
    margin-top: 24px;
    text-align: center;
}
#code-timeout {
    line-height: 1;
    font-size: 14px;
}
.authuserphone-enter-smscode__oferta {
    font-size: 12.8px;
    line-height: 1;
    text-align: center;
    margin-top: 24px;
}
.authuserphone-enter-smscode__oferta a {
    display: contents;
}
.btn-verify-code, #btn-register {
    margin-bottom: 24px;
}
.checkboxes label { display: block; margin: 12px 0; font-size: 13px; line-height: 1.3; }
.checkboxes a { color: #FAFF00}
.captcha-box { margin: 20px 0; min-height: 102px; min-width: 250px !important; max-width: 100% !important;}
/* Поле ввода телефона с анимацией */
/*.phone-field {
    position: relative;
    margin-bottom: 25px;
}

.phone-field input {
    width: 100%;
    padding: 16px 16px 12px 60px;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 12px;
    font-size: 17px;
    transition: all 0.25s ease;
}

.phone-field .input-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #000;
    pointer-events: none;
    transition: all 0.25s ease;
    z-index: 2;
    font-weight: 900;
}
.input-field input::placeholder{
    font-size: 16px; 
    color: #000; 
    font-weight: 900
}
/* Состояние при фокусе и при наведении */
/*.phone-field input:focus + .input-label,
.phone-field input:not(:placeholder-shown) + .input-label,
.phone-field:hover input + .input-label {
    top: 6px;
    font-size: 13px;
    color: #999;
}

/* Плейсхолдер +7 */
/*.phone-field input::placeholder {
    color: transparent; /* скрываем стандартный плейсхолдер */
/*}

/* Показываем +7 только когда поле в фокусе или заполнено */
/*.phone-field input:focus::placeholder,
.phone-field input:not(:placeholder-shown)::placeholder {
    color: #999;
}*/
/* Общие стили для всех полей с плавающим лейблом */
.input-field,
.phone-field {
    position: relative;
    margin-bottom: 25px;
   
}

.input-field input,
.phone-field input {
    font-family: 'Normalidad UltraExtended', sans-serif;
    width: 100%;
    padding: 18px 12px 6px;
    border-radius: 6px;
    font-size: 16px;
    transition: all 0.25s ease;
    border: 2px solid #d9dcde;
    font-weight: 700;
    text-align: center;
}

.input-field .input-label,
.phone-field .input-label {
    font-family: 'Normalidad UltraExtended', sans-serif;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #000;
    font-weight: 900;
}
.input-field input::placeholder,
.phone-field input::placeholder{
    font-family: 'Normalidad UltraExtended', sans-serif;
    color: transparent;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}
/* Активное состояние (фокус или заполнено) */
.input-field input:hover,
.phone-field input:hover,
.input-field input:focus,
.phone-field input:focus,
.input-field input:not(:placeholder-shown),
.phone-field input:not(:placeholder-shown) {
    border-color: #338eef;           /* твой жёлтый акцент */
    /*padding-top: 18px;*/
    /*padding-bottom: 6px;*/
}
.input-field input:hover::placeholder,
.phone-field input:hover::placeholder{
    color: #000;
}

.input-field input:hover ~ .input-label,
.phone-field input:hover ~ .input-label,
.input-field input:focus ~ .input-label,
.phone-field input:focus ~ .input-label,
.input-field input:not(:placeholder-shown) ~ .input-label,
.phone-field input:not(:placeholder-shown) ~ .input-label {
    transform: translate(-50%, -100%) scale(.8);
}

/* Для поля телефона — немного корректируем */
/* .phone-field input {
    padding-left: 55px;   
} */

.auth-error {
    color: #f9004c;
    padding: 0;
    margin-bottom: 15px;
    font-size: 14px;
    text-align: center;
    display: none;           /* скрыто по умолчанию */
    line-height: 1.4;
}
/* Блокировка прокрутки страницы при открытом модальном окне */
body.modal-open {
    overflow: hidden !important;
    position: relative;
    width: 100%;
    height: 100vh;
}

/* Дополнительная страховка для мобильных устройств */
/* body.modal-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.7);
} */
@media(max-width: 991px){
    .modal-close{
        width: 8.88888889vw;
        height: 8.88888889vw;
        top: -9.44444444vw;
        right: 0;
    }
}
@media(max-width: 767px){
    .custom-auth-modal {
        padding: 48px 8px 8px;
    }
    .modal-inner {
        width: 90%;
    }
    div.screen {
        max-width: 100%;
        overflow-y: scroll;
    }
    .modal-title{
        font-size: 24px;
    }
}
.modal-inner form.screen{max-width:410px;width:100%}