/* Login Specific Styles */
.login-page {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f2f5;
    padding: 2rem;
}

.login-card {
    display: flex;
    width: 100%;
    max-width: 1000px;
    height: auto;
    min-height: 50vh;
    /* Reduced height as requested (approx 50%) */
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.login-form-side {
    flex: 1;
    padding: 2rem 3rem;
    /* Reduced padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.login-image-side {
    flex: 1;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.9), rgba(10, 88, 202, 0.8)), url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80');
    /* City background */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 3rem;
    position: relative;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
    /* Slanted cut effect if desired, but image shows straight split or rounded card. Image shows simple split. Keeping simple split for now but adding the 'Red circle' equivalent in blue if needed. */
    /* The reference image has a split with the image on the right. No complex clip-path visible, just a clean split in a card styling. */
    clip-path: none;
}

/* Adjust layout for smaller screens */
@media (max-width: 768px) {
    .login-card {
        flex-direction: column;
        height: auto;
    }

    .login-image-side {
        display: none;
        /* Hide image on mobile or move to top */
    }

    .login-form-side {
        padding: 2rem;
    }
}

.brand-logo {
    color: #0d6efd;
    /* Blue */
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-title {
    font-weight: 300;
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 2rem;
    text-align: center;
}

.custom-input-group {
    position: relative;
    margin-bottom: 1.5rem;
}

.custom-input {
    width: 100%;
    padding: 0.8rem 1.5rem 0.8rem 3rem;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    background-color: #fff;
    transition: all 0.3s ease;
}

.custom-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
    outline: none;
}

.input-icon {
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
}

.btn-login {
    width: 100%;
    padding: 0.8rem;
    border-radius: 10px;
    background: #0d6efd;
    /* Blue */
    border: none;
    color: white;
    font-weight: 600;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.4);
    transition: transform 0.2s;
    margin-top: 1rem;
}

.btn-login:hover {
    transform: translateY(-2px);
    background: #0b5ed7;
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.6);
}

.forgot-password {
    text-align: center;
    display: block;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    color: #adb5bd;
    text-decoration: none;
}

.forgot-password:hover {
    color: #0d6efd;
}

.social-login {
    margin-top: 2rem;
    text-align: center;
}

.social-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #adb5bd;
    font-size: 0.85rem;
    margin: 2rem 0;
}

.social-divider::before,
.social-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #dee2e6;
}

.social-divider::before {
    margin-right: .5em;
}

.social-divider::after {
    margin-left: .5em;
}

.social-icons-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    text-decoration: none;
    transition: all 0.3s;
}

.social-icon:hover {
    background-color: #f8f9fa;
    color: #0d6efd;
    border-color: #0d6efd;
}

/* Right side content */
.image-content {
    max-width: 400px;
    z-index: 2;
}

.image-logo {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.image-text {
    font-size: 0.9rem;
    opacity: 0.9;
    line-height: 1.6;
}