:root {
    --green: #32d06a;
    --orange: #ff7600;
    --input-bg: #f7fafc;
    --input-border: #e2e8f0;
    --danger: #de3641;
}

.login-main {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--gray-bg, #f7f9fb);
    padding: 2em 1em;
}

.login-card {
    background: #fff;
    box-shadow: 0 0.11em 1.3em rgba(30,34,37,0.10);
    border-radius: 1.1em;
    padding: 2.2em 1.3em 2.4em 1.3em;
    width: 100%;
    max-width: 23em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-title {
    font-size: 1.5em;
    font-weight: 800;
    text-align: center;
    margin-bottom: 1.5em;
    letter-spacing: -0.01em;
    color: #23272f;
}

.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.2em;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.38em;
}

.login-form label {
    font-size: 1em;
    color: #374151;
    font-weight: 600;
    margin-bottom: 0.13em;
}

.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="tel"],
.login-form input[type="password"] {
    width: 100%;
    padding: 0.75em 1em;
    border-radius: 0.7em;
    border: 0.09em solid var(--input-border);
    background: var(--input-bg);
    font-size: 1.09em;
    transition: border 0.14s;
    outline: none;
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
    border: 0.09em solid var(--green);
}

.form-error {
    color: var(--danger);
    font-size: 0.97em;
    margin-top: 0.13em;
}

.form-error-multi {
    color: var(--danger);
    font-size: 1em;
    margin-bottom: 1em;
    text-align: center;
}
.form-error-multi ul {
    margin: 0 0 0 1em;
    padding: 0;
    text-align: left;
}
.form-error-multi li {
    list-style: disc inside;
    margin-bottom: 0.13em;
}

.btn-login {
    background: var(--green);
    color: #fff;
    font-weight: 700;
    font-size: 1.11em;
    border: none;
    border-radius: 2em;
    padding: 0.95em 0;
    cursor: pointer;
    box-shadow: 0 0.11em 0.45em rgba(255, 118, 0, 0.08);
    margin-top: 0.2em;
    transition: background 0.13s;
}

.btn-login:hover, .btn-login:focus {
    background: #045208;
}

.oauth-section {
    width: 100%;
    text-align: center;
    margin: 2em 0 0.7em 0;
}

.oauth-label {
    color: #8492a6;
    font-size: 1em;
    margin-bottom: 0.7em;
}

.oauth-placeholder {
    /* Style this or add OAuth buttons here */
    min-height: 2.5em;
    margin-bottom: 0.3em;
}

.login-extra {
    text-align: center;
    margin-top: 1em;
}

.login-extra a {
    color: var(--green);
    font-weight: 500;
    text-decoration: underline;
    transition: color 0.14s;
}
.login-extra a:hover {
    color: var(--orange);
}

/* Responsive for larger screens */
@media (min-width: 34em) {
    .login-card {
        padding: 2.7em 2.3em 2.9em 2.3em;
        max-width: 27em;
    }
    .login-title {
        font-size: 1.7em;
    }
}


.password-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.password-input-wrapper input[type="password"],
.password-input-wrapper input[type="text"] {
    width: 100%;
    padding-right: 2.5em;
}

.toggle-password {
    width: 2em;
    height: 2em;
    min-width: 2em;
    min-height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #8492a6;
    position: absolute;
    right: 0.6em;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
    z-index: 2;
    transition: color 0.15s, opacity 0.15s;
    padding: 0; /* Remove default button padding */
}

.toggle-password img {
    width: 1.4em;
    height: 1.4em;
    display: block;
}

.toggle-password:hover,
.toggle-password:focus {
    color: var(--orange, #ff7600);
    opacity: 1;
    outline: none;
}