/* Base body styles, removing the full-page gradient */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            /* Default font for the whole page */
            min-height: 100vh;
            color: #333;
            /* Default text color for the whole page (dark) */
        }

        /* Styles for the LEFT panel (Connect and enjoy the experience) */
        .left-panel-gradient {
            background-color: #EBF4FA !important;

            /* White text for this panel */
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* Vertically center content */
            align-items: center;
            /* Horizontally center content */
            text-align: center;
            padding: 2rem;
            /* Add padding for content */
            min-height: 100vh;
            /* Ensure it takes full height */
        }

        .left-panel-gradient h2,
        .left-panel-gradient h3,
        .left-panel-gradient small {
            color: rgb(46, 125, 211) !important;
            /* Force white text */
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
            /* Text shadow */
            font-weight: 700;
            /* Bold for main title */
        }

        .left-panel-gradient h2 {
            font-size: 2.5em;
            /* Large size for main title */
            margin-bottom: 10px;
            margin-top: 5rem;
            /* Adjusted to push down from navbar */
        }

        .left-panel-gradient h3 small {
            /* Specifically for the "Sign Up Free" text */
            font-size: 1.5em;
            /* Larger text inside the button */
            font-weight: 300;
            /* Lighter weight for this text */
            letter-spacing: 1px;
            margin: 0;
            /* Remove default margin from h3 */
        }

        /* Button styling for the left panel's "Sign Up Free" button */
        .left-panel-gradient .btn.btn-primary {
            /* Targeting the specific button */
            background-color: #fff !important;
            /* White background */
            color: #333 !important;
            /* Dark text */
            border: none;
            border-radius: 8px;
            /* Slightly rounded corners */
            padding: 15px 30px;
            /* Increased padding for larger button */
            font-size: 1.1em;
            /* Font size matching the reference */
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            /* Subtle shadow */
            margin-top: 30px !important;
            /* Ensure good spacing */
        }

        .left-panel-gradient .btn.btn-primary:hover {
            background-color: #f0f0f0 !important;
            /* Lighter on hover */
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
            /* More pronounced shadow on hover */
        }

        /* Ensure the Synesti login image on the left is positioned correctly */
        .left-panel-gradient .d-none.d-xl-flex img {
            max-width: 80%;
            /* Adjust size if needed */
            height: auto;
            margin-top: 4rem;
            /* Space between button and image */
        }

        /* --- Right Panel Styles (Login/Selection) --- */
        /* Revert the main container for the login/selection panel to its original styling */
        .authentication-login {
            background-color: #fff !important;
            /* Keep white background for the login form */
            color: #333 !important;
            /* Default dark text color for this section */
            box-shadow: none !important;
            /* Remove any previous custom box shadow */
            /* Ensure alignment for original content */
            display: flex;
            /* Flexbox for internal centering */
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            /* Center the text */
            padding: 4rem 2rem;
            /* Restore original padding */
        }

        /* Specific adjustments to ensure elements within the RIGHT panel are dark/original */
        .authentication-login h2,
        .authentication-login h1,
        .authentication-login p.translate,
        .authentication-login .form-label,
        .authentication-login .form-check-label,
        .authentication-login .text-dark {
            color: #333 !important;
            /* Ensure text color is dark */
            text-shadow: none !important;
            /* Remove text shadow */
        }

        .authentication-login .text-primary {
            color: #007bff !important;
            /* Restore Bootstrap primary blue for links */
        }

        /* Specific styles for the "Choose your login type" section (when $showLoginForm is false) */
        .authentication-login .position-relative.text-center.my-4 p {
            background-color: #fff !important;
            /* Ensure background of "Choose your login type" text is white */
            color: #333 !important;
            /* Ensure text is dark */
        }

        .authentication-login .position-relative.text-center.my-4 span.border-top {
            border-color: #dee2e6 !important;
            /* Restore Bootstrap border color */
        }

        /* Restore original button styles for the right panel's selection buttons */
        .authentication-login .btn.btn-primary.btn-lg {
            background-color: #007bff !important;
            /* Bootstrap primary blue */
            border-color: #007bff !important;
            color: #fff !important;
            box-shadow: none !important;
            /* Remove custom shadow */
            border-radius: .375rem !important;
            /* Bootstrap default radius */
            padding: .5rem 1rem !important;
            /* Bootstrap default padding */
            font-weight: 400 !important;
            /* Bootstrap default font weight */
        }

        .authentication-login .btn.btn-primary.btn-lg:hover {
            background-color: #0056b3 !important;
            border-color: #0056b3 !important;
        }

        .authentication-login .btn.btn-secondary.btn-lg {
            background-color: #6c757d !important;
            /* Bootstrap secondary gray */
            border-color: #6c757d !important;
            color: #fff !important;
            box-shadow: none !important;
            border-radius: .375rem !important;
            padding: .5rem 1rem !important;
            font-weight: 400 !important;
        }

        .authentication-login .btn.btn-secondary.btn-lg:hover {
            background-color: #5c636a !important;
            border-color: #5c636a !important;
        }

        .authentication-login hr {
            border-color: rgba(0, 0, 0, 0.1) !important;
            /* Restore default hr color */
        }

        /* Ensure the Synesti logo on the right (login form) is dark */
        .authentication-login img.dark-logo {
            filter: none;
            /* Make sure it's not inverted or colored by accident */
        }

        /* Error message style for the right panel (login form) */
        .authentication-login .text-danger {
            color: #dc3545 !important;
            /* Bootstrap danger red */
            text-shadow: none !important;
        }