.event-popup {

  position: fixed;

  right: 2rem;
  bottom: 2rem;

  z-index: 500;

  opacity: 0;
  transform: translateY(20px);

  pointer-events: none;

  transition:
    opacity .3s ease,
    transform .3s ease;

}


.event-popup.visible {

  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;

}



.event-popup-card {

  width: 360px;

  background: var(--warm-white);

  border:
    1px solid var(--border);

  border-radius: 10px;

  padding: 2rem;

  box-shadow:
    0 12px 40px rgba(0,0,0,.12);

  position: relative;

}



.event-popup-card h2 {

  font-family: var(--serif);

  font-size: 1.5rem;

  line-height: 1.25;

  margin-bottom: 1rem;

}



.event-popup-card p {

  color: var(--text-mid);

}



.event-popup-details {

  margin: 1rem 0;

  font-weight: 700;

}



.event-popup-close {

  position:absolute;

  top:10px;

  right:15px;


  border:none;

  background:none;


  font-size:1.5rem;

  cursor:pointer;

  color:var(--text-light);

}



.event-popup-close:hover {

  color:var(--text-dark);

}



@media(max-width:600px){


.event-popup {

  left:1rem;

  right:1rem;

  bottom:
  calc(1rem + env(safe-area-inset-bottom));

}


.event-popup-card {

  width:100%;

  padding:1.5rem;

}


.event-popup-card .btn-primary {

  display:block;

  text-align:center;

}


}