/* Стили для окна ошибок или уведомлений */
#error-window {
    display: none; /* Сначала скрыто */
    position: fixed; /* Фиксированное позиционирование */
    bottom: 20px; /* Расположение внизу */
    right: 20px; /* Расположение справа */
    background-color: #ffffff; /* Белый фон */
    border: 1px solid #e2e8f0; /* Светлая граница */
    border-radius: 12px; /* Скругленные углы */
    padding: 15px; /* Отступы внутри */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Тень для выделения */
    z-index: 9999999; /* Поверх всех элементов */
    width: 15vw; /* Адаптивная ширина */
    min-width: 200px; /* Минимальная ширина */
    max-width: 300px; /* Максимальная ширина */
    height: auto; /* Высота автоматическая */
    flex-direction: column; /* Вертикальное расположение элементов */
    align-items: center; /* Горизонтальное центрирование */
    justify-content: center; /* Центрирование по вертикали */
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(-20px);
}

#error-window.show {
    display: flex; /* Показываем окно */
    opacity: 1;
    transform: translateY(0);
}

/* Заголовок уведомления */
#error-title {
    font-size: 1em; /* Размер шрифта */
    color: #2d3748; /* Темно-серый текст */
    font-weight: 600; /* Полужирный шрифт */
    margin-bottom: 10px; /* Отступ под заголовком */
    text-align: center; /* Центрирование текста */
}

/* Сообщение об ошибке или уведомлении */
#error-message {
    font-size: 0.9em; /* Размер шрифта */
    color: #4a5568; /* Серо-синий текст */
    text-align: center; /* Выравнивание текста по центру */
    word-wrap: break-word; /* Перенос длинных слов */
    white-space: normal; /* Разрешение переноса текста */
    line-height: 1.5; /* Интерлиньяж для удобочитаемости */
    width: 100%; /* Занимает всю доступную ширину */
    box-sizing: border-box; /* Включает padding и border в ширину */
    margin: 0; /* Убираем отступы */
}

/* Кнопка закрытия */
#error-window .close-button {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #718096; /* Серо-голубой текст */
    transition: color 0.3s ease;
    padding: 5px;
}

#error-window .close-button:hover {
    color: #667eea; /* Синий при наведении */
}

/* Стили для разных типов уведомлений */
#error-window.success {
    border-color: #4caf50; /* Зеленая граница */
    box-shadow: 0 4px 6px rgba(76, 175, 80, 0.2); /* Зеленая тень */
}

#error-window.error {
    border-color: #f44336; /* Красная граница */
    box-shadow: 0 4px 6px rgba(244, 67, 54, 0.2); /* Красная тень */
    color: #b71c1c; /* Красный текст */
}

#error-window.warning {
    border-color: #ffeb3b; /* Желтая граница */
    box-shadow: 0 4px 6px rgba(255, 235, 59, 0.2); /* Желтая тень */
    color: #f57c00; /* Оранжевый текст */
}