.modal {
  @apply fixed z-50 overflow-y-auto top-0 w-full left-0 hidden;
}

.modal-backdrop {
  @apply fixed inset-0 bg-gray-900 opacity-75;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.modal-content {
  @apply inline-block align-middle bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full mx-auto mt-16;
}

.modal-header {
  @apply flex items-center justify-between p-4 border-b border-gray-200;
}

.modal-body {
  @apply p-6;
}

.modal-footer {
  @apply bg-gray-50 px-4 py-3 flex justify-end gap-x-3;
}

body.modal-open {
  @apply overflow-hidden;
}