/**
 * VH Citizenship — sitewide form popup lightbox (VHC-P3).
 *
 * Hosts the "Check My Eligibility" (Fluent Form 6) and "Book a Private
 * Consultation" (Fluent Form 8) forms in a shared full-viewport lightbox,
 * triggered from any CTA sitewide whose intent matches those two flows
 * (see vhc-form-modal.js for the click-interception logic). Both forms
 * already carry their own complete premium styling via Fluent Forms'
 * per-form custom CSS — this file only styles the surrounding chrome
 * (backdrop, scroll viewport, close control) and never reaches into form
 * internals.
 *
 * Structure: .vhc-modal-backdrop (fixed, full viewport, the "page" itself)
 *   > .vhc-modal-close (fixed top-right, stays put regardless of scroll)
 *   > .vhc-modal-viewport (the ONLY scrolling element — its own scrollbar
 *     chrome is hidden per-browser below, "no scrollbar" per the brief,
 *     while wheel/touch/keyboard scroll still works if content genuinely
 *     exceeds viewport height; overflow-x is clipped so it can never
 *     scroll sideways)
 *     > .vhc-modal-panel (centers the form both axes; the form's own
 *       width/max-width rules do the rest)
 *
 * z-index tokens (--vhc-z-modal-backdrop / --vhc-z-modal) were already
 * reserved in vhc-tokens.css ahead of this component; using them here
 * rather than introducing new stacking values.
 */

.vhc-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--vhc-z-modal-backdrop);
	/* visibility:hidden (not display:none): keeps the form's own layout
	   fully intact - Fluent Forms' step-pagination JS and the phone
	   field's intl-tel-input widget both do real layout measurement
	   during their one-time init - while remaining unpainted and
	   unreachable (removed from hit-testing and tab order) until opened.
	   The actual "Continue" / phone-widget bug this project hit was
	   unrelated to this rule (see the wp_footer priority fix in
	   functions.php) - this hiding technique itself was fine throughout. */
	visibility: hidden;
	pointer-events: none;
	background: rgba(8, 20, 15, 0.94);
	opacity: 0;
	transition: opacity 220ms var(--vhc-ease-out, ease-out), visibility 0s linear 220ms;
}

.vhc-modal-backdrop.is-open {
	visibility: visible;
	pointer-events: auto;
	transition: opacity 220ms var(--vhc-ease-out, ease-out), visibility 0s linear 0s;
}

.vhc-modal-backdrop.is-visible {
	opacity: 1;
}

.vhc-modal-viewport {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-ms-overflow-style: none; /* legacy Edge */
	scrollbar-width: none; /* Firefox */
}

.vhc-modal-viewport::-webkit-scrollbar {
	display: none; /* Chrome, Safari, new Edge */
}

.vhc-modal-panel {
	position: relative;
	z-index: var(--vhc-z-modal, 910);
	box-sizing: border-box;
	width: 100%;
	max-width: 1180px;
	min-height: 100%;
	margin: 0 auto;
	padding: clamp(24px, 5vh, 64px) clamp(16px, 4vw, 40px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	transform: translateY(18px) scale(0.97);
	opacity: 0;
	transition: transform 340ms var(--vhc-ease-entrance, cubic-bezier(0.16, 1, 0.3, 1)),
		opacity 260ms var(--vhc-ease-out, ease-out);
}

.vhc-modal-backdrop.is-visible .vhc-modal-panel {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* Eligibility form has no card frame of its own (it sits inline in a
   page section normally), so the panel supplies one here. */
.vhc-modal-panel--eligibility > .fluentform_wrapper,
.vhc-modal-panel--eligibility .fluentform {
	background: var(--vhc-color-surface, #F5F3EE);
	border-radius: var(--vhc-radius-lg, 16px);
	box-shadow: 0 40px 100px rgba(8, 20, 15, 0.5);
	padding: clamp(20px, 3vw, 40px);
}

/* Consultation form already renders its own bordered/shadowed card (built
   for the sidebar layout) — nothing added here, so the form's own card is
   the only visible edge (no card nested inside another card). */

.vhc-modal-close {
	/* !important throughout: the site's global Elementor kit CSS has a
	   compound selector (".elementor-kit-5 button", and a second copy
	   scoped "html button") that resets EVERY button's background/color/
	   border sitewide — a class+tag compound selector outranks a lone
	   class selector in specificity even though this rule loads later,
	   so without !important the close button rendered background:
	   transparent and an invisible icon (confirmed via computed-style +
	   stylesheet inspection: the kit rule's rgba(2,1,1,0) was winning
	   over this rule's intended values on every property it also sets). */
	position: fixed !important;
	top: clamp(14px, 3vh, 28px) !important;
	right: clamp(14px, 3vw, 28px) !important;
	z-index: calc(var(--vhc-z-modal, 910) + 1) !important;
	display: grid !important;
	place-items: center !important;
	width: 46px !important;
	height: 46px !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.28) !important;
	border-radius: 50% !important;
	background: rgba(15, 35, 23, 0.6) !important;
	color: #FFFFFF !important;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: 0 10px 26px rgba(8, 20, 15, 0.35) !important;
	cursor: pointer !important;
	opacity: 0;
	transform: scale(0.9);
	transition: background-color 160ms var(--vhc-ease-out, ease-out),
		border-color 160ms var(--vhc-ease-out, ease-out),
		transform 160ms var(--vhc-ease-out, ease-out),
		opacity 260ms var(--vhc-ease-out, ease-out);
}

.vhc-modal-backdrop.is-visible .vhc-modal-close {
	opacity: 1;
	transform: scale(1);
}

.vhc-modal-close:hover,
.vhc-modal-close:focus-visible {
	background: var(--vhc-color-accent-gold, #BB7822) !important;
	border-color: var(--vhc-color-accent-gold, #BB7822) !important;
	transform: scale(1.07);
}

.vhc-modal-close svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
}

/* Screen-reader-only label text inside the close button */
.vhc-modal-close .vhc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body.vhc-modal-open {
	overflow: hidden;
}

@media (max-width: 640px) {
	.vhc-modal-panel {
		padding: 20px 14px;
	}

	.vhc-modal-panel--eligibility > .fluentform_wrapper,
	.vhc-modal-panel--eligibility .fluentform {
		padding: 18px;
		border-radius: var(--vhc-radius-md, 8px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vhc-modal-backdrop,
	.vhc-modal-panel,
	.vhc-modal-close {
		transition-duration: 1ms;
	}

	.vhc-modal-panel,
	.vhc-modal-close {
		transform: none;
	}
}