/* Modal overlay + dialog shell. Teleported ZkModal nodes live on document.body;
   this file must stay imported from the kit / customers entry (not scoped). */

.zk-modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--zk-z-modal, 12000);
}

.zk-modal-overlay__scrim {
  position: absolute;
  inset: 0;
  background: var(--zk-color-overlay, rgba(0, 0, 0, 0.55));
}

.zk-modal-overlay--lower {
  padding: 24vh var(--zk-s-3, 24px) var(--zk-s-3, 24px);
}

.zk-modal-overlay:has(.zk-modal--gallery) {
  align-items: center;
  padding: 2vh 3vw;
}

.zk-modal {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  background: var(--bg-modal, var(--zk-color-surface-sunken, var(--bg-secondary, #161b22)));
  border: 1px solid var(--border-primary, var(--zk-color-border, #30363d));
  border-radius: var(--zk-r-lg, 10px);
  box-shadow: var(--zk-shadow-3, 0 16px 48px rgba(0, 0, 0, 0.35));
  color: var(--text-primary, var(--zk-color-text, #c9d1d9));
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  outline: none;
}

.zk-modal--sm { max-width: 400px; }
.zk-modal--md { max-width: 560px; }
.zk-modal--lg { max-width: 820px; }
.zk-modal--xl { max-width: min(94vw, 1100px); max-height: 88vh; }
.zk-modal--2xl {
  max-width: min(96vw, 1400px);
  max-height: 92vh;
}
.zk-modal--tall {
  max-height: 92vh;
  height: min(92vh, 58rem);
}
.zk-modal--tall .zk-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.zk-modal--gallery {
  width: 94%;
  max-width: 94%;
  height: 92%;
  max-height: 92%;
}
.zk-modal--gallery .zk-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--zk-s-2, 0.75rem) var(--zk-s-3, 1.25rem);
}

.zk-modal__header {
  display: flex;
  align-items: center;
  gap: var(--zk-s-2, 8px);
  padding: var(--zk-s-2, 0.5rem) var(--zk-s-1, 1.75rem) var(--zk-s-1, 0.5rem) var(--zk-s-2, 1.75rem);
  border-bottom: 1px solid var(--zk-color-divider, var(--border-primary, #30363d));
}
.zk-modal__title {
  flex: 1;
  margin: 0;
  font-size: var(--zk-fs-lg, 16px);
  font-weight: var(--zk-fw-semibold, 600);
  color: var(--zk-color-text, var(--text-primary, #c9d1d9));
}
.zk-modal__close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--zk-color-text-subtle, var(--text-secondary, #8b949e));
  cursor: pointer;
  font-size: var(--zk-fs-2xl, 22px);
  line-height: 1;
  padding: 0 var(--zk-s-1, 8px);
}
.zk-modal__close:hover { color: var(--zk-color-text, var(--text-primary, #c9d1d9)); }
.zk-modal__close:focus-visible {
  outline: 2px solid var(--zk-color-focus-ring, var(--accent-blue, #1f6feb));
  outline-offset: 2px;
  border-radius: var(--zk-r-sm, 4px);
}

.zk-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--zk-s-1, 1.715rem) var(--zk-s-3, 1.715rem) var(--zk-s-3, 1.715rem) var(--zk-s-3, 1.715rem);
}
.zk-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: var(--zk-s-2, 0.5rem);
  border-top: 1px solid var(--border-primary, var(--zk-color-divider, #30363d));
  background: var(--bg-modal, var(--zk-color-surface-sunken, var(--bg-tertiary, #0d1117)));
}