/* Popup base */
.dpm-overlay{
  position:fixed;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
  z-index: var(--dpm-z, 2147483646);
}
.dpm-dialog{
  position:fixed;
  left:50%;
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  opacity:0;
  transition:opacity .2s,transform .2s;
  width:auto;
  max-width:min(90vw, var(--dpm-max, 600px));
  transform:translate(-50%,-50%) scale(.98);
  max-height:calc(100% - 32px);
  overflow:auto;
  z-index: calc(var(--dpm-z, 2147483646) + 1);
}
.dpm-popup-root.is-open .dpm-overlay{opacity:1;pointer-events:auto}
.dpm-popup-root.is-open .dpm-dialog{opacity:1;transform:translate(-50%,-50%) scale(1)}
.dpm-close{position:absolute;top:8px;right:12px;font-size:24px;background:transparent;border:0;cursor:pointer}
.dpm-content{padding:24px}
body.dpm-scroll-lock{overflow:hidden}

/* Positions */
.dpm-popup-root.pos-center .dpm-dialog{top:50%}
.dpm-popup-root.pos-top .dpm-dialog{top:10%;transform:translateX(-50%) scale(.98)}
.dpm-popup-root.pos-bottom .dpm-dialog{bottom:10%;top:auto;transform:translateX(-50%) scale(.98)}
.dpm-popup-root.pos-top.is-open .dpm-dialog,
.dpm-popup-root.pos-bottom.is-open .dpm-dialog{transform:translateX(-50%) scale(1)}

@media (max-width:480px){
  .dpm-content{padding:16px}
}