/*
 * Referral alert styling. Carried over from lmcu-referral-tracker, using
 * Automatic.css variables so it inherits the site's tokens. The stray
 * Tailwind @apply block from the old file is dropped — nothing compiles it.
 */

.referral-alert {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs);

	background-color: var(--accent);
	color: var(--base);
	font-size: var(--text-s);
	font-weight: var(--font-medium);

	padding: var(--space-xs) var(--space-s);
	border-radius: var(--radius-s);

	box-shadow: var(--shadow-m);
	position: relative;
	z-index: 1000;

	animation: referralSlideIn var(--transition-m) ease-out;
}

.referral-alert span {
	flex: 1;
	line-height: var(--line-m);
}

.referral-alert button {
	background: transparent;
	border: none;
	color: inherit;
	font-size: var(--text-m);
	cursor: pointer;
	line-height: 1;
	padding: 0 var(--space-2xs);
	transition: opacity var(--transition-s);
}

.referral-alert button:hover,
.referral-alert button:focus {
	opacity: 0.8;
}

.referral-alert__close-icon {
	width: 0.75em;
	height: 0.75em;
}

@keyframes referralSlideIn {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.referral-alert {
		animation: none;
	}
}

[data-referral-hidden] {
	display: none !important;
}