/* Utility classes */
.text-center { text-align: center; }
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--text-secondary); }
.mb-2 { margin-bottom: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }

.loading { opacity: 0.7; pointer-events: none; }
.loading .btn { position: relative; }
.loading .btn::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	border: 2px solid transparent;
	border-top: 2px solid currentColor;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.badge {
	display: inline-block;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 20px;
	background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);
	color: var(--surface-contrast);
	text-transform: uppercase;
	letter-spacing: 0.025em;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3), 0 0 20px rgba(16, 185, 129, 0.1);
	transition: all 0.3s ease;
	animation: fade-in 0.6s ease-out;
}

.badge:hover {
	transform: scale(1.05) translateY(-2px);
	box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4), 0 0 30px rgba(16, 185, 129, 0.2);
}

.js-hidden { display: none; }

.arrow-low {
	position: relative;
	display: inline-block;
}

.arrow-low::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}