:root {
            --primary-blue: #007bff; /* Main action color, from dashboard */
            --accent-green: #2ecc71; /* Accent green from dashboard */
            --accent-red: #e74c3c; /* Accent red from dashboard */
            --accent-orange: #f39c12; /* Accent orange from logo */
            --accent-light-blue: #3498db; /* Accent light blue from logo */
            --bg-gradient-start: #f0f8ff; /* Very light, almost white blue */
            --bg-gradient-end: #e6f7ff;   /* Slightly deeper light blue */
            --card-bg: #ffffff;
            --text-dark: #2c3e50; /* Darker, professional text */
            --text-medium: #7f8c8d; /* Softer gray */
            --border-light: #ecf0f1; /* Very light border */
            --error-red: #e74c3c; /* For validation errors */
        }

        html {
            font-size: 16px; /* Base font size for rem units */
        }

        body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column; /* Allow content to stack and scroll */
            align-items: center;
            justify-content: flex-start; /* Align content from top */
            background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
            overflow-y: auto; /* Allow vertical scrolling */
            overflow-x: hidden; /* Prevent horizontal scrolling */
            position: relative;
        }

        /* Background Animated Shapes */
        .bg-shape {
            position: fixed; /* Use fixed to keep them in viewport during scroll */
            border-radius: 50%;
            opacity: 0.15; /* More subtle */
            filter: blur(40px); /* Stronger blur */
            animation: float-shapes 25s infinite ease-in-out; /* Slower animation */
            z-index: 0;
        }

        .bg-shape-1 { background: var(--accent-red); width: 250px; height: 250px; top: 10%; left: 5%; animation-delay: 0s; }
        .bg-shape-2 { background: var(--accent-green); width: 300px; height: 300px; bottom: 15%; right: 10%; animation-delay: 8s; }
        .bg-shape-3 { background: var(--accent-orange); width: 200px; height: 200px; top: 30%; right: 20%; animation-delay: 16s; }
        .bg-shape-4 { background: var(--accent-light-blue); width: 280px; height: 280px; bottom: 5%; left: 25%; animation-delay: 4s; }
        .bg-shape-5 { background: var(--primary-blue); width: 180px; height: 180px; top: 50%; left: 40%; animation-delay: 12s; }

        @keyframes float-shapes {
            0% { transform: translate(0, 0) scale(1); }
            25% { transform: translate(20px, -15px) scale(1.02); }
            50% { transform: translate(-10px, 20px) scale(0.98); }
            75% { transform: translate(15px, -5px) scale(1.01); }
            100% { transform: translate(0, 0) scale(1); }
        }

        /* Page Sections */
        .page-section {
            display: flex; /* Always display as this is a single page */
            width: 100%;
            min-height: 100vh; /* Take full viewport height */
            justify-content: center;
            align-items: center;
            padding: 2rem;
            opacity: 1; /* Always visible */
            transition: opacity 0.7s ease-in-out;
            z-index: 1; /* Below the navigation */
            flex-grow: 1; /* Allow section to grow and push content down */
            will-change: transform, opacity; /* Optimize animations */
            backface-visibility: hidden; /* Prevent flickering */
        }

        .auth-card {
            background-color: var(--card-bg);
            border-radius: 1.5rem; /* Slightly less rounded for better scaling */
            box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.15); /* Slightly less intense shadow */
            padding: 3.5rem 5rem; /* Adjusted padding for wider card */
            width: 100%;
            /*max-width: 950px;*/ /* Increased max-width for wider card */
            text-align: center;
            position: relative;
            z-index: 10; /* Above background shapes */
            animation: fadeInScale 0.8s ease-out forwards;
            border: 1px solid rgba(var(--primary-blue), 0.05); /* Very subtle border */
            will-change: transform, opacity; /* Optimize animations */
            backface-visibility: hidden; /* Prevent flickering */
        }

        #signin-card {
            max-width: 500px;
        }
        #forgotpassword-card {
            max-width: 500px;
        }
        #register-card {
            max-width: 950px;
        }

        @keyframes fadeInScale {
            from { opacity: 0; transform: scale(0.97) translateY(20px); } /* Adjusted starting point */
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        .auth-card .logo-small {
            width: 80px; /* Slightly smaller logo in card */
            height: 80px;
            margin-bottom: 2rem; /* Adjusted space below logo */
            object-fit: contain;
            /* Updated drop-shadow for a more prominent floating effect */
            filter: drop-shadow(0 0.5rem 1.5rem rgba(0,0,0,0.2));
        }

        .auth-card h2 {
            font-size: 2.5rem; /* Reduced heading font size */
            font-weight: 800;
            color: var(--text-dark);
            margin-bottom: 1.5rem; /* Adjusted space below heading */
            line-height: 1.2;
        }

        .auth-card p.subtitle {
            font-size: 1.1rem; /* Reduced subtitle font size */
            color: var(--text-medium);
            margin-bottom: 2.5rem; /* Adjusted space below subtitle */
            line-height: 1.6;
        }

        .form-label {
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 0.6rem; /* Adjusted space for labels */
            text-align: left;
            display: block;
            font-size: 0.95rem; /* Adjusted label font size */
        }

        .form-select{
            height: calc(2.25rem + 18px) !important;
        }

        .form-control {
            border-radius: 0.7rem; /* Slightly less rounded inputs */
            padding: 1rem 1.2rem; /* Adjusted padding */
            border: 1px solid var(--border-light);
            transition: all 0.2s ease;
            font-size: 1rem; /* Adjusted input font size */
        }
        .form-control:focus {
            border-color: var(--primary-blue);
            box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.2); /* Adjusted focus shadow */
            background-color: #fafffc;
        }

        /* Refined Validation Error Styling */
        .form-control.is-invalid {
            border-color: var(--error-red); /* Keep red border */
            background-image: none; /* Remove default Bootstrap icon */
            padding-right: 1.2rem; /* Reset padding */
            animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both; /* Subtle shake animation */
            transform: translate3d(0, 0, 0); /* Force hardware acceleration */
            backface-visibility: hidden;
            perspective: 1000px;
        }

        @keyframes shake {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }

        .invalid-feedback {
            color: var(--error-red);
            font-size: 0.85rem; /* Adjusted font size */
            margin-top: 0.25rem; /* Adjusted space */
            text-align: left;
            display: block;
            font-weight: 500;
        }


        .btn-primary {
            background-color: var(--primary-blue);
            border-color: var(--primary-blue);
            font-weight: 700;
            padding: 1.1rem 1.8rem; /* Adjusted padding */
            border-radius: 0.7rem; /* Adjusted roundedness */
            transition: all 0.2s ease;
            box-shadow: 0 0.5rem 1.2rem rgba(0, 123, 255, 0.3); /* Adjusted shadow */
            font-size: 1.1rem; /* Adjusted font size */
            text-transform: uppercase;
            letter-spacing: 0.5px; /* Adjusted letter spacing */
        }
        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
            transform: translateY(-3px); /* Adjusted lift */
            box-shadow: 0 0.7rem 1.5rem rgba(0, 123, 255, 0.4);
        }

        .link-text {
            color: var(--primary-blue);
            font-weight: 600;
            text-decoration: none;
            transition: color 0.2s ease, transform 0.1s ease;
            font-size: 0.95rem; /* Adjusted link text size */
        }
        .link-text:hover {
            text-decoration: underline;
            color: #0056b3;
            transform: translateY(-1px); /* Subtle lift on hover */
        }

        .social-login-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.9rem 1.6rem; /* Adjusted padding */
            border-radius: 0.7rem; /* Adjusted roundedness */
            border: 1px solid var(--border-light);
            background-color: var(--card-bg);
            color: var(--text-dark);
            font-weight: 500;
            transition: all 0.2s ease;
            box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.08); /* Adjusted shadow */
            font-size: 1rem; /* Adjusted font size */
        }
        .social-login-btn:hover {
            background-color: #f8f9fa;
            box-shadow: 0 0.3rem 0.7rem rgba(0, 0, 0, 0.12);
            transform: translateY(-2px);
        }
        .social-login-btn i {
            margin-right: 0.8rem; /* Adjusted space for icon */
            font-size: 1.2rem; /* Adjusted icon size */
        }

        /* Floating Navigation on Right Side */
        .floating-nav {
            position: fixed;
            top: 50%;
            right: 2rem;
            transform: translateY(-50%) translateZ(0); /* Add translateZ for layer promotion */
            display: flex;
            flex-direction: column;
            gap: 0.8rem; /* Adjusted gap */
            z-index: 100; /* Above page sections */
        }

        .floating-nav .nav-item {
            background-color: rgba(255, 255, 255, 0.9); /* Frosted glass effect */
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border-radius: 0.8rem; /* Adjusted roundedness */
            box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.08); /* Adjusted shadow */
            padding: 0.7rem 1.1rem; /* Adjusted padding */
            text-decoration: none;
            color: var(--text-dark);
            font-weight: 600;
            font-size: 0.9rem; /* Adjusted font size */
            display: flex;
            align-items: center;
            gap: 0.5rem; /* Adjusted gap */
            transition: all 0.3s ease;
            border: 1px solid rgba(var(--primary-blue), 0.1);
        }
        .floating-nav .nav-item:hover {
            background-color: var(--primary-blue);
            color: white;
            transform: translateX(-4px); /* Adjusted lift */
            box-shadow: 0 0.3rem 0.8rem rgba(0, 123, 255, 0.25);
        }
        .floating-nav .nav-item.active {
            background-color: var(--primary-blue);
            color: white;
            box-shadow: 0 0.3rem 0.8rem rgba(0, 123, 255, 0.3);
            transform: translateX(-4px);
        }
        .floating-nav .nav-item.btn-payment {
            background-color: var(--accent-green);
            color: white;
            border-color: var(--accent-green);
            box-shadow: 0 0.25rem 0.7rem rgba(46, 204, 113, 0.25);
        }
        .floating-nav .nav-item.btn-payment:hover {
            background-color: #27ae60;
            border-color: #27ae60;
            box-shadow: 0 0.4rem 1rem rgba(46, 204, 113, 0.35);
        }
        .floating-nav .nav-item i {
            font-size: 1rem; /* Adjusted icon size */
        }

        /* Mobile Hamburger Button (Bottom Right) */
        .mobile-toggle-btn {
            display: none;
            position: fixed;
            bottom: 1.5rem; /* Adjusted position */
            right: 1.5rem; /* Adjusted position */
            background-color: var(--primary-blue);
            color: white;
            border-radius: 50%;
            width: 55px; /* Slightly smaller */
            height: 55px; /* Slightly smaller */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem; /* Adjusted font size */
            box-shadow: 0 0.4rem 1.2rem rgba(0, 123, 255, 0.35); /* Adjusted shadow */
            z-index: 101;
            cursor: pointer;
            transition: all 0.3s ease;
            transform: translateZ(0); /* Add translateZ for layer promotion */
        }
        .mobile-toggle-btn:hover {
            transform: translateY(-2px); /* Adjusted lift */
            box-shadow: 0 0.6rem 1.5rem rgba(0, 123, 255, 0.45);
        }
        .mobile-toggle-btn.active {
            transform: rotate(45deg); /* Rotate for 'X' effect */
            background-color: var(--accent-red); /* Change color when active */
        }

        /* Mobile Navigation Overlay */
        .mobile-nav-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.98);
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 2rem; /* Adjusted gap */
            z-index: 99;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }
        .mobile-nav-overlay.active {
            display: flex;
            opacity: 1;
            pointer-events: all;
        }
        .mobile-nav-overlay .nav-link-item {
            font-size: 1.8rem; /* Adjusted font size */
            font-weight: 700;
            color: var(--text-dark);
            text-decoration: none;
            transition: color 0.3s ease, transform 0.2s ease;
        }
        .mobile-nav-overlay .nav-link-item:hover {
            color: var(--primary-blue);
            transform: scale(1.05); /* Adjusted scale */
        }

        /* Multi-step form specific styles */
        .form-step {
            display: none; /* Hidden by default */
            animation: fadeIn 0.5s ease-out;
        }
        .form-step.active {
            display: block;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* New Progress Indicator Styling (Tab-like) */
        .progress-steps-container {
            display: flex;
            justify-content: space-between;
            align-items: stretch; /* Stretch items to fill height if needed */
            margin-bottom: 2.5rem;
            width: 100%;
            position: relative;
            gap: 0.5rem; /* Gap between tabs */
        }

        .progress-step-item {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.8rem 1.2rem; /* Padding for the tab itself */
            border-radius: 0.7rem; /* Rounded corners for tabs */
            background-color: var(--border-light);
            color: var(--text-medium);
            font-weight: 600;
            font-size: 0.95rem;
            cursor: default; /* Not directly clickable to change steps */
            flex: 1; /* Distribute space evenly */
            transition: all 0.3s ease;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); /* Subtle inner shadow */
            position: relative; /* Needed for pseudo-elements */
            overflow: hidden; /* Ensure border-bottom doesn't overflow rounded corners */
        }

        .progress-step-number {
            font-weight: 700;
            font-size: 1.1rem; /* Slightly larger number */
            margin-right: 0.5rem; /* Space between number and text */
            transition: color 0.3s ease;
        }

        .progress-step-text {
            font-weight: 500;
            font-size: 0.95rem;
            transition: color 0.3s ease;
        }

        /* Active and Completed states with enhanced styling */
        .progress-step-item.active {
            background-color: var(--primary-blue);
            color: white;
            box-shadow: 0 0.3rem 0.8rem rgba(0, 123, 255, 0.25); /* Slightly stronger shadow */
            transform: translateY(-2px); /* Slight lift for active */
        }

        .progress-step-item.active .progress-step-number,
        .progress-step-item.active .progress-step-text {
            color: white;
        }

        .progress-step-item.completed {
            background-color: var(--accent-green);
            color: white;
            box-shadow: 0 0.3rem 0.8rem rgba(46, 204, 113, 0.25); /* Slightly stronger shadow */
        }

        .progress-step-item.completed .progress-step-number,
        .progress-step-item.completed .progress-step-text {
            color: white;
        }

        /* Add a subtle bottom border/highlight for active/completed */
        .progress-step-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px; /* Thickness of the highlight */
            background-color: transparent;
            transition: background-color 0.3s ease;
        }

        .progress-step-item.active::after {
            background-color: var(--primary-blue);
        }

        .progress-step-item.completed::after {
            background-color: var(--accent-green);
        }


        .video-link-container {
            margin-top: 1.5rem; /* Adjusted margin */
            margin-bottom: 1.5rem; /* Adjusted margin */
            padding: 1.2rem; /* Adjusted padding */
            background-color: rgba(var(--primary-blue), 0.05);
            border-radius: 0.8rem; /* Adjusted roundedness */
            border: 1px solid rgba(var(--primary-blue), 0.1);
            box-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, 0.04); /* Adjusted shadow */
            transition: all 0.3s ease;
        }
        .video-link-container:hover {
            transform: translateY(-2px); /* Adjusted lift */
            box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.08);
        }
        .video-link-container a {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.7rem; /* Adjusted gap */
            font-size: 1rem; /* Adjusted font size */
            font-weight: 700;
            color: var(--primary-blue);
            text-decoration: none;
        }
        .video-link-container a i {
            font-size: 1.3rem; /* Adjusted icon size */
            color: var(--accent-red); /* Use a vibrant color for the video icon */
        }
        .video-link-container a:hover {
            color: #0056b3;
            text-decoration: underline;
        }


        /* Responsive adjustments */
        @media (max-width: 1199.98px) { /* Changed to d-xl-flex */
            .floating-nav {
                display: none; /* Hide floating nav on smaller screens */
            }
            .mobile-toggle-btn {
                display: flex; /* Show mobile toggle button */
            }
            .page-section {
                padding: 1rem; /* Adjusted padding */
            }
            .auth-card {
                padding: 2.5rem; /* Adjusted padding */
                border-radius: 1rem; /* Adjusted roundedness */
                box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.08); /* Adjusted shadow */
                max-width: 95%;
            }
            .auth-card .logo-small {
                width: 60px; /* Adjusted logo size */
                height: 60px;
                margin-bottom: 1.5rem; /* Adjusted margin */
            }
            .auth-card h2 {
                font-size: 2rem; /* Adjusted font size */
                margin-bottom: 1rem; /* Adjusted margin */
            }
            .auth-card p.subtitle {
                font-size: 0.95rem; /* Adjusted font size */
                margin-bottom: 1.8rem; /* Adjusted margin */
            }
            .form-label, .form-control, .btn-primary, .link-text, .social-login-btn {
                font-size: 0.9rem; /* Adjusted font size */
            }
            .form-control {
                padding: 0.8rem 1rem; /* Adjusted padding */
            }
            .btn-primary {
                padding: 1rem 1.5rem; /* Adjusted padding */
            }
            .social-login-btn {
                padding: 0.8rem 1.2rem; /* Adjusted padding */
            }
            .video-link-container {
                padding: 0.8rem; /* Adjusted padding */
            }
            .video-link-container a {
                font-size: 0.9rem; /* Adjusted font size */
            }
            .video-link-container a i {
                font-size: 1.1rem; /* Adjusted icon size */
            }
            .progress-step-item {
                padding: 0.6rem 0.8rem;
                font-size: 0.85rem;
            }
            .progress-step-number {
                font-size: 1rem;
                margin-right: 0.4rem;
            }
            .progress-step-text {
                font-size: 0.8rem;
            }
        }

        @media (max-width: 576px) {
            .mobile-toggle-btn {
                width: 45px; /* Further reduced size */
                height: 45px;
                font-size: 1.1rem; /* Further reduced font size */
                bottom: 1rem; /* Further adjusted position */
                right: 1rem; /* Further adjusted position */
            }
            .auth-card {
                padding: 2rem; /* Further reduced padding */
                border-radius: 0.8rem; /* Further adjusted roundedness */
            }
            .auth-card .logo-small {
                width: 50px; /* Further reduced logo size */
                height: 50px;
                margin-bottom: 1rem; /* Further adjusted margin */
            }
            .auth-card h2 {
                font-size: 1.6rem; /* Further reduced font size */
            }
            .auth-card p.subtitle {
                font-size: 0.85rem; /* Further reduced font size */
                margin-bottom: 1.5rem; /* Further adjusted margin */
            }
            .social-login-btn {
                flex-direction: column;
                gap: 0.3rem;
                padding: 0.6rem;
            }
            .social-login-btn i {
                margin-right: 0;
                margin-bottom: 0.2rem;
            }
            .progress-step-item {
                padding: 0.5rem 0.6rem;
                font-size: 0.75rem;
            }
            .progress-step-number {
                font-size: 0.9rem;
                margin-right: 0.3rem;
            }
            .progress-step-text {
                font-size: 0.7rem;
            }
        }