/* --- Всегда поверх всего --- */
.modal {
    z-index: 2000; /* выше любых header'ов, offcanvas и т.п. */
}

.modal-backdrop {
    z-index: 1990;
}

/* Однотонный тёмный фон для всех модалок */
.modal-backdrop.show {
    background-color: #050821;   /* твой темный фон */
    opacity: 0.9;                /* можно 0.7–0.9 по вкусу */
}

/* --- Базовый универсальный стиль карточки модалки --- */
.inclu-modal-content,
.devops-modal { /* devops-modal сюда подмешали для совместимости */
    /* background: #050821;
    color: #ffffff;
    border-radius: 16px; */
    border: none;
    /* padding: 32px 32px 28px; */
    position: relative;
    /* box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); */
}

/* Размер и поведение диалога */
.inclu-modal-dialog {
    max-width: 480px;
    margin: 0 auto;
}

/* --- Кнопка закрытия (общая) --- */
.inclu-modal-close {
    position: absolute;
    right: 16px;
    top: 16px;
    filter: invert(1); /* белый крестик */
    opacity: 0.8;
}

.inclu-modal-close:hover {
    opacity: 1;
}

/* --- Поля ввода для всех модальных форм --- */
.inclu-modal-input,
.devops-input {
    background: #070c28;
    border: 1px solid #171f3d;
    padding: 10px 14px;
    font-size: 14px;
    color: #EDEDFA;
}

.inclu-modal-input::placeholder {
    color: #7c86a8;
}

.inclu-modal-input:focus {
    outline: none;
    box-shadow: 0 0 0 1px #444CED;
    border-color: #444CED;
}

/* textarea в модалках */
.inclu-modal-textarea,
.devops-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Исправляем цвет инпутов при фокусе */
.inclu-modal .inclu-modal-input:focus,
.inclu-modal .devops-input:focus {
    background: #0b1036 !important;  /* чуть светлее, чем #070c28 */
    color: #EDEDFA !important;
    border-color: #444CED !important;
    box-shadow: 0 0 0 1px #444CED !important;
}



.inclu-modal-btn:hover,
.devops-btn:hover {
    background: #3a47d8;
    border-color: #3a47d8;
}

/* Чекбоксы в тёмной теме */
.inclu-modal .form-check-input {
    background-color: transparent;
    border-color: #7c86a8;
}

.inclu-modal .form-check-input:checked {
    background-color: #444CED;
    border-color: #444CED;
}

.inclu-modal .form-check-label {
    font-size: 13px;
}

/* На маленьких экранах модалка почти во всю ширину */
@media (max-width: 575.98px) {
    .inclu-modal-content,
    .devops-modal {
        padding: 24px 20px 20px;
        border-radius: 18px;
    }

    .inclu-modal-dialog {
        max-width: 100%;
        margin: 0 12px;
    }
}