/**
 * --------------------------------------------------------
 * WP Custom Gallery
 * Fullscreen Modal
 * --------------------------------------------------------
 */

/*----------------------------------------------------------
Modal Root
----------------------------------------------------------*/

.wpcg-modal{
	position:fixed;
	inset:0;
	z-index:999999;

	display:flex;
	align-items:center;
	justify-content:center;

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

	opacity:0;
	visibility:hidden;

	transition:
		opacity .25s ease,
		visibility .25s ease;
}

.wpcg-modal.is-open{

	opacity:1;
	visibility:visible;

}

/*----------------------------------------------------------
Overlay
----------------------------------------------------------*/

.wpcg-modal-overlay{

	position:absolute;
	inset:0;

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

}

/*----------------------------------------------------------
Container
----------------------------------------------------------*/

.wpcg-modal-container{

	position:relative;

	width:100%;
	height:100%;

	display:flex;
	flex-direction:column;

	overflow:hidden;

}

/*----------------------------------------------------------
Stage
----------------------------------------------------------*/

.wpcg-modal-stage{

	position:relative;

	flex:1;

	display:flex;
	align-items:center;
	justify-content:center;

	padding:40px;

	overflow:hidden;

}

/*----------------------------------------------------------
Image
----------------------------------------------------------*/

.wpcg-modal-image{

	max-width:100%;
	max-height:100%;

	object-fit:contain;
	object-position:center;

	user-select:none;
	-webkit-user-drag:none;

	transform:scale(1);

	transition:
		transform .25s ease,
		opacity .25s ease;

	cursor:grab;

}

.wpcg-modal-image:active{

	cursor:grabbing;

}

/*----------------------------------------------------------
Zoom
----------------------------------------------------------*/

.wpcg-modal.zoomed .wpcg-modal-image{

	transform:scale(2);

	cursor:zoom-out;

}

/*----------------------------------------------------------
Loader
----------------------------------------------------------*/

.wpcg-loader{

	position:absolute;
	inset:0;

	display:flex;
	align-items:center;
	justify-content:center;

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

}

/*----------------------------------------------------------
Spinner
----------------------------------------------------------*/

.wpcg-spinner{

	width:46px;
	height:46px;

	border:3px solid rgba(255,255,255,.25);
	border-top-color:#ffffff;

	border-radius:50%;

	animation:wpcg-spin .8s linear infinite;

}

/*----------------------------------------------------------
Close Button
----------------------------------------------------------*/

.wpcg-modal-close{

	position:absolute;

	top:18px;
	right:18px;

	width:48px;
	height:48px;

	display:flex;
	align-items:center;
	justify-content:center;

	border-radius:50%;

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

	color:#ffffff;

	z-index:100;

	transition:all .25s ease;

}

.wpcg-modal-close:hover{

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

	transform:rotate(90deg);

}

/*----------------------------------------------------------
Navigation
----------------------------------------------------------*/

.wpcg-modal-prev,
.wpcg-modal-next{

	position:absolute;

	top:40%;

	width:54px;
	height:54px;

	margin-top:-27px;

	display:flex;
	align-items:center;
	justify-content:center;

	border-radius:50%;

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

	color:#ffffff;

	z-index:50;

	transition:all .25s ease;

}

.wpcg-modal-prev{

	left:20px;

}

.wpcg-modal-next{

	right:20px;

}

.wpcg-modal-prev:hover,
.wpcg-modal-next:hover{

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

	transform:scale(1.08);

}

/*----------------------------------------------------------
Footer
----------------------------------------------------------*/

.wpcg-modal-footer{

	display:flex;
	align-items:center;
	justify-content:space-between;

	padding:18px 28px;

	background:rgba(15,15,15,.95);

	border-top:1px solid rgba(255,255,255,.08);

}

/*----------------------------------------------------------
Caption
----------------------------------------------------------*/

.wpcg-modal-caption{

	flex:1;

	color:#ffffff;

	font-size:15px;

	font-weight:500;

	padding-right:20px;

	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;

}

/*----------------------------------------------------------
Counter
----------------------------------------------------------*/

.wpcg-modal-counter{

	display:flex;
	align-items:center;

	color:#ffffff;

	font-size:14px;

	font-weight:600;

	margin-right:24px;

}

/*----------------------------------------------------------
Toolbar
----------------------------------------------------------*/

.wpcg-modal-toolbar{

	display:flex;
	align-items:center;

	gap:10px;

}

.wpcg-modal-action{

	width:42px;
	height:42px;

	display:flex;
	align-items:center;
	justify-content:center;

	border-radius:50%;

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

	color:#ffffff;

	transition:all .25s ease;

}

.wpcg-modal-action:hover{

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

	transform:translateY(-2px);

}

/*----------------------------------------------------------
SVG
----------------------------------------------------------*/

.wpcg-modal svg{

	width:22px;
	height:22px;

	stroke:currentColor;
	fill:none;

}

/*----------------------------------------------------------
Hidden
----------------------------------------------------------*/

.wpcg-modal[hidden]{

	display:none;

}

/*----------------------------------------------------------
Keyboard Focus
----------------------------------------------------------*/

.wpcg-modal button:focus-visible{

	outline:2px solid #ffffff;

	outline-offset:2px;

}

/*----------------------------------------------------------
Disabled
----------------------------------------------------------*/

.wpcg-modal button:disabled{

	opacity:.3;

	cursor:not-allowed;

}

/*----------------------------------------------------------
Responsive
----------------------------------------------------------*/

@media (max-width:768px){

	.wpcg-modal-stage{

		padding:12px;

	}

	.wpcg-modal-prev,
	.wpcg-modal-next{

		width:42px;
		height:42px;
		background-color: #000 !important;

		margin-top:-21px;

	}

	.wpcg-modal-prev{

		left:10px;

	}

	.wpcg-modal-next{

		right:10px;

	}

	.wpcg-modal-close{

		top:10px;
		right:10px;

		width:42px;
		height:42px;

	}

	.wpcg-modal-footer{

		padding:12px;

		flex-wrap:wrap;

		gap:10px;

	}

	.wpcg-modal-caption{

		width:100%;

		padding-right:0;

		order:3;

		text-align:center;

	}

	.wpcg-modal-counter{

		margin-right:0;

	}

}

/*----------------------------------------------------------
Animation
----------------------------------------------------------*/

@keyframes wpcg-spin{

	from{

		transform:rotate(0deg);

	}

	to{

		transform:rotate(360deg);

	}

}