/*
 * NaturesLens
 * Site-wide Bricks popup wipe animation
 */
body.bricks-is-frontend .x-modal.x-modal_open:not([aria-hidden="true"]) .x-modal_container,
body.bricks-is-frontend .brx-popup:not(.hide) .brx-popup-content {
	animation: nl-popup-wipe-down 520ms cubic-bezier(.22, 1, .36, 1) both !important;
	transform-origin: top center;
	will-change: clip-path, opacity, transform;
}

body.bricks-is-frontend .x-modal.x-modal_open:not([aria-hidden="true"]) .x-modal_backdrop,
body.bricks-is-frontend .brx-popup:not(.hide) .brx-popup-backdrop {
	animation: nl-popup-backdrop-in 240ms ease-out both !important;
}

@keyframes nl-popup-wipe-down {
	0% {
		-webkit-clip-path: inset(0 0 max(0px, calc(100% - 100px)) 0);
		clip-path: inset(0 0 max(0px, calc(100% - 100px)) 0);
		opacity: 0;
		transform: translateY(-10px);
	}

	16% {
		opacity: 1;
	}

	100% {
		-webkit-clip-path: inset(0 0 0 0);
		clip-path: inset(0 0 0 0);
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes nl-popup-backdrop-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.bricks-is-frontend .x-modal.x-modal_open:not([aria-hidden="true"]) .x-modal_container,
	body.bricks-is-frontend .x-modal.x-modal_open:not([aria-hidden="true"]) .x-modal_backdrop,
	body.bricks-is-frontend .brx-popup:not(.hide) .brx-popup-content,
	body.bricks-is-frontend .brx-popup:not(.hide) .brx-popup-backdrop {
		animation: none !important;
		will-change: auto;
	}
}


/*
 * NaturesLens
 * Site-wide Bricks modal visual unifier
 */
body.bricks-is-frontend {
	--nl-modal-backdrop: rgba(255,255,255,.70);
	--nl-modal-gutter: 20px;
	--nl-modal-close-size: 44px;
	--nl-modal-border: rgb(166,166,166);
}

body.bricks-is-frontend .x-modal .x-modal_backdrop,
body.bricks-is-frontend .brx-popup .brx-popup-backdrop,
body.bricks-is-frontend #nl-dmodal .nl-dmodal-bd {
	background: var(--nl-modal-backdrop) !important;
}

body.bricks-is-frontend .x-modal .x-modal_backdrop,
body.bricks-is-frontend .brx-popup .brx-popup-backdrop {
	padding: var(--nl-modal-gutter) !important;
}

body.bricks-is-frontend #nl-dmodal {
	padding: var(--nl-modal-gutter) !important;
	box-sizing: border-box !important;
}

body.bricks-is-frontend .x-modal .x-modal_container,
body.bricks-is-frontend .brx-popup .brx-popup-content,
body.bricks-is-frontend #nl-dmodal .nl-dmodal-card {
	box-sizing: border-box !important;
	max-width: calc(100vw - (var(--nl-modal-gutter) * 2)) !important;
	max-height: calc(100dvh - (var(--nl-modal-gutter) * 2)) !important;
}

body.bricks-is-frontend .x-modal .x-modal_content,
body.bricks-is-frontend .brx-popup .brx-popup-content,
body.bricks-is-frontend #nl-dmodal .nl-dmodal-card {
	position: relative !important;
	background: #fff !important;
	border: 1px solid var(--nl-modal-border) !important;
	border-radius: 0 !important;
}

body.bricks-is-frontend .x-modal .x-modal_close,
body.bricks-is-frontend .x-modal .x-modal_content > [data-x-modal-close],
body.bricks-is-frontend .brx-popup .brx-popup-close,
body.bricks-is-frontend #nl-dmodal .nl-dmodal-close {
	align-items: center !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #666 !important;
	cursor: pointer !important;
	display: flex !important;
	height: var(--nl-modal-close-size) !important;
	justify-content: center !important;
	line-height: 1 !important;
	margin: 10px !important;
	min-height: var(--nl-modal-close-size) !important;
	min-width: var(--nl-modal-close-size) !important;
	opacity: 1 !important;
	padding: 10px !important;
	position: absolute !important;
	right: 0 !important;
	top: 0 !important;
	width: var(--nl-modal-close-size) !important;
	z-index: 5 !important;
}

body.bricks-is-frontend .x-modal .x-modal_close:hover,
body.bricks-is-frontend .x-modal .x-modal_content > [data-x-modal-close]:hover,
body.bricks-is-frontend .brx-popup .brx-popup-close:hover,
body.bricks-is-frontend #nl-dmodal .nl-dmodal-close:hover {
	color: #212121 !important;
	opacity: 1 !important;
}

body.bricks-is-frontend .x-modal .x-modal_close svg,
body.bricks-is-frontend .x-modal .x-modal_close i,
body.bricks-is-frontend .x-modal .x-modal_close-icon,
body.bricks-is-frontend .brx-popup .brx-popup-close svg,
body.bricks-is-frontend .brx-popup .brx-popup-close i,
body.bricks-is-frontend #nl-dmodal .nl-dmodal-close .ion-md-close {
	display: block !important;
	font-size: 24px !important;
	height: 24px !important;
	line-height: 1 !important;
	width: 24px !important;
}

body.bricks-is-frontend .x-modal .x-modal_content > [data-x-modal-close]:not(.x-modal_close) {
	font-size: 0 !important;
}

body.bricks-is-frontend .x-modal .x-modal_content > [data-x-modal-close]:not(.x-modal_close)::before,
body.bricks-is-frontend .brx-popup .brx-popup-close:empty::before {
	content: "×";
	font-size: 28px;
	font-weight: 300;
	line-height: 1;
}

@media (max-width: 767px) {
	body.bricks-is-frontend {
		--nl-modal-gutter: 16px;
	}
}