/* ==========================================
   BUTTONS
   ========================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-md);
	padding: 10px 22px;
	border-radius: 10px;
	border: none;
	background: linear-gradient(135deg, var(--btn-gradient-from), var(--btn-gradient-to));
	color: var(--btn-text);
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
	font-weight: 600;
	font-size: var(--font-text);
	letter-spacing: 0.01em;
	box-shadow: 0 4px 14px rgba(var(--btn-shadow-rgb), 0.3);
	transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	overflow: hidden;
}

a.btn,
.card a.btn,
a.btn:visited,
.card a.btn:visited,
a.btn:hover,
.card a.btn:hover,
a.btn:focus,
.card a.btn:focus {
	color: var(--btn-text);
	text-decoration: none;
}

.btn::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(var(--overlay-white-rgb), 0.15), transparent 60%);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(var(--btn-shadow-rgb), 0.45);
	text-decoration: none;
}

.btn:hover::after {
	opacity: 1;
}

.btn:active {
	transform: translateY(0) scale(0.98);
}

.btn--secondary {
	background: linear-gradient(135deg, rgba(var(--secondary-rgb), 0.85), rgba(var(--secondary-rgb), 1));
	box-shadow: 0 4px 14px rgba(var(--secondary-rgb), 0.25);
}

.btn--secondary:hover {
	box-shadow: 0 8px 24px rgba(var(--secondary-rgb), 0.4);
}

.btn:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: none;
	box-shadow: var(--ring);
}

.btn--neutral {
	background: transparent;
	color: var(--text);
	box-shadow: none;
	border: 1px solid var(--border);
}

.btn--neutral:hover {
	background: rgba(var(--surface-rgb), 0.6);
	box-shadow: none;
	transform: none;
}

.btn--danger {
	background: linear-gradient(135deg, rgba(var(--error-rgb), 0.85), var(--error));
	box-shadow: 0 4px 14px rgba(var(--error-rgb), 0.25);
}

.btn--danger:hover {
	box-shadow: 0 8px 24px rgba(var(--error-rgb), 0.4);
}

.btn--accent {
	background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), var(--accent));
	box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.25);
}

.btn--accent:hover {
	box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.4);
}

.btn--primary {
	background: linear-gradient(135deg, var(--btn-gradient-from), var(--btn-gradient-to));
}

.btn--small,
.btn--sm {
	padding: 6px 14px;
	font-size: var(--font-sm);
}

.btn--ghost {
	background: transparent;
	color: var(--text);
	box-shadow: none;
	border: 1px solid transparent;
}

.btn--ghost:hover {
	background: rgba(var(--surface-rgb), 0.5);
	box-shadow: none;
	transform: none;
}

.btn--active {
	background: rgba(var(--accent-rgb), 0.15);
	border: 1px solid rgba(var(--accent-rgb), 0.3);
	color: var(--accent);
	box-shadow: none;
}

.btn--active:hover {
	background: rgba(var(--accent-rgb), 0.2);
	box-shadow: none;
}

.btn--full {
	width: 100%;
}

.btn:disabled,
button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: var(--surface);
	color: var(--muted);
	border: 1px solid var(--border);
	box-shadow: none;
	transform: none;
}

.btn:disabled::after {
	display: none;
}

.blocked-page .btn,
.blocked-page a.btn,
.blocked-page a.btn:visited,
.blocked-page a.btn:hover,
.blocked-page a.btn:active {
	color: var(--btn-text);
	text-decoration: none;
}