.login-container {
    display: flex;
    min-height: 100vh;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

.login-left {
    flex: 1;
    background: linear-gradient(90deg, #88448F 0%, #328BC8 33%, #62A056 66%, #5FA056 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.login-left::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 267px;
    bottom: 0;
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='491' height='438' viewBox='0 0 491 438' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.2' fill-rule='evenodd' clip-rule='evenodd' d='M101.926 0C82.1987 0 63.567 12.0558 54.7991 29.5915L0 140.286H227.964V0H101.926ZM263.036 0V140.286H491L435.105 29.5915C426.337 12.0558 407.705 0 387.978 0H263.036ZM420.857 491C459.217 491 491 460.313 491 420.857V175.357H0V420.857C0 460.313 30.6875 491 70.1429 491H420.857ZM273.399 195.983L417.825 251.188L392.555 367.041L252.131 307.565L273.399 195.983ZM297.076 350.212L174.859 280.722L139.957 380.357L260.318 453.07L297.076 350.212ZM132.24 358.387L105.999 335.558L57.2795 403.243L137.384 470.928L170.239 423.034L120.189 392.802L132.24 358.387Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
    pointer-events: none;
}

.welcome-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 67px;
    font-weight: 300;
    line-height: 100%;
    letter-spacing: 0px;
    color: white;
    z-index: 1;
    max-width: 500px;
}

.login-right {
    flex: 1;
    background: #F8F9FA;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
}

.login-right::before {
    content: '';
    position: absolute;
    width: 135px;
    height: 150px;
    top: 0;
    right: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='190' height='212' viewBox='0 0 190 212' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.2'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M44.0089 0C35.4911 0 27.4464 5.20536 23.6607 12.7768L0 60.5714H98.4286V0H44.0089ZM113.571 0V60.5714H212L187.866 12.7768C184.08 5.20536 176.036 0 167.518 0H113.571ZM181.714 212C198.277 212 212 198.75 212 181.714V75.7143H0V181.714C0 198.75 13.25 212 30.2857 212H181.714ZM118.046 84.0876L180.405 107.924L169.495 157.945L108.863 132.265L118.046 84.0876ZM128.269 150.679L75.4992 120.676L60.4297 163.695L112.398 195.09L128.269 150.679ZM57.0976 154.209L45.7675 144.352L24.7317 173.577L59.3185 202.801L73.5045 182.122L51.8943 169.069L57.0976 154.209Z' fill='%23824C9E'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M44.0089 0C35.4911 0 27.4464 5.20536 23.6607 12.7768L0 60.5714H98.4286V0H44.0089ZM113.571 0V60.5714H212L187.866 12.7768C184.08 5.20536 176.036 0 167.518 0H113.571ZM181.714 212C198.277 212 212 198.75 212 181.714V75.7143H0V181.714C0 198.75 13.25 212 30.2857 212H181.714ZM118.046 84.0876L180.405 107.924L169.495 157.945L108.863 132.265L118.046 84.0876ZM128.269 150.679L75.4992 120.676L60.4297 163.695L112.398 195.09L128.269 150.679ZM57.0976 154.209L45.7675 144.352L24.7317 173.577L59.3185 202.801L73.5045 182.122L51.8943 169.069L57.0976 154.209Z' fill='url(%23paint0_linear_4553_6600)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_4553_6600' x1='0' y1='212' x2='212' y2='212' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2388448F'/%3E%3Cstop offset='0.5098' stop-color='%23328BC8'/%3E%3Cstop offset='0.999' stop-color='%2362A056'/%3E%3Cstop offset='1' stop-color='%235FA056'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    pointer-events: none;
}

.login-right::after {
    display: none;
}

.login-form-wrapper {
    width: 100%;
    max-width: 400px;
    z-index: 1;
}

.login-logo {
    text-align: center;
    margin-bottom: 3rem;
}

.login-logo img {
    max-width: 280px;
    height: auto;
}

.login-form h2 {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0px;
    color: #302E2C;
    margin-bottom: 1rem;
    text-align: center;
}

.login-email {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.875rem;
    color: #6B7280;
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.login-form-group {
    margin-bottom: 1.5rem;
}

.login-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.875rem;
    color: #302E2C;
    background-color: white;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.login-input:focus {
    outline: none;
    border-color: #2F8CCA;
    box-shadow: 0 0 0 3px rgba(47, 140, 202, 0.1);
}

.login-input::placeholder {
    color: #9CA3AF;
}

.password-wrapper {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #9CA3AF;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle:hover {
    color: #302E2C;
}

.password-toggle .eye-open {
    display: none;
}

.password-toggle .eye-closed {
    display: block;
}

.password-toggle[data-showing="true"] .eye-open {
    display: block;
}

.password-toggle[data-showing="true"] .eye-closed {
    display: none;
}

.login-button {
    width: 100%;
    padding: 0.875rem 1rem;
    background-color: #302E2C;
    color: white;
    border: none;
    border-radius: 4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    margin-top: 1rem;
}

.login-button:hover {
    background-color: #1a1918;
}

.login-button:active {
    background-color: #000;
}

.login-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.875rem;
}

.login-links a {
    color: #2F8CCA;
    text-decoration: none;
}

.login-links a:hover {
    text-decoration: underline;
}

.login-register {
    text-align: center;
    margin-top: 3rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.875rem;
    color: #6B7280;
}

.login-register a {
    color: #2F8CCA;
    text-decoration: none;
    font-weight: 600;
}

.login-register a:hover {
    text-decoration: underline;
}

.login-footer {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    color: #6B7280;
    white-space: nowrap;
}

.login-footer a {
    color: #2F8CCA;
    text-decoration: none;
}

.login-footer a:hover {
    text-decoration: underline;
}

.login-error {
    background-color: #FEE2E2;
    border: 1px solid #EF4444;
    color: #991B1B;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.875rem;
}

.login-success {
    background-color: #D1FAE5;
    border: 1px solid #10B981;
    color: #065F46;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.875rem;
}

.validation-message {
    color: #EF4444;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: block;
}

@media (max-width: 768px) {
    .login-container {
        flex-direction: column;
    }

    .login-left {
        min-height: 30vh;
    }

    .welcome-text {
        font-size: 48px;
    }

    .login-right {
        min-height: 70vh;
    }

    .login-footer {
        position: static;
        transform: none;
        margin-top: 2rem;
        white-space: normal;
    }
}