/* =========================
   RESET
========================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:'Inter',sans-serif;
}

/* =========================
   BODY
========================= */
body{
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    color:white;
}

/* =========================
   BACKGROUND IMAGE
========================= */
body::before{
    content:"";
    position:fixed;
    inset:0;

    background-image:url("../logo.php?backdrop");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transform:scale(1.08);

    filter:
        blur(10px)
        brightness(0.45);

    z-index:-3;
}

/* =========================
   DARK OVERLAY
========================= */
body::after{
    content:"";
    position:fixed;
    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(255,140,0,0.35),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(255,80,0,0.25),
            transparent 35%
        ),
        rgba(0,0,0,0.35);

    z-index:-2;
}

/* =========================
   LOGIN CONTAINER
========================= */
#loginBox{
    width:420px;
    padding:40px;

    border-radius:28px;

    background:rgba(255,255,255,0.12);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,0.15);

    box-shadow:
        0 20px 60px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.15);

    position:relative;

    animation:showLogin .7s ease;

    overflow:hidden;
}

/* Glow effect */
#loginBox::before{
    content:"";
    position:absolute;

    width:220px;
    height:220px;

    background:rgba(255,140,0,0.25);

    border-radius:50%;

    top:-120px;
    right:-120px;

    filter:blur(50px);
}

/* =========================
   LOGO
========================= */
#logo{
    margin-bottom:25px;
    text-align:center;
}

#logo img{
    max-width:220px;
    max-height:90px;

    filter:drop-shadow(0 5px 15px rgba(0,0,0,0.4));
}

/* =========================
   TITLES
========================= */
h1{
    margin-bottom:8px;
    font-size:30px;
    font-weight:700;
}

h3{
    margin-bottom:18px;
    color:#ffb0b0;
    font-weight:500;
    font-size:14px;
}

/* =========================
   FORM
========================= */
form{
    width:100%;
}

fieldset{
    border:none;
}

/* =========================
   INPUTS
========================= */
input[type=text],
input[type=password]{

    width:100%;
    padding:15px 18px;

    margin-bottom:16px;

    border:none;
    border-radius:16px;

    background:rgba(255,255,255,0.88);

    color:#222;

    font-size:15px;
    font-weight:500;

    transition:all .25s ease;
}

/* Placeholder */
input::placeholder{
    color:#777;
}

/* Focus */
input:focus{
    outline:none;

    background:white;

    transform:translateY(-2px);

    box-shadow:
        0 0 0 4px rgba(255,140,0,0.25),
        0 10px 25px rgba(255,140,0,0.25);
}

/* =========================
   BUTTON
========================= */
button[type=submit],
input[type=submit]{

    width:100%;
    padding:15px;

    border:none;
    border-radius:16px;

    cursor:pointer;

    font-size:15px;
    font-weight:700;
    letter-spacing:.5px;

    color:white;

    background:
        linear-gradient(
            135deg,
            #ff9500,
            #ff5e00
        );

    box-shadow:
        0 10px 25px rgba(255,120,0,0.35);

    transition:all .25s ease;
}

/* Hover */
button[type=submit]:hover,
input[type=submit]:hover{

    transform:
        translateY(-3px)
        scale(1.01);

    box-shadow:
        0 18px 35px rgba(255,120,0,0.45);

    filter:brightness(1.08);
}

/* Click */
button[type=submit]:active,
input[type=submit]:active{
    transform:scale(.98);
}

/* =========================
   POWERED BY
========================= */
#poweredBy{
    position:fixed;

    bottom:20px;
    right:20px;

    padding:12px 16px;

    border-radius:14px;

    background:rgba(255,255,255,0.1);

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:12px;

    border:1px solid rgba(255,255,255,0.12);
}

/* =========================
   COMPANY
========================= */
#company{
    margin-top:20px;
    text-align:center;
    color:rgba(255,255,255,0.8);
}

/* =========================
   FORGOT PASSWORD
========================= */

.forgot-container{
    text-align:center;
    margin-top:8px;
    margin-bottom:18px;
}

.forgot-password{

    position:relative;

    display:inline-block;

    color:rgba(255,255,255,0.78);

    font-size:14px;

    font-weight:500;

    text-decoration:none;

    letter-spacing:.3px;

    transition:all .25s ease;
}

/* Línea elegante */
.forgot-password::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-4px;

    width:0%;
    height:1px;

    background:#ffb347;

    transform:translateX(-50%);

    transition:width .25s ease;
}

/* Hover */
.forgot-password:hover{

    color:#ffd08a;

    text-shadow:
        0 0 10px rgba(255,180,0,0.25);
}

.forgot-password:hover::after{
    width:100%;
}

/* =========================
   ANIMATION
========================= */
@keyframes showLogin{

    from{
        opacity:0;
        transform:
            translateY(40px)
            scale(.95);
    }

    to{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }
}

/* =========================
   MOBILE
========================= */
@media(max-width:500px){

    #loginBox{
        width:92%;
        padding:28px;
    }

}