/* =====================================================
   USER PAGES (login.php / profile.php): neumorphic theme
   Place this file inside the /user/ folder.
===================================================== */
:root{
    --bg:#e4ebe7;
    --nm-light:#ffffff;
    --nm-dark:#c3ccc7;
    --nm-out:    8px 8px 18px var(--nm-dark), -8px -8px 18px var(--nm-light);
    --nm-out-sm: 4px 4px 10px var(--nm-dark), -4px -4px 10px var(--nm-light);
    --nm-out-xs: 3px 3px 7px  var(--nm-dark), -3px -3px 7px  var(--nm-light);
    --nm-in:     inset 4px 4px 9px var(--nm-dark), inset -4px -4px 9px var(--nm-light);
    --nm-in-sm:  inset 2px 2px 5px var(--nm-dark), inset -2px -2px 5px var(--nm-light);
    --green:#3ddc84;--green2:#0aa350;
    --dark:#0b1210;--text:#0f1a16;--muted:#5b6b64;--danger:#ff5470;
    --grad-green:linear-gradient(135deg,#34d57f,#12a352);
    --grad-red:linear-gradient(135deg,#ff6b84,#ff4560);
}

*{box-sizing:border-box;}
html,body{max-width:100%;}
body{
    background:var(--bg);
    color:var(--text);
    font-family:'Nunito',Arial,sans-serif;
    overflow-x:hidden;
    min-height:100vh;
}
a{text-decoration:none;}
img{max-width:100%;}

/* ===== NAVBAR ===== */
.main-navbar{
    background:var(--bg);
    padding:10px 0;
    box-shadow:0 8px 20px rgba(150,165,158,.35);
}
.logo-img{height:55px;width:auto;object-fit:contain;}
@media (max-width:576px){.logo-img{height:42px;}}

/* ===== CARDS (login box + profile box) ===== */
.login-container,
.profile-box{
    background:var(--bg);
    border:none;
    border-radius:28px;
    box-shadow:var(--nm-out);
    padding:30px;
}
.login-container{
    width:100%;
    max-width:430px;
    margin:50px auto 40px;
}
.profile-box{margin-bottom:40px;}

.login-container h3,
.profile-box h2,
.profile-box h4{
    color:var(--dark) !important;
    font-weight:900;
}
.login-container h3{text-align:center;margin-bottom:22px;}
.profile-box h2{margin-bottom:6px;}
.profile-box h2::before{
    content:"";display:inline-block;width:6px;height:24px;border-radius:3px;
    background:var(--grad-green);margin-right:10px;vertical-align:-3px;
}
.profile-box label{font-size:12px;font-weight:800;color:var(--dark);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.profile-box hr{border:none;height:2px;background:var(--bg);box-shadow:var(--nm-in-sm);opacity:1;margin:36px 0 24px;}

/* ===== INPUTS ===== */
.form-control{
    background:var(--bg);
    border:none;
    color:var(--text);
    border-radius:16px;
    padding:12px 18px;
    font-size:14px;
    box-shadow:var(--nm-in);
}
.form-control::placeholder{color:var(--muted);opacity:.8;}
.form-control:focus{
    background:var(--bg);
    color:var(--text);
    box-shadow:var(--nm-in),0 0 0 2px rgba(61,220,132,.5);
    outline:none;
}
input[type=file].form-control{padding:9px 14px;}
input[type=file].form-control::file-selector-button{
    background:var(--grad-green);color:#fff;border:none;border-radius:12px;
    padding:6px 14px;margin-right:12px;font-weight:700;cursor:pointer;
    box-shadow:var(--nm-out-xs);
}

/* ===== BUTTONS ===== */
.btn{border-radius:50px;font-weight:800;padding:11px 24px;border:none;transition:.2s;}
.btn-warning,
.btn-gold{
    background:var(--grad-green) !important;
    color:#fff !important;
    box-shadow:var(--nm-out-sm);
}
.btn-warning:hover,
.btn-gold:hover{
    background:var(--grad-green) !important;
    color:#fff !important;
    filter:brightness(.95);
    transform:translateY(-1px);
}
.btn-warning:active,.btn-gold:active{box-shadow:var(--nm-in-sm);transform:none;}
.btn-danger{
    background:var(--grad-red) !important;
    color:#fff !important;
    box-shadow:var(--nm-out-sm);
}
.btn-danger:hover{filter:brightness(.95);transform:translateY(-1px);}

/* ===== LINKS ===== */
.link-green{color:var(--green2);font-weight:800;}
.link-green:hover{color:var(--dark);}

/* ===== GOOGLE BUTTON WRAPPER ===== */
.google-login-wrapper{display:flex;justify-content:center;margin-top:18px;}
.forgot-box{display:none;}

/* ===== ALERTS ===== */
.alert{
    border:none;border-radius:16px;
    background:var(--bg);
    box-shadow:var(--nm-in-sm);
    font-weight:700;font-size:13px;
}
.alert-danger{color:var(--danger);}
.alert-success{color:var(--green2);}

/* ===== PROFILE PICTURE ===== */
.profile-media{
    width:130px;height:130px;
    border-radius:50%;
    object-fit:cover;
    border:6px solid var(--bg);
    background:var(--bg);
    box-shadow:var(--nm-out);
}

/* ===== MOBILE ===== */
@media (max-width:576px){
    .login-container,.profile-box{padding:22px;border-radius:22px;}
    .login-container{margin-top:30px;}
    .btn{width:100%;}
}