diff --git a/templates/verification_review.html b/templates/verification_review.html index 2bcc304..8e93056 100644 --- a/templates/verification_review.html +++ b/templates/verification_review.html @@ -713,6 +713,73 @@ .empty-state p { color: #9ca3af; } + + /* ── Photo Lightbox ── */ + .photo-lightbox { + display: none; + position: fixed; + z-index: 2000; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.9); + align-items: center; + justify-content: center; + cursor: pointer; + } + .photo-lightbox.active { + display: flex; + } + .photo-lightbox-content { + position: relative; + max-width: 90vw; + max-height: 90vh; + text-align: center; + } + .photo-lightbox-image { + max-width: 100%; + max-height: 80vh; + border-radius: 0.5rem; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); + background: #fff; + padding: 0.5rem; + cursor: default; + } + .photo-lightbox-close { + position: absolute; + top: -48px; + right: 0; + background: rgba(255, 255, 255, 0.9); + border: none; + border-radius: 50%; + width: 40px; + height: 40px; + font-size: 1.2rem; + color: #374151; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + } + .photo-lightbox-close:hover { + background: #fff; + color: #111827; + } + .photo-lightbox-info { + color: #fff; + margin-top: 1rem; + font-size: 0.95rem; + font-weight: 500; + } + .photo-lightbox-hint { + color: rgba(255, 255, 255, 0.65); + margin-top: 0.4rem; + font-size: 0.8rem; + } + .verification-photo { + cursor: zoom-in; + } + + +