/* auth_app.css - Стили для главной страницы аутентификации */

/* Общий стиль тела страницы */
body {
    background-color: black;  /* Чёрный фон */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;  /* Полная высота экрана */
    margin: 0;
    font-family: Arial, sans-serif;  /* Шрифт по умолчанию */
}

/* Центральная "плита" с формой */
.plate {
    background-color: #333;  /* Тёмно-серый для плиты */
    padding: 40px;
    border-radius: 10px;  /* Закруглённые углы */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5),  /* Тень снизу для приподнятости */
                  0 0 50px rgba(0, 255, 0, 0.1);  /* Лёгкое зелёное свечение */
    text-align: center;  /* Центрирование содержимого */
    width: 300px;  /* Фиксированная ширина */
}

/* Лого */
.logo {
    width: 150px;  /* Размер лого */
    margin-bottom: 20px;  /* Отступ снизу */
}

/* Поля ввода */
input[type="email"], input[type="password"], input[type="text"] {
    width: 100%;  /* Полная ширина плиты */
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #555;  /* Граница */
    border-radius: 5px;
    background-color: #222;  /* Тёмный фон поля */
    color: white;  /* Белый текст */
    box-sizing: border-box;  /* Учёт padding в ширине */
}

/* Подсветка при фокусе: голубо-звёздный свет */
input[type="email"]:focus, input[type="password"]:focus, input[type="text"]:focus {
    outline: none;
    border-color: #00bfff;  /* Голубой */
    box-shadow: 0 0 10px #00bfff,  /* Яркое свечение */
                  0 0 20px #00bfff;
}

/* Кнопки */
.button {
    width: 100%;  /* Полная ширина */
    padding: 10px;
    margin: 10px 0;
    border: none;
    border-radius: 5px;
    background-color: #4caf50;  /* Приятный зелёный */
    color: white;  /* Белый текст */
    cursor: pointer;  /* Курсор руки */
    font-size: 16px;
}

/* Красная кнопка */
.cancel {
    background-color: red !important;
}

/* Эффект при наведении: пульсация и яркое свечение */
.button:hover {
    background-color: #66bb6a;  /* Ярче зелёный */
    box-shadow: 0 0 10px #66bb6a,  /* Свечение */
                  0 0 20px #66bb6a;
    animation: pulse 1s infinite;  /* Пульсация */
}

/* Анимация пульсации */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Таймер */
#timer {
    color: white;
    font-size: 18px;
    margin-bottom: 10px;
}

/* Лоадер */
#loader {
    height: 5px;
    background: linear-gradient(to right, green 0%, green 0%, #333 0%);
    animation: load 3s linear forwards;  /* 3 сек загрузка. */
}

@keyframes load {
    0% { background: linear-gradient(to right, green 0%, #333 0%); }
    100% { background: linear-gradient(to right, green 100%, #333 0%); }
}

/* Стили для модального окна (добавили белый фон, чёрный текст, переносы строк) */
#modal > div {
    background-color: white !important;  /* Белый фон для внутреннего div модального. */
    color: black;  /* Чёрный текст для читаемости. */
}

/* Текст модального с переносами строк */
#modal-text {
    white-space: pre-wrap;  /* Сохраняет переносы строк и оборачивает текст. */
    text-align: left;  /* Выравнивание слева для текста соглашения. */
}