/* Existing styles */
#userTypePopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8); /* Start slightly smaller */
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    z-index: 1000;
    opacity: 0; /* Start faded out */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Add transitions */
}

#userTypePopup.show {
    opacity: 1; /* Fade in */
    transform: translate(-50%, -50%) scale(1); /* Scale up to normal */
}

#userTypePopup button {
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.2s ease-in-out; /* Button hover effect */
}

#userTypePopup button:hover {
    background-color: orange; /* Slightly darker on hover */
}

        .main-container {
            display: none; /* Hide the main registration container initially */
        }

        .loader {
            border: 3px solid #f3f3f3; /* Light grey */
            border-top: 3px solid #3498db; /* Blue */
            border-radius: 50%;
            width: 16px;
            height: 16px;
            animation: spin 2s linear infinite;
            display: none; /* Hidden by default */
            margin-left: 8px; /* Adjust spacing */
        }

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

        button.loading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        button.loading span {
            display: none; /* Hide the text when loading */
        }

        button.loading .loader {
            display: inline-block; /* Show the loader when loading */
        }
        .strength-indicator {
            height: 12px;
            margin-top: 6px;
            border-radius: 5px;
            background-color: #eee;
            position: relative;
            overflow: hidden;
            transition: background-color 0.5s ease-in-out;
            box-shadow: inset 0 0 5px #ccc;
        }
        
        .strength-indicator::after {
            content: '';
            display: block;
            height: 100%;
            width: 0%;
            transition: width 0.6s ease, background-color 0.6s ease;
            border-radius: 5px;
        }
        
        .strength-weak::after {
            width: 33%;
            background-color: #ff4d4d;
            box-shadow: 0 0 10px rgba(255, 77, 77, 0.8);
        }
        
        .strength-medium::after {
            width: 66%;
            background-color: #ff9900;
            box-shadow: 0 0 10px rgba(255, 153, 0, 0.8);
        }
        
        .strength-strong::after {
            width: 100%;
            background-color: #00cc66;
            box-shadow: 0 0 10px rgba(0, 204, 102, 0.8);
        }
        .loader-spinner {
            width: 30px;
            height: 30px;
            border: 4px solid #ccc;
            border-top: 4px solid #007bff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 10px auto;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f4f4f4;
            margin: 0;
        }
        .container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            width: 900px;
            max-width: 95%;
            display: flex;
            overflow: hidden;
        }
        .form-container {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }
        /* Centered Image Section */
        .image-container {
            width: 45%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
            background-color: #ddd;
        }
        .carousel {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .carousel img {
            width: 80%;
            height: auto;
            object-fit: contain;
            position: absolute;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        .carousel img.active {
            opacity: 1;
        }
        .form-step {
            display: none;
        }
        .form-step.active {
            display: block;
        }
        h2 {
            text-align: left;
            margin-bottom: 30px;
            color: #333;
        }
        label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: bold;
        }
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="password"] {
            width: calc(100% - 20px);
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 16px;
        }
        button {
            background-color: #1F41BB;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #39D439;
        }
        .navigation-buttons {
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
        }
        .navigation-buttons button {
            flex-grow: 1;
            margin: 0 5px;
        }
        .navigation-buttons button:first-child {
            margin-left: 0;
        }
        .navigation-buttons button:last-child {
            margin-right: 0;
        }
        .progress-bar {
            display: flex;
            justify-content: flex-start;
            margin-bottom: 20px;
            padding: 0 10px;
        }
        .progress-bar-step {
            width: 30px;
            height: 30px;
            background-color: #ccc;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-weight: bold;
            font-size: 14px;
            margin-right: 10px;
        }
        .progress-bar-step.active {
            background-color: #007bff;
        }
        .progress-bar-line {
            height: 5px;
            background-color: #ccc;
            align-self: center;
            flex-grow: 1;
            margin-right: 10px;
        }
        .progress-bar-line.active {
            background-color: #007bff;
        }
        .progress-indicator {
            text-align: left;
            margin-bottom: 10px;
            color: #777;
        }
        .error-message {
            color: red;
            margin-top: 10px;
        }