/* =========================================================
	TALENTHUB SWEETALERT2
========================================================= */

.th-swal-container {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

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

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

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

	border:
		1px solid rgba(34, 211, 238, 0.14) !important;

	background:
		radial-gradient(
			circle at top left,
			rgba(16, 185, 129, 0.18),
			transparent 36%
		),
		radial-gradient(
			circle at bottom right,
			rgba(132, 204, 22, 0.14),
			transparent 42%
		),
		#ffffff !important;

	box-shadow:
		0 28px 90px rgba(15, 23, 42, 0.22),
		inset 0 1px 0 rgba(255,255,255,.72);

	color: #0f172a !important;
}

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

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

	background:
		radial-gradient(
			circle at top left,
			rgba(16, 185, 129, 0.20),
			transparent 36%
		),
		radial-gradient(
			circle at bottom right,
			rgba(132, 204, 22, 0.14),
			transparent 42%
		),
		#07111f !important;

	border-color:
		rgba(34, 211, 238, 0.18) !important;

	box-shadow:
		0 34px 100px rgba(0,0,0,.58),
		inset 0 1px 0 rgba(255,255,255,.04);

	color: #f8fafc !important;
}

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

.th-swal-popup::before {

	content: '';

	position: absolute;

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

	width: 62%;
	height: 220%;

	background:
		linear-gradient(
			118deg,
			transparent 0%,
			rgba(255,255,255,0.00) 18%,
			rgba(255,255,255,0.42) 36%,
			rgba(255,255,255,0.90) 50%,
			rgba(255,255,255,0.48) 64%,
			rgba(255,255,255,0.00) 84%,
			transparent 100%
		);

	transform: rotate(16deg);

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

	mix-blend-mode: screen;

	pointer-events: none;

	z-index: 1;
}

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

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

	background:
		linear-gradient(
			118deg,
			transparent 0%,
			rgba(34,211,238,0.00) 18%,
			rgba(34,211,238,0.14) 36%,
			rgba(255,255,255,0.20) 50%,
			rgba(34,211,238,0.10) 64%,
			rgba(34,211,238,0.00) 84%,
			transparent 100%
		);
}

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

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

.th-swal-title {

	margin:
		0 0 14px;

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

	color: inherit !important;
}

.th-swal-text {

	max-width: 470px;

	margin: 0 auto;

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

	color: #475569 !important;
}

[data-theme="dark"] .th-swal-text {
	color: #cbd5e1 !important;
}

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

.th-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: #ffffff;

	box-shadow:
		0 18px 50px rgba(15,23,42,.24);

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

	overflow: hidden;
	isolation: isolate;
}

.th-swal-icon::before {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: inherit;
	background: rgba(255,255,255,.18);
	animation: thSwalIconPulse 1.9s ease-out infinite;
	z-index: 1;
}

.th-swal-icon::after {
	content: '';
	position: absolute;
	top: 0;
	left: -120%;
	width: 75%;
	height: 100%;
	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255,255,255,.38),
			transparent
		);
	transform: skewX(-18deg);
	animation: thSwalIconShine 2.4s ease-in-out infinite;
	z-index: 2;
}

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

/* SUCCESS */

.th-swal-success {
	background:
		linear-gradient(
			135deg,
			#16a34a,
			#22c55e
		);
}

/* ERROR */

.th-swal-error {
	background:
		linear-gradient(
			135deg,
			#dc2626,
			#ef4444
		);
}

/* WARNING */

.th-swal-warning {
	background:
		linear-gradient(
			135deg,
			#d97706,
			#f59e0b
		);
}

/* INFO */

.th-swal-info {
	background:
		linear-gradient(
			135deg,
			#2563eb,
			#3b82f6
		);
}

/* QUESTION */

.th-swal-question {
	background:
		linear-gradient(
			135deg,
			#2563eb,
			#06b6d4
		);
}

/* LOADING */

.th-swal-loading {
	background:
		linear-gradient(
			135deg,
			#7c3aed,
			#a855f7
		);
}

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

.th-swal-confirm,
.th-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
========================================================= */

.th-swal-confirm {

	background:
		linear-gradient(
			135deg,
			#16a34a,
			#22c55e
		) !important;

	color: #ffffff !important;

	box-shadow:
		0 18px 42px rgba(34,197,94,.28) !important;
}

.th-swal-confirm::before {

	content: '';

	position: absolute;

	top: 0;
	left: -120%;

	width: 75%;
	height: 100%;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255,255,255,.34),
			transparent
		);

	transform: skewX(-18deg);

	transition: left .55s ease;
}

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

.th-swal-confirm:hover {

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

	filter: brightness(1.05);

	box-shadow:
		0 24px 54px rgba(34,197,94,.36),
		0 0 0 4px rgba(34,197,94,.12) !important;
}

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

.th-swal-cancel {

	background:
		rgba(148,163,184,.12) !important;

	color:
		#0f172a !important;
}

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

	background:
		rgba(148,163,184,.10) !important;

	color:
		#f8fafc !important;
}

.th-swal-cancel:hover {

	transform:
		translateY(-2px);

	filter:
		brightness(1.05);
}

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

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

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

@keyframes thSwalShine {

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

	12% {
		opacity: 1;
	}

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

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

@keyframes thSwalIconPop {
	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 thSwalIconFloat {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}

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

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

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

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

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

	18% {
		opacity: 1;
	}

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

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

@keyframes thSwalGlyphDance {
	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);
	}
}

.th-swal-loading i {
	animation: thSwalLoadingSpin 1.1s linear infinite;
}

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

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

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

.th-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 rgba(239,68,68,.22) !important;

	background:
		linear-gradient(
			135deg,
			rgba(239,68,68,.10),
			rgba(248,113,113,.06)
		) !important;

	color: #991b1b !important;

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

	box-shadow:
		0 14px 34px rgba(239,68,68,.14) !important;
}

[data-theme="dark"] .th-swal-popup .swal2-validation-message {
	border-color: rgba(248,113,113,.24) !important;

	background:
		linear-gradient(
			135deg,
			rgba(239,68,68,.18),
			rgba(127,29,29,.22)
		) !important;

	color: #fecaca !important;

	box-shadow:
		0 18px 42px rgba(239,68,68,.18) !important;
}

.th-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,
			#dc2626,
			#fb7185
		) !important;

	color: #ffffff !important;

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

	box-shadow:
		0 10px 26px rgba(239,68,68,.28) !important;
}