/* Gradient tuned to match moodi.media hero (teal -> blue -> purple) */
.login-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: #0fa1a4; /* fallback */
    background-image: linear-gradient(135deg, #0fa1a4 0%, #2f6f9d 50%, #7755ad 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* Keep card readable against the gradient */
.login-card {
    border-radius: 1rem;
    background: rgba(255,255,255,0.98);
}

/* Logo sizing inside the card - responsive */
.login-card .login-logo {
    display: block;
    margin: 0 auto 1.25rem;
    width: auto;
    height: 120px; /* default for small screens */
    object-fit: contain;
}

@media (min-width: 768px) {
    .login-card .login-logo {
        height: 140px;
    }
}

@media (min-width: 1200px) {
    .login-card .login-logo {
        height: 160px;
    }
}

/* Customize login button color to HEX #109ea3 */
.login-card .btn-primary {
    background-color: #109ea3;
    border-color: #109ea3;
    color: #ffffff;
    box-shadow: none;
}

.login-card .btn-primary:hover,
.login-card .btn-primary:focus {
    background-color: #0e8b96; /* slightly darker */
    border-color: #0e8b96;
    color: #ffffff;
}

.login-card .btn-primary:active,
.login-card .btn-primary.active {
    background-color: #0c7c86; /* active state */
    border-color: #0c7c86;
    color: #ffffff;
}

.login-card .btn-primary:disabled,
.login-card .btn-primary[disabled] {
    opacity: 0.65;
}

/* Small responsive tweak so card has breathing room on narrow screens */
@media (max-width: 576px) {
    .login-card { margin: 0 1rem; }
}