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

body{

    min-height:100vh;

    font-family:'Poppins', sans-serif;

}



/* FUNDO */

.login-page{

    min-height:calc(100vh - 60px);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px 20px;

    background:

    linear-gradient(

        135deg,

        #22c55e,

        #15803d

    );

}



/* CARD */

.login-card{

    width:100%;

    max-width:430px;

    background:#ffffff;

    padding:42px;

    border-radius:28px;

    box-shadow:

    0 25px 60px rgba(0,0,0,.20);

}



/* VOLTAR */

.back-site{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#6b7280;

    text-decoration:none;

    font-size:14px;

    font-weight:500;

    margin-bottom:25px;

    transition:.25s;

}


.back-site:hover{

    color:#22c55e;

}



/* LOGO */

.login-logo{

    display:block;

    text-align:center;

    text-decoration:none;

    font-size:34px;

    font-weight:800;

    color:#111827;

    letter-spacing:-1px;

    margin-bottom:25px;

}


.login-logo span{

    color:#22c55e;

}



/* TITULO */

.login-card h1{

    text-align:center;

    font-size:32px;

    font-weight:700;

    color:#111827;

    margin-bottom:8px;

}



.subtitle{

    text-align:center;

    color:#6b7280;

    font-size:14px;

    margin-bottom:32px;

}



/* CAMPOS */

.input-group{

    margin-bottom:20px;

}



.input-group label{

    display:block;

    margin-bottom:8px;

    color:#374151;

    font-size:14px;

    font-weight:600;

}



.input-group input{

    width:100%;

    height:52px;

    padding:0 16px;

    border-radius:14px;

    border:1px solid #d1d5db;

    outline:none;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:500;

    color:#111827;

    background:#fff;

    transition:.25s;

}



.input-group input::placeholder{

    color:#9ca3af;

    font-weight:400;

}



.input-group input:focus{

    border-color:#22c55e;

    box-shadow:

    0 0 0 4px rgba(34,197,94,.15);

}



/* BOTAO LOGIN */

.btn-login{

    width:100%;

    height:52px;

    border:none;

    border-radius:14px;

    background:#22c55e;

    color:#ffffff;

    font-family:'Poppins',sans-serif;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    box-shadow:

    0 10px 25px rgba(34,197,94,.30);

}



.btn-login:hover{

    background:#16a34a;

    transform:translateY(-2px);

}



/* DIVISOR */

.divider{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:25px 0;

    color:#9ca3af;

    font-size:14px;

}



/* COMPRAR */

.buy-login{

    height:52px;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

    background:#111827;

    color:#ffffff;

    text-decoration:none;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:700;

    transition:.25s;

}



.buy-login:hover{

    background:#000;

    transform:translateY(-2px);

}



/* VALIDADE */

.expiration{

    text-align:center;

    margin-top:20px;

    color:#6b7280;

    font-size:13px;

    font-weight:400;

}



/* FOOTER */

.login-footer{

    text-align:center;

    padding:20px;

    background:#ffffff;

    color:#6b7280;

    font-family:'Poppins',sans-serif;

    font-size:13px;

}

.modal {

    display: none;

    position: fixed;

    inset: 0;

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

    backdrop-filter: blur(6px);

    justify-content: center;

    align-items: center;

    z-index: 9999;

}



.modal-content {

    background: #ffffff;

    width: 380px;

    padding: 35px;

    border-radius: 18px;

    box-shadow: 0 15px 40px rgba(0,0,0,0.2);

    position: relative;

    animation: modalShow .25s ease;

}



@keyframes modalShow {

    from {

        opacity: 0;

        transform: translateY(-20px);

    }


    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.modal-content h2 {

    color: #111;

    text-align: center;

    font-size: 26px;

    margin-bottom: 25px;

}



.modal-content input {

    width: 100%;

    padding: 14px;

    margin-bottom: 15px;

    border-radius: 10px;

    border: 1px solid #ddd;

    background: #f8f8f8;

    color: #111;

    outline: none;

    box-sizing: border-box;

}



.modal-content input:focus {

    border-color: #00c853;

    background: white;

}



.modal-content button {

    width: 100%;

    padding: 15px;

    border: none;

    border-radius: 10px;

    background: #00c853;

    color: white;

    font-weight: bold;

    font-size: 16px;

    cursor: pointer;

    transition: .2s;

}



.modal-content button:hover {

    background: #00b248;

}



.close-modal {

    position: absolute;

    top: 12px;

    right: 18px;

    font-size: 28px;

    color: #777;

    cursor: pointer;

}

.modal-logo {

    text-align:center;

    font-size:28px;

    font-weight:900;

    letter-spacing:1px;

    color:#111;

    margin-bottom:20px;

}


.modal-logo span {

    color:#00d95f;

}

.close-modal:hover {

    color: #00c853;

}
/* MOBILE */

@media(max-width:500px){


    .login-card{

        padding:30px 22px;

    }


    .login-logo{

        font-size:28px;

    }


    .login-card h1{

        font-size:27px;

    }


}