* { box-sizing: border-box;    }


         /* Popup background */
         .popup {	display: none; /* Hidden by default */
             position: fixed;
             z-index: 1100;
             left: 0; top: 0;
             width: 100%; height: 100%;
             background-color: rgba(0,0,0,0.8);
             overflow: auto;
         }
         /* Gallery container */
         .gallery-container {	position: relative;
             margin: 5% auto;
             max-width: 90vw;
             max-height: 80vh;
             background: #111;
             border-radius: 8px;
             box-shadow: 0 0 20px #000;
             display: flex;
             justify-content: center;
             align-items: center;
         }
         /* Images */
         .gallery-slide {	display: none;
             width: 100%;
             max-height: 80vh;
             object-fit: contain;
             border-radius: 8px;
         }
         .gallery-slide.active { display: block;}

         /* Navigation arrows */
         .nav-arrow {	position: absolute;
             top: 50%;
             transform: translateY(-50%);
             color: white;
             font-size: 2.5rem;
             padding: 0 12px;
             cursor: pointer;
             user-select: none;
             background-color: rgba(0,0,0,0.4);
             border-radius: 50%;
             transition: background-color 0.3s ease;
         }
         .nav-arrow:hover { background-color: rgba(255,255,255,0.3);		}
         .nav-arrow.left  { left: 10px;								    }
         .nav-arrow.right { right: 10px;									}

         /* Navigation dots */
         .dots-container {
             text-align: center;
             padding: 10px 0;
             background: #111;
             border-radius: 0 0 8px 8px;
         }
         .dot {		height: 12px;
             width: 12px;
             margin: 0 6px;
             background-color: #bbb;
             border-radius: 50%;
             display: inline-block;
             cursor: pointer;
             transition: background-color 0.3s ease;
         }
         .dot.active { background-color: white;		}

         /* Close button */
         .close-btn {	position: absolute;
             top: 10px;
             right: 15px;
             color: white;
             font-size: 2rem;
             font-weight: bold;
             cursor: pointer;
             user-select: none;
             background-color: rgba(0,0,0,0.4);
             border-radius: 50%;
             padding: 2px 10px;
             transition: background-color 0.3s ease;
         }
         .close-btn:hover { background-color: rgba(255,255,255,0.3);		}

         /* Responsive */
         @media (max-width: 600px) {
             .nav-arrow {	font-size: 1.8rem;
                 padding: 0 8px;
             }
             .close-btn {	font-size: 1.5rem;
                 padding: 2px 8px;
             }
         }