.pa-modal {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  align-items: center;
  background: var(--pa-color-overlay);
  display: none;
  inset: 0;
  justify-content: center;
  padding: var(--pa-spacing-m);
  position: fixed;
  z-index: var(--pa-z-modal);
}

.pa-modal-dialog { background: var(--pa-color-surface); border-radius: var(--pa-radius-large); box-shadow: var(--pa-shadow-large); max-height: calc(100vh - (2 * var(--pa-spacing-xl))); max-width: var(--pa-container-narrow); overflow: auto; width: 100%; }
.pa-modal-header,
.pa-modal-content,
.pa-modal-footer { padding: var(--pa-spacing-l); }
.pa-modal-header { align-items: center; border-bottom: var(--pa-border-width) solid var(--pa-color-border); display: flex; gap: var(--pa-spacing-m); justify-content: space-between; }
.pa-modal-footer { align-items: center; border-top: var(--pa-border-width) solid var(--pa-color-border); display: flex; flex-wrap: wrap; gap: var(--pa-spacing-s); justify-content: flex-end; }
.pa-modal-title { color: var(--pa-color-text-primary); font: var(--pa-font-weight-semibold) var(--pa-font-size-heading-m)/var(--pa-line-height-heading) var(--pa-font-family-heading); margin: 0; }


.pa-modal[hidden] {
  display: none !important;
}

.pa-modal.is-open {
  display: flex;
}

body.pa-modal-open {
  overflow: hidden;
}

.pa-modal-dialog {
  position: relative;
}

.pa-modal-content {
  min-width: 0;
}

.pa-modal-close {
  flex: 0 0 auto;
  transition:
    transform 160ms ease,
    background-color 160ms ease;
}


@media (max-width: 767px) {
  .pa-modal {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
    align-items: flex-end;
    padding: 0;
  }

  .pa-modal-dialog {
    border-radius:
      var(--pa-radius-large)
      var(--pa-radius-large)
      0
      0;
    max-height: calc(100dvh - var(--pa-spacing-m));
    max-width: none;
  }

  .pa-modal-header,
  .pa-modal-content,
  .pa-modal-footer {
    padding: var(--pa-spacing-m);
  }
}

/* Sama natiivi dialog-kuori Hallintaan ja julkiselle sivustolle. */
dialog.pa-modal-dialog {
  border: var(--pa-border-width) solid var(--pa-color-border);
  border-radius: var(--pa-radius-large);
  background: var(--pa-color-surface);
  color: var(--pa-color-text-primary);
  box-shadow: var(--pa-shadow-large);
}
dialog.pa-modal-dialog::backdrop {
  background: var(--pa-color-overlay);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pa-modal-close,
.pa-ui-close-button {
  width: var(--pa-control-height-compact);
  min-width: var(--pa-control-height-compact);
  height: var(--pa-control-height-compact);
  min-height: var(--pa-control-height-compact);
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: var(--pa-border-width) solid var(--pa-color-border);
  border-radius: var(--pa-radius-pill);
  background: transparent;
  color: var(--pa-color-text-primary);
}
.pa-modal-close:hover,
.pa-modal-close:focus-visible,
.pa-ui-close-button:hover,
.pa-ui-close-button:focus-visible { transform: scale(1.05); }