.site-popup-layer {
  position: fixed;
  inset: 0;
  z-index: 9999998;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 1rem;
  background: rgba(5, 9, 21, 0.62);
  backdrop-filter: blur(3px);
}

.site-popup-layer.is-vertical-top { align-items: start; }
.site-popup-layer.is-vertical-middle { align-items: center; }
.site-popup-layer.is-vertical-bottom { align-items: end; }
.site-popup-layer.is-horizontal-left { justify-items: start; }
.site-popup-layer.is-horizontal-center { justify-items: center; }
.site-popup-layer.is-horizontal-right { justify-items: end; }

.site-popup-layer[hidden] {
  display: none !important;
}

.site-popup {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 8px;
  background: #fff;
  color: #0a1229;
  box-shadow: 0 28px 80px rgba(5,9,21,.35);
}

.site-popup-close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(10,18,41,.12);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #0a1229;
  cursor: pointer;
}

.site-popup-close iconify-icon { font-size: 1.45rem; }
.site-popup-image { display: block; width: 100%; max-height: 300px; object-fit: cover; }
.site-popup.is-image-only { width: min(380px, 100%); overflow: auto; }
.site-popup.is-image-only .site-popup-image { max-height: none; object-fit: contain; }
.site-popup.is-image-only .site-popup-close { border-color: rgba(255,255,255,.55); background: rgba(0,0,48,.82); color: #fff; }
.site-popup-content { padding: 1.7rem 1.8rem 1.5rem; }
.site-popup-kicker { margin: 0 0 .65rem; color: #315b91; font-family: "Outfit", sans-serif; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.site-popup-content h2 { margin: 0; font-size: 1.65rem; line-height: 1.35; letter-spacing: 0; }
.site-popup-body { margin: .85rem 0 0; color: #5f6c80; font-size: .92rem; line-height: 1.75; }
.site-popup-link { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; min-height: 48px; margin-top: 1.3rem; border-radius: 5px; background: #0a1229; color: #fff; font-size: .88rem; font-weight: 800; }
.site-popup-footer { display: grid; grid-template-columns: 1fr auto; border-top: 1px solid #e2e6ec; }
.site-popup-footer button { min-height: 46px; padding: 0 1rem; border: 0; background: #f7f8fa; color: #677489; font-size: .75rem; font-weight: 700; cursor: pointer; }
.site-popup-footer button + button { border-left: 1px solid #e2e6ec; }

@media (max-width: 520px) {
  .site-popup-layer { padding: .75rem; }
  .site-popup { width: 100%; max-height: calc(100dvh - 1.5rem); }
  .site-popup-content { padding: 1.4rem; }
  .site-popup-content h2 { font-size: 1.4rem; }
}