/* Lightbox Modal */
.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.lightbox-modal.active {
    display: flex;
}

.lightbox-content {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: inherit;
    height: inherit;
    justify-content: center;
    align-items: center;
}

.lightbox-image {
    text-align: center;
}

.lightbox-caption {
    text-align: center;
    width: 100%;
    line-height: 1em;
    padding: 0.5em 1em;
}

.lightbox-modal button.prev-btn,
.lightbox-modal button.next-btn{
    background-color: #00000000;
    line-height: 2em;
    margin: 0;
    padding: 0 0.1em;
	font-weight: 900;
	font-size: 3em;
}

.pksca-gallery-lightbox-wrapper{
	container-type: inline-size;
	display:flex;
	flex-direction: column;
}

.pksca-active-image-display {
    cursor: pointer;
	display:flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
    align-content: center;
	text-align:center;
	max-width:100%;
}

@container (inline-size < 1024px) {
	.pksca-active-image-display{
		height:320px !important;
	}
}

@container (inline-size > 1024px) {
	.pksca-active-image-display{
		height:480px !important;
	}
}

.pksca-active-image-display img{
	/*flex-basis: fit-content;*/
	max-height:90%;
 	max-width: 90%;
}

/* Initially hide figcaptions */
.pksca-gallery-image figcaption {
    display: none;
}

/* In fullscreen, show figcaptions */
.lightbox-modal.active .pksca-gallery-image figcaption {
    display: block;
}

.lightbox-top-control {
    position: absolute;
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    top: 0.5em;
    right: 1em;
    font-size: 2em;
	line-height:2em;
}

.lightbox-modal button.prev-btn,        
.lightbox-modal button.next-btn{
	position:absolute;	
}

.close-btn,
.prev-btn,
.next-btn,
.play-pause-btn,
.minimize-btn {
    cursor: pointer;
    z-index: 10000;
	font-weight:bold;
	background-color: #00000000;
	border: none;
}

.prev-btn {
    top: 50%;
    left: 0.3em;
    transform: translateY(-50%);
}

.next-btn {
    top: 50%;
    right: 0.3em;
    transform: translateY(-50%);
}

.play-pause-btn {
    margin:0;
	padding:0;
	transition:scale 0.3s ease-in-out;
}

.play-pause-btn:hover{
	font-size:0.8em;	
}

/* Horizontal */  
@media only screen and (min-width: 720px) {  
	.lightbox-image{
		max-width: fit-content;
    	max-height: 80%;
	}
}

@media only screen and (max-width: 720px) {  
	.lightbox-image{
		max-height: fit-content;
    	max-width: 80%;
	}
}

/* Thumbnail Scroll (Horizontal in Fullscreen) */
.pksca-gallery-lightbox {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden; /* Enables horizontal scrolling */
    scroll-behavior: smooth; /* Smooth scrolling */
    padding: 10px 0; /* Add padding if necessary */
}

.pksca-gallery-image {
    margin-right: 10px; /* Space between thumbnails */
    flex-shrink: 0; /* Prevent shrinking of thumbnails */
}

.pksca-gallery-image img {
    width: auto; /* Ensure images scale correctly */
    height: auto; /* Adjust the height based on your requirements */
    cursor: pointer;
}


.pksca-gallery-lightbox.active .pksca-gallery-image {
    max-width: 100px;
}