/* --- THEME VARIABLES --- */
:root {
	/* New Palette: Terracotta, Gold, Green, Off-White */
	--bg-color: #5D4037;
	/* Deep warm brown/terracotta */
	--splash-bg: #D84315;
	/* Burnt Orange */
	--splash-logo-filter: none;
	--text-color: #fff;
	--desc-color: rgba(255, 255, 255, 0.9);
	--brand-color: #FFC107;
	/* Amber/Gold */
	--card-bg: rgba(255, 87, 34, 0.15);
	/* Orange Tint */
	--card-right-bg: linear-gradient(180deg, #FFFDE7 0%, #FFFFFF 100%);
	--input-border-color: #E6EE9C;
	--input-bg: #fff;
	--input-text-color: #333;
	--btn-primary-bg: #D84315;
	/* Burnt Orange */
	--btn-primary-text: #fff;
	--loader-ring-bg: rgba(255, 255, 255, 0.2);
	--loader-ring-highlight: #FFC107;
	--faint-bean-opacity: 0;
	/* Hide beans */
	--menu-bg: #3E2723;
	--menu-text-color: #fff;
	--menu-hover-bg: rgba(255, 193, 7, 0.2);
	--theme-toggle-bg: #fff;
	--theme-toggle-icon-color: #fff;
	--legal-color: #FFECB3;
	--legal-color1: #FFC107;
	--modal-color: #3E2723;
	--modal-color1: #fff;
	--modal-color2: #FFC107;
	--splashlogocolor: #fff;
	--splash-overlay: none;
	/* Removed coffee overlay */
	--splash-liquid-color: #D84315;
	--splash-text-faint: rgba(255, 255, 255, 0.2);
	--glass-btn-bg: linear-gradient(135deg, rgba(216, 67, 21, 0.8), rgba(216, 67, 21, 0.6));
	--glass-border: rgba(255, 255, 255, 0.2);
	--login-bg-image: url('../images/BackgroundDarkTheme.png');
}

[data-theme="light"] {
	--bg-color: #FFFDE7;


	--splash-logo-filter: none;
	--text-color: #3E2723;
	--desc-color: #5D4037;
	--splash-bg: #FFFDE7;
	--brand-color: #D84315;
	--card-bg: rgba(255, 255, 255, 0.9);
	--card-right-bg: linear-gradient(180deg, #FFF3E0 0%, #FFFFFF 100%);
	--input-border-color: #FFCC80;
	--input-bg: #fff;
	--input-text-color: #4E342E;
	--btn-primary-bg: #D84315;
	--btn-primary-text: #fff;
	--loader-ring-bg: rgba(216, 67, 21, 0.1);
	--loader-ring-highlight: #D84315;
	--menu-bg: #fff;
	--menu-text-color: #3E2723;
	--menu-hover-bg: rgba(216, 67, 21, 0.1);
	--theme-toggle-bg: #3E2723;
	--theme-toggle-icon-color: #D84315;
	--legal-color: #5D4037;
	--legal-color1: #D84315;
	--modal-color: #fff;
	--modal-color1: #3E2723;
	--modal-color2: #D84315;
	--splashlogocolor: #D84315;
	--splash-overlay: none;
	--splash-liquid-color: #D84315;
	--splash-text-faint: rgba(216, 67, 21, 0.1);
	--glass-btn-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
	--glass-border: rgba(216, 67, 21, 0.2);
	--login-bg-image: url('../images/BackgroundWhiteTheme.png');
}

/* Background Animation Styles */
.login-background-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	/* Behind everything */
	overflow: hidden;
	pointer-events: none;
}

.bg-img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: auto;
	/* Intrinsic width based on height */
	max-width: none;
	/* Allow it to overflow */
	animation: slideBackground 150s linear infinite alternate;
	will-change: transform;
	opacity: 0.6;
	/* Updated opacity as requested or suitable */
}

/* Theme visibility logic */
/* Default (Dark Theme) */
.bg-img-light {
	display: none;
}

.bg-img-dark {
	display: block;
}

/* Light Theme Override */
[data-theme="light"] .bg-img-light {
	display: block;
}

[data-theme="light"] .bg-img-dark {
	display: none;
}

@keyframes slideBackground {
	0% {
		transform: translate3d(0, 0, 0);
	}

	100% {
		/* Slide until rights align */
		transform: translate3d(calc(100vw - 100%), 0, 0);
	}
}

/* Basic reset */
html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

html,
body {
	height: 100%;
	margin: 0;
	font-family: Inter, system-ui, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
	background-color: var(--bg-color);
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Splash overlay */
#splash {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000000;
	z-index: 9999;
	transition: opacity .6s ease, visibility .6s ease;
	overflow: hidden;
}

#splash.hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.logo-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* Text logo - static, appears early, fades out when complete logo appears */
.logo-text {
	max-width: 80vw;
	max-height: 60vh;
	width: auto;
	height: auto;
	object-fit: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	z-index: 1;
	background: transparent;
	mix-blend-mode: screen;
	animation:
		textLogoAppear 0.5s ease-out 0.2s forwards,
		textLogoFadeOut 0.3s ease-in 4.85s forwards;
	margin-top: 140px;
}

/* Burrito logo - jumps from left to center, then above text */
.logo-burrito {
	max-width: 50vw;
	max-height: 55vh;
	width: auto;
	height: auto;
	object-fit: contain;
	position: absolute;
	top: 50%;
	left: -30vw;
	transform: translateY(-50%);
	opacity: 1;
	z-index: 3;
	transform-origin: center bottom;
	animation:
		burritoJumpToCenter 2.5s cubic-bezier(0.42, 0, 0.58, 1) 0.5s forwards,
		burritoJumpAbove 1.5s cubic-bezier(0.42, 0, 0.58, 1) 3.2s forwards,
		burritoFadeOut 0.3s ease-in 4.85s forwards;
	filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.15));
}

/* Complete logo - appears when burrito is in final position */
.logo-complete {
	max-width: 90vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	z-index: 2;
	animation:
		completeLogoAppear 0.4s ease-out 4.7s forwards,
		logoGlow 3s ease-in-out 5.2s infinite;
	filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.15));
}

/* Text logo appears */
@keyframes textLogoAppear {
	0% {
		opacity: 0;
		transform: translate(-50%, calc(-50% + 10px));
	}

	100% {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

/* Text logo fades out */
@keyframes textLogoFadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* Burrito jumps from left to center with Pixar-style animation - multiple small hops */
@keyframes burritoJumpToCenter {

	/* First hop - from outside to left: 16% */
	0% {
		left: -30vw;
		transform: translateY(-50%) scaleX(1) scaleY(1);
	}

	5% {
		/* Anticipation - squash */
		left: -25vw;
		transform: translateY(-48%) scaleX(1.08) scaleY(0.92);
	}

	12% {
		/* Jump up - peak of arc */
		left: 8%;
		transform: translateY(-62%) scaleX(0.88) scaleY(1.12);
	}

	20% {
		/* Mid-air */
		left: 12%;
		transform: translateY(-54%) scaleX(1) scaleY(1);
	}

	28% {
		/* Landing - squash */
		left: 16%;
		transform: translateY(-50%) scaleX(1.15) scaleY(0.85);
	}

	32% {
		/* Settle */
		left: 16%;
		transform: translateY(-50%) scaleX(1) scaleY(1);
	}

	/* Second hop - from left: 16% to left: 33% */
	36% {
		left: 16%;
		transform: translateY(-50%) scaleX(1) scaleY(1);
	}

	40% {
		/* Anticipation - squash */
		left: 16%;
		transform: translateY(-48%) scaleX(1.08) scaleY(0.92);
	}

	48% {
		/* Jump up - peak of arc */
		left: 24%;
		transform: translateY(-62%) scaleX(0.88) scaleY(1.12);
	}

	56% {
		/* Mid-air */
		left: 28%;
		transform: translateY(-54%) scaleX(1) scaleY(1);
	}

	64% {
		/* Landing - squash */
		left: 33%;
		transform: translateY(-50%) scaleX(1.15) scaleY(0.85);
	}

	68% {
		/* Settle */
		left: 33%;
		transform: translateY(-50%) scaleX(1) scaleY(1);
	}

	/* Third hop - from left: 33% to left: 50% (center) */
	72% {
		left: 33%;
		transform: translateY(-50%) scaleX(1) scaleY(1);
	}

	76% {
		/* Anticipation - squash */
		left: 33%;
		transform: translateY(-48%) scaleX(1.08) scaleY(0.92);
	}

	82% {
		/* Jump up - peak of arc */
		left: 41%;
		transform: translate(-18%, -62%) scaleX(0.88) scaleY(1.12);
	}

	88% {
		/* Mid-air - transitioning to centered transform */
		left: 46%;
		transform: translate(-46%, -54%) scaleX(1) scaleY(1);
	}

	92% {
		/* Landing - squash at center */
		left: 50%;
		transform: translate(-50%, -50%) scaleX(1.15) scaleY(0.85);
	}

	95% {
		/* Settle at center */
		left: 50%;
		transform: translate(-50%, -50%) scaleX(1) scaleY(1);
	}

	100% {
		/* Final settle - centered on screen */
		left: 50%;
		transform: translate(-50%, -50%) scaleX(1) scaleY(1);
	}
}

/* Burrito jumps above text logo */
@keyframes burritoJumpAbove {
	0% {
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scaleX(1) scaleY(1);
	}

	15% {
		/* Anticipation - squash down */
		left: 50%;
		top: 50%;
		transform: translate(-50%, -48%) scaleX(1.08) scaleY(0.92);
	}

	30% {
		/* Jump - stretch upward (shorter hop) */
		left: 50%;
		top: 42%;
		transform: translate(-50%, -50%) scaleX(0.9) scaleY(1.1);
	}

	50% {
		/* Mid-air */
		left: 50%;
		top: 40%;
		transform: translate(-50%, -50%) scaleX(1) scaleY(1);
	}

	70% {
		/* Landing approach */
		left: 50%;
		top: 38%;
		transform: translate(-50%, -50%) scaleX(0.95) scaleY(1.05);
	}

	85% {
		/* Impact - squash */
		left: 50%;
		top: 38%;
		transform: translate(-50%, -50%) scaleX(1.12) scaleY(0.88);
	}

	100% {
		/* Final position above text - centered horizontally (shorter hop distance) */
		left: 50%;
		top: 38%;
		transform: translate(-50%, -50%) scaleX(1) scaleY(1);
	}
}

/* Burrito fades out */
@keyframes burritoFadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* Complete logo appears */
@keyframes completeLogoAppear {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.95);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes logoGlow {

	0%,
	100% {
		filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.15));
	}

	50% {
		filter: drop-shadow(0 0 60px rgba(255, 200, 100, 0.35));
	}
}

/* Subtle background gradient animation */
#splash::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center,
			rgba(255, 100, 50, 0.08) 0%,
			rgba(0, 0, 0, 0.95) 50%,
			#000000 100%);
	animation: backgroundPulse 4s ease-in-out infinite;
	z-index: -1;
}

@keyframes backgroundPulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.9;
	}
}

@media (max-width: 480px) {
	.logo-burrito {
		animation-name:
			burritoJumpToCenterPhone,
			burritoJumpAbove,
			burritoFadeOut;
	}
}

@keyframes burritoJumpToCenterPhone {

	/* Starting even closer for phones */
	0% {
		left: -10vw;
		transform: translateY(-50%) scaleX(1) scaleY(1);
	}

	5% {
		left: -5vw;
		transform: translateY(-48%) scaleX(1.08) scaleY(0.92);
	}

	12% {
		/* First Jump */
		left: 10%;
		transform: translateY(-58%) scaleX(0.88) scaleY(1.12);
	}

	20% {
		left: 15%;
		transform: translateY(-54%) scaleX(1) scaleY(1);
	}

	28% {
		/* Landing 1 */
		left: 20%;
		transform: translateY(-50%) scaleX(1.15) scaleY(0.85);
	}

	32% {
		left: 20%;
		transform: translateY(-50%) scaleX(1) scaleY(1);
	}

	/* Hop 2 */
	36% {
		left: 20%;
		transform: translateY(-50%) scaleX(1) scaleY(1);
	}

	40% {
		left: 20%;
		transform: translateY(-48%) scaleX(1.08) scaleY(0.92);
	}

	48% {
		/* Peak 2 */
		left: 36%;
		transform: translateY(-58%) scaleX(0.88) scaleY(1.12);
	}

	56% {
		left: 44%;
		transform: translateY(-54%) scaleX(1) scaleY(1);
	}

	64% {
		/* Landing 2 - DIRECTLY AT CENTER (50%) */
		left: 50%;
		transform: translateY(-50%) scaleX(1.15) scaleY(0.85);
	}

	68% {
		left: 50%;
		transform: translateY(-50%) scaleX(1) scaleY(1);
	}

	/* Hop 3 (Last Hop) - ZERO horizontal distance - Pure Vertical Bounce */
	72% {
		left: 50%;
		transform: translateY(-50%) scaleX(1) scaleY(1);
	}

	76% {
		left: 50%;
		transform: translateY(-48%) scaleX(1.08) scaleY(0.92);
	}

	82% {
		/* Peak 3 - Vertical Only */
		left: 50%;
		transform: translate(-50%, -58%) scaleX(0.88) scaleY(1.12);
	}

	88% {
		left: 50%;
		transform: translate(-50%, -54%) scaleX(1) scaleY(1);
	}

	92% {
		/* Landing Center */
		left: 50%;
		transform: translate(-50%, -50%) scaleX(1.15) scaleY(0.85);
	}

	95% {
		left: 50%;
		transform: translate(-50%, -50%) scaleX(1) scaleY(1);
	}

	100% {
		left: 50%;
		transform: translate(-50%, -50%) scaleX(1) scaleY(1);
	}
}

/* --- Mobile Optimization --- */
@media (max-width: 1024px) {
	.logo-burrito {
		animation-name:
			burritoJumpToCenterMobile,
			burritoJumpAbove,
			burritoFadeOut;
	}
}

@keyframes burritoJumpToCenterMobile {

	/* Starting closer for mobile to reduce apparent speed */
	0% {
		left: -20vw;
		transform: translateY(-50%) scaleX(1) scaleY(1);
	}

	5% {
		left: -15vw;
		transform: translateY(-48%) scaleX(1.08) scaleY(0.92);
	}

	12% {
		/* First Jump Peak */
		left: 5%;
		transform: translateY(-58%) scaleX(0.88) scaleY(1.12);
		/* Slightly lower jump height */
	}

	20% {
		/* Mid-air */
		left: 10%;
		transform: translateY(-54%) scaleX(1) scaleY(1);
	}

	28% {
		/* Landing 1 */
		left: 15%;
		transform: translateY(-50%) scaleX(1.15) scaleY(0.85);
	}

	32% {
		/* Settle */
		left: 15%;
		transform: translateY(-50%) scaleX(1) scaleY(1);
	}

	/* Hop 2 */
	36% {
		left: 15%;
		transform: translateY(-50%) scaleX(1) scaleY(1);
	}

	40% {
		left: 15%;
		transform: translateY(-48%) scaleX(1.08) scaleY(0.92);
	}

	48% {
		/* Peak 2 */
		left: 23%;
		transform: translateY(-58%) scaleX(0.88) scaleY(1.12);
	}

	56% {
		left: 27%;
		transform: translateY(-54%) scaleX(1) scaleY(1);
	}

	64% {
		/* Landing 2 */
		left: 32%;
		transform: translateY(-50%) scaleX(1.15) scaleY(0.85);
	}

	68% {
		left: 32%;
		transform: translateY(-50%) scaleX(1) scaleY(1);
	}

	/* Hop 3 (To Center) */
	72% {
		left: 32%;
		transform: translateY(-50%) scaleX(1) scaleY(1);
	}

	76% {
		left: 32%;
		transform: translateY(-48%) scaleX(1.08) scaleY(0.92);
	}

	82% {
		/* Peak 3 */
		left: 41%;
		transform: translate(-9%, -58%) scaleX(0.88) scaleY(1.12);
	}

	88% {
		left: 46%;
		transform: translate(-46%, -54%) scaleX(1) scaleY(1);
	}

	92% {
		/* Landing Center */
		left: 50%;
		transform: translate(-50%, -50%) scaleX(1.15) scaleY(0.85);
	}

	95% {
		left: 50%;
		transform: translate(-50%, -50%) scaleX(1) scaleY(1);
	}

	100% {
		left: 50%;
		transform: translate(-50%, -50%) scaleX(1) scaleY(1);
	}
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.logo-image {
		max-width: 85vw;
		max-height: 85vh;
	}
}

@media (max-width: 480px) {
	.logo-image {
		max-width: 80vw;
		max-height: 80vh;
	}
}

/* Main page content (hidden under splash) */
main {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.container {
	max-width: 900px;
	padding: 24px;
}

/* Legal Text Links under Button */
.legal-text {
	margin-top: 15px;
	font-size: 12px;
	color: var(--legal-color);
	transition: color 0.3s ease;
	text-align: center;
}

.legal-text a {
	color: var(--legal-color1);
	/* Coffee Brown */
	transition: color 0.3s ease;
	font-weight: bold;
	text-decoration: none;
}

.legal-text a:hover {
	text-decoration: underline;
}

/* Modal Background (The Dark Overlay) */
.modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	z-index: 9999;
	/* Sit on top of everything except splash */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.6);
	/* Black w/ Opacity */
	backdrop-filter: blur(5px);
	/* Blur effect for modern look */
	animation: modalFadeIn 0.3s ease;
}

/* Modal Content Box */
.modal-content {
	background-color: var(--modal-color);
	/* Cream/White */
	padding: 25px;
	border: 1px solid #888;
	width: 90%;
	max-width: 500px;
	/* Responsive width */
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	font-family: Arial, sans-serif;
	transition: background-color 0.3s ease;

	/* Center modal on screen */
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10000;
	margin: 0;
	animation: modalFadeIn 0.3s ease;
}

/* Headers & Text */
.modal-content h2 {
	color: var(--modal-color2);
	margin-top: 0;
	transition: color 0.3s ease, border-color 0.3s ease;
	border-bottom: 2px solid #f0e6d2;
	padding-bottom: 10px;
}

.modal-body p {
	font-size: 14px;
	color: var(--modal-color1);
	transition: color 0.3s ease;
	line-height: 1.6;
	margin-bottom: 10px;


}

/* Buttons */
.close-btn {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
}

.close-btn:hover {
	color: #000;
}

.accept-btn {
	background-color: #4B3621;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	width: 100%;
	margin-top: 15px;
	font-weight: bold;
}

.accept-btn:hover {
	background-color: #6f5134;
}

/* Error Modal Styling */
.error-modal {
	text-align: center;
	max-width: 350px;
}

.error-icon {
	font-size: 48px;
	margin-bottom: 15px;
	animation: bounce 0.6s ease;
}

.error-modal h2 {
	color: #d32f2f;
	margin: 15px 0;
	font-size: 20px;
}

.error-modal p {
	color: var(--modal-color1);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

@keyframes bounce {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}

/* Animation */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

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

/* Modal specific fade-in animation - only opacity, no transform */
@keyframes modalFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Login card */
.login-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
}

.login-card {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.01));
	backdrop-filter: blur(60px) saturate(150%);
	-webkit-backdrop-filter: blur(50px) saturate(150%);
	border-radius: 30px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.05);
	display: flex;
	overflow: hidden;
	max-width: 920px;
	width: 92%;
	max-height: 520px;
}

/* Reusable Glass Panel for Dashboard */
.glass-panel {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.01));
	backdrop-filter: blur(40px) saturate(150%);
	-webkit-backdrop-filter: blur(50px) saturate(150%);
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.login-left {
	flex: 1;
	padding: 48px 40px;
	color: var(--text-color);
	transition: color 0.3s ease;
}

.login-right {
	width: 360px;
	background: rgba(255, 255, 255, 0.02);
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	padding: 0;
	position: relative;
}

.brand {
	font-weight: 700;
	color: var(--brand-color);
	transition: color 0.3s ease;
	letter-spacing: 1px;
	margin: 0 0 8px 0;
	position: relative;
	display: inline-block;
}

/* Wrapper for the 3rd center drop */
.login-left strong {
	position: relative;
	display: inline-block;
}

.login-left strong::after {
	content: "";
	position: absolute;
	background: var(--brand-color);
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	pointer-events: none;
	transform-origin: top center;
	width: 9px;
	height: 11px;
	top: 90%;
	left: 50%;
	transform: translateX(-50%);
	/* Different duration/delay for natural feel */
	animation: dropDrip 4.8s infinite cubic-bezier(0.5, 0, 1, 0.5) 1s;
	opacity: 0;
}

/* Liquid Droppings Effect */
.brand::before,
.brand::after {
	content: "";
	position: absolute;
	background: var(--brand-color);
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	pointer-events: none;
	transform-origin: top center;
}

/* Drop 1 (Left) */
.brand::before {
	width: 8px;
	height: 10px;
	top: 90%;
	left: 25%;
	animation: dropDrip 4s infinite cubic-bezier(0.5, 0, 1, 0.5);
	opacity: 0;
}

/* Drop 2 (Right) */
.brand::after {
	width: 10px;
	height: 12px;
	top: 90%;
	right: 30%;
	animation: dropDrip 5.5s infinite cubic-bezier(0.5, 0, 1, 0.5) 2s;
	opacity: 0;
}

@keyframes dropDrip {
	0% {
		opacity: 1;
		transform: translateY(0) scaleY(0.2) scaleX(1.5);
		/* Pooling */
		border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	}

	30% {
		opacity: 1;
		transform: translateY(5px) scaleY(0.8) scaleX(1.1);
		/* Forming */
	}

	55% {
		opacity: 1;
		transform: translateY(15px) scaleY(1.3) scaleX(0.8);
		/* Heavy Hang */
		border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
		/* Teardrop shape forming */
	}

	70% {
		opacity: 1;
		transform: translateY(35px) scaleY(1.8) scaleX(0.6);
		/* Necking/About to break */
	}

	85% {
		opacity: 0.8;
		transform: translateY(80px) scaleY(1) scaleX(1);
		/* Falling */
		border-radius: 50%;
	}

	100% {
		opacity: 0;
		transform: translateY(120px) scale(0.5);
		/* Gone */
	}
}

.desc {
	transition: color 0.3s ease;
	color: var(--desc-color);
	margin: 0 0 20px 0;
}

.form-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 14px;
}

input[type="text"],
input[type="password"] {
	padding: 12px 14px;
	border: 1px solid var(--input-border-color);
	background-color: var(--input-bg);
	color: var(--input-text-color);
	border-radius: 8px;
	font-size: 15px;
	transition: border-color .3s ease, background-color .3s ease, color .3s ease;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Password wrapper with toggle button */
.password-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.password-wrapper input {
	width: 100%;
	padding-right: 44px;
}

.password-toggle {
	position: absolute;
	right: 12px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--input-text-color);
	transition: opacity 0.2s ease, color 0.3s ease;
	transition: opacity 0.2s ease;
}

.password-toggle:hover {
	opacity: 0.7;
}

.password-toggle:active {
	opacity: 0.5;
}

.eye-icon {
	width: 20px;
	height: 20px;
	stroke-width: 2.5;
}

/* Button Primary Styles */
button.primary {
	background: linear-gradient(135deg, rgba(78, 52, 46, 0.9), rgba(78, 52, 46, 0.7));
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: var(--btn-primary-text);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	padding: 12px 16px;
	border-radius: 10px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

button.primary span {
	position: relative;
	z-index: 5;
}

/* Liquid Mustard Spill Effect */
button.primary::before {
	content: "";
	position: absolute;
	top: -100%;
	/* Fully hidden above */
	left: 0;
	width: 100%;
	height: 100%;
	/* Tall enough for long drips */
	background: var(--brand-color);
	/* Mustard/Amber */
	z-index: 2;

	/* Organic Drip Shape via SVG Mask */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V30 C95 35 95 70 90 40 C85 20 80 80 75 40 C70 20 65 60 60 35 C55 20 50 90 45 40 C40 20 35 70 30 35 C25 20 20 60 15 40 C10 20 5 50 0 30 Z' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V30 C95 35 95 70 90 40 C85 20 80 80 75 40 C70 20 65 60 60 35 C55 20 50 90 45 40 C40 20 35 70 30 35 C25 20 20 60 15 40 C10 20 5 50 0 30 Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	transition: top 0.5s cubic-bezier(0.3, 0, 0, 1);
	/* Smooth fluid drop */
}

button.primary:hover::before {
	top: -15%;
	/* Slide down deeper (85% coverage) */
}

button.primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	/* Keep base background, the liquid covers it partly */
}

/* Entrance animation for the card */
.login-card {
	opacity: 0;
	transform: translateY(18px) scale(.996);
	transition: opacity 1s cubic-bezier(.2, .9, .2, 1),
		transform 1s cubic-bezier(.2, .9, .2, 1);
}

.login-card.show {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Coffee cup animation */
/* Make cup intentionally large (can overflow the right panel without resizing the card) */
.cup {
	width: 360px;
	height: auto;
	aspect-ratio: 1 / 1.8;
	max-width: none;
	transform-origin: center center;
	display: block;
}




/* Floating animation for background beans */
@keyframes float-bean {

	0%,
	100% {
		transform: translateY(0) rotate(0);
	}

	50% {
		transform: translateY(-20px) rotate(8deg);
	}
}

/* Small responsive tweaks */
@media (max-width: 820px) {
	.login-card {
		flex-direction: column;
		max-height: none;
	}

	.login-right {
		width: auto;
		padding: 18px;
		order: -1;
	}

	.modal-content {
		width: 90%;
		max-width: 90%;
		max-height: 80vh;
		overflow-y: auto;
		padding: 20px;
	}


	.login-left {
		padding: 24px;
	}

	.cup {
		width: 220px;
	}
}

/* Tablet Portrait: Hide video to save space/layout */
@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
	#coffeeCup {
		display: none !important;
	}

	.login-right {
		display: none;
	}
}

/* Phone-specific adjustments */
@media (max-width: 480px) {
	.login-card {
		width: 96%;
		max-width: 420px;
		margin: 18px auto;
		padding: 12px;
		box-shadow: 0 8px 20px rgba(11, 22, 33, 0.08);
	}

	.login-left {
		padding: 18px;
	}

	/* Place cup above the form and remove the right-panel white block on phones */
	.login-right {
		width: auto;
		padding: 6px 0;
		order: -1;
		display: flex;
		justify-content: center;
		align-items: center;
		background: transparent;
	}

	.brand {
		font-size: 18px;
	}

	.desc {
		font-size: 13px;
	}

	.form-row label {
		font-size: 13px;
	}

	input[type="text"],
	input[type="password"] {
		font-size: 15px;
		padding: 14px;
	}

	button.primary {
		width: 100%;
		padding: 14px;
		font-size: 16px;
	}

	/* Make the cup smaller, centered and not force the card height on phones */
	.cup {
		width: 180px;
		margin: 0;
		display: none;
	}

	#coffeeCup {
		display: none;
	}

	/* ensure beans don't overlap important UI on very small screens and hide very large shapes */
	.beans {
		pointer-events: none;
	}

	.beans .bean.big {
		display: none;
	}
}

/* Background beans layer */
.beans {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.bean {
	position: absolute;
	transform-origin: center center;
	transition: transform 900ms cubic-bezier(.2, .9, .2, 1), opacity 600ms ease;
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Add continuous floating animation to the inner image/svg of the bean */
.bean .bean-animator {
	animation: float-bean 6s ease-in-out infinite;
}

.bean img,
.bean .bean-fallback {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.bean.arrived {
	transform: translate(0, 0) rotate(var(--toRot, 0deg)) scale(var(--toScale, 1));
	opacity: 1;
}

/* initial offscreen transform uses custom properties --fromX/--fromY and --rot --scale */
.bean {
	--fromX: 0px;
	--fromY: 120vh;
	--rot: 720deg;
	--scale: 1;
	transform: translate(var(--fromX), var(--fromY)) rotate(var(--rot)) scale(var(--scale));
}

/* Size utility classes and uniform opacity for background shapes */
.bean.big {
	width: 420px;
	height: 360px;
}

.bean.med {
	width: 240px;
	height: 200px;
}

.bean.sm {
	width: 120px;
	height: 120px;
}

/* All bean images and fallback svgs use the same opacity for visual consistency */
.bean img,
.bean .bean-fallback {
	opacity: 1;
	transition: opacity 0.3s ease;
	filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.4));
}

/* Hide SVG fallback by default; it's only for when the image fails to load */
.bean .bean-fallback {
	display: none;
}

.bean.faint img,
.bean.faint .bean-fallback {
	opacity: var(--faint-bean-opacity);
}

/* --- Theme Switcher --- */
.theme-switcher {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1000;
}

.theme-switcher #theme-toggle-button {
	background: var(--glass-btn-bg);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--glass-border);
	color: var(--theme-toggle-icon-color);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.theme-switcher #theme-toggle-button .icon {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.theme-switcher .dropdown-menu {
	position: absolute;
	bottom: 100%;
	right: 0;
	margin-bottom: 10px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
	backdrop-filter: blur(30px) saturate(180%);
	-webkit-backdrop-filter: blur(30px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 16px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25), inset 0 0 15px rgba(255, 255, 255, 0.05);
	list-style: none;
	padding: 8px;
	min-width: 140px;
	visibility: hidden;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.theme-switcher.show .dropdown-menu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.theme-switcher .dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 6px;
	cursor: pointer;
	background-color: transparent;
	border: none;
	width: 100%;
	text-align: left;
	color: var(--menu-text-color);
	font-size: 14px;
	transition: background-color 0.2s ease, color 0.3s ease;
}

.theme-switcher .dropdown-item:hover,
.theme-switcher .dropdown-item.active {
	background-color: var(--menu-hover-bg);
}

.theme-switcher .dropdown-item.active {
	font-weight: 600;
}

.theme-switcher .dropdown-item .icon {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* SweetAlert2 Liquid Glass Theme */
div:where(.swal2-container) div:where(.swal2-popup) {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4)) !important;
	backdrop-filter: blur(20px) saturate(150%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(150%) !important;
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.8) !important;
	border-left: 1px solid rgba(255, 255, 255, 0.8) !important;
	border-radius: 30px !important;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35), inset 0 0 20px rgba(255, 255, 255, 0.5) !important;
}

div:where(.swal2-container) div:where(.swal2-title),
div:where(.swal2-container) div:where(.swal2-html-container) {
	color: #4B3621 !important;
}

/* Swal Buttons matching Sign In button */
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
	background: linear-gradient(135deg, rgba(78, 52, 46, 0.9), rgba(78, 52, 46, 0.7)) !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
	padding: 12px 24px !important;
	border-radius: 10px !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
	outline: none !important;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
	background: linear-gradient(135deg, rgba(93, 64, 55, 0.9), rgba(93, 64, 55, 0.7)) !important;
}

/* Reduce motion preferences */
@media (prefers-reduced-motion: reduce) {

	.cursor,
	.loader::before {
		animation: none;
	}

	#splash {
		transition: none;
	}
}

/* SweetAlert Mobile Optimization */
@media (max-width: 480px) {
	div:where(.swal2-container) div:where(.swal2-popup) {
		width: 85% !important;
		padding: 1em !important;
		border-radius: 16px !important;
	}

	div:where(.swal2-container) div:where(.swal2-title) {
		font-size: 1.1em !important;
	}

	div:where(.swal2-container) div:where(.swal2-html-container) {
		font-size: 0.8em !important;
	}

	div:where(.swal2-container) div:where(.swal2-html-container) p {
		font-size: 0.8em !important;
		line-height: 1.3;
	}
}

/* --- Quick Actions Sidebar Styles --- */

/* Sidebar Trigger (Floating Button) */
.quick-actions-trigger {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 1000;
	width: 20px;
	height: 80px;
	background: var(--glass-btn-bg);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--glass-border);
	border-right: none;
	border-radius: 12px 0 0 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	color: var(--text-color);
}

.quick-actions-trigger:hover {
	width: 28px;
}

.quick-actions-trigger svg {
	width: 14px;
	height: 14px;
}

/* Quick Actions Sidebar */
.quick-actions-sidebar {
	position: fixed;
	top: 0;
	right: -280px;
	/* Hidden by default */
	width: 260px;
	height: 100vh;
	background: var(--menu-bg);
	border-left: 1px solid var(--glass-border);
	z-index: 2000;
	/* High z-index */
	transition: right 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
	box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	padding: 25px;
	overflow-y: auto;
}

.quick-actions-sidebar.active {
	right: 0;
}

@media (max-width: 768px) {
	.quick-actions-sidebar {
		width: 220px;
		right: -240px;
	}
}

/* Header inside Sidebar */
.qa-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--glass-border);
}

.qa-header h3 {
	margin: 0;
	font-size: 1.3rem;
	color: var(--text-color);
	font-weight: 700;
}

.qa-close-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-color);
	padding: 8px;
	border-radius: 50%;
	transition: background 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qa-close-btn:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* Content Area */
.qa-content {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Action Buttons */
.qa-action-btn {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
	padding: 15px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	color: var(--text-color);
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: left;
	font-size: 1rem;
	font-weight: 500;
}

.qa-action-btn:hover {
	background: var(--menu-hover-bg);
	transform: translateX(-5px);
	border-color: var(--glass-border);
}

/* Section Title */
.qa-section-title {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--desc-color);
	opacity: 0.7;
	margin-top: 25px;
	margin-bottom: 12px;
	font-weight: 600;
}

/* Theme Options */
.qa-theme-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.qa-theme-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 15px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	color: var(--text-color);
	cursor: pointer;
	transition: all 0.2s;
	opacity: 0.7;
}

.qa-theme-btn:hover {
	background: rgba(255, 255, 255, 0.05);
	opacity: 1;
}

.qa-theme-btn.active {
	background: var(--btn-primary-bg);
	color: var(--btn-primary-text);
	border-color: var(--btn-primary-bg);
	opacity: 1;
	font-weight: 600;
}

/* Staggered Content Animation */
@keyframes slideUpFade {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

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

/* Initial hidden state for animation */
.qa-header,
.qa-action-btn,
.qa-section-title,
.qa-theme-options {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Active Animation State */
.quick-actions-sidebar.active .qa-header {
	animation: slideUpFade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
	animation-delay: 0.1s;
}

.quick-actions-sidebar.active .qa-action-btn:nth-child(1) {
	animation: slideUpFade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
	animation-delay: 0.15s;
}

.quick-actions-sidebar.active .qa-section-title {
	animation: slideUpFade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
	animation-delay: 0.25s;
}

.quick-actions-sidebar.active .qa-theme-options {
	animation: slideUpFade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
	animation-delay: 0.3s;
}

/* --- Modal Styles (Ported for Login Page) --- */
.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(5px);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 2000;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.modal-overlay.active {
	display: flex;
	opacity: 1;
}

.custom-modal {
	background: var(--card-bg, #fff);
	border-radius: 20px;
	padding: 30px;
	position: relative;
	width: 90%;
	max-width: 450px;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transform: translateY(20px);
	transition: transform 0.3s ease;
}

.modal-overlay.active .custom-modal {
	transform: translateY(0);
}

.close-modal-btn {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 32px;
	height: 32px;
	border: none;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-color);
	transition: background 0.2s;
}

.close-modal-btn:hover {
	background: rgba(0, 0, 0, 0.1);
	color: var(--brand-color);
}

[data-theme="dark"] .custom-modal {
	background: #2e2e2e;
	/* Fallback */
	background: var(--card-bg);
}