.popup {
	width: 400px;
	background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
	border-radius: 16px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.1);
	text-align: center;
	padding: 0 30px 30px;
	color: #333;
	visibility: hidden;
	transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.open-popup {
	visibility: visible;
	top: 60%;
	transform: translate(-50%, -50%) scale(1);
	z-index: 10;
	animation: bounceIn 0.6s ease-out;
}

.popup img {
	width: 100px;
	margin-top: -50px;
	border-radius: 50%;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease;
}

.popup img:hover {
	transform: scale(1.05);
}

.popup h2 {
	font-size: 38px;
	font-weight: 500;
	margin: 30px 0 10px;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
  70% {
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.popup button {
	width: 100%;
	margin-top: 50px;
	padding: 12px 0;
	background: linear-gradient(135deg, #6fd649 0%, #5cb85c 100%);
	color: #fff;
	border: 0;
	outline: none;
	font-size: 18px;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(111, 214, 73, 0.3);
	transition: all 0.3s ease;
	font-weight: 600;
}

.popup button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(111, 214, 73, 0.4);
	background: linear-gradient(135deg, #5cb85c 0%, #4cae4c 100%);
}

.loading-spinner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 20px;
}

.spinner-container {
	display: flex;
	gap: 8px;
}

.spinner-ring {
	width: 12px;
	height: 12px;
	border: 2px solid #6fd649;
	border-top: 2px solid transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.spinner-ring:nth-child(1) { animation-delay: -0.45s; }
.spinner-ring:nth-child(2) { animation-delay: -0.3s; }
.spinner-ring:nth-child(3) { animation-delay: -0.15s; }
.spinner-ring:nth-child(4) { animation-delay: 0s; }

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

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