.promo-popup{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.78);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
}
.promo-popup.is-open{
  opacity:1;
  visibility:visible;
}
.promo-popup__dialog{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  max-height:100%;
  padding:5px;
  overflow:hidden;
  border:2px solid var(--gold,#e2b33d);
  border-radius:18px;
  background:#000;
  box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 0 1px rgba(247,196,45,.28);
  transform:translateY(14px) scale(.98);
  transition:transform .25s ease;
}
.promo-popup.is-open .promo-popup__dialog{transform:translateY(0) scale(1)}
.promo-popup__image{
  display:block;
  width:auto;
  height:auto;
  max-width:min(92vw,620px);
  max-height:calc(100vh - 58px);
  border-radius:12px;
}
.promo-popup__close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:2px solid var(--gold2,#f7c42d);
  border-radius:50%;
  color:#fff;
  background:rgba(0,0,0,.82);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
  font:400 32px/1 var(--sys,Arial,sans-serif);
  cursor:pointer;
}
.promo-popup__close:hover,
.promo-popup__close:focus-visible{
  color:#000;
  background:var(--gold2,#f7c42d);
  outline:none;
}
body.promo-popup-open{overflow:hidden}
@media(max-width:767px){
  .promo-popup{padding:14px}
  .promo-popup__dialog{padding:4px;border-radius:14px}
  .promo-popup__image{max-width:calc(100vw - 36px);max-height:calc(100vh - 36px);border-radius:9px}
  .promo-popup__close{top:9px;right:9px;width:40px;height:40px;font-size:29px}
}
@media(prefers-reduced-motion:reduce){
  .promo-popup,.promo-popup__dialog{transition:none}
}