/* Comportamento compartilhado: o viewport móvel pertence ao modal.
   O corpo rola quando existe; estruturas sem corpo rolam pelo conteúdo. */
@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-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Seções sem .modal-body preservam sua altura e rolam no .modal-content.
       Também permite alcançar o rodapé quando cabeçalho/rodapé excedem a tela. */
    .modal .modal-content > * {
        flex-shrink: 0;
    }

    /* Mantém a cadeia flex até o corpo, inclusive após carregamentos AJAX.
       Sem corpo, o contêiner mantém altura natural para o scroll externo. */
    .modal .modal-content :is(.modal-loadinfo, .load-content, form):has(.modal-body, .compra-details__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;
    }
}