/* Component: demo-6 photo viewer. Uses the wedding site's existing palette/type. */
.demo6-stage { position:absolute; inset:0; z-index:1; touch-action:pan-y; cursor:pointer; }
.demo6-stage canvas { display:block; width:100%; height:100%; }
.lightbox.demo6-viewer figure { inset:0; }
.lightbox.demo6-viewer figure img { width:100%; height:100%; max-height:100%; object-fit:cover; }
.lightbox.demo6-ready figure img { opacity:0; }
.lightbox.demo6-viewer .depth-hint,
.lightbox.demo6-viewer figcaption,
.lightbox.demo6-viewer #photoCount { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.lightbox.demo6-viewer .lightbox-controls { inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 max(12px,env(safe-area-inset-left)) 0 max(12px,env(safe-area-inset-right)); pointer-events:none; }
.lightbox.demo6-viewer .lightbox-controls button,
.lightbox.demo6-viewer .dialog-close { background:transparent; border:0; color:var(--paper); pointer-events:auto; filter:drop-shadow(0 1px 2px var(--ink)) drop-shadow(0 0 5px var(--ink)); }
.lightbox.demo6-viewer .lightbox-controls button { width:48px; height:64px; border-radius:4px; font-size:0; display:grid; place-items:center; }
.lightbox.demo6-viewer .lightbox-controls button::before { content:''; display:block; width:16px; height:16px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); }
.lightbox.demo6-viewer #previousPhoto::before { transform:rotate(-135deg); }
.lightbox.demo6-viewer .lightbox-controls button:hover,
.lightbox.demo6-viewer .dialog-close:hover { background:transparent; opacity:.8; }
.lightbox.demo6-viewer .lightbox-controls button:active { transform:scale(.96); }
.lightbox.demo6-viewer .lightbox-controls button,
.lightbox.demo6-viewer .dialog-close { transition:opacity .25s; }
.lightbox.demo6-viewer.controls-hidden .lightbox-controls button,
.lightbox.demo6-viewer.controls-hidden .dialog-close { opacity:0; pointer-events:none; }
.lightbox.demo6-viewer.controls-hidden button:focus-visible { opacity:1; pointer-events:auto; }
.lightbox.demo6-loading .lightbox-controls { opacity:.65; }
.lightbox.demo6-loading::after { content:'Đang tải ảnh…'; position:absolute; z-index:2; top:72px; left:24px; font:13px/1.5 var(--sans); color:var(--paper); background:var(--ink); padding:8px 12px; pointer-events:none; }
@media (prefers-reduced-motion:reduce) {
  .lightbox.demo6-viewer figure img { animation:none; }
  .lightbox.demo6-viewer button { transition:none; }
}