/* ===================== GENERAL STYLES ===================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: Arial, sans-serif;
    background-color: #ffffff !important;
}

/* ===================== NOTIFICATION (alert-warning) ===================== */
.notification {
    background-color: #fcf8e3;
    color: #8a6d3b;
    border: 1px solid #faebcc;
    padding: 15px;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    max-width: 600px;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* ===================== FORM / PIN BLOCK ===================== */
/* Карточка формы */
form {
    display: flex;
    flex-direction: column;
    align-items: stretch;          /* элементы растягиваются на ширину формы */
    background-color: #ffffff;
    padding: 25px 22px 26px;       /* отступы внутри карточки */
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 100%;
    max-width: 420px;              /* ширина карточки */
    margin: 20px auto;             /* центрируем по горизонтали + отступ сверху/снизу */
    row-gap: 18px;                 /* расстояние между label, input и кнопкой */
}

label {
    font-size: 16px;
    color: #333;
}

/* Поле PIN */
input[type="password"],
input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}

/* Фокус поля PIN */
input[type="password"]:focus,
input[type="text"]:focus {
    border-color: #80bdff;
    box-shadow: 0 0 6px rgba(0, 123, 255, 0.4);
    outline: none;
}

/* Зелёная кнопка – отдельным блоком под полем, на всю ширину формы */
form button,
button[type="submit"] {
    width: 100%;
    display: block;
    padding: 14px;
    background-color: #28a745;
    color: #fff;
    border: 1px solid #1e7e34;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
}

form button:hover,
button[type="submit"]:hover {
    background-color: #218838;
    border-color: #1c7430;
}

/* Синий текст "PIN-код размещается рядом..." */
.pin-info {
    margin-top: 18px;              /* отступ от кнопки */
    font-size: 15px;
    color: #0d6efd;                /* синий */
    max-width: 420px;              /* совпадает с формой */
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* ===================== FOOTER ===================== */
.hreff h4 {
    text-align: center;
    font-size: 0.9rem;
    color: #777;
    margin-top: 20px;
}

/* ===================== RESPONSIVE (общая) ===================== */
@media (max-width: 768px) {
    .notification {
        padding: 10px;
        font-size: 12px;
        max-width: 100%;
    }

    form {
        padding: 20px 16px 22px;
        max-width: 95%;
    }

    input[type="password"],
    input[type="text"] {
        font-size: 14px;
    }

    form button,
    button[type="submit"] {
        font-size: 16px;
        padding: 12px;
    }

    .hreff h4 {
        font-size: 0.8rem;
    }

    .pin-info {
        max-width: 95%;
        font-size: 14px;
    }
}

/* ===================== NAVBAR / ЯЗЫКИ ===================== */

/* Фон шапки */
.navbar {
    background-color: #ffffff !important;
}

/* Лого максимально влево (общий случай) */
.navbar .container {
    padding-left: 0 !important;
}

/* ===================== СЕГМЕНТИРОВАННОЕ МЕНЮ (Главная / RU / Войти) ===================== */

.nav-segment {
    display: flex;
    align-items: stretch;
    border-radius: 0;
    font-size: 15px;
}

/* Общий стиль плашек */
.nav-segment-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    height: 55px;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
    flex: 0 0 auto;
    border: none;
}

/* Главная – ярко-синяя */
.nav-segment-item.active-main {
    background-color: #008dd2;
    color: #ffffff !important;
    font-weight: 600;
}

/* Языковой таб – светло-голубой */
.nav-segment-item.lang-tab {
    background-color: #e6f1ff;
    color: #0070c8;
    font-weight: 600;
}

/* Войти – белый */
.nav-segment-item.default-tab {
    background-color: #ffffff;
    color: #0070c8;
}

/* Hover для неактивных */
.nav-segment-item.lang-tab:hover,
.nav-segment-item.default-tab:hover {
    background-color: #f2f7ff;
}

/* Стрелочка dropdown */
.nav-segment .dropdown-toggle::after {
    margin-left: 4px;
}

/* Пункты выпадающего меню */
.nav-segment .dropdown-menu a {
    font-size: 14px;
}

/* ===================== МОБИЛЬНАЯ ВЕРСТКА NAVBAR ===================== */

@media (max-width: 576px) {

    /* Контейнер: лого слева, меню справа */
    .navbar .container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-left: 0 !important;
        padding-right: 5px !important;
    }

    /* Лого без нижних отступов */
    .navbar-brand {
        margin: 0 !important;
    }

    /* Меню прижато вправо */
    .nav-segment {
        margin-left: auto !important;
        justify-content: flex-end !important;
    }

    /* Кнопки компактнее на мобиле */
    .nav-segment-item {
        padding: 0 10px !important;
        height: 40px !important;
        font-size: 13px !important;
    }

    /* Картинка документа поменьше */
    img.img-fluid {
        max-width: 80%;
        height: auto;
    }
}

.small-img {
    max-width: 35% !important;
    height: auto !important;
}