input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #f8f9fa inset !important;
}


/* --- 1. Main Layout Setup --- */
/* This prevents the entire page from scrolling */
html, body {
    height: 100%;
    overflow: hidden; /* CRITICAL: Disables the main page scrollbar */
}


/* --- 2. Background Image Styling --- */
.auth-bg-image {
    background-image: url('/img/aividaBG2.png');
    background-size: cover;
    background-position: center;
}

/* --- 3. THE KEY FIX: Independent Scrolling Columns --- */
.auth-form-column {
    /* 
       This tells the right column to take up all available height and
       creates its OWN vertical scrollbar if the content inside is too tall.
    */
    height: 100vh;
    overflow-y: auto;
}

/* --- 4. Floating Label with Icon Styling (from previous steps) --- */
.form-floating .form-control,
.form-floating .form-select {
    padding-left: 3rem;
}

.form-floating > label {
    padding-left: 3rem;
}

/* Style for the icon itself inside the floating group */
.form-floating .input-group-icon {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3; /* Ensure icon is clickable if needed */
    color: var(--ins-secondary-color);
}

/* When the input is focused or has a value, keep the icon colored */
.form-floating .form-control:focus ~ .input-group-icon,
.form-floating .form-control:not(:placeholder-shown) ~ .input-group-icon {
    color: var(--ins-purple);
}

.form-floating .form-control,
.form-floating .form-select {
    /* Add padding on the left to make space for the icon */
    padding-left: 3rem;
}

    .form-floating .form-select:focus ~ .input-group-icon,
    .form-floating .form-select:not(:placeholder-shown) ~ .input-group-icon {
        color: var(--ins-primary);
    }



.otp-input-container input {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 5px;
    border-radius: 0.5rem; /* Softer corners */
    border: 1px solid #d1d5db; /* Light gray border */
}

    .otp-input-container input:focus {
        border-color: #22d3ee; /* Cyan border on focus */
        box-shadow: 0 0 0 0.25rem rgba(34, 211, 238, 0.25);
        outline: 0;
    }

.btn-brand {
    background-color: #22d3ee;
    color: white;
    font-weight: 600;
    padding: 0.75rem 1rem;
}

    .btn-brand:hover {
        background-color: #16a3b8;
        color: white;
    }

.form-floating > .form-control {
    /*background-color: #f8f9fa;  Light Gray Background */
    border: 1px solid #0a5594; /* Darker Border */
    color: #212529;
}

    .form-floating > .form-control:focus {
        background-color: #fff;
        border-color: #6f42c1; /* Purple border on focus to match button */
        box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.15);
    }

.form-floating > label {
    color: #6c757d;
    font-size: 0.9rem;
}

.form-floating > .form-select {
    /*background-color: #f8f9fa;  Light Gray Background */
    border: 1px solid #0a5594; /* Darker Border */
    color: #212529;
}