/* Стили для страницы регистрации */
/* Сброс стандартных стилей браузера */
* {
    /* Удаление внешних отступов */
    margin: 0;
    /* Удаление внутренних отступов */
    padding: 0;
    /* Изменение модели расчета размеров */
    box-sizing: border-box;
}

/* Стили для всего тела документа */
body {
    /* Белый цвет фона */
    background-color: #ffffff;
    /* Темно-серый цвет текста */
    color: #333;
    /* Межстрочный интервал */
    line-height: 1.6;
    /* Flexbox для вертикального расположения */
    display: flex;
    flex-direction: column;
    /* Минимальная высота на весь экран */
    min-height: 100vh;
    /* Основной шрифт */
    font-family: 'Arial', sans-serif;
}

/* Основной контейнер */
.container {
    /* Ширина 100% */
    width: 100%;
    /* Максимальная ширина контейнера */
    max-width: 1200px;
    /* Центрирование контейнера */
    margin: 0 auto;
    /* Внутренние отступы по бокам */
    padding: 0 20px;
}

/* Дополнительные стили для страницы регистрации */
.registration-container {
    /* Flexbox для центрирования содержимого */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Внутренние отступы */
    padding: 20px 20px 30px; /* Увеличил нижний padding */
    /* Отрицательный внешний отступ сверху */
    margin-top: -20px;
    /* Гибкость для растягивания */
    flex: 1 0 auto; /* Это важно! */
}

/* Форма регистрации */
.registration-form {
    /* Белый фон формы */
    background-color: white;
    /* Внутренние отступы формы */
    padding: 40px;
    /* Закругленные углы */
    border-radius: 10px;
    /* Тень для поднятия формы */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    /* Ширина 100% */
    width: 100%;
    /* Максимальная ширина формы */
    max-width: 450px;
    /* Внешний отступ сверху */
    margin-top: 20px;
    /* Внешний отступ снизу */
    margin-bottom: 30px; /* Добавил отступ снизу формы */
}

/* Остальные стили оставляем как были */
.registration-title {
    /* Выравнивание текста по центру */
    text-align: center;
    /* Цвет заголовка */
    color: #2c3e50;
    /* Отступ снизу */
    margin-bottom: 30px;
    /* Размер шрифта */
    font-size: 2rem;
}

/* Группа формы */
.form-group {
    /* Отступ между группами */
    margin-bottom: 25px;
}

/* Группа пароля */
.form-group.password-group {
    /* Уменьшенный отступ для группы пароля */
    margin-bottom: 20px;
}

/* Метка формы */
.form-label {
    /* Отображение как блочный элемент */
    display: block;
    /* Отступ снизу */
    margin-bottom: 8px;
    /* Цвет текста */
    color: #2c3e50;
    /* Жирность шрифта */
    font-weight: 500;
}

/* Поле ввода */
.form-input {
    /* Ширина 100% */
    width: 100%;
    /* Внутренние отступы */
    padding: 12px 15px;
    /* Граница поля */
    border: 1px solid #ddd;
    /* Закругление углов */
    border-radius: 5px;
    /* Размер шрифта */
    font-size: 1rem;
    /* Плавный переход для границы */
    transition: border-color 0.3s;
}

/* Поле ввода при фокусе */
.form-input:focus {
    /* Изменение цвета границы при фокусе */
    border-color: #3498db;
    /* Удаление стандартного контура */
    outline: none;
    /* Тень при фокусе */
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* Обертка поля пароля */
.password-input-wrapper {
    /* Относительное позиционирование для абсолютных дочерних элементов */
    position: relative;
}

/* Поле пароля */
.password-input {
    /* Отступ справа для кнопки показа пароля */
    padding-right: 45px !important;
}

/* Кнопка показа пароля */
.password-toggle {
    /* Абсолютное позиционирование внутри обертки */
    position: absolute;
    /* Позиционирование справа */
    right: 10px;
    /* Вертикальное центрирование */
    top: 50%;
    transform: translateY(-50%);
    /* Прозрачный фон */
    background: none;
    /* Без границы */
    border: none;
    /* Курсор-указатель */
    cursor: pointer;
    /* Цвет иконки */
    color: #7f8c8d;
    /* Размер иконки */
    font-size: 1.1rem;
    /* Внутренние отступы */
    padding: 5px;
    /* Фиксированные размеры */
    width: 30px;
    height: 30px;
    /* Центрирование содержимого */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Закругленные углы */
    border-radius: 3px;
    /* Плавный переход для цвета и фона */
    transition: color 0.3s, background-color 0.3s;
}

/* Кнопка при наведении */
.password-toggle:hover {
    /* Изменение цвета иконки */
    color: #3498db;
    /* Легкий фон при наведении */
    background-color: #f5f5f5;
}

/* Кнопка при фокусе */
.password-toggle:focus {
    /* Синий контур для доступности */
    outline: 2px solid #3498db;
    /* Отступ контура */
    outline-offset: 2px;
}

/* Кнопка при нажатии */
.password-toggle:active {
    /* Легкое уменьшение размера */
    transform: translateY(-50%) scale(0.95);
}

/* Текст с требованиями к паролю */
.password-requirements {
    /* Меньший размер шрифта */
    font-size: 0.85rem;
    /* Серый цвет текста */
    color: #7f8c8d;
    /* Отступ сверху */
    margin-top: 5px;
    /* Межстрочный интервал */
    line-height: 1.4;
}

/* Кнопка отправки */
.submit-btn {
    /* Ширина на всю доступную ширину */
    width: 100%;
    /* Внутренние отступы */
    padding: 14px;
    /* Синий цвет фона */
    background-color: #3498db;
    /* Белый цвет текста */
    color: white;
    /* Без границы */
    border: none;
    /* Закругленные углы */
    border-radius: 5px;
    /* Размер шрифта */
    font-size: 1.1rem;
    /* Курсор-указатель */
    cursor: pointer;
    /* Плавный переход для фона */
    transition: background-color 0.3s;
    /* Жирный шрифт */
    font-weight: 600;
}

/* Кнопка при наведении */
.submit-btn:hover {
    /* Темно-синий цвет при наведении */
    background-color: #2980b9;
}

/* Кнопка в отключенном состоянии */
.submit-btn:disabled {
    /* Серый цвет фона */
    background-color: #95a5a6;
    /* Курсор "недоступно" */
    cursor: not-allowed;
}

/* Ссылка на страницу входа */
.login-link {
    /* Выравнивание текста по центру */
    text-align: center;
    /* Отступ сверху */
    margin-top: 25px;
    /* Серый цвет текста */
    color: #7f8c8d;
}

/* Ссылка внутри login-link */
.login-link a {
    /* Синий цвет ссылки */
    color: #3498db;
    /* Без подчеркивания */
    text-decoration: none;
    /* Полужирный шрифт */
    font-weight: 500;
}

/* Ссылка при наведении */
.login-link a:hover {
    /* Подчеркивание при наведении */
    text-decoration: underline;
}

/* Сообщение об ошибке */
.error-message {
    /* Светло-красный фон */
    background-color: #ffeaea;
    /* Темно-красный цвет текста */
    color: #d63031;
    /* Внутренние отступы */
    padding: 12px;
    /* Закругленные углы */
    border-radius: 5px;
    /* Отступ снизу */
    margin-bottom: 20px;
    /* Красная левая граница */
    border-left: 4px solid #d63031;
    /* Скрыто по умолчанию */
    display: none;
}

/* Сообщение об успехе */
.success-message {
    /* Светло-зеленый фон */
    background-color: #d4edda;
    /* Темно-зеленый цвет текста */
    color: #155724;
    /* Внутренние отступы */
    padding: 12px;
    /* Закругленные углы */
    border-radius: 5px;
    /* Отступ снизу */
    margin-bottom: 20px;
    /* Зеленая левая граница */
    border-left: 4px solid #155724;
    /* Скрыто по умолчанию */
    display: none;
}

/* Чекбокс условий */
.terms-checkbox {
    /* Flexbox для выравнивания элементов */
    display: flex;
    align-items: flex-start;
    /* Отступ снизу */
    margin-bottom: 20px;
}

/* Сам чекбокс */
.terms-checkbox input {
    /* Отступ справа от чекбокса */
    margin-right: 10px;
    /* Отступ сверху для выравнивания */
    margin-top: 3px;
}

/* Метка чекбокса */
.terms-checkbox label {
    /* Уменьшенный размер шрифта */
    font-size: 0.9rem;
    /* Серый цвет текста */
    color: #7f8c8d;
    /* Межстрочный интервал */
    line-height: 1.4;
}

/* Ссылки в условиях */
.terms-checkbox a {
    /* Синий цвет ссылок */
    color: #3498db;
    /* Без подчеркивания */
    text-decoration: none;
}

/* Ссылки при наведении */
.terms-checkbox a:hover {
    /* Подчеркивание при наведении */
    text-decoration: underline;
}

/* Анимация для спиннера загрузки */
#loadingSpinner {
    /* Анимация вращения */
    animation: spin 1s linear infinite;
}

/* Ключевые кадры анимации вращения */
@keyframes spin {
    /* Начало анимации */
    0% { transform: rotate(0deg); }
    /* Конец анимации */
    100% { transform: rotate(360deg); }
}

/* Медиа-запрос для планшетов и мобильных устройств */
@media (max-width: 768px) {
    .container {
        /* Уменьшенные отступы на мобильных */
        padding: 0 15px;
    }
    
    .registration-form {
        /* Уменьшенные отступы формы */
        padding: 30px 20px;
        margin-bottom: 20px;
    }
    
    .registration-title {
        /* Уменьшенный размер заголовка */
        font-size: 1.7rem;
    }
    
    .registration-container {
        /* Уменьшенные отступы контейнера */
        padding: 15px 15px 20px;
        margin-top: -15px;
    }
}

/* Медиа-запрос для маленьких мобильных устройств */
@media (max-width: 480px) {
    .container {
        /* Минимальные отступы */
        padding: 0 10px;
    }
    
    .registration-container {
        /* Минимальные отступы контейнера */
        padding: 10px 10px 15px;
        margin-top: -10px;
    }
    
    .registration-form {
        /* Компактные отступы формы */
        padding: 25px 15px;
        margin-top: 10px;
        margin-bottom: 15px;
    }
    
    .registration-title {
        /* Компактный размер заголовка */
        font-size: 1.5rem;
    }
    
    .password-toggle {
        /* Уменьшенные размеры кнопки показа пароля */
        width: 25px;
        height: 25px;
        font-size: 1rem;
    }
    
    .password-input {
        /* Уменьшенный отступ под кнопку */
        padding-right: 40px !important;
    }
}