/* =========================================================
	WORKES SWEETALERT2
========================================================= */

.wk-swal-container {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: 2000 !important;
}

/* =========================================================
	POPUP
========================================================= */

.wk-swal-popup {
	position: relative;
	overflow: hidden;

	border-radius: 34px !important;
	padding: 34px !important;

	border:
		1px solid var(--wk-border-glass) !important;

	background:
		radial-gradient(
			circle at top left,
			var(--wk-radial-primary),
			var(--wk-color-transparent) 36%
		),
		radial-gradient(
			circle at bottom right,
			var(--wk-radial-secondary),
			var(--wk-color-transparent) 42%
		),
		var(--wk-color-white) !important;

	box-shadow:
		0 28px 90px var(--wk-control-shadow-strong),
		inset 0 1px 0 var(--wk-palette-rgb-255-255-255-a-7200);

	color: var(--wk-palette-rgb-015-023-042) !important;
}

/* =========================================================
	DARK MODE
========================================================= */

[data-theme="dark"] .wk-swal-popup {

	background:
		radial-gradient(
			circle at top left,
			var(--wk-radial-primary),
			var(--wk-color-transparent) 36%
		),
		radial-gradient(
			circle at bottom right,
			var(--wk-radial-secondary),
			var(--wk-color-transparent) 42%
		),
		var(--wk-palette-rgb-007-017-031) !important;

	border-color:
		var(--wk-border-glass) !important;

	box-shadow:
		0 34px 100px var(--wk-palette-rgb-000-000-000-a-5800),
		inset 0 1px 0 var(--wk-palette-rgb-255-255-255-a-0400);

	color: var(--wk-palette-rgb-248-250-252) !important;
}

/* =========================================================
	BRILLO PREMIUM
========================================================= */

.wk-swal-popup::before {

	content: '';

	position: absolute;

	top: -42%;
	left: -110%;

	width: 62%;
	height: 220%;

	background:
		linear-gradient(
			118deg,
			var(--wk-color-transparent) 0%,
			var(--wk-palette-rgb-255-255-255-a-0000) 18%,
			var(--wk-palette-rgb-255-255-255-a-4200) 36%,
			var(--wk-palette-rgb-255-255-255-a-9000) 50%,
			var(--wk-config-hero-overlay-end) 64%,
			var(--wk-palette-rgb-255-255-255-a-0000) 84%,
			var(--wk-color-transparent) 100%
		);

	transform: rotate(16deg);

	animation:
		wkSwalShine 3.4s cubic-bezier(.22,.61,.36,1) infinite;

	mix-blend-mode: screen;

	pointer-events: none;

	z-index: 1;
}

/* =========================================================
	DARK SHINE
========================================================= */

[data-theme="dark"] .wk-swal-popup::before {

	background:
		linear-gradient(
			118deg,
			var(--wk-color-transparent) 0%,
			var(--wk-palette-rgb-034-211-238-a-0000) 18%,
			var(--wk-palette-rgb-034-211-238-a-1400) 36%,
			var(--wk-palette-rgb-255-255-255-a-2000) 50%,
			var(--wk-palette-rgb-034-211-238-a-1000) 64%,
			var(--wk-palette-rgb-034-211-238-a-0000) 84%,
			var(--wk-color-transparent) 100%
		);
}

/* =========================================================
	CONTENT
========================================================= */

.wk-swal-html,
.swal2-actions {
	position: relative;
	z-index: 3;
}

.wk-swal-title {

	margin:
		0 0 14px;

	font-size: 1.8rem;
	font-weight: 900;
	letter-spacing: -0.04em;

	color: inherit !important;
}

.wk-swal-text {

	max-width: 470px;

	margin: 0 auto;

	font-size: 1rem;
	line-height: 1.7;

	color: var(--wk-palette-rgb-071-085-105) !important;
}

[data-theme="dark"] .wk-swal-text {
	color: var(--wk-palette-rgb-203-213-225) !important;
}

/* =========================================================
	ICON BOX
========================================================= */

.wk-swal-icon {
	position: relative;

	width: 82px;
	height: 82px;

	margin:
		0 auto 24px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 28px;

	font-size: 2.5rem;
	color: var(--wk-color-white);

	box-shadow:
		0 18px 50px var(--wk-palette-rgb-015-023-042-a-2400);

	animation:
		wkSwalIconPop .58s cubic-bezier(.22,1.2,.36,1) both,
		wkSwalIconFloat 2.8s ease-in-out .7s infinite;

	overflow: hidden;
	isolation: isolate;
}

.wk-swal-icon::before {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: inherit;
	background: var(--wk-palette-rgb-255-255-255-a-1800);
	animation: wkSwalIconPulse 1.9s ease-out infinite;
	z-index: 1;
}

.wk-swal-icon::after {
	content: '';
	position: absolute;
	top: 0;
	left: -120%;
	width: 75%;
	height: 100%;
	background:
		linear-gradient(
			90deg,
			var(--wk-color-transparent),
			var(--wk-palette-rgb-255-255-255-a-3800),
			var(--wk-color-transparent)
		);
	transform: skewX(-18deg);
	animation: wkSwalIconShine 2.4s ease-in-out infinite;
	z-index: 2;
}

.wk-swal-icon i {
	position: relative;
	z-index: 3;
	display: inline-flex;
	animation: wkSwalGlyphDance 1.85s ease-in-out .35s infinite;
}

/* SUCCESS */

.wk-swal-success {
	background:
		linear-gradient(
			135deg,
			var(--wk-color-success-strong),
			var(--wk-color-success)
		);
}

/* ERROR */

.wk-swal-error {
	background:
		linear-gradient(
			135deg,
			var(--wk-color-danger),
			var(--wk-color-danger-soft)
		);
}

/* WARNING */

.wk-swal-warning {
	background:
		linear-gradient(
			135deg,
			var(--wk-palette-rgb-217-119-006),
			var(--wk-palette-rgb-245-158-011)
		);
}

/* INFO */

.wk-swal-info {
	background:
		linear-gradient(
			135deg,
			var(--wk-palette-rgb-037-099-235),
			var(--wk-palette-rgb-059-130-246)
		);
}

/* QUESTION */

.wk-swal-question {
	background:
		linear-gradient(
			135deg,
			var(--wk-palette-rgb-037-099-235),
			var(--wk-palette-rgb-006-182-212)
		);
}

/* LOADING */

.wk-swal-loading {
	background:
		linear-gradient(
			135deg,
			var(--wk-palette-rgb-124-058-237),
			var(--wk-palette-rgb-168-085-247)
		);
}

/* =========================================================
	BUTTONS
========================================================= */

.wk-swal-confirm,
.wk-swal-cancel {

	border: none !important;

	border-radius: 999px !important;

	padding:
		14px 26px !important;

	font-size: .96rem !important;
	font-weight: 900 !important;

	transition:
		transform .22s ease,
		box-shadow .22s ease,
		filter .22s ease;

	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* =========================================================
	CONFIRM
========================================================= */

.wk-swal-confirm {

	background:
		linear-gradient(
			135deg,
			var(--wk-color-success-strong),
			var(--wk-color-success)
		) !important;

	color: var(--wk-color-white) !important;

	box-shadow:
		0 18px 42px var(--wk-status-success-glow) !important;
}

.wk-swal-confirm::before {

	content: '';

	position: absolute;

	top: 0;
	left: -120%;

	width: 75%;
	height: 100%;

	background:
		linear-gradient(
			90deg,
			var(--wk-color-transparent),
			var(--wk-palette-rgb-255-255-255-a-3400),
			var(--wk-color-transparent)
		);

	transform: skewX(-18deg);

	transition: left .55s ease;
}

.wk-swal-confirm:hover::before {
	left: 135%;
}

.wk-swal-confirm:hover {

	transform:
		translateY(-3px)
		scale(1.02);

	filter: brightness(1.05);

	box-shadow:
		0 24px 54px var(--wk-status-success-glow),
		0 0 0 4px var(--wk-status-success-ring) !important;
}

/* =========================================================
	CANCEL
========================================================= */

.wk-swal-cancel {

	background:
		var(--wk-palette-rgb-148-163-184-a-1200) !important;

	color:
		var(--wk-palette-rgb-015-023-042) !important;
}

[data-theme="dark"] .wk-swal-cancel {

	background:
		var(--wk-palette-rgb-148-163-184-a-1000) !important;

	color:
		var(--wk-palette-rgb-248-250-252) !important;
}

.wk-swal-cancel:hover {

	transform:
		translateY(-2px);

	filter:
		brightness(1.05);
}

/* =========================================================
	ACTIONS
========================================================= */

.swal2-actions {
	gap: 14px;
	margin-top: 28px !important;
}

/* =========================================================
	ANIMATION
========================================================= */

@keyframes wkSwalShine {

	0% {
		left: -110%;
		opacity: 0;
	}

	12% {
		opacity: 1;
	}

	45% {
		left: 145%;
		opacity: 1;
	}

	100% {
		left: 145%;
		opacity: 0;
	}
}

@keyframes wkSwalIconPop {
	0% {
		opacity: 0;
		transform: scale(.62) rotate(-10deg);
	}

	65% {
		opacity: 1;
		transform: scale(1.08) rotate(4deg);
	}

	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

@keyframes wkSwalIconFloat {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}

	50% {
		transform: translateY(-6px) rotate(-2deg);
	}
}

@keyframes wkSwalIconPulse {
	0% {
		transform: scale(.72);
		opacity: .55;
	}

	70% {
		transform: scale(1.28);
		opacity: 0;
	}

	100% {
		transform: scale(.72);
		opacity: 0;
	}
}

@keyframes wkSwalIconShine {
	0% {
		left: -120%;
		opacity: 0;
	}

	18% {
		opacity: 1;
	}

	46% {
		left: 135%;
		opacity: 1;
	}

	100% {
		left: 135%;
		opacity: 0;
	}
}

@keyframes wkSwalGlyphDance {
	0%, 100% {
		transform: translateY(0) scale(1) rotate(0deg);
	}

	35% {
		transform: translateY(-2px) scale(1.06) rotate(-7deg);
	}

	70% {
		transform: translateY(1px) scale(.98) rotate(5deg);
	}
}

.wk-swal-loading i {
	animation: wkSwalLoadingSpin 1.1s linear infinite;
}

@keyframes wkSwalLoadingSpin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* =========================================================
	BULK PROCESS PROGRESS
========================================================= */

.wk-bulk-progress {
	display: grid;
	gap: 12px;
	width: min(100%, 430px);
	margin: 2px auto 0;
	text-align: center;
}

.wk-bulk-progress-value {
	color: var(--wk-palette-rgb-015-023-042);
	font-size: 2rem;
	font-weight: 950;
	letter-spacing: -.04em;
	line-height: 1;
}

.wk-bulk-progress-track {
	position: relative;
	overflow: hidden;
	height: 16px;
	border: 1px solid var(--wk-status-success-ring);
	border-radius: 999px;
	background: var(--wk-palette-rgb-148-163-184-a-1200);
	box-shadow: inset 0 1px 4px var(--wk-palette-rgb-015-023-042-a-2400);
}

.wk-bulk-progress-track span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background:
		linear-gradient(
			90deg,
			var(--wk-color-success-strong),
			var(--wk-color-success)
		);
	box-shadow: 0 0 18px var(--wk-status-success-glow);
	transition: width .24s ease;
}

.wk-bulk-progress-phase,
.wk-bulk-progress-count {
	margin: 0;
	color: var(--wk-palette-rgb-071-085-105);
	font-weight: 800;
	line-height: 1.4;
}

.wk-bulk-progress-count {
	font-size: .84rem;
	font-weight: 700;
}

html[data-theme="dark"] .wk-bulk-progress-value {
	color: var(--wk-palette-rgb-248-250-252);
}

html[data-theme="dark"] .wk-bulk-progress-track {
	background: var(--wk-dark-overlay-strong);
	border-color: var(--wk-status-success-border);
}

html[data-theme="dark"] .wk-bulk-progress-phase,
html[data-theme="dark"] .wk-bulk-progress-count {
	color: var(--wk-palette-rgb-203-213-225);
}

/* =========================================================
	VALIDATION MESSAGE
========================================================= */

.wk-alert-validation-content {
	text-align: left;
	padding: 2px 4px 0;
}

.wk-alert-validation-badge {
	width: max-content;
	max-width: 100%;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 auto 14px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--wk-status-success-ring);
	color: var(--wk-status-success-text);
	font-size: .82rem;
	font-weight: 900;
}

.wk-alert-validation-title {
	margin: 0 0 8px;
	color: var(--wk-palette-rgb-015-023-042);
	font-size: 1.02rem;
	font-weight: 900;
	line-height: 1.35;
}

.wk-alert-validation-text {
	margin: 0 0 16px;
	color: var(--wk-palette-rgb-071-085-105);
	font-size: .9rem;
	font-weight: 650;
	line-height: 1.55;
}

.wk-alert-missing-list {
	display: grid;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wk-alert-missing-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 14px;
	background: var(--wk-palette-rgb-248-250-252-a-9000);
	border: 1px solid var(--wk-palette-rgb-226-232-240-a-9000);
	color: var(--wk-palette-rgb-015-023-042);
	font-size: .92rem;
	font-weight: 850;
}

.wk-alert-missing-item i {
	color: var(--wk-color-danger-soft);
	font-size: 1rem;
}

html[data-theme="dark"] .wk-alert-validation-title {
	color: var(--wk-palette-rgb-248-250-252);
}

html[data-theme="dark"] .wk-alert-validation-text {
	color: var(--wk-palette-rgb-203-213-225);
}

html[data-theme="dark"] .wk-alert-validation-badge {
	background: var(--wk-status-success-bg-strong);
	color: var(--wk-color-success-contrast);
}

html[data-theme="dark"] .wk-alert-missing-item {
	background: var(--wk-dark-overlay-strong);
	border-color: var(--wk-palette-rgb-148-163-184-a-1800);
	color: var(--wk-palette-rgb-248-250-252);
}

html[data-theme="dark"] .wk-alert-missing-item i {
	color: var(--wk-palette-rgb-248-113-113);
}

.wk-swal-popup .swal2-validation-message {
	position: relative;
	z-index: 4;

	margin: 24px auto 0 !important;
	padding: 16px 18px !important;

	border-radius: 18px !important;
	border: 1px solid var(--wk-palette-rgb-239-068-068-a-2200) !important;

	background:
		linear-gradient(
			135deg,
			var(--wk-palette-rgb-239-068-068-a-1000),
			var(--wk-palette-rgb-248-113-113-a-0600)
		) !important;

	color: var(--wk-palette-rgb-153-027-027) !important;

	font-size: .95rem !important;
	font-weight: 800 !important;
	line-height: 1.45 !important;

	box-shadow:
		0 14px 34px var(--wk-palette-rgb-239-068-068-a-1400) !important;
}

[data-theme="dark"] .wk-swal-popup .swal2-validation-message {
	border-color: var(--wk-palette-rgb-248-113-113-a-2400) !important;

	background:
		linear-gradient(
			135deg,
			var(--wk-palette-rgb-239-068-068-a-1800),
			var(--wk-palette-rgb-127-029-029-a-2200)
		) !important;

	color: var(--wk-palette-rgb-254-202-202) !important;

	box-shadow:
		0 18px 42px var(--wk-palette-rgb-239-068-068-a-1800) !important;
}

.wk-swal-popup .swal2-validation-message::before {
	width: 34px !important;
	height: 34px !important;

	min-width: 34px !important;

	margin: 0 12px 0 0 !important;

	border-radius: 12px !important;

	background:
		linear-gradient(
			135deg,
			var(--wk-color-danger),
			var(--wk-palette-rgb-251-113-133)
		) !important;

	color: var(--wk-color-white) !important;

	font-size: 1.15rem !important;
	font-weight: 900 !important;

	box-shadow:
		0 10px 26px var(--wk-palette-rgb-239-068-068-a-2800) !important;
}
