/* ==============================
   ALONEMC STORE - STYLE CSS
   Tema: Roxo Escuro Premium
   IP: alonemc.com.br
================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {

    background:
    radial-gradient(circle at top, #35105f, #100019 60%);

    color: white;
    min-height: 100vh;
}


/* ==============================
           HEADER
================================= */

header {

    width: 100%;
    height: 85px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 8%;

    background: rgba(10,0,20,0.75);

    backdrop-filter: blur(15px);

    border-bottom: 1px solid rgba(160,80,255,0.25);

    position: sticky;
    top: 0;

    z-index: 100;

}


/* LOGO */

.logo {

    display: flex;
    align-items: center;
    gap: 15px;

}


.logo img {

    width: 55px;
    height: 55px;

    object-fit: contain;

}


.logo h2 {

    font-size: 28px;

    font-weight: 800;

    color: #c77dff;

    text-shadow:
    0 0 10px #8a2be2,
    0 0 25px #8a2be2;

}



/* MENU */

nav {

    display: flex;

    gap: 35px;

}


nav a {

    text-decoration: none;

    color: #ddd;

    font-size: 16px;

    transition: .3s;

    position: relative;

}



nav a:hover {

    color: #c77dff;

}



/* linha animada */

nav a::after {

    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    width:0%;

    height:2px;

    background:#b14cff;

    transition:.3s;

}


nav a:hover::after {

    width:100%;

}



/* ==============================
            BANNER
================================= */


.banner {

    min-height: 600px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;


    background:

    linear-gradient(
        rgba(15,0,30,.7),
        rgba(15,0,30,.95)
    ),

    url("assets/background.png");


    background-size:cover;

    background-position:center;


}



.banner-text {

    max-width:800px;

    animation: aparecer 1s ease;


}



.banner-text h1 {

    font-size:55px;

    font-weight:800;


    background:

    linear-gradient(
        90deg,
        #ffffff,
        #c77dff
    );


    -webkit-background-clip:text;

    color:transparent;


}



.banner-text p {

    margin-top:25px;

    font-size:18px;

    color:#ccc;

    line-height:1.7;

}



/* BOTÃO */

.btn {


    display:inline-block;

    margin-top:35px;


    padding:15px 45px;


    background:

    linear-gradient(
        135deg,
        #9d00ff,
        #5a00a8
    );


    color:white;


    border-radius:50px;


    text-decoration:none;


    font-weight:700;


    box-shadow:

    0 0 20px #9d00ff;


    transition:.3s;


}



.btn:hover {


    transform:translateY(-5px)
    scale(1.05);


    box-shadow:

    0 0 40px #c77dff;


}



/* ==============================
        IP DO SERVIDOR
================================= */


.ip-box {


    margin-top:30px;

    display:inline-block;

    padding:12px 30px;


    background:

    rgba(255,255,255,.08);


    border:

    1px solid rgba(199,125,255,.4);


    border-radius:15px;


    font-size:22px;


    color:#c77dff;


    font-weight:700;


    box-shadow:

    inset 0 0 20px rgba(150,0,255,.2);

}


.ip-box span {

    color:white;

}



/* ==============================
          ANIMAÇÕES
================================= */


@keyframes aparecer {


    from {

        opacity:0;

        transform:translateY(40px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }


}

/* ==============================
        RANKS ALONEMC
================================= */


.ranks {

    padding: 80px 8%;

    text-align:center;

}


.ranks h1 {

    font-size:45px;

    color:#c77dff;

    text-shadow:0 0 20px #8a2be2;

    margin-bottom:50px;

}



.rank-container {

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:30px;

}



.rank-card {

    width:280px;

    padding:35px 25px;

    background:

    rgba(255,255,255,0.05);


    border-radius:20px;


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


    backdrop-filter:blur(15px);


    transition:.3s;


    position:relative;


    overflow:hidden;

}



.rank-card:hover {

    transform:translateY(-10px);

}



.rank-card h2 {

    font-size:35px;

    margin-bottom:15px;

}



.rank-card h3 {

    font-size:28px;

    margin:20px 0;

    color:white;

}



.rank-card ul {

    list-style:none;

    color:#ccc;

    text-align:left;

    line-height:2;

}



.rank-card button {

    margin-top:25px;

    width:100%;

    padding:12px;


    border:none;

    border-radius:20px;


    color:white;

    font-weight:bold;


    cursor:pointer;


    background:#8a2be2;


    transition:.3s;

}



.rank-card button:hover {

    box-shadow:0 0 25px #c77dff;

}



/* TAGS */


.tag {

    display:inline-block;

    padding:8px 20px;

    border-radius:15px;

    font-weight:bold;

}



/* START */

.start {

    border:2px solid #ff8c00;


    background:

    linear-gradient(
        rgba(50,20,0,0.75),
        rgba(50,20,0,0.90)
    ),

    url("img/start.jpg");


    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;


    box-shadow:

    0 0 25px rgba(255,140,0,.5);

}



/* BETA */


.beta {

    border:2px solid #003cff;


    background:

    linear-gradient(
        rgba(0,0,40,0.75),
        rgba(0,0,40,0.90)
    ),

    url("img/beta.png");


    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;


    box-shadow:

    0 0 25px rgba(0,60,255,.5);

}



.beta-tag {

    background:#003cff;

    color:white;

}



/* VIP */


.vip {

    border:2px solid #ff4fa3;


    background:

    linear-gradient(
        rgba(50,0,30,0.75),
        rgba(50,0,30,0.90)
    ),

    url("img/vip.jpg");


    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;


    box-shadow:

    0 0 25px rgba(255,79,163,.5);

}


/* ALONE */


.alone {


    border:2px solid #9d00ff;


    background:

    linear-gradient(
        rgba(30,0,60,0.70),
        rgba(30,0,60,0.90)
    ),

    url("img/alone.jpg");


    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;


    box-shadow:

    0 0 35px rgba(157,0,255,.7);

}



/* DESTAQUE */


.destaque {


    position:absolute;

    top:15px;

    right:-40px;


    background:#9d00ff;


    padding:8px 50px;


    transform:rotate(45deg);


    font-size:12px;

    font-weight:bold;


}

/* ==============================
        CARRINHO
================================ */


.carrinho {

    padding:80px 8%;

    text-align:center;

}


.carrinho h1 {

    font-size:45px;

    color:#c77dff;

    text-shadow:

    0 0 20px #8a2be2;

    margin-bottom:40px;

}



.carrinho-box {


    max-width:600px;

    margin:auto;


    padding:50px;


    background:

    rgba(255,255,255,.05);


    border-radius:25px;


    border:1px solid rgba(199,125,255,.3);


    backdrop-filter:blur(15px);


}



.carrinho-box h2 {

    font-size:28px;

    margin-bottom:15px;

}



.carrinho-box p {

    color:#ccc;

    margin-bottom:30px;

}

/* AVISO DE CARRINHO */

.aviso {

    position:fixed;

    top:25px;

    right:25px;


    background:

    linear-gradient(
        135deg,
        #8a2be2,
        #4b0082
    );


    padding:18px 30px;


    border-radius:15px;


    color:white;


    font-weight:bold;


    box-shadow:

    0 0 25px #9d00ff;


    animation:

    aparecerAviso .4s ease;


    z-index:9999;

}



@keyframes aparecerAviso {


    from {

        opacity:0;

        transform:translateX(100px);

    }


    to {

        opacity:1;

        transform:translateX(0);

    }

}

/* BOTÕES DO CARRINHO */

.btn,
.produto-carrinho button {

    display: inline-block;

    padding: 12px 25px;

    margin-top: 15px;

    border: none;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #8b00ff,
        #c800ff
    );

    color: white;

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition: 0.3s;

    box-shadow: 0 0 15px rgba(160,0,255,0.5);

}



.btn:hover,
.produto-carrinho button:hover {

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

    background: linear-gradient(
        135deg,
        #b300ff,
        #ff00ea
    );

    box-shadow:
    0 0 25px rgba(220,0,255,0.8);

}



/* CAIXA DOS PRODUTOS */

.produto-carrinho {

    background: rgba(20,20,35,0.8);

    border: 1px solid rgba(160,0,255,0.4);

    border-radius: 15px;

    padding: 20px;

    margin: 15px 0;

    transition: 0.3s;

}



.produto-carrinho:hover {

    transform: translateY(-5px);

    border-color: #c000ff;

    box-shadow:
    0 0 20px rgba(170,0,255,0.5);

}



.produto-carrinho h3 {

    color: #d600ff;

    font-size: 22px;

}



.produto-carrinho p {

    color: white;

    font-size: 17px;

}

.produto-carrinho button {

    background: linear-gradient(
        135deg,
        #ff0033,
        #ff6600
    );

}


.produto-carrinho button:hover {

    box-shadow:
    0 0 20px rgba(255,0,0,0.8);

}

/* ========================= */
/* FINALIZAR COMPRA */
/* ========================= */


.finalizar {

    min-height: 80vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 40px;

}



.finalizar h1 {

    text-align: center;

    color: white;

    font-size: 38px;

    margin-bottom: 30px;

}



.pagamento-box {


    width: 500px;

    background: rgba(15,15,25,0.95);

    border-radius: 20px;

    padding: 35px;


    box-shadow:

    0 0 30px rgba(150,0,255,0.5);


    border: 1px solid rgba(180,0,255,0.5);


}



.pagamento-box h2 {


    color: #c800ff;

    text-align: center;

    margin-bottom: 20px;


}



#resumo {


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

    padding: 15px;

    border-radius: 12px;

    color: white;

}



#resumo p {


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

    padding: 12px;

    border-radius: 10px;

    margin: 10px 0;


}



#total {


    color: #00ff99;

    font-size: 25px;

    margin-top: 25px;


}



.pagamentos {


    display: flex;

    gap: 15px;

    justify-content: center;

    margin: 20px 0;


}



.pagamentos button {


    width: 200px;

    padding: 15px;


    border: none;

    border-radius: 15px;


    font-size: 16px;

    font-weight: 700;

    cursor: pointer;


    transition: .3s;


}



.pix {


    background: #00c853;

    color: white;

}



.mercado {


    background: #0099ff;

    color: white;

}



.pagamentos button:hover {


    transform: translateY(-5px);

    filter: brightness(1.2);


}



.pix-area {


    margin-top: 25px;

    text-align: center;

    color: white;


}



.pix-area input {


    width: 90%;

    padding: 12px;


    border-radius: 10px;

    border: none;


    margin: 10px;


    text-align: center;


}



.finalizar-btn {


    width: 100%;


    margin-top: 25px;


    padding: 15px;


    border: none;


    border-radius: 15px;


    background: linear-gradient(
        135deg,
        #8b00ff,
        #ff00ea
    );


    color:white;


    font-size:18px;


    font-weight:800;


    cursor:pointer;


    transition:.3s;


}



.finalizar {

    min-height: 80vh;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 40px;

    padding-top: 40px;

}

/* INSTRUÇÕES PIX */

.instrucoes-pix {

    padding: 25px;

    background: rgba(20,20,35,0.95);

    border-radius: 18px;

    border: 1px solid rgba(180,0,255,0.5);

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

    color: white;

    width: 350px;

    margin-top: 80px;

}

/* PÁGINA EFETUADO */


.efetuado {

    min-height:80vh;

    display:flex;

    justify-content:center;

    align-items:center;

}



.efetuado-box {


    width:500px;

    padding:40px;


    text-align:center;


    background:rgba(20,20,35,0.95);


    border-radius:25px;


    border:1px solid rgba(180,0,255,.5);


    box-shadow:

    0 0 35px rgba(150,0,255,.5);


    color:white;


}



.check {


    font-size:70px;


    animation:pulse 1.5s infinite;


}



.efetuado-box h1 {


    color:#00ff99;

    font-size:35px;


}



.efetuado-box p {


    font-size:17px;

    margin:15px 0;


}



.discord-btn,
.voltar-btn {


    display:block;


    margin:15px auto;


    padding:15px;


    border-radius:15px;


    text-decoration:none;


    color:white;


    font-weight:800;


    transition:.3s;


}



.discord-btn {


    background:#5865F2;


}



.voltar-btn {


    background:linear-gradient(
    135deg,
    #8b00ff,
    #ff00ea
    );


}



.discord-btn:hover,
.voltar-btn:hover {


    transform:scale(1.05);


    box-shadow:0 0 25px rgba(200,0,255,.7);


}



@keyframes pulse {


    50% {

        transform:scale(1.15);

    }


}

.finalizar-btn {

    display: block;

    width: 100%;

    box-sizing: border-box;

    margin-top: 25px;

    padding: 15px;


    border-radius: 15px;


    background: linear-gradient(
        135deg,
        #8b00ff,
        #ff00ea
    );


    color: white;

    text-align: center;

    text-decoration: none;


    font-size: 18px;

    font-weight: 800;


    cursor: pointer;


    transition: .3s;

}



.finalizar-btn:hover {

    transform: scale(1.05);

    box-shadow:

    0 0 25px rgba(200,0,255,.7);

}

.nick-area {

    margin-bottom: 25px;

    text-align:center;

}



.nick-area p {

    color:white;

    margin-bottom:15px;

}



.nick-area input {

    width:90%;

    padding:15px;


    border-radius:12px;

    border:none;


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


    color:white;


    text-align:center;


    font-size:16px;


    outline:none;


    border:1px solid rgba(180,0,255,.5);

}



.nick-area input:focus {


    box-shadow:

    0 0 20px rgba(180,0,255,.7);


}