/* Confirmation dialogs must also work without the generic .overlay class. */
.confirm-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
  overscroll-behavior: contain;
}

.confirm-overlay .modal-confirm-dialog {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}

.confirm-overlay .modal-confirm-dialog input {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.confirm-overlay .modal-confirm-dialog button {
  min-height: 44px;
}

.confirm-overlay .btn-confirm-submit { color: #fff; }

body:has(.confirm-overlay) {
  overflow: hidden;
}

@media (max-width: 650px) {
  .confirm-overlay { padding: 12px; }
  .confirm-overlay .modal-confirm-dialog {
    padding: 20px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
  .confirm-overlay .modal-confirm-dialog input { font-size: 16px; }
}