*{margin:0;padding:0;box-sizing:border-box;font-family:"Poppins",sans-serif;}
body {
    background: url('../img/bg_school_facade.png') no-repeat center center fixed;
    background-size: cover;
    font-family: "Poppins", sans-serif;

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.40); 
    backdrop-filter: blur(2px);
    z-index: -1;
}

.login-card {
    width:100%;max-width:420px;
    background:#ffffffdd;
    padding:35px 30px;border-radius:18px;
    box-shadow:0 10px 35px rgba(0,0,0,0.25);
    text-align:center;
}

.logo {
    width:90px;height:90px;margin-bottom:10px;
}

h2 {margin-bottom:5px;font-size:26px;}
.subtext {font-size:14px;color:#555;margin-bottom:15px;}

/* password wrapper for eye icon */
.password-wrapper {
    width:100%;
    position:relative;
}

.password-wrapper input {
    width:100%;
    padding:12px 45px 12px 12px; 
    border:1.5px solid #ddd;
    border-radius:10px;
}

.password-wrapper i {
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#6f6f6f;
    font-size:18px;
}

input {
    width:100%;
    padding:12px;
    margin:10px 0;
    border:1.5px solid #ddd;
    border-radius:10px;
}

button {
    width:100%;padding:12px;margin-top:15px;
    background:#1A49D3;color:white;border:none;
    border-radius:10px;font-size:16px;
}

.error {
    background:#ffe5e5;border-left:4px solid #e63946;
    padding:10px;margin-bottom:10px;text-align:left;color:#b71c1c;
}
/* Hide browser default password reveal icon */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-textfield-decoration-container {
    display: none !important;
}
/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 480px) {

    body {
        height: auto;
        min-height: 100vh;
        padding: 20px;
        align-items: flex-start;
    }

    .login-card {
        padding: 25px 20px;
        border-radius: 16px;
    }

    .logo {
        width: 70px;
        height: 70px;
        margin-bottom: 8px;
    }

    h2 {
        font-size: 22px;
    }

    .subtext {
        font-size: 13px;
        margin-bottom: 12px;
    }

    input,
    .password-wrapper input {
        padding: 11px;
        font-size: 14px;
    }

    .password-wrapper input {
        padding-right: 42px;
    }

    .password-wrapper i {
        font-size: 17px;
        right: 12px;
    }

    button {
        padding: 11px;
        font-size: 15px;
        border-radius: 10px;
    }

    .error {
        font-size: 13px;
        padding: 9px;
    }
}