.popup{
  visibility:hidden;
  position:fixed;
  inset:0px;
  z-index:99999;
  display:grid;
  height:100dvh;
  align-items:center;
  overflow:auto;
  background-color:rgb(0 0 0 / 0.4);
  padding-top:2.5rem;
  padding-bottom:2.5rem;
  opacity:0;
  --tw-backdrop-blur:blur(24px);
  -webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-duration:300ms
}

.popup.open{
  visibility:visible;
  opacity:1
}

.popup-body{
  margin-left:auto;
  margin-right:auto;
  display:grid;
  max-width:56rem;
  gap:2.25rem
}

@media (min-width: 640px){
  .popup-body{
    grid-auto-rows:minmax(0, 1fr)
  }
}

@media (min-width: 768px){
  .popup-body{
    grid-template-columns:repeat(2, minmax(0, 1fr))
  }
}

.popup-card{
  display:flex;
  flex-direction:column;
  gap:1rem;
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity));
  padding-top:2.5rem;
  padding-bottom:2.5rem;
  padding-left:2rem;
  padding-right:2rem;
  text-align:center;
  --tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

@media (min-width: 768px){
  .popup-card{
    padding-left:2.5rem;
    padding-right:2.5rem
  }
}

.popup-card-button{
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
  align-self:center;
  padding-top:0.75rem
}

/* .popup-btn-open {
    @apply !pr-0;
} */

.popup-btn-open{
  display:inline-block;
  min-width:7.5rem;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  border-radius:0.25rem;
  border-width:1px;
  border-style:solid;
  --tw-border-opacity:1;
  border-color:rgb(0 0 0 / var(--tw-border-opacity));
  --tw-bg-opacity:1;
  background-color:rgb(0 0 0 / var(--tw-bg-opacity));
  padding-left:1rem;
  padding-right:1rem;
  padding-top:0.5rem;
  padding-bottom:0.5rem;
  text-align:center;
  font-size:1rem;
  line-height:1.5rem;
  line-height:1.375;
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity));
  text-decoration-line:none;
  transition-duration: 400ms
}


.popup-btn-open:hover{
  --tw-border-opacity:1;
  border-color:rgb(0 0 0 / var(--tw-border-opacity));
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity:1;
  color:rgb(0 0 0 / var(--tw-text-opacity))
}

@media (min-width: 768px){
  .popup-btn-open{
    padding-bottom:0.25rem;
    font-size:1.125rem;
    line-height:1.75rem
  }
}

.popup-btn-open{
  margin-left:1rem;
  --tw-text-opacity:1 !important;
  color:rgb(255 255 255 / var(--tw-text-opacity)) !important
}

.popup-btn-open::after{
  content:var(--tw-content) !important;
  display:none !important
}

.popup-btn-open:hover{
  --tw-text-opacity:1 !important;
  color:rgb(0 0 0 / var(--tw-text-opacity)) !important
}

.popup-btn-close{
  position:absolute;
  top:1rem;
  right:1rem
}

.popup-btn-close svg{
  fill:#fff
}

.popup-redirect .popup-body{
  margin-left:auto;
  margin-right:auto;
  display:block;
  max-width:36rem;
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity));
  padding:1.5rem;
  text-align:center;
  font-size:1.125rem;
  line-height:1.75rem;
  --tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}


@media (min-width: 640px){
  .popup-redirect .popup-body{
    font-size:1.25rem;
    line-height:1.75rem
  }
}

@media (min-width: 768px){
  .popup-redirect .popup-body{
    padding-top:2.5rem;
    padding-bottom:2.5rem;
    padding-left:2rem;
    padding-right:2rem
  }
}