/* Comportamento compartilhado: o viewport móvel pertence ao modal;
   cabeçalho/rodapé não encolhem e somente o corpo rola. */
@media (max-width: 767.98px) {
    body.modal-open {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .modal {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        overscroll-behavior: contain;
    }

    .modal .modal-dialog {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .modal .modal-dialog::before { display: none !important; }

    .modal .modal-content {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Alguns modais carregam o conteúdo por AJAX ou envolvem o corpo em form. */
    .modal .modal-content > .modal-loadinfo,
    .modal .modal-content > form:has(> .modal-body),
    .modal .modal-dialog > form:has(> .modal-content) {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
    }

    .modal .modal-header,
    .modal .modal-footer,
    .modal .compra-details__header,
    .modal .compra-details__footer,
    .modal .compra-details__view-tools,
    .modal .compra-details__notice,
    .modal .compra-details__quick-actions {
        flex: 0 0 auto !important;
        border-radius: 0 !important;
    }

    .modal .modal-body,
    .modal .compra-details__body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }
}