/**
 * ==========================================================
 * SHMT Premium Gallery Lightbox
 * SasthaHouse Marketplace Toolkit
 * ==========================================================
 */

/* ==========================================================
   Overlay
========================================================== */

.shmt-lightbox{

	position:fixed;

	inset:0;

	z-index:999999;

	display:none;

	align-items:center;

	justify-content:center;

}

.shmt-lightbox.is-open{

	display:flex;

}

.shmt-lightbox__overlay{

	position:absolute;

	inset:0;

	background:rgba(0,0,0,.88);

	backdrop-filter:blur(8px);

	cursor:zoom-out;

}

/* ==========================================================
   Dialog
========================================================== */

.shmt-lightbox__dialog{

	position:relative;

	width:min(94vw,1400px);

	height:min(92vh,900px);

	display:flex;

	flex-direction:column;

	z-index:2;

}

/* ==========================================================
   Header
========================================================== */

.shmt-lightbox__header{

	display:flex;

	align-items:center;

	justify-content:space-between;

	padding:18px 0;

	color:#fff;

}

.shmt-lightbox__counter{

	font-size:15px;

	font-weight:600;

	letter-spacing:.03em;

}

.shmt-lightbox__close{

	width:46px;

	height:46px;

	border:none;

	border-radius:50%;

	background:rgba(255,255,255,.12);

	color:#fff;

	font-size:28px;

	cursor:pointer;

	transition:.25s;

}

.shmt-lightbox__close:hover{

	background:rgba(255,255,255,.22);

	transform:rotate(90deg);

}

/* ==========================================================
   Body
========================================================== */

.shmt-lightbox__body{

	flex:1;

	display:flex;

	align-items:center;

	justify-content:center;

	position:relative;

	overflow:hidden;

}

.shmt-lightbox__image{

	max-width:100%;

	max-height:100%;

	object-fit:contain;

	border-radius:14px;

	box-shadow:0 25px 80px rgba(0,0,0,.45);

	user-select:none;

	cursor:zoom-in;

}

/* ==========================================================
   Navigation
========================================================== */

.shmt-lightbox__nav{

	position:absolute;

	top:50%;

	transform:translateY(-50%);

	width:60px;

	height:60px;

	border:none;

	border-radius:50%;

	background:rgba(255,255,255,.12);

	color:#fff;

	font-size:34px;

	cursor:pointer;

	backdrop-filter:blur(10px);

	transition:.25s;

	z-index:10;

}

.shmt-lightbox__nav:hover{

	background:rgba(255,255,255,.24);

	transform:translateY(-50%) scale(1.08);

}

.shmt-lightbox__nav--prev{

	left:-85px;

}

.shmt-lightbox__nav--next{

	right:-85px;

}

/* ==========================================================
   Footer
========================================================== */

.shmt-lightbox__footer{

	padding:18px 0 6px;

	text-align:center;

	color:#fff;

}

.shmt-lightbox__title{

	font-size:15px;

	opacity:.9;

	word-break:break-word;

}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width:991px){

	.shmt-lightbox__dialog{

		width:100vw;

		height:100vh;

		padding:20px;

	}

	.shmt-lightbox__nav{

		width:48px;

		height:48px;

		font-size:26px;

	}

	.shmt-lightbox__nav--prev{

		left:10px;

	}

	.shmt-lightbox__nav--next{

		right:10px;

	}

	.shmt-lightbox__image{

		border-radius:10px;

	}

}

@media (max-width:575px){

	.shmt-lightbox__header{

		padding-bottom:12px;

	}

	.shmt-lightbox__footer{

		padding-top:12px;

	}

	.shmt-lightbox__counter{

		font-size:14px;

	}

}