/* shadcn/ui inspired dialog styles */
.omipop-overlay[hidden],
.omipop-dialog[hidden] { display: none !important; }

.omipop-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.6); /* slate-900/60 */
	backdrop-filter: saturate(180%) blur(6px);
	opacity: 0;
	transition: opacity 200ms ease;
	z-index: 9998;
}

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

.omipop-dialog {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	opacity: 0;
	transform: translateY(8px) scale(0.98);
	transition: opacity 200ms ease, transform 200ms ease;
}

.omipop-dialog.omipop-show {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.omipop-content {
	position: relative;
	background: #ffffff;
	border: 1px solid #e5e7eb; /* gray-200 */
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.18), 0 2px 10px rgba(0,0,0,0.06);
	padding: 0;
	overflow: hidden;
	max-width: min(90vw, 480px); /* Reduced from 640px */
	max-height: 80vh; /* Limit height to 80% of viewport */
}

.omipop-image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh; /* Limit image height */
	object-fit: contain; /* Maintain aspect ratio */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
	.omipop-content {
		max-width: 95vw; /* Use more screen width on mobile */
		max-height: 85vh;
		margin: 20px;
	}
	
	.omipop-image {
		max-height: 65vh;
	}
	
	.omipop-close {
		top: 8px;
		right: 8px;
		width: 28px;
		height: 28px;
		line-height: 28px;
		font-size: 18px;
	}
}

@media (max-width: 480px) {
	.omipop-content {
		max-width: 98vw;
		max-height: 90vh;
		margin: 10px;
	}
	
	.omipop-image {
		max-height: 75vh;
	}
}

.omipop-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
	background: #ffffff;
	color: #0f172a;
	cursor: pointer;
	font-size: 20px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.06);
	transition: background 150ms ease, transform 150ms ease;
}

.omipop-close:hover {
	background: #f8fafc;
	transform: translateY(-1px);
}

.omipop-close:active {
	transform: translateY(0);
}