/* Jo Pop Up – front end */

.jo-popup[hidden] {
	display: none !important;
}

.jo-popup {
	--jo-gap: 20px; /* space kept around the popup */
	position: fixed;
	inset: 0;
	z-index: 999999; /* above Divi's fixed header */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--jo-gap);
	box-sizing: border-box;
}

.jo-popup *,
.jo-popup *::before,
.jo-popup *::after {
	box-sizing: border-box;
}

.jo-popup__overlay {
	position: absolute;
	inset: 0;
	background: var(--jo-overlay, rgba(0, 0, 0, 0.7));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.jo-popup__dialog {
	position: relative;
	width: 100%;
	max-width: var(--jo-width, 600px);
	max-height: calc(100vh - var(--jo-gap) * 2);
	max-height: calc(100dvh - var(--jo-gap) * 2);
	overflow: auto;
	background: var(--jo-bg, #fff);
	color: var(--jo-text, #222);
	border: var(--jo-border, 0 solid transparent);
	border-radius: var(--jo-radius, 8px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	outline: none;
}

/* Animations */
.jo-popup--zoom .jo-popup__dialog { transform: scale(0.85); }
.jo-popup--slide .jo-popup__dialog { transform: translateY(40px); }

.jo-popup.is-open .jo-popup__overlay { opacity: 1; }
.jo-popup.is-open .jo-popup__dialog { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.jo-popup__overlay,
	.jo-popup__dialog { transition: none; }
}

/* Close button */
.jo-popup__close {
	position: absolute;
	/* Move inward on big rounded corners so the X isn't clipped */
	top: calc(10px + var(--jo-r-tr, 0px) * 0.3);
	right: calc(10px + var(--jo-r-tr, 0px) * 0.3);
	z-index: 3;
	width: 36px;
	height: 36px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.jo-popup__close:hover,
.jo-popup__close:focus-visible {
	background: rgba(0, 0, 0, 0.85);
	transform: rotate(90deg);
}

/* Built-in layout */
.jo-popup__body {
	display: flex;
	flex-direction: column;
}

.jo-popup__media {
	position: relative;
	overflow: hidden;
	line-height: 0;
}

/* Focal point + zoom (set per popup) apply to every crop mode */
.jo-popup__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: var(--jo-fx, 50%) var(--jo-fy, 50%);
	transform: scale(var(--jo-zoom, 1));
	transform-origin: var(--jo-fx, 50%) var(--jo-fy, 50%);
}

/* Whole image (no crop): never cut anything off */
.jo-crop--auto .jo-popup__img {
	width: 100%;
	height: auto;
	object-fit: contain;
	transform: none;
}

/* With text: limit the image height so the text stays on screen */
.jo-crop--auto .jo-popup__media:has(+ .jo-popup__content) .jo-popup__img {
	max-height: 55vh;
	max-height: 55dvh;
}

/*
 * Image only: the popup takes the image's shape and fits the screen height.
 * Width = available height x image ratio (--jo-ar, from WordPress), capped
 * by the max width setting and the screen width.
 */
.jo-popup--img-only .jo-popup__dialog {
	width: min(100%, var(--jo-width, 600px), calc((100vh - var(--jo-gap) * 2 - var(--jo-bw, 0px) * 2) * var(--jo-ar, 1) + var(--jo-bw, 0px) * 2));
	width: min(100%, var(--jo-width, 600px), calc((100dvh - var(--jo-gap) * 2 - var(--jo-bw, 0px) * 2) * var(--jo-ar, 1) + var(--jo-bw, 0px) * 2));
	overflow: hidden;
}

.jo-popup--img-only .jo-crop--auto .jo-popup__img {
	max-height: calc(100vh - var(--jo-gap) * 2 - var(--jo-bw, 0px) * 2);
	max-height: calc(100dvh - var(--jo-gap) * 2 - var(--jo-bw, 0px) * 2);
}

/* Cropped to a ratio or a fixed height: the box sets the shape, the image fills it */
.jo-crop--ratio .jo-popup__media {
	aspect-ratio: var(--jo-ratio, 16 / 9);
	max-height: 60vh;
}

.jo-crop--custom .jo-popup__media {
	height: var(--jo-img-h, 300px);
	max-height: 60vh;
}

.jo-crop--ratio .jo-popup__img,
.jo-crop--custom .jo-popup__img {
	position: absolute;
	inset: 0;
	height: 100%;
}

.jo-popup__content {
	padding: 32px;
}

.jo-popup__heading {
	margin: 0 0 12px;
	padding: 0;
	color: inherit;
	font-size: 1.75em;
	line-height: 1.2;
}

.jo-popup__text {
	color: inherit;
	line-height: 1.6;
}

.jo-popup__text > :last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

.jo-popup__text p {
	padding-bottom: 1em;
	margin: 0;
}

.jo-popup__actions {
	margin: 20px 0 0;
	padding: 0;
}

.jo-popup__button {
	display: inline-block;
	padding: 12px 28px;
	border-radius: 4px;
	background: var(--jo-btn-bg, #2ea3f2);
	color: var(--jo-btn-text, #fff) !important;
	font-weight: 600;
	text-decoration: none !important;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.jo-popup__button:hover,
.jo-popup__button:focus-visible {
	filter: brightness(1.1);
	transform: translateY(-1px);
}

/* Image only (no text): no padding around image */
.jo-popup__body:not(:has(.jo-popup__content)) .jo-popup__media {
	border-radius: var(--jo-radius, 8px);
	overflow: hidden;
}

/* Image left / right */
@media (min-width: 768px) {
	.jo-popup--img-left .jo-popup__body,
	.jo-popup--img-right .jo-popup__body {
		flex-direction: row;
		align-items: stretch;
	}

	.jo-popup--img-right .jo-popup__body {
		flex-direction: row-reverse;
	}

	.jo-popup--img-left .jo-popup__media,
	.jo-popup--img-right .jo-popup__media {
		position: relative;
		flex: 0 0 45%;
		min-height: 280px;
	}

	/* Image fills its half; the text decides the height */
	.jo-popup--img-left .jo-popup__img,
	.jo-popup--img-right .jo-popup__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-height: none;
		margin: 0;
		object-fit: cover;
	}

	.jo-popup--img-left .jo-popup__content,
	.jo-popup--img-right .jo-popup__content {
		flex: 1 1 auto;
		align-self: center;
	}

	/* A chosen crop keeps its own shape beside the text */
	.jo-popup--img-left .jo-crop--ratio .jo-popup__media,
	.jo-popup--img-right .jo-crop--ratio .jo-popup__media,
	.jo-popup--img-left .jo-crop--custom .jo-popup__media,
	.jo-popup--img-right .jo-crop--custom .jo-popup__media {
		align-self: center;
		min-height: 0;
		max-height: 80vh;
	}
}

/* Image as background */
.jo-popup--img-background .jo-popup__body {
	position: relative;
	min-height: 320px;
	justify-content: center;
}

.jo-popup--img-background .jo-popup__media {
	position: absolute;
	inset: 0;
	height: auto;
	max-height: none;
	aspect-ratio: auto;
}

.jo-popup--img-background .jo-popup__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-height: none;
	margin: 0;
	object-fit: cover;
}

/* Background crop sets the popup's shape (text can still make it taller) */
.jo-popup--img-background .jo-crop--ratio {
	aspect-ratio: var(--jo-ratio);
	min-height: auto;
}

.jo-popup--img-background .jo-crop--custom {
	min-height: var(--jo-img-h, 320px);
}

.jo-popup--img-background .jo-popup__content {
	position: relative;
	z-index: 1;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Custom (editor / Divi Builder) content */
.jo-popup__custom > :last-child {
	margin-bottom: 0;
}

.jo-popup--editor .jo-popup__custom {
	padding: 0;
}

/* Prevent background page scroll while open */
html.jo-popup-locked,
html.jo-popup-locked body {
	overflow: hidden !important;
}

@media (max-width: 767px) {
	.jo-popup {
		--jo-gap: 12px;
	}

	.jo-popup__content {
		padding: 24px 20px;
	}

	.jo-popup__heading {
		font-size: 1.4em;
	}
}