#rfop-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9998;
  opacity: 0; transition: opacity .25s ease;
  display: none;
}
#rfop-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(.98);
  max-width: 720px; width: 92vw;
  max-height: 85vh; overflow: auto;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  z-index: 9999;
  opacity: 0; transition: all .25s ease;
  padding: 22px 22px 26px;
  display: none;
}
#rfop-modal .rfop-content p { margin: 0 0 10px; line-height: 1.5; }
#rfop-modal .rfop-content strong { font-weight: 700; }
#rfop-modal .rfop-content u { text-underline-offset: 2px; }
.rfop-close {
  position: absolute; top: 6px; right: 8px;
  border: none; background: transparent;
  font-size: 28px; line-height: 1; cursor: pointer;
}
/* visible state */
#rfop-overlay.rfop-show { display:block; opacity:1; }
#rfop-modal.rfop-show { display:block; opacity:1; transform: translate(-50%,-50%) scale(1); }
@media (max-width: 480px) {
  #rfop-modal { padding: 18px 16px 22px; }
  .rfop-close { font-size: 26px; }
}