/* FH EyePal - "Book a Live Demo" popup (page-fh-eyepal.php, assets/js/contact-form.js).
 * Plain CSS rather than Tailwind utilities: app.css is a prebuilt bundle and
 * these modal-only classes aren't in it. */

.fh-demo-modal {
	width: min(640px, calc(100% - 32px));
	max-width: none;
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 24px;
	background: #0f172a;
	color: #ffffff;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.fh-demo-modal::backdrop {
	background: rgba(2, 6, 23, 0.7);
	backdrop-filter: blur(2px);
}

.fh-demo-modal[open] {
	animation: fh-demo-modal-in 0.2s ease-out;
}

@keyframes fh-demo-modal-in {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fh-demo-modal[open] { animation: none; }
}

/* Fills the dialog so clicks on the dialog element itself = backdrop clicks. */
.fh-demo-modal__panel {
	position: relative;
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	padding: 40px 24px 28px;
	background: radial-gradient(ellipse 500px 300px at 50% -20%, rgba(34, 211, 238, 0.18), transparent 65%);
}

@media (min-width: 768px) {
	.fh-demo-modal__panel { padding: 48px 40px 36px; }
}

.fh-demo-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.08);
	color: #cbd5e1;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.fh-demo-modal__close:hover,
.fh-demo-modal__close:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	color: #ffffff;
}

html.fh-modal-open {
	overflow: hidden;
}