:root{
    --popup-max: 724px; /* change per site if needed */
    --popup-pad: 16px;
    --overlay: rgba(0,0,0,.7);
  }

  .one-time-modal-overlay{
    position:fixed; inset:0;
    background: var(--overlay);
    display:flex; align-items:center; justify-content:center;
    padding: var(--popup-pad);
    z-index:99999;
  }

  .one-time-modal{
    position:relative;
    width:100%;
    max-width: var(--popup-max);


    /* key: keep the whole popup always within viewport */
    max-height: calc(100vh - (var(--popup-pad) * 2));
  }

  /* create a “safe” top area so the X never gets clipped */
  .one-time-modal-inner{
    position:relative;
    padding: calc(var(--popup-pad) + 44px) var(--popup-pad) var(--popup-pad);
    box-sizing:border-box;
  }

  .one-time-modal img{
    display:block;
    width:100%;
    max-width: var(--popup-max);

    /* key: image never exceeds available viewport height */
    max-height: calc(100vh - (var(--popup-pad) * 2) - 44px - (var(--popup-pad) * 2));
    object-fit: contain;

    /* optional but helpful: keep it square-ish */
    aspect-ratio: 1 / 1;
  }

  .one-time-modal-close{
    position:absolute;
    top: var(--popup-pad);
    right: var(--popup-pad);
    width:44px; height:44px;
    border:0;
    border-radius:999px;
    cursor:pointer;
    background:rgba(0,0,0,.6);
    color:#fff;
    font-size:26px;
    line-height:44px;
    text-align:center;
    z-index: 999;
  }

  .one-time-modal-close:focus{
    outline:3px solid #fff;
    outline-offset:2px;
  }

  .one-time-modal-overlay[hidden]{ display:none; }