.wpw-popup-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center;
  z-index:999999;
  padding:16px;
}
.wpw-popup-modal{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  border: 2px solid #000;
}
.wpw-popup-size-small{
  width:min(480px, 85vw);
  max-height: min(360px, 80vh);
}
.wpw-popup-size-medium{
  width:min(680px, 90vw);
  max-height: min(480px, 85vh);
}
.wpw-popup-size-large{
  width:min(900px, 95vw);
  max-height: min(600px, 90vh);
}
.wpw-popup-close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:22px; line-height:1;
  z-index:10;
}
.wpw-popup-left{ background:#f3f3f3; }
.wpw-popup-left img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.wpw-popup-right{
  padding:70px 20px 24px 20px;
  display:flex; flex-direction:column;
  justify-content:center;
  gap:12px;
  text-align:center;
}
/* When popup has no image, ensure right side has top padding for close button */
.wpw-popup-modal > .wpw-popup-right:only-child,
.wpw-popup-modal > .wpw-popup-right[style*="grid-column: 1 / -1"] {
  padding-top: 70px;
}
.wpw-popup-right h2{
  margin:0;
  line-height:1.1;
  letter-spacing:-0.02em;
}
.wpw-popup-message{
  margin:0;
}
.wpw-popup-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 20px;
  border-radius:12px;
  text-decoration:none;
  border:2px solid;
  transition:transform .08s ease, filter .15s ease;
}
.wpw-popup-btn:hover{ filter:brightness(.97); transform:translateY(-1px); }

@media (max-width: 720px){
  .wpw-popup-modal{ grid-template-columns: 1fr; }
  .wpw-popup-right{ 
    padding-top: 90px;
  }
  .wpw-popup-right h2{ font-size:26px; }
  
  /* Mobile image behavior - hide must come first to override default */
  .wpw-mobile-image-hide .wpw-popup-left {
    display: none !important;
  }
  .wpw-mobile-image-hide .wpw-popup-right {
    padding-top: 90px;
    padding-bottom: 32px;
    grid-column: 1 / -1;
  }
  .wpw-mobile-image-shrink .wpw-popup-left {
    height: 180px;
  }
  /* Default: if no specific behavior class, shrink */
  .wpw-popup-left {
    height: 180px;
  }
  .wpw-mobile-image-shrink .wpw-popup-left img {
    object-position: center;
  }
  .wpw-mobile-image-shrink.wpw-mobile-pos-top .wpw-popup-left img {
    object-position: center top;
  }
  .wpw-mobile-image-shrink.wpw-mobile-pos-bottom .wpw-popup-left img {
    object-position: center bottom;
  }
  .wpw-mobile-image-shrink.wpw-mobile-pos-left .wpw-popup-left img {
    object-position: left center;
  }
  .wpw-mobile-image-shrink.wpw-mobile-pos-right .wpw-popup-left img {
    object-position: right center;
  }
}