/* Figma 229:11430. All rules are scoped to the new demo dialog. */
.demo-modal {
  width:1024px;
  max-width:calc(100% - 32px);
  height:600px;
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  margin:auto;
  padding:24px 16px 16px;
  border:0;
  border-radius:24px;
  background:#fff;
  overflow:hidden;
  box-shadow:none;
}
.demo-modal::backdrop {
  background:rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.demo-modal__close {
  position:absolute;
  z-index:1;
  top:16px;
  right:16px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
}
.demo-modal__close:hover {
  background:#f3f4f6;
}
.demo-modal__content {
  position:relative;
  z-index:0;
  height:100%;
  overflow:auto;
  overscroll-behavior:contain;
  border-radius:16px;
  -webkit-overflow-scrolling:touch;
}
.demo-modal__form {
  width:100%;
  min-height:100%;
}
/* Keep amoCRM's automatic height; use the full available modal width. */
.demo-modal__form .amoforms_iframe {
  display:block;
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border:0;
}
.demo-modal__status {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:16px;
  padding:24px;
  text-align:center;
  background:#fff;
  z-index:1;
}
.demo-modal .demo-modal__status-text {
  margin:0;
  color:var(--muted);
}
@media(max-width:480px) {
  .demo-modal {
    max-width:calc(100% - 24px);
    max-height:calc(100vh - 24px);
    max-height:calc(100dvh - 24px);
    padding:24px 12px 12px;
  }
}