@import url('../../frontend/styles/ad.css');                                                              /* Импорт стилей для рекламных контейнеров из внешнего файла */

/* БАЗОВЫЕ СТИЛИ ДЛЯ ВСЕЙ СТРАНИЦЫ */
body {                                                                                                    /* Стили для основного элемента body */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;                                         /* Установка семейства шрифтов для всего текста на странице */
    background: linear-gradient(135deg, #e0f7fa, #e1bee7);                                               /* Градиентный фон от голубого к светло-фиолетовому под углом 135 градусов */
    margin: 0;                                                                                            /* Убираем внешние отступы по умолчанию */
    padding: 0;                                                                                           /* Убираем внутренние отступы по умолчанию */
    min-height: 100vh;                                                                                    /* Минимальная высота - весь видимый экран (viewport height) */
    display: flex;                                                                                        /* Включаем flexbox для центрирования содержимого */
    flex-direction: column;                                                                               /* Элементы выстраиваются вертикально (колонка) */
    align-items: center;                                                                                  /* Центрирование элементов по горизонтали */
    justify-content: center;                                                                              /* Центрирование элементов по вертикали */
}

/* ОСНОВНОЙ КОНТЕЙНЕР ФОРМЫ */
.container {                                                                                              /* Стили для основного контейнера с формой */
    background: #fff;                                                                                     /* Белый фон контейнера */
    max-width: 420px;                                                                                     /* Максимальная ширина контейнера 420px */
    padding: 30px 25px;                                                                                   /* Внутренние отступы: 30px сверху/снизу, 25px слева/справа */
    border-radius: 16px;                                                                                  /* Закругление углов на 16px */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);                                                          /* Тень контейнера: смещение X=0, Y=8px, размытие 20px, прозрачность 15% */
    animation: slideUp 0.6s ease;                                                                         /* Анимация появления контейнера снизу вверх длительностью 0.6 секунд */
    margin-bottom: 5%;                                                                                    /* Отступ снизу 5% от высоты родительского контейнера */
}

/* АНИМАЦИЯ ПОЯВЛЕНИЯ КОНТЕЙНЕРА */
@keyframes slideUp {                                                                                     /* Определение ключевых кадров анимации slideUp */
    from {                                                                                                /* Начальное состояние анимации */
        transform: translateY(30px);                                                                      /* Сдвиг элемента на 30px вниз */
        opacity: 0;                                                                                       /* Полная прозрачность (невидимый) */
    }
    to {                                                                                                  /* Конечное состояние анимации */
        transform: translateY(0);                                                                         /* Возврат в исходное положение (без сдвига) */
        opacity: 1;                                                                                       /* Полная непрозрачность (полностью видимый) */
    }
}

/* ЗАГОЛОВОК СТРАНИЦЫ */
h2 {                                                                                                      /* Стили для заголовка второго уровня */
    text-align: center;                                                                                   /* Выравнивание текста по центру */
    font-size: 28px;                                                                                      /* Размер шрифта 28px */
    color: #333;                                                                                          /* Темно-серый цвет текста */
    margin-bottom: 25px;                                                                                  /* Отступ снизу 25px */
}

/* СТИЛИ ДЛЯ ФОРМЫ */
form {                                                                                                    /* Стили для элемента формы */
    display: flex;                                                                                        /* Включаем flexbox для расположения элементов формы */
    flex-direction: column;                                                                               /* Элементы формы располагаются вертикально */
}

/* МЕТКИ ПОЛЕЙ ВВОДА */
label {                                                                                                   /* Стили для меток (label) полей ввода */
    margin-bottom: 6px;                                                                                   /* Отступ снизу 6px */
    font-size: 14px;                                                                                      /* Размер шрифта 14px */
    color: #444;                                                                                          /* Серый цвет текста */
}

/* ПОЛЯ ВВОДА */
input {                                                                                                   /* Стили для всех полей ввода */
    padding: 12px;                                                                                        /* Внутренние отступы 12px со всех сторон */
    margin-bottom: 18px;                                                                                  /* Отступ снизу 18px между полями */
    border: 1px solid #ccc;                                                                               /* Серая граница толщиной 1px */
    border-radius: 8px;                                                                                   /* Закругление углов 8px */
    font-size: 16px;                                                                                      /* Размер шрифта 16px */
    transition: border 0.2s;                                                                              /* Плавный переход для свойства border длительностью 0.2 секунды */
}

/* СОСТОЯНИЕ ФОКУСА ДЛЯ ПОЛЕЙ ВВОДА */
input:focus {                                                                                             /* Стили для поля ввода при получении фокуса */
    border-color: #ff4d4d;                                                                                /* Изменение цвета границы на красный при фокусе */
    outline: none;                                                                                        /* Убираем стандартное браузерное выделение */
    box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.1);                                                        /* Тень вокруг поля при фокусе (фиолетовая с прозрачностью 10%) */
}

/* СПЕЦИФИЧНЫЙ СТИЛЬ ДЛЯ ПОЛЯ ПАРОЛЯ */
input[type="password"] {                                                                                  /* Стили только для полей типа password */
    font-family: Arial, sans-serif;                                                                       /* Изменение семейства шрифтов для лучшего отображения точек */
}

/* ОБЩИЕ СТИЛИ ДЛЯ КНОПОК */
button:hover {                                                                                            /* Стили для всех кнопок при наведении курсора */
    background-color: #f0f0f0;                                                                            /* Изменение фона на светло-серый при наведении */
}

/* КНОПКА ОТПРАВКИ ФОРМЫ */
.submit-btn {                                                                                             /* Стили для кнопки отправки формы */
    padding: 12px;                                                                                        /* Внутренние отступы 12px */
    margin-top: 30px;                                                                                     /* Отступ сверху 10px перед кнопкой отправки */
    background: linear-gradient(90deg, #ff5252, #ff1717);                                             /* Градиентный фон от светло-красного к темно-красному слева направо */
    color: #fff;                                                                                        /* Белый цвет текста */
    font-size: 16px;                                                                                      /* Размер шрифта 16px */
    border: none;                                                                                         /* Убираем стандартную границу кнопки */
    border-radius: 8px;                                                                                   /* Закругление углов 8px */
    cursor: pointer;                                                                                      /* Изменение курсора на указатель при наведении */
    transition: background 0.3s, transform 0.2s;                                                          /* Плавные переходы для фона и трансформации */
}

/* СОСТОЯНИЕ НАВЕДЕНИЯ ДЛЯ КНОПКИ ОТПРАВКИ */
.submit-btn:hover {                                                                                       /* Стили для кнопки отправки при наведении */
    background: linear-gradient(90deg, #e53935, #d32f2f);                                                 /* Более темный градиент при наведении */
    transform: translateY(-1px);                                                                          /* Легкое поднятие кнопки на 1px при наведении */
}

/* СТИЛИ ДЛЯ СООБЩЕНИЙ */
p {                                                                                                       /* Стили для всех параграфов */
    font-size: 16px;                                                                                      /* Размер шрифта 16px */
    color: red;                                                                                           /* Красный цвет текста по умолчанию (для ошибок) */
    margin-top: 10px;                                                                                     /* Отступ сверху 10px */
}

/* КЛАСС ДЛЯ УСПЕШНЫХ СООБЩЕНИЙ */
p.success {                                                                                               /* Стили для параграфов с классом success */
    color: green;                                                                                         /* Зеленый цвет текста для успешных сообщений */
}

/* КОНТЕЙНЕР ДЛЯ ПОЛЯ ПАРОЛЯ И КНОПКИ ГЛАЗА */
.password-container {                                                                                     /* Стили для контейнера поля пароля */
    position: relative;                                                                                   /* Относительное позиционирование для абсолютного позиционирования кнопки */
    display: flex;                                                                                        /* Включаем flexbox */
    align-items: center;                                                                                  /* Выравнивание элементов по вертикали по центру */
}

/* ПОЛЕ ПАРОЛЯ В КОНТЕЙНЕРЕ */
.password-container input {                                                                               /* Стили для поля ввода внутри контейнера пароля */
    width: 100%;                                                                                          /* Ширина 100% родительского контейнера */
    box-sizing: border-box;                                                                               /* Учет padding и border в общей ширине элемента */
    padding: 12px 45px 12px 12px;                                                                         /* Отступы: сверху 12px, справа 45px (для кнопки), снизу 12px, слева 12px */
    border: 1px solid #ccc;                                                                             /* Граница поля */
    border-radius: 8px;                                                                                   /* Закругленные углы */
    font-size: 16px;                                                                                      /* Размер шрифта */
    transition: border 0.2s;                                                                              /* Плавный переход для границы */
    margin-bottom: 0;                                                                                     /* Убираем отступ снизу, т.к. уже есть у контейнера */
}

/* КНОПКА ПЕРЕКЛЮЧЕНИЯ ВИДИМОСТИ ПАРОЛЯ (ИСПРАВЛЕННОЕ ВЕРТИКАЛЬНОЕ ВЫРАВНИВАНИЕ) */
#togglePassword {                                                                                         /* Стили для кнопки переключения видимости пароля */
    position: absolute;                                                                                   /* Абсолютное позиционирование относительно родительского контейнера */
    right: 8px;                                                                                           /* Позиционирование справа с отступом 8px от края */
    top: 50%;                                                                                             /* Позиционирование по вертикали по центру (50% от высоты родителя) */
    transform: translateY(-50%);                                                                          /* Корректировка позиционирования - смещение на половину собственной высоты для точного центрирования */
    background: none;                                                                                     /* Прозрачный фон */
    border: none;                                                                                         /* Без границы */
    font-size: 20px;                                                                                      /* Размер иконки глаза 20px */
    cursor: pointer;                                                                                      /* Курсор-указатель при наведении */
    color: #888;                                                                                          /* Серый цвет иконки */
    transition: all 0.2s ease;                                                                            /* Плавный переход всех свойств длительностью 0.2 секунды */
    width: 32px;                                                                                          /* Фиксированная ширина кнопки 32px */
    height: 32px;                                                                                         /* Фиксированная высота кнопки 32px */
    display: flex;                                                                                        /* Включаем flexbox для центрирования содержимого */
    align-items: center;                                                                                  /* Выравнивание содержимого по вертикали по центру */
    justify-content: center;                                                                              /* Выравнивание содержимого по горизонтали по центру */
    border-radius: 4px;                                                                                   /* Закругление углов кнопки 4px */
    z-index: 2;                                                                                           /* Уровень z-index 2 для отображения поверх поля ввода */
    line-height: 1;                                                                                       /* Высота строки 1 для точного вертикального выравнивания */
    margin: 0;                                                                                            /* Убираем все внешние отступы */
    padding: 0;                                                                                           /* Убираем все внутренние отступы */
}

/* СОСТОЯНИЕ НАВЕДЕНИЯ ДЛЯ КНОПКИ ГЛАЗА */
#togglePassword:hover {                                                                                   /* Стили для кнопки глаза при наведении курсора */
    color: #333;                                                                                          /* Более темный серый цвет при наведении */
    background-color: rgba(0, 0, 0, 0.05);                                                               /* Легкий полупрозрачный фон при наведении */
}

/* СОСТОЯНИЕ АКТИВАЦИИ ДЛЯ КНОПКИ ГЛАЗА */
#togglePassword:active {                                                                                  /* Стили для кнопки глаза при нажатии */
    transform: translateY(-50%) scale(0.95);                                                              /* Легкое уменьшение масштаба кнопки при нажатии с сохранением центрирования */
}

/* АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ */
@media (max-width: 768px) {                                                                               /* Медиа-запрос для устройств с шириной экрана до 768px */
    #togglePassword,                                                                                      /* Стили для кнопки переключения видимости пароля */
    .submit-btn {                                                                                         /* И для кнопки отправки формы */
        min-width: 44px;                                                                                  /* Минимальная ширина 44px для удобства нажатия на мобильных */
        min-height: 44px;                                                                                 /* Минимальная высота 44px для удобства нажатия на мобильных */
    }
}

/* БЛОК С ССЫЛКАМИ ДЛЯ РЕГИСТРАЦИИ И ВОССТАНОВЛЕНИЯ ПАРОЛЯ */
.register-link {                                                                                          /* Стили для блока со ссылками */
    text-align: center;                                                                                   /* Выравнивание текста по центру */
    margin-top: 20px;                                                                                     /* Отступ сверху 20px */
    font-size: 14px;                                                                                      /* Размер шрифта 14px */
}

/* ПАРАГРАФЫ В БЛОКЕ ССЫЛОК */
.register-link p {                                                                                        /* Стили для параграфов внутри блока ссылок */
    color: #444;                                                                                          /* Серый цвет текста как у меток полей ввода */
}

/* ССЫЛКИ В БЛОКЕ РЕГИСТРАЦИИ */
.register-link a {                                                                                        /* Стили для ссылок в блоке регистрации */
    color: #ff1717;                                                                                       /* Красный цвет ссылок */
    text-decoration: none;                                                                                /* Убираем подчеркивание ссылок */
    font-weight: 500;                                                                                     /* Полужирное начертание шрифта */
    transition: color 0.2s ease-in-out;                                                                   /* Плавный переход цвета при наведении */
}

/* СОСТОЯНИЕ НАВЕДЕНИЯ ДЛЯ ССЫЛОК */
.register-link a:hover {                                                                                  /* Стили для ссылок при наведении курсора */
    text-decoration: underline;                                                                            /* Подчеркивание ссылки при наведении */
    color: #fd0909;                                                                                       /* Более яркий красный цвет при наведении */
}

/* СТИЛИ ДЛЯ РЕКЛАМНОГО БЛОКА */
.mrg-tag {                                                                                                /* Стили для рекламного тега Mail.ru */
    display: inline-block;                                                                                /* Блочно-строчное отображение */
    width: auto;                                                                                          /* Автоматическая ширина */
    height: 500px;                                                                                        /* Высота рекламного блока 500px */
}

/* АДАПТИВНОСТЬ РЕКЛАМНОГО БЛОКА ДЛЯ МОБИЛЬНЫХ */
@media (max-width: 767px) {                                                                               /* Медиа-запрос для мобильных устройств с шириной до 767px */
    .mrg-tag {                                                                                            /* Стили для рекламного тега на мобильных */
        height: 300px;                                                                                    /* Уменьшенная высота 300px для мобильных устройств */
        width: 100%;                                                                                      /* Ширина 100% доступного пространства */
        max-width: 320px;                                                                                 /* Максимальная ширина 320px для стандартных мобильных рекламных блоков */
    }
}