.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: none; justify-content: center; align-items: center} .lightbox.active { display: flex} .lightbox-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px)} .lightbox-content { position: relative; background: white; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; animation: lightbox-fade-in 0.3s ease-out} @keyframes lightbox-fade-in { from { opacity: 0; transform: scale(0.95)} to { opacity: 1; transform: scale(1)} } .lightbox-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid #eee} .lightbox-title { margin: 0; font-size: 1.25rem; color: #333} .lightbox-close { background: none; border: none; font-size: 2rem; color: #888; cursor: pointer; padding: 0; line-height: 1; transition: color 0.2s ease} .lightbox-close:hover { color: #333} .lightbox-main { display: flex; align-items: center; justify-content: space-between; padding: 1rem; flex-grow: 1; overflow: hidden} .lightbox-image-container { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%} .lightbox-image { max-width: 100%; max-height: 100%; object-fit: contain} .lightbox-nav { background: rgba(0, 0, 0, 0.3); color: white; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background 0.2s ease; margin: 0 1rem} .lightbox-nav:hover { background: rgba(0, 0, 0, 0.5)} .lightbox-nav svg { width: 24px; height: 24px} .lightbox-footer { padding: 1rem 1.5rem; border-top: 1px solid #eee; display: flex; justify-content: space-between; align-items: center} .lightbox-description { margin: 0; color: #666} .lightbox-counter { color: #888; font-size: 0.9rem} @media (max-width: 768px) { .lightbox-content { margin: 1rem; max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem)} .lightbox-header { padding: 1rem} .lightbox-main { padding: 0.5rem} .lightbox-nav { margin: 0 0.5rem; width: 36px; height: 36px} .lightbox-nav svg { width: 20px; height: 20px} .lightbox-footer { padding: 1rem; flex-direction: column; gap: 0.5rem; text-align: center} .lightbox-title { font-size: 1.1rem} .lightbox-description { font-size: 0.9rem} .lightbox-counter { font-size: 0.8rem} } @media (max-width: 480px) { .lightbox-content { margin: 0.5rem; max-width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); border-radius: 4px} .lightbox-header { padding: 0.75rem} .lightbox-main { padding: 0.25rem} .lightbox-nav { width: 32px; height: 32px; margin: 0 0.25rem} .lightbox-nav svg { width: 18px; height: 18px} .lightbox-footer { padding: 0.75rem} .lightbox-title { font-size: 1rem} .lightbox-close { font-size: 1.5rem} }