.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;
}

/* Canonical PääAsia Glass popup surface. The overlay remains the sole popup
 * owner; embedded workflows render as content instead of opening a new dialog. */
.pa-modal--glass {
  -webkit-backdrop-filter: blur(var(--pa-glass-blur-backdrop)) saturate(var(--pa-glass-saturation));
  backdrop-filter: blur(var(--pa-glass-blur-backdrop)) saturate(var(--pa-glass-saturation));
}

.pa-modal-dialog--glass {
  border: var(--pa-border-width) solid var(--pa-glass-border);
  background: var(--pa-glass-surface);
  box-shadow: var(--pa-glass-shadow);
  -webkit-backdrop-filter: blur(var(--pa-glass-blur-surface)) saturate(var(--pa-glass-saturation));
  backdrop-filter: blur(var(--pa-glass-blur-surface)) saturate(var(--pa-glass-saturation));
}

.pa-modal-dialog--glass-image { color: var(--pa-color-text-primary); }
.pa-modal-dialog--glass-image .pa-eyebrow { color: var(--pa-color-text-primary); }

.pa-modal-dialog--glass > .pa-modal-dialog,
.pa-modal-dialog--glass dialog.pa-modal-dialog[open] {
  position: static;
  inset: auto;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.pa-modal-dialog--glass dialog.pa-modal-dialog::backdrop {
  display: none;
}

.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); }