/**
 * 🎯 CSS PARA CORRIGIR SUBMENUS MOBILE - APLICANDO LAYOUT DA LANDING
 * ===================================================================
 * 
 * Aplica o mesmo CSS da landing (que funciona) em todas as páginas da Lotofácil
 */

/* ⚡ CSS EXATO DA LANDING - FUNCIONANDO PERFEITAMENTE */

/* Submenu para mobile */
.mobile-dropdown {
  display: none !important; /* ⚡ ESCONDIDO por padrão - igual à landing */
  background: rgba(168, 85, 247, 0.05) !important;
  border-left: 3px solid rgba(168, 85, 247, 0.3) !important;
  margin-left: 20px !important;
}

.mobile-dropdown.show {
  display: block !important; /* ⚡ VISÍVEL quando ativo - igual à landing */
}

.mobile-dropdown a {
  padding: 10px 20px 10px 40px !important;
  font-size: 0.875rem !important; /* ⚡ REDUZIDO: 14px - igual à landing */
  color: #cbd5e1 !important;
}

.mobile-dropdown a:hover {
  color: #A855F7 !important;
  background: rgba(168, 85, 247, 0.1) !important;
}

.mobile-dropdown a.active {
  color: #00E38C !important;
  background: rgba(0, 227, 140, 0.15) !important;
}

/* ⚡ RESPONSIVIDADE PARA DIFERENTES TAMANHOS */
@media (max-width: 480px) {
  .mobile-dropdown a {
    padding: 8px 16px 8px 32px !important;
    font-size: 0.8rem !important; /* ⚡ 13px para mobile pequeno */
  }
}

@media (max-width: 360px) {
  .mobile-dropdown a {
    padding: 6px 12px 6px 24px !important;
    font-size: 0.75rem !important; /* ⚡ 12px para mobile muito pequeno */
  }
}