/* Front styles for ASP Popup */
.asp-overlay[hidden],
.asp-popup[hidden] { display: none !important; }

html.asp-lock { overflow: visible !important; }
body.asp-lock { overflow: visible !important; }

.asp-overlay {
  position: fixed;
  inset: 0;
  background: transparent; /* keep background unaffected */
  z-index: 9997;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none; /* allow interaction with the page behind */
}
.asp-overlay.is-visible { opacity: 1; }

.asp-popup {
  position: fixed;
  z-index: 9998;
  background: #fff; /* default fallback; can be overridden inline via bg settings */
  color: #000;
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
  border-radius: 8px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 1;
  --asp-anim-duration: 220ms;
  --asp-o-top: 24px;
  --asp-o-right: 24px;
  --asp-o-bottom: 24px;
  --asp-o-left: 24px;
  /* Mobile fallbacks inherit desktop unless overridden */
  --asp-o-top-m: var(--asp-o-top);
  --asp-o-right-m: var(--asp-o-right);
  --asp-o-bottom-m: var(--asp-o-bottom);
  --asp-o-left-m: var(--asp-o-left);
}
/* No default inner padding; use WPBakery columns/rows for spacing */
.asp-popup .asp-content { padding: 0; max-width: 100%; }

/* Ensure embedded elements don't overflow horizontally */
.asp-popup .asp-content img,
.asp-popup .asp-content video,
.asp-popup .asp-content iframe,
.asp-popup .asp-content table,
.asp-popup .asp-content .wpb_row,
.asp-popup .asp-content .vc_row,
.asp-popup .asp-content .wpb_column,
.asp-popup .asp-content .vc_column_container {
  max-width: 100%;
  width: 100%;
}

/* Prevent margin collapse causing overflow with transforms */
.asp-popup[class*="asp-pos-"] { box-sizing: border-box; }

/* Close button */
.asp-popup .asp-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  z-index: 1000; /* ensure close button sits above any inner content */
}

/* Positions (desktop) */
.asp-pos-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.asp-pos-top-left { top: var(--asp-o-top); left: var(--asp-o-left); }
.asp-pos-top-center { top: var(--asp-o-top); left: 50%; transform: translateX(-50%); }
.asp-pos-top-right { top: var(--asp-o-top); right: var(--asp-o-right); }
.asp-pos-center-left { top: 50%; left: var(--asp-o-left); transform: translateY(-50%); }
.asp-pos-center-right { top: 50%; right: var(--asp-o-right); transform: translateY(-50%); }
.asp-pos-bottom-left { bottom: var(--asp-o-bottom); left: var(--asp-o-left); }
.asp-pos-bottom-center { bottom: var(--asp-o-bottom); left: 50%; transform: translateX(-50%); }
.asp-pos-bottom-right { bottom: var(--asp-o-bottom); right: var(--asp-o-right); }
.asp-pos-fullscreen { top: 0; left:0; right:0; bottom:0; width: 100% !important; max-width:none !important; height: 100% !important; max-height: none !important; border-radius: 0; }

/* Mobile overrides (<= 768px) */
@media (max-width: 768px) {
  .asp-pos-m-center { top: 50%; left: 50%; transform: translate(-50%, -50%); bottom:auto; right:auto; }
  .asp-pos-m-top-left { top: var(--asp-o-top-m); left: var(--asp-o-left-m); right:auto; bottom:auto; transform:none; }
  .asp-pos-m-top-center { top: var(--asp-o-top-m); left: 50%; transform: translateX(-50%); right:auto; bottom:auto; }
  .asp-pos-m-top-right { top: var(--asp-o-top-m); right: var(--asp-o-right-m); left:auto; bottom:auto; transform:none; }
  .asp-pos-m-center-left { top: 50%; left: var(--asp-o-left-m); transform: translateY(-50%); right:auto; bottom:auto; }
  .asp-pos-m-center-right { top: 50%; right: var(--asp-o-right-m); transform: translateY(-50%); left:auto; bottom:auto; }
  .asp-pos-m-bottom-left { bottom: var(--asp-o-bottom-m); left: var(--asp-o-left-m); right:auto; top:auto; transform:none; }
  .asp-pos-m-bottom-center { bottom: var(--asp-o-bottom-m); left: 50%; transform: translateX(-50%); right:auto; top:auto; }
  .asp-pos-m-bottom-right { bottom: var(--asp-o-bottom-m); right: var(--asp-o-right-m); left:auto; top:auto; transform:none; }
  .asp-pos-m-fullscreen { top:0; left:0; right:0; bottom:0; width: 100% !important; max-width:none !important; height: 100% !important; max-height:none !important; border-radius: 0; }
}

/* Animations */
.asp-popup.asp-animating { will-change: transform, opacity; }

@keyframes asp-in-fade { from{opacity:0; transform:scale(.98);} to{opacity:1; transform:scale(1);} }
@keyframes asp-out-fade { from{opacity:1; transform:scale(1);} to{opacity:0; transform:scale(.98);} }
.asp-anim-in-fade { animation: asp-in-fade var(--asp-anim-duration) ease both; }
.asp-anim-out-fade { animation: asp-out-fade var(--asp-anim-duration) ease both; }

@keyframes asp-in-zoom { from{opacity:0; transform:scale(.9);} to{opacity:1; transform:scale(1);} }
@keyframes asp-out-zoom { from{opacity:1; transform:scale(1);} to{opacity:0; transform:scale(.9);} }
.asp-anim-in-zoom { animation: asp-in-zoom var(--asp-anim-duration) ease both; }
.asp-anim-out-zoom { animation: asp-out-zoom var(--asp-anim-duration) ease both; }

/* Slide animations */
@keyframes asp-in-slide-up { from{ transform: translateY(20px); opacity: 0; } to{ transform: translateY(0); opacity: 1; } }
@keyframes asp-out-slide-up { from{ transform: translateY(0); opacity: 1; } to{ transform: translateY(20px); opacity: 0; } }
.asp-anim-in-slide-up { animation: asp-in-slide-up var(--asp-anim-duration) ease both; }
.asp-anim-out-slide-up { animation: asp-out-slide-up var(--asp-anim-duration) ease both; }

@keyframes asp-in-slide-down { from{ transform: translateY(-20px); opacity: 0; } to{ transform: translateY(0); opacity: 1; } }
@keyframes asp-out-slide-down { from{ transform: translateY(0); opacity: 1; } to{ transform: translateY(-20px); opacity: 0; } }
.asp-anim-in-slide-down { animation: asp-in-slide-down var(--asp-anim-duration) ease both; }
.asp-anim-out-slide-down { animation: asp-out-slide-down var(--asp-anim-duration) ease both; }

@keyframes asp-in-slide-left { from{ transform: translateX(20px); opacity: 0; } to{ transform: translateX(0); opacity: 1; } }
@keyframes asp-out-slide-left { from{ transform: translateX(0); opacity: 1; } to{ transform: translateX(20px); opacity: 0; } }
.asp-anim-in-slide-left { animation: asp-in-slide-left var(--asp-anim-duration) ease both; }
.asp-anim-out-slide-left { animation: asp-out-slide-left var(--asp-anim-duration) ease both; }

@keyframes asp-in-slide-right { from{ transform: translateX(-20px); opacity: 0; } to{ transform: translateX(0); opacity: 1; } }
@keyframes asp-out-slide-right { from{ transform: translateX(0); opacity: 1; } to{ transform: translateX(-20px); opacity: 0; } }
.asp-anim-in-slide-right { animation: asp-in-slide-right var(--asp-anim-duration) ease both; }
.asp-anim-out-slide-right { animation: asp-out-slide-right var(--asp-anim-duration) ease both; }