/**
 * JHR Popup Builder — front-end styles.
 */

.jhr-popup {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99998;
	display: none;
}

.jhr-popup[hidden] {
	display: none;
}

.jhr-popup.jhr-popup--visible {
	display: block;
}

/* Overlay ------------------------------------------------------------- */

.jhr-popup__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.7);
	opacity: 0;
	transition: opacity 400ms ease;
}

.jhr-popup--open .jhr-popup__overlay {
	opacity: 1;
}

.jhr-popup--no-overlay .jhr-popup__overlay {
	display: none;
}

/* The wrap is click-through so a popup without an overlay never blocks the
   page; only the box itself captures pointer events. */
.jhr-popup__wrap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
	/* The wrap never scrolls. It is a fixed-height stage whose content box
	   (viewport minus the gutter) is what the box measures its max-height
	   against. Scrolling happens inside the box, so a tall popup can never
	   overflow past the top of the screen and become unreachable. */
	overflow: hidden;
	pointer-events: none;
}

.jhr-popup--no-overlay .jhr-popup__wrap {
	pointer-events: none;
}

/* Box ----------------------------------------------------------------- */

.jhr-popup__box {
	position: relative;
	box-sizing: border-box;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	width: 640px;
	max-width: 100%;
	/* Never taller than the stage. When the design is shorter this does
	   nothing and the vertical position setting applies as normal; when it is
	   taller the box fills the stage, which pins it to the top whatever the
	   vertical position is set to. */
	max-height: 100%;
	background-color: #ffffff;
	box-shadow: 0 24px 60px rgba(16, 24, 40, 0.24);
	pointer-events: auto;
	animation-duration: 400ms;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	outline: none;
}

.jhr-popup--height-full .jhr-popup__box {
	width: 100%;
	height: 100%;
}

/* min-height: 0 is what allows a flex child to shrink below its content size.
   Without it the content would push the box past max-height and no scrollbar
   would ever appear. */
.jhr-popup__content {
	position: relative;
	box-sizing: border-box;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.jhr-popup__content:focus {
	outline: none;
}

.jhr-popup__content:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* Scrollbar and overflow affordance ----------------------------------- */

.jhr-popup--scrollable .jhr-popup__content {
	scrollbar-width: thin;
	scrollbar-color: rgba(31, 41, 51, 0.35) transparent;
}

.jhr-popup--scrollable .jhr-popup__content::-webkit-scrollbar {
	width: 8px;
}

.jhr-popup--scrollable .jhr-popup__content::-webkit-scrollbar-track {
	background: transparent;
}

.jhr-popup--scrollable .jhr-popup__content::-webkit-scrollbar-thumb {
	background-color: rgba(31, 41, 51, 0.35);
	border-radius: 8px;
}

/* A soft edge at the foot of the box so it reads as "more below" on systems
   with overlay scrollbars that stay hidden until you scroll. */
.jhr-popup--scrollable .jhr-popup__box::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 44px;
	pointer-events: none;
	border-bottom-right-radius: inherit;
	border-bottom-left-radius: inherit;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
	opacity: 1;
	transition: opacity 200ms ease;
}

.jhr-popup--at-end .jhr-popup__box::after,
.jhr-popup--no-hint .jhr-popup__box::after {
	opacity: 0;
}

/* Close button -------------------------------------------------------- */

.jhr-popup__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	margin: 0;
	color: #1f2933;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: color 200ms ease, background-color 200ms ease, transform 200ms ease;
}

.jhr-popup__close:hover {
	transform: rotate(90deg);
}

.jhr-popup__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.jhr-popup__close svg {
	width: 16px;
	height: 16px;
	display: block;
}

.jhr-popup--close-outside .jhr-popup__close {
	top: -46px;
	right: 0;
	color: #ffffff;
}

.jhr-popup--close-screen .jhr-popup__close {
	position: fixed;
	top: 18px;
	right: 18px;
	color: #ffffff;
}

.jhr-popup--no-close .jhr-popup__close {
	display: none;
}

/* Popup corner.
 *
 * The button's centre sits exactly on the box's top corner; the Horizontal and
 * Vertical Offset controls (--jhr-close-x / --jhr-close-y) move it from there,
 * positive outward, negative inward. `translate` is used rather than
 * `transform` so the hover rotation still works on top of it. */
.jhr-popup--close-corner {
	/* How far the button reaches past the box edge... */
	--jhr-close-reach-x: calc(var(--jhr-close-size, 38px) / 2 + var(--jhr-close-x, 0px));
	--jhr-close-reach-y: calc(var(--jhr-close-size, 38px) / 2 + var(--jhr-close-y, 0px));
	/* ...and how much of that the Screen Gutter doesn't already cover. */
	--jhr-close-room-x: max(0px, calc(var(--jhr-close-reach-x) - var(--jhr-gutter, 30px)));
	--jhr-close-room-y: max(0px, calc(var(--jhr-close-reach-y) - var(--jhr-gutter, 30px)));
}

.jhr-popup--close-corner .jhr-popup__close {
	top: 0;
	right: 0;
	left: auto;
	translate: calc(50% + var(--jhr-close-x, 0px)) calc(-50% - var(--jhr-close-y, 0px));
}

.jhr-popup--close-corner.jhr-popup--corner-left .jhr-popup__close {
	right: auto;
	left: 0;
	translate: calc(-50% - var(--jhr-close-x, 0px)) calc(-50% - var(--jhr-close-y, 0px));
}

/* When the box fills the screen (full width on mobile, tall content, Full
   screen height) its corner meets the gutter edge. Reserve just enough extra
   room that the button is never cut off by the edge of the screen. Symmetric,
   so centred popups stay centred. */
.jhr-popup--close-corner .jhr-popup__box {
	margin: var(--jhr-close-room-y) var(--jhr-close-room-x);
	max-width: calc(100% - 2 * var(--jhr-close-room-x));
	max-height: calc(100% - 2 * var(--jhr-close-room-y));
}

.jhr-popup--close-corner.jhr-popup--height-full .jhr-popup__box {
	width: calc(100% - 2 * var(--jhr-close-room-x));
	height: calc(100% - 2 * var(--jhr-close-room-y));
}

/* Page scroll lock ---------------------------------------------------- */

/* touch-action is deliberately NOT set here. Setting it on body propagates to
   descendants, which on iOS would also block touch scrolling inside the popup
   itself. The page is held still by overflow (all browsers) plus a fixed body
   applied from JS on touch devices, where overflow alone is not enough. */
html.jhr-popup-locked,
html.jhr-popup-locked body {
	overflow: hidden !important;
}

/* Keep an outside close button reachable when the popup fills the screen. */
.jhr-popup--scrollable.jhr-popup--close-outside .jhr-popup__close {
	position: fixed;
	top: 18px;
	right: 18px;
}

/* Entrance animations -------------------------------------------------- */

.jhr-popup__box.jhr-anim-fadeIn { animation-name: jhrFadeIn; }
.jhr-popup__box.jhr-anim-fadeInUp { animation-name: jhrFadeInUp; }
.jhr-popup__box.jhr-anim-fadeInDown { animation-name: jhrFadeInDown; }
.jhr-popup__box.jhr-anim-fadeInLeft { animation-name: jhrFadeInLeft; }
.jhr-popup__box.jhr-anim-fadeInRight { animation-name: jhrFadeInRight; }
.jhr-popup__box.jhr-anim-slideInUp { animation-name: jhrSlideInUp; }
.jhr-popup__box.jhr-anim-slideInDown { animation-name: jhrSlideInDown; }
.jhr-popup__box.jhr-anim-slideInLeft { animation-name: jhrSlideInLeft; }
.jhr-popup__box.jhr-anim-slideInRight { animation-name: jhrSlideInRight; }
.jhr-popup__box.jhr-anim-zoomIn { animation-name: jhrZoomIn; }
.jhr-popup__box.jhr-anim-bounceIn { animation-name: jhrBounceIn; }
.jhr-popup__box.jhr-anim-flipInX { animation-name: jhrFlipInX; backface-visibility: visible; }

/* Exit animations ------------------------------------------------------ */

.jhr-popup__box.jhr-anim-fadeOut { animation-name: jhrFadeOut; }
.jhr-popup__box.jhr-anim-fadeOutUp { animation-name: jhrFadeOutUp; }
.jhr-popup__box.jhr-anim-fadeOutDown { animation-name: jhrFadeOutDown; }
.jhr-popup__box.jhr-anim-fadeOutLeft { animation-name: jhrFadeOutLeft; }
.jhr-popup__box.jhr-anim-fadeOutRight { animation-name: jhrFadeOutRight; }
.jhr-popup__box.jhr-anim-slideOutUp { animation-name: jhrSlideOutUp; }
.jhr-popup__box.jhr-anim-slideOutDown { animation-name: jhrSlideOutDown; }
.jhr-popup__box.jhr-anim-slideOutLeft { animation-name: jhrSlideOutLeft; }
.jhr-popup__box.jhr-anim-slideOutRight { animation-name: jhrSlideOutRight; }
.jhr-popup__box.jhr-anim-zoomOut { animation-name: jhrZoomOut; }
.jhr-popup__box.jhr-anim-flipOutX { animation-name: jhrFlipOutX; backface-visibility: visible; }

@keyframes jhrFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes jhrFadeOut { from { opacity: 1; } to { opacity: 0; } }

@keyframes jhrFadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }
@keyframes jhrFadeInDown { from { opacity: 0; transform: translate3d(0, -40px, 0); } to { opacity: 1; transform: none; } }
@keyframes jhrFadeInLeft { from { opacity: 0; transform: translate3d(-40px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes jhrFadeInRight { from { opacity: 0; transform: translate3d(40px, 0, 0); } to { opacity: 1; transform: none; } }

@keyframes jhrFadeOutUp { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, -40px, 0); } }
@keyframes jhrFadeOutDown { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, 40px, 0); } }
@keyframes jhrFadeOutLeft { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(-40px, 0, 0); } }
@keyframes jhrFadeOutRight { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(40px, 0, 0); } }

@keyframes jhrSlideInUp { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
@keyframes jhrSlideInDown { from { transform: translate3d(0, -100%, 0); } to { transform: none; } }
@keyframes jhrSlideInLeft { from { transform: translate3d(-100%, 0, 0); } to { transform: none; } }
@keyframes jhrSlideInRight { from { transform: translate3d(100%, 0, 0); } to { transform: none; } }

@keyframes jhrSlideOutUp { from { transform: none; } to { transform: translate3d(0, -100%, 0); } }
@keyframes jhrSlideOutDown { from { transform: none; } to { transform: translate3d(0, 100%, 0); } }
@keyframes jhrSlideOutLeft { from { transform: none; } to { transform: translate3d(-100%, 0, 0); } }
@keyframes jhrSlideOutRight { from { transform: none; } to { transform: translate3d(100%, 0, 0); } }

@keyframes jhrZoomIn { from { opacity: 0; transform: scale3d(0.85, 0.85, 0.85); } to { opacity: 1; transform: none; } }
@keyframes jhrZoomOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale3d(0.85, 0.85, 0.85); } }

@keyframes jhrBounceIn {
	0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
	40% { transform: scale3d(1.06, 1.06, 1.06); }
	70% { transform: scale3d(0.97, 0.97, 0.97); }
	100% { opacity: 1; transform: none; }
}

@keyframes jhrFlipInX {
	0% { opacity: 0; transform: perspective(400px) rotate3d(1, 0, 0, 70deg); }
	100% { opacity: 1; transform: perspective(400px); }
}

@keyframes jhrFlipOutX {
	0% { opacity: 1; transform: perspective(400px); }
	100% { opacity: 0; transform: perspective(400px) rotate3d(1, 0, 0, 70deg); }
}

@media (prefers-reduced-motion: reduce) {
	.jhr-popup__box {
		animation: none !important;
	}
	.jhr-popup__overlay {
		transition: none !important;
	}
	.jhr-popup__close:hover {
		transform: none;
	}
}

@media (max-width: 767px) {
	/* Gutter is handled by the Screen Gutter control so there is a single
	   source of truth for the value the box measures against. */
	.jhr-popup--close-outside .jhr-popup__close {
		top: -42px;
	}
}