/* ===== MUDANGERS - TEMA PRETO E VERMELHO ===== */

/* Cores base */
:root {
    --primary: #c0392b;
    --primary-dark: #922b21;
    --bg-dark: #0a0a0a;
    --bg-card: #111111;
    --bg-card2: #1a0000;
    --border-color: #8B0000;
    --text-muted: #888;
}

/* Body e fundo geral */
body {
    background-color: #0a0a0a !important;
    color: #e0e0e0 !important;
}

.wrapper {
    background-color: #0a0a0a !important;
}

/* Navbar */
.navbar {
    background-color: #0d0d0d !important;
    border-bottom: 2px solid #c0392b !important;
}

.navbar .nav-link {
    color: #e0e0e0 !important;
}

.navbar .nav-link:hover {
    color: #c0392b !important;
}

/* Header / Banner */
.header {
    background-color: #0d0d0d !important;
    border-bottom: 1px solid #3d0000 !important;
}

/* Cards e painéis */
.card {
    background-color: #111111 !important;
    border: 1px solid #3d0000 !important;
    color: #e0e0e0 !important;
}

.card-header {
    background-color: #1a0000 !important;
    border-top: 1px solid #c0392b !important;
    border-bottom: 1px solid #c0392b !important;
    color: #e0e0e0 !important;
}

/* Toggles / switches (ex: opções Excellent na WebShop) */
.form-check-input {
    background-color: #1a0000 !important;
    border: 1px solid #c0392b !important;
}

.form-check-input:checked {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
}

.form-check-input:focus {
    border-color: #922b21 !important;
    box-shadow: 0 0 0 0.25rem rgba(192, 57, 43, 0.35) !important;
}

/* Tabelas */
.table {
    color: #e0e0e0 !important;
}

.table {
    border-color: #3d0000 !important;
}

.table-dark {
    background-color: #1a0000 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #111111 !important;
    color: #e0e0e0 !important;
}

.table-hover > tbody > tr:hover {
    background-color: #2a0000 !important;
    color: #fff !important;
}

.table thead td, .table thead th {
    color: #fff !important;
    border-color: #3d0000 !important;
}

/* Botões */
.btn-primary {
    background-color: #c0392b !important;
    border-color: #922b21 !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: #922b21 !important;
    border-color: #7b241c !important;
}

/* Links */
a {
    color: #e05a4e !important;
}

a:hover {
    color: #c0392b !important;
}

/* Nav tabs */
.nav-tabs {
    border-bottom: 2px solid #3d0000 !important;
}

.nav-tabs .nav-link {
    color: #e0e0e0 !important;
}

.nav-tabs .nav-link.active {
    background-color: #1a0000 !important;
    border-color: #c0392b #c0392b #1a0000 !important;
    color: #c0392b !important;
}

.nav-tabs .nav-link:hover {
    border-color: #3d0000 !important;
    color: #c0392b !important;
}

/* Page title */
.page-title {
    background-color: #1a0000 !important;
    border-left: 4px solid #c0392b !important;
}

/* Dropdowns */
.dropdown-menu {
    background-color: #111111 !important;
    border: 1px solid #3d0000 !important;
}

.dropdown-item {
    color: #e0e0e0 !important;
}

.dropdown-item:hover {
    background-color: #2a0000 !important;
    color: #c0392b !important;
}

/* Footer */
footer {
    background-color: #0d0d0d !important;
    border-top: 2px solid #c0392b !important;
    color: #888 !important;
}

footer a {
    color: #888 !important;
}

footer .footer-title h3 {
    color: #888 !important;
}

footer small {
    color: #888 !important;
}

hr.divider {
    border-color: #3d0000 !important;
}

/* Breadcrumb */
.breadcrumb {
    background-color: transparent !important;
}

.breadcrumb-item a {
    color: #e05a4e !important;
}

.breadcrumb-item.active {
    color: #888 !important;
}

/* Inputs e forms */
.form-control {
    background-color: #1a0000 !important;
    border: 1px solid #3d0000 !important;
    color: #e0e0e0 !important;
}

.form-control::placeholder {
    color: #888 !important;
}

.form-control:focus {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 0.2rem rgba(192, 57, 43, 0.25) !important;
}

/* Selects (Pergunta secreta, Pais, etc.) - alinhar com o tema vermelho/preto */
.form-select {
    background-color: #1a0000 !important;
    border: 1px solid #3d0000 !important;
    color: #e0e0e0 !important;
}

.form-select:focus {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 0.2rem rgba(192, 57, 43, 0.25) !important;
}

.form-select option {
    background-color: #1a0000 !important;
    color: #e0e0e0 !important;
}

/* Labels dos formularios (Nome, Usuario, Senha, Pergunta secreta, etc.) - branco para manter o padrao */
.form-label {
    color: #ffffff !important;
}

/* Espacamento entre a imagem do captcha e o campo de digitar o codigo */
.captcha .image {
    margin-bottom: 12px;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #c0392b;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #922b21;
}

/* ===== SIDEBAR E LOGIN PANEL ===== */

.sidebar {
    background-color: #111111 !important;
    border: 1px solid #3d0000 !important;
    border-radius: 6px;
    padding: 12px !important;
}

.sidebar-title {
    background-color: #1a0000 !important;
    border-bottom: 1px solid #c0392b !important;
    padding: 8px !important;
    border-radius: 4px 4px 0 0;
}

.sidebar-title .text {
    color: #c0392b !important;
    font-weight: bold;
}

.icon-text .icon {
    background-color: #c0392b !important;
    color: #fff !important;
}

/* Login box */
.login-box {
    background-color: #111111 !important;
    border: 1px solid #3d0000 !important;
    border-radius: 6px;
    padding: 16px !important;
}

.login-box .icon-text .text {
    color: #c0392b !important;
}

/* Input container */
.input-container {
    position: relative;
}

.input-container .icon {
    background-color: transparent !important;
    color: #c0392b !important;
}

/* Progress bar salas */
.progress {
    background-color: #2a0000 !important;
}

/* Caixinhas de info do servidor */
.container-new-box {
    background-color: transparent !important;
}

.new-box {
    background-color: #1a0000 !important;
    border: 1px solid #3d0000 !important;
    color: #e0e0e0 !important;
}

.new-box.second {
    background-color: #110000 !important;
}

/* Team / admin boxes */
.container-new-box-admin .new-box-admin {
    background-color: #1a0000 !important;
    border: 1px solid #3d0000 !important;
    color: #e0e0e0 !important;
}

/* Divisor entre seções */
hr {
    border-color: #3d0000 !important;
}

/* Botão secundário (Cadastro) */
.btn-secondary {
    background-color: #2a0000 !important;
    border-color: #3d0000 !important;
    color: #e0e0e0 !important;
}

.btn-secondary:hover {
    background-color: #3d0000 !important;
    color: #fff !important;
}

/* Texto auxiliar */
.divisor-new {
    color: #888 !important;
    border-top: 1px solid #3d0000 !important;
}

.text-new {
    color: #e0e0e0 !important;
}

/* btn-more */
.btn-more {
    color: #c0392b !important;
}

/* Container central / main content */
main .container > div,
.home-content,
.content-wrapper,
.col-lg-8,
.col-md-8 {
    background-color: transparent !important;
}

/* Remove fundo roxo do wrapper central */
.wrapper > main {
    background-color: #0a0a0a !important;
}

/* Área do slider/carousel */
.carousel,
.carousel-inner,
.slider,
[class*="carousel"] {
    border: 1px solid #3d0000 !important;
    border-radius: 6px !important;
}

/* Botão + roxo (btn-more, btn-sm-more, etc) */
.btn-more,
.btn-sm-more,
a.btn[href*="add"],
button.btn[class*="secondary"] {
    background-color: #c0392b !important;
    border-color: #922b21 !important;
    color: #fff !important;
}

/* Tabs de notícias (IMPORTANTE, UPDATE, etc) */
.nav-tabs .nav-link {
    color: #e0e0e0 !important;
    border-color: #3d0000 !important;
}

.nav-tabs .nav-link.active {
    background-color: #1a0000 !important;
    border-color: #c0392b !important;
    color: #fff !important;
}

/* Seção Últimas notícias */
.news-section,
.latest-news,
[class*="news"] {
    background-color: transparent !important;
}

/* Container central que ainda está roxo */
.shadow-new {
    background-color: #111111 !important;
    border: 1px solid #3d0000 !important;
    box-shadow: 0 0 10px rgba(192, 57, 43, 0.2) !important;
}

/* Avatares/profiles roxos */
.col-lg-3.col-sm-12 {
    background-color: transparent !important;
}

/* Menu lateral do painel do usuário */
.list-group {
    background-color: #111111 !important;
    border: 1px solid #3d0000 !important;
}

.list-group-item {
    background-color: #111111 !important;
    border-color: #3d0000 !important;
    color: #e0e0e0 !important;
}

.list-group-item:hover {
    background-color: #2a0000 !important;
    color: #fff !important;
}

.list-group-item.active {
    background-color: #c0392b !important;
    border-color: #922b21 !important;
    color: #fff !important;
}

/* Tabelas do painel interno */
.table-bordered {
    border-color: #3d0000 !important;
}

.table-bordered td,
.table-bordered th {
    border-color: #8B0000 !important;
    background-color: #111111 !important;
    color: #e0e0e0 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: #111111 !important;
    border-color: #3d0000 !important;
}

/* Linhas pares das tabelas com risca (Rankings, etc.) - remove fundo roxo padrao, segue o mesmo estilo alternado ja usado na pagina VIP */
.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #1a0000 !important;
    color: #e0e0e0 !important;
}

.table-striped > tbody > tr:nth-of-type(even) > td {
    background-color: #1a0000 !important;
    border-color: #3d0000 !important;
    color: #e0e0e0 !important;
}

/* Titulo "Servicos" na pagina de Informacoes fica fora do bloco .page e nao pega o padrao dos outros titulos (Servidor, Events, Comandos) */
.page + h2 {
    font-size: 1.2rem !important;
    text-transform: uppercase !important;
}

/* Alinha o titulo e a tabela de Servicos com o resto do conteudo da pagina (que tem 16px de padding do .page) */
.page + h2 {
    margin-left: 16px;
}

.page + h2 + table {
    margin-left: 16px !important;
    width: calc(100% - 16px) !important;
}

/* Tab content geral */
.tab-content,
.tab-content2 {
    background-color: #111111 !important;
    border: 1px solid #3d0000 !important;
    border-radius: 6px !important;
}

.tab-pane {
    background-color: transparent !important;
}

/* Posts / notícias */
.posts-post-container {
    background-color: #111111 !important;
}

.posts-title {
    background-color: #1a0000 !important;
    border-left: 3px solid #c0392b !important;
    color: #fff !important;
}

.posts-body {
    background-color: #111111 !important;
    color: #e0e0e0 !important;
}

/* Cards dos personagens (Hall da Fama) */
.col-lg-3.col-sm-12.shadow-new {
    background-color: #111111 !important;
    border: 1px solid #3d0000 !important;
}

/* Avatar roxo padrão */
.list-characters,
.list-characters img,
[class*="character"] img {
    filter: hue-rotate(180deg) saturate(0.5) !important;
}

/* Dropdown menu do usuário logado (sidebar direita) */
.col-lg-3.col-sm-12 .table-striped {
    background-color: #111111 !important;
    border: 1px solid #3d0000 !important;
}

.col-lg-3.col-sm-12 .table-striped td {
    background-color: #111111 !important;
    color: #e0e0e0 !important;
    border-color: #3d0000 !important;
}

.col-lg-3.col-sm-12 .table-striped tr:hover td {
    background-color: #2a0000 !important;
    color: #fff !important;
}

.col-lg-3.col-sm-12 .table-striped a {
    color: #e0e0e0 !important;
}

.col-lg-3.col-sm-12 .table-striped a:hover {
    color: #c0392b !important;
}

/* Botão Logout */
.col-lg-3.col-sm-12 .btn-danger {
    background-color: #c0392b !important;
    border-color: #922b21 !important;
}

/* Tab content da página VIP */
.tab-content.mt-3 {
    background-color: #111111 !important;
    border: 1px solid #3d0000 !important;
    border-radius: 6px !important;
    padding: 16px !important;
}

/* Tabelas da página VIP */
.tab-content.mt-3 .table-hover tbody tr {
    background-color: #111111 !important;
    color: #e0e0e0 !important;
}

.tab-content.mt-3 .table-hover tbody tr:nth-of-type(odd) {
    background-color: #1a0000 !important;
}

.tab-content.mt-3 .table-hover tbody tr:hover {
    background-color: #2a0000 !important;
}

.tab-content.mt-3 .table-hover td,
.tab-content.mt-3 .table-hover th {
    border-color: #3d0000 !important;
    color: #e0e0e0 !important;
}

/* ===== NAVBAR ESTILO GAME HUD ===== */

.navbar {
    background: linear-gradient(180deg, #0d0d0d 0%, #1a0000 100%) !important;
    border-bottom: 2px solid #c0392b !important;
    padding: 0 !important;
    box-shadow: 0 2px 15px rgba(192, 57, 43, 0.4) !important;
}

.navbar .nav-item {
    border-right: 1px solid #3d0000 !important;
}

.navbar .nav-item:first-child {
    border-left: 1px solid #3d0000 !important;
}

.navbar .nav-link {
    color: #ccc !important;
    text-transform: uppercase !important;
    font-size: 0.78em !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    padding: 18px 16px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #c0392b;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px rgba(192, 57, 43, 0.8);
}

.navbar .nav-link:hover {
    color: #fff !important;
    background-color: rgba(192, 57, 43, 0.15) !important;
    text-shadow: 0 0 8px rgba(192, 57, 43, 0.8) !important;
}

.navbar .nav-link:hover::after {
    width: 100%;
}

/* Dropdown */
.navbar .dropdown-menu {
    background: linear-gradient(180deg, #0d0d0d 0%, #1a0000 100%) !important;
    border: 1px solid #c0392b !important;
    border-top: 2px solid #c0392b !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 4px 15px rgba(192, 57, 43, 0.3) !important;
    margin-top: 0 !important;
}

.navbar .dropdown-item {
    color: #ccc !important;
    text-transform: uppercase !important;
    font-size: 0.75em !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    padding: 10px 20px !important;
    border-bottom: 1px solid #3d0000 !important;
    transition: all 0.2s ease !important;
}

.navbar .dropdown-item:last-child {
    border-bottom: none !important;
}

.navbar .dropdown-item:hover {
    background-color: rgba(192, 57, 43, 0.2) !important;
    color: #fff !important;
    text-shadow: 0 0 8px rgba(192, 57, 43, 0.8) !important;
    padding-left: 26px !important;
}

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

.header .container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.header-brand {
    margin: 0 auto !important;
}

.header-brand img {
    max-height: 120px !important;
}

/* ===== LOGO MAIOR E CENTRALIZADO COM GLOW ===== */

.header {
    padding: 10px 0 !important;
    min-height: auto !important;
}

.header .container {
    justify-content: center !important;
}

.header-brand img {
    max-height: 160px !important;
    filter: drop-shadow(0 0 10px rgba(192, 57, 43, 0.6)) 
            drop-shadow(0 0 25px rgba(192, 57, 43, 0.3)) !important;
    transition: filter 0.3s ease, transform 0.3s ease !important;
}

.header-brand img:hover {
    filter: drop-shadow(0 0 15px rgba(192, 57, 43, 0.9)) 
            drop-shadow(0 0 35px rgba(192, 57, 43, 0.5))
            drop-shadow(0 0 50px rgba(255, 100, 50, 0.3)) !important;
    transform: scale(1.05) !important;
}

/* ===== ÍCONES REDES SOCIAIS ===== */

.container-social,
[class*="social"] {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 8px 0 !important;
}

.container-social a,
[class*="social"] a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background-color: #1a0000 !important;
    border: 1px solid #c0392b !important;
    border-radius: 4px !important;
    color: #ccc !important;
    font-size: 0.85em !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.container-social a:hover,
[class*="social"] a:hover {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(192, 57, 43, 0.7) !important;
    transform: translateY(-3px) !important;
}

/* Fundo dos ícones sociais */
.social-icons {
    background-color: transparent !important;
    border: none !important;
}

.social-link {
    background-color: #1a0000 !important;
    border: 1px solid #c0392b !important;
    color: #ccc !important;
}

.social-link:hover {
    background-color: #c0392b !important;
    box-shadow: 0 0 12px rgba(192, 57, 43, 0.7) !important;
    transform: translateY(-3px) !important;
}

/* ===== TÍTULOS "ÚLTIMAS NOTÍCIAS" E "HALL DA FAMA" ===== */

h1.d-flex.justify-content-between {
    color: #fff !important;
    font-size: 1.4em !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    border-left: 4px solid #c0392b !important;
    padding-left: 12px !important;
    background: linear-gradient(90deg, rgba(192,57,43,0.15) 0%, transparent 100%) !important;
    padding: 10px 12px !important;
    text-shadow: 0 0 10px rgba(192, 57, 43, 0.5) !important;
}

.page-title {
    border-left: 4px solid #c0392b !important;
    background: linear-gradient(90deg, rgba(192,57,43,0.15) 0%, transparent 100%) !important;
    padding: 10px 12px !important;
    margin-bottom: 16px !important;
}

.page-title h1 {
    color: #fff !important;
    font-size: 1.4em !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-shadow: 0 0 10px rgba(192, 57, 43, 0.5) !important;
    margin: 0 !important;
}

/* ===== BANNER/SLIDER - REMOVE BORDA ROXA ===== */

#slides-banner-carousel,
.carousel.slide {
    border: 1px solid #c0392b !important;
    border-radius: 6px !important;
    box-shadow: 0 0 15px rgba(192, 57, 43, 0.4) !important;
    overflow: hidden !important;
}

/* ===== HEADER - REDUZ ESPAÇO VAZIO ===== */

.header {
    padding: 5px 0 !important;
    min-height: auto !important;
}

section.header {
    padding: 5px 0 !important;
}

.header .container {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Badges amarelos (WCoinC, WCoinP, GoblinPoint) */
.badge.badge-warning,
.badge-warning {
    background-color: #28a745 !important;
    color: #fff !important;
}

/* Badges roxos (Vencimento/VIP) */
.badge.badge-primary,
.badge-primary,
.badge.badge-vip,
.badge-vip {
    background-color: #28a745 !important;
    color: #fff !important;
}

/* Créditos (verde escuro) */
.badge.badge-success,
.badge-success {
    background-color: #1e7e34 !important;
    color: #fff !important;
}

/* WCoinC, WCoinP, GoblinPoint (amarelo → verde) */
.badge.bg-warning {
    background-color: #28a745 !important;
    color: #fff !important;
}

/* VIP e Vencimento (roxo → verde) */
.badge.bg-secondary {
    background-color: #28a745 !important;
    color: #fff !important;
}

/* Créditos e WCoins (bg-success → mesmo verde) */
.badge.bg-success {
    background-color: #28a745 !important;
    color: #fff !important;
}

/* Linhas da tabela */
.table-bordered td,
.table-bordered th,
.table-bordered {
    border-color: #8B0000 !important; /* vermelho escuro */
}

/* Separadores h3 (títulos Informações, Última conexão, etc.) */
.col-lg-9 h3 {
    border-bottom: 1px solid #8B0000 !important;
    border-top: 1px solid #8B0000 !important;
}

/* Botão Enable 2FA - texto branco */
.btn-success,
a[href*="2fa"] {
    color: #ffffff !important;
}

/* Linhas roxas dos títulos h3 (Informações, Última conexão, etc.) */
.col-lg-9 h3::before,
.col-lg-9 h3::after {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
}



/* Shop (Loja de itens) - categorias SETS, WEAPONS, ACESSORIES estavam roxas, segue o padrao vermelho/preto */
.list-group-heading {
    background: #1a0000 !important;
    border-color: #3d0000 !important;
    color: #ffffff !important;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: #2a0000 !important;
    color: #ffffff !important;
}

.list-group-item.active {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
    color: #ffffff !important;
}

/* Shop - icones das categorias nao existem no servidor (404), time decidiu nao usar imagem por enquanto */
.webshop-categories img {
    display: none;
}


/* Ajuste de cores roxas remanescentes para o padrao vermelho do tema */
.text-title {
    border-color: #c0392b !important;
}

.top-class-header {
    border-bottom-color: #c0392b !important;
}