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

/* BODY */
body {
    background-image: url("imagens/elf.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: Arial, sans-serif;
    color: #fff;
}

/* ================= LOGO ================= */
.hero-logo {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
}

.hero-logo img {
    width: 600px;
    max-width: 90%;
}

/* ================= MENU ================= */
.menu-wrapper {
    position: absolute;
    top: 260px;
    left: 50%;
    transform: translateX(-50%);
}

.menu-home {
    background: rgba(0, 0, 0, 0.55);
    padding: 18px 60px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 25px rgba(140, 0, 255, 0.4);
    display: flex;
    gap: 40px;
}

.menu-home a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 1px;
    transition: 0.3s;
}

.menu-home a:hover {
    color: #a855f7;
}

/* ==================================================================== INDEX ===================================================================================== */
/* ================= HOME ORGANIZADA ================= */
.home-container {
    max-width: 1200px;
    width: 100%;
    margin: 380px auto 80px auto;
    display: flex;
    justify-content: flex-start; /* Ajusta o alinhamento das colunas */
    gap: 30px; /* Ajusta o espaço entre as colunas */
}

/* COLUNA ESQUERDA */
.left-column {
    width: 25%; /* Ajuste o tamanho da coluna da esquerda */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Maior espaço entre as caixas da coluna da esquerda */
}

/* COLUNA DIREITA */
.right-column {
    width: 70%; /* Ajusta o tamanho da coluna da direita */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Ajusta o espaço entre as seções */
}

/* Para dispositivos menores */
@media (max-width: 768px) {
    .home-container {
        flex-direction: column;
        justify-content: center; /* Garante que as colunas se alinhem bem em dispositivos menores */
    }

    .left-column, .right-column {
        width: 100%; /* Coloca as colunas em largura total quando em dispositivos menores */
    }
}

/* ================= CAIXAS ================= */
.login-box,
.event-box,
.comandos,
.cadastro-box,
.download-buttons,
.game-info {
    background-color: rgba(0, 0, 0, 0.85);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(82, 36, 162, 0.44);
    border: 2px solid #6a3fd8;
}

/* LOGIN E CADASTRO */
.login-box,
.cadastro-box {
    background-color: rgba(0, 0, 0, 0.75);
    box-shadow: 0 0 10px rgba(82, 36, 162, 0.5);
    border-radius: 12px;
}

/* Input de login, senha e email */
.login-box input,
.cadastro-box input {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid rgba(82, 36, 162, 0.6);
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Botões */
.login-box button,
.cadastro-box button {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    background-color: #7a4dd6;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    margin-bottom: 15px;
}

.login-box button:hover,
.cadastro-box button:hover {
    background-color: #8f58e5;
}

/* Ajustes no título */
.login-box h3,
.cadastro-box h3 {
    color: #a855f7;
    margin-bottom: 15px;
    text-align: center;
}

/* ================= COMANDOS DO SERVIDOR ================= */
.comandos {
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(82, 36, 162, 0.44);
    border: 2px solid #6a3fd8;
}

.comandos h3 {
    color: #a855f7;
    margin-bottom: 15px;
    text-align: center;
}

/* ================= EVENTOS ================= */
.event-box {
    background-color: rgba(0, 0, 0, 0.75);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(82, 36, 162, 0.44);
    border: 2px solid #6a3fd8;
}

.event-box h3 {
    color: #a855f7;
    margin-bottom: 15px;
    text-align: center;
}

.event-box ul {
    list-style: none;
}

.event-box li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ================= RANK ================= */
.rank-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.rank-table th {
    text-align: left;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.rank-table td {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.rank-table tr:hover {
    background: rgba(0, 200, 255, 0.1);
}

/* ================= GAME INFO ================= */
.game-info {
    background-color: rgba(0, 0, 0, 0.75);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(82, 36, 162, 0.44);
    border: 2px solid #6a3fd8;
}

.game-info h3 {
    color: #a855f7;
    margin-bottom: 15px;
    text-align: center;
}

.game-info ul {
    list-style: none;
    color: #fff;
}

.game-info li {
    padding: 8px 0;
}

.game-info span {
    font-weight: bold;
}

/* ================= RANK ================= */
.rank-table td,
.rank-table th {
    color: #fff;
}

.rank-table tr:hover td {
    background: rgba(120, 80, 200, 0.3);
}

/* Alinha o texto do cabeçalho da coluna "Master Reset" no centro */
th:nth-child(6) {
    text-align: center;
}

/* Alinha os valores dentro da coluna "Master Reset" no centro */
td:nth-child(6) {
    text-align: center;
}
/* ================= ESPAÇOS ================= */
.home-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
}

.home-container .left-column {
    width: 25%;
}

.home-container .right-column {
    width: 40%; /* Estreitando a coluna da direita */
}

@media (max-width: 768px) {
    .home-container {
        flex-direction: column;
    }
}

/* ==================================================================== DASHBOARD ===================================================================================== */
/* ================= HISTORICO DE COMPRAS ================= */
.historico-box {
    background-color: rgba(0, 0, 0, 0.75);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(82, 36, 162, 0.44);
    border: 2px solid #6a3fd8;
    text-align: center;
	color: #a855f7;
}

.tabela-historico {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.tabela-historico th {
    background: #2b1b3f;
    color: #caa6ff;
    padding: 10px;
    text-align: center;
    font-weight: bold;
}

.tabela-historico td {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tabela-historico tr:hover td {
    background: rgba(120, 80, 200, 0.3);
}


/* Separação entre os botões de Alterar Senha e Logout */
.login-box a {
    display: block;
    margin-bottom: 2px; /* Espaçamento entre os botões */
}


/* ================= GOLD ================= */

/* Caixa para comprar Gold e Cash */
.buy-gold-box {
    background-color: rgba(0, 0, 0, 0.85);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(82, 36, 162, 0.44);
    border: 2px solid #6a3fd8;
    margin-bottom: 20px; /* Espaço entre as caixas */
    text-align: center;
}

/* Texto Gold */
.buy-gold-box h3:first-of-type {
    color: #a855f7;
}

/* Texto Cash */
.buy-gold-box h3:last-of-type {
    color: #a855f7;
}


/* Botão de Comprar Gold */
.vip-msg,
.buy-gold-button {
    background-color: #7a4dd6;
    padding: 12px 20px;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    font-size: 16px;
}

/* Estilo para status do servidor e jogadores online */
.online {
    color: #00FF00; /* Cor verde para 'Servidor Online' */
    font-weight: bold; /* Deixa o texto em negrito */
}

.players-online {
    color: #cce130; /* Cor azul para 'Players Online' */
    font-weight: bold; /* Deixa o texto em negrito */
}


/* Caixa geral / modal */
.box { 
    background: rgba(26,26,26,0.95); 
    width: 400px; 
    margin: 20px auto; 
    padding: 25px; 
    border-radius: 10px; 
    color: #fff; 
    text-align: center; 
    border: 2px solid #7a4dd6; /* borda padronizada */
}

/* Imagens dentro da box */
.box img { 
    width: 220px; 
    border: 2px solid #7a4dd6; /* borda padronizada */
    padding: 10px; 
    border-radius: 10px; 
    background: #fff; 
}

/* Informações de texto secundário */
.info { 
    margin-top: 15px; 
    font-size: 14px; 
    color: #ccc; 
}

/* Botões gerais e de comprar gold */
button.buy-gold-button, 
.box a, 
.box button { 
    display: block; 
    margin: 10px auto; 
    padding: 12px; 
    background: #7a4dd6; /* cor padronizada */
    color: #fff; 
    border: 2px solid #7a4dd6; /* borda padronizada */
    border-radius: 5px; 
    font-weight: bold; 
    cursor: pointer; 
    width: 80%; 
    transition: 0.3s; 
}

/* Efeito hover para os botões */
button.buy-gold-button:hover, 
.box a:hover, 
.box button:hover { 
    background: #6939b5; /* tom mais escuro ao passar o mouse */
    border-color: #6939b5; 
}

/* Container do modal PIX */
#pix-container { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.8); 
    z-index: 9999; 
    overflow: auto; 
}

/* ================= DOWNLOAD ================= */
.download-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px; /* Espaçamento superior */
}

.download-buttons a {
    display: inline-block;
    padding: 12px 40px; /* Define o tamanho do botão (largura e altura) */
    background-color: #7a4dd6; /* Cor de fundo do botão */
    color: white; /* Cor do texto */
    font-size: 18px; /* Tamanho do texto */
    font-weight: bold; /* Negrito no texto */
    text-decoration: none; /* Remove o sublinhado */
    border-radius: 8px; /* Bordas arredondadas */
    transition: background-color 0.3s, transform 0.2s; /* Transição suave */
    text-align: center;
}

.download-buttons a:hover {
    background-color: #6939b5; /* Cor do botão ao passar o mouse */
    transform: scale(1.05); /* Efeito de aumento no tamanho ao passar o mouse */
}