/*
 * Public-only loader and popup refinements.
 * Keep this file separate from admin styles.
 */
body.public-template #preloader {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 24px !important;
	background:
		radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .16) 0%, rgba(148, 163, 184, .10) 42%, rgba(15, 23, 42, .08) 100%),
		linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(15, 23, 42, .06)) !important;
	backdrop-filter: blur(3px) saturate(.96) !important;
	-webkit-backdrop-filter: blur(3px) saturate(.96) !important;
	overflow: hidden !important;
	opacity: 1;
	transition: opacity 320ms ease, visibility 320ms ease !important;
}

body.public-template #preloader.is-leaving {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

body.public-template #preloader::before,
body.public-template #preloader::after {
	content: none !important;
	display: none !important;
}

body.public-template #preloader::after {
	content: none !important;
	display: none !important;
}

body.public-template #preloader #status {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	width: min(360px, calc(100vw - 48px)) !important;
	height: auto !important;
	min-height: 280px !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 14px !important;
	padding: 26px 24px !important;
	border: 1px solid rgba(226, 232, 240, .9) !important;
	border-radius: 14px !important;
	background: rgba(255,255,255,.96) !important;
	backdrop-filter: blur(14px) saturate(1.06) !important;
	-webkit-backdrop-filter: blur(14px) saturate(1.06) !important;
	box-shadow: 0 24px 70px rgba(15, 23, 42, .12) !important;
	text-align: center !important;
	z-index: 1 !important;
	animation: publicLoaderCardIn 640ms cubic-bezier(.22, 1, .36, 1) both;
	will-change: opacity, transform, filter;
}

body.public-template #preloader.is-leaving #status {
	animation: publicLoaderCardOut 360ms cubic-bezier(.4, 0, .2, 1) both !important;
}

body.public-template #preloader #titulo {
	order: 1;
	width: 100%;
}

body.public-template #preloader .loading-phrase-animation {
	animation-duration: 620ms;
	animation-delay: 120ms;
	animation-timing-function: cubic-bezier(.22, 1, .36, 1);
	animation-fill-mode: both;
	will-change: opacity, transform, filter;
}

body.public-template #preloader .loading-phrase-animation--none {
	animation: none !important;
}

body.public-template #preloader .loading-phrase-animation--soft-fade {
	animation-name: loadingPhraseFade;
}

body.public-template #preloader .loading-phrase-animation--rise {
	animation-name: loadingPhraseRise;
}

body.public-template #preloader .loading-phrase-animation--drop {
	animation-name: loadingPhraseDrop;
}

body.public-template #preloader .loading-phrase-animation--slide-left {
	animation-name: loadingPhraseLeft;
}

body.public-template #preloader .loading-phrase-animation--slide-right {
	animation-name: loadingPhraseRight;
}

body.public-template #preloader .loading-phrase-animation--zoom-soft {
	animation-name: loadingPhraseZoom;
}

body.public-template #preloader .loading-phrase-animation--pulse-soft {
	animation: loadingPhraseFade 520ms ease both, loadingPhrasePulse 1700ms ease-in-out 620ms infinite;
}

body.public-template #preloader .loading-phrase-animation--shine h3 {
	position: relative;
	display: inline-block;
	overflow: hidden;
	animation: loadingPhraseFade 520ms ease both;
}

body.public-template #preloader .loading-phrase-animation--shine h3::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.7) 46%, transparent 74%);
	transform: translateX(-120%);
	animation: loadingPhraseShine 1800ms ease 460ms infinite;
}

body.public-template #preloader #titulo h3 {
	margin: 0 !important;
	color: #1f2937 !important;
	font-size: clamp(16px, 2.4vw, 20px) !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
	text-transform: uppercase;
}

body.public-template #preloader #logo {
	order: 2;
	width: 132px !important;
	height: 88px !important;
	margin: 0 !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	animation: publicLoaderItemIn 620ms cubic-bezier(.22, 1, .36, 1) 200ms both;
}

body.public-template #preloader #loading {
	order: 3;
	width: 150px !important;
	height: 52px !important;
	margin: 0 !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	animation: publicLoaderItemIn 620ms cubic-bezier(.22, 1, .36, 1) 280ms both;
}

@keyframes publicLoaderCardIn {
	from {
		opacity: 0;
		transform: translate3d(0, 12px, 0) scale(.985);
		filter: blur(4px);
	}
	70% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
		filter: blur(0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
		filter: blur(0);
	}
}

@keyframes publicLoaderItemIn {
	from {
		opacity: 0;
		transform: translate3d(0, 8px, 0);
		filter: blur(4px);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		filter: blur(0);
	}
}

@keyframes publicLoaderCardOut {
	from {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
		filter: blur(0);
	}
	to {
		opacity: 0;
		transform: translate3d(0, -12px, 0) scale(.975);
		filter: blur(6px);
	}
}

@keyframes loadingPhraseFade {
	from {
		opacity: 0;
		filter: blur(4px);
	}
	to {
		opacity: 1;
		filter: blur(0);
	}
}

@keyframes loadingPhraseRise {
	from {
		opacity: 0;
		transform: translate3d(0, 14px, 0);
		filter: blur(4px);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		filter: blur(0);
	}
}

@keyframes loadingPhraseDrop {
	from {
		opacity: 0;
		transform: translate3d(0, -14px, 0);
		filter: blur(4px);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		filter: blur(0);
	}
}

@keyframes loadingPhraseLeft {
	from {
		opacity: 0;
		transform: translate3d(-18px, 0, 0);
		filter: blur(4px);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		filter: blur(0);
	}
}

@keyframes loadingPhraseRight {
	from {
		opacity: 0;
		transform: translate3d(18px, 0, 0);
		filter: blur(4px);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		filter: blur(0);
	}
}

@keyframes loadingPhraseZoom {
	from {
		opacity: 0;
		transform: scale(.94);
		filter: blur(4px);
	}
	to {
		opacity: 1;
		transform: scale(1);
		filter: blur(0);
	}
}

@keyframes loadingPhrasePulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.025);
	}
}

@keyframes loadingPhraseShine {
	0% {
		transform: translateX(-120%);
	}
	55%, 100% {
		transform: translateX(120%);
	}
}

html.public-preloader-active,
html.public-preloader-active body,
html.public-mfp-open,
html.public-mfp-open body,
html.inkasoft-scroll-locked,
html.inkasoft-scroll-locked body,
body.public-template.professional-popup-open,
body.public-template.mfp-zoom-out-cur {
	overflow: hidden !important;
	height: auto !important;
	scrollbar-gutter: auto !important;
}

html.public-mfp-open body.public-template {
	position: relative;
	width: 100% !important;
	padding-right: 0 !important;
	margin-right: 0 !important;
	transition: padding-right 180ms ease, margin-right 180ms ease, width 180ms ease;
}

html.public-mfp-open,
html.public-mfp-open body.public-template,
html.public-mfp-open body.public-template.no-scroll,
html.public-mfp-open body.public-template.mfp-zoom-out-cur,
html.public-mfp-open body.public-template.professional-popup-open {
	padding-right: 0 !important;
	margin-right: 0 !important;
	scrollbar-gutter: auto !important;
	overflow-x: hidden !important;
}

body.public-template.public-popup-smooth > :not(script):not(style):not(link):not(.mfp-bg):not(.mfp-wrap):not(.professional-native-overlay):not(.global-action-dialog):not(#preloader),
html.public-preloader-active body.public-template > :not(script):not(style):not(link):not(#preloader),
html.has-global-process-loader body.public-template > :not(script):not(style):not(link):not(.global-process-loader):not(#globalProcessLoader) {
	transition: filter 240ms ease, opacity 240ms ease;
	will-change: filter, opacity;
}

html.public-mfp-open body.public-template.public-popup-smooth > :not(script):not(style):not(link):not(.mfp-bg):not(.mfp-wrap):not(.professional-native-overlay):not(.global-action-dialog):not(#preloader),
html.public-preloader-active body.public-template > :not(script):not(style):not(link):not(#preloader),
html.has-global-process-loader body.public-template > :not(script):not(style):not(link):not(.global-process-loader):not(#globalProcessLoader) {
	filter: saturate(.98);
}

@media (prefers-reduced-motion: reduce) {
	body.public-template.public-popup-smooth > :not(script):not(style):not(link):not(.mfp-bg):not(.mfp-wrap):not(.professional-native-overlay):not(.global-action-dialog):not(#preloader),
	html.public-preloader-active body.public-template > :not(script):not(style):not(link):not(#preloader),
	html.has-global-process-loader body.public-template > :not(script):not(style):not(link):not(.global-process-loader):not(#globalProcessLoader) {
		transition: none !important;
		transform: none !important;
		filter: none !important;
	}

	body.public-template #preloader .loading-phrase-animation,
	body.public-template #preloader .loading-phrase-animation h3,
	body.public-template #preloader .loading-phrase-animation h3::after,
	body.public-template #preloader #status,
	body.public-template #preloader.is-leaving #status,
	body.public-template #preloader #logo,
	body.public-template #preloader #loading {
		animation: none !important;
		transform: none !important;
		filter: none !important;
	}
}

body.public-template #preloader,
body.public-template .global-process-loader,
body.public-template #globalProcessLoader {
	transition: opacity 240ms ease, visibility 240ms ease, backdrop-filter 240ms ease;
}

body.public-template #preloader #status,
body.public-template .global-process-loader__box,
body.public-template #globalProcessLoader .global-process-loader__box {
	transition: opacity 260ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1);
}

body.public-template .mfp-wrap,
body.public-template .mfp-container,
body.public-template .mfp-content {
	overflow: hidden !important;
}

body.public-template .mfp-bg {
	background: rgba(15, 23, 42, .58) !important;
	backdrop-filter: blur(5px) !important;
	-webkit-backdrop-filter: blur(5px) !important;
}

body.public-template .global-action-dialog {
	z-index: var(--popup-top-layer, 2147483000) !important;
	padding: clamp(12px, 3vw, 24px) !important;
	overflow: hidden !important;
}

body.public-template .global-action-dialog__backdrop {
	background: rgba(15, 23, 42, .58) !important;
	backdrop-filter: blur(5px) !important;
	-webkit-backdrop-filter: blur(5px) !important;
	opacity: 1 !important;
}

body.public-template .global-action-dialog__panel {
	width: min(94vw, 540px) !important;
	max-width: calc(100vw - 32px) !important;
	max-height: calc(100dvh - 40px) !important;
	overflow: hidden !important;
	border: 1px solid rgba(226, 232, 240, .95) !important;
	border-top: 0 !important;
	border-radius: 12px !important;
	background: var(--popup-surface, #fff) !important;
	box-shadow: 0 22px 70px rgba(15, 23, 42, .28) !important;
	padding: 30px 26px 24px !important;
	box-sizing: border-box !important;
}

body.public-template .global-action-dialog__close {
	top: 12px !important;
	right: 12px !important;
	width: 40px !important;
	height: 40px !important;
	border: 1px solid rgba(15, 23, 42, .08) !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: #344054 !important;
	line-height: 1 !important;
	box-shadow: 0 8px 20px rgba(15, 23, 42, .08) !important;
}

body.public-template .global-action-dialog__close:hover,
body.public-template .global-action-dialog__close:focus {
	background: var(--popup-accent, var(--site-color, #008000)) !important;
	border-color: var(--popup-accent, var(--site-color, #008000)) !important;
	color: #fff !important;
}

body.public-template .global-action-dialog__icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 58px !important;
	height: 58px !important;
	line-height: 1 !important;
	background: color-mix(in srgb, var(--popup-accent, #008000) 12%, #fff) !important;
	color: var(--popup-accent, var(--site-color, #008000)) !important;
}

body.public-template .global-action-dialog__actions {
	flex-wrap: wrap !important;
}

body.public-template .global-action-dialog__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 42px !important;
	height: auto !important;
	line-height: 1.2 !important;
}

body.public-template .mfp-wrap {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: clamp(12px, 3vw, 24px) !important;
	box-sizing: border-box !important;
}

body.public-template .mfp-container {
	padding: 0 !important;
	min-height: 100% !important;
	max-width: 100vw !important;
	box-sizing: border-box !important;
}

body.public-template .mfp-content {
	width: min(760px, calc(100vw - 32px)) !important;
	max-width: calc(100vw - 32px) !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}

body.public-template .zoom-anim-dialog {
	width: min(760px, calc(100vw - 32px)) !important;
	max-width: calc(100vw - 32px) !important;
	max-height: calc(100dvh - 40px) !important;
	margin: 0 auto !important;
	overflow: hidden !important;
	border-radius: 12px !important;
	box-sizing: border-box !important;
}

body.public-template .zoom-anim-dialog > .professional-popup,
body.public-template .professional-popup {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

body.public-template .professional-popup__body,
body.public-template .popup-tabs-container,
body.public-template .login-box-body {
	max-height: calc(100dvh - 190px) !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	box-sizing: border-box !important;
	overflow-wrap: anywhere !important;
}

body.public-template .professional-popup__actions {
	flex-wrap: wrap !important;
	justify-content: flex-end !important;
	box-sizing: border-box !important;
}

body.public-template .professional-popup__btn {
	flex: 0 0 auto !important;
	max-width: 100% !important;
	white-space: nowrap !important;
}

@media (max-width: 640px) {
	body.public-template .mfp-content,
	body.public-template .zoom-anim-dialog {
		width: calc(100vw - 20px) !important;
		max-width: calc(100vw - 20px) !important;
	}

	body.public-template .professional-popup__actions {
		justify-content: stretch !important;
	}

	body.public-template .professional-popup__btn {
		width: 100% !important;
		white-space: normal !important;
	}
}

body.public-template .mfp-image-holder .mfp-content {
	width: auto !important;
	max-width: calc(100vw - 32px) !important;
	max-height: calc(100vh - 32px) !important;
	overflow: visible !important;
}

body.public-template .mfp-image-holder .mfp-figure {
	position: relative !important;
	line-height: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}

body.public-template .mfp-image-holder .mfp-figure:after {
	display: none !important;
}

body.public-template .mfp-wrap > .mfp-close {
	display: none !important;
}

body.public-template img.mfp-img {
	width: auto !important;
	max-width: calc(100vw - 48px) !important;
	max-height: calc(100vh - 96px) !important;
	padding: 0 !important;
	border: 4px solid rgba(255,255,255,.96) !important;
	border-radius: 10px !important;
	box-shadow: 0 24px 70px rgba(15, 23, 42, .3) !important;
	object-fit: contain !important;
}

body.public-template .mfp-image-holder .mfp-close,
body.public-template .mfp-iframe-holder .mfp-close {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	min-height: 42px !important;
	padding: 0 !important;
	border: 1px solid rgba(226, 232, 240, .95) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, .96) !important;
	box-shadow: 0 16px 36px rgba(15, 23, 42, .22) !important;
	color: #1f2937 !important;
	font-family: Arial, sans-serif !important;
	font-size: 28px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-align: center !important;
	opacity: 1 !important;
	text-indent: 0 !important;
	transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
	z-index: 1060 !important;
}

body.public-template .mfp-image-holder .mfp-close:hover,
body.public-template .mfp-image-holder .mfp-close:focus,
body.public-template .mfp-iframe-holder .mfp-close:hover,
body.public-template .mfp-iframe-holder .mfp-close:focus {
	background: var(--site-color, #008000) !important;
	border-color: var(--site-color, #008000) !important;
	color: #fff !important;
	transform: translateY(-1px) scale(1.02) !important;
	box-shadow: 0 18px 42px rgba(15, 23, 42, .28) !important;
}

body.public-template .mfp-image-holder .mfp-close:active,
body.public-template .mfp-iframe-holder .mfp-close:active {
	top: 12px !important;
	transform: scale(.96) !important;
}

body.public-template .mfp-bottom-bar {
	position: relative !important;
	top: auto !important;
	margin-top: 10px !important;
	padding: 0 4px !important;
}

body.public-template .mfp-title,
body.public-template .mfp-counter {
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0,0,0,.35) !important;
}

@media (max-width: 640px) {
	body.public-template #preloader #status {
		width: min(330px, calc(100vw - 32px)) !important;
		min-height: 250px !important;
		padding: 22px 18px !important;
	}

	body.public-template .zoom-anim-dialog {
		width: calc(100vw - 20px) !important;
		max-width: calc(100vw - 20px) !important;
		max-height: calc(100vh - 20px) !important;
	}

	body.public-template img.mfp-img {
		max-width: calc(100vw - 28px) !important;
		max-height: calc(100vh - 90px) !important;
		border-width: 3px !important;
	}

	body.public-template .mfp-image-holder .mfp-close,
	body.public-template .mfp-iframe-holder .mfp-close {
		top: 10px !important;
		right: 10px !important;
		width: 38px !important;
		height: 38px !important;
		min-width: 38px !important;
		min-height: 38px !important;
		font-size: 25px !important;
	}

	body.public-template .mfp-image-holder .mfp-close:active,
	body.public-template .mfp-iframe-holder .mfp-close:active {
		top: 10px !important;
	}
}