/*==================================================
J-Tech Modal
Version:1.0.0
==================================================*/


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

.jtr-modal{

	position:fixed;

	inset:0;

	display:none;

	align-items:center;

	justify-content:center;

	padding:20px;

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

	backdrop-filter:blur(5px);

	z-index:999999;

	opacity:0;

	transition:.30s;

}

.jtr-modal.active{

	display:flex;

	opacity:1;

}


/*==================================================
Box
==================================================*/

.jtr-modal-box{

	width:100%;

	max-width:520px;

	background:#fff;

	border-radius:20px;

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

	overflow:hidden;

	animation:jtrModal .30s ease;

}


/*==================================================
Animation
==================================================*/

@keyframes jtrModal{

	from{

		transform:translateY(25px) scale(.95);

		opacity:0;

	}

	to{

		transform:translateY(0) scale(1);

		opacity:1;

	}

}


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

.jtr-modal-header{

	display:flex;

	align-items:center;

	justify-content:space-between;

	padding:20px 25px;

	border-bottom:1px solid var(--jtr-border);

}

.jtr-modal-title{

	font-size:20px;

	font-weight:700;

	color:var(--jtr-text);

}

.jtr-modal-close{

	width:40px;

	height:40px;

	border:none;

	border-radius:50%;

	background:#f3f4f6;

	cursor:pointer;

	font-size:16px;

	transition:.25s;

}

.jtr-modal-close:hover{

	background:var(--jtr-primary);

	color:#fff;

}


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

.jtr-modal-body{

	padding:25px;

	color:var(--jtr-text);

	line-height:1.7;

}


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

.jtr-modal-footer{

	display:flex;

	justify-content:flex-end;

	gap:12px;

	padding:20px 25px;

	border-top:1px solid var(--jtr-border);

}


/*==================================================
Responsive
==================================================*/

@media(max-width:768px){

	.jtr-modal-box{

		max-width:100%;

	}

	.jtr-modal-footer{

		flex-direction:column;

	}

	.jtr-modal-footer .jtr-btn{

		width:100%;

	}

}