/*
===============================================================================
ALL N 1 CELLULAR
MY POS
LOGIN PAGE
===============================================================================
*/


/*
===============================================================================
RESET
===============================================================================
*/

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


body {
    overflow-x: hidden;
}



/*
===============================================================================
LOGIN PAGE
===============================================================================
*/

.login-page {

    position: relative;

    min-height: 100vh;
    width: 100%;

    display: flex;

    flex-direction: column;

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

    padding: 40px 20px;

    /*
    KEEPING YOUR ORIGINAL BACKGROUND
    */

    background:
        url("../images/new_background.jpg")
        no-repeat
        center center
        fixed;

    background-size: cover;

}



/*
===============================================================================
SUBTLE BACKGROUND DARKENING
===============================================================================
*/

.login-page::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.20);

    pointer-events: none;

}



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

.login-box {

    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 380px;

    padding: 34px 36px 30px;

    /*
    DARK GLASS EFFECT
    */

    background:
        rgba(12, 18, 28, 0.78);

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

    border-radius: 18px;

    backdrop-filter:
        blur(10px);

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

    box-shadow:
        0 22px 55px
        rgba(0, 0, 0, 0.42);

}



/*
===============================================================================
SUBTLE TOP HIGHLIGHT
===============================================================================
*/

.login-box::before {

    content: "";

    position: absolute;

    top: 0;
    left: 12%;

    width: 76%;
    height: 1px;

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

}



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

.login-logo {

    width: 72px;
    height: 72px;

    margin: 0 auto 14px;

    display: flex;

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

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

    border-radius: 16px;

    padding: 8px;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.28);

}


.login-logo img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

}



/*
===============================================================================
BRAND
===============================================================================
*/

.login-brand {

    text-align: center;

    margin-bottom: 27px;

}


.login-brand h1 {

    margin: 0;

    color: #ffffff;

    font-size: 30px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.2px;

}


.login-brand p {

    margin: 7px 0 0;

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

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

}



/*
===============================================================================
HEADING
===============================================================================
*/

.login-heading {

    margin-bottom: 20px;

}


.login-heading h2 {

    margin: 0;

    color: #ffffff;

    font-size: 21px;

    font-weight: 600;

}


.login-heading p {

    margin: 5px 0 0;

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

    font-size: 13px;

}



/*
===============================================================================
ERROR
===============================================================================
*/

.login-error {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 17px;

    padding: 10px 12px;

    color: #ffd6d6;

    background:
        rgba(190, 30, 45, 0.20);

    border:
        1px solid
        rgba(255, 120, 120, 0.28);

    border-radius: 9px;

    font-size: 12px;

}


.error-symbol {

    display: flex;

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

    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    color: #ffffff;

    background: #c62828;

    border-radius: 50%;

    font-size: 12px;

    font-weight: bold;

}



/*
===============================================================================
FORM
===============================================================================
*/

.login-form {

    width: 100%;

}


.form-field {

    margin-bottom: 17px;

}


.form-field label {

    display: block;

    margin-bottom: 7px;

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

    font-size: 12px;

    font-weight: 600;

}



/*
===============================================================================
INPUT CONTAINER
===============================================================================
*/

.input-container {

    position: relative;

    width: 100%;

}


.input-icon {

    position: absolute;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

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

    font-size: 15px;

    pointer-events: none;

}



/*
===============================================================================
INPUT
===============================================================================
*/

.input-container input {

    width: 100%;

    height: 48px;

    padding:
        0
        14px
        0
        42px;

    color: #ffffff;

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

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

    border-radius: 9px;

    outline: none;

    font-family: inherit;

    font-size: 14px;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;

}


.input-container input::placeholder {

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

}


.input-container input:hover {

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

}


.input-container input:focus {

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

    border-color:
        rgba(255, 255, 255, 0.48);

    box-shadow:
        0 0 0 3px
        rgba(255, 255, 255, 0.07);

}


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

.login-button {
width: 100%;

height: 54px;

margin-top: 8px;

border: none;

border-radius: 11px;

cursor: pointer;

color: #ffffff;

font-size: 16px;
font-weight: 700;

letter-spacing: 0.2px;

background: linear-gradient(
    135deg,
    #005bea 0%,
    #007bff 50%,
    #00a8ff 100%
);

box-shadow:
    0 6px 18px rgba(0, 123, 255, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);

transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;

}

/* Hover */

.login-button:hover {
transform: translateY(-2px);


filter: brightness(1.08);

box-shadow:
    0 10px 25px rgba(0, 123, 255, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);


}

/* Click */

.login-button:active {
transform: translateY(0);


box-shadow:
    0 4px 12px rgba(0, 123, 255, 0.35);


}

/*
===============================================================================
REGISTER LINK
===============================================================================
*/

.register-link {

    display: flex;

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

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 22px;

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

    font-size: 12px;

}


.register-link a {

    color: #ffffff;

    font-weight: 600;

    text-decoration: none;

}


.register-link a:hover {

    text-decoration: underline;

}


.login-footer {
margin-top: 20px;
text-align: center;
color: rgba(255, 255, 255, 0.85);
font-size: 11px;
line-height: 1.4;
}

.login-footer span {
display: block;
font-size: 10px;
font-weight: 400;
color: rgba(255, 255, 255, 0.70);
}

.login-footer strong {
display: block;
margin-top: 2px;
font-size: 11px;
font-weight: 600;
color: #ffffff;
}

.login-footer small {
display: block;
margin-top: 2px;
font-size: 9px;
color: rgba(255, 255, 255, 0.65);
letter-spacing: 0.2px;
}


/*
===============================================================================
MOBILE
===============================================================================
*/

@media (max-width: 500px) {

    .login-page {

        padding: 25px 16px;

        background-attachment: scroll;

    }


    .login-box {

        max-width: 390px;

        padding:
            30px 25px 27px;

        border-radius: 16px;

    }


    .login-logo {

        width: 64px;
        height: 64px;

    }


    .login-brand h1 {

        font-size: 27px;

    }

}



/*
===========================================================================
VERY SMALL SCREENS
===============================================================================
*/

@media (max-width: 360px) {

    .login-box {

        padding:
            27px 20px 24px;

    }


    .login-logo {

        width: 58px;
        height: 58px;

    }


    .login-brand {

        margin-bottom: 23px;

    }

}