:root {
            --primary-color: #ff7900;
            --secondary-color: #f8f9fa;
            --text-color: #333;
            --accent-color: #4a90e2;
			--orange: #FF5722;
			--orange-light: #FF7043;
			--orange-dark: #E64A19;
			--green: #4CAF50;
			--blue: #2196F3;
			--purple: #9C27B0;
			--animation-speed: 0.3s;
			--progress: 0%;
        }

        body, html {
            height: 100vh;
            margin: 0;
            padding: 0;
            background-color: white;
            color: var(--text-color);
            font-family: 'Jost', sans-serif;
            overflow: auto;
        }

        /* Main Container */
        .main-container {
            display: flex;
            height: -webkit-fill-available;
        }
		
		.menu-toggle-button {
			position: fixed;
			left: 10px;
			top: 10px;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: linear-gradient(135deg, #ff7900, #ff9e4a);
			border: 2px solid #fff;
			color: white;
			font-size: 1.5rem;
			cursor: pointer;
			transition: transform 0.2s, box-shadow 0.2s;
			box-shadow: 0 4px 8px rgba(0,0,0,0.2);
			z-index: 1001;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.menu-toggle-button:hover {
			transform: scale(1.1);
			box-shadow: 0 6px 12px rgba(0,0,0,0.3);
		}
		
       /* Floating Side Menu Container – aligned with the toggle button */
		.side-menu {
		  position: fixed;
		  top: 70px;    /* Same vertical alignment as your toggle button */
		  left: 10px;   /* Same horizontal alignment as your toggle button */
		  width: 50px;  /* Adjust to fit your toggle button/icon size */
		  height: 50px; /* Adjust to fit your toggle button/icon size */
		  transform: translateX(-100%); /* Hidden by default */
		  opacity: 0;
		  visibility: hidden;
		  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55),
					  opacity 0.3s ease,
					  visibility 0s 0.3s;
		}

		/* Active state to slide in the container */
		.side-menu.active {
		  transform: translateX(0);
		  opacity: 1;
		  visibility: visible;
		  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55),
					  opacity 0.3s ease,
					  visibility 0s;
		}

		/* Position each menu button so that they all start at (0, 0) of the container */
		.side-menu .menu-button {
		  position: absolute;
		  left: 0;
		  top: 0;
		  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
		}

		/* Radial animation on active state using a 80px radius and angles from 0° to 150° */
		.side-menu.active .menu-button:nth-child(1) {
		  transform: translate(80px, 0) rotate(0deg);
		}
		.side-menu.active .menu-button:nth-child(2) {
		  transform: translate(69.3px, 40px) rotate(30deg);
		}
		.side-menu.active .menu-button:nth-child(3) {
		  transform: translate(40px, 69.3px) rotate(60deg);
		}
		.side-menu.active .menu-button:nth-child(4) {
		  transform: translate(0, 80px) rotate(90deg);
		}
		.side-menu.active .menu-button:nth-child(5) {
		  transform: translate(-40px, 69.3px) rotate(120deg);
		}
		.side-menu.active .menu-button:nth-child(6) {
		  transform: translate(-69.3px, 40px) rotate(150deg);
		}


        .menu-button {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: linear-gradient(135deg, #ff7900, #ff9e4a);
			border: 2px solid #fff;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 1.2rem;
			cursor: pointer;
			transition: transform 0.2s ease, box-shadow 0.2s ease;
			box-shadow: 0 4px 8px rgba(0,0,0,0.2);
			position: absolute; /* Position absolutely for arc */
		}

		
        .menu-button:hover {
			transform: scale(1.1);
			box-shadow: 0 6px 12px rgba(0,0,0,0.3);
		}

		/* Mobile Adjustments */
		@media (max-width: 576px) {
			.side-menu {
				/* left: 5px; */
				top: 65px;
			}
			.side-menu.active .menu-button {
				transform: translate(0, 0) rotate(0deg); /* Reset for stacking */
			}
			.side-menu.active .menu-button:nth-child(1) { transform: translate(0, 0); }
			.side-menu.active .menu-button:nth-child(2) { transform: translate(0, 60px); }
			.side-menu.active .menu-button:nth-child(3) { transform: translate(0, 120px); }
			.side-menu.active .menu-button:nth-child(4) { transform: translate(0, 180px); }
			.side-menu.active .menu-button:nth-child(5) { transform: translate(0, 240px); }
			.side-menu.active .menu-button:nth-child(6) { transform: translate(0, 300px); }
		}
		
        .tracker-card {
			flex: 1;
			/* height: calc(100vh - 3rem); */
			padding: 1rem;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 0;
			overflow-y: auto;
			box-sizing: border-box;
		}

        .timer-circle {
			width: 10rem;
			height: 10rem;
			border-radius: 50%;
			border: 10px solid #ff9231;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
			position: relative;
			margin: 3rem auto 0;
			background: var(--primary-color);
			overflow: hidden;
		}

		.water-animation {
			position: absolute;
			top: 0;
			width: 200%;
			left: 50%;
			transform: translateX(-50%);
			background-color: white;
			/* animation: zenWave 4s infinite ease-in-out; */
			height: 100%;
		}

		.water-animation::after {
			content: '';
			position: absolute;
			bottom: -3px; /* Aligns with where border was */
			left: 0;
			width: 100%; /* Full width of the wider element */
			height: 6px; /* Thickness of the wave */
			/* background: radial-gradient(circle at 50% 50%, #e85c00 20%, #ff6f00 50%); */
			background-size: 40px 1px; /* Wave width and height */
			background-repeat: repeat-x; /* Repeating wave pattern */
			animation: waveFlow 2s infinite linear; /* Horizontal flow for curve motion */
		}

		.steps-text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 3.5rem;
			font-weight: bold;
			background: linear-gradient(to top, white var(--progress, 0%), var(--primary-color) var(--progress, 0%));
			background-clip: text;
			-webkit-background-clip: text; /* Clips the gradient to the text */
			-webkit-text-fill-color: transparent;
			z-index: 2;
		}
		
		
		@keyframes zenWave {
			0% {
				transform: translateX(-50%) translateY(0);
			}
			25% {
				transform: translateX(calc(-50% - 8px)) translateY(-10px);
			}
			50% {
				transform: translateX(-50%) translateY(0);
			}
			75% {
				transform: translateX(calc(-50% + 8px)) translateY(-10px);
			}
			100% {
				transform: translateX(-50%) translateY(0);
			}
		}
		

		@keyframes waveFlow {
		  0% {
			background-position: 0 0;
		  }
		  100% {
			background-position: 40px 0; /* Moves the wave pattern horizontally */
		  }
		}
		
        .timer-arc {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 8px solid var(--primary-color);
            border-top-color: transparent;
            border-right-color: transparent;
            position: absolute;
            top: -8px;
            left: -8px;
            transform: rotate(45deg);
        }

        .timer-text {
            font-size: 3rem;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            position: relative;
            z-index: 5;
        }

        .progress-text {
            color: var(--primary-color);
            font-weight: 600;
            font-size: 0.9rem;
        }

        .stat-card {
            background-color: var(--secondary-color);
            border-radius: 10px;
            padding: 0.5rem;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            margin-bottom: 0.5rem;
        }

        .stat-icon {
            background-color: rgba(255, 121, 0, 0.1);
            color: var(--primary-color);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.5rem;
            font-size: 1.2rem;
        }

        .stat-value {
            font-size: 1rem;
            font-weight: bold;
            margin: 0;
            color: var(--primary-color);
        }

        .stat-label {
            font-size: 0.8rem;
            color: #6c757d;
            margin: 0;
        }

        .weather-widget {
            background-color: #fff;
            border-radius: 10px;
            padding: 0.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            flex-grow: 0;
        }

        .pause-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.35);
            border: 2px solid var(--primary-color);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            font-size: 1.5rem;
            color: var(--primary-color);
            transition: background-color 0.3s, transform 0.2s;
            z-index: 10;
        }

        .pause-button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background-color: rgba(255, 255, 255, 0.65);
            border-radius: 50%;
            z-index: -1;
        }

        .challenge-card {
            background: linear-gradient(135deg, #ff7900, #ff9e4a);
            color: white;
            border-radius: 10px;
            padding: 0.5rem;
            margin-bottom: 0.1rem;
            flex-grow: 0;
        }

        .leaderboard-list {
            background-color: white;
            border-radius: 10px;
            padding: 0.5rem;
            flex-grow: 0;
            max-height: 150px;
            overflow: hidden;
        }

        .leaderboard-item {
            display: flex;
            align-items: center;
            padding: 0.3rem 0;
            border-bottom: 1px solid #eee;
            font-size: 0.8rem;
        }

        .reward-card {
            background-color: white;
            border-radius: 10px;
            padding: 0.5rem;
            margin-bottom: 0.5rem;
            transition: transform 0.2s;
            flex-grow: 0;
        }

        .reward-card:hover {
            transform: translateY(-3px);
        }

        .splashscreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000000;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            z-index: 9999;
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .splashscreen.hide {
            opacity: 0;
            transform: translateY(-20px);
            pointer-events: none;
        }

        .splash-logo {
            font-size: 3rem;
            font-weight: bold;
            color: #ff7900;
            margin-bottom: 1rem;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #ff7900;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .milestone-unlock {
            animation: bounce 0.5s ease infinite;
        }

        @keyframes bounce {
            0% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0); }
        }

        .badge {
            background: linear-gradient(135deg, #ff9800, #ffaa00);
            padding: 3px 8px;
            border-radius: 15px;
            color: white;
            font-size: 0.7rem;
            margin-left: 5px;
        }

        .progress-bar {
            transition: width 0.5s ease;
        }
		
		/* Dark Mode Styles */
		body.dark-mode {
			background-color: #1a1a1a;
			color: #f0f0f0;
		}

		body.dark-mode .tracker-card {
			background-color: #2c2c2c;
		}

		body.dark-mode .stat-card {
			background-color: #3c3c3c;
		}

		body.dark-mode .weather-widget,
		body.dark-mode .reward-card,
		body.dark-mode .leaderboard-list {
			background-color: #3c3c3c;
		}

		body.dark-mode .challenge-card {
			background: linear-gradient(135deg, #e65c00, #ff8c4a);
		}

		body.dark-mode .progress-text,
		body.dark-mode .stat-value {
			color: #ff9e4a;
		}

		body.dark-mode .modal-content {
			background-color: #2c2c2c;
			color: #f0f0f0;
		}
		
		body.dark-mode .modal-body {
			background-color: #2c2c2c;
			color: #f0f0f0;
		}

		body.dark-mode .menu-button {
			background: linear-gradient(135deg, #e65c00, #ff8c4a);
		}
		
		/* Define custom orange color utility classes */
		.bg-orange {
		  background-color: #FF7900 !important;
		}

		.hover-orange:hover,
		.hover-orange:focus,
		.hover-orange:active {
		  background-color: #F16E00 !important;
		  border-color: #FFFFFF !important;
		  color: #FFFFFF !important;
		}

		/* For disabled state */
		.bg-orange.disabled,
		.bg-orange:disabled {
		  background-color: #FF7900 !important;
		  border-color: #FFFFFF !important;
		  opacity: 0.65;
		}

		/* Badge styling */
		.bg-orange .badge {
		  color: #FF7900;
		  background-color: #FFFFFF;
		}
		
		.text-orange {
			color: #FF7900;
		}
		
		.challenge-card:hover {
			transform: translateY(-3px);
			box-shadow: 0 4px 8px rgba(0,0,0,0.2);
		}

		.challenge-card i {
			margin-bottom: 0.5rem;
		}
		
		#distance {
			transition: transform 0.1s ease;
		}
		#distance.active {
			transform: scale(1.1);
		}
		
		/* Onboarding Wizard Specific Styles */
		#onboardingWizard .modal-content {
			border-radius: 15px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		}

		#onboardingWizard .carousel-inner {
			overflow: visible; /* Ensure content fits nicely */
		}

		#onboardingWizard .stat-card {
			background-color: var(--secondary-color);
			border-radius: 10px;
		}

		#onboardingWizard .challenge-card {
			background: linear-gradient(135deg, #ff7900, #ff9e4a);
		}

		#onboardingWizard .form-control.is-invalid,
		#onboardingWizard .form-select.is-invalid {
			border-color: #dc3545;
		}

		#onboardingWizard .invalid-feedback {
			font-size: 0.8rem;
			color: #dc3545;
		}

		/* Dark Mode Adjustments */
		body.dark-mode #onboardingWizard .modal-content {
			background: linear-gradient(135deg, #2c2c2c, #3c3c3c);
		}

		body.dark-mode #onboardingWizard .stat-card {
			background-color: #3c3c3c;
		}

		body.dark-mode #onboardingWizard .challenge-card {
			background: linear-gradient(135deg, #e65c00, #ff8c4a);
		}
		
		.wizard-step {
		  display: none;
		}

		.wizard-step.active {
		  display: block;
		}
		
		.animated-bg {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background: linear-gradient(135deg, #f5f7fa, #e4e6e8);
		  z-index: 0;
		  overflow: hidden;
		}

		.shape {
		  position: absolute;
		  border-radius: 50%;
		  background: linear-gradient(to right, rgba(255, 87, 34, 0.1), rgba(255, 87, 34, 0.2));
		  animation: float 15s infinite ease-in-out;
		}

		.shape-1 {
		  width: 300px;
		  height: 300px;
		  top: -150px;
		  left: -100px;
		  animation-delay: 0s;
		}

		.shape-2 {
		  width: 200px;
		  height: 200px;
		  bottom: -70px;
		  right: 100px;
		  animation-delay: 5s;
		}

		.shape-3 {
		  width: 150px;
		  height: 150px;
		  bottom: 150px;
		  left: 60%;
		  animation-delay: 2s;
		}

		.shape-4 {
		  width: 120px;
		  height: 120px;
		  top: 30%;
		  left: 20%;
		  animation-delay: 8s;
		}

		@keyframes float {
		  0% {
			transform: translate(0, 0) rotate(0deg);
		  }
		  50% {
			transform: translate(30px, 30px) rotate(180deg);
		  }
		  100% {
			transform: translate(0, 0) rotate(360deg);
		  }
		}
		
		/* Card Styles */
		.stat-card-flex {
		  background: rgba(255, 255, 255, 0.85);
		  border-radius: 20px;
		  padding: 30px;
		  max-width: 500px;
		  margin: 0 auto;
		  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
		  transition: all var(--animation-speed) ease;
		}

		.welcome-card {
		  background: linear-gradient(135deg, var(--primary-color), var(--orange-dark));
		  border-radius: 20px;
		  max-width: 500px;
		  transform-style: preserve-3d;
		  box-shadow: 0 15px 35px rgba(255, 87, 34, 0.3);
		}

		.completion-card {
		  background: rgba(255, 255, 255, 0.9);
		  border-radius: 20px;
		  padding: 30px;
		  max-width: 500px;
		  margin: 0 auto;
		  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
		  position: relative;
		  overflow: hidden;
		}

		/* Icon Styles */
		.floating-icons {
		  position: absolute;
		  width: 100%;
		  height: 100%;
		  top: 0;
		  left: 0;
		  pointer-events: none;
		  z-index: -1;
		}

		.icon-float {
		  position: absolute;
		  color: rgba(255, 255, 255, 0.4);
		  font-size: 24px;
		  animation: iconFloat 10s infinite ease-in-out;
		}

		.icon-float:nth-child(1) {
		  top: 15%;
		  left: 20%;
		  animation-delay: 0s;
		  font-size: 28px;
		}

		.icon-float:nth-child(2) {
		  top: 60%;
		  left: 15%;
		  animation-delay: 1s;
		  font-size: 22px;
		}

		.icon-float:nth-child(3) {
		  top: 25%;
		  right: 20%;
		  animation-delay: 2s;
		  font-size: 26px;
		}

		.icon-float:nth-child(4) {
		  top: 70%;
		  right: 15%;
		  animation-delay: 3s;
		  font-size: 24px;
		}

		@keyframes iconFloat {
		  0%, 100% {
			transform: translateY(0) rotate(0deg);
		  }
		  50% {
			transform: translateY(-20px) rotate(10deg);
		  }
		}
		
		.gender-option {
		  width: 120px;
		  height: 120px;
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  background: white;
		  border: 2px solid #e1e1e1;
		  border-radius: 15px;
		  cursor: pointer;
		  transition: all 0.3s ease;
		}

		.gender-option:hover {
		  transform: translateY(-5px);
		  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		}

		.gender-option.selected {
		  border-color: var(--orange);
		  background-color: rgba(255, 87, 34, 0.1);
		}

		.gender-option i {
		  font-size: 36px;
		  margin-bottom: 10px;
		  color: #555;
		}

		.gender-option.selected i {
		  color: var(--orange);
		}

		.gender-option span {
		  font-weight: 500;
		}

		/* Height Slider */
		.height-slider-container {
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  gap: 20px;
		}

		.height-slider {
		  flex: 1;
		}

		.height-value-display {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  min-width: 100px;
		}

		.height-figure {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  margin-bottom: 10px;
		}

		.height-figure-head {
		  width: 20px;
		  height: 20px;
		  border-radius: 50%;
		  background-color: #555;
		}

		.height-figure-body {
		  width: 10px;
		  background-color: #555;
		  transition: height 0.3s ease;
		}

		.height-figure-legs {
		  width: 30px;
		  height: 5px;
		  background-color: #555;
		}

		#heightDisplay, #weightDisplay {
		  font-weight: bold;
		  color: var(--orange);
		  font-size: 1.2rem;
		}

		/* Weight Scale */
		.weight-container {
			position: relative;
			padding: 20px 0;
		}

		.weight-scale {
			position: relative;
			height: 12px;
			background: #e1e1e1;
			border-radius: 6px;
			margin: 20px 0;
		}

		.weight-indicator {
			position: absolute;
			width: 10px;
			height: 20px;
			top: 50%;
			transform: translateY(-50%);
		}

		.weight-feedback {
			margin-top: 20px;
			text-align: center;
			transition: all 0.3s ease;
		}

		/* Hide default slider appearance for a custom look */
		.weight-slider {
			top: 50%;
			transform: translateY(-50%);
			width: 100%;
			/* height: 12px; */
			background: transparent;
			z-index: 10; /* Ensure it’s clickable */
		}

		.weight-slider::-webkit-slider-thumb {
			-webkit-appearance: none;
			width: 25px;
			height: 25px;
			background: orange;
			border-radius: 50%;
			cursor: pointer;
		}

		.weight-slider::-moz-range-thumb {
			width: 25px;
			height: 25px;
			background: orange;
			border-radius: 50%;
			cursor: pointer;
		}

		/* Step Test */
		.footprint-container {
		  position: relative;
		  width: 60px;
		  height: 60px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		}

		.footprint-icon {
		  font-size: 2.5rem;
		  color: #ccc;
		  transition: all 0.3s ease;
		}

		.footprint-icon.active {
		  color: var(--primary-color);
		}

		.footprint-ripple {
		  position: absolute;
		  width: 100%;
		  height: 100%;
		  border-radius: 50%;
		  background: transparent;
		  border: 3px solid var(--primary-color);
		  opacity: 0;
		  transform: scale(0.8);
		}

		.ripple-animation {
		  animation: ripple 1s ease-out;
		}

		@keyframes ripple {
		  0% { transform: scale(0); opacity: 1; }
		  100% { transform: scale(2); opacity: 0; }
		}

		.phone-shake-animation {
		  display: flex;
		  justify-content: center;
		  margin: 20px 0;
		}

		.phone-container {
		  position: relative;
		}

		.phone {
		  width: 80px;
		  height: 160px;
		  background: #333;
		  border-radius: 15px;
		  padding: 8px;
		  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
		}

		.phone-screen {
		  width: 100%;
		  height: 100%;
		  background: #fff;
		  border-radius: 10px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  overflow: hidden;
		}

		.walking-icon {
		  font-size: 30px;
		  color: var(--orange);
		}

		.shake-animation {
		  animation: shake 0.5s infinite;
		}

		@keyframes shake {
		  0% { transform: translateX(0); }
		  25% { transform: translateX(-5px); }
		  75% { transform: translateX(5px); }
		  100% { transform: translateX(0); }
		}

		/* Stats Summary */
		.stats-summary {
		  display: grid;
		  grid-template-columns: 1fr 1fr;
		  gap: 15px;
		  margin-top: 20px;
		}

		.stat-item {
		  background: white;
		  border-radius: 10px;
		  padding: 15px;
		  display: flex;
		  align-items: center;
		  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
		}

		.stat-item i {
		  font-size: 1.5rem;
		  color: var(--orange);
		  margin-right: 10px;
		}

		/* Success Icon */
		.success-icon {
			width: 60px;
			height: 60px;
			background: darkorange;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			font-size: 40px;
			color: white;
			animation: pulse 2s infinite;
		}
		
		/* Confetti */
		.confetti-container {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  pointer-events: none;
		  z-index: 1;
		}

		.confetti {
		  position: absolute;
		  width: 10px;
		  height: 10px;
		  opacity: 0;
		}

		/* Animations */
		.pulse-animation {
		  animation: pulse 2s infinite;
		}

		@keyframes pulse {
		  0% { transform: scale(1); }
		  50% { transform: scale(1.1); }
		  100% { transform: scale(1); }
		}
		
		.bounce-btn {
		  animation: bounce 2s infinite;
		}

		@keyframes bounce {
		  0%, 20%, 50%, 80%, 100% {
			transform: translateY(0);
		  }
		  40% {
			transform: translateY(-5px);
		  }
		  60% {
			transform: translateY(-3px);
		  }
		}

		.slide-btn:hover {
		  animation: slide 0.3s ease;
		}

		@keyframes slide {
		  0% {
			transform: translateX(0);
		  }
		  50% {
			transform: translateX(3px);
		  }
		  100% {
			transform: translateX(0);
		  }
		}

		.pulse-btn {
		  animation: buttonPulse 2s infinite;
		}

		@keyframes buttonPulse {
		  0% {
			transform: scale(1);
		  }
		  50% {
			transform: scale(1.05);
		  }
		  100% {
			transform: scale(1);
		  }
		}

		.animate-in {
		  animation: fadeIn 0.5s forwards;
		}

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

		/* Wizard Steps Logic */
		.wizard-step {
		  display: none;
		  padding: 20px 10px;
		}

		.wizard-step.active {
		  display: flex;           /* Make active step a flex container */
		  justify-content: center; /* Center horizontally */
          align-items: center;     /* Center vertically */
		  animation: fadeIn 0.5s forwards;
		}
		
		.gender-options {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-content: space-around;
			justify-content: space-evenly;
			align-items: center;
		}
		
		#wizard {
			height: 100%; /* Takes full height of modal-body */
			align-content: center;
		}
		
		.fill-overlay {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 0%;
			background: linear-gradient(to bottom, #d94f00, #ff6f00);
			z-index: 2;
			transition: height 0.5s ease;
		}

		/* App Name and Logo */
		.app-footer {
		  text-align: center;
		  padding-top: 0.5rem;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		}

		.app-footer svg {
		  height: 28px;
		  background-color: black;
		  border-radius: 10px;
		}

		.app-footer span {
		  font-size: 1.2rem;
		  font-weight: bold;
		  color: var(--primary-color);
		  margin-left: 2px;
		}
		
		.nav-pills .nav-link {
            color: #666;
            transition: all 0.3s ease;
        }
        .nav-pills .nav-link.active {
            background: var(--primary-color);
            border: none;
            color: white;
            box-shadow: 0 4px 15px rgba(230, 74, 25, 0.4);
        }
        .nav-pills .nav-link:hover:not(.active) {
            background-color: rgba(230, 74, 25, 0.1);
            color: #E64A19;
        }
        .boost-card {
            background: var(--bg-light);
            border: 3px solid #FFD700;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        .boost-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(60deg, transparent 45%, rgba(255, 255, 255, 0.5) 50%, transparent 55%);
            transform: rotate(45deg);
            animation: shine 3s infinite;
        }
        @keyframes shine {
            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
        }
        .boost-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 15px 35px rgba(255, 107, 53, 0.5);
            border-color: #FFD700;
        }
        .boost-icon {
            font-size: 3.5rem;
            color: #FFD700;
            text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.4);
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
		
		.avatar-card {
			cursor: pointer;
			transition: all 0.2s ease-in-out;
		}
		.avatar-card:hover {
			transform: scale(1.05);
		}
		.border-orange {
			border: 2px solid #f28c38 !important; /* Matches bg-orange */
		}
		.avatar-wrapper {
			width: 80px; /* Fixed size for square container */
			height: 80px;
			overflow: hidden;
			margin: 0 auto;
			background-color: #f8f9fa; /* Fallback background if image fails to load */
		}
		.avatar-wrapper img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
		
	
		/* Draw card with pulse effect */
		.draw-card {
			background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
			border-radius: 15px;
		}
		
		/*
		.current-user-highlight {
			background: #FFE4B580;
			border: 1px solid #FFA50033;
			border-radius: 5px;
		}

		.current-user-section {
			margin-top: 10px;
		}
		*/
	
		/* Leaderboard container styling using Bootstrap 5 classes */
		.main-leaderboard {
		  max-width: 600px;
		}

		/* Individual leaderboard item */
		.leaderboard-item {
		  transition: transform 0.3s ease;
		}

		/* Highlight for current user */
		.leaderboard-item.current-user-highlight {
		  transform: scale(1.05); /* Subtle zoom effect, no Bootstrap equivalent */
		  background: linear-gradient(135deg, #fff3cd, #ffcc80); /* Soft orange gradient for highlight */
		  border-color: #ffca2c; /* Bootstrap warning border color */
		  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Bootstrap shadow-lg equivalent */
		  z-index: 1;
		}

		/* Current user section (outside top 20) */
		.current-user-section {
		  border-radius: 0.375rem; /* Bootstrap rounded-2 */
		  margin-top: 1rem; /* Bootstrap mt-3 */
		  padding: 1rem; /* Bootstrap p-3 */
		}

		/* Ensure images remain circular and sized appropriately */
		.leaderboard-item img.rounded-circle {
		  transition: all 0.3s ease;
		}

		/* Adjust badge styling for consistency */
		.leaderboard-item .badge {
		  font-size: 0.875rem; /* Bootstrap small text size */
		}

		/* Ensure text sizes align with Bootstrap */
		.leaderboard-item h6 {
		  margin-bottom: 0; /* Bootstrap mb-0 */
		  font-size: 0.8rem; /* Default size */
		}

		.leaderboard-item.current-user-highlight h6 {
		  font-size: 1.1rem; /* Larger for current user */
		}

		.current-user-section .leaderboard-item h6 {
		  font-size: 1.2rem; /* Bootstrap larger text */
		  font-weight: bold; /* Bootstrap fw-bold */
		}

		.current-user-section .leaderboard-item small {
		  font-size: 0.875rem; /* Bootstrap small text */
		}
		
		@keyframes fadeShake {
		  0% {
			opacity: 0;
			transform: translateX(0);
		  }
		  25% {
			opacity: 1;
			transform: translateX(-5px);
		  }
		  50% {
			transform: translateX(5px);
		  }
		  75% {
			transform: translateX(-3px);
		  }
		  100% {
			transform: translateX(0);
		  }
		}

		.fade-shake {
		  animation: fadeShake 0.6s ease-in-out;
		}

		.otp-input {
			width: 48px;
			height: 48px;
			border-radius: 8px;
			border: 1px solid #ced4da;
			transition: border-color 0.2s ease, box-shadow 0.2s ease;
		}
	  
		.otp-input:focus {
			border-color: #ff9500;
			box-shadow: 0 0 0 0.25rem rgba(255, 149, 0, 0.25);
			outline: none;
		}
		
		.otp-input.is-invalid {
			border-color: #dc3545;
		}
		@media (max-width: 576px) {
			.otp-input {
			  width: 45px;
			  height: 40px;
			  font-size: 1rem;
			}
		}
		
		.offcanvas-taller {
			height: 50vh !important;
		}
	  
		#signin-wizard {
			position: relative;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 85vh;
			padding: 0;
		}
	  
		.weather-item i {
		  margin-right: 0.5rem;
		}
		
		#phoneInput:focus {
			border-color: #ff9500;
			box-shadow: 0 0 0 0.25rem rgba(255, 149, 0, 0.25);
			outline: none;
		}
		
		#ageInputStart:focus {
			border-color: #ff9500;
			box-shadow: 0 0 0 0.25rem rgba(255, 149, 0, 0.25);
			outline: none;
		}
		
		#heightInputStart:focus {
			border-color: #ff9500;
			box-shadow: 0 0 0 0.25rem rgba(255, 149, 0, 0.25);
			outline: none;
		}
		
		#ageUser:focus {
			border-color: #ff9500;
			box-shadow: 0 0 0 0.25rem rgba(255, 149, 0, 0.25);
			outline: none;
		}
		
		#genderUser:focus {
			border-color: #ff9500;
			box-shadow: 0 0 0 0.25rem rgba(255, 149, 0, 0.25);
			outline: none;
		}
		
		#heightUser:focus {
			border-color: #ff9500;
			box-shadow: 0 0 0 0.25rem rgba(255, 149, 0, 0.25);
			outline: none;
		}
		
		#weightUser:focus {
			border-color: #ff9500;
			box-shadow: 0 0 0 0.25rem rgba(255, 149, 0, 0.25);
			outline: none;
		}
		
		#cityInput:focus {
			border-color: #ff9500;
			box-shadow: 0 0 0 0.25rem rgba(255, 149, 0, 0.25);
			outline: none;
		}
		
		.accordion-button:focus {
			z-index: 3;
			outline: 0;
			box-shadow: 0 0 0 0.25rem rgba(255, 149, 0, 0.25);
		}
		
		.bi-footprints {
			display: inline-block;
			width: 1em;
			height: 1em;
			vertical-align: middle;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF7900' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0Z'/%3E%3Cpath d='M20 20v-2.38c0-2.12 1.03-3.12 1-5.62-.03-2.72-1.49-6-4.5-6C14.63 6 14 7.8 14 9.5c0 3.11 2 5.66 2 8.68V20a2 2 0 1 0 4 0Z'/%3E%3Cpath d='M16 17h4'/%3E%3Cpath d='M4 13h4'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-size: 1em;
			background-position: center;
		}
		
		/* Hide spinners for Chrome, Safari, Edge, Opera */
		input[type="number"]::-webkit-outer-spin-button,
		input[type="number"]::-webkit-inner-spin-button {
		  -webkit-appearance: none;
		  margin: 0;
		}

		/* Hide spinners for Firefox */
		input[type="number"] {
		  -moz-appearance: textfield;
		  appearance: textfield;
		}