/* -------------------------------------------------
   Responsive login card – mobile first
-------------------------------------------------- */
body.bg-bright-blue {
    background-color: #87cefa;
}



.login-card {
    width: 150%;
   /* max-width: 500px; /* You can adjust or remove this */
    border-radius: 16px;
    background-color: #ffffff;
    border: 1px solid #b3dfff;
    margin: auto; /* Center horizontally */
}


/* Medium / desktop – allow a bit wider */
@media (min-width: 768px) {
    .login-card {
        max-width: 500px;     /* wider on tablets/desktop */
        padding: 2.5rem 2rem;
    }
}

/* Make the primary button full-width inside the card (better tap target) */
.login-card .btn {
    width: 100%;
}

/* Headings tight spacing */
.login-card h3   { margin: .4rem 0 .8rem; }
.login-card h2   { margin: .25rem 0 .4rem; }

/* Keep existing colour helpers */
.text-primary  { color: #006bb3 !important; }
.link-primary  { color: #0056b3; text-decoration: none; }
.link-primary:hover { text-decoration: underline; }


/* Force full-width card on phones – overrides any Bootstrap defaults  */
@media (max-width: 768px) {
    .login-card {
        width: 95vw !important;   /* 95 % of viewport */
        max-width: 500px !important; /* raise or remove as you like */
        margin: 1.5rem auto !important;
        padding: 2rem 1.25rem !important;
    }
}