/* ==========================================================
   NAVBAR BUTTONS REDESIGN
   Register (beam) & Login (shine) — Veterans MU aesthetic
   ========================================================== */

@property --lm-beam {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

.lm-page .navbar-buttons-desktop {
	gap: 12px;
	font-size: 12px;
}

.lm-page a.signin-myaccount-button,
.lm-page a.login-logout-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	padding: 12px 22px;
	border: 0;
	border-radius: 7px;
	font-family: var(--lm-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition:
		color 220ms ease,
		background-color 220ms ease,
		box-shadow 220ms ease,
		transform 220ms ease;
}

.lm-page a.signin-myaccount-button:hover,
.lm-page a.login-logout-button:hover {
	color: var(--lm-ivory);
	text-decoration: none;
}

/* ----------------------------------------------------------
   REGISTER — primary CTA con haz de luz recorriendo el borde
   ---------------------------------------------------------- */
.lm-page a.signin-myaccount-button {
	--lm-beam: 0deg;
	color: var(--lm-ivory);
	background: linear-gradient(135deg, #9c130c 0%, var(--lm-red) 55%, var(--lm-red-dark) 100%);
	box-shadow:
		0 0 0 1px rgba(237, 42, 28, 0.5),
		0 0 16px rgba(237, 42, 28, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.lm-page a.signin-myaccount-button::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 9px;
	padding: 2px;
	background: conic-gradient(
		from var(--lm-beam),
		transparent 0deg,
		transparent 258deg,
		rgba(237, 42, 28, 0.9) 320deg,
		#ff6a5c 348deg,
		transparent 360deg
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: lm-beam-rotate 2.6s linear infinite;
	pointer-events: none;
}

.lm-page a.signin-myaccount-button:hover {
	transform: translateY(-1px);
	box-shadow:
		0 0 0 1px rgba(237, 42, 28, 0.75),
		0 0 26px rgba(237, 42, 28, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.lm-page a.signin-myaccount-button:active {
	transform: translateY(0);
}

@keyframes lm-beam-rotate {
	to {
		--lm-beam: 360deg;
	}
}

/* ----------------------------------------------------------
   LOGIN — secundario que se rellena de rojo al hacer hover
   ---------------------------------------------------------- */
.lm-page a.login-logout-button {
	color: var(--lm-ivory);
	background: rgba(237, 42, 28, 0.06);
	box-shadow: inset 0 0 0 1px rgba(237, 42, 28, 0.55);
}

.lm-page a.login-logout-button:hover {
	color: var(--lm-ivory) !important;
	background: linear-gradient(135deg, #9c130c 0%, var(--lm-red) 55%, var(--lm-red-dark) 100%);
	box-shadow:
		0 0 0 1px rgba(237, 42, 28, 0.8),
		0 0 22px rgba(237, 42, 28, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);
	transform: translateY(-1px);
}

.lm-page a.login-logout-button:active {
	transform: translateY(0);
}

/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */
.lm-page .navbar-buttons-mobile a.signin-myaccount-button,
.lm-page .navbar-buttons-mobile a.login-logout-button {
	width: 100%;
	min-width: 0;
	padding: 14px 18px;
	border: 0;
	border-radius: 7px;
}

/* ----------------------------------------------------------
   ACCESIBILIDAD: sin movimiento preferido
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.lm-page a.signin-myaccount-button::before {
		animation: none;
	}
}