.tricolor-bar {
	background: linear-gradient(to right, #F97316 33.3%, #FFFFFF 33.3%, #FFFFFF 66.6%,
		#059669 66.6%);
}

body {
	position: relative;
}

body::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='%23D1D5DB' fill-opacity='0.1'%3E%3Crect x='0' y='0' width='10' height='10'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 10px;
	z-index: -1;
	opacity: 0.5;
}

/* Hero background animation */
.hero-container {
	position: relative;
	overflow: hidden;
	background-color: #eef5ff;
}

#bridge-bg, #bridge-fg {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 120%;
	height: auto;
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Card glow effect - FIXED: Added z-index to ensure inputs are clickable */
.card-glow {
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	z-index: 1; /* Ensure card is above background */
}

.card-glow:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
		rgba(255, 193, 7, 0.15), transparent 40%);
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: -1; /* Ensure glow is behind content */
	pointer-events: none; /* Prevent glow from blocking interactions */
}

.card-glow:hover {
	transform: translateY(-8px);
	box-shadow: var(--tw-shadow-lifted);
}

.card-glow:hover:before {
	opacity: 1;
}

/* Form styling */
.form-container {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
}

/* Password strength indicator */
.password-strength {
	height: 5px;
	border-radius: 2px;
	transition: all 0.3s ease;
}

/* Toggle between login and register */
.auth-section {
	display: none;
}

.auth-section.active {
	display: block;
}

/* FIXED: Ensure form inputs are clickable and not blocked */
.form-input {
	position: relative;
	z-index: 10;
}