/* Button system (BEM: .mike-btn, .mike-btn--modifier) */

.mike-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--radius-full);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 700;
	cursor: pointer;
	transition: all 0.25s;
	border: 2px solid transparent;
	text-decoration: none;
	white-space: nowrap;
}

.mike-btn--primary {
	background: var(--color-purple);
	color: var(--color-white);
	border-color: var(--color-purple);
}

.mike-btn--primary:hover {
	background: var(--color-purple-light);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	color: white;
}

.mike-btn--secondary {
	background: var(--color-green);
	color: var(--color-white);
	border-color: var(--color-green);
}

.mike-btn--secondary:hover {
	background: var(--color-green-light);
	transform: translateY(-2px);
}

.mike-btn--outline {
	background: transparent;
	color: var(--color-purple);
	border-color: var(--color-purple);
}

.mike-btn--outline:hover {
	background: var(--color-purple-soft);
}

.mike-btn--sm {
	padding: 10px 20px;
	font-size: var(--text-sm);
}

.mike-btn--lg {
	padding: 18px 36px;
	font-size: var(--text-lg);
}

.mike-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.mike-input--error {
	border-color: #e53e3e !important;
}

@keyframes mike-shake {
	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-6px);
	}

	75% {
		transform: translateX(6px);
	}
}

.mike-input--error {
	animation: mike-shake 0.3s ease;
}