/* Login Page Specific Styles */
.login-container {
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: center;
    padding: 20px 0; /* Add some vertical padding */
}

.login-card-wrapper {
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    width: 100%; /* Ensure it takes full width of container */
    max-width: 1200px; /* Set a reasonable max-width */
    margin: 0 auto; /* Center the card */
}

/* Brand Section Styles - White background with brown text */
.login-brand-section {
    background: #ffffff; /* Plain white background */
    color: #9E5E18; /* Brown text for readability */
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #f0f0f0; /* Subtle separator */
}

.brand-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #9E5E18; /* Dark brown for better contrast */
}

.brand-tagline {
    font-size: 1rem;
    margin-bottom: 2rem;
    color: #9E5E18; /* Medium brown for secondary text */
}

.brand-features {
    margin-top: 2rem;
}

.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

    .feature-item i {
        font-size: 1.2rem;
        margin-right: 10px;
        width: 30px;
        height: 30px;
        background: rgba(93, 64, 55, 0.1); /* Very subtle brown background */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #9E5E18; /* Brown color for icons */
    }

/* Logo container styling for better visibility on white */
.logo-container {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .logo-container img {
        max-width: 100%; /* Responsive image */
        height: auto;
        width: auto; /* Allow natural width */
        max-height: 150px; /* Limit height on smaller screens */
    }

/* Form Section Styles */
.login-form-section {
    flex: 1;
    padding: 40px;
    background-color: #ffffff;
    align-content: center;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevent content from forcing width */
}

.form-header {
    text-align: center;
    margin-bottom: 2rem;
}

    .form-header h2 {
        color: #3E2723; /* Dark brown for headings */
        font-weight: 600;
    }

/* Form wrapper to prevent compression */
.form-wrapper {
    width: 100%;
    max-width: 400px; /* Maximum width for the form */
    margin: 0 auto; /* Center the form */
}

/* Input styling with brown accents */
.form-control:focus {
    border-color: #8D6E63;
    box-shadow: 0 0 0 0.25rem rgba(141, 110, 99, 0.25);
}

.input-group-text {
    background-color: #EFEBE9; /* Very light brown background */
    border-color: #D7CCC8;
    color: #5D4037; /* Brown for icon */
}

/* Button styling with brown theme */
.btn-primary {
    background-color: #795548;
    border-color: #5D4037;
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: #6D4C41;
        border-color: #3E2723;
    }

.btn-outline-secondary {
    color: #795548;
    border-color: #D7CCC8;
}

    .btn-outline-secondary:hover {
        background-color: #EFEBE9;
        color: #5D4037;
        border-color: #BCAAA4;
    }

/* Form text in labels and other elements */
.form-label, .form-check-label {
    color: #5D4037; /* Brown text for form labels */
}

.text-danger {
    color: #C62828 !important; /* A red that works well with brown */
}

/* Divider for "OR" text */
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.5rem 0;
    color: #8D6E63; /* Brown color for divider text */
}

    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #D7CCC8; /* Light brown line */
    }

    .divider span {
        padding: 0 1rem;
        font-size: 0.9rem;
        text-transform: uppercase;
    }

/* Social Login Buttons */
.btn-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    margin: 5px;
    transition: all 0.2s;
    min-width: 180px;
}

    .btn-social[value="Google"] {
        background-color: #DB4437;
    }

    .btn-social[value="Facebook"] {
        background-color: #3b5998;
    }

    .btn-social[value="Microsoft"] {
        background-color: #2f2f2f;
    }

    .btn-social[value="Twitter"] {
        background-color: #1DA1F2;
    }

    .btn-social i {
        margin-right: 8px;
    }

    .btn-social:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }

/* Account links */
.account-links a {
    color: #795548; /* Brown links match the theme */
    text-decoration: none;
}

    .account-links a:hover {
        text-decoration: underline;
        color: #3E2723; /* Darker brown on hover */
    }

/* Form check input (checkbox) */
.form-check-input:checked {
    background-color: #795548;
    border-color: #5D4037;
}

/* Improved responsive adjustments */
/*@media (max-width: 1199.98px) {
    .login-card-wrapper {
        max-width: 100%;*/ /* Slightly reduce max width on medium-large screens */
    /*}

    .logo-container img {
        max-width: 280px;
    }
}*/

@media (max-width: 991.98px) {
    .login-card-wrapper {
        flex-direction: column;
        max-width: 600px; /* Better width for vertical layout */
    }

    .login-brand-section {
        padding: 30px;
        border-right: none;
        border-bottom: 1px solid #EFEBE9; /* Light brown border */
    }

    .brand-content {
        text-align: center;
    }

    .feature-item {
        justify-content: center;
    }

    .login-form-section {
        padding: 30px;
    }

    /* Make sure form doesn't get too wide */
    .form-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .login-card-wrapper {
        max-width: 90%;
    }

    .brand-features {
        display: none; /* Hide features on small screens to save space */
    }
}

@media (max-width: 575.98px) {
    .login-container {
        padding: 15px;
    }

    .login-card-wrapper {
        border-radius: 8px; /* Slightly smaller radius on small screens */
        max-width: 100%;
    }

    .login-form-section,
    .login-brand-section {
        padding: 25px 15px;
    }

    .brand-title {
        font-size: 1.75rem; /* Slightly smaller title on small screens */
    }

    .logo-container img {
        max-width: 220px; /* Smaller logo on very small screens */
        max-height: 100px;
    }

    /* Ensure form inputs have enough room */
    .input-group {
        flex-wrap: nowrap;
    }

    /* Make sure buttons don't get too small */
    .btn-primary {
        white-space: nowrap;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Ensure form doesn't compress at any screen size */
.form-group,
.input-group,
.form-floating {
    min-width: 0;
    width: 100%;
    margin-bottom: 1rem;
}

/* Make sure the form doesn't compress by ensuring minimum width for inputs */
.form-control {
    min-width: 0;
}

/* Specific fix for very small screens */
@media (max-width: 359px) {
    .login-container {
        padding: 10px;
    }

    .login-form-section,
    .login-brand-section {
        padding: 20px 10px;
    }

    .brand-tagline {
        display: none; /* Hide tagline on very small screens */
    }
}