/* Desktop and tablet keep Bootstrap's normal centered popup behavior. */
body.modal-open, body.swal2-shown { padding-right: 0 !important; }
@media (max-width: 767.98px) {
    html body .modal {
        top: var(--overlay-top, 0px); height: var(--overlay-height, 100dvh);
        padding: 0 !important; overflow: hidden; z-index: 12000 !important;
    }
    html body .modal .modal-dialog {
        width: 100%; max-width: none !important; height: 100%; min-height: 0; margin: 0 !important;
    }
    html body .modal .modal-content {
        width: 100%; height: 100%; max-height: 100%; min-height: 0;
        border: 0; border-radius: 0 !important; overflow: hidden;
    }
    .modal .modal-header, .modal .modal-footer { flex-shrink: 0; }
    .modal .modal-header { padding-top: max(16px, env(safe-area-inset-top)); }
    .modal .modal-body { padding: 16px !important; }
    .modal .modal-body {
        flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
        overscroll-behavior: contain; -webkit-overflow-scrolling: touch; width: 100%;
    }
    .modal .modal-header, .modal .modal-footer { padding-inline: 16px; }
    .modal input, .modal select, .modal textarea { font-size: 16px !important; }
    .modal .modal-footer, .modal .rfq-modal-footer { flex-wrap: wrap; gap: 8px; }
    .modal .modal-footer > .btn, .modal .rfq-modal-footer > .btn { flex: 1 1 auto; min-height: 44px; margin: 0; }
    .modal .rfq-modal-footer { position: static; padding-inline: 0; }
    .swal2-container { z-index: 20000 !important; padding: 0 !important; }
    .swal2-popup:not(.swal2-toast) {
        width: 100% !important; height: var(--overlay-height, 100dvh);
        max-height: var(--overlay-height, 100dvh); border-radius: 0 !important;
        overflow-y: auto; align-content: center; padding: 24px !important;
    }
    .swal2-popup > * { max-width: min(100%, 720px); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog { transition: none; }
}