body {
    font-family: 'Nunito Sans';
    margin: 0;
    height: 100vh; 
    background: url("../img/background.jpg") no-repeat center center;
    background-size: cover; 
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    
    @font-face {
        font-family: 'Nunito Sans';
        src: url('../fonts/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf') format('ttf');
        font-weight: normal;
        font-style: normal;
    }
}

/* Вход в А4 почту */
h1 {
    font-family: 'Nunito Sans', sans-serif;
    color: #5163EB;
    font-size: 185%;
}

/* Почта */
h2 {
    font-family: 'Nunito Sans', sans-serif;
    color: #FFF5F2;
    font-size: 120%;
}

/* Есть аккаунт? */   
h3 {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: #5163EB;
    font-size: 100%;
    align-items: center;
    justify-content: center;
}

/* Телефон */
h4 {
    font-family: 'Nunito Sans', sans-serif;
    color: #5163EB;
    font-size: 120%;
}

/* Войти с помощью */
h5 {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 200;
    color: #5163EB;
    font-size: 100%;
    margin-bottom: 7px;
}

h6 {
    font-family: 'Nunito Sans', sans-serif;
    color: #5163EB;
    font-size: 120%;
    margin: 12px;
}

/* главная белая форма авторизации */
.form {
    position: absolute;
    /* Responsive width with sensible limits */
    width: clamp(270px, 35.83vw, 400px);
    /* Keep aspect ratio for consistent look */
    aspect-ratio: 516/814;
    background: white;
    border-radius: 20px;
    border: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    flex-direction: column;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3%;
    padding: 3%;
}

/* это все области внутри главной формы */
.lable, .slider, .infoform, .buttons, .bottom {
    max-width: 100%; 
    text-align: center;
    align-items: center;
}

/* логотип А4 внутри верхушки формы */
    .logo {
        display: inline-flex;
        align-items: center;
    }

    .logo img {
        height: 2.3rem; 
        width: auto;
        transform: translateY(0.45em);
    }

/* верхушка формы, название почты */
.form .lable {
    width: 95%;   
    height: 6.76%;  
    display: flex;
    justify-content: center;
    align-items: center;
}

/* слайдер с выбором, это светлая часть */    
.form .bigslider {
    width: 70%;   
    height: 9%;  
    background: #F7F5FC;
    margin-top: 3%;
    border-radius: 20px; 
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 20%;
}

/* слайдер темная активная часть */    
.form .smallslider_for_mail {
    width: 50%;   
    height: 100%;  
    background: #5163EB;
    margin-top: 3%;
    border-radius: 20px; 
    display: flex;
    justify-content: center;
    align-items: center;
    top: 55%;
    left: 50%;
    transform: translate(-28%, -7%); 
}

/* слайдер темная активная часть для страницы с телефоном */      
.smallslider_for_phone {
    width: 50%;   
    height: 100%;  
    background: #5163EB;
    margin-top: 3%;
    border-radius: 20px; 
    display: flex;
    justify-content: center;
    align-items: center;
    top: 55%;
    left: 50%;
    transform: translate(60%, -7%); 
}

/* область ввода данных для входа*/    
.form .infoform {
    width: 90%;   
    /* Let content define height to avoid overlap when errors appear */
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-sizing: border-box;
}

/* поля для входа*/     
.infoform-group {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* инпуты для входа на всю ширину */
.infoform-group input {
    width: 100%; 
    border: none;
    border-bottom: 1px solid #555;
    background: transparent;
    font-size: 18px;
    padding: 8px 0;
    outline: none;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 200;
    margin-top: 10px;
}

/* ссылка "забыли пароль" */
.forgotpassword {
    align-self: flex-start; 
    margin-top: 5px;
    font-size: 14px;
    color: #5163EB;
    text-decoration: none;
}

/* область двух кнопок на странице входа*/    
.form .buttons {
    width: 90%;   
    height: 20%; 
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}

/* область кнопки регистрация на стр рег-ции */
.form .button {
    width: 90%;   
    height: 10%; 
    display: flex;
    flex-direction: column;
    box-sizing: border-box;       
}

/* сами кнопки на странице входа */
.form .buttons .btn {
    width: 100%;
    height: 70%;
    background: #5163EB;
    color: white;
    font-size: 18px;
    font-family: inherit;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.2s;
    border: 2px solid #5163EB;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form .buttons .btn:hover {
    background: #F7F5FC;
    color: #5163EB;
    border: 2px solid #5163EB;
}

/* кнопка регистрация на странице регистрации*/
.form .button .btn {
    width: 100%;
    height: 100%;
    background: #5163EB;
    color: white;
    font-size: 18px;
    font-family: inherit;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.2s;
    border: 2px solid #5163EB;
    text-decoration: none;
}

.form .button .btn:hover {
    background: #F7F5FC;
    color: #5163EB;
    border: 2px solid #5163EB;
}

/* низ формы входа, вход через другие пиложения */    
.form .bottom {
    width: 80%;   
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* иконки других приложений */
.icon-container {
    width: 100%;
    display: flex;           
    gap: 10px;               
    justify-content: center; 
    align-items: center; 
    padding: 0;
}

/* формат этих иконок */    
.icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;      
    overflow: hidden;        
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #5163EB;  
}

/* формат фото для этих иконок */    
.icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;       
}

/* кнопка чтобы переключаться на вход по почте/телефону */  
.btn-link {
    display: flex;
    padding: 0;
    height: 100%;
    background-color: transparent;
    font-family: 'Nunito Sans', sans-serif;
    color: #5163EB;
    font-size: 120%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: none;
}

/* на стр рег-ции внизу вопрос и кнопка */  
.alreadyexcist {
    width: 100%;  
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
}

/* кнопка войти на стр рег-ции */  
.btn-enter {
    display: flex;
    padding: 0;
    height: 100%;
    width: 50%;
    background-color: transparent;
    font-family: 'Nunito Sans', sans-serif;
    color: #5163EB;
    font-size: 120%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

/* область ввода данных */    
form .regform {
    width: 90%;   
    height: 60%; 
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-sizing: border-box;
}

.regform .button {
    width: 100%;
    height: 62px;
    margin-top: 10px;
}

.regform-group {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* инпуты на всю ширину */
.regform-group input {
    width: 100%; 
    border: none;
    border-bottom: 1px solid #555;
    background: transparent;
    font-size: 18px;
    padding: 8px 0;
    outline: none;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 200;
    margin-top: 10px;
}

.checkbox {
    width: 100%;
    font-family: 'Nunito Sans', sans-serif;
    color: #5163EB;
    font-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checkbox pre {
    font-family: 'Nunito Sans', sans-serif;
    color: #5163EB;
    font-size: 100%;
}

/* Стили для сообщений об ошибках */
.error-message {
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
    text-align: left;
}