/* app/static/styles.css */
/* Стили для страницы с логотипом и флагами */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
}

body {
    background-color: #f5f5dc;
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Центрирует контент ближе к верху */
    height: 100vh; /* Отступ от верха окна */

    text-align: center;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирует по горизонтали */
    justify-content: center; /* Центрирует по вертикали */
    text-align: center; /* Центрирует текст */
    max-width: 600px; /* Ограничивает ширину */
    height: calc(100vh - 20px); /* Устанавливает высоту чуть меньше окна браузера */
    margin: 0 auto;
    overflow: hidden; /* Убирает скроллинг, если что-то выходит за границы */
}


.logo {
    max-width: 350px;
    height: auto;
    margin-bottom: 5px;
    margin-top: 5px;
}


/* Настройки для контейнера флагов */
/* Флаги в одну строку */
.flags {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: nowrap; /* Отключаем перенос, чтобы флаги отображались в одну строку */
    max-width: none; /* Убираем ограничение по ширине */
    margin-bottom: 10px; /* Уменьшите отступ снизу */
    margin-top: -20px; /* Поднимите блок выше (корректируйте значение) */
}

/* Настройки для флагов */
.flag {
    width: 30px; /* Вернем прежний размер флагов */
    height: auto;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Расстояние между элементами формы */
    width: 100%; /* Ширина формы на 100% родительского контейнера */
    max-width: 400px; /* Ограничиваем ширину формы */
}

form label {
    align-self: center; /* Центрирует метку относительно формы */
    width: 80%; /* Совпадает с шириной окна ввода */
    max-width: 250px; /* Ограничивает ширину метки */
    text-align: left; /* Выравнивает текст по левому краю */
    margin-bottom: 1px; /* Отступ между меткой и рамкой ввода */

}

form input, form button {
    width: 80%; /* Занимают всю ширину родителя */
    max-width: 250px; /* Ограничение максимальной ширины */
    padding: 8px;
    font-size: 16px;
    text-align: left; /* Выравнивание текста по левому краю */
}

form button {
    cursor: pointer;
    width: 80%; /* Совпадает с шириной окна ввода */
    max-width: 250px; /* Ограничивает ширину */
    padding: 8px;
    font-size: 16px;
    text-align: center; /* Центрирует текст внутри кнопки */
    margin: 0 auto; /* Центрирует кнопку по горизонтали */
    display: block; /* Обеспечивает блочную модель для центрирования */
}

.policy-link {
    margin-top: 100px; /* Отступ сверху */
    display: block; /* Убедитесь, что div отображается как блочный элемент */
    text-align: center; /* Выравнивание текста по центру */
}
@media (max-width: 700px) {
    .policy-link {
        margin-top: 30px; /* Уменьшаем отступ для мобильных устройств */
        font-size: 14px; /* Уменьшаем размер шрифта, если нужно */
        padding: 10px 5px; /* Добавляем немного внутреннего отступа */
        max-width: 90%; /* Делаем блок адаптивным */
        word-wrap: break-word; /* Если текст длинный, он переносится */
    }
}



/* Адаптивные стили для мобильных устройств */
@media (max-width: 700px) {
    .container {
        height: 90vh; /* Ограничьте высоту на небольших экранах */
    }

    .logo {
        max-width: 80%;
    }

    form input, form button {
        max-width: 100%;
    }

    .flags {
        gap: 5px;
    }

    .flag {
        width: 25px;
    }
}


.forgot-password {
    margin-top: 10px; /* Отступ сверху */
    font-size: 14px;
    color: #007bff;
}

.forgot-password a {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
}

.forgot-password a:hover {
    text-decoration: underline;
}

#flash-message {
    color: green;
    font-weight: bold;
    margin-top: 10px;
}

#flash-message.error {
    color: red;
}

h1 {
    margin-top: 10px; /* Уменьшает верхний отступ */
    margin-bottom: 20px; /* Отступ до формы */
}

form {
    margin-top: 0; /* Убираем лишние отступы */
    padding: 0;
}