.rpu-backdrop {
  position: fixed; inset: 0;
  background: #000; opacity: .5;
  z-index: 99998;
  transition: opacity .2s ease, visibility .2s ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.rpu-wrap {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 99999;
  opacity: 0;
  transition: opacity var(--rpu-anim-duration,.2s) ease, visibility var(--rpu-anim-duration,.2s) ease;
  visibility: hidden;
  pointer-events: none;
}

.rpu-inner {
  position: relative;
  /* Runs from the 15px floor at 992px to the full 24px at 1300px, the same range
     the width and the type use, so every value moves together. */
  --rpu-pad: clamp(15px, calc(2.9221vw - 13.987px), 24px);
  max-width: 95vw;
  max-height: 95vh;
  background: #fff;
  overflow: auto;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
  opacity: 0;
  /* Covers every property the three animations use, so each one only has to
     declare its own start and end state. */
  transition: transform var(--rpu-anim-duration,.2s) ease, translate var(--rpu-anim-duration,.2s) ease, clip-path var(--rpu-anim-duration,.28s) ease, opacity var(--rpu-anim-duration,.2s) ease;
}

.rpu-wrap.rpu-show { opacity: 1; visibility: visible; pointer-events: auto; }
.rpu-backdrop.rpu-show { opacity: 1; visibility: visible; pointer-events: auto; }

.rpu-wrap.rpu-show .rpu-inner { opacity: 1; }

/* None: appears instantly. The wrapper's own fade is switched off too, otherwise
   the panel would still fade in with it. The hide path falls back to its 350ms
   timer when no transition fires. */
.rpu-wrap.rpu-anim-none { transition: none; }
.rpu-anim-none .rpu-inner { opacity: 1; transition: none; }

/* Fade: a slight scale-up alongside the fade. This is the long-standing
   behaviour, so it stays the default. */
.rpu-anim-fade .rpu-inner { transform: scale(.98); }
.rpu-wrap.rpu-anim-fade.rpu-show .rpu-inner { transform: scale(1); }

/* Slide: enters from the edge the popup is anchored to. Uses the standalone
   translate property so it never fights a transform. */
.rpu-anim-slide .rpu-inner { translate: 0 24px; }
.rpu-anim-slide.rpu-v-top .rpu-inner { translate: 0 -24px; }
.rpu-wrap.rpu-anim-slide.rpu-show .rpu-inner { translate: 0 0; }

/* Reveal: wipes open from the anchored edge. */
.rpu-anim-reveal .rpu-inner { clip-path: inset(100% 0 0 0); }
.rpu-anim-reveal.rpu-v-top .rpu-inner { clip-path: inset(0 0 100% 0); }
.rpu-wrap.rpu-anim-reveal.rpu-show .rpu-inner { clip-path: inset(0 0 0 0); }

/* Movement is dropped for visitors who ask for reduced motion. The wrapper still
   transitions its opacity, which is what the hide routine waits on. */
@media (prefers-reduced-motion: reduce) {
  .rpu-anim-fade .rpu-inner,
  .rpu-wrap.rpu-anim-fade.rpu-show .rpu-inner { transform: none; }
  .rpu-anim-slide .rpu-inner,
  .rpu-anim-slide.rpu-v-top .rpu-inner,
  .rpu-wrap.rpu-anim-slide.rpu-show .rpu-inner { translate: none; }
  .rpu-anim-reveal .rpu-inner,
  .rpu-anim-reveal.rpu-v-top .rpu-inner,
  .rpu-wrap.rpu-anim-reveal.rpu-show .rpu-inner { clip-path: none; }
}

.rpu-close {
  cursor: pointer;
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
}

.rpu-close-inside {
  position: absolute;
  top: 8px; right: 10px;
}

.rpu-close-outside {
  position: absolute;
  top: -40px; right: 0;
  padding: 6px 10px;
  background: #000;
  color: #fff;
  border-radius: 6px;
}

/* The inner panel is a row: an optional image column plus the content column.
   With no image there is a single child, so this matches the previous layout. */
.rpu-inner { display: flex; align-items: stretch; }
.rpu-body { flex: 1 1 auto; min-width: 0; }

.rpu-side {
  flex: 0 0 auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Order rather than duplicated markup, so the image is emitted once. */
.rpu-side-right .rpu-side { order: 2; }

/* Responsive width. A width chosen for the desktop strands the panel at a third
   of a tablet or spills a wide one off a phone, and max-width alone only ever
   clamps a panel down - it cannot widen one that was set narrower. So below
   1100px the configured width gives way to a share of the screen: half of it at
   1100px, opening out to the full width less its gap by about 900px.

   The middle term is that ramp written as a line through the two anchors - 50%
   of 1100px is 550px, 100% of 900px is 900px. The upper bound is the full-width
   rule itself, so the ramp simply saturates into it as the screen narrows and
   nothing steps at 900px. Percentages resolve against the wrapper, so a popup
   pinned to an edge keeps the gap the wrapper is holding and --rpu-width-inset
   matches it on the far side.

   The renderer writes the width inline, hence !important. max-width gives way to
   the wrapper here: the clamp can never exceed the wrapper, and the old 95vw cap
   would otherwise cut into the full-width panel and leave the two gaps uneven.

   This range is deliberately tighter than the 1300px-992px one the type and the
   spacing use: the panel keeps its authored width further down, while the type
   inside it has already started to ease. */
@media (max-width: 1099.98px) {
  .rpu-inner {
    width: clamp(
      50%,
      calc(2475px - 175vw),
      calc(100% - var(--rpu-width-inset, 30px))
    ) !important;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* A third of a phone screen is unusable, so stack instead. */
@media (max-width: 600px) {
  .rpu-inner.rpu-has-side { flex-direction: column; }
  .rpu-has-side .rpu-side { flex-basis: auto !important; min-height: 160px; order: 0; }
}

/* Visible title. Padding matches .rpu-content, with room on the right so a long
   title cannot run under the close button. */
.rpu-title {
  margin: 0;
  padding: var(--rpu-pad) calc(var(--rpu-pad) + 24px) 0 var(--rpu-pad);
  font-size: clamp(
    min(25px, var(--rpu-title-size, 20px)),
    var(--rpu-title-fluid, var(--rpu-title-size, 20px)),
    var(--rpu-title-size, 20px)
  );
  line-height: 1.3;
}

/* With no text size set the bounds collapse to 1em, which is the theme's own
   size, so the only effect left is the 15px floor. */
.rpu-content {
  padding: var(--rpu-pad);
  font-size: clamp(
    min(15px, var(--rpu-text-size, 15px)),
    var(--rpu-text-fluid, var(--rpu-text-size, 1em)),
    var(--rpu-text-size, 1em)
  );
}

/* The plugin's own link sits under the content, sharing its padding. */
.rpu-link-wrap { margin: 0; padding: 0 var(--rpu-pad) var(--rpu-pad); }


.screen-reader-text {
  position: absolute !important; height: 1px; width: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; clip-path: inset(50%);
}