:root {
	/* Enhanced color palette */
	--pi-purple: #744394;
	--pi-purple-light: #7d48a0;
	--pi-purple-dark: #54306f;
	--pi-gold: #f8c056;
	--pi-gold-light: #ffd78c;
	--pi-gold-dark: #e6a938;

	/* Secondary accent colors */
	--pi-teal: #4ecdc4;
	--pi-pink: #ff6b8b;
	--pi-blue: #45b7d1;

	/* Animation timing */
	--transition-fast: 0.2s;
	--transition-medium: 0.4s;
	--transition-slow: 0.8s;
}

/* Dark mode is default now */
:root {
	--bg-primary: #1a0e24;
	--bg-secondary: #2a1052;
	--text-primary: #ffffff;
	--text-secondary: #e0d0ff;
	--card-bg: rgba(30, 12, 48, 0.85);
	--input-bg: rgba(30, 12, 48, 0.5);
}

/* Light mode styles - only applied when .light-mode class is present */
.light-mode {
	--bg-primary: #f5efff;
	--bg-secondary: #eee6ff;
	--text-primary: #333333;
	--text-secondary: #666666;
	--card-bg: rgba(255, 255, 255, 0.85);
	--input-bg: rgba(255, 255, 255, 0.8);
}

/* Form page always uses light mode */
#formPage {
	--bg-primary: #f5efff;
	--bg-secondary: #eee6ff;
	--text-primary: #333333;
	--text-secondary: #666666;
	--card-bg: rgba(255, 255, 255, 0.85);
	--input-bg: rgba(255, 255, 255, 0.8);
	background-color: #ffffff !important;
}

#formPage .container {
	padding-bottom: 1rem;
}

#formPage .mt-8 {
	margin-bottom: 5rem; /* Thêm margin dưới cho container của nút quay lại */
}

#formPage .py-8 {
	padding-top: 1rem !important; /* Ghi đè padding mặc định của Tailwind nếu có */
	padding-bottom: 8rem !important; /* Giữ nguyên padding dưới */
}

body {
	font-family: "Inter", "Roboto", -apple-system, BlinkMacSystemFont,
		"Segoe UI", sans-serif;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	margin: 0;
	padding: 0;
	min-height: 100vh;
	overflow-x: hidden;
	position: relative;
	will-change: transform;
	line-height: 1.6;
	font-size: 1rem;
	letter-spacing: -0.014em;
	font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Roboto", "Inter", -apple-system, BlinkMacSystemFont,
		"Segoe UI", sans-serif;
	font-weight: 700;
	letter-spacing: -0.021em;
	line-height: 1.3;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Roboto", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

#formPage .pi-title,
.pi-wallet-style .pi-title {
	font-size: 1.62rem !important; /* Tăng kích thước */
	font-weight: 420 !important; /* Đảm bảo độ đậm tối đa */
	text-align: center !important;
	margin-top: 0.6rem !important;
	margin-bottom: 2rem !important;
	color: #0f0e0e !important; /* Màu đen hoàn toàn */
	text-shadow: 0px 0.5px 0px rgba(0, 0, 0, 0.5) !important; /* Tăng bóng đổ */
	font-family: "Roboto", sans-serif !important;
	letter-spacing: -0.02em !important; /* Giảm khoảng cách chữ */
	-webkit-text-stroke: 0.3px black !important; /* Tạo viền ngoài cho chữ */
	transform: scale(1.01, 1) !important; /* Làm chữ hơi rộng ra */
	display: block !important;
	line-height: 1.2 !important; /* Giảm line height */
}

.pi-header {
	background: #6e3b8f; /* Thay đổi từ gradient sang màu đơn */
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	height: 56px;
	z-index: 50;
	box-shadow: 0 4px 20px rgba(122, 53, 164, 0.3);
}

.pi-header-content {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	position: relative;
}

.header-back-btn {
	position: absolute;
	left: 0;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: transform var(--transition-fast);
}

.header-back-btn:hover {
	transform: translateX(-2px);
}

.header-dropdown-btn {
	position: absolute;
	right: 0;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: transform var(--transition-fast);
}

.header-dropdown-btn:hover {
	transform: translateY(2px);
}

.wallet-icon {
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, var(--pi-gold), var(--pi-gold-dark));
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: var(--pi-purple);
	margin-right: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	position: relative;
	overflow: hidden;
}

.wallet-icon::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
		to bottom right,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0) 40%,
		rgba(255, 255, 255, 0.4) 50%,
		rgba(255, 255, 255, 0) 60%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: rotate(30deg);
	animation: shineIcon 3s infinite;
}

.wallet-text {
	color: white;
	font-size: 18px;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.pi-coin-icon {
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, var(--pi-gold), var(--pi-gold-dark));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: var(--pi-purple);
	margin-left: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	position: relative;
	overflow: hidden;
}

.pi-coin-icon::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
		to bottom right,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0) 40%,
		rgba(255, 255, 255, 0.4) 50%,
		rgba(255, 255, 255, 0) 60%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: rotate(30deg);
	animation: shineIcon 3s infinite;
	animation-delay: 1s;
}

/* Premium background elements - enhanced */
.premium-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -10;
	overflow: hidden;
	pointer-events: none; /* prevent interaction with background */
}

/* Animated gradient - improved colors */
.animated-gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(
			circle at 20% 30%,
			rgba(154, 83, 198, 0.1) 0%,
			transparent 60%
		),
		radial-gradient(
			circle at 80% 20%,
			rgba(154, 83, 198, 0.1) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 50% 70%,
			rgba(248, 192, 86, 0.05) 0%,
			transparent 70%
		);
	opacity: 0.8;
}

/* Light streaks - enhanced */
.light-streak {
	position: absolute;
	height: 1px;
	width: 200px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(154, 83, 198, 0.5),
		transparent
	);
	border-radius: 100%;
	opacity: 0;
	animation: lightStreak 12s linear infinite; /* Slower animation */
	will-change: transform, opacity; /* Optimize animation */
}

/* Moving waves - enhanced */
.wave-container {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 0.2;
}

.wave {
	position: absolute;
	width: 200%;
	height: 200%;
	border-radius: 40%;
	opacity: 0.2;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: waveRotate 60s linear infinite; /* Slowed down */
	will-change: transform; /* Optimize animation */
}

.wave1 {
	border: 1px solid rgba(154, 83, 198, 0.3);
	animation-duration: 60s; /* Slowed down */
}

.wave2 {
	border: 1px solid rgba(248, 192, 86, 0.3);
	animation-duration: 50s; /* Slowed down */
	animation-direction: reverse;
}

.wave3 {
	border: 1px solid rgba(154, 83, 198, 0.2);
	animation-duration: 70s; /* Slowed down */
}

/* Stars - enhanced */
.star {
	position: absolute;
	background-color: white;
	border-radius: 50%;
	filter: blur(1px);
	opacity: 0.4;
	animation: twinkle 4s infinite ease-in-out;
}

/* Star with single point - enhanced */
.star-single {
	position: absolute;
	width: 2px;
	height: 2px;
	background-color: white;
	border-radius: 50%;
	filter: blur(0.5px);
	opacity: 0.8;
	box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
	animation: twinkleStar 3s infinite ease-in-out;
}

/* Pi coins - enhanced */
.premium-coin {
	position: absolute;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: var(--pi-purple);
	z-index: -1;
	transform-style: preserve-3d;
	will-change: transform; /* Optimize animation */
	filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

.coin-inner {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
	animation: coinRotate 20s infinite linear; /* Slowed down */
}

.coin-front,
.coin-back {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	backface-visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: bold;
}

.coin-front {
	background: radial-gradient(
		circle at 30% 30%,
		var(--pi-gold),
		var(--pi-gold-dark)
	);
	box-shadow: 0 0 20px rgba(248, 192, 86, 0.3);
}

.coin-back {
	background: radial-gradient(
		circle at 30% 30%,
		var(--pi-gold-dark),
		var(--pi-gold)
	);
	transform: rotateY(180deg);
	box-shadow: 0 0 20px rgba(248, 192, 86, 0.3);
}

/* Floating particles - enhanced */
.particle {
	position: absolute;
	width: 6px;
	height: 6px;
	background-color: rgba(154, 83, 198, 0.2);
	border-radius: 50%;
	filter: blur(1px);
	animation: floatParticle 15s infinite linear;
	will-change: transform; /* Optimize animation */
}

/* Feature card with enhanced wave effect */
.feature-card {
	position: relative;
	overflow: hidden;
	z-index: 1;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.feature-card-wave {
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 200%;
	background: radial-gradient(
		ellipse at center,
		rgba(105, 57, 136, 0.2) 0%,
		rgba(105, 57, 136, 0.1) 25%,
		rgba(105, 57, 136, 0) 70%
	);
	opacity: 0;
	border-radius: 50%;
	transform: translate(-25%, -25%) scale(0.1);
	animation: cardWave 4s infinite ease-out;
	pointer-events: none;
}

/* Shiny wave effect for feature icons */
.feature-icon {
	position: relative;
	overflow: hidden;
}

.feature-icon::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -100%;
	width: 70%;
	height: 200%;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, calc(0.3 * var(--shine-opacity, 1))) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: rotate(30deg);
	animation: shinyWave 6s infinite ease-in-out; /* Tăng thời gian từ 3s lên 6s */
	pointer-events: none;
}

/* Confetti elements for success animation - enhanced */
/* Confetti elements for success animation - enhanced */
/* Confetti elements for success animation - enhanced */
.confetti-container {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 2000; /* Increased z-index to appear above the modal */
	pointer-events: none;
	overflow: hidden;
	display: none;
}

.confetti {
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: var(--pi-gold);
	opacity: 0;
}

/* Square confetti */
.confetti-square {
	background-color: var(--pi-purple);
}

/* Circle confetti */
.confetti-circle {
	border-radius: 50%;
	background-color: var(--pi-gold);
}

/* Triangle confetti */
.confetti-triangle {
	width: 0;
	height: 0;
	background-color: transparent;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 10px solid var(--pi-purple-light);
}

/* Page container and transitions */
.page-container {
	padding-bottom: 0;
	width: 100%;
	max-width: 100vw;
	overflow-x: hidden;
	min-height: calc(100vh - 64px);
	position: relative;
}

#formPage .mt-8.text-center {
	margin-top: 1rem !important; /* Giảm khoảng cách phía trên nút */
}

.page {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: calc(100vh - 64px);
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	background-color: transparent;
	z-index: 10;
	will-change: transform, opacity; /* Optimize animation */
}

.page-active {
	transform: translateX(0);
	opacity: 1;
	z-index: 11;
}

.page-inactive-right {
	transform: translateX(100%);
	opacity: 0;
	z-index: 9;
	pointer-events: none;
}

.page-inactive-left {
	transform: translateX(-100%);
	opacity: 0;
	z-index: 9;
	pointer-events: none;
}

/* Premium cards - enhanced */
.card {
	background-color: var(--card-bg);
	backdrop-filter: blur(15px);
	border-radius: 0.8rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	overflow: hidden;
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		45deg,
		transparent,
		rgba(255, 255, 255, 0.05),
		transparent
	);
	pointer-events: none;
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* Premium buttons - enhanced */
.btn-primary {
	background: linear-gradient(
		135deg,
		var(--pi-purple),
		var(--pi-purple-dark)
	);
	color: white;
	font-weight: 600;
	border-radius: 0.5rem;
	padding: 0.9rem 2rem;
	transition: all 0.3s ease;
	box-shadow: 0 6px 15px rgba(122, 53, 164, 0.25);
	position: relative;
	overflow: hidden;
	z-index: 1;
	border: 1px solid var(--pi-gold);
	outline: none;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(122, 53, 164, 0.4);
}

.btn-primary:active {
	transform: translateY(1px);
}

.btn-secondary {
	background: rgba(122, 53, 164, 0.1);
	color: var(--pi-purple);
	font-weight: 600;
	border-radius: 0.5rem;
	padding: 0.75rem 1.5rem;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(122, 53, 164, 0.2);
}

.btn-secondary:hover {
	background: rgba(122, 53, 164, 0.15);
	transform: translateY(-2px);
}

/* Premium reward cards - enhanced */
.reward-card {
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	overflow: hidden;
	border-top: 3px solid transparent;
	background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
		linear-gradient(90deg, var(--pi-purple), var(--pi-gold)) border-box;
	border-radius: 0.8rem;
}

.reward-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.reward-amount {
	color: var(--pi-purple);
	font-weight: bold;
	font-size: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.reward-amount::before {
	content: "π";
	font-size: 2.2rem;
	margin-right: 0.2rem;
}

.reward-amount::after {
	content: "";
	position: absolute;
	width: 70px;
	height: 70px;
	background: radial-gradient(
		circle,
		rgba(248, 192, 86, 0.15) 0%,
		transparent 70%
	);
	border-radius: 50%;
	z-index: -1;
}

/* Premium progress bar - enhanced */
.progress-bar {
	height: 8px;
	border-radius: 10px;
	background: rgba(122, 53, 164, 0.1);
	overflow: hidden;
	position: relative;
}

.progress-fill {
	height: 100%;
	border-radius: 10px;
	background: linear-gradient(
		90deg,
		var(--pi-purple),
		var(--pi-purple-light)
	);
	position: relative;
	overflow: hidden;
}

/* Premium feature icons - enhanced */
.feature-icon {
	width: 70px;
	height: 70px;
	border-radius: 12px;
	background: linear-gradient(
		135deg,
		var(--pi-purple-light),
		var(--pi-purple)
	);
	box-shadow: 0 8px 20px rgba(122, 53, 164, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
	position: relative;
	overflow: hidden;
}

.feature-icon i {
	font-size: 2rem;
	color: white;
	position: relative;
	z-index: 2;
}

/* Pi Wallet style form - enhanced */
.pi-wallet-style {
	margin: 0 auto;
	max-width: 500px;
	padding: 0 20px;
	padding-top: 10px; /* Thêm padding top nhỏ hơn */
}
.pi-title {
	font-size: 1.8rem; /* Tăng kích thước một chút */
	font-weight: 900; /* Sử dụng giá trị tối đa tiêu chuẩn */
	text-align: center;
	margin-top: 0.6rem;
	margin-bottom: 2rem;
	color: #111; /* Màu đen đậm hơn */
	text-shadow: 0px 0.2px 0px rgba(0, 0, 0, 0.3); /* Thêm bóng mỏng để tạo hiệu ứng đậm */
	font-family: "Roboto", sans-serif;
	letter-spacing: -0.01em; /* Giảm khoảng cách chữ để tạo cảm giác đậm hơn */
}
.pi-input-container {
	margin-bottom: 1.3rem; /* Giảm từ 2rem xuống 1rem để giảm khoảng cách với nút */
	border-radius: 12px;
	min-height: 250px;
	overflow: hidden;
	background: transparent;
	border: 1px solid #ccc; /* Thay đổi từ #000 sang #ccc để có viền màu xám */
	box-shadow: none;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
}

.pi-input-container:focus-within {
	border: 2px solid var(--pi-purple);
	box-shadow: 0 5px 25px rgba(105, 57, 136, 0.2);
}

.pi-input {
	width: 100%;
	padding: 24px;
	min-height: 250px; /* Thay đổi từ height thành min-height */
	height: auto; /* Cho phép tự động mở rộng chiều cao */
	resize: none;
	background: transparent;
	border: none;
	font-size: 1.2rem;
	color: #333;
	outline: none;
	vertical-align: top;
	text-align: left;
	word-break: break-word;
	overflow-wrap: break-word;
	white-space: pre-wrap;
	display: block;
	align-self: flex-start;
	font-family: monospace;
	line-height: 1; /* Giảm khoảng cách giữa các dòng */
	font-weight: 400;
}

.pi-button {
	width: 100%;
	padding: 13.5px; /* Tăng từ 13px lên 15px để tăng chiều dọc */
	font-size: 0.85rem; /* Tăng từ 0.85rem lên 0.9rem */
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	border-radius: 8px;
	margin-bottom: 0.8rem;
	transition: all 0.3s ease;
	letter-spacing: 0.05em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Enhanced balloon animation styles */
.balloon {
	position: absolute;
	width: 40px;
	height: 50px;
	background: radial-gradient(
		circle at 30% 30%,
		var(--balloon-color),
		var(--balloon-color-dark)
	);
	border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
	box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.1);
	animation: balloonFloat 30s linear infinite;
	opacity: 0.8;
	z-index: -5;
	will-change: transform;
	transform-origin: bottom center;
}

.balloon:after {
	content: "";
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 15px;
	background: rgba(0, 0, 0, 0.2);
}

/* Enhanced balloon animation */
@keyframes balloonFloat {
	0% {
		transform: translateY(100vh) translateX(0px) rotate(0deg);
		opacity: 0;
	}
	10% {
		opacity: 0.8;
		transform: translateY(80vh) translateX(var(--float-distance))
			rotate(5deg);
	}
	50% {
		transform: translateY(40vh)
			translateX(calc(var(--float-distance) * 1.5)) rotate(-5deg);
	}
	90% {
		opacity: 0.8;
		transform: translateY(10vh) translateX(var(--float-distance))
			rotate(5deg);
	}
	100% {
		transform: translateY(-100px) translateX(var(--float-distance))
			rotate(0deg);
		opacity: 0;
	}
}

.pi-button-primary {
	background: #724394;
	color: white;
	border: none;
	box-shadow: none;
	border-radius: 8px;
	text-transform: uppercase;
	font-weight: 700;
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}

.pi-button-primary::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.2) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transition: all 0.6s ease;
}

.pi-button-primary:hover {
	background: linear-gradient(
		135deg,
		var(--pi-purple-light),
		var(--pi-purple)
	);
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(122, 53, 164, 0.35);
}

.pi-button-primary:hover::before {
	left: 100%;
}

.pi-button-primary:disabled {
	background-color: #a5a5a5;
	transform: none;
	cursor: not-allowed;
	box-shadow: none;
	opacity: 0.7;
}

.pi-button-secondary {
	background: white;
	color: #724394;
	border: 1px solid #724394;
	border-radius: 8px;
	text-transform: uppercase;
	font-weight: 700;
	margin-top: 0;
}

.pi-button-secondary::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(122, 53, 164, 0.05);
	z-index: -1;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease;
}

.pi-button-secondary:hover {
	background-color: rgba(114, 67, 148, 0.05); /* Màu nền nhạt khi hover */
}

.pi-button-secondary:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.pi-info-text {
	font-size: 1rem;
	line-height: 1.6;
	color: #000;
	margin-top: 1.4rem; /* Giảm từ 2rem xuống 1.5rem */
	margin-bottom: 1rem; /* Thêm margin-bottom để kiểm soát khoảng cách với nút vân tay */
	text-align: left;
	word-wrap: break-word;
	white-space: normal;
	width: 100%;
	font-weight: 400;
}

.pi-link {
	color: #3d9dff;
	text-decoration: none;
	position: relative;
	transition: color 0.3s ease;
}

.pi-link::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #3d9dff;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease;
}

.pi-link:hover {
	color: #65b5ff;
}

.pi-link:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Scroll animations - enhanced */
.animate-on-scroll {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
	will-change: opacity, transform; /* Optimize animation */
}

.animate-on-scroll.animated {
	opacity: 1;
	transform: translateY(0);
}

.animate-fade-in {
	opacity: 0;
	transition: opacity 1s ease;
	will-change: opacity; /* Optimize animation */
}

.animate-fade-in.animated {
	opacity: 1;
}

/* Enhanced about section illustration */
.about-illustration {
	width: 180px;
	height: 180px;
	margin: 0 auto 2rem;
	position: relative;
}

.about-circle {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: linear-gradient(
		135deg,
		rgba(154, 83, 198, 0.1),
		rgba(154, 83, 198, 0.2)
	);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.about-circle::before {
	content: "";
	position: absolute;
	width: 90%;
	height: 90%;
	border-radius: 50%;
	border: 2px dashed rgba(154, 83, 198, 0.3);
	/* Removed animation to keep dashed border static */
}

.about-icon {
	font-size: 4rem;
	color: var(--pi-purple);
	position: relative;
	z-index: 1;
}

/* Loading overlay - enhanced */
.loading-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 1000;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(5px);
}

.loading-spinner {
	position: relative;
	width: 80px;
	height: 80px;
}

.loading-spinner::before,
.loading-spinner::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 4px solid transparent;
	border-top-color: var(--pi-purple);
	animation: spin 1.5s linear infinite;
	box-shadow: 0 0 10px rgba(122, 53, 164, 0.3);
}

.loading-spinner::after {
	border-top-color: transparent;
	border-bottom-color: var(--pi-gold);
	animation-duration: 1s;
}

.loading-spinner-label {
	position: absolute;
	top: 120%;
	left: 50%;
	transform: translateX(-50%);
	color: white;
	font-weight: 500;
	white-space: nowrap;
}

/* Enhanced explosion particles */
.surprise-container {
	position: relative;
	overflow: hidden;
}

.surprise-trigger.active .explosion-particle {
	animation: explode 1s forwards;
}

.explosion-particle {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--pi-gold);
	opacity: 0;
	pointer-events: none;
}

/* Enhanced 3D effect */
.tilt-card {
	transform-style: preserve-3d;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tilt-card:hover {
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Certificate badge - enhanced */
.certificate {
	position: relative;
	padding: 1.8rem;
	border-radius: 0.8rem;
	background: linear-gradient(
		135deg,
		rgba(248, 192, 86, 0.1),
		rgba(154, 83, 198, 0.1)
	);
	border: 1px dashed rgba(248, 192, 86, 0.3);
	margin-top: 2rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.certificate-icon {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, var(--pi-gold), var(--pi-gold-dark));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.certificate-icon i {
	color: white;
	font-size: 1.2rem;
}

.certificate-title {
	font-weight: bold;
	text-align: center;
	margin-bottom: 0.5rem;
	margin-top: 0.5rem;
	font-size: 1.2rem;
	color: var(--pi-purple);
}

.certificate-text {
	text-align: center;
	font-size: 0.95rem;
	color: var(--text-secondary);
}

/* Floating icons - enhanced */
.floating-icon {
	position: absolute;
	z-index: -1;
	opacity: 0.5;
	animation: float 6s ease-in-out infinite;
}

/* Word counter styles - enhanced */
.word-counter {
	text-align: right;
	font-size: 0.9rem;
	color: var(--text-secondary);
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	padding-right: 0.5rem;
	display: none; /* Hidden by default */
	transition: all 0.3s ease;
}

.word-counter.invalid {
	color: #f44336;
	font-weight: 600;
	display: block; /* Show when invalid */
	animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Validation message - enhanced */
.validation-message {
	color: #e74c3c;
	font-size: 1rem; /* Kích thước lớn hơn chút */
	margin-top: 0.5rem;
	margin-bottom: 1rem;
	text-align: left;
	font-weight: 400;
	padding-left: 0.5rem; /* Giảm padding */
}

.hidden {
	display: none;
}

/* Visual indicator for input container - enhanced */
.pi-input-container.valid-input {
	border: 2px solid #724394; /* Màu tím thay vì màu xanh */
	box-shadow: 0 0 15px rgba(114, 67, 148, 0.2);
}
.pi-input-container.invalid-input {
	border: 2px solid #f44336;
	box-shadow: 0 0 15px rgba(244, 67, 54, 0.2);
	animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shake {
}

/* Limited submissions message - enhanced */
.limit-message {
	background-color: #fff3cd;
	color: #856404;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 20px;
	text-align: center;
	border: 1px solid #ffeeba;
	font-weight: 500;
	display: none;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	position: relative;
	overflow: hidden;
}

.limit-message::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background-color: #f8c056;
}

.error-message {
	background-color: #f8d7da;
	color: #721c24;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 20px;
	text-align: center;
	border: 1px solid #f5c6cb;
	font-weight: 500;
	display: none;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	position: relative;
	overflow: hidden;
}

.error-message::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background-color: #f44336;
}

/* Professional floating icons */
.floating-icon-img {
	position: absolute;
	width: 80px;
	height: 80px;
	animation: iconFloat 40s linear infinite;
	opacity: 0.9;
	z-index: -5;
	will-change: transform;
	object-fit: contain;
	/* Removed background-color, backdrop-filter, border-radius and box-shadow */
}

/* Professional icon float animation */
@keyframes iconFloat {
	0% {
		transform: translateY(100vh) translateX(0px);
		opacity: 0;
	}
	10% {
		opacity: 0.9;
		transform: translateY(80vh) translateX(var(--float-distance));
	}
	50% {
		transform: translateY(40vh)
			translateX(calc(var(--float-distance) * 1.5));
	}
	90% {
		opacity: 0.9;
		transform: translateY(10vh) translateX(var(--float-distance));
	}
	100% {
		transform: translateY(-100px) translateX(var(--float-distance));
		opacity: 0;
	}
}

/* Language chooser - enhanced */
.language-chooser {
	position: fixed;
	bottom: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	z-index: 60;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 30px;
	padding: 6px 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	transition: all 0.3s ease;
}

.language-chooser:hover {
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}

/* Language chooser positioning for mobile devices */
@media (max-width: 640px) {
	.language-chooser {
		bottom: 16px;
		right: 16px;
	}
}

/* For very small screens */
@media (max-width: 380px) {
	.language-chooser {
		bottom: 10px;
		right: 10px;
		transform: scale(0.9);
	}

	.pi-header-content .flex.items-center {
		transform: translateX(-15px); /* Move wallet text/icons slightly left */
	}
}

.language-option {
	display: flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 6px;
	cursor: pointer;
	color: rgba(0, 0, 0, 0.7);
	transition: all 0.2s ease;
	margin-left: 8px;
	font-size: 0.9rem;
	font-weight: 500;
}

.language-option:hover {
	color: #333;
	background-color: rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

.language-option.active {
	color: #fff;
	font-weight: bold;
	background-color: var(--pi-purple);
}

.language-option img {
	width: 18px;
	height: 18px;
	margin-right: 6px;
	border-radius: 2px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Blocked IP notification - enhanced */
.ip-blocked-message {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, 0.85);
	color: white;
	padding: 35px;
	border-radius: 12px;
	z-index: 2000;
	max-width: 90%;
	width: 420px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(8px);
	display: none;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.ip-blocked-message h3 {
	color: #f44336;
	margin-bottom: 20px;
	font-size: 1.7rem;
	font-weight: 700;
}

.ip-blocked-message p {
	margin-bottom: 25px;
	line-height: 1.6;
	font-size: 1.1rem;
}

.ip-blocked-message button {
	background-color: #f44336;
	color: white;
	border: none;
	padding: 12px 24px;
	border-radius: 8px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 1rem;
	box-shadow: 0 5px 15px rgba(244, 67, 54, 0.3);
}

.ip-blocked-message button:hover {
	background-color: #d32f2f;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(244, 67, 54, 0.4);
}

/* IP location detection notification - enhanced */
.location-detected {
	background: rgba(255, 255, 255, 0.97);
	color: #333;
	padding: 12px 20px;
	border-radius: 50px;
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	max-width: 90%;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.location-detected.visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: all;
}

.location-detected i {
	color: var(--pi-purple);
	margin-right: 8px;
}

.location-detected .country-flag {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	margin-right: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Form page enhancements */
#formPage {
	background-color: white !important;
	min-height: calc(100vh - 120px);
}

#formPage .pi-wallet-style {
	background-color: white;
	margin-top: 0;
}

#formPage .pi-title {
	color: #333;
	text-shadow: none;
	font-weight: 500;
	margin-top: 0; /* Giảm margin từ trên xuống */
	margin-bottom: 2rem;
}

#formPage .pi-info-text {
	color: #555;
	font-weight: 400; /* REDUCED from original */
}

#formPage .pi-input {
	color: #333;
	font-weight: 500;
}

#formPage .limit-message {
	background-color: #fff3cd;
	color: #856404;
}

#formPage .error-message {
	background-color: #f8d7da;
	color: #721c24;
}

/* Pending requests notification - enhanced */
.pending-requests-badge {
	position: fixed;
	bottom: 70px;
	right: 16px;
	background: linear-gradient(135deg, #f44336, #ff8177);
	color: white;
	border-radius: 25px;
	padding: 8px 16px;
	font-size: 0.8rem;
	font-weight: bold;
	z-index: 100;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	display: none;
	transform: translateY(0);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.pending-requests-badge:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Festive birthday elements */
.birthday-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, var(--pi-gold), var(--pi-gold-dark));
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	color: white;
	font-weight: bold;
	font-size: 0.8rem;
	padding: 5px;
	transform: rotate(15deg);
	z-index: 10;
}

.birthday-badge span:first-child {
	font-size: 1.2rem;
}

/* Success Modal Enhancements - Pi Transaction Style */
#successModal {
	z-index: 2500;
}

#successModal .receipt-container {
	max-width: 400px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
	position: relative;
}

/* Highlight Important Note Effect */
.modal-highlight-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.92); /* Color más oscuro */
	z-index: 2501;
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.modal-container {
	position: relative;
	z-index: 2502; /* Por encima del overlay */
}

.modal-highlight-active .modal-content-section {
	opacity: 0.2; /* Más atenuado */
	transition: opacity 0.5s ease;
	pointer-events: none;
	filter: grayscale(100%); /* Añadir efecto de escala de grises */
}

.modal-highlight-overlay.active {
	opacity: 1;
	pointer-events: auto;
}

.highlight-important-note {
	position: relative;
	z-index: 2503;
	animation: pulse-highlight 2s infinite;
	box-shadow: 0 0 30px 15px rgba(255, 193, 7, 0.5); /* Sombra más pronunciada */
	transform: scale(1.05);
	transition: all 0.5s ease;
	opacity: 1 !important;
	pointer-events: auto !important;
	background-color: rgba(
		255,
		248,
		225,
		1
	) !important; /* Fondo más brillante */
	border-color: #ffc107 !important; /* Borde más visible */
}

.highlight-important-note:before {
	content: "";
	position: absolute;
	top: -8px;
	left: -8px;
	right: -8px;
	bottom: -8px;
	border: 2px solid #ffc107;
	border-radius: 8px;
	animation: pulse-border 2s infinite;
	z-index: -1;
}

.understand-btn {
	display: inline-block;
	background-color: #ffc107;
	color: #333;
	font-weight: bold;
	padding: 8px 15px;
	border-radius: 4px;
	margin-top: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	border: none;
	text-transform: uppercase;
	font-size: 0.85rem;
	pointer-events: auto !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra añadida para destacar el botón */
}

.modal-highlight-active {
	background-color: rgba(
		0,
		0,
		0,
		0.95
	) !important; /* Fondo del modal más oscuro cuando está activo */
}

.understand-btn:hover {
	background-color: #ffd54f;
	transform: translateY(-2px);
}

/* Animaciones se mantienen igual */
@keyframes pulse-highlight {
	0%,
	100% {
		box-shadow: 0 0 20px 10px rgba(255, 193, 7, 0.2);
	}
	50% {
		box-shadow: 0 0 25px 15px rgba(255, 193, 7, 0.4);
	}
}

@keyframes pulse-border {
	0%,
	100% {
		opacity: 0.6;
	}
	50% {
		opacity: 1;
	}
}

/* Transaction header styling */
.transaction-header {
	background: linear-gradient(
		135deg,
		var(--pi-purple),
		var(--pi-purple-dark)
	);
	padding: 20px;
	position: relative;
}

.transaction-amount {
	font-size: 2.5rem;
	font-weight: 700;
	color: white;
	text-align: center;
	margin: 10px 0;
}

.transaction-date {
	color: rgba(255, 255, 255, 0.8);
	text-align: center;
	font-size: 0.9rem;
}

.transaction-close-btn {
	position: absolute;
	top: 15px;
	right: 15px;
	color: white;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.transaction-close-btn:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(1.1);
}

.transaction-details {
	padding: 20px;
}

.transaction-detail-row {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.transaction-detail-label {
	color: rgba(0, 0, 0, 0.6);
	font-weight: 500;
}

.transaction-detail-value {
	font-weight: 600;
}

/* Enhanced notification banner */
.notification-banner {
	background: linear-gradient(
		to right,
		rgba(248, 192, 86, 0.95),
		rgba(230, 169, 56, 0.95)
	);
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	margin: 0 auto 16px;
	max-width: 96%;
	padding: 12px 20px;
	font-weight: 500;
	color: #57401a;
	position: relative;
	border: 1px solid rgba(248, 192, 86, 0.3);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.notification-banner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.notification-banner p {
	margin: 0;
	position: relative;
	font-size: 0.95rem;
	line-height: 1.5;
	text-align: center;
}

.notification-banner i {
	margin-right: 10px;
	color: #57401a;
	font-size: 1.2rem;
}

@keyframes shimmer {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

/* Enhanced Animations */
@keyframes shineIcon {
	0% {
		transform: rotate(30deg) translateX(-100%);
	}
	100% {
		transform: rotate(30deg) translateX(100%);
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes twinkle {
	0%,
	100% {
		opacity: 0.2;
		transform: scale(1);
	}
	50% {
		opacity: 0.5;
		transform: scale(1.2);
	}
}

@keyframes twinkleStar {
	0%,
	100% {
		opacity: 0.4;
		transform: scale(1);
		filter: blur(0.5px);
	}
	50% {
		opacity: 0.8;
		transform: scale(1.3);
		filter: blur(1px);
	}
}

@keyframes float {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes floatParticle {
	0% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-20px) rotate(180deg);
	}
	100% {
		transform: translateY(0) rotate(360deg);
	}
}

@keyframes waveRotate {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@keyframes coinRotate {
	0% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}

@keyframes explode {
	0% {
		opacity: 1;
		transform: translate(0, 0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(var(--tx), var(--ty)) scale(0);
	}
}

@keyframes lightStreak {
	0%,
	100% {
		opacity: 0;
		transform: rotate(45deg) translateX(-100px);
	}
	10%,
	90% {
		opacity: 0.3;
	}
	50% {
		transform: rotate(45deg) translateX(calc(100vw + 100px));
	}
}

/* Enhanced shooting star animation */
@keyframes shootingStar {
	0% {
		opacity: 0;
		transform: translateX(0) translateY(0) scale(0.5);
	}
	10% {
		opacity: 0.3;
		transform: translateX(50px) translateY(50px) scale(0.7);
	}
	45% {
		opacity: 1;
		transform: translateX(150px) translateY(150px) scale(1);
	}
	70% {
		opacity: 0.3;
		transform: translateX(250px) translateY(250px) scale(0.7);
	}
	100% {
		opacity: 0;
		transform: translateX(300px) translateY(300px) scale(0.5);
	}
}

/* Enhanced card wave animation */
@keyframes cardWave {
	0%,
	100% {
		opacity: 0;
		transform: translate(-25%, -25%) scale(0.1);
	}
	50% {
		opacity: 0.4;
		transform: translate(-25%, -25%) scale(1.8);
	}
}

/* Enhanced confetti animation */
@keyframes confettiFall {
	0% {
		opacity: 1;
		transform: translateY(-10vh) rotate(0deg) scale(0.8);
	}
	50% {
		opacity: 0.8;
		transform: translateY(50vh) rotate(360deg) scale(1.2);
	}
	100% {
		opacity: 0.2;
		transform: translateY(100vh) rotate(720deg) scale(0.8);
	}
}

/* Enhanced shiny wave animation */
@keyframes shinyWave {
	0% {
		left: -100%;
	}
	100% {
		left: 150%;
	}
}

/* Rotation animation */
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Countdown Timer Styles */
.countdown-container div {
	position: relative;
	transition: all 0.2s ease;
}

.countdown-container div:not(:last-child)::after {
	content: ":";
	position: absolute;
	right: -12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	font-weight: bold;
	color: var(--pi-purple);
}

.countdown-container div > div:first-child {
	box-shadow: 0 8px 15px rgba(105, 57, 136, 0.3);
	position: relative;
	overflow: hidden;
	border-radius: 0.5rem;
}

.countdown-container div > div:first-child::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: rgba(255, 255, 255, 0.5);
}

.countdown-pulse {
	animation: countdown-pulse 1s ease;
}

@keyframes countdown-pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.08);
	}
	100% {
		transform: scale(1);
	}
}