/**
 * 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;
}

/* 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;
	}
}