/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Main container */
.container {
    margin-top: 120px; /* Adjust this value based on your navbar height */
    margin-bottom: 20px; /* Add spacing at the bottom */
    display: flex;
    flex-direction: row; /* Default flex direction */
    align-items: center; /* Center the content horizontally */
}

/* Form container (fixed size with styled scrollbar) */
.signup-form-container {
    flex: 1;
    padding: 0.5rem;
    background-color: #e9eff4;
    border-radius: 10px;
    height: 450px; /* Fixed height */
    max-width: 500px; /* Limit the width if needed */
    overflow-y: auto; /* Enable vertical scrolling */
    margin-right: 50px; 
    display: flex;
    flex-direction: column;
    border: solid #003f83;
    padding: 15px 20px;
}

/* Styling the scrollbar for WebKit browsers (Chrome, Safari, newer Edge) */
.signup-form-container::-webkit-scrollbar {
    width: 6px; /* Thin scrollbar */
}

.signup-form-container::-webkit-scrollbar-track {
    background: #e9eff4; /* Same as container background */
    border-radius: 10px;
}

.signup-form-container::-webkit-scrollbar-thumb {
    background: #a0b4c8; /* Light blue-gray color that matches your theme */
    border-radius: 10px;
}

.signup-form-container::-webkit-scrollbar-thumb:hover {
    background: #7a8ea3; /* Darker on hover for better usability */
}

/* For Firefox */
.signup-form-container {
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: #a0b4c8 #e9eff4; /* thumb and track color */
}

/* Image container */
.login-image-div {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.login-image-div img {
    max-width: 160%;
    height: auto;
    object-fit: contain; /* Ensure image fits */
}

/* Form title (smaller) */
h3 {
    text-align: center;
    margin-bottom: 10px; /* Smaller margin */
    color: #223A49;
    font-size: 25px; /* Reduced font size */
}

/* Form groups (smaller spacing) */
.form-group {
    margin-bottom: 8px; /* Reduce gap between fields */
}

/* Labels (smaller and aligned) */
label {
    display: block;
    margin-bottom: 3px; /* Compact labels */
    font-weight: 500;
    font-size: 12px; /* Smaller font */
    text-align: left;
}

/* Inputs and select (smaller fields) */
input, select {
    width: 100%;
    padding: 6px; /* Smaller padding */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px; /* Smaller text */
}

/* Required field indicator */
.required {
    color: red;
}

/* Input group for phone number (smaller) */
.input-group {
    display: flex;
    gap: 5px; /* Reduced gap */
}

#countryCode {
    max-width: 60px; /* Smaller code box */
}

/* Buttons (smaller and visible) */
.btn {
    padding: 6px 10px; /* Smaller padding */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px; /* Smaller font */
    font-weight: 500;
}

.primary-btn {
    background-color: #223A49;
    color: white;
    width: 100%; /* Full width */
    margin-top: -10px; /* Ensure visibility */
}

.success-btn {
    background-color: #28a745;
    color: white;
    margin-top: 15px;
}

/* "Send Email" button (smaller) */
#sendEmailBtn {
    font-size: 10px; /* Smaller text */
    padding: 3px 6px; /* Smaller padding */
    width: auto;
    margin-top: 5px;
}

/* OTP popup (no changes) */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-content {
    background-color: white;
    padding: 15px; /* Reduced padding */
    border-radius: 8px;
    width: 280px; /* Smaller popup */
    position: relative;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

/* Message box (no changes) */
.message-box-container {
    position: fixed;
    top: 10%;
    right: 10%;
    z-index: 9999;
}

.alert {
    padding: 8px 12px; /* Reduced padding */
    border-radius: 4px;
    margin-bottom: 8px;
}

.info-alert {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Utility classes */
.text-center {
    text-align: center;
}

.text-success {
    color: #28a745;
}

.text-danger {
    color: #dc3545;
}

.text-primary {
    color: #007bff;
}

.hidden {
    display: none !important;
}

.mb-4 {
    margin-bottom: 0.8rem; /* Reduced spacing */
}

/* Links */
a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


#previous-button {
    width: auto;
    padding: 4px 8px; /* Smaller padding */
    float: right;
    margin-right: 0;
    margin-bottom: 20px;
}

/* Responsive adjustments (smaller content on small screens) */
@media (max-width: 768px) {
    .container {
        flex-direction: column-reverse; /* Image below form */
        height: auto;
    }
    
    .signup-form-container,
    .login-image-div {
        width: 100%;
        max-height: none; /* Allow full height */
    }
    
    .login-image-div {
        margin-bottom: 15px; /* Space between image and form */
    }
    
    .signup-form-container {
        margin-right: 0;
        margin-top: 15px; /* Space above form */
    }

    /* Ensure image scales well */
    .login-image-div img {
        max-height: 250px; /* Smaller image on mobile */
    }
}

/* Hide image on smaller screens */
@media (max-width: 768px) {
    .login-image-div {
        display: none; /* Hide the image container */
    }

    .signup-form-container {
        margin: 0 auto; /* Center the form horizontally */
        width: 100%; /* Make the form take full width */
    }

    h3 {
        text-align: center; /* Ensure the heading is centered */
    }
}