/* 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;
    min-height: 100vh;
    text-align: center;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 12px 24px;
    overflow: visible;
}

.logo-frame {
    overflow: hidden;
    line-height: 0;
    display: flex;
    justify-content: center;
    background-color: #f5f5dc;
}


.logo {
    width: 800px;
    max-width: 100%;
    height: 250px;
    margin: 0 auto 8px auto;
    object-fit: contain;
    object-position: center center;
    display: block;
    clip-path: none;
    transform: none;
}

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

/* Настройки для флагов */
.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: 28px;
    display: block;
    text-align: center;
}

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

@media (max-width: 800px) {
    .container {
        padding: 24px 10px 20px;
    }
}

@media (min-width: 801px) and (max-width: 1100px) {
    .container {
        padding: 28px 12px 22px;
    }
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 800px) {
    .container {
        min-height: auto;
    }

    .logo {
    width: 100%;
    max-width: 360px;
    height: 200px;
    object-fit: contain;

    transform: scale(1.58);
    transform-origin: center;
    }

    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;
}


.landing-slogan-box {
    width: 90%;
    max-width: 800px;
    min-height: 72px;
    margin: -22px auto 12px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px 12px;
}

.landing-slogan-text {
    margin: 0;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 500;
    color: #2f2f2f;
    word-break: break-word;
}

@media (max-width: 800px) {
    .landing-slogan-box {
        width: 92%;
        min-height: auto;
        margin: 10px auto 14px auto;
        padding: 0 8px;
    }

    .landing-slogan-text {
        font-size: 24px;
        line-height: 1.25;
    }
}


@media (max-width: 800px) {
    .logo-frame {
        overflow: hidden;
        line-height: 0;
        display: flex;
        justify-content: center;
        background-color: #f5f5dc;
    }

    .logo {
        backface-visibility: hidden;
    }
}