/* Lightbox with caption + navigation (images & videos) */
:root {
  --szif-lightbox-bg: rgba(0,0,0,.85);
  --szif-lightbox-caption-color: #eee;
  --szif-lightbox-link-color: #8ab4ff;
}

#szifp-zoom { position: fixed; inset: 0; background: var(--szif-lightbox-bg); display: none; align-items: center; justify-content: center; z-index: 999999; }
#szifp-zoom.open { display: flex; }

#szifp-zoom .szifp-wrap { width: 92vw; max-width: 1200px; max-height: 92vh; display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; position: relative; }
@media (min-width: 900px){
  #szifp-zoom .szifp-wrap { grid-template-columns: 2fr 1fr; }
}

#szifp-zoom .szifp-media { display:flex; align-items:center; justify-content:center; position:relative; cursor: default; }
#szifp-zoom .szifp-media img { max-width: 100%; max-height: 90vh; display:block; border-radius: 8px; }

#szifp-zoom .szifp-side { color: var(--szif-lightbox-caption-color); overflow:auto; }
#szifp-zoom .szifp-caption { white-space: pre-wrap; line-height: 1.5; font-size: 15px; }
#szifp-zoom .szifp-link { margin-top: 12px; display:inline-block; text-decoration: underline; color: var(--szif-lightbox-link-color); }

#szifp-zoom .szifp-close { position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,.6); color: #fff; border: 0; padding: 10px 12px; cursor: pointer; border-radius: 6px; font-size:20px; }

/* Nav arrows */
#szifp-zoom .szifp-arrow { position:absolute; top:50%; transform:translateY(-50%); background: rgba(0,0,0,.45); color:#fff; border:0; width:44px; height:64px; cursor:pointer; border-radius:8px; font-size:24px; display:flex; align-items:center; justify-content:center; }
#szifp-zoom .szifp-arrow.left { left: 8px; }
#szifp-zoom .szifp-arrow.right { right: 8px; }
#szifp-zoom .szifp-arrow:focus { outline: 2px solid #fff3; }

/* In lightbox, show a play overlay for videos to hint external open */
#szifp-zoom .szifp-media .szifp-lb-play {
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
}
#szifp-zoom.video .szifp-media .szifp-lb-play { display:flex; }
#szifp-zoom .szifp-lb-play .icon { width:72px; height:72px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px; }
#szifp-zoom.video .szifp-media { cursor: pointer; } /* click-to-open for videos */