.criar-jogador-card {
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(11,70,30,0.06);
    background: linear-gradient(180deg,#ffffff,#fbfff6);
}
.avatar-preview { width: 120px; height: 120px; margin: 0 auto; overflow: hidden; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 8px 18px rgba(12,72,35,0.08); }
.criar-jogador-card .form-control-lg { padding: 14px 16px; font-size: 1.05rem; }
.criar-jogador-card .btn-block { min-width: 200px; }
.criar-jogador-form .btn-outline-secondary { border-color: rgba(11,70,30,0.08); color: #0b4d33; }
.criar-jogador-card .small.text-muted { color: #6b6b6b; }

@media (max-width: 767px) {
    .avatar-preview { width: 90px; height: 90px; }
    .criar-jogador-card { padding: 16px; }
}

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wrap{
    min-height: 100%;
    height: auto;
    margin: 0 auto -60%;
    padding: 0 0 60px;
}

.wrap > .container{
    height: 60px;
    border-top: 1px solid #000;    
    padding: 0 0 60px;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #eeeeee;
    color: black;
    /* Safe top padding to avoid fixed header overlaying content */
    padding-top: 96px; /* match navbar height (adjust above if needed) */
}

.div-body{
    height: -webkit-fill-available; /* Preenche a altura disponível */
    width: 100% /* Preenche a largura disponível */;
    display:flex;
    justify-content: flex-start; /* Centraliza verticalmente */
    -moz-flex-direction: column; /* Para navegadores Firefox antigos */

}

.header {
    background-color: #eeeeee;
    padding: 20px 0;
}

/* Navbar layout tweaks to match the design sample */
.my-navbar { padding: 10px 0; box-shadow: 0 12px 28px rgba(12,72,35,0.04); }
.my-navbar { z-index: 1050; }
.navbar-brand-img { height: 36px; width: auto; }
.nav-center .navbar-nav { display:flex; gap:6px; }
.nav-center .nav-link { color: #4b6956; padding: 10px 18px; font-weight: 700; font-size: 14px; }
.nav-center .nav-link:hover { color: #0b4d33; }
.my-navbar .nav-link:focus { outline: none; box-shadow: 0 0 0 3px rgba(199,230,63,0.12); border-radius: 8px; }
.navbar-actions { margin-left: auto; display:flex; align-items:center; gap:12px; }
.btn-cta-sm { background: #c7e63f; color: #0f3f22; border-radius: 22px; padding: 8px 14px; font-weight: 700; border: none; }
.btn-cta-sm:hover { filter: brightness(0.98); }
.nav-login { color: #2f4f3a; border: none; }
.user-icon .fas { font-size: 18px; color: #274a36; }

.user-icon { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background: #fff; border: 1px solid rgba(11,70,30,0.04); box-shadow: 0 6px 16px rgba(12,72,35,0.04); }

.header .logo img {
    width: 150px;
}
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1050; }

.header .user-info {
    display: flex;
    align-items: center;
}

.header .btn {
    margin-left: 10px;
}



.main-content {
    padding: 120px 0 60px; /* extra top padding so fixed navbar doesn't overlap hero */
}


.footer {
    background-color: #f7faf6;
    border-top: 1px solid #e6efe8;
    font-size: 15px;
    padding: 28px 0;
    color: #6b6b6b;
}

.footer p {
    margin: 0;
}

/* Footer specific styles */
.footer .footer-inner { max-width: 1100px; margin: 0 auto; }
.footer .footer-inner { background: linear-gradient(180deg,#fbfff6,#f7faf6); padding: 14px 20px; border-radius: 10px; }
.footer .footer-link {
    color: #2f4f3a;
    text-decoration: none;
    font-weight: 600;
}
.footer .footer-link:hover { color: #0b4d33; }
.footer .text-muted { color: #6b6b6b; }

/* Footer support emphasis */
.footer .col-md-4 strong { color: #114227; font-weight: 800; display:block; margin-bottom:6px; }
.footer .col-md-4 a.footer-link { font-weight:600; color:#114227 }
.footer .footer-link:hover { text-decoration: underline; }
.footer .footer-sep { color: #bdbdbd; margin: 0 8px; }

@media (max-width: 767px) {
    .footer .text-md-left { text-align: center !important; }
    .footer .text-md-right { text-align: center !important; margin-top: 12px; }
}

/* Login modal styles */
.login-modal-content { border-radius: 12px; box-shadow: 0 20px 40px rgba(16, 28, 22, 0.12); overflow: hidden; }
.login-modal-logo { max-width: 120px; height: auto; display: inline-block; }
.login-modal-content .input-group-text { background: transparent; border-right: 0; }
.login-modal-content .form-control { border-left: 0; }
.login-modal-content .input-group .form-control:focus { box-shadow: none; }
.btn-cta { background: #c7e63f; color: #000; border: none; font-weight: 700; border-radius: 8px; }
.btn-cta:hover { transform: translateY(-1px); }
.btn-google { background: #fff; border: 1px solid #e6e6e6; color: #333; }
.btn-google img { vertical-align: middle; }

@media (max-width: 576px) {
    .login-modal-content { margin: 0 12px; }
    .login-modal-logo { max-width: 90px; }
}

/* Register page styles */
.register-card { border-radius: 12px; padding: 24px; }
.register-logo { max-width: 110px; }
.register-card .form-control { border-radius: 8px; }
.register-card .input-group-text { background: transparent; border-right: 0; }
.register-card .btn-cta { font-size: 1.05rem; padding: 12px 18px; }
.register-card .btn-google { background: #fff; border: 1px solid #e6e6e6; color: #333; }
.register-card .form-row .col { padding-right: 8px; padding-left: 8px; }

/* Selecionar Esporte styles (refined) */
.select-sport-section { padding: 60px 0 80px; background: linear-gradient(180deg,#fbfcfb 0%, #f6f7f6 100%); }
.select-sport-section .container { max-width:1100px; }
.select-sport-section .text-center h2 { font-size:28px; font-weight:700; color:#153926; }
.select-sport-section .text-center p { color:#6b6b6b; margin-bottom:28px; }
.select-sport-section .text-center::after { content:''; display:block; width:84px; height:4px; background:linear-gradient(90deg,#c7e63f,#9fcf2a); margin:12px auto 0; border-radius:4px; opacity:0.9 }

.sport-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; align-items: start; }
.sport-col { display:block; }
.sport-card { background: linear-gradient(180deg, #ffffff, #fbfff6); border-radius: 14px; border: 1px solid rgba(7,21,12,0.05); box-shadow: 0 10px 26px rgba(11,70,30,0.06); transition: transform .2s ease, box-shadow .18s ease; text-align: left; padding: 18px; min-height: 120px; display: flex; align-items: center; width:100%; }
.sport-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 30px 80px rgba(11,70,30,0.12); }
.sport-card:focus { outline: 3px solid rgba(199,230,63,0.12); outline-offset:3px; }
.sport-card-inner { display:flex; gap:14px; align-items:center; width:100%; }
.sport-icon { width: 96px; height: 96px; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg,#eaf7e6,#e0f2c9); color: #083217; font-weight:700; border-radius: 20px; font-size: 28px; box-shadow: 0 8px 24px rgba(12,72,35,0.08); }
.sport-icon i { font-size: 28px; }
.sport-info { flex:1; }
.sport-name { font-weight: 900; font-size: 22px; color:#153926; letter-spacing: 0.2px; }
.sport-subtext { color: #6b6b6b; margin-top:6px; font-size:13px; }
.sport-desc { color:#7a7a7a; margin-top:8px; font-size:13px; }

.sport-card .fa-futbol, .sport-card .fa-basketball-ball, .sport-card .fa-volleyball-ball, .sport-card .fa-table-tennis, .sport-card .fa-running, .sport-card .fa-swimmer, .sport-card .fa-chess-pawn { transform: scale(1.02); }
.sport-icon, .sport-icon i { transition: transform .16s ease, box-shadow .16s ease; }
.sport-card:hover .sport-icon { transform: translateX(-6px) scale(1.03); box-shadow: 0 12px 30px rgba(12,72,35,0.12); }
.sport-card:hover .sport-name { color: #0b4d33; }

/* small floating animation for icons on load */
@keyframes floatIcon {
    0% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}
.sport-icon { animation: floatIcon 5s ease-in-out infinite; }
.sport-desc { color:#7a7a7a; margin-top:8px; font-size:13px; }

@media (max-width: 768px) {
    .select-sport-section { padding-top:40px; }
    .sport-grid { grid-template-columns: repeat(1, 1fr); gap: 18px; }
    .sport-card { padding: 14px; min-height: 92px; }
    .sport-icon { width:64px; height:64px; font-size:20px }
    .sport-name { font-size: 20px; }
}

/* Better focus outline for keyboard users */
.sport-card:focus { outline: 3px solid rgba(199,230,63,0.28); outline-offset: 4px; }

/* Larger button feel on click */
.sport-card:active { transform: translateY(-2px) scale(0.996); }

.btn-primary {
    background-color: #eeeeee;
    border-color: #28a745;
}

.btn-secondary {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* Adicionar cor ao ícone */
.btn-secondary .fas {
    color: black;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-link {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* Selecionar Jogador styles */
.filter-area { border-radius: 12px; background: #fff; border: 1px solid rgba(11,70,30,0.04); box-shadow: 0 10px 26px rgba(11,70,30,0.04); }
.players-list { margin-top: 6px; }
.player-card { border-radius: 12px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; border: none; }
.player-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(11,70,30,0.12); }
.player-avatar img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; box-shadow: 0 8px 22px rgba(11,70,30,0.08); }
.player-name { font-weight:700; color:#153926; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.players-count { background: linear-gradient(90deg,#c7e63f,#9fcf2a); color: #083217; padding: 8px 12px; font-size: 0.95rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(12,72,35,0.06); }

@media (max-width: 576px) {
    .player-avatar img { width:72px; height:72px; }
}

/* Manter o ícone de usuário visível */
.btn-link .fas {
    color: black;
    font-size: 24px;  /* Ajuste do tamanho do ícone conforme necessário */
}


/* Melhorar o posicionamento do dropdown */
.dropdown-menu {
    position: absolute;
    right: 0; /* Alinha o dropdown com a borda direita do botão */
    top: 100%; /* Coloca o dropdown logo abaixo do botão */
    z-index: 1050; /* Garantir que o dropdown fique acima de outros elementos */
    max-width: 250px; /* Limita a largura do dropdown para evitar que ele ultrapasse a tela */
    overflow: hidden; /* Impede que o conteúdo extra saia da área visível */
    width: auto; /* Permite que o dropdown se ajuste automaticamente à largura do conteúdo */
    min-width: 120px; /* Define uma largura mínima */
}

/* Garantir que o ícone e o dropdown não sejam afetados por cliques ou interações */
.btn-group {
    position: relative;
}

.btn-link {
    background-color: transparent;
    border: none;
    box-shadow: none;
}



/* Slider */
.slider2 {
    position: relative;
    overflow: hidden;
}

.slider2 img.s {
    width: 100%;
    display: none;
}

.slider2 img.s[data-active="true"] {
    display: block;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    color: black;
    cursor: pointer;
}

.arrow.left {
    left: 10px;
}

.arrow.right {
    right: 10px;
}

.slider-controls {
    text-align: center;
    margin-top: 10px;
}

.slider-controls div {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
}

.slider-controls div[data-active="true"] {
    background-color: #33c16c;
}

/* Grid Layouts */
.grid2, .grid3 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.grid2 a, .grid3 a {
    margin: 10px;
    display: block;
}

.grid2 img, .grid3 img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s;
}

.grid2 img:hover, .grid3 img:hover {
    transform: scale(1.1);
}

/* Divider */
.divider {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #33c16c 0%, #277d51 49.26%, rgba(11, 104, 192, 0) 100%, #33c16c 100%);
    margin: 20px 0;
}

/* Table */
.table-container {
    width: 100%;
    margin-top: 20px;
    overflow-x: auto;
    background-color: #222;
    border-radius: 10px;
}

.table-header {
    background-color: #444;
    padding: 10px;
}

.table-row {
    display: flex;
    justify-content: space-between;
}

.table-column {
    flex: 1;
    padding: 10px;
    text-align: left;
}

.table-body {
    background-color: #333;
    padding: 10px;
}

.table-body .table-row:nth-child(even) {
    background-color: #444;
}


.game-list {
    position: fixed;
    left: 0; /* Posiciona à esquerda */
    top: 90px; /* Distância da parte superior para evitar sobrepor a navbar */
    height: calc(100vh - 80px); /* A altura ocupa o restante da tela, subtraindo a altura da navbar */
    width: 250px; /* Largura da lista de jogos */
    background-color: #eeeeee;
    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.1); /* Sombra para dar um efeito de destaque */
    padding: 10px;
    overflow-y: auto; /* Adiciona rolagem se necessário */
}

.game-list h5 {
    margin-bottom: 15px;
}

.game-list .list-group-item {
    padding: 10px;
    margin-bottom: 5px;
}


.chat-box {
    position: fixed;
    top: 90px; /* Ajuste para a altura da NavBar */
    right: 0;
    height: calc(100vh - 80px); /* A altura do chat deve ocupar o restante da tela, subtraindo a altura da NavBar */
    overflow-y: auto;
    background-color: #eeeeee;
    width: 300px; /* Ajuste de largura conforme necessário */
    box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.1); /* Adiciona sombra para dar destaque */
}







/* Ultimos ganhos */
.recent-wins-container {
    
    margin-top: 30px;
}

.recent-wins-table-wrapper {
    
    max-width: 50%;  /* Reduzindo para 50% da largura da tela */
    margin: 0 auto;  /* Centraliza a tabela */
}

.recent-wins table {
    
    width: 100%;  /* A tabela ocupa 100% da largura do contêiner */
    border-collapse: collapse;
    margin-top: 20px;
}

.recent-wins th, .recent-wins td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
}

.recent-wins th {
    background-color: #d200dd; /* Verde escuro para o cabeçalho */
    color: black;
}

/* Altera as linhas alternadas */
.recent-wins tbody tr:nth-child(odd) {
    background-color: #d4e9d8; /* Verde claro para as linhas ímpares */
}

.recent-wins tbody tr:nth-child(even) {
    background-color: #7fae7d; /* Verde escuro para as linhas pares */
}

/* Altera a cor da linha quando o usuário passa o mouse por cima */
.recent-wins tr:hover {
    background-color: #f1f1f1;
}

@media (max-width: 768px) {
    .recent-wins-table-wrapper {
        max-width: 95%;  /* Ajusta para 95% em telas pequenas */
    }
}



.carousel-item {
    margin-top: 20px;
}

/* NAVBAR */
.navbar {
    position: fixed;
    padding: 0 10px; /* Remover padding, small horizontal padding */
    height: 90px; /* Definindo a altura da navbar */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efeito de sombra nas bordas da navbar */
    display: flex; /* Flexbox para a navbar */
    justify-content: flex-start; /* Left align content; we center nav items using mx-auto */
    align-items: center; /* Alinha verticalmente no centro */
}

/* Garantir que o contêiner da navbar não tenha margens indesejadas */
.navbar .container {
    padding: 0; /* Remover padding do container */
    margin: 0; /* Remover margens */
    display: flex; /* Use flexbox para alinhar brand / nav / ações */
    align-items: center;
    width: 100%;
    gap: 10px;
}

/* center brand and adjust sizing */
.navbar .navbar-brand {
    position: relative; /* default flow, left aligned */
    left: 0;
    transform: none;
    top: 0;
    margin-right: 14px;
}
.navbar-brand-img {
    max-width: 140px;
    height: auto;
    margin-left: 4px;
}

/* Ensure nav is centered inside the navbar while brand stays left */
.my-navbar .navbar-collapse { display: flex; align-items: center; flex: 1; }
.my-navbar .navbar-nav { display: flex; justify-content: center; flex: 1; }
.my-navbar .navbar-actions { margin-left: 0; /* we'll use flex to place at the end */ }

/* keep compatibility for .mx-auto but prefer flex centering */
.navbar-nav.mx-auto { margin-left: 0; margin-right: 0; }

/* Nav link styling */
.navbar .nav-link {
    color: #2f4f3a;
    font-weight: 600;
    padding: 0.6rem 1rem;
}
.navbar .nav-link:hover {
    color: #0b4d33;
    background: rgba(11,77,51,0.03);
    border-radius: 8px;
}

/* Actions on right side */
.navbar-actions .nav-login { color: #2f4f3a; margin-right: 12px; }
.btn-cta-sm { background: #c7e63f; color: #000; border-radius: 8px; padding: 6px 12px; font-weight:700; }
.btn-cta-sm:hover { transform: translateY(-2px); }
.user-icon { color: #2f4f3a; }

/* Footer improvements: center content and style */
.footer {
    background-color: #f7faf6;
    font-size: 14px;
    padding: 28px 0;
    color: #6b6f66;
}
.footer .row.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}
.footer p { color: #596959; margin: 0; }
.footer .container.text-center p { margin: 6px 10px; }
.footer a { color: #0b4d33; font-weight:600; text-decoration: none }
.footer a:hover { text-decoration: underline }

/* Logo - Ajustes para garantir que ela esteja alinhada à esquerda e maior */
.navbar-brand img {
    max-width: 150px; /* Aumenta o tamanho da imagem */
    height: auto; /* Mantém a proporção da imagem */
    margin-top: -25px; /* Ajuste o valor conforme necessário para a imagem subir */
    position: relative; /* Torna a posição relativa para poder usar 'left' */
    left: 70px; /* Move a imagem para a direita */    margin-right: 0; /* Sem margem à direita */
    padding: 0; /* Sem padding adicional */
}

/* Alinha o botão de login à direita */
.navbar-nav.login {
    margin-left: auto; /* Move o botão para a direita */
    margin-right: 0;
}


/* Caso tenha um contêiner de imagem centralizado, pode aplicar esse estilo */
.image-container {
    text-align: center;
    margin-bottom: 30px;
}


/* Centralizar o conteúdo do usuário (Login e Cadastro) */
.user-info {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza os itens dentro do container */
    color: black;
    font-weight: bold;
    margin-top: 10px; /* Dá uma leve descida aos botões */
}

/* Ajustes no botão de login/cadastro */
.user-info .btn {
    margin: 0 10px; /* Adiciona espaçamento entre os botões */
}

/* New hero and feature styles for startup look */
.hero {
    background: linear-gradient(135deg, #f6fff0 0%, #e6f8e6 50%, #ffffff 100%);
    padding-top: 80px;
    margin: 0 auto 0; /* avoid negative bottom margin that cuts footer */
}
.hero-title {
    font-size: 42px;
    line-height: 1.05;
    font-weight: 700;
    border-top: none;
}
.hero-sub {
    color: #374b3e;
    font-size: 18px;
}
.btn-cta {
    background-color: #c7e63f;
    color: #0b0b0b;
    border: none;
}
.btn-cta:hover { opacity: .95 }
.btn-outline-cta {
    background: transparent;
    border: 2px solid rgba(0,0,0,0.08);
    color: #333;
}
.hero-image {
    max-width: 320px;
}
.hero {
    position: relative;
    overflow: visible;
}

.hero::after {
    content: '';
    position: absolute;
    right: -60px;
    top: -40px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle at 30% 30%, rgba(199,230,63,0.12), rgba(12,72,35,0.03) 40%, transparent 60%);
    border-radius: 50%;
    transform: rotate(12deg);
    z-index: 0;
}

.hero .hero-image-col, .hero .col-lg-6 { position: relative; z-index: 2 }

.btn-cta {
    background: linear-gradient(90deg,#c7e63f 0%, #a9d23a 100%);
    color: #09120a;
    border-radius: 12px;
    padding: 12px 26px;
    box-shadow: 0 10px 30px rgba(12,72,35,0.12);
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-cta:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(12,72,35,0.14) }
.btn-outline-cta {
    background: transparent;
    border: 2px solid rgba(11,77,51,0.12);
    color: #163c2a;
    border-radius: 12px;
    padding: 10px 22px;
}
.btn-outline-cta:hover { background: rgba(11,77,51,0.04) }
.hero-features li { margin-bottom: 8px; color: #2f4f3a }
.feature-card { background: #fff; border-radius: 12px; box-shadow: 0 6px 18px rgba(13,40,20,0.06); transition: transform .18s ease, box-shadow .18s ease }
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(12,72,35,0.06) }

/* make carousel appear lower on page so hero stands out */
.platform .carousel { margin-top: 10px }

@media (max-width: 768px) {
    .hero-title { font-size: 28px }
    .hero-image { max-width: 240px; margin-top: 20px }
}

/* Services & team styles */
.services .service-card { background: #fff; border-radius: 12px; box-shadow: 0 12px 36px rgba(11,70,30,0.05); border-left: 6px solid rgba(199,230,63,0.9); transition: transform .15s ease }
.services .service-card:hover { transform: translateY(-6px) }
.services .service-title { color: #0b4d33; font-weight: 700; }
.section-title { color: #0b4d33; font-weight: 700; }
.partner-logos .logo-box { width: 110px; height: 48px; background: #fff; border-radius: 6px; display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 18px rgba(0,0,0,0.06); font-weight:600; color:#556a59 }
/* Partner carousel styles */
.partner-carousel { max-width: 720px; margin: 0 auto; }
.partner-carousel .partner-logo { max-height: 72px; object-fit: contain; }
.logo-box { display:flex; align-items:center; justify-content:center; width: 160px; height: 88px; }
.partner-carousel .carousel-indicators li { background-color: #c7e63f; }
.partner-carousel .carousel-control-prev-icon, .partner-carousel .carousel-control-next-icon { background-color: rgba(0,0,0,0.22); border-radius: 50%; }
.values h5 { color: #0b4d33; font-weight: 700 }
.team-card { background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(11,70,30,0.06); padding-top: 24px }
.team-name { font-size: 18px; color: #0b4d33 }
.team-role { color: #6c7a6f; margin-bottom: 8px }
.team-avatar { width: 86px; height: 86px; border-radius: 50%; background: linear-gradient(135deg,#e6f8e6,#f6fff0); display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#114227; margin:0 auto 12px; box-shadow: 0 8px 20px rgba(12,72,35,0.06); }

/* Small responsive tweaks */
@media (max-width: 576px) {
    .service-card { padding: 18px }
    .partner-logos .logo-box { width: 80px; height: 36px }
}

/* Ajustes no botão de login/cadastro */
.user-info .btn.btn-secondary {
    background-color: #c7e63f;
    color: black;
}


/* Responsividade para dispositivos móveis */
@media (max-width: 767px) {
    .navbar-nav {
        text-align: center;
        width: 100%;
    }

    .navbar-nav .nav-item {
        width: 100%;
        margin: 10px 0;
    }

    .navbar-nav .nav-item .nav-link {
        font-size: 18px;
        color: #f39c12;
    }

    /* Para dispositivos móveis, as informações do usuário também podem ocupar a largura total */
    .user-info {
        width: 100%;
        justify-content: center;
        margin-top: 15px; /* Ajuste para mobile */
    }
}


/* Carousel */

.carousel-item img {
    object-fit: cover;
    transition: all 0.3s ease;
    height: auto; /* Mantenha a altura proporcional */
    width: 100%; /* Mantém a largura da imagem 100% da tela */
}



.carousel-item {
    position: relative;
}

.carousel-item .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    color: black;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.carousel-item:hover .play-icon {
    opacity: 1;
}

.game-list {
    padding-top: 20px;
}

/* Adicionando distância entre carrossel e banners */
.banner-container {
    margin-top: 30px;
}

/* Layout dos banners (5 banners por linha) */
.banner-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.banner-item {
    width: 18%; /* A largura de cada banner será 18% para caber 5 banners por linha */
    margin-bottom: 20px;
}

/* Estilo do botão de carregar mais */
#load-more {
    margin-top: 20px;
}


.profile-view {
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 8px;
}
.profile-view h1 {
    font-size: 24px;
}
.profile-view p {
    font-size: 16px;
    margin-bottom: 10px;
}

/* Categoria page styles */
.categoria-page { background: #f6f7f6; min-height: calc(100vh - 80px); }
.categoria-sidebar { background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(11,70,30,0.04); }
.categoria-sidebar .list-group-item { padding: 12px 16px; border-radius:8px; margin-bottom:8px; }
.categoria-sidebar .list-group-item.active { background: linear-gradient(90deg,#c7e63f,#9fcf2a); border-color: rgba(7,21,12,0.06); color:#063117; font-weight:700; }
.categoria-content { background: transparent; }
.categoria-content .card { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(11,70,30,0.04); }
.categoria-content .btn-outline-primary { border-color: rgba(11,70,30,0.12); color: #0b4d33; }
.categoria-content .table thead th { background: linear-gradient(90deg,#2f4f3a,#0b4d33); color:#fff; }

@media (max-width: 767px) {
    .categoria-sidebar { margin-bottom: 18px; }
    .categoria-sidebar .list-group-item { font-size: 14px; padding: 10px; }
}

/* Dashboard specific */
.dashboard-container {
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
}
.dashboard-sidebar {
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 18px 36px rgba(12,72,35,0.06);
}
.dashboard-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.profile-card { display:flex; gap:12px; align-items:center; }
.profile-card img { width:96px; height:96px; border-radius:50%; object-fit:cover; box-shadow: 0 8px 20px rgba(12,72,35,0.06); }
.ml-card { background: #fff; border-radius: 12px; padding: 18px; box-shadow: 0 18px 36px rgba(12,72,35,0.06); }
.ml-card .ml-result { font-size: 18px; font-weight: 700; color: #153926; }
.ml-card .ml-sub { color: #6b6b6b; font-size: 13px; }
.ml-card .ml-actions { display:flex; gap:8px; align-items:center; margin-top:12px; }
.ml-loader { width:20px; height:20px; border: 3px solid #e6f3e8; border-top-color: #1a73e8; border-radius: 50%; animation: spin 1s linear infinite; display:inline-block; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg);} }
.ml-history { margin-top: 14px; display:flex; flex-direction:column; gap:8px; }
.history-item { background: #f8fff8; border-left: 4px solid #c7e63f; padding: 10px; border-radius: 8px; }
.stats-table { width:100%; border-collapse: collapse; border-radius: 12px; overflow: hidden; }
.stats-table th, .stats-table td { padding: 10px; text-align: left; border-bottom: 1px solid #eee; }

@media (max-width: 992px) {
    .dashboard-container { grid-template-columns: 1fr; }
    .dashboard-sidebar { order: 2; }
    .dashboard-main { order: 1; }
}