/* Modais controlados via JavaScript (padrão kndtec)
 * Importante: regras escopadas em `.modal.modal-centered` para não afetar ModalPopupExtender (AjaxControlToolkit).
 */

.modal.modal-centered {
    text-align: left !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /* Fica acima do menu lateral do tema (Nifty/Site.Master) */
    z-index: 20000 !important;

    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    outline: 0;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}

/* Quando o modal está aberto (padrão manual com classes próprias) */
.modal.modal-centered.modal-open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px;
}

/* Quando o modal está fechado (padrão manual com classes próprias) */
.modal.modal-centered.modal-closed {
    display: none !important;
}

/* Quando o modal usa Bootstrap v3 (`.in`) */
.modal.modal-centered.in {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal.modal-centered .modal-dialog {
    position: relative !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center;
    box-sizing: border-box;

    max-width: 600px !important;
    width: 90% !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
}

.modal.modal-centered .modal-dialog.modal-lg {
    max-width: 800px !important;
}

.modal.modal-centered .modal-dialog.modal-xl {
    max-width: 900px !important;
}

@media (min-width: 768px) {
    .modal.modal-centered .modal-dialog {
        width: 600px !important;
    }

    .modal.modal-centered .modal-dialog.modal-lg {
        width: 800px !important;
    }

    .modal.modal-centered .modal-dialog.modal-xl {
        width: 900px !important;
    }
}

/* Transição (mantém compatibilidade com telas que usam `.fade`/`.in`) */
.modal.modal-centered.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -25%) !important;
}

.modal.modal-centered.in .modal-dialog {
    transform: translate(0, 0) !important;
}

/* Backdrop criado pelo nosso JS (não mexe em backdrops do Bootstrap padrão) */
.modal-backdrop[data-knd-modal-backdrop="1"] {
    z-index: 19990 !important;
}

/* Backdrop do Bootstrap (garante que fique atrás do modal) */
.modal-backdrop {
    z-index: 19990 !important;
}