/* Global styles */
body {
    overflow-x: hidden; /* Prevent horizontal scroll */
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Add Public Sans */
    background-color: #FFFFFF; /* Ensure white background */
}

/* Left side styling */
.left-column {
    position: relative; /* Needed for absolute positioning of children */
    overflow: hidden; /* Prevent images from overflowing */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    /*background: linear-gradient(to bottom, #FFFFFF 0%, #F8F9FA 70%, #F8F9FA 100%); /* Match background */
    background: #f8f7fa
}

.logo-container {
    /* Default styles (Mobile-first) */
    position: relative; /* Or static, depending on desired flow behavior */
    display: block;
    align-items: center;
    padding: 0px !important;
    padding-bottom: 50px !important;
    /* top: 2rem; Remove - only for absolute */
    /* left: 2rem; Remove - only for absolute */
}

/* Desktop specific styles */
@media (min-width: 768px) {
    .logo-container {
        position: absolute;
        display: flex;
        top: 2rem;
        left: 2rem;
    }
}

.logo-svg {
     width: 36px; /* Adjusted size */
     height: 36px;
}

.logo-text {
    margin-left: 0.75rem;
    font-size: 1.35rem; /* Slightly larger */
    font-weight: 600; /* Bolder */
    color: #444050 !important; /* Updated color */
    font-weight: 600 !important;
}

/* Remove placeholder SVG styles */
/* .main-placeholder-svg { ... } */

/* Styling for the actual images */
#auth-illustration {
    max-height: 67%; /* Adjust size as needed, relative to parent */
    max-width: 67%;
    z-index: 2; /* Ensure illustration is above the shape */
    position: relative; /* Keep it in the flex flow initially */
    bottom: -2%; /* Nudge slightly down to align with shape */
}

#bg-shape {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 35%; /* Maintain aspect ratio */
    max-height: 250px; /* Limit height */
    /*object-fit: cover; /* Cover the width */
    z-index: 1; /* Ensure shape is behind the illustration */
}

/* Right side form styling */
.login-form {
    max-width: 350px; /* Reduced max-width */
    width: 100%;
    border: none; /* Remove border */
    box-shadow: none; /* Remove shadow */
    padding: 2rem; /* Adjust padding if needed */
}

.login-form h2 {
    font-size: 1.6rem; /* Slightly smaller heading */
    color: #444050; /* Updated color */
}

.login-form p {
    font-size: 0.9rem; /* Smaller paragraph text */
    margin-bottom: 1.5rem !important; /* Adjust spacing */
}

.form-label {
    font-size: 0.8rem; /* Smaller label */
    font-weight: 500;
    color: #495057;
}

.form-control {
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
    padding: 0.6rem 0.9rem; /* Adjusted padding for smaller size */
    font-size: 0.8rem; /* Smaller input text */
}

/* Style placeholder text */
.form-control::placeholder {
    color: #adb5bd; /* Muted grey color */
    opacity: 1; /* Override Bootstrap's lower opacity on Firefox */
}

.form-control::-webkit-input-placeholder { /* WebKit browsers */
    color: #adb5bd;
}

.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #adb5bd;
    opacity: 1;
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #adb5bd;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: #adb5bd;
}

.form-control:focus {
    border-color: #86b7fe; /* Bootstrap focus color */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Bootstrap focus shadow */
}

/* Password toggle icon styling (now within input-group-text) */
.input-group-text {
    cursor: pointer;
    background-color: white !important; /* Ensure white background */
    border-left: 0 !important; /* Remove left border from span */
}

.form-control:focus + .input-group-text {
    border-color: #86b7fe; /* Match focus border */
}

/* Keep the relative positioning on the parent */
.position-relative {
    position: relative !important;
}

/* Sign in button */
.btn-primary {
    background-color: #7367f0;
    border-color: #7367f0;
    border-radius: 0.375rem;
    padding: 0.6rem 1rem; /* Adjusted padding */
    font-size: 0.9rem; /* Smaller button text */
    font-weight: 500;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #6254e8; /* Slightly darker purple on hover/focus */
    border-color: #5e4fe6;
    box-shadow: 0 0 0 0.25rem rgba(115, 103, 240, 0.5); /* Focus shadow matching the color */
}

/* Error message styling */
#errorMessage.alert-danger {
    background-color: #fdeaea; /* Light pink background */
    color: #ea5455; /* Red text color */
    border: 1px solid #fce0e0; /* Lighter red border */
    border-radius: 0.375rem;
    font-size: 0.875rem;
    margin-top: 1rem; /* Add space above the form */
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
}

/* Specific styling for the left side background if needed */
.bg-light {
    background-color: #f8f9fa !important;
}

/* Adjust SVG positioning if necessary */
.main-placeholder-svg {
    max-width: 80%;
    height: auto;
}