/**
 * Jumpfactor Popups — base styles.
 * Uses the --jfpopup-zindex CSS variable injected inline by PHP from the
 * Global settings (ACF options page). Width, padding, and background color
 * come per-popup from ACF (data-width on the form, and inline style on
 * .jfpopup__box for padding/bg).
 *
 * The loading skeleton (.jfpsk-* classes) is adapted from the same shimmer
 * concept already used for the site's inline/popup Nexus forms, but with
 * its own class names so it doesn't clash with those styles.
 *
 * These popups are DESKTOP ONLY: they don't show on mobile (see the media
 * query at the end of this file). The backend also skips enqueueing/
 * rendering on mobile (wp_is_mobile()) as an optimization, but the real
 * "is mobile" criterion for showing/hiding is this media query by
 * viewport width.
 */

/*
 * Fixed widget: height comes from data-height (ACF), width from data-width
 * (ACF) or, if not set, from the iframe itself. Position and whether an
 * overlay is shown behind it are independent per-popup ACF fields (see
 * .jfpopup--* modifiers and .jfpopup__overlay below) — neither is tied to
 * the trigger type.
 */
.jfpopup {
	position: fixed;
	display: none;
	z-index: var(--jfpopup-zindex, 999999);
}

.jfpopup.is-open {
	display: block;
}

/* Position modifiers. */
.jfpopup--bottom-left {
	left: 24px;
	bottom: 24px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
}

.jfpopup--bottom-right {
	right: 24px;
	bottom: 24px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
}

.jfpopup--centered {
	inset: 0;
	max-width: 100vw;
	max-height: 100vh;
}

.jfpopup--centered.is-open {
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * Optional dark overlay, only rendered when the popup's Overlay field is on.
 * position: fixed (not absolute) on purpose: .jfpopup itself only sizes to
 * fit its own box for the bottom-left/bottom-right positions (it isn't
 * full-screen), so an absolutely-positioned overlay would only cover the
 * box's own footprint, hidden behind it, instead of dimming the page.
 * Nesting a fixed element inside a fixed ancestor still positions it
 * relative to the viewport (as long as the ancestor has no transform/
 * filter/perspective, which .jfpopup doesn't), so this covers the full page
 * regardless of the popup's own position.
 */
.jfpopup__overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 0;
}

.jfpopup__box {
	position: relative;
	z-index: 1;
	background: #fff;
	width: auto;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
	overflow: auto;
	border-radius: 8px;
	padding: 32px 24px 24px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
	box-sizing: border-box;
}

.jfpopup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #fff;
	z-index: 2;
}

.jfpopup__close:hover,
.jfpopup__close:focus {
	color: #fff;
	opacity: .8;
}

/* ── Nexus form container (embedded by ID) ────────────────────────────────
 * Height and width are set by JS from data-height / data-width (ACF). If no
 * width was set, the container stays auto and the iframe determines it.
 */
.jfpopup__form,
.jf-nexus-form {
	position: relative;
	width: auto;
	/* Reference width while the iframe (auto) hasn't imposed its own,
	   so the skeleton has a visible area instead of collapsing to 0. */
	min-width: 320px;
}

.jfpopup__form iframe {
	width: 100%;
	border: none;
	overflow: hidden;
	display: block;
}

/* Desktop only: this popup doesn't show on mobile. */
/* Popups are desktop-only by default; a popup only shows on mobile if its
   own "Show on mobile too" field is on (rendered as .jfpopup--mobile-ok). */
@media (max-width: 767px) {
	.jfpopup:not(.jfpopup--mobile-ok) {
		display: none !important;
	}
}

/* ── Skeleton (shimmer) while the form's iframe loads ─────────────────────── */
.jfpsk {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	transition: opacity 0.3s ease;
	overflow: hidden;
	height: 100%;
	box-sizing: border-box;
	/* Keeps the shimmer blocks off the container's edges. */
	padding-block: 20px;
	padding-inline: 16px;
}

.jfpsk.is-hidden {
	opacity: 0;
}

.jfpsk-el {
	display: block;
	border-radius: 4px;
	margin-bottom: 14px;
	position: relative;
	overflow: hidden;
	background: #e5e7eb;
}

.jfpsk-el::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.7) 50%, transparent 60%);
	background-size: 200% 100%;
	animation: jfpsk-shimmer 1.6s infinite;
}

@keyframes jfpsk-shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

/* Top row: logo (left) + featured image (right), like the reference design. */
.jfpsk-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.jfpsk-logo {
	height: 28px;
	width: 40%;
	margin-bottom: 0;
}

/* "Form Card" skeleton: centered logo instead of the top logo+image row. */
.jfpsk-logo--center {
	width: 50%;
	height: 32px;
	margin: 0 auto 20px;
}

.jfpsk-image {
	height: 70px;
	width: 35%;
	margin-bottom: 0;
	border-radius: 6px;
}

/* Bold two-line headline + a lighter subtext line underneath it. */
.jfpsk-headline {
	height: 16px;
	width: 100%;
	margin-bottom: 8px;
}

.jfpsk-headline--short {
	width: 70%;
}

.jfpsk-subtext {
	height: 11px;
	width: 90%;
	margin-bottom: 20px;
	background: #eef0f2;
}

.jfpsk-label {
	height: 12px;
	width: 30%;
	margin-bottom: 6px;
	background: #d1d5db;
}

.jfpsk-input {
	height: 44px;
	width: 100%;
	margin-bottom: 16px;
	border-radius: 6px;
}

.jfpsk-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 24px;
	background: none;
}

.jfpsk-grid::after {
	display: none;
}

.jfpsk-field {
	display: flex;
	flex-direction: column;
	margin-bottom: 16px;
}

/* "Form Card" skeleton: the message field sits outside the 2-col grid, full width. */
.jfpsk-field--full {
	width: 100%;
}

/* Verification row (e.g. Cloudflare/Turnstile-style checkbox challenge). */
.jfpsk-verify {
	height: 60px;
	width: 100%;
	margin-bottom: 16px;
	border-radius: 6px;
}

.jfpsk-textarea {
	height: 100px;
	width: 100%;
	margin-bottom: 16px;
	border-radius: 6px;
}

.jfpsk-btn {
	height: 48px;
	width: 100%;
	margin-top: 4px;
	border-radius: 8px;
	background: #d1d5db;
}

@media (max-width: 767px) {
	.jfpsk-grid {
		grid-template-columns: 1fr;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
 * Armour against legacy theme CSS
 *
 * Popups run on client sites whose stylesheets are years old and carry broad
 * rules — `button { }`, `.close { }`, `#content a { }`. Those win on
 * specificity or source order and put a background, a border and padding
 * behind our ×. The close button therefore restates every property such a
 * rule is likely to set; !important is the point, not a shortcut.
 * ────────────────────────────────────────────────────────────────────────── */

.jfpopup button.jfpopup__close,
button.jfpopup__close {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
	opacity: 1 !important;
	transform: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	z-index: 2 !important;
}

.jfpopup__close::before,
.jfpopup__close::after {
	content: none !important;
	display: none !important;
}

.jfpopup button.jfpopup__close:hover,
.jfpopup button.jfpopup__close:focus {
	background: transparent !important;
	color: #fff !important;
	opacity: .8 !important;
}

/* On phones, a mobile-enabled popup takes the screen width and its form
   shrinks to fit instead of keeping its desktop width (jfpopups.js sets
   that width inline, hence !important). Desktop is unchanged. */
@media (max-width: 767px) {
	.jfpopup--mobile-ok .jfpopup__box {
		width: calc(100vw - 32px);
	}

	.jfpopup--mobile-ok .jf-nexus-form,
	.jfpopup--mobile-ok .jf-nexus-form .jfpsk,
	.jfpopup--mobile-ok .jf-nexus-form iframe {
		width: 100% !important;
		max-width: 100%;
		/* The desktop 320px floor would overflow small phones. */
		min-width: 0;
	}
}