/* =========================================================
   LOGIN PAGE
========================================================= */
.login-page {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
    background: #000;
    font-family: "Poppins", sans-serif;
    position: relative;
}
/* =========================================================
   BACKGROUND
========================================================= */
.login-background {
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.65)),
        url("images/login-bg.jpg") center center / cover no-repeat;
    z-index: -3;
}
.login-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at left,
            rgba(229,180,50,.20),
            transparent 42%),
        radial-gradient(circle at right,
            rgba(229,180,50,.12),
            transparent 50%);
}

/* =========================================================
   GOLD PARTICLES
========================================================= */
.gold-particles{
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle,#e4b73d 1.5px,transparent 2px),
        radial-gradient(circle,#ffd75a 2px,transparent 3px),
        radial-gradient(circle,#c99b18 1px,transparent 2px);
    background-size:
        140px 140px,
        220px 220px,
        180px 180px;
    background-position:
        0 0,
        60px 80px,
        120px 40px;
    opacity:.18;
    animation:particlesMove 25s linear infinite;

}

@keyframes particlesMove{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(-120px);
    }
}

/* =========================================================
   WRAPPER
========================================================= */
.login-wrapper{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:10px 10px;
}
/* =========================================================
  LOGO
========================================================= */
.login-brand{
    margin-bottom:0px;
}
.login-brand img{
    width:270px;
    display:block;
    filter:drop-shadow(0 10px 35px rgba(0,0,0,.45));
}
/* =========================================================
   CARD
========================================================= */
.login-card{
    width:100%;
    max-width:470px;
    background:rgba(8,8,8,.92);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    border-radius:2px;
    padding:34px;
    box-shadow:
        0 30px 80px rgba(0,0,0,.65);

}
/* =========================================================
   HEADER
========================================================= */
.login-header{
    margin-bottom:28px;
}
.login-header h1{
    margin:0;
    color:#fff;
    font-size:36px;
    font-weight:700;
}

.login-header p{
    margin-top:10px;
    color:#8c8c8c;
    font-size:15px;
    line-height:1.7;
}

/* =========================================================
   LABELS
========================================================= */
.input-group{
    margin-bottom:30px;
}

.input-group label{
    display:block;
    margin-bottom:10px;
    color:#bcbcbc;
    font-size:11px;
    letter-spacing:.28em;
    text-transform:uppercase;
    font-weight:600;
}

/* =========================================================
   INPUT BOX
========================================================= */
.input-box{
    display:flex;
    align-items:center;
    height:56px;
    background:#090909;
    border:1px solid rgba(255,255,255,.08);
    transition:.35s;
}

.input-box:focus-within{
    border-color:#d7b039;
    box-shadow:0 0 0 3px rgba(212,173,52,.12);
}

.input-box i{
    width:54px;
    text-align:center;
    color:#757575;
    font-size:16px;
}

.input-box input{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    color:#fff;
    font-size:15px;
    font-family:inherit;
}

.input-box input::placeholder{
    color:#666;
}

/* Neutralize browser autofill styling (Chrome/Edge/Safari force a light
   background + black text on autofilled fields, ignoring our CSS). This
   uses a huge inset box-shadow to paint over the browser's own background
   and forces the text color, so autofilled inputs still match the dark
   theme instead of showing as white boxes. */
.input-box input:-webkit-autofill,
.input-box input:-webkit-autofill:hover,
.input-box input:-webkit-autofill:focus,
.input-box input:-webkit-autofill:active {
    -webkit-text-fill-color:#fff;
    -webkit-box-shadow:0 0 0 1000px #090909 inset;
    box-shadow:0 0 0 1000px #090909 inset;
    caret-color:#fff;
    transition:background-color 9999s ease-in-out 0s;
}

.input-box input:autofill{
    background-color:#090909;
    color:#fff;
}

/* =========================================================
   PASSWORD
========================================================= */
.password-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}
.password-top a{
    color:var(--gold);
    text-decoration:none;
    font-size:12px;
    font-weight:600;
}

.password-top a:hover{
    color:#fff;
}

.password-toggle{
    width:52px;
    height:100%;
    border:none;
    background:none;
    color:#888;
  cursor:pointer;
    transition:.3s;
}

.password-toggle:hover{
    color:var(--gold);
}

/* =========================================================
   TOAST (used by login.js for validation/status messages)
========================================================= */

.login-toast{
    position:fixed;
    left:50%;
    bottom:36px;
    transform:translate(-50%, 20px);
    padding:14px 26px;
    background:rgba(20,20,20,.95);
    border:1px solid rgba(255,255,255,.1);
    border-left:3px solid #e0574f;
    color:#f0f0f0;
    font-size:13.5px;
    font-weight:500;
    letter-spacing:.02em;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
    z-index:999;
    box-shadow:0 20px 45px rgba(0,0,0,.5);
}

.login-toast.show{
    opacity:1;
    transform:translate(-50%, 0);
}

.login-toast.success{
    border-left-color:#d5aa32;
}

/* =========================================================
   BUTTON
========================================================= */
.login-btn{
   width:100%;
    height:58px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    background:linear-gradient(90deg,#ff8a42,#ff5a0a);
    color:#000;
    font-weight:700;
    letter-spacing:.25em;
   border:none;
   cursor:pointer;
    transition:.35s;
}

.login-btn:hover{
    transform:translateY(-3px);
    box-shadow:
        0 16px 35px rgba(228,183,61,.35);
}

.login-btn i{
    transition:.3s;
}

.login-btn:hover i{
    transform:translateX(5px);
}

/* =========================================================
   DIVIDER
========================================================= */

.login-divider{
    width:100%;
    height:1px;
    background:rgba(255,255,255,.08);
    margin:34px 0 26px;
}

/* =========================================================
   FOOTER
========================================================= */

.login-footer{
    text-align:center;
    color:#707070;
    letter-spacing:.28em;
    font-size:11px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:600px){
.login-card{
padding:28px 22px;
}
.login-header h1{
font-size:30px;
}
.login-brand img{
width:210px;
}

}