@layer kiosk {
/* All selectors scoped; do not touch existing gallery/grid styles */

[data-kiosk-scope] #attract {
  position: fixed; inset: 0;
  display: none; /* programmatically toggled */
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(6px);
  z-index: 1000;
}
[data-kiosk-scope] #attract.show { display: grid; place-items: center; }

[data-kiosk-scope] .face-modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(10px);
  z-index: 2000;
}
[data-kiosk-scope] .face-modal.show { display: flex; }
[data-kiosk-scope] .face-modal-content {
  background: rgba(0,0,0,0.95);
  color: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  width: 90%; max-width: 520px;
  max-height: 90vh; overflow: auto;
  border: 1px solid rgba(255,255,255,0.1);
}

[data-kiosk-scope] #preview {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.9);
  z-index: 2100;
}
[data-kiosk-scope] #preview.active { display: flex; }
[data-kiosk-scope] .preview-container {
  background: #222;
  border-radius: 16px;
  padding: 0.75rem;
  max-width: 92vw; max-height: 92vh;
  display: flex; flex-direction: column; gap: 8px;
}
[data-kiosk-scope] .preview-img-box {
  position: relative;
  max-width: 88vw; max-height: 82vh;
}
[data-kiosk-scope] .preview-img-box img {
  display: block; max-width: 88vw; max-height: 82vh; object-fit: contain;
  border-radius: 8px; background: #111;
}
[data-kiosk-scope] .preview-like-btn {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}
[data-kiosk-scope] .nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  z-index: 2200;
}
[data-kiosk-scope] .nav-btn.prev-btn { left: 12px; }
[data-kiosk-scope] .nav-btn.next-btn { right: 12px; }
[data-kiosk-scope] .slide-counter {
  position: absolute; bottom: 12px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7); color: #fff;
  padding: 6px 12px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.15);
}

[data-kiosk-scope] .diagonal-watermark {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(-28deg);
  opacity: 0.22; font-weight: 700; letter-spacing: 2px;
  pointer-events: none;
}
[data-kiosk-scope] .qr-watermark {
  position: absolute; bottom: 22px; right: 22px;
  width: 68px; height: 68px; pointer-events: none;
}

/* Utilities */
[data-kiosk-scope] .hidden { display: none !important; }
[data-kiosk-scope] #loading {
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); z-index: 3000;
}
[data-kiosk-scope] #loading.visible { display: flex; }
[data-kiosk-scope] .loading-spinner {
  width: 56px; height: 56px; border: 4px solid rgba(255,255,255,0.3);
  border-top-color: #3b82f6; border-radius: 50%;
  animation: kiosk-spin 1s linear infinite;
}
@keyframes kiosk-spin { to { transform: rotate(360deg) } }
}