/* Фон затемнения для модального окна */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8); /* Темный фон */
}

/* Стили модального окна */
.modal-content {
    border-radius: 10px; /* Скругленные углы */
    border: none; /* Убираем стандартную рамку */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Тень для объема */
    background: linear-gradient(145deg, #ffffff, #f0f0f0); /* Легкий градиент */
    padding: 20px;
}

/* Заголовок модального окна */
.modal-header {
    background-color: #0000FF; /* Синий фон */
    color: #fff; /* Белый текст */
    border-bottom: 2px solid #0056b3; /* Темная нижняя граница */
    padding: 15px 20px;
    border-top-left-radius: 10px; /* Скругление углов */
    border-top-right-radius: 10px;
}

/* Кнопка закрытия в заголовке */
.modal-header .btn-close {
    color: #FF0000;
    font-size: 1.2rem;
    opacity: 0.8;
}
.modal-header .btn-close:hover {
    opacity: 1;
    color: #ff6666; /* Красный при наведении */
}

/* Основной текст модального окна */
.modal-body {
    color: #333; /* Темный текст */
    font-size: 1rem;
    line-height: 1.6;
    padding: 15px;
    background-color: #ffffff; /* Белый фон */
    border-radius: 5px;
}

/* Нижняя панель (футер) */
.modal-footer {
    background-color: #f8f9fa; /* Светло-серый фон */
    border-top: 1px solid #ddd;
    padding: 15px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    justify-content: flex-end; /* Кнопки выровнены вправо */
}

/* Кнопки в футере */
.modal-footer .btn {
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
.modal-footer .btn-primary {
    background-color: #6c757d;
    color: #fff;
    border: none;
}
.modal-footer .btn-primary:hover {
    background-color: #5a6268;
}

/* Анимация появления модального окна */
@keyframes modal-fade-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal.show .modal-dialog {
    animation: modal-fade-in 0.3s ease-out;
}