/* =================================================================
   1. DEFINIÇÃO DE VARIÁVEIS (TEMA CLARO E ESCURO)
   ================================================================= */
:root {
  /* Cores do Tema Escuro (Padrão) */
    --color-background: #0D131C;   /* Fundo principal (preto suave) */
    --color-contraste: #161F2C;
  --color-surface: #161F2C;    /* Fundo de cards, modais, header (cinza bem escuro) */
  
  --color-border: #333333; /* Cor das bordas */
  --color-text-primary: #EAECEF; /* Texto principal (quase branco) */
  --color-text-secondary: #B0B3B8;/* Texto secundário (cinza claro) */
  --color-primary: #22c55e;    /* Cor principal (verde vibrante) */
  --color-primary-hover: #16a34a; /* Hover da cor principal */
  --color-success: #22c55e;    /* Cor para sucesso (verde) */
  --color-attention: #facc15;  /* Cor para atenção (amarelo) */
  --color-danger: #ef4444; /* Cor para perigo (vermelho) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2);
  
  --accent-destaque: #facc15;   
  --accent-red: #e54545;
  
    --bicho-bg: linear-gradient(135deg, #3b82f6, #2563eb);
    --raspadinha-bg: linear-gradient(135deg, #8b5cf6, #7c3aed);
    --bingo-bg: linear-gradient(135deg, #f97316, #ea580c);
    --rifas-bg: linear-gradient(135deg, #22c55e, #16a34a);
    --saladebingo-bg: linear-gradient(135deg, #E63995, #8A2BE2);
}

body.dark-mode {
  /* Cores do Tema Claro */
  --color-background: #F0F2F5; /* Fundo principal (cinza muito claro) */
  --color-contraste: #161F2C;
  --color-surface: #ffffff;  /* Fundo de cards, modais, header */
  --color-border: #DDE1E6;   /* Cor das bordas */
  --color-text-primary: #1C1E21; /* Texto principal (quase preto) */
  --color-text-secondary: #65676B;/* Texto secundário (cinza escuro) */
  --color-primary: #1877F2;   /* Cor principal (ex: azul) */
  --color-primary-hover: #166FE5;/* Hover da cor principal */
  --color-success: #31A24C;   /* Cor para sucesso (verde) */
  --color-attention: #F7B928;   /* Cor para atenção (amarelo) */
  --color-danger: #E02840;    /* Cor para perigo (vermelho) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===============================================================
  CORPO DE PAGINA
   =============================================================== */
.page-wrapper {display: flex; justify-content: center; padding: 1rem; padding-bottom: 100px; box-sizing: border-box; width: 100%;}
.main-container {width: 100%; max-width: 1200px; /* deixa amplo no desktop */padding: 1rem; box-sizing: border-box; display: flex; flex-direction: column; padding-top: 90px;   gap: 1rem;}
.page-section {padding: 1rem; margin-top: 100px; }
.page-container {max-width: 1400px; margin: 0 auto;  padding: 2rem;}
.page-header {text-align: center; margin-bottom: 3rem; }
.page-title {padding-top: 5px; font-size: 1.2rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 0.5rem;}
.page-subtitle {font-size: 1rem; color: var(--color-text-secondary);}
.main-content {padding-top: 80px; /* Espaço para o header fixo */}

.grid-container { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 900px; margin: auto; }

/* O container principal que centraliza todo o conteúdo da página */
.container-principal {
    width: 100%;  /* Ocupa 100% da largura disponível, até atingir o limite definido abaixo. */
    max-width: 1000px; /* Define a largura máxima do seu conteúdo. */
    margin: 0 auto; /* A "mágica" da centralização: */
    padding: 2rem;/* Espaçamento interno (respiro) para que o conteúdo não cole nas bordas. */
    padding-top: 100px;  /* Espaçamento extra no topo e no fundo para compensar seu header e footer fixos. */
    padding-bottom: 100px; /* Espaçamento extra no topo e no fundo para compensar seu header e footer fixos. */
}

/* PAGINAS DE CADASTRO E LOGIN */
    .main-system {display: flex;    align-items: center;    justify-content: center;    padding: 2rem;     padding-top: 90px;  }
      .main-card {
            background: #000;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 3rem;
            backdrop-filter: blur(20px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            position: relative;
            overflow: hidden;
        }
    .cards-system {background: rgba(20, 20, 20, 0.8);  border: 1px solid rgba(255, 255, 255, 0.1);  border-radius: 24px;  padding: 3rem;  width: 100%;    max-width: 450px;
      backdrop-filter: blur(20px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); position: relative;    overflow: hidden;  align-content: center;  }
    .icon-card {   width: 60px; height: 60px; background: var(--accent-destaque);  border-radius: 16px; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center;
      color: black;  font-size: 1.5rem;  }
    .card-link {    color: var(--accent-destaque);    text-decoration: none;  font-weight: 600; transition: color 0.3s ease;    }
    .card-link:hover { color: var(--accent-destaque);   text-decoration: underline;}
    .card-label { color: #9ca3af; font-size: 0.9rem; line-height: 1.5;     }
    .card-label a {  color: var(--accent-destaque);   text-decoration: none;   }
    .card-label a:hover { color: var(--accent-destaque);  text-decoration: underline;  }
    
    .system-header {   text-align: center; margin-bottom: 2.5rem;   position: relative;  z-index: 2;   }
    .system-title {    font-size: 1.8rem;  font-weight: 700;  color: white;  margin-bottom: 0.5rem;   }
    .system-subtitle {  color: #9ca3af;  font-size: 1rem;   }
    
    .highlight-text { color: var(--color-attention);        font-weight: 700;        }
/* Form Styles */
.system-form {    display: flex;  flex-direction: column;  gap: 1.5rem;  position: relative;  z-index: 2;   }
.form-group {  display: flex;    align-items: center; color: var(--accent-destaque);     gap: 0.75rem; /* espaço entre ícone e input */ border-color: #000;}
.input-icon { color: var(--accent-destaque);   font-size: 1.3rem;  flex-shrink: 0; /* evita o ícone encolher */}
.form-input { flex: 1;  padding: 1rem;  background: rgba(255, 255, 255, 0.05);  border: 1px solid rgba(255, 255, 255, 0.1);  border-radius: 12px;  color: white;
              font-size: 1rem;   transition: all 0.3s ease;}
.form-input:focus {  outline: none;  border-color: var(--accent-destaque);   background: rgba(255, 255, 255, 0.08);}
.form-input::placeholder {color: var(--color-text-secondary);}
.form-select {flex: 1;  padding: 1rem;  background: rgba(255, 255, 255, 0.05);  border: 1px solid rgba(255, 255, 255, 0.1);  border-radius: 12px;  color: white;
              font-size: 1rem;   transition: all 0.3s ease;}
.form-label{color:var(--accent-destaque);}

       /* Security Tips */
        .security-tips {
            background: rgba(59, 130, 246, 0.05);
            border: 1px solid rgba(59, 130, 246, 0.1);
            border-radius: 16px;
            padding: 1.5rem;
            margin-top: 2rem;
        }

        .security-title {
            color: #3b82f6;
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .security-list {
            list-style: none;
            padding: 0;
        }

        .security-list li {
            color: #9ca3af;
            font-size: 0.85rem;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .security-list i {
            color: #3b82f6;
            font-size: 0.75rem;
        }
        
        /* Tabs */
        .tabs-container {
            background: rgba(20, 20, 20, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 2rem;
            backdrop-filter: blur(20px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        .tabs-header {
            display: flex;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 16px;
            padding: 0.5rem;
        }

        .tab-button {
            flex: 1;
            background: transparent;
            border: none;
            color: #9ca3af;
            font-size: 1.1rem;
            font-weight: 600;
            padding: 1rem 1.5rem;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }


        .tab-button.active {
            background: var(--accent-destaque);
            color: black;
        }

        .tab-button.active::before {
            display: none;
        }

/* Footer Links */
        .form-footer { text-align: center; margin-top: 2rem; position: relative; z-index: 2;}
        .footer-text { color: #6b7280; margin-bottom: 1rem;  }
        .divider {     display: flex;  align-items: center;  margin: 1.5rem 0; color: #6b7280;  font-size: 0.9rem; }
        .divider::before, .divider::after { content: '';    flex: 1;    height: 1px; background: rgba(255, 255, 255, 0.1);  }
        .divider span { padding: 0 1rem;}
/* checkbox */   
        .custom-checkbox { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; cursor: pointer;}
        .custom-checkbox input { opacity: 0; position: absolute; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2;}
        .checkmark { position: absolute; top: 0; left: 0; width: 18px; height: 18px; border: 1px solid var(--accent-destaque);  border-radius: 4px; background: rgba(255, 255, 255, 0.05); transition: all 0.3s ease;}
        .checkmark::after { content: "✓"; color: white; font-size: 11px; font-weight: bold; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none;}
        /* Quando marcado */
        .custom-checkbox input:checked + .checkmark { border-color: var(--accent-destaque); ;}
        .custom-checkbox input:checked + .checkmark::after { display: block;}

.user-btn { background: rgba(255, 255, 255, 0.05);  border: 5px solid rgba(255, 255, 255, 0.1);  border-radius: 12px;  padding: 0.75rem 1rem;  color: white;  display: flex;
            align-items: center;  gap: 0.5rem;  cursor: pointer;  transition: all 0.3s ease;}


      
        /* Stats Grid */
           
        .stats-grid { display: grid;  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));     gap: 2rem;      margin-bottom: 3rem; position: relative;    z-index: 2;   }
        .stat-card {background: black;  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 2rem;  position: relative;    overflow: hidden;
            transition: all 0.3s ease;      }
        .stat-card:hover {  transform: translateY(-4px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);    }
        .stat-card::before { content: '';     position: absolute;      top: 0;        left: 0;     width: 4px;       height: 100%;     background: var(--accent-color);      }
        .stat-card.verde::before { background: #22c55e; }
        .stat-card.azul::before { background: #3b82f6; }
        .stat-card.roxo::before { background: #a855f7; }
        .stat-header {  display: flex;    align-items: center;   justify-content: space-between; margin-bottom: 1.5rem;        }
        .stat-info h3 {  color: #9ca3af;    font-size: 0.9rem;     font-weight: 500;    text-transform: uppercase;        letter-spacing: 0.05em;   margin-bottom: 0.5rem;        }
        .stat-value {   font-size: 1rem; font-weight: 800;     color: white;    line-height: 1;      }
        .stat-icon { width: 60px;   height: 60px;    border-radius: 16px;    display: flex;    align-items: center;    justify-content: center;   font-size: 1.5rem;    color: white;        }
        .stat-icon.verde { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
        .stat-icon.azul { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
        .stat-icon.roxo { background: rgba(168, 85, 247, 0.2); color: #a855f7; }
        .stat-footer { color: #6b7280;  font-size: 0.85rem;   margin-top: 1rem;   }


/*CARDS PAGINA INICIAL*/
.game-menu {display: grid;    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; width: 100%; box-sizing: border-box;}

/* Cada botão do jogo */
.game-button { display: flex; align-items: center; padding: 1rem; border-radius: 12px; text-decoration: none; color: white; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.game-button .icon { font-size: 1.8rem; margin-right: 1rem; width: 30px; text-align: center; }
.game-button .title { font-size: 1rem; font-weight: 700; flex-grow: 1; color:white; }
.game-button .play-btn { background: var(--accent-destaque); color:black; padding: 0.5rem 1.5rem; border-radius: 10px; font-weight: 600; }
.game-menu:hover{color:#000; }
.game-button.bicho { background: var(--bicho-bg); }
.game-button.raspadinha { background: var(--raspadinha-bg); }
.game-button.bingo { background: var(--bingo-bg); }
.game-button.rifas { background: var(--rifas-bg); }
.game-button.saladebingo { background: var(--saladebingo-bg); }



/* =================================================================
   ESTILOS GERAIS DE CARDS (UNIFICADO)
   ================================================================= */

.cards-grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));  gap: 2rem;  padding: 0 2rem;   /* 👉 afasta os cards das bordas */
  margin: 0 auto;   /* 👉 centraliza dentro do container */  max-width: 1400px; /* 👉 opcional, limita largura máxima */}
.card {background-color: var(--color-surface);  border: 1px solid var(--color-border);  border-radius: 12px;  overflow: hidden;  transition: all 0.3s ease;
  text-decoration: none;  display: flex;  flex-direction: column;  box-shadow: var(--shadow-sm);}
.card:hover {  transform: translateY(-5px);  box-shadow: var(--shadow-md);  border-color: var(--accent-destaque);}
.card-image-wrapper {  height: 200px;  position: relative;  background-color: var(--color-background);}
.card-image {  width: 100%;  height: 100%;  object-fit: cover;  transition: transform 0.3s ease;}
.card-content {padding: 1.5rem;  flex-grow: 1;  display: flex;  flex-direction: column;  background-color: var(--color-surface);}
.card-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.3; color: var(--color-text-primary);}
.card-description {  color: var(--color-text-secondary); font-size: 0.9rem; line-height: 1.5; flex-grow: 1;}
.card:hover .card-image { transform: scale(1.05);}
.card-price-badge {position: absolute; top: 1rem; right: 1rem; color: black; padding: 0.5rem 1rem;background: var(--accent-destaque); border-radius: 10px; font-weight: 700;
  font-size: 0.9rem;}
.card-features {display: flex; gap: 0.5rem; margin-bottom: 1rem;}
.feature-tag {background: rgba(99, 102, 241, 0.1); color: #a5b4fc; padding: 0.25rem 0.5rem; border-radius: 6px; font-size: 0.75rem; font-weight: 500;}
.progress-bar {background: #333; border-radius: 8px; overflow: hidden; height: 8px; margin-bottom: 0.5rem;}
.progress { height: 100%; border-radius: 8px;}
.card-info {display: flex; justify-content: space-between; font-size: 0.8rem; color: #9ca3af;}
.card-button {display: flex; align-items: center; justify-content: center;  gap: 0.5rem;  width: 100%;  margin-top: 1.5rem;  text-align: center;  color: black;  padding: 0.8rem;
  border-radius: 12px; font-weight: 600; transition: all 0.2s; border: none; cursor: pointer; text-decoration: none; background-color: var(--accent-destaque);}
.card-button:hover {color:black; }
/* --- BOTOES DE COMPRA  --- */  
.buy-button { display: block; width:100%; text-align: center; background: var(--accent-destaque); color: black; padding: 1rem; border-radius: 8px; font-weight: 600; transition: background 0.2s; border:none; cursor:pointer; }
 .buy-button:hover {transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
 .buy-button:disabled {opacity: 0.6; cursor: not-allowed; transform: none; }
 .input-group { display: flex; align-items: center; border: 1px solid #555; border-radius: 1px; overflow: hidden; }
 .input-group button { background:var(--accent-destaque); border: none; color: black; width: 40px; height: 40px; font-size: 1.5rem; cursor: pointer; }
 .input-group input { flex-grow: 1; height: 40px; text-align: center; background: #fff; border-radius:0px; border: none; color: black; font-size: 1.2rem; }
 .input-group:hover{background:#fff; color: black;}

 /* =================================================================
   ESTILOS DE CARDS BINGO
   ================================================================= */
 .bingo-date { color: var(--color-text-primary); font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
  
  /* --- COTAS PREMIADAS DA RIFA --- */
  .premios-section { margin-top: 2rem; background:var(--color-surface); border-radius: 12px; padding: 1.5rem; border: 1px solid #facc15; }
  .premios-list { max-height: 200px; overflow-y: auto; padding-right: 0.5rem; }
  .premio-item { display: flex; justify-content: space-between; align-items: center; background: var(--color-background); padding: 0.75rem; border-radius: 8px; margin-bottom: 0.5rem; }
  .premio-texto { font-weight: 700; color: var(--color-text-primary); }
  .premio { font-weight: 600; color: var(--color-success); }
  .premio-status { font-size: 0.8rem; padding: 0.25rem 0.5rem; border-radius: 6px; }
  .premio-status.disponivel { background: var(--color-success); color: black; }
  .premio-status.ganhou { background: var(--accent-destaque); color: #111; }
 
 /* Button */
 

    .btn {  background: var(--accent-destaque);  color: black;  border: none;  padding: 1rem;  border-radius: 12px;  font-size: 1rem;  font-weight: 700;  cursor: pointer;  transition: all 0.3s ease; display: flex;  align-items: center;  justify-content: center;  gap: 0.5rem;  position: relative;  overflow: hidden;   }
    .btn:hover {    background:var(--accent-destaque);   color:black;    transform: translateY(-2px);   }
    .btn:disabled {  opacity: 0.6;  cursor: not-allowed;  transform: none;   }
    .btn::before {  content: '';  position: absolute;  top: 0;  left: -100%;  width: 100%;  height: 100%;  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                    transition: left 0.5s ease;   }
    .btn:hover::before {  left: 100%;   }
    
    .btn-login {  background: var(--accent-destaque);  color: black;  border: none;  padding: 1rem;  border-radius: 12px;  font-size: 1rem;  font-weight: 700;  cursor: pointer;  transition: all 0.3s ease;
            display: flex;  align-items: center;  justify-content: center;  gap: 0.5rem;  position: relative;  overflow: hidden;   }
    .btn-login:hover {    background:var(--accent-destaque);    color:black;    transform: translateY(-2px);   }

/* --- SEÇAO DE PREMIOS/PREMIADOS/BRINDES  --- */  
 .premios-section { margin-top: 0.5rem; background:var(--color-surface); border-radius: 12px; padding: 1.5rem; border: 1px solid #facc15; }
 .tipo-premio { font-weight: 700; color: #facc15; }
 .nome-premio { font-weight: 600; color: #22c55e; }
 
 /* --- SEÇAO MEUS PRODUTOS - RIFAS - BINGOS  --- */  
    .meu-item {background: var(--color-surface);  border: 1px solid #333; border-radius: 16px; margin-bottom: 2rem; overflow: hidden;}
    .meu-item-header { display: flex;  align-items: center;  gap: 1.5rem;   padding: 1.5rem; background: var(--color-surface); }
 



/* =================================================================
   RESPONSIVIDADE E SCROLL HORIZONTAL
   ================================================================= */
   
   /* Hide bottom navigation on desktop */
@media (min-width: 769px) {  
    .bottom-navigation {  display: none;}
    .game-menu {grid-template-columns: repeat(3, 1fr); /* 3 por linha em desktop */}
}

@media (min-width: 481px) and (max-width: 768px) {
    .game-menu {
   grid-template-columns: repeat(2, 1fr); /* 2 por linha em tablet */
    }
}

@media (max-width: 768px) {
    .page-section {padding: 0.1rem; margin-top: 80px; }
    .main-container { gap: 0.75rem;  padding-top:80px;  }
    .cards-grid { display: flex;    overflow-x: auto;    scroll-snap-type: x mandatory;    gap: 1rem;    margin: 0; /* 👈 remove o -1rem que cortava */    -webkit-overflow-scrolling: touch;  }
    .cards-grid > * {     flex: 0 0 95%; /* 👈 aumenta um pouco, ocupa 85% da tela */     scroll-snap-align: start;     scroll-snap-stop: always;  }
    .bingo-date { color: var(--color-text-primary); font-size: 0.8rem; font-weight: 600; margin-bottom: 1rem; }

  .mobile-menu-btn {  display: flex;  align-items: center;  justify-content: center;  width: 40px;  height: 40px;  color: white;  font-size: 1.3rem;  cursor: pointer;  border-radius: 8px;
  transition: background-color 0.3s ease;  margin-right: 1rem;  flex-shrink: 0;  }
  .mobile-menu-btn:hover {  background: rgba(255, 255, 255, 0.1);  }
  .nav-menu {  display: none;  }
  .header-actions {  display: flex;  align-items: center;  gap: 0.5rem;  flex-shrink: 0;  }
  .balance-display {  padding: 0.5rem 0.75rem;  font-size: 0.85rem;  min-width: auto;  border-radius: 8px;  }
  .btn-deposit { padding: 0.5rem 0.75rem;  font-size: 0.85rem;  border-radius: 8px;  min-width: auto;  }
  .deposit-text {  display: none;  }
  .user-btn {  padding: 0.5rem 0.75rem;  font-size: 0.85rem;  border-radius: 8px;  min-width: auto;  }
  .user-name {  display: none;  }
  .dropdown-arrow {  font-size: 0.8rem;  }
  .btn-login {  font-size: 0.85rem;  padding: 0.7rem; border-radius:8px;  }
 .btn {  font-size: 0.85rem;  padding: 0.7rem; border-radius:8px;  }
  .dropdown-menu { right: 0;  min-width: 180px;  margin-top: 0.25rem;  }
  .dropdown-item {  padding: 0.6rem 0.8rem;  font-size: 0.85rem;  }
  
    .app-download-banner {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  gap: 0.5rem;
  }
  
  .download-btn {
  padding: 0.3rem 0.8rem;
  font-size: 0.75rem;
  }
  
  .close-banner {
  right: 0.75rem;
  font-size: 1.1rem;
  }
  
  .header.with-banner {
  top: 40px;
  }
  
  .install-modal-content {
  margin: 1rem;
  max-height: 85vh;
  }
  
  .install-modal-header {
  padding: 1.5rem 1.5rem 1rem;
  }
  
  .install-benefits,
  .install-instructions,
  .install-modal-footer {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  }
  
  .platform-tabs {
  flex-direction: column;
  }

  /* Adjust body padding for bottom nav */
  body {
  padding-bottom: 85px !important;
  }
  
   .cotas-premiadas-section {padding: 0.5rem;}
}








/* ===============================================================
   ESTILOS GLOBAIS USANDO AS VARIÁVEIS
   =============================================================== */

body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  transition: background-color 0.3s, color 0.3s;
  padding-bottom: calc(var(--bottom-nav-height, 65px) + 20px);
}

/* Header Superior */
.header-simplified {
  background-color: var(--card-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid var(--border-color);
}

.header-logo img { height: 40px; }
.header-actions { display: flex; align-items: center; gap: 0.8rem; }


/* Seletor de Tema */
.theme-switcher-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.theme-switcher-btn:hover {
  color: var(--accent-destaque);
  border-color: var(--accent-destaque);
  transform: rotate(15deg);
}


/* Navegação menu fOOTER */

.bottom-navigation .nav-item {
  color: #fff;}
.bottom-navigation .nav-item.active {
  color: var(--accent-destaque);
}



.balance-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.balance-item .label { color: var(--text-secondary); }
.balance-item .amount { color: var(--text-primary); }

.action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;}
.action-btn { padding: 1rem; border-radius: 12px; border: none; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.action-btn.deposit { background-color: var(--accent-red); color: white; }
.action-btn.withdraw { background-color: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border-color); }










/* assets/css/frontend.css */


/* =================================================================
   2. RESET E ESTILOS GLOBAIS
   ================================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-background);
  color: var(--color-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  padding-bottom: calc(var(--bottom-nav-height, 65px) + 20px);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary-hover);
}




/* =================================================================
   3. ESTRUTURA E LAYOUT
   ================================================================= */







/* =================================================================
   4. COMPONENTES (BOTÕES, CARDS, ETC.)
   ================================================================= */

/* --- Botões --- */


.btn-primary {
  background-color: var(--color-primary);
  color: white;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}


/* =================================================================
   5. TEMA SWITCHER (BOTÃO DE TROCA DE TEMA)
   ================================================================= */
.theme-switcher {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--color-text-secondary);
  transition: all 0.3s ease;
}

.theme-switcher:hover {
  color: var(--color-primary);
  transform: rotate(15deg);
}

.theme-switcher .bi-sun-fill { display: none; }
.theme-switcher .bi-moon-fill { display: block; }

body.dark-mode .theme-switcher .bi-sun-fill { display: block; }
body.dark-mode .theme-switcher .bi-moon-fill { display: none; }




/* Header Styles */
.header {
  background: var(--color-contraste);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1rem 0;
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo Styles - Apenas logo, sem texto */
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
}

.logo-image {
  height: 45px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  transition: all 0.3s ease;
}

.logo-image:hover {
  transform: scale(1.02);
}

.logo-icon {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 
  0 8px 20px rgba(34, 197, 94, 0.3),
  0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.logo-icon:hover {
  box-shadow: 
  0 12px 30px rgba(34, 197, 94, 0.4),
  0 6px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

/* Sidebar Logo Styles - Apenas logo, sem texto */
.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-logo-image {
  height: 40px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}

.sidebar-logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* App Download Banner */
.app-download-banner {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.app-download-banner i {
  font-size: 1rem;
}

.download-btn {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 0.5rem;
}

.download-btn:hover {
  background: rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

.close-banner {
  position: absolute;
  right: 1rem;
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  padding: 0.25rem;
  border-radius: 4px;
}

.close-banner:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}


.header.with-banner {
  top: 45px;
}

/* Install Modal Styles */
.install-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1rem;
}

.install-modal.active {
  display: flex;
}

.install-modal-content {
  background: linear-gradient(145deg, #1a1a1a 0%, #2a2a2a 100%);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 20px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.install-modal-header {
  padding: 2rem 2rem 1rem;
  text-align: center;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.install-modal-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.8rem;
  color: white;
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3);
}

.install-modal-header h2 {
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.install-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 0.5rem;
  border-radius: 8px;
}

.install-modal-close:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

.install-benefits {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.benefits-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #22c55e;
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.benefits-title i {
  font-size: 1.2rem;
}

.benefits-list {
  display: grid;
  gap: 0.75rem;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #e5e7eb;
  font-size: 0.9rem;
}

.benefit-item i {
  color: #22c55e;
  font-size: 1rem;
  flex-shrink: 0;
}

.install-instructions {
  padding: 1.5rem 2rem;
}

.platform-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.platform-tab {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #9ca3af;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.platform-tab.active {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: rgba(34, 197, 94, 0.5);
  color: white;
}

.platform-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.platform-content {
  display: none;
}

.platform-content.active {
  display: block;
}

.instruction-step {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

.step-number {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.step-content h4 {
  color: white;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
}

.step-content p {
  color: #9ca3af;
  font-size: 0.9rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.step-content p i {
  color: #22c55e;
}

.desktop-note {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
}

.desktop-note .platform-tab {
  background: none;
  border: none;
  color: #60a5fa;
  padding: 0;
  margin-bottom: 0.5rem;
  justify-content: flex-start;
  cursor: default;
}

.desktop-note p {
  color: #e5e7eb;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.4;
}

.install-modal-footer {
  padding: 1.5rem 2rem 2rem;
  text-align: center;
}

.install-understand-btn {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border: none;
  padding: 0.875rem 2rem;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.install-understand-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

/* Bottom Navigation Styles - NEW */
.bottom-navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #161F2C;
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.5rem 0;
  z-index: 999;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.bottom-nav-container {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 1rem;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.25rem;
  text-decoration: none;
  color: #9ca3af;
  transition: all 0.3s ease;
  border-radius: 12px;
  min-width: 60px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.bottom-nav-item i {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
  transition: all 0.3s ease;
}

.bottom-nav-item span {
  font-size: 0.7rem;
  font-weight: 500;
  text-align: center;
  transition: all 0.3s ease;
}

.bottom-nav-item:hover {
  color: #22c55e;
  transform: translateY(-2px);
}

.bottom-nav-item.active {
  color: #22c55e;
}

.bottom-nav-item.active i {
  transform: scale(1.1);
}

/* Special styling for deposit button */
.bottom-nav-item.deposit-btn {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border-radius: 16px;
  padding: 0.75rem 0.5rem;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
  transform: translateY(-4px);
}

.bottom-nav-item.deposit-btn:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
  transform: translateY(-6px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.bottom-nav-item.deposit-btn i {
  font-size: 1.4rem;
}

.bottom-nav-item.deposit-btn span {
  font-weight: 600;
  font-size: 0.75rem;
}

/* Special styling for register button */
.bottom-nav-item.register-btn {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border-radius: 16px;
  padding: 0.75rem 0.5rem;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.bottom-nav-item.register-btn:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.bottom-nav-item.register-btn i {
  font-size: 1.4rem;
}

.bottom-nav-item.register-btn span {
  font-weight: 600;
  font-size: 0.75rem;
}

/* Badge for notifications (optional) */
.bottom-nav-item::after {
  content: '';
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bottom-nav-item.has-notification::after {
  opacity: 1;
}


.mobile-menu-btn {
  display: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.mobile-menu-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-link {
  color: #9ca3af;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.nav-link:hover {
  color: #ffffff;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #22c55e;
  transition: width 0.3s ease;
}

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








.balance-display {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-destaque);
  font-weight: 600;
}

.btn-deposit {
  background:var(--accent-destaque);
  color: black;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-deposit:hover {
  background: var(--accent-destaque);
  transform: translateY(-1px);
}

.user-dropdown {
  position: relative;
}



.dropdown-arrow {
  transition: transform 0.3s ease;
}

.user-dropdown.active .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 200px;
  background: rgba(20, 20, 20, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 100;
}

.user-dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: #e5e7eb;
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.dropdown-item:hover {

  color: var(--accent-destaque);
}

.dropdown-item.logout {
  color: #ef4444;
}

.dropdown-item.logout:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0.5rem 0;
}

/* Mobile Sidebar */
.mobile-sidebar {  position: fixed;  top: 0;  left: 0;  width: 280px;  height: 100vh;  background: rgba(15, 15, 15, 0.98);  backdrop-filter: blur(20px);  border-right: 1px solid rgba(255, 255, 255, 0.1);  transform: translateX(-100%);  transition: transform 0.3s ease;  z-index: 1100;  overflow-y: auto;}
.mobile-sidebar.active {  transform: translateX(0);}
.sidebar-header {  display: flex;  align-items: center;  justify-content: space-between;  padding: 1.5rem 1rem;  border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
.close-btn {  background: none;  border: none;  color: #9ca3af;  font-size: 1.5rem;  cursor: pointer;}
.sidebar-nav {  padding: 1rem 0;}
.sidebar-item {  display: flex;  align-items: center;  gap: 0.75rem;  padding: 0.75rem 1.5rem;  color: #e5e7eb;  text-decoration: none;  background: none;
  border: none;  width: 100%;  text-align: left;  cursor: pointer;  transition: all 0.3s ease;}
.sidebar-item:hover {  background: rgba(34, 197, 94, 0.1);  color: #22c55e;}
.sidebar-item.logout {  color: #ef4444;}
.sidebar-item.logout:hover {  background: rgba(239, 68, 68, 0.1);}
.sidebar-divider {  height: 1px;  background: rgba(255, 255, 255, 0.1);  margin: 1rem 0;}
.mobile-backdrop {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: rgba(0, 0, 0, 0.5);  backdrop-filter: blur(4px);  opacity: 0;
  visibility: hidden;  transition: all 0.3s ease;  z-index: 1050;}
.mobile-backdrop.active {  opacity: 1;  visibility: visible;}