/* =========================================================
   БАЗА (исходные стили из вашего файла)
   ========================================================= */

/* Основной стиль страницы */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5;
    background-image: url('/static/background.jpg'); /* Замените на ваше изображение */
    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Основной контейнер */
.container {
    background: rgba(255, 255, 255, 0.9); /* Прозрачный белый фон */
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Мягкая тень */
    max-width: 400px;
    width: 100%;
    text-align: center;
}

/* Заголовки */
h1 {
    color: #333;
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* Обычный текст */
p {
    color: #666;
    font-size: 16px;
    margin-bottom: 30px;
}

/* Стили для форм */
input[type="password"], input[type="text"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
    outline: none;
}

input[type="password"]:focus, input[type="text"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
.button-group {
    display: flex; /* Используем flexbox для выравнивания */
    justify-content: space-between; /* Распределяем кнопки по обе стороны */
    margin-top: 20px; /* Отступ сверху */
}

.button-group .btn {
    flex: 1; /* Задаем ширину кнопок */
    margin: 0 10px; /* Отступ между кнопками */
}

.button-group .btn:first-child {
    margin-left: 0; /* Убираем отступ у первой кнопки */
}

.button-group .btn:last-child {
    margin-right: 0; /* Убираем отступ у последней кнопки */
}

/* Стили для разных кнопок */
button, .btn {
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 16px;
    width: 100%;
    margin: 10px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Синяя кнопка для основных действий */
.btn-primary {
    background-color: #007bff;
    color: white;
}

.btn-primary:hover {
    background-color: #0056b3;
}

/* Зеленая кнопка для положительных действий */
.btn-success {
    background-color: #28a745;
    color: white;
}

.btn-success:hover {
    background-color: #218838;
}

/* Стили для кнопки "Назад" */
.btn-secondary {
    background-color: #6c757d; /* Серый фон */
    color: white; /* Белый текст */
    border: none; /* Убираем рамку */
    padding: 12px 20px; /* Отступы */
    border-radius: 8px; /* Скругление углов */
    cursor: pointer; /* Указатель при наведении */
    transition: background-color 0.3s ease; /* Плавный переход при наведении */
}

.btn-secondary:hover {
    background-color: #5a6268; /* Цвет при наведении */
}


/* Голубая кнопка для информационных действий */
.btn-info {
    background-color: #17a2b8;
    color: white;
}

.btn-info:hover {
    background-color: #138496;
}

/* Флеш-сообщения */
.alert {
    padding: 15px;
    background-color: #f44336;
    color: white;
    border-radius: 5px;
    margin-bottom: 20px;
}

.alert-success {
    background-color: #4CAF50;
}

/* Стили для футера */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333; /* Однородный темный фон */
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    font-family: 'Arial', sans-serif;
}

.footer a {
    color: #00d1b2; /* Акцентный цвет для ссылок */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: #00ffcc; /* Цвет при наведении */
}

.footer p {
    margin: 5px 0;
    font-size: 14px;
}

/* Минимальные иконки для контактов */
.footer .fa {
    margin: 0 10px;
    font-size: 18px;
    color: #00d1b2;
    transition: color 0.3s ease;
}

.footer .fa:hover {
    color: #00ffcc; /* Цвет при наведении на иконки */
}

.footer .fa-envelope {
    background: #007bff;
    color: white;
}

.footer .fa-phone {
    background: #28a745;
    color: white;
}

.toast {
    position: fixed;
    top: 20px;
    right: -400px; /* За пределами экрана */
    width: 300px;
    background-color: #f44336; /* Красный цвет для ошибок */
    color: white;
    padding: 16px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: right 0.5s ease, opacity 0.5s ease;
}

.toast.show {
    right: 20px; /* Позиция справа */
    opacity: 1;
}

.toast.hide {
    right: -400px; /* Скрываем сообщение */
    opacity: 0;
}

/* Стиль для успешных всплывающих сообщений */
#success-toast {
    position: fixed;
    top: 20px;
    right: 20px; /* Позиция справа */
    width: 300px;
    background-color: #4CAF50; /* Зеленый фон */
    color: white;
    padding: 16px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: right 0.5s ease, opacity 0.5s ease;
}

#success-toast.show {
    opacity: 1;
    right: 20px; /* Позиция при показе */
}

#success-toast.hide {
    right: -400px; /* За границей экрана */
    opacity: 0;
}

/* Адаптивные стили для мобильных устройств */
@media only screen and (max-width: 1200px) {
    .container {
        max-width: 700px;
        padding: 35px;
    }

    h1 {
        font-size: 26px;
    }

    p {
        font-size: 15px;
    }

    .footer {
        font-size: 13px;
    }

    button, .btn {
        font-size: 15px;
        padding: 10px;
    }
}

@media only screen and (max-width: 992px) {
    .container {
        max-width: 550px;
        padding: 30px;
    }

    h1 {
        font-size: 24px;
    }

    p {
        font-size: 14px;
    }

    .footer {
        font-size: 12px;
    }

    button, .btn {
        font-size: 14px;
        padding: 9px;
    }
}

@media only screen and (max-width: 768px) {
    .container {
        max-width: 450px;
        padding: 25px;
    }

    h1 {
        font-size: 22px;
    }

    p {
        font-size: 13px;
    }

    .footer {
        font-size: 11px;
    }

    button, .btn {
        font-size: 13px;
        padding: 8px;
    }
}

@media only screen and (max-width: 576px) {
    .container {
        max-width: 350px;
        padding: 20px;
    }

    h1 {
        font-size: 20px;
    }

    p {
        font-size: 12px;
    }

    .footer {
        font-size: 10px;
    }

    button, .btn {
        font-size: 12px;
        padding: 7px;
    }
}

@media only screen and (max-width: 400px) {
    .container {
        max-width: 300px;
        padding: 15px;
    }

    h1 {
        font-size: 18px;
    }

    p {
        font-size: 11px;
    }

    .footer {
        font-size: 9px;
    }

    button, .btn {
        font-size: 11px;
        padding: 6px;
    }
}

.btn-back {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
    transition: background-color 0.3s ease;
    display: inline-block;
}

.btn-back:hover {
    background-color: #0056b3;
}

/* =========================================================
   ДОБАВЛЕННАЯ МАКСИМАЛЬНАЯ АДАПТИВНОСТЬ (НЕ ЛОМАЕТ СТАРОЕ)
   ========================================================= */

/* Универсальная коробочная модель и масштаб шрифта в iOS */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Вместо "жёсткого" 100vh используем динамический вьюпорт и запас по высоте */
body {
    min-height: 100dvh;
    height: 100dvh; /* фоллбек для старых браузеров */
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-top: max(0px, env(safe-area-inset-top));
    /* чтобы контент не перекрывался фикс-футером на маленьких экранах */
    padding-bottom: max(0px, calc(env(safe-area-inset-bottom) + 60px));
    background-attachment: fixed;
}

/* Гладкая ширина контейнера + адаптивные внутренние отступы без изменения вашей сетки */
.container {
    width: min(100% - 32px, 400px); /* визуально держим поля по бокам */
    padding: clamp(16px, 3vw, 40px);
    border-radius: 15px; /* сохранили ваш радиус */
}

/* Флюидная типографика с сохранением верхних границ ваших размеров */
h1 {
    font-size: clamp(18px, 2.2vw + 1rem, 28px);
}

p {
    font-size: clamp(12px, 1vw + 0.5rem, 16px);
    line-height: 1.5;
}

/* Кнопки и элементы форм: лучшее поведение на узких экранах и для тача */
button, .btn {
    font-size: clamp(12px, 1.1vw + 0.5rem, 16px);
    padding: clamp(10px, 1.2vw + 0.3rem, 12px);
    touch-action: manipulation;
}

input[type="password"], input[type="text"] {
    font-size: clamp(14px, 1vw + 0.5rem, 16px);
    padding: clamp(10px, 1vw + 0.3rem, 12px);
}

/* Группа кнопок: аккуратный перенос, отсутствие «ломающихся» межкнопочных отступов */
.button-group {
    gap: 12px;
    flex-wrap: wrap;
}
.button-group .btn {
    margin: 0;          /* переходим с margin на gap, чтобы не ломался перенос */
    min-width: 0;       /* избегаем переполнения */
}

/* На очень узких экранах складываем кнопки в столбец для удобного тапа */
@media (max-width: 480px) {
    .button-group { flex-direction: column; }
    .button-group .btn { width: 100%; }
}

/* Медиа-шаг для сверхмалых экранов (старые 320px устройства) */
@media (max-width: 360px) {
    .container { width: min(100% - 20px, 320px); }
}

/* Футер: защита от перекрытия контента и безопасные зоны */
.footer {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    line-height: 1.3;
}

/* На телефонах делаем футер нефиксированным (если контента много) */
@media (max-width: 768px) {
    .footer {
        position: static;
        width: 100%;
        margin-top: 16px;
    }
    body {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
        align-items: stretch; /* контейнер тянется по ширине */
    }
}

/* Режим «меньше анимаций» — уважаем системные настройки пользователя */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Медиа-шаг для очень больших экранов: чтобы блок не был слишком маленьким */
@media (min-width: 1600px) {
    .container {
        max-width: 520px; /* чуть крупнее на 2K мониторах */
        padding: clamp(40px, 2vw, 56px);
    }
    h1 { font-size: clamp(28px, 1.6vw + 1rem, 36px); }
    p  { font-size: clamp(16px, 0.8vw + 0.5rem, 18px); }
}

/* Медиа-шаг по высоте: когда экран низкий (горизонт телефоны/малые ноутбуки) */
@media (max-height: 600px) {
    body { align-items: flex-start; }
    .container { margin-top: 24px; margin-bottom: 24px; }
}

/* Картинки/видео не вылезают за пределы контейнеров */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* Текст не вылазит из кнопок/полей, аккуратные переносы */
:where(h1, p, button, .btn, input) { word-break: break-word; }

/* Улучшение контрастности ссылок в футере при фокусе с клавиатуры */
.footer a:focus-visible {
    outline: 2px dashed currentColor;
    outline-offset: 3px;
}

/* --- FIX: не ломаем слова и кнопки --- */
:where(h1, p) {
  word-break: normal !important;      /* отменяем break-word */
  overflow-wrap: break-word;           /* переносим только при необходимости */
  white-space: normal;                 /* обычное поведение заголовков и абзацев */
}

button, .btn {
  word-break: keep-all !important;     /* не разбиваем слова внутри кнопок */
  overflow-wrap: normal;               /* не разрываем слова в середине */
  white-space: nowrap;                 /* держим текст кнопки в одну строку */
  text-overflow: ellipsis;             /* если вдруг текст слишком длинный */
  overflow: hidden;                    /* прячем излишек, без изменения дизайна */
}

/* На совсем узких экранах позволим кнопкам переноситься по словам,
   но НЕ по буквам — чтобы не было «столбика». */
@media (max-width: 360px) {
  button, .btn {
    white-space: normal;
    overflow-wrap: break-word;
  }
}

/* --- FIX #1: на десктопе возвращаем исходные размеры шрифтов/отступов --- */
@media (min-width: 1024px) {
  h1 {
    font-size: 28px !important;   /* как в исходнике */
    line-height: 1.2;
  }
  p { font-size: 16px !important; }
  button, .btn {
    font-size: 16px !important;
    padding: 12px !important;
  }
  input[type="text"], input[type="password"] {
    font-size: 16px !important;
    padding: 12px !important;
  }
}

/* --- FIX #2: отменяем «укрупнение» для >1600px, чтобы не ломало переносы --- */
@media (min-width: 1600px) {
  .container { max-width: 400px !important; padding: 40px !important; }
  /* если хочется, можно чуть больше, но не менять шрифты */
  h1 { font-size: 28px !important; }
  p  { font-size: 16px !important; }
}

/* --- FIX #3: аккуратные переносы (чтобы не было «столбика») --- */
:where(h1, p) {
  word-break: normal !important;
  overflow-wrap: break-word;
  white-space: normal;
}
button, .btn {
  word-break: keep-all !important;
  overflow-wrap: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* На очень узких экранах позволим кнопкам переноситься по словам (не по буквам) */
@media (max-width: 360px) {
  button, .btn { white-space: normal; overflow-wrap: break-word; }
}