/*
	© 2025 Deseo Developers LLC. All rights reserved.
	Unauthorized copying, redistribution, reproduction, or reverse-engineering is strictly prohibited.
	*/
        :root {
            --color-primary: rgb(47, 214, 122);
			--color-primary-dark: #1e40af; /* Darker shade of your primary color */
            --color-secondary: #05386B;
            --color-dark-bg: #1a202c;
            --color-dark-card: #2d3748;
        }
        .dark body {
            background-color: var(--color-dark-bg);
            color: #e2e8f0;
        }
        body {
            background-color: #f7fafc;
            color: #2d3748;
            font-family: 'Inter', sans-serif;
            /* Mobile App-Like Foundation */
            min-height: 100dvh; /* Dynamic Viewport Height for mobile */
            padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
            overflow-x: hidden; /* Prevent horizontal scroll */
        }
        .font-script {
            font-family: 'Dancing Script', cursive;
        }
        /* Custom Scrollbar for Saved Loans */
		#savedLoansList {
			scrollbar-width: thin;
			scrollbar-color: rgb(209, 213, 219) transparent; /* Light mode: gray-300 thumb, transparent track */
		}

		#savedLoansList::-webkit-scrollbar {
			width: 8px;
		}

		#savedLoansList::-webkit-scrollbar-track {
			background: transparent;
			border-radius: 4px;
		}

		#savedLoansList::-webkit-scrollbar-thumb {
			background: rgb(209, 213, 219); /* Light mode: gray-300 */
			border-radius: 4px;
			transition: background 0.3s ease;
		}

		#savedLoansList::-webkit-scrollbar-thumb:hover {
			background: rgb(156, 163, 175); /* Light mode hover: gray-400 */
		}

		/* Dark Mode Scrollbar */
		.dark #savedLoansList {
			scrollbar-color: rgb(75, 85, 99) transparent; /* Dark mode: gray-600 thumb */
		}

		.dark #savedLoansList::-webkit-scrollbar-thumb {
			background: rgb(75, 85, 99); /* Dark mode: gray-600 */
		}

		.dark #savedLoansList::-webkit-scrollbar-thumb:hover {
			background: rgb(107, 114, 128); /* Dark mode hover: gray-500 */
		}

		/* Optional: Global custom scrollbar (for consistency across app) */
		.custom-scrollbar {
			scrollbar-width: thin;
			scrollbar-color: rgb(209, 213, 219) transparent;
		}

		.custom-scrollbar::-webkit-scrollbar {
			width: 8px;
			height: 8px;
		}

		.custom-scrollbar::-webkit-scrollbar-track {
			background: transparent;
			border-radius: 4px;
		}

		.custom-scrollbar::-webkit-scrollbar-thumb {
			background: rgb(209, 213, 219);
			border-radius: 4px;
			transition: background 0.3s ease;
		}

		.custom-scrollbar::-webkit-scrollbar-thumb:hover {
			background: rgb(156, 163, 175);
		}

		/* Dark Mode Custom Scrollbar */
		.dark .custom-scrollbar {
			scrollbar-color: rgb(75, 85, 99) transparent;
		}

		.dark .custom-scrollbar::-webkit-scrollbar-thumb {
			background: rgb(75, 85, 99);
		}

		.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
			background: rgb(107, 114, 128);
		}
        
        /* Toggle Switch Logic */
        .mode-switch-active {
            background-color: var(--color-primary);
            color: white;
        }
        .mode-switch-inactive {
            color: #718096;
        }
		/* Popup Styling */
		/* .popup - This class is already applied to the divs, but we can add specific styling if needed */

		.popup.hidden {
			display: none;
		}

		/* Contact Form Styling */
		/* #contact-form button[type="submit"] - Existing styles are fine for the button */

		/* #contact-success - Existing styles are fine for the success message */
		
		/* Add this to your CSS for subtle pulse */
		@keyframes pulse-slow {
			0%, 100% { opacity: 1; }
			50% { opacity: 0.8; }
		}
		.animate-pulse-slow {
			animation: pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
		}
		/* Add to your CSS to prevent content from being hidden behind footer */
		body {
			padding-bottom: 120px;
		}
		/* Green Glowing Animation */
		@keyframes glow-green {
			0%, 100% {
				box-shadow: 0 0 5px rgba(34, 197, 94, 0.3),
							0 0 10px rgba(34, 197, 94, 0.2),
							0 0 15px rgba(34, 197, 94, 0.1);
			}
			50% {
				box-shadow: 0 0 10px rgba(34, 197, 94, 0.6),
							0 0 20px rgba(34, 197, 94, 0.4),
							0 0 30px rgba(34, 197, 94, 0.2);
			}
		}

		.glow-green {
			animation: glow-green 2s ease-in-out infinite;
		}

		.glow-green:hover {
			animation: glow-green 0.5s ease-in-out infinite;
		}
		/* Custom scrollbar for footer summary */
		.scrollbar-thin {
			scrollbar-width: thin;
		}

		.scrollbar-thin::-webkit-scrollbar {
			width: 6px;
		}

		.scrollbar-thin::-webkit-scrollbar-track {
			background: transparent;
		}

		.scrollbar-thin::-webkit-scrollbar-thumb {
			background: rgba(156, 163, 175, 0.5);
			border-radius: 3px;
		}

		.scrollbar-thin::-webkit-scrollbar-thumb:hover {
			background: rgba(156, 163, 175, 0.7);
		}

		/* .scrollbar-thumb-gray-400 - handled by webkit styles above */
		/* .scrollbar-track-transparent - handled by webkit styles above */
		
		/* ===== BASIC TOOLTIP SYSTEM (unchanged) ===== */
		.tooltip-container {
			position: relative;
			display: inline-block;
			transition: color 0.2s ease;
		}

		/* Primary color hover effect for info icon */
		.tooltip-container:hover {
			color: var(--color-primary);
		}

		/* If using SVG icons, target them specifically */
		.tooltip-container:hover svg {
			color: var(--color-primary);
		}

		/* If using Font Awesome or other icon fonts */
		.tooltip-container:hover i {
			color: var(--color-primary);
		}

		.tooltip-container:hover .tooltip-text {
			visibility: visible;
			opacity: 1;
		}

		.tooltip-text {
			visibility: hidden;
			width: 300px;
			background-color: #2d3748;
			color: #fff;
			text-align: center;
			border-radius: 6px;
			padding: 5px 0;
			position: absolute;
			z-index: 50;
			bottom: 125%;
			left: 50%;
			margin-left: -150px;
			opacity: 0;
			transition: opacity 0.3s;
			font-size: 0.75rem;
			border: 1px solid #4a5568;
			pointer-events: none;
		}

		.dark .tooltip-text {
			background-color: #cbd5e0;
			color: #1a202c;
		}

		/* Dark mode also uses primary color for icon hover */
		.dark .tooltip-container:hover {
			color: var(--color-primary);
		}

		.dark .tooltip-container:hover svg {
			color: var(--color-primary);
		}

		.dark .tooltip-container:hover i {
			color: var(--color-primary);
		}
		
		/* ===== ENHANCED TOOLTIP SYSTEM ===== */
		.tooltip-container {
			position: relative;
			display: inline-block;
			transition: color 0.2s ease;
		}

		/* Primary color hover effect for info icon - but NOT on highlighted cards */
		.tooltip-container:hover:not(.tooltip-on-highlight) {
			color: var(--color-primary);
		}

		.tooltip-container:hover:not(.tooltip-on-highlight) svg {
			color: var(--color-primary);
		}

		.tooltip-container:hover:not(.tooltip-on-highlight) i {
			color: var(--color-primary);
		}

		/* For highlighted cards, keep white/light color on hover */
		.tooltip-on-highlight:hover svg {
			color: rgba(255, 255, 255, 0.95);
		}

		.tooltip-container:hover .tooltip-text {
			visibility: visible;
			opacity: 1;
		}

		.tooltip-text {
			visibility: hidden;
			width: 250px;
			background-color: #2d3748;
			color: #fff;
			text-align: center;
			border-radius: 8px;
			padding: 8px 12px;
			position: absolute;
			z-index: 100;
			bottom: calc(100% + 10px);
			left: 50%;
			transform: translateX(-50%);
			opacity: 0;
			transition: opacity 0.3s;
			font-size: 1.0rem;
			border: 1px solid rgba(47, 214, 122, 0.5);
			pointer-events: none;
			
			/* Add glowing border animation */
			animation: glow-green-border 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
			
			/* Ensure tooltip appears above everything */
			white-space: normal;
			line-height: 1.4;
		}

		.tooltip-container:hover .tooltip-text {
			/* Faster glow on hover */
			animation: glow-green-border 0.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
		}

		.dark .tooltip-text {
			background-color: #1a202c;
			color: #e2e8f0;
			border-color: rgba(47, 214, 122, 0.5);
		}

		/* Dark mode also uses primary color for icon hover - but NOT on highlighted cards */
		.dark .tooltip-container:hover:not(.tooltip-on-highlight) {
			color: var(--color-primary);
		}

		.dark .tooltip-container:hover:not(.tooltip-on-highlight) svg {
			color: var(--color-primary);
		}

		.dark .tooltip-container:hover:not(.tooltip-on-highlight) i {
			color: var(--color-primary);
		}

		.dark .tooltip-on-highlight:hover svg {
			color: rgba(255, 255, 255, 0.95);
		}

		/* Green Glowing Border Animation for Tooltips */
		@keyframes glow-green-border {
			0%, 100% {
				border-color: rgba(47, 214, 122, 0.5);
				box-shadow: 0 0 5px rgba(47, 214, 122, 0.3),
							0 0 10px rgba(47, 214, 122, 0.2),
							0 0 15px rgba(47, 214, 122, 0.1);
			}
			50% {
				border-color: rgba(47, 214, 122, 0.9);
				box-shadow: 0 0 10px rgba(47, 214, 122, 0.6),
							0 0 20px rgba(47, 214, 122, 0.4),
							0 0 30px rgba(47, 214, 122, 0.2);
			}
		}

		/* Green Glowing Animation (matching footer toggle) - for other elements */
		@keyframes glow-green {
			0%, 100% {
				filter: drop-shadow(0 0 3px rgba(47, 214, 122, 0.4))
						drop-shadow(0 0 6px rgba(47, 214, 122, 0.3))
						drop-shadow(0 0 9px rgba(47, 214, 122, 0.2));
			}
			50% {
				filter: drop-shadow(0 0 6px rgba(47, 214, 122, 0.7))
						drop-shadow(0 0 12px rgba(47, 214, 122, 0.5))
						drop-shadow(0 0 18px rgba(47, 214, 122, 0.3));
			}
		}

		.glow-green {
			animation: glow-green 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
		}

		.glow-green:hover {
			animation: glow-green 0.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
		}

		/* ===== COMPARISON TABLE GLASSMORPHIC TOOLTIPS WITH GREEN PULSE GLOW ===== */
		#comparisonTable .tooltip-container,
		.comparison-table .tooltip-container {
			cursor: help;
		}

		/* GREEN GLOW ANIMATIONS */
		@keyframes glow-green {
			0%, 100% {
				box-shadow: 0 0 5px rgba(34, 197, 94, 0.3),
							0 0 10px rgba(34, 197, 94, 0.2),
							0 0 15px rgba(34, 197, 94, 0.1);
			}
			50% {
				box-shadow: 0 0 10px rgba(34, 197, 94, 0.6),
							0 0 20px rgba(34, 197, 94, 0.4),
							0 0 30px rgba(34, 197, 94, 0.2);
			}
		}

		@keyframes glow-green-arrow {
			0%, 100% {
				filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.4)) 
						drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
			}
			50% {
				filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.8)) 
						drop-shadow(0 0 12px rgba(34, 197, 94, 0.6))
						drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
			}
		}

		@keyframes pulse-slow {
			0%, 100% { opacity: 1; }
			50% { opacity: 0.8; }
		}

		/* MAIN TOOLTIP STYLES - CONSOLIDATED WITH GLOW */
		#comparisonTable .tooltip-text,
		.comparison-table .tooltip-text {
			visibility: hidden !important;
			opacity: 0 !important;
			
			/* Glassmorphic styles */
			width: 450px !important;
			max-width: 450px !important;
			background: rgba(255, 255, 255, 0.45) !important;
			backdrop-filter: blur(12px) !important;
			-webkit-backdrop-filter: blur(12px) !important;
			border: 2px solid rgba(47, 214, 122, 0.2) !important;
			
			/* Text styling */
			color: #1f2937 !important;
			text-align: left !important;
			border-radius: 12px !important;
			padding: 14px 16px !important;
			font-size: 14px !important;
			line-height: 1.5 !important;
			font-weight: 500 !important;
			
			/* Positioning */
			position: absolute !important;
			z-index: 1000 !important;
			bottom: 125% !important;
			left: 50% !important;
			margin-left: -225px !important; /* Half of 450px */
			
			/* Enhanced shadow with green glow base */
			box-shadow: 
				0 8px 32px rgba(0, 0, 0, 0.12),
				0 2px 8px rgba(0, 0, 0, 0.08),
				inset 0 1px 0 rgba(255, 255, 255, 0.4),
				0 0 5px rgba(34, 197, 94, 0.2) !important;
			
			transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
			transform: translateY(8px) !important;
			box-sizing: border-box !important;
		}

		/* ARROW STYLING WITH GLOW */
		#comparisonTable .tooltip-text::after,
		.comparison-table .tooltip-text::after {
			content: "";
			position: absolute;
			top: 100%;
			left: var(--arrow-left, 50%);
			margin-left: -8px;
			border-width: 8px;
			border-style: solid;
			border-color: rgba(47, 214, 122, 0.85) transparent transparent transparent;
			filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.4)) 
					drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
		}

		/* Enhanced arrow styling for tooltips that appear below */
		#comparisonTable .tooltip-text[data-position="below"]::after {
			top: auto !important;
			bottom: 100% !important;
			border-color: transparent transparent rgba(47, 214, 122, 0.85) transparent !important;
		}

		/* POSITIONING RULES */
		/* First two columns - align tooltip to the right */
		#comparisonTable tr td:nth-child(1) .tooltip-text,
		#comparisonTable tr td:nth-child(2) .tooltip-text,
		#comparisonTable tr th:nth-child(1) .tooltip-text,
		#comparisonTable tr th:nth-child(2) .tooltip-text {
			left: 0 !important;
			margin-left: 0 !important;
		}

		/* Last two columns - align tooltip to the left */
		#comparisonTable tr td:nth-last-child(1) .tooltip-text,
		#comparisonTable tr td:nth-last-child(2) .tooltip-text,
		#comparisonTable tr th:nth-last-child(1) .tooltip-text,
		#comparisonTable tr th:nth-last-child(2) .tooltip-text {
			left: auto !important;
			right: 0 !important;
			margin-left: 0 !important;
			margin-right: 0 !important;
		}

		/* Middle-right columns - nudge left */
		#comparisonTable tr td:nth-last-child(3) .tooltip-text,
		#comparisonTable tr td:nth-last-child(4) .tooltip-text,
		#comparisonTable tr th:nth-last-child(3) .tooltip-text,
		#comparisonTable tr th:nth-last-child(4) .tooltip-text {
			margin-left: -300px !important;
		}

		/* HOVER EFFECTS WITH ENHANCED GLOW */
		#comparisonTable .tooltip-container:hover .tooltip-text,
		.comparison-table .tooltip-container:hover .tooltip-text {
			visibility: visible !important;
			opacity: 1 !important;
			transform: translateY(0) !important;
			animation: tooltipFadeIn 0.3s ease forwards, glow-green 2s ease-in-out infinite;
		}

		/* HOVER EFFECTS FOR ARROW GLOW */
		#comparisonTable .tooltip-container:hover .tooltip-text::after,
		.comparison-table .tooltip-container:hover .tooltip-text::after {
			animation: glow-green-arrow 2s ease-in-out infinite;
		}

		#comparisonTable .tooltip-container svg,
		.comparison-table .tooltip-container svg {
			transition: all 0.2s ease;
		}

		#comparisonTable .tooltip-container:hover svg,
		.comparison-table .tooltip-container:hover svg {
			color: rgb(47, 214, 122) !important;
			transform: scale(1.1);
			filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.6));
		}

		/* DARK MODE WITH ENHANCED GLOW */
		.dark #comparisonTable .tooltip-text,
		.dark .comparison-table .tooltip-text {
			background: rgba(31, 41, 55, 0.45) !important;
			backdrop-filter: blur(16px) !important;
			-webkit-backdrop-filter: blur(16px) !important;
			border: 2px solid rgba(47, 214, 122, 0.3) !important;
			color: #f9fafb !important;
			
			box-shadow: 
				0 8px 32px rgba(0, 0, 0, 0.3),
				0 2px 8px rgba(0, 0, 0, 0.2),
				inset 0 1px 0 rgba(255, 255, 255, 0.1),
				0 0 8px rgba(34, 197, 94, 0.3) !important;
		}

		/* DARK MODE HOVER GLOW */
		.dark #comparisonTable .tooltip-container:hover .tooltip-text,
		.dark .comparison-table .tooltip-container:hover .tooltip-text {
			animation: tooltipFadeIn 0.3s ease forwards, glow-green-dark 2s ease-in-out infinite;
		}

		/* Dark mode specific glow animation */
		@keyframes glow-green-dark {
			0%, 100% {
				box-shadow: 
					0 8px 32px rgba(0, 0, 0, 0.3),
					0 2px 8px rgba(0, 0, 0, 0.2),
					inset 0 1px 0 rgba(255, 255, 255, 0.1),
					0 0 8px rgba(34, 197, 94, 0.4),
					0 0 16px rgba(34, 197, 94, 0.2);
			}
			50% {
				box-shadow: 
					0 8px 32px rgba(0, 0, 0, 0.3),
					0 2px 8px rgba(0, 0, 0, 0.2),
					inset 0 1px 0 rgba(255, 255, 255, 0.1),
					0 0 16px rgba(34, 197, 94, 0.7),
					0 0 32px rgba(34, 197, 94, 0.4),
					0 0 48px rgba(34, 197, 94, 0.2);
			}
		}

		/* DARK MODE ARROW - Enhanced glow */
		.dark #comparisonTable .tooltip-text::after,
		.dark .comparison-table .tooltip-text::after {
			border-color: rgba(47, 214, 122, 0.9) transparent transparent transparent !important;
			filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.6)) 
					drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
		}

		/* Dark mode arrow glow animation */
		@keyframes glow-green-arrow-dark {
			0%, 100% {
				filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.6)) 
						drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
			}
			50% {
				filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.9)) 
						drop-shadow(0 0 20px rgba(34, 197, 94, 0.7))
						drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
			}
		}

		.dark #comparisonTable .tooltip-container:hover .tooltip-text::after,
		.dark .comparison-table .tooltip-container:hover .tooltip-text::after {
			animation: glow-green-arrow-dark 2s ease-in-out infinite;
		}

		/* Enhanced arrow styling for tooltips that appear below */
		.dark #comparisonTable .tooltip-text[data-position="below"]::after {
			border-color: transparent transparent rgba(47, 214, 122, 0.9) transparent !important;
		}

		/* TOOLTIP SECTIONS STYLING */
		#comparisonTable .tooltip-text .tooltip-section {
			margin-bottom: 8px;
		}

		#comparisonTable .tooltip-text .tooltip-section:last-child {
			margin-bottom: 0;
		}

		#comparisonTable .tooltip-text strong {
			color: inherit;
			font-weight: 600;
		}

		.dark #comparisonTable .tooltip-text strong {
			color: #f9fafb;
		}

		/* TABLE CONTAINER */
		.table-container {
			position: relative;
			overflow: hidden;
		}

		#comparisonTable {
			position: relative;
			overflow: visible;
		}

		#comparisonResults {
			position: relative;
		}

		/* ANIMATION */
		@keyframes tooltipFadeIn {
			from {
				opacity: 0;
				transform: translateY(8px) scale(0.95);
			}
			to {
				opacity: 1;
				transform: translateY(0) scale(1);
			}
		}

		/* UTILITY CLASSES */
		.animate-pulse-slow {
			animation: pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
		}

		.glow-green {
			animation: glow-green 2s ease-in-out infinite;
		}

		.glow-green:hover {
			animation: glow-green 0.5s ease-in-out infinite;
		}

		/* RESPONSIVE DESIGN */
		@media (max-width: 768px) {
			#comparisonTable .tooltip-text,
			.comparison-table .tooltip-text {
				width: 350px !important;
				max-width: 90vw !important;
				font-size: 11px !important;
				padding: 12px 14px !important;
				margin-left: -175px !important;
			}
			
			#comparisonTable tr td:nth-child(1) .tooltip-text,
			#comparisonTable tr td:nth-child(2) .tooltip-text,
			#comparisonTable tr th:nth-child(1) .tooltip-text,
			#comparisonTable tr th:nth-child(2) .tooltip-text {
				margin-left: 0 !important;
			}
			
			#comparisonTable tr td:nth-last-child(3) .tooltip-text,
			#comparisonTable tr td:nth-last-child(4) .tooltip-text,
			#comparisonTable tr th:nth-last-child(3) .tooltip-text,
			#comparisonTable tr th:nth-last-child(4) .tooltip-text {
				margin-left: -250px !important;
			}
		}

		/* SCROLLBAR STYLING */
		.scrollbar-thin {
			scrollbar-width: thin;
		}

		.scrollbar-thin::-webkit-scrollbar {
			width: 6px;
		}

		.scrollbar-thin::-webkit-scrollbar-track {
			background: transparent;
		}

		.scrollbar-thin::-webkit-scrollbar-thumb {
			background: rgba(156, 163, 175, 0.5);
			border-radius: 3px;
		}

		.scrollbar-thin::-webkit-scrollbar-thumb:hover {
			background: rgba(156, 163, 175, 0.7);
		}

		/* BODY PADDING FOR FOOTER */
		body {
			padding-bottom: 120px;
		}
	
		/* ============================================
		   CHART ENHANCEMENTS - Complete CSS
		   ============================================ */

		/* Collapsible icon rotation */
		.rotate-180 {
			transform: rotate(180deg);
		}

		/* Smooth collapse transitions */
		#chartContent,
		#comparisonChartsContent {
			transition: max-height 0.5s ease-in-out, opacity 0.3s ease;
		}

		/* Chart container fade-in animation */
		@keyframes fadeInUp {
			from {
				opacity: 0;
				transform: translateY(20px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.chart-animate {
			animation: fadeInUp 0.6s ease-out;
		}

		/* Loading spinner */
		@keyframes spin {
			to {
				transform: rotate(360deg);
			}
		}

		.animate-spin {
			animation: spin 1s linear infinite;
		}

		/* Responsive chart improvements */
		@media (max-width: 768px) {
			#chartContainer .grid {
				grid-template-columns: 1fr;
			}
			
			#chartContainer > .grid > div {
				height: 300px !important; /* Smaller on mobile */
			}
		}

		/* Chart container styling */
		.chart-container {
			position: relative;
			width: 100%;
		}

		/* Download button hover effect */
		button[onclick^="downloadChart"] {
			transition: all 0.2s ease;
		}

		button[onclick^="downloadChart"]:hover {
			transform: translateY(-1px);
		}

		button[onclick^="downloadChart"]:active {
			transform: translateY(0);
		}

		/* Focus states for accessibility */
		button[aria-expanded]:focus {
			outline: 2px solid #10b981;
			outline-offset: 2px;
		}

		/* Chart loading overlay */
		#chartLoading {
			position: relative;
			z-index: 10;
		}
		
		/* Enhanced Pro Mode Cards */
		.bg-gradient-to-br {
			background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
		}

		.from-primary {
			--tw-gradient-from: var(--color-primary);
			--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(47, 214, 122, 0));
		}

		.to-green-600 {
			--tw-gradient-to: #059669;
		}

		/* Hover effects for pro cards */
		.hover\:scale-105:hover {
			transform: scale(1.05);
		}

		/* Dark mode gradient adjustments */
		.dark .bg-gradient-to-br {
			opacity: 0.95;
		}
		
		/* Card Size Toggle Button Styling */
		.card-size-toggle {
			color: #718096;
			background-color: transparent;
			transition: all 0.3s ease;
		}

		.card-size-toggle:hover {
			color: #4a5568;
			background-color: rgba(0, 0, 0, 0.05);
		}

		.card-size-toggle.active {
			background-color: var(--color-primary);
			color: white;
		}

		/* Dark Mode */
		.dark .card-size-toggle {
			color: #a0aec0;
		}

		.dark .card-size-toggle:hover {
			color: #cbd5e0;
			background-color: rgba(255, 255, 255, 0.1);
		}

	.dark .card-size-toggle.active {
		background-color: var(--color-primary);
		color: white;
	}
	
	/* ============================================
	   MOBILE UX ENHANCEMENTS - Native App Feel
	   ============================================ */
	
	/* Main container uses dynamic viewport height */
	html {
		height: 100dvh;
		overflow-x: hidden;
	}
	
	/* Touch Devices - Disable text selection on UI elements */
	@media (pointer: coarse) {
		button,
		input[type="button"],
		input[type="submit"],
		input[type="reset"],
		select,
		label {
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			user-select: none;
		}
		
		/* Remove grey tap highlight */
		* {
			-webkit-tap-highlight-color: transparent;
		}
		
		/* Ensure all interactive targets have minimum touch size */
		button,
		input[type="button"],
		input[type="submit"],
		input[type="reset"],
		select,
		a {
			min-height: 44px;
			min-width: 44px;
		}
		
		/* Force 16px font-size on inputs/selects to prevent iOS auto-zoom */
		input,
		select,
		textarea {
			font-size: 16px !important;
		}
	}
	
	/* Mouse Devices - Maintain text selection and hover states */
	@media (hover: hover) and (pointer: fine) {
		/* Allow text selection on mouse devices */
		* {
			user-select: text;
		}
		
		/* Hover states only apply on devices that support hover */
		button:hover,
		a:hover,
		input:hover,
		select:hover {
			/* Hover effects are maintained via existing CSS */
		}
	}
	
	/* Prevent sticky hover on touch devices */
	@media (hover: none) and (pointer: coarse) {
		button:hover,
		a:hover,
		input:hover,
		select:hover {
			/* Reset hover states to prevent sticky hover */
			background-color: inherit;
			color: inherit;
			transform: none;
		}
	}

	/* Scrollbar hide utility */
	.scrollbar-hide {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	
	.scrollbar-hide::-webkit-scrollbar {
		display: none;
	}

	/* Mobile swipe navigation - horizontal scroll for header buttons */
	@media (pointer: coarse) {
		.header-content-container {
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
			scroll-behavior: smooth;
			scroll-snap-type: x mandatory;
		}
	}

	/* Desktop: no horizontal scroll needed */
	@media (hover: hover) and (pointer: fine) {
		.header-content-container {
			overflow-x: visible;
		}
	}
	
	/* Toast Notification Styles */
		#custom-toast {
			animation: slideIn 0.3s ease-out forwards;
		}

		#custom-toast.show {
			display: block !important;
			transform: translateX(0);
		}

		#custom-toast.hide {
			animation: slideOut 0.3s ease-in forwards;
		}

		@keyframes slideIn {
			from {
				transform: translateX(100%);
				opacity: 0;
			}
			to {
				transform: translateX(0);
				opacity: 1;
			}
		}

		@keyframes slideOut {
			from {
				transform: translateX(0);
				opacity: 1;
			}
			to {
				transform: translateX(100%);
				opacity: 0;
			}
		}

		/* Success Toast Variant */
		#custom-toast.success .border-red-500 {
			border-color: var(--color-primary);
		}

		#custom-toast.success .text-red-500 {
			color: var(--color-primary);
		}

		/* Error state for input fields */
		.input-error {
			border-color: #ef4444 !important;
			box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
		}

	.dark .input-error {
		border-color: #ef4444 !important;
		box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
	}

	/* Green glow effect for focused input fields */
	input:focus, 
	input[type="text"]:focus, 
	input[type="number"]:focus, 
	input[type="date"]:focus,
	select:focus,
	textarea:focus {
		outline: none !important;
		border-color: #10b981 !important;
		box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25), 0 0 8px rgba(16, 185, 129, 0.15) !important;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.dark input:focus,
	.dark input[type="text"]:focus,
	.dark input[type="number"]:focus,
	.dark input[type="date"]:focus,
	.dark select:focus,
	.dark textarea:focus {
		border-color: #10b981 !important;
		box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35), 0 0 10px rgba(16, 185, 129, 0.25) !important;
	}
	
	/* Pro Mode Blur Styling for Simple Mode (No Lock Icons) */
	.simple-mode .pro-only {
		position: relative;
		filter: blur(4px);
		opacity: 0.5;
		pointer-events: none;
		user-select: none;
		overflow: visible;
	}
	
	/* Ensure footer buttons maintain absolute positioning and display flex when visible in simple mode */
	.simple-mode #footerProButtons.pro-only:not(.hidden) {
		position: absolute !important;
		display: flex !important;
		right: 4rem !important; /* right-16 = 4rem */
		top: 50% !important;
		transform: translateY(-50%) !important;
		filter: blur(4px) !important;
		opacity: 0.5 !important;
		pointer-events: none !important;
		z-index: 10 !important;
	}
	
	/* ============================================
	   FIELD GLOW EFFECTS - Required vs Optional
	   ============================================ */
	
	/* Green glow for empty required fields */
	input:required.empty-field,
	select:required.empty-field,
	input[required].empty-field,
	select[required].empty-field {
		box-shadow: 0 0 8px rgba(47, 214, 122, 0.5),
					0 0 12px rgba(47, 214, 122, 0.3),
					0 0 16px rgba(47, 214, 122, 0.2);
		animation: glow-green-pulse 2s ease-in-out infinite;
	}
	
	/* Grey glow for empty optional fields */
	input:not([required]).empty-field,
	select:not([required]).empty-field {
		box-shadow: 0 0 6px rgba(107, 114, 128, 0.4),
					0 0 10px rgba(107, 114, 128, 0.3),
					0 0 14px rgba(107, 114, 128, 0.2);
		animation: glow-grey-pulse 2s ease-in-out infinite;
	}
	
	/* Green glow pulse animation */
	@keyframes glow-green-pulse {
		0%, 100% {
			box-shadow: 0 0 8px rgba(47, 214, 122, 0.5),
						0 0 12px rgba(47, 214, 122, 0.3),
						0 0 16px rgba(47, 214, 122, 0.2);
		}
		50% {
			box-shadow: 0 0 12px rgba(47, 214, 122, 0.7),
						0 0 18px rgba(47, 214, 122, 0.5),
						0 0 24px rgba(47, 214, 122, 0.3);
		}
	}
	
	/* Grey glow pulse animation (light mode) */
	@keyframes glow-grey-pulse {
		0%, 100% {
			box-shadow: 0 0 6px rgba(107, 114, 128, 0.4),
						0 0 10px rgba(107, 114, 128, 0.3),
						0 0 14px rgba(107, 114, 128, 0.2);
		}
		50% {
			box-shadow: 0 0 10px rgba(107, 114, 128, 0.6),
						0 0 16px rgba(107, 114, 128, 0.4),
						0 0 20px rgba(107, 114, 128, 0.3);
		}
	}
	
	/* Grey glow pulse animation (dark mode) */
	@keyframes glow-grey-pulse-dark {
		0%, 100% {
			box-shadow: 0 0 6px rgba(156, 163, 175, 0.5),
						0 0 10px rgba(156, 163, 175, 0.4),
						0 0 14px rgba(156, 163, 175, 0.3);
		}
		50% {
			box-shadow: 0 0 10px rgba(156, 163, 175, 0.7),
						0 0 16px rgba(156, 163, 175, 0.5),
						0 0 20px rgba(156, 163, 175, 0.4);
		}
	}
	
	/* Dark mode grey glow adjustments */
	.dark input:not([required]).empty-field,
	.dark select:not([required]).empty-field {
		box-shadow: 0 0 6px rgba(156, 163, 175, 0.5),
					0 0 10px rgba(156, 163, 175, 0.4),
					0 0 14px rgba(156, 163, 175, 0.3);
		animation: glow-grey-pulse-dark 2s ease-in-out infinite;
	}
	
	/*
	© 2025 Deseo Developers LLC. All rights reserved.
	Unauthorized copying, redistribution, reproduction, or reverse-engineering is strictly prohibited.
	*/