/* Home Image Popup Frontend Styles */
.hip-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(15, 23, 42, 0.45); /* Soft dark semi-transparent */
	backdrop-filter: blur(8px); /* Premium blur effect */
	-webkit-backdrop-filter: blur(8px);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.hip-overlay.hip-show {
	opacity: 1;
}

.hip-modal {
	position: relative;
	background: #ffffff;
	border-radius: 16px;
	overflow: visible;
	max-width: 550px;
	width: 100%;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
	transform: scale(0.85) translateY(20px);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.hip-overlay.hip-show .hip-modal {
	transform: scale(1) translateY(0);
}

.hip-close {
	position: absolute;
	top: -16px;
	right: -16px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #0E1F5E; /* Theme Navy */
	color: #ffffff;
	border: 2px solid #ffffff;
	font-size: 22px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
	transition: all 0.2s ease;
	line-height: 1;
	z-index: 1000000;
}

.hip-close:hover {
	background: #FFB020; /* Gold */
	color: #0E1F5E;
	transform: scale(1.1);
}

.hip-modal-content {
	line-height: 0;
}

.hip-modal-content img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 15px;
	max-height: 75vh;
	object-fit: contain;
}

@media (max-width: 576px) {
	.hip-overlay {
		padding: 16px;
	}
	.hip-close {
		top: -12px;
		right: -12px;
		width: 30px;
		height: 30px;
		font-size: 18px;
	}
}