/* Popup Overlay */
.webspop-popup-overlay {
	display: none; /* Hidden initially */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background-color set via wp_add_inline_style */
	z-index: 99998; /* Below popup */
	opacity: 0; /* For fade animation */
	transition: opacity 0.3s ease-in-out; /* Fade animation */
}

/* Popup Wrapper */
.webspop-popup-wrap {
	display: none; /* Hidden initially */
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.9); /* Center and scale down initially */
	background-color: #fff;
	padding: 30px; /* Default padding */
	/* border-radius set via wp_add_inline_style */
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
	z-index: 99999; /* On top */
	max-width: 90%; /* Responsive width */
	width: auto; /* Adjust to content */
	max-height: 90vh; /* Prevent excessive height */
	overflow-y: auto; /* Scroll if content overflows */
	opacity: 0; /* For fade animation */
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Fade and scale animation */
}

/* Adjustments for image content */
.webspop-popup-wrap.webspop-image-content {
	padding: 10px; /* Less padding for images */
	background-color: transparent; /* No background for wrapper */
	box-shadow: none; /* No shadow for wrapper */
	overflow: visible; /* Allow close button to be outside */
	width: auto; /* Let image define width */
	max-width: 90%; /* Still limit overall size */
	max-height: 90vh;
}
.webspop-popup-wrap.webspop-image-content .webspop-popup-content {
	line-height: 0; /* Remove extra space below image */
}

/* Style image from wp_get_attachment_image */
.webspop-popup-wrap.webspop-image-content img {
	/* border-radius set via wp_add_inline_style */
	box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Apply shadow to image */
	display: block;
	max-width: 100%; /* Ensure responsiveness */
	height: auto; /* Maintain aspect ratio */
	width: auto; /* Adjust width based on height/max-width */
}

/* General Content Styles */
.webspop-popup-content {
	/* Styles for general content */
}
.webspop-popup-content img { /* Ensure images within HTML content are responsive */
	max-width: 100%;
	height: auto;
}

/* Close Button */
.webspop-popup-close {
	position: absolute;
	/* Position inside the top-right corner */
	top: 10px;
	right: 10px;
	background: #333;
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	font-size: 20px; /* Slightly larger for better visibility */
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	transition: background-color 0.2s;
	z-index: 10; /* Ensure it's above content */
	/* Use Flexbox to center the '×' */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0; /* Remove default padding */
	line-height: 1; /* Reset line-height */
}
/* Adjust close button position for image popups if needed */
.webspop-popup-wrap.webspop-image-content .webspop-popup-close {
	top: -10px; /* Position slightly outside for images */
	right: -10px;
}

.webspop-popup-close:hover {
	background-color: #555;
}

/* Popup 1 styles when open */
body.webspop-popup1-open #webspop-popup1-overlay {
	display: block;
	opacity: 1;
}
body.webspop-popup1-open #webspop-popup1-wrap {
	display: block;
	opacity: 1;
	transform: translate(-50%, -50%) scale(1); /* Scale to normal size */
}

/* Popup 2 styles when open */
body.webspop-popup2-open #webspop-popup2-overlay {
	display: block;
	opacity: 1;
}
body.webspop-popup2-open #webspop-popup2-wrap {
	display: block;
	opacity: 1;
	transform: translate(-50%, -50%) scale(1); /* Scale to normal size */
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.webspop-popup-wrap {
		padding: 20px; /* Adjust padding for smaller screens */
		max-width: 95%;
	}
	.webspop-popup-close {
		width: 25px;
		height: 25px;
		font-size: 18px; /* Adjust font size */
		/* Keep inside position for smaller screens */
		top: 8px;
		right: 8px;
	}
	.webspop-popup-wrap.webspop-image-content {
		padding: 5px; /* Minimal padding for images on mobile */
	}
	.webspop-popup-wrap.webspop-image-content .webspop-popup-close {
		/* Keep outside position for images on mobile */
		top: -8px;
		right: -8px;
	}
}