*{
    box-sizing: border-box;
}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;

    background:
    linear-gradient(
        rgba(30,144,255,0.45),
        rgba(0,0,0,0.35)
    ),
    url("../img/login_cover.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:15px;
}

/* ================= LOGIN BOX ================= */

.login-box{
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    padding:25px;
    width:90%;
    max-width:350px;
    border-radius:10px;
    box-shadow:
    0 10px 35px rgba(0,0,0,0.25);
    text-align:center;
    overflow:hidden;
}

.login-box h2{
    margin-bottom:25px;
}

/* ================= INPUTS ================= */

label{
    display:block;
    text-align:left;
    margin-top:15px;
    font-size:14px;
}

input{
    width:100%;
    padding:10px;
    margin-top:5px;
    border-radius:5px;
    border:1px solid #ccc;
}

/* ================= BUTTON ================= */

button{
    width:100%;
    margin-top:20px;
    padding:10px;
    background:#1e90ff;
    color:white;
    border:none;
    border-radius:5px;
    cursor:pointer;
    font-size:15px;
    min-height:45px;
}

button:hover{
    background:#1877d4;
}

/* ================= CREATE ACCOUNT ================= */

.create-account{
    margin-top:15px;
    font-size:14px;
    color:#1e90ff;
    cursor:pointer;
}

.create-account:hover{
    text-decoration:underline;
}

/* ================= FIX FOR MOBILE FRIENDLY ================= */

input, select{
    width:100%;
    padding:12px;
    margin-top:10px;
    border-radius:6px;
    border:1px solid #ccc;
    font-size:16px; /* prevents zoom on mobile */
}

.row{
    display:flex;
    gap:10px;
}

@media (max-width: 600px){
    .row{
        flex-direction:column;
    }
}

/* ================= SHOW PASSWORD ================= */

.show-password-wrapper{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:10px;
    margin-bottom:15px;
    font-size:14px;
    justify-content:flex-start;
}

.show-password-wrapper input[type="checkbox"]{
    width: auto;
    margin: 0;
    cursor: pointer;
}

.show-password-wrapper label{
    margin: 0;
    cursor: pointer;
}

/* ================= EXTRA SMALL DEVICES ================= */

@media (max-width: 400px){

    .login-box{
        padding:20px;
    }

    .login-box h2{
        font-size:20px;
    }

    button{
        font-size:14px;
    }
}

/* ================= LOGO ================= */

.dole-logo{
    width:90px;
    height:90px;
    object-fit:contain;
    display:block;
    margin:0 auto 15px auto;
}

.login-box h2{
    color:#0b4ea2;
    font-size:24px;
    margin-bottom:25px;
}

/* ================= ACCOUNT LINKS ================= */

.account-links{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    margin-top:18px;
}

.link-btn{
    background:none;
    border:none;
    color:#007bff;
    cursor:pointer;
    font-size:14px;
    padding:0;
    width:auto;
    min-width:140px;
    text-align:center;
    margin:0;
}

.link-btn:hover{
    text-decoration:underline;
    background:none;
}