.lightbox-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.9);display: none;justify-content: center;align-items: center;z-index: 9999;opacity: 0;transition: opacity 0.3s ease;}.lightbox-overlay.active {display: flex;opacity: 1;}.lightbox-content {position: relative;max-width: 90%;max-height: 90%;display: flex;justify-content: center;align-items: center;}.lightbox-image {max-width: 100%;max-height: 90vh;object-fit: contain;border-radius: 8px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);}.lightbox-close {position: fixed;top: 20px;right: 20px;font-size: 40px;color: #fff;cursor: pointer;z-index: 10001;transition: color 0.3s ease;background: rgba(0, 0, 0, 0.5);width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;border-radius: 50%;}.lightbox-close:hover {color: #ff4757;}.lightbox-nav {position: fixed;top: 50%;transform: translateY(-50%);font-size: 40px;color: #fff;cursor: pointer;z-index: 10001;transition: color 0.3s ease;background: rgba(0, 0, 0, 0.5);width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;border-radius: 50%;}.lightbox-nav:hover {color: #0072ff;background: rgba(0, 0, 0, 0.7);}.lightbox-prev {left: 20px;}.lightbox-next {right: 20px;}.lightbox-counter {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);color: #fff;font-size: 18px;background: rgba(0, 0, 0, 0.5);padding: 10px 20px;border-radius: 25px;}@media (max-width: 768px) {.lightbox-nav {font-size: 35px;width: 50px;height: 50px;}.lightbox-prev {left: 10px;}.lightbox-next {right: 10px;}.lightbox-close {top: 10px;right: 20px;font-size: 30px;}}@media (max-width: 480px) {.lightbox-content {max-width: 95%;}.lightbox-nav {font-size: 30px;width: 45px;height: 45px;}}