/* ═══════════════════════════════════════════════════════
   Mitgliederbereich Login — v3.37.0
   Aurora Background + Glassmorphism Card
   ═══════════════════════════════════════════════════════ */

/* ── @property for animated gradients ─────────────── */
@property --aurora-1 {
	syntax: '<percentage>';
	initial-value: 20%;
	inherits: false;
}
@property --aurora-2 {
	syntax: '<percentage>';
	initial-value: 60%;
	inherits: false;
}
@property --aurora-3 {
	syntax: '<percentage>';
	initial-value: 80%;
	inherits: false;
}
@property --aurora-4 {
	syntax: '<percentage>';
	initial-value: 40%;
	inherits: false;
}

/* ── Body ────────────────────────────────────────── */
.mb-login-body {
	min-height: 100dvh !important;
	background: var(--iu-bg) !important;
	overflow-x: hidden !important;
}

/* ── Aurora Background ───────────────────────────── */
.mb-login-aurora {
	position: fixed !important;
	inset: 0 !important;
	z-index: 0 !important;
	pointer-events: none !important;
	background:
		radial-gradient(ellipse at var(--aurora-1) var(--aurora-2), rgba(12, 205, 224, 0.22) 0%, transparent 55%),
		radial-gradient(ellipse at var(--aurora-3) var(--aurora-4), rgba(155, 114, 207, 0.18) 0%, transparent 50%),
		radial-gradient(ellipse at 60% 80%, rgba(186, 220, 248, 0.20) 0%, transparent 50%) !important;
	animation: aurora-morph 12s ease-in-out infinite alternate !important;
}

@keyframes aurora-morph {
	0% {
		--aurora-1: 20%;
		--aurora-2: 30%;
		--aurora-3: 75%;
		--aurora-4: 65%;
	}
	33% {
		--aurora-1: 50%;
		--aurora-2: 20%;
		--aurora-3: 30%;
		--aurora-4: 70%;
	}
	66% {
		--aurora-1: 70%;
		--aurora-2: 60%;
		--aurora-3: 20%;
		--aurora-4: 30%;
	}
	100% {
		--aurora-1: 30%;
		--aurora-2: 70%;
		--aurora-3: 60%;
		--aurora-4: 20%;
	}
}

/* Fallback: static gradient for browsers without @property */
@supports not (background: paint(a)) {
	.mb-login-aurora {
		background:
			radial-gradient(ellipse at 25% 35%, rgba(12, 205, 224, 0.20) 0%, transparent 55%),
			radial-gradient(ellipse at 70% 60%, rgba(155, 114, 207, 0.16) 0%, transparent 50%),
			radial-gradient(ellipse at 55% 80%, rgba(186, 220, 248, 0.18) 0%, transparent 50%) !important;
		animation: none !important;
	}
}

/* ── Main Layout ─────────────────────────────────── */
.mb-login-main {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 100dvh !important;
	padding: 2rem 1rem !important;
	gap: 2rem !important;
}

/* ── Logo ────────────────────────────────────────── */
.mb-login-logo {
	display: block !important;
	text-decoration: none !important;
	animation: login-fadeIn 0.6s ease both !important;
}
.mb-login-logo img {
	width: 180px !important;
	height: auto !important;
}

/* ── Card ────────────────────────────────────────── */
.mb-login-card {
	position: relative !important;
	width: 100% !important;
	max-width: 420px !important;
	background: rgba(255, 255, 255, 0.72) !important;
	backdrop-filter: blur(24px) saturate(1.4) !important;
	-webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
	border-radius: 20px !important;
	border: 1px solid rgba(255, 255, 255, 0.60) !important;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 4px 12px rgba(0, 0, 0, 0.06),
		0 20px 40px rgba(0, 0, 0, 0.06) !important;
	padding: 2.5rem !important;
	overflow: hidden !important;
	animation: login-cardEntrance 0.7s cubic-bezier(0.22, 1, 0.36, 1) both !important;
	animation-delay: 0.1s !important;
}

/* Gradient border glow on hover/focus-within */
.mb-login-card::before {
	content: '' !important;
	position: absolute !important;
	inset: -1px !important;
	border-radius: 21px !important;
	padding: 1px !important;
	background: linear-gradient(135deg, rgba(12, 205, 224, 0.4), rgba(155, 114, 207, 0.3), rgba(12, 205, 224, 0.1)) !important;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
	-webkit-mask-composite: xor !important;
	mask-composite: exclude !important;
	opacity: 0 !important;
	transition: opacity 0.4s ease !important;
	pointer-events: none !important;
	z-index: -1 !important;
}
.mb-login-card:hover::before,
.mb-login-card:focus-within::before {
	opacity: 1 !important;
}

/* ── Card Entrance Animation ─────────────────────── */
@keyframes login-cardEntrance {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.98);
		filter: blur(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
}

@keyframes login-fadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Card Header ─────────────────────────────────── */
.mb-login-card__header {
	text-align: center !important;
	margin-bottom: 1.75rem !important;
}
.mb-login-card__title {
	font-family: var(--iu-font-display), sans-serif !important;
	font-size: var(--iu-fs-xl) !important;
	font-weight: 700 !important;
	color: var(--iu-text) !important;
	margin: 0 0 0.35rem !important;
	letter-spacing: -0.01em !important;
	line-height: 1.2 !important;
}
.mb-login-card__subtitle {
	font-family: var(--iu-font), sans-serif !important;
	font-size: var(--iu-fs-sm) !important;
	color: var(--iu-text3) !important;
	margin: 0 !important;
	line-height: 1.5 !important;
}

/* ── Method Toggle ───────────────────────────────── */
.mb-login-toggle {
	position: relative !important;
	display: flex !important;
	background: var(--iu-surface2) !important;
	border-radius: 10px !important;
	padding: 3px !important;
	margin-bottom: 1.5rem !important;
	gap: 0 !important;
}
.mb-login-toggle__btn {
	flex: 1 !important;
	position: relative !important;
	z-index: 1 !important;
	padding: 0.5rem 0.75rem !important;
	font-family: var(--iu-font), sans-serif !important;
	font-size: var(--iu-fs-sm) !important;
	font-weight: 500 !important;
	color: var(--iu-text3) !important;
	background: none !important;
	border: none !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	transition: color 0.25s ease !important;
	line-height: 1.4 !important;
}
.mb-login-toggle__btn.is-active {
	color: var(--iu-text) !important;
}
.mb-login-toggle__indicator {
	position: absolute !important;
	top: 3px !important;
	left: 3px !important;
	width: calc(50% - 3px) !important;
	height: calc(100% - 6px) !important;
	background: var(--iu-surface) !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
	z-index: 0 !important;
}
.mb-login-toggle__indicator.is-right {
	transform: translateX(100%) !important;
}

/* ── Panels ──────────────────────────────────────── */
.mb-login-panel {
	animation: login-fadeIn 0.3s ease both !important;
}
.mb-login-panel[hidden] {
	display: none !important;
}

/* ── Magic Login Override ────────────────────────── */
.mb-login-magic-wrap .magic-login-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 1rem !important;
}
.mb-login-magic-wrap .magic-login-form label {
	display: block !important;
	font-family: var(--iu-font), sans-serif !important;
	font-size: var(--iu-fs-xs) !important;
	font-weight: 500 !important;
	color: var(--iu-text2) !important;
	margin-bottom: 0.35rem !important;
}
.mb-login-magic-wrap .magic-login-form input[type="email"],
.mb-login-magic-wrap .magic-login-form input[type="text"] {
	width: 100% !important;
	padding: 0.7rem 0.85rem !important;
	font-family: var(--iu-font), sans-serif !important;
	font-size: var(--iu-fs-sm) !important;
	color: var(--iu-text) !important;
	background: var(--iu-surface2) !important;
	border: 1.5px solid transparent !important;
	border-radius: 10px !important;
	outline: none !important;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
	box-sizing: border-box !important;
}
.mb-login-magic-wrap .magic-login-form input[type="email"]:focus,
.mb-login-magic-wrap .magic-login-form input[type="text"]:focus {
	border-color: var(--iu-cyan) !important;
	background: var(--iu-surface) !important;
	box-shadow: 0 0 0 3px rgba(12, 205, 224, 0.12) !important;
}
.mb-login-magic-wrap .magic-login-form input[type="submit"],
.mb-login-magic-wrap .magic-login-form button[type="submit"] {
	width: 100% !important;
	padding: 0.75rem 1rem !important;
	font-family: var(--iu-font-display), sans-serif !important;
	font-size: var(--iu-fs-sm) !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: linear-gradient(135deg, #0CCDE0, #0AB8C9) !important;
	border: none !important;
	border-radius: 10px !important;
	cursor: pointer !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
	transition: transform 0.15s ease, box-shadow 0.2s ease !important;
	min-height: 44px !important;
}
.mb-login-magic-wrap .magic-login-form input[type="submit"]:hover,
.mb-login-magic-wrap .magic-login-form button[type="submit"]:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(12, 205, 224, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
.mb-login-magic-wrap .magic-login-form input[type="submit"]:active,
.mb-login-magic-wrap .magic-login-form button[type="submit"]:active {
	transform: translateY(0.5px) !important;
}
/* Hide default magic login title/description if any */
.mb-login-magic-wrap .magic-login-form-header,
.mb-login-magic-wrap .magic-login-form h3,
.mb-login-magic-wrap .magic-login-form p.description {
	display: none !important;
}
/* Magic login success/info messages */
.mb-login-magic-wrap .magic-login-info,
.mb-login-magic-wrap .magic-login-success {
	text-align: center !important;
	padding: 1rem !important;
	font-family: var(--iu-font), sans-serif !important;
	font-size: var(--iu-fs-sm) !important;
	color: var(--iu-text2) !important;
	background: rgba(12, 205, 224, 0.08) !important;
	border-radius: 10px !important;
}
.mb-login-magic-wrap .magic-login-error {
	text-align: center !important;
	padding: 0.75rem !important;
	font-family: var(--iu-font), sans-serif !important;
	font-size: var(--iu-fs-xs) !important;
	color: #B91C1C !important;
	background: rgba(185, 28, 28, 0.06) !important;
	border-radius: 8px !important;
}

/* ── Form Fields ─────────────────────────────────── */
.mb-login-field {
	margin-bottom: 1rem !important;
	animation: login-fadeIn 0.4s ease both !important;
}
.mb-login-field:nth-child(1) { animation-delay: 0.1s !important; }
.mb-login-field:nth-child(2) { animation-delay: 0.18s !important; }

.mb-login-label {
	display: block !important;
	font-family: var(--iu-font), sans-serif !important;
	font-size: var(--iu-fs-xs) !important;
	font-weight: 500 !important;
	color: var(--iu-text2) !important;
	margin-bottom: 0.35rem !important;
}

.mb-login-input {
	width: 100% !important;
	padding: 0.7rem 0.85rem !important;
	font-family: var(--iu-font), sans-serif !important;
	font-size: var(--iu-fs-sm) !important;
	color: var(--iu-text) !important;
	background: var(--iu-surface2) !important;
	border: 1.5px solid transparent !important;
	border-radius: 10px !important;
	outline: none !important;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
	box-sizing: border-box !important;
}
.mb-login-input::placeholder {
	color: var(--iu-text4) !important;
}
.mb-login-input:focus {
	border-color: var(--iu-cyan) !important;
	background: var(--iu-surface) !important;
	box-shadow: 0 0 0 3px rgba(12, 205, 224, 0.12) !important;
}

/* Password input with toggle */
.mb-login-input-wrap {
	position: relative !important;
}
.mb-login-input--pw {
	padding-right: 2.75rem !important;
}
.mb-login-pw-toggle {
	position: absolute !important;
	top: 50% !important;
	right: 0.65rem !important;
	transform: translateY(-50%) !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	padding: 4px !important;
	color: var(--iu-text4) !important;
	transition: color 0.2s ease !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.mb-login-pw-toggle:hover {
	color: var(--iu-text3) !important;
}
.mb-login-pw-icon[hidden] {
	display: none !important;
}

/* ── Remember + Forgot ───────────────────────────── */
.mb-login-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 1.25rem !important;
	animation: login-fadeIn 0.4s ease both !important;
	animation-delay: 0.26s !important;
}
.mb-login-remember {
	display: flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	font-family: var(--iu-font), sans-serif !important;
	font-size: var(--iu-fs-xs) !important;
	color: var(--iu-text3) !important;
	cursor: pointer !important;
}
.mb-login-remember input[type="checkbox"] {
	width: 16px !important;
	height: 16px !important;
	accent-color: var(--iu-cyan) !important;
	border-radius: 4px !important;
	cursor: pointer !important;
}
.mb-login-forgot {
	font-family: var(--iu-font), sans-serif !important;
	font-size: var(--iu-fs-xs) !important;
	color: var(--iu-text4) !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
}
.mb-login-forgot:hover {
	color: var(--iu-cyan) !important;
}

/* ── Error Message ───────────────────────────────── */
.mb-login-error {
	text-align: center !important;
	padding: 0.65rem 0.85rem !important;
	font-family: var(--iu-font), sans-serif !important;
	font-size: var(--iu-fs-xs) !important;
	color: #B91C1C !important;
	background: rgba(185, 28, 28, 0.06) !important;
	border-radius: 8px !important;
	margin-bottom: 1rem !important;
	animation: login-fadeIn 0.25s ease both !important;
}
.mb-login-error[hidden] {
	display: none !important;
}

/* ── Submit Button ───────────────────────────────── */
.mb-login-btn {
	position: relative !important;
	width: 100% !important;
	padding: 0.75rem 1rem !important;
	font-family: var(--iu-font-display), sans-serif !important;
	font-size: var(--iu-fs-sm) !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: linear-gradient(135deg, #0CCDE0, #0AB8C9) !important;
	border: none !important;
	border-radius: 10px !important;
	cursor: pointer !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
	transition: transform 0.15s ease, box-shadow 0.2s ease !important;
	overflow: hidden !important;
	min-height: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.mb-login-btn:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(12, 205, 224, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
.mb-login-btn:active {
	transform: translateY(0.5px) !important;
}
.mb-login-btn:disabled {
	cursor: not-allowed !important;
	opacity: 0.7 !important;
}

/* Shimmer sweep on hover */
.mb-login-btn::after {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: -100% !important;
	width: 100% !important;
	height: 100% !important;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
	transition: none !important;
}
.mb-login-btn:hover::after {
	animation: login-shimmer 0.6s ease forwards !important;
}
@keyframes login-shimmer {
	from { left: -100%; }
	to   { left: 100%; }
}

/* Spinner */
.mb-login-btn__spinner {
	width: 20px !important;
	height: 20px !important;
	border: 2.5px solid rgba(255, 255, 255, 0.3) !important;
	border-top-color: #fff !important;
	border-radius: 50% !important;
	animation: login-spin 0.65s linear infinite !important;
}
.mb-login-btn__spinner[hidden] {
	display: none !important;
}
@keyframes login-spin {
	to { transform: rotate(360deg); }
}

/* ── Success Overlay ─────────────────────────────── */
.mb-login-success {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 3rem 2rem !important;
	animation: login-fadeIn 0.3s ease both !important;
}
.mb-login-success[hidden] {
	display: none !important;
}

.mb-login-success__svg {
	margin-bottom: 1rem !important;
}
.mb-login-success__circle {
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	animation: login-circleIn 0.6s ease forwards !important;
}
.mb-login-success__check {
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: login-checkIn 0.35s ease forwards 0.5s !important;
}
@keyframes login-circleIn {
	to { stroke-dashoffset: 0; }
}
@keyframes login-checkIn {
	to { stroke-dashoffset: 0; }
}

.mb-login-success__text {
	font-family: var(--iu-font), sans-serif !important;
	font-size: var(--iu-fs-sm) !important;
	color: var(--iu-text3) !important;
	margin: 0 !important;
	opacity: 0 !important;
	animation: login-fadeIn 0.3s ease forwards 0.8s !important;
}

/* ── Error Shake ─────────────────────────────────── */
.mb-login-card.is-shaking {
	animation: login-shake 0.4s ease !important;
}
@keyframes login-shake {
	0%, 100% { transform: translateX(0); }
	15%      { transform: translateX(-6px); }
	30%      { transform: translateX(5px); }
	45%      { transform: translateX(-4px); }
	60%      { transform: translateX(3px); }
	75%      { transform: translateX(-2px); }
}

/* ── Footer ──────────────────────────────────────── */
.mb-login-footer {
	text-align: center !important;
	animation: login-fadeIn 0.5s ease both !important;
	animation-delay: 0.3s !important;
}
.mb-login-footer__cta {
	font-family: var(--iu-font), sans-serif !important;
	font-size: var(--iu-fs-sm) !important;
	color: var(--iu-text3) !important;
	margin: 0 0 0.5rem !important;
}
.mb-login-footer__cta a {
	color: var(--iu-cyan) !important;
	text-decoration: none !important;
	font-weight: 500 !important;
}
.mb-login-footer__cta a:hover {
	text-decoration: underline !important;
}
.mb-login-footer__links {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
}
.mb-login-footer__links a {
	font-family: var(--iu-font), sans-serif !important;
	font-size: var(--iu-fs-2xs) !important;
	color: var(--iu-text4) !important;
	text-decoration: none !important;
}
.mb-login-footer__links a:hover {
	color: var(--iu-text3) !important;
}
.mb-login-footer__links span {
	color: var(--iu-text4) !important;
	font-size: var(--iu-fs-2xs) !important;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 480px) {
	.mb-login-card {
		padding: 1.5rem !important;
		border-radius: 16px !important;
		backdrop-filter: blur(16px) saturate(1.3) !important;
		-webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
		background: rgba(255, 255, 255, 0.85) !important;
	}
	.mb-login-card__title {
		font-size: var(--iu-fs-lg) !important;
	}
	.mb-login-aurora {
		animation-duration: 20s !important;
	}
	.mb-login-main {
		padding: 1.5rem 1rem !important;
		gap: 1.5rem !important;
	}
}

/* ── Reduced Motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.mb-login-aurora,
	.mb-login-card,
	.mb-login-logo,
	.mb-login-field,
	.mb-login-row,
	.mb-login-footer,
	.mb-login-panel,
	.mb-login-error,
	.mb-login-success,
	.mb-login-success__text {
		animation: none !important;
	}
	.mb-login-card {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
	.mb-login-logo,
	.mb-login-footer,
	.mb-login-field,
	.mb-login-row,
	.mb-login-success__text {
		opacity: 1 !important;
		transform: none !important;
	}
	.mb-login-success__circle {
		stroke-dashoffset: 0 !important;
		animation: none !important;
	}
	.mb-login-success__check {
		stroke-dashoffset: 0 !important;
		animation: none !important;
	}
	.mb-login-btn::after {
		display: none !important;
	}
	.mb-login-btn:hover {
		transform: none !important;
	}
	.mb-login-toggle__indicator {
		transition: none !important;
	}
	.mb-login-card.is-shaking {
		animation: none !important;
	}
}