/* ===== Reusable full-screen iframe overlay ===== */

.preview-frame-container{
  position:fixed; inset:0;
  z-index:10000;
  background:rgba(0,0,0,.8);
  display:none;            /* toggled by JS */
  justify-content:center;
  align-items:center;
}

.preview-frame-inner{
  width:100%; height:100%;
  border-radius:0; border:0;
  overflow:hidden; position:relative;
  background:#fff;
  pointer-events:auto;
}

.preview-frame-inner iframe{
  width:100%; height:100%;
  border:0; display:block;
  position:relative; z-index:1;
}

/* Close button (top-left for easy reach) */
.close-btn{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top));
  left:10px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:50%;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:bold; color:#555;
  cursor:pointer; z-index:2;
  box-shadow:2px 2px 5px rgba(0,0,0,.2);
}

/* Visually hidden utility for the dialog title */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}

/* Lock scroll when overlay is open */
body.lock{ overflow:hidden; }

/* Motion-safe defaults */
@media (prefers-reduced-motion: reduce){
  .preview-frame-container,
  .preview-frame-inner,
  .close-btn{ transition:none !important; }
}