.cgl-gallery { max-width: 100%; margin: auto; position: relative; }
.cgl-main { width: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; }
.cgl-main-inner { width: 100%; display: flex; justify-content: center; align-items: flex-end; flex-direction: column; }
.cgl-image { max-width: 100%; max-height: 80vh; height: auto; width: auto; display: none; transition: opacity 0.8s ease; object-fit: contain; }
.cgl-controls { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.cgl-controls button { pointer-events: all; background: rgba(0,0,0,0.5); color: white; border: none; font-size: 2em; cursor: pointer; padding: 5px 10px; }
.cgl-thumbnails { display: flex; align-items: center; overflow: hidden; margin-top: 10px; }
.cgl-thumb-track { display: flex; overflow-x: auto; flex-grow: 1; scroll-behavior: smooth; }
.cgl-thumb { cursor: pointer; margin: 0 2px; max-height: 80px; opacity: 0.6; transition: opacity 0.3s ease, outline 0.3s ease; }
.cgl-thumb-active { opacity: 1; outline: 2px solid #333; }
.cgl-thumb-prev, .cgl-thumb-next { background: rgba(0,0,0,0.3); border: none; font-size: 1.5em; color: white; cursor: pointer; }
.cgl-lightbox { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); text-align: center; }
.cgl-lightbox-img { max-height: 90vh; max-width: 100%; object-fit: contain; margin-top: 5vh; }
.cgl-lightbox .cgl-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 2em; cursor: pointer; }
.cgl-lightbox-controls { position: absolute; width: 100%; top: 50%; display: flex; justify-content: space-between; transform: translateY(-50%); }
.cgl-lightbox-controls button { background: none; border: none; color: white; font-size: 2em; cursor: pointer; }
.cgl-description-container { width: 100%; }
.cgl-description-bar { text-align: center; font-size: 1em; padding: 8px 12px; color: #333; background: #eee; width: 100%; }

.cgl-image {
  cursor: pointer;
}

.cgl-controls button:focus,
.cgl-controls button:active {
  background: rgba(0, 0, 0, 0.5);
  outline: none;
}