/*
 * Architect Client Portal - Wizard Popup Launcher
 *
 * This stylesheet is intentionally small and scoped to the modal IDs/classes
 * so it can be safely enqueued site-wide.
 */

:root {
  --acp-popup-backdrop: rgba(0, 0, 0, 0.55);
  --acp-popup-radius: 16px;
  --acp-popup-max-width: 1100px;
  --acp-popup-max-height: 90vh;
  --acp-popup-z-index: 999999;
}

html.acp-popup-open,
body.acp-popup-open {
  overflow: hidden !important;
}

#acp-wizard-popup {
  position: fixed;
  inset: 0;
  z-index: var(--acp-popup-z-index);
  display: none;
}

#acp-wizard-popup.is-open {
  display: block;
}

#acp-wizard-popup .acp-wizard-popup__backdrop {
  position: absolute;
  inset: 0;
  background: var(--acp-popup-backdrop);
}

#acp-wizard-popup .acp-wizard-popup__dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(var(--acp-popup-max-width), calc(100vw - 32px));
  height: min(var(--acp-popup-max-height), calc(100vh - 32px));
  background: #fff;
  border-radius: var(--acp-popup-radius);
  overflow: hidden;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.35);
}

#acp-wizard-popup .acp-wizard-popup__toolbar {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}

#acp-wizard-popup .acp-wizard-popup__close {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 10px;
}

#acp-wizard-popup .acp-wizard-popup__close:hover {
  background: rgba(0, 0, 0, 0.06);
}

#acp-wizard-popup .acp-wizard-popup__frame {
  width: 100%;
  height: calc(100% - 48px);
  border: 0;
  display: block;
}

@media (max-width: 640px) {
  :root {
    --acp-popup-max-height: 92vh;
  }

  #acp-wizard-popup .acp-wizard-popup__dialog {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    border-radius: 14px;
  }
}