/* DGP Confirmation Modal — slide from top, Materio-styled
 *
 * ── Size configuration ───────────────────────────────────────────────────────
 * Tune these two variables to resize the modal without touching the template.
 *   --bs-modal-width    dialog width   (Bootstrap default: 35rem / 560px)
 *   --dgp-confirm-pad   body padding   (modal-simple default: 4rem)
 * ─────────────────────────────────────────────────────────────────────────── */
#dgpConfirmModal {
    --bs-modal-width:  22rem;    /* narrower than default for a compact confirm dialog */
    --dgp-confirm-pad: 1rem;  /* tighter padding than modal-simple's 4rem           */
}

/* Apply padding (overrides modal-simple's 4rem rule) */
#dgpConfirmModal .modal-content {
    padding: var(--dgp-confirm-pad);
}

/* Reposition close button inside the content box.
   modal-simple floats it at -2.5rem outside the border — looks broken on small modals. */
#dgpConfirmModal .btn-close {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
}

/* ── Position & slide-from-top animation ─────────────────────────────────── */

.dgp-confirm-dialog {
    margin-top: 4rem; /* distance from top of viewport */
}

/* Amplify Bootstrap's default slide-from-top with a spring easing */
#dgpConfirmModal.modal.fade .modal-dialog {
    transform: translate(0, -100px);
    transition: transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
}

#dgpConfirmModal.modal.show .modal-dialog {
    transform: none;
}